.copertina{width: 100%; height: 560px; background: url('../imgs/copertina-pav-xxl.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
.copertina-webp{width: 100%; height: 560px; background: url('../imgs/copertina-pav-xxl.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}

.green-block-container{position: relative}
.green-block{max-width: 464px; position: absolute; top:234px; background-color: rgba(94, 135, 90, 0.75);}

h1{
  color: #fff;
  text-transform: uppercase;
  padding: 50px 50px 0 50px;
  font-size: 3.4em;
  }

.green-title{padding: 16px 50px 20px 50px;
  font-size: 1.6em;
  color: #71d244;
  text-transform: uppercase;
}
.green-title2{
  padding: 86px 50px 0 50px;
  text-align: right;
  font-size: 1.2em;
  color: #fff;
}
.arw {padding-top: 20px; padding-bottom: 36px; text-align: center}
.arw svg{width:50px; fill:#fff}

.box-intro{width:100%; /* background-color: var(--lightgray); */ padding-top: 170px; padding-bottom: 20px}
.titolo-pagina {font-size: 3em; color: #000; text-transform: uppercase;}
.subtitolo-pagina {font-size: 1.4em; color: #71d244; text-transform: uppercase; margin-top:6px}
.box-testo-container{padding:40px;}
.box-testo-container p {font-size: 1.2em}


.bg-green{background-color: var(--verdone); color: #fff}
.bg-green .titolo-pagina{ color:#fff }
.bg-grey{background-color: #f1efed;}
.tribox {display: flex; align-items: flex-start; justify-content: center; /* border: green 2px solid */ }
.tribox p {padding-bottom: 0; margin-bottom: 0}
.tribox ul{padding-left:0; margin-left:0;}
.tribox div {width:290px; margin: 30px}
.tribox img { /* border:red 1px solid; */}
/* .modal-content{border-radius: 0; opacity: 0.8; backdrop-filter: blur(4px)} */

.strutture{display: flex; align-items: flex-start; justify-content: center}
.strutture > div {padding: 20px; width: 450px}
.strutture-title{padding-top:10px; padding-bottom: 15px; font-weight: 600; font-size: 1.6em}
.last-block{margin-bottom: 60px}

@media (max-width: 1400px) {
  .copertina{width: 100%; height: 560px; background: url('../imgs/copertina-pav-xl.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
  .copertina-webp{width: 100%; height: 560px; background: url('../imgs/copertina-pav-xl.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}
}

@media (max-width: 1200px) {
  .copertina{width: 100%; height: 560px; background: url('../imgs/copertina-pav-lg.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
  .copertina-webp{width: 100%; height: 560px; background: url('../imgs/copertina-pav-lg.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}
}

@media (max-width: 991px) {
    .copertina{width: 100%; height: 560px; background: url('../imgs/copertina-pav-md.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
    .copertina-webp{width: 100%; height: 560px; background: url('../imgs/copertina-pav-md.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}
    .blocco-hp-box{max-width: 90%;}
    .blocco-hp-titolo {font-size: 2.8em; text-transform: uppercase; padding-bottom: 30px}
    .blocco-hp-testo{padding-bottom: 30px; font-size: 1.4em}
    .tribox div {width:290px; margin: 20px}
    .strutture-title{font-size: 1.4em}
}

@media (max-width: 767px) {
    .copertina{width: 100%; height: 560px; background: url('../imgs/copertina-pav-sm.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
    .copertina-webp{width: 100%; height: 560px; background: url('../imgs/copertina-pav-sm.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}
    .image-map-container{position:relative; display: inline-block; margin-left: auto; margin-right: auto;}
    .image-map-container svg{width: 30px; height: 30px; display: inline; /* border: red 1px solid */ }
    .image-map-container span{font-size: 0.8em; color:#f00; display: none}
    .modal-title{text-transform: uppercase;}
    #point1{position: absolute; top:30px; left:120px; display: inline-block; z-index: 11; line-height: 0.2em; cursor:pointer}
    #point2{position: absolute; top:75px; left:60px; display: inline-block; z-index: 12; line-height: 0.2em; cursor:pointer}
    #point3{position: absolute; top:106px; left:80px; display: inline-block; z-index: 13; line-height: 0.2em; cursor:pointer}
    #point4{position: absolute; top:142px; left:100px; display: inline-block; z-index: 14; line-height: 0.2em; cursor:pointer}
    #point5{position: absolute; top:220px; left:110px; display: inline-block; z-index: 15; line-height: 0.2em; cursor:pointer}
    #point6{position: absolute; top:290px; left:110px; display: inline-block; z-index: 16; line-height: 0.2em; cursor:pointer}
    #point7{position: absolute; top:175px; left:170px; display: inline-block; z-index: 17; line-height: 0.2em; cursor:pointer}
    #point8{position: absolute; top:165px; left:240px; display: inline-block; z-index: 18; line-height: 0.2em; cursor:pointer}
    
    .tribox div {font-size: 0.9em margin: 10px}
    .tribox strong{font-size: 0.8em}
    .strutture-title{font-size: 1.2em}
}

@media (max-width: 575px) {
  .copertina{width: 100%; height: 410px; background: url('../imgs/copertina-pav-xs.jpg') no-repeat; background-position: center; background-size: cover; overflow: visible;}
  .copertina-webp{width: 100%; height: 410px; background: url('../imgs/copertina-pav-xs.webp') no-repeat; background-position: center; background-size: cover; overflow: visible;}
  .green-block{max-width: 300px; position: absolute; top:234px;}
  h1{
  color: #fff;
  text-transform: uppercase;
  padding: 20px 20px 0 20px;
  font-size: 2.6em;
  }

  .green-title{padding: 16px 20px 0 20px;
    font-size: 1.6em;
    color: #71d244;
    text-transform: uppercase;
  }
  .arw {padding-top: 40px; padding-bottom: 26px; text-align: center}
  .box-intro{ padding-top: 280px}
  .titolo-pagina {font-size: 2.4em;}
  .box-testo-container{padding:20px}
  .box-testo-container p {font-size: 1em}
  .tribox {display:inline-block;}
  .tribox div{margin: 10px auto 30px auto}

  .strutture{display: inline-block;}
  .strutture > div {padding: 20px; width: auto}
}