/* Stili vari */ 
.gradientenatale {
    background: -webkit-linear-gradient(right, #9C914F, #748E54);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  
   }

   .gradienteestate {
  color: #ffefd0;
   }

   .gradienteestate2 {
    color: #eec703;
     }

   @media only screen and (min-width: 500px) {
    .gradienteestate{
   color: #696969;
    }
   }
   .stillsfondo-natale {

    background-color: #5B85AA;
    background-image: none;
   }

   .stillsfondo-estate {
    background-color: white;
    background-image: none;
   }

   .font4050 {
    font-size: 40px !important;
   }
   
   .font4030 {
    font-size: 35px !important;
   }

   .heightauto {
    height: auto !important;
   }

@media only screen and (min-width: 1000px) {
    .font4050 {
        font-size: 50px !important;
    }
    .font4030 {
        font-size: 40px !important;
    }
}

@media only screen and (max-width: 370px) {
    .font4050 {
        font-size: 30px !important;
    }
}

.padb30 {
    padding-bottom: 30px;
}

.padt30 {
    padding-top: 30px;
}

.padb60 {
    padding-bottom: 60px;
}

.padt60 {
    padding-top: 60px;
}

.width120 {
    width: 120px !important;
}

   .sfondo-natale {
    background-image: linear-gradient(to top, #333333, #b7bff7);
    }

    .sfondo-estate {
        background-image: linear-gradient(to top, #cfe4ff, #cdecfd);
        }


    .pannellosingolo .colore-font2 {
        font-size: 16px;
        color:  #629ff5;
    }

   .nobottom {
    margin-bottom: 0px !important;
   }

   .notop {
    margin-top: 0px !important;
   }

   .nopadding {
    padding: 0px !important;
   }

   .margint60 {
    margin-top: 60px;
   }

   .marginb60 {
    margin-bottom: 60px;
   }

.fotostaff {
    background-image: url("admin/immaginipersonalizzate/odontoiatrika_staff.jpg") !important ;
}

.flexcenter {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.buttonbackgroundnatale {
    background-color: #353535;
    border: 2px solid #353535;
}

.testonero {
    color: black !important;
}


.grigiochiaro {
    color: rgb(241, 241, 241) !important;
}

.nobackground {
    background-image: none !important;
  }

.noborder {
    border: 0px solid white !important; 
}
  
.background-endo {
    background-image: linear-gradient(to top, #f9f7b6, #9494fd) !important;
}

.background-endo2 {
    background-color: #f6f6f6e8 !important;
}

.background-endo3 {
    background: -webkit-linear-gradient(left, #204c86, #7581df);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.background-procto {
    background-image: linear-gradient(to top, #adbbda, #fae3f5) !important;
}
.center-left {
    text-align: center;
    font-weight: 900;
}

@media only screen and (min-width: 1000px) {
    .center-left {
        text-align: left;

    }
}

/* Box rettangolo per promozione */
    /* Mobile */
    .box-promozionemain {
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box-promozionemain .figlio {
        width: 100%;
    }

    .box-promozionemain .rettangolo {
        border: solid 1px #353535;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 9px;
        border-style: dashed;
    }

    .box-promozionemain .info {
        font-size: 18px;
        font-family: Lato, Helvetica, Arial, sans-serif;
        text-align: center;
        font-weight: 700;
        color: #F46036;

    }

    .rettangolo .testo1 {
        font-size: 16px;
        font-weight: 400;
        font-family: Lato, Helvetica, Arial, sans-serif;
    }

    /* Desktop */
    @media only screen and (min-width: 1000px) {

        .box-promozionemain {
            align-items: flex-start;
            margin-right: 0;
            margin-left: 0;
            

        }

   

        .box-promozionemain .info {
            font-size: 19px;
            text-align: left;
            font-weight: 700;
    
        }
    }




/* Box denti più bianchi con position absolute */

    /* Mobile */

    .sbiancamento {
        display: flex;
        flex-direction: column;

        justify-content: space-between;
    }

    .sbiancamento img {
        width: 100%;
        height: auto;
        order: 2;
        object-fit: cover;
        height: 80vh;
    }

    .background-light {
        background-color: white;
        order:1;
    }

    .background-light h3 {
        font-size: 40px;
        color:black;
        text-align: left;
        font-family: Lato, helvetica, arial, sans-serif;
    }

    .background-light p {
        font-size: 15px;
        color: black;
        text-align: left;
    }

    .z1 {
        z-index: 1;
    }

    .z0 {
        z-index: 0;
    }

    .posrelative {
        position:relative !important;
    }

    .imagemobile {
        display: initial;
    }

    .imagedesktop {
        display: none;
    }


    /* Desktop */

    @media only screen and (min-width: 1000px) {
        .sbiancamento {
            flex-direction: row;
            padding-top: 9rem;
            padding-bottom: 9rem;
        }

        .sbiancamento img {
            width: 70%;
            height: 100%;
            left: 30%;
            position: absolute;
            object-fit: cover;
            top:0;
        }

        .background-light h3 {
            font-size: 50px;
            
        }
        
        .width45 {
            max-width: 45%;
        }
        .padding45 {
            padding: 45px;
        }

        .imagemobile {
            display: none;
        }
    
        .imagedesktop {
            display: initial;
        }
    }




/* Div step sbiancamento */

/* Mobile */
/* Colore bianco */
    .steps4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        color: white;
        max-width: 1400px;
        padding-right: 3rem;
        padding-left: 3rem;
    }

    .steps4 .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        flex: 1;
    }

    .step img {
        width: 85px;
    }

    .step .titolo {

        font-size: 22px;
        font-family: Lato, Helvetica, Arial, sans-serif;
        font-weight: 700;
        text-align: center;
        line-height: 30px;
    }

    .step .descrizione {
            font-size: 14px;
            text-align: center;
            color: rgb(237, 237, 237);
            line-height: 20px;
    }


    /* Desktop */

    @media only screen and (min-width: 1000px) {

        .steps4 {
            flex-direction: row;
            justify-content: space-between;
        }
        .step .titolo {
            font-size: 25px;
        }
    }


    /* Desktop */

    @media only screen and (min-width: 1000px) {

        .steps4 {
            flex-direction: row;
            justify-content: space-between;
        }
        .step .titolo {
            font-size: 25px;
        }
    }




/* Header sbiancamento estivo */

.imgestate {
    height: 130vh;
    width: 100vw;
   background-image: linear-gradient(to top, #0B55B7, #3C78B7);
    position: relative;
    left: calc(-50vw + 50%);
    margin-bottom: 80px;
  
  }

  .imgestate2 {
    height: 130vh;
    width: 100vw;
   background-image: linear-gradient(to top, #0B55B7, #3C78B7);
    position: relative;
    left: calc(-50vw + 50%);
    margin-bottom: 80px;
  
  }


  .imgestate .immagineestiva {
    height: 100%;
  background-image: url("/admin/immaginipersonalizzate/header-landing-estate.jpg");
  background-repeat: no-repeat;
  background-size: 130% 100%;
  z-index: inherit;
  overflow: hidden;
  }

  .imgestate2 .immagineestiva2 {
    height: 100%;
  background-image: url("/admin/immaginipersonalizzate/verticale-group.jpg");
  background-repeat: no-repeat;
  background-size: 130% 100%;
  z-index: inherit;
  overflow: hidden;
  background-position: right;
  }

  .imgestate .immagineestiva3 {
    height: 100%;
  background-image: url("/admin/immaginipersonalizzate/verticale-clinic.jpg");
  background-repeat: no-repeat;
  background-size: 130% 100%;
  background-position: right;
  z-index: inherit;
  overflow: hidden;
  }

  @media only screen and (min-width: 768px) {
    .imgestate .immagineestiva {
        background-image: url("/admin/immaginipersonalizzate/header-landing-orizzontale-estate.jpg");
        background-size: 130% 100%;
        background-position: right;
    }
    .imgestate2 .immagineestiva2 {
        background-image: url("/admin/immaginipersonalizzate/orizzontale-group.jpg");
        background-size: 100% 100%;
        background-position: right;
    }

    .imgestate2 {
        height: 90vh;
      
      }

    .imgestate .immagineestiva3 {
    background-image: url("/admin/immaginipersonalizzate/orizzontale-clinic.jpg");
    background-size: 130% 100%;
    background-position: right;
    }


  }

  @media only screen and (max-height: 500px) {
    .imgestate .immagineestiva {
        background-image: url("/admin/immaginipersonalizzate/header-landing-orizzontale-estate.jpg");
        background-size: 130% 100%;
        background-position: right;
    }
    .imgestate2 .immagineestiva2 {
        background-image: url("/admin/immaginipersonalizzate/orizzontale-group.jpg");
        background-size: 100% 100%;
        background-position: right;
    }

    .imgestate2 {
        height: 140vh;
      
      }

    .imgestate .immagineestiva3 {
    background-image: url("/admin/immaginipersonalizzate/orizzontale-clinic.jpg");
    background-size: 130% 100%;
    background-position: right;
    }


  }


.imgestate3 {
    height: 130vh;
    width: 100vw;
    background-image: url('/admin/immaginipersonalizzate/campagna-estiva-9-16.jpg');
    position: relative;
    left: calc(-50vw + 50%);
    margin-bottom: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 40%
}

.imgestate3 h1 {
    position: absolute;
    top: 6%;
    text-align: center;
    font-family: Lato,Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    color: white;
    font-weight: 900;
}

.imgestate3 a {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    width: 280px;
}

@media only screen and (min-width: 768px) {
    .imgestate3 {
        background-image: url("/admin/immaginipersonalizzate/campagna-estiva-16-9.jpg");
        background-size: 130% 100%;
    }

    .imgestate3 h1 {
        position: absolute;
        top: 6%;
        left: 0;
        right: 0;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        font-family: Lato,Arial, Helvetica, sans-serif;
        font-size: 4rem;
        color: white;
        font-weight: 900;
    }
}


@media only screen and (max-height: 500px) {
    .imgestate3 {
        background-image: url("/admin/immaginipersonalizzate/campagna-estiva-16-9.jpg");
        background-size: 130% 100%;
    }
}

  /* Buttons revisited */

    .button-numero-estate {
        margin-top: 3.5em; 
        /* background-color: #5dfdcb; */
        color: #000000; 
        width: 100%; 
        height: 60px;
    
        margin-right: auto;
        margin-left: auto; 
        display: flex;
        justify-content: left;
        align-items: center;
        line-height: 1.1;
        border: none;
        transition: opacity 0.3s ease-in-out;
        background-color: #ffc600;
        border-radius: 8px;
        box-shadow: 3px 3px 2px rgb(161, 161, 161);
        
        }

    .button-numero-estate:hover {
        opacity: 0.6;
        }


    .pulsante-richiedi-informazioni-estate {
        margin-top: 10px; 
        color: rgb(0, 0, 0); 
        width: 100%; 
        height: 60px;
        margin-right: auto;
        margin-left: auto; 
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.1;
        border: 2px solid #000000;
        background-color: #ffffff00;
        cursor: pointer;
        border-radius: 8px;


        }
    
    .pulsante-richiedi-informazioni-estate .testo {
        padding: 8.5px;
        width: fit-content;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        font-size: 17px;
        } 




/* Word Superimposed */

    .special-word {
        position: relative;
        z-index: 3;
        width: fit-content;
        color: rgb(251, 228, 72);
    }

    .special-word2 {
        position: relative;
        z-index: 3;
        width: fit-content;
        color: orange;
    }

    @media only screen and (min-width: 500px) {
        .special-word {
            color: orange;
        }
    }


    .special-word .icon1 {
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 20px;
        background-image: url("/admin/immaginipersonalizzate/sottolineato1.png");
        background-size: cover;
    }

    .special-word .icon2 {
        position: absolute;
        top: -20px;
        left: 80%;
        height: 40px;
        width: 40px;
        background-image: url("/admin/immaginipersonalizzate/sole1.png");
        background-size: cover;
    }
    .special-word2 .icon1 {
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 20px;
        background-image: url("/admin/immaginipersonalizzate/sottolineato1.png");
        background-size: cover;
    }

    .special-word2 .icon2 {
        position: absolute;
        top: -20px;
        left: 80%;
        height: 40px;
        width: 40px;
        background-image: url("/admin/immaginipersonalizzate/sole1.png");
        background-size: cover;
    }




/* Dove Siamo Box */

    .dovesiamobox {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 40px;
    }

    .dovesiamobox > img,
    .dovesiamobox > span[class*="fa-"],
    .dovesiamobox > span[class^="fa-"] {
        flex: 0 0 40px;
        max-width: 40px;
        text-align: center;
    }

    .dovesiamobox .testo {
        text-align: left;
        display: block;
    }

    .dovesiamobox .testo h3 {
        font-size: 18px;
        font-family: Lato, helvetica, arial, sans-serif;
        font-weight: 700;
    }



    
/* Testo in mezzo Header */
    .middletext {
        display: block;
        text-align: center;
        color: #707070;
        font-size: 16px;
        margin: 40px auto 0 auto;
    }

    @media only screen and (min-width: 768px) {

        .middletext {
            display: none;
        }
    }




/* Nuova sezione Offerte */

.offerte1 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.offerte1 .c1 {
    background-color: #efefef;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

    .offerte1 .c1 .img {
        border-radius: 8px;
        background-size: contain;
        width: 300px;
        max-width: 100%;
        height: 300px;

    }

    .c1 .header {
        font-size: 27px;
        font-family: Lato, helvetica, arial, sans-serif;
        font-weight: 900;
        line-height: 30px;
        max-width: 400px;
        width: 90%;
       }
    

    .offerte1 .iconep,
    .hidden-info .iconep {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 50px;
    }   

        .c1 .iconep .icone,
        .hidden-info .iconep .icone {
            display: flex;
            flex-direction: row;
            gap: 20px;
            max-width: 400px;
            width: 100%;
        }

            .c1 .iconep .icone img,
            .hidden-info .iconep .icone img {
                width: 30px;
                height: 30px;
                vertical-align:middle;
                
            }

            .iconep .icone .testo {
                font-family: Lato, helvetica, arial, sans-serif;
                text-align: left;
                font-size: 14px;
                line-height: 19px;
                font-weight: 400;
                vertical-align: middle;
                color: rgb(136, 136, 136);
            }

   .offerte1 .c1 .tabella,
   .hidden-info .tabella {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 400px;
    gap: 15px;
   }

   .linksbut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
   }

            .linksbut .aplbut {
            border-radius: 15px;
            background-color:#5175E5 !important;
            padding: 10px 10px 10px 10px;
            color: white;
            border: none;
            width: 150px;
            transition: opacity 0.3s ease-in-out;
            font-size: 13px;
            line-height: 18px;
            cursor: pointer;
        }

            .linksbut .aplbut2 {
            border-radius: 15px;
            background-color:#5176e500 !important;
            padding: 10px 10px 10px 10px;
            color: rgb(0, 0, 0);
            border: solid 1px black;
            width: 150px;
            transition: opacity 0.3s ease-in-out;
            font-size: 13px;
            line-height: 18px;
            cursor: pointer;
        }

        .aplbut:hover {
            opacity: 0.6;
        }

        .aplbut2:hover {
            opacity: 0.6;
        }

   @media only screen and (min-width: 768px) {
    .offerte1 {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
    }

    .offerte1 .c1 {
        width: 47%;
        max-width: 500px;
    }

   }




/* Imgheaders nuovi */

   .imgesbianco {
    height: 90vh;
    width: 100vw;
    background-image: url('/admin/immaginipersonalizzate/sbiancamento-orizzontale.jpg');
    position: relative;
    left: calc(-50vw + 50%);
    background-repeat: no-repeat;
    background-size: cover;  
  }

  .imgesdenti {
    height: 80vh;
    width: 100vw;
    background-image: url('/admin/immaginipersonalizzate/denti-orizzontale.jpg');
    position: relative;
    left: calc(-50vw + 50%);
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: 40%;
  }

  .imagessbiancamentolp {
    height: 80vh;
    width: 100vw;
    background-image: url('/admin/immaginipersonalizzate/breakyg16-9.webp');
    position: relative;
    left: calc(-50vw + 50%);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    background-position: 40%;
  }

  .imgesreception {
    height: 90vh;
    width: 100vw;
    background-image: url('/admin/immaginipersonalizzate/rec-orizzontale.jpg');
    position: relative;
    left: calc(-50vw + 50%);
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: 40%;
  }

  .headermiddle { 
    font-family: Lato, helvetica, arial, sans-serif;
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    line-height: 35px;
    padding: 100px 15px 0 15px;
  }

  .imagessbiancamentolp .ctas {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    justify-content: center;
    margin-top: 60px;
}

    .imagessbiancamentolp .ctas .bottonee {
        max-width: 250px;
        border-radius: 30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        flex: 1;
        width: fit-content;
        padding: 10px;
        width: 100%;
    }

    .imagessbiancamentolp .ctas .bottonee .buttone2 {
        display: flex; flex-direction: row; justify-content: center; align-items: center; 
        gap: 10px;
        width: fit-content;
    }

  @media only screen and  (max-width: 768px) {
    .imgesbianco {
        background-image: url('/admin/immaginipersonalizzate/sbiancamento-verticale.jpg');
        height: 80vh;
        background-size: cover;
        background-position: 50%;
    }

    .imgesdenti {
        background-image: url('/admin/immaginipersonalizzate/denti-verticale.jpg');
        height: auto;
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-position: 50%;
    }

    .imagessbiancamentolp {
        background-image: url('/admin/immaginipersonalizzate/breakyg9-16.webp');
        height: auto;
        aspect-ratio: 9 / 16;
        background-size: cover;
        background-position: 50%;
      }

    .imgesreception {
        background-image: url('/admin/immaginipersonalizzate/rec-verticale.jpg');
        height: 80vh;
        background-size: cover;
        background-position: 50%;
    }

    .headermiddle { 
        font-size: 30px;
      }

      .imagessbiancamentolp .ctas {
        margin-top: 30px;
    }
  }

  @media only screen and (max-height: 500px) {

    .imgesdenti {
        aspect-ratio: 9 / 25;
        height: auto;
        background-size: 100% 100%;
      }
    
      .imgesreception {
        height: 145vh;
      }

          .imagessbiancamentolp {
            height: auto;
            aspect-ratio: 9 / 25;
            background-size: 100% 100%;
      }
  }



  /* Promo sbiancamento logo */

  .boxpromo {
    margin: 2.5em auto 2.5em auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
    font-family: Lato, Helvetica, Arial, sans-serif;
    width: 90%;
    line-height: 20px;
    text-align: center;
    padding: 20px;
}

.boxpromo img {
    width: 100%;
    max-width: 310px;
}