/*  V.0.0.1 */




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    
}


html {
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

body {
    height: 100vh;
    height: auto;
    width: 100vw;
    max-width: 1920px;
    margin: 0 auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background-color: var(--bianco);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    }

section {
    height: 100%;
    height: 100dvh;
    width: 100%!important;
   
    position: relative;
    z-index: 50;
    flex-shrink: 0;
    
    
}

a {
    text-decoration: none;
    cursor: pointer !important;
    color: inherit;
}


/* TIPOGRAFIA */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


* {
    font-family: "Montserrat", sans-serif;
}

h1 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 3.2rem;
    color: var(--colore-testo-home);
}

h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.2rem;
    color: var(--colore-testo-home);
}


    h3 {
    font-size: 1.5rem !important;
    line-height: 2rem;
    font-weight: 300;
    color: var(--colore-testo-home)
}
@media screen and (max-width: 992px) {
h1, #cinque h1 {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: 300;
    color: var(--verde-scuro)
}
h2 {
    font-size: 1.1rem;
    color: var(--verde-medio);
    font-weight: 300;
    line-height: 1.3rem;
}

}


#otto h1 {
    height: 60px;
    display: flex;
    align-items: center;
}

#otto h2 {
    font-size: 1rem;
    padding: 5px 0;
    text-align: center;
    height: 80px;
    line-height: 1rem;
   
}

.desktop #otto {
    height: auto;
    display: flex;
    flex-direction: row;
    height: max-content;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    background-color: var(--bianco);
    margin: 0 0;
    padding: 2% 0;
}


.desktop #otto .contact-block {
    width: 48%;
    background-color: var(--sezione-grigia);
    height: max-content;
    padding: 2% 2%;
}

.desktop #otto .contact-block .sub-square {
    background-color: var(--sezione-grigia);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 5% 10%;
}

.desktop #otto .contact-block .sub-square h1 {
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 2.1rem;
    text-align: left;
    padding: 10px 0;
}

.desktop #otto .contact-block .sub-square h2 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.7rem;
    text-align: left;
    padding: 10px 0;
    text-align: center;
}

.desktop #otto .read-more.mini {
    background-color: transparent !important;
    margin: 0 0;
    padding: 0 0;
}

.desktop .read-more.mini span {
    font-size: 1.3rem;
    padding: 5px 15px;
    background-color: var(    --background-button-home);
    color: var(--bianco);
    margin: 10px 0;
}

.bubble-gallery h2{
    font-size: 1.5rem;
    line-height: 1.4rem;
    font-weight: 400;
    color: var(--colore-testo-home)
}

.desktop #dieci {
    height: max-content;
    width: 100%;
}

.desktop #dieci .contact-block {
    width: 30%;
}

.desktop #dieci .contact-block h1 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.3rem;
    text-align: center;
    color: var(--bianco)
}


.desktop #dieci .social-icons img {
    height: 40px;
    width: auto;
    padding: 0 10px;
    flex-shrink: 0;
}

.desktop #undici {
    margin: 2% 0;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.desktop #undici .info-block {
    width: 25%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5%;
    margin: 5% 0;

}

.desktop #undici .info-block .social-icons {
    height: auto;
}

.desktop #undici .info-block .social-icons img {
    height: 80px;
    width: auto;
    margin: 1% 0;
}

.desktop #undici .info-block span {
    font-size: 1.2rem;
    color: var(--sezione-grigia)
}

.desktop #footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: min-content;
}

.desktop #footer .footer-block {
    width: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 20px;
    
}

.desktop #footer .footer-block.mobile-full {
    width: 100%;
    display: flex;
    height: auto;
}

.desktop #footer .footer-block.mobile-full.copyright {
    flex-direction: row;
    height: auto;
} 

/* COLORS */

:root {
    --verde-chiaro: #d9ddcb;
    --verde-medio: #929b6d;
    --verde-chiarissimo: #eceee5;
    --verde-scuro: #4e5b20;
    --transition-duration: 0.5s;
    --bianco: #FFFFFF;
    --colore-testo-home: rgb(144,148,142);
    --background-button-home: rgb(152,156,150);
    --sezione-grigia: rgb(193,193,193);
    --sezione-aboutus: rgb(234,234,234);
  }




/* PAGE */

.page {
 /*   scroll-snap-type: mandatory; /* for older browsers */
 /*   scroll-snap-points-y: repeat(100vh); /* for older browsers */
 /*   scroll-snap-type: y mandatory; */
    overflow-y: scroll;
    height: 100%;
    width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}




/* DEMO */


#uno {
   
    height: 100vh;
    overflow: hidden;
}

#due {
   
    padding: 0% 1%;
    height: auto;
    overflow: hidden;
    height: 400px;

}

#due .section-text {
    height: 400px;
}

#tre {
   
    height: min-content !important;
}

.desktop #tre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--bianco);
    background-image: none;
}

.desktop #tre #bubble-gallery {
    height: 400px;
    width: 100%;
    background-image: url("../img/background/theatre.webp");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
}

.desktop #tre #bubble-gallery .bubble-gallery {
    width: auto;
    margin: 0 1%;
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: var(--bianco);
    transition: all var(--transition-duration) ease;
}

.desktop #tre #bubble-gallery .bubble-gallery.inactive {
    width: auto;
    margin: 0 2%;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color:rgba(255,255,255,.5);
}

.desktop #tre #bubble-gallery .bubble-gallery.inactive h2 {
    font-size: 1rem;
    font-weight: 300;
}
#quattro {
   
    height: 100%;
    overflow-y: hidden;
}




#cinque {
   
    padding: 0 2%;

}

#cinque h1 {
    padding-top: 10px;
    text-align: center;
    
}


#sei {
   
    height: max-content !important;
   
}

#sei-desktop {
    height: auto;
}

#sei h1 {
    margin: 15px 0 !important;
    font-weight: 300;
    text-align: center;
}

#sette {
    height: 400px;
    overflow: hidden;
}
@media screen and (max-width: 992px) {
    #sette h1, #sette h2 {
        color: white;
    }

    #sette h1 {
        font-size: 1.8rem !important;
        line-height: 2rem !important;
        font-weight: 300 !important;
    }
    #sette .contact-block img {
        min-height: 100%;
        min-width: 100%;
        width: auto;
        height: auto;
    }
}
@media screen and (min-width: 992px) {
#sette {
    height: 600px;
}


#sette .contact-block .label h1 {
    font-size: 2rem;
    color: var(--bianco);
    font-weight: 300;
}
}
#sette.mobile-height-400 {
    height: 400px !important;
}

.blank-space {
    width: 100%;
    height: 50px;
    margin: 10px 0;
    flex-shrink: 0;
    padding: 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blank-space.mini {
    height: 20px;
}

.blank-space img {
    width: auto;
    height: 100%;
}

.blank-space.contactus {
    background-color: white;
}



#nove {
    width: 100%;
    height: 100vh;
    flex-shrink: 0;
}

#nove img {
    height: 100%;
    width: auto;
}


#dieci, #otto, #undici {
    width: 100%;
    height: auto;
    min-height: 200px;
}

#undici {
    height: 200px;
    min-height: auto;
}

#footer {
    width: 100%;
    height: auto;
    min-height: 300px;
    background-color: var(--sezione-grigia);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3% 2%;
}


/* HEADER */

#header {
    position: fixed;
    height: 100px;
    width: 100vw;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    padding: 10 10;
    z-index: 9990;
    top: 0;
    left: 0;

}

.logo {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}




.logo.nascosto {
    display: none;
}

.logo img {
    height: auto;
    width: 100%;
    padding: 0 20px;
}

@media screen and (max-width: 992px) {
    .logo img {
        height: auto;
        width: 60%;
        padding: 0 5%;
    }
}

.header-event {
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 0 10px;
}

.header-event .img-cart-div {
   
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.header-event img {
    height: 50%;
    width: auto;
    flex-shrink: 0;
}

.header-event img#menu {
    height: 65%;
}



/* HOME */

section {
    display: flex;
    align-items: center;
    justify-self: center;
    flex-shrink: 0;
    height: 100vh;
    height: 100dvh;
}

section img {
    width: 100%;
}



.home-main-label {
    height: auto;
    width: 80%;
    background-color: rgba(255,255,255,.8);
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 150px;
    left: 10%;
    padding: 1rem;
    overflow: hidden;
}

.home-main-label h1 {
    font-size: 2rem;
    line-height: 1.9rem;
}

.home-main-label h2 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: var(--verde-medio)
}

/* DISPOSITIONS */

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


@media screen and (min-width: 992px) {
    #cinque {
        height: auto;
    }

    #cinque h1 {
        color: var(--colore-testo-home);
        text-align: center;
    }
}

.grid-6 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}




.grid-6 .box.full.desktop {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-6 .box {
    width: 14%;
    height: 350px;
    margin: 1%;
    overflow: hidden;
    position: relative;
}

.grid-6 .label {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    padding: 10% 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  /*  background-color: rgba(0, 0, 0, .3); */
}

.grid-6 .label h2 {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center;
    color: white;
    line-height: 1.4rem;
}


.grid-6 .label .section-button {

    display: none;
}
@media screen and (max-width: 992px) {

    #cinque {
        height: auto;
    }
    .grid-6 {
        gap: 10px;
        height: max-content;
    }

    .grid-6 .box {
        height: 270px;
        width: 48%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin: auto auto;
        position: relative;
    }

.grid-6 .box h1 {
    font-weight: 300;
    line-height: 1.6rem;
    font-size: 1.5rem;
}

.grid-6 .box img {
    height: auto;
    width: 110%;
}


.grid-6 .label {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    padding: 10% 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(0, 0, 0, .3);
}

.grid-6 .label h2 {
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    line-height: 1rem;
}

.grid-6 .label .section-button {
    padding: 3px 10px;
    background-color: var(--verde-medio);
    width: min-content;
    margin-top: 5px;
    color: white;
    font-size: 13px;
    display: none;
}

}
/* GALLERY  FOOTER */


.gallery-footer {

    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 60;
    flex-shrink: 0;
}

.gallery-dot {
    width: 50px;
    height: 5px;
    border-radius: 1px 1px;
    background-color: white;
    margin: 0 10px;
}

.gallery-dot.show {
    background-color: var(--verde-medio);
    
}


/* SECTIONS ELEMENTS */

.padding-5 {
    padding: 5% 5%;
}

.paddingTop-10 {
    padding-top: 10%;
}



@media screen and (min-width: 992px) {
    #due {
        height: 70%;
        flex-shrink: 0;
    }
}
.section-text {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.section-text .text {
   width: 50%;
    height: 100%;
    flex-shrink: 0;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5% 5%;
}

.section-text .text h2 {
    font-weight: 200;
    font-size: 1.6rem;
    line-height: 2rem;
}


@media screen and (max-width: 992px) {
.section-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}
.section-text .text {
    width: 100%;
    padding: 5% 5%;
}
.section-text .text h2 {
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.4rem;
}
}




.section-text .img-ctn.big-image {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.section-text .img-ctn.big-image img {
    height: auto !important;
    width: 100% !important;
}

.section-text.height-100 {
    height: 100vh;
    width: 100vw;
}

.home-main-label .section-button, .section-text .section-button {
    height: auto;
    width: max-content;
    padding: 8px 25px;
    background-color: var(--background-button-home);
    font-size: 1.3rem;
    font-weight: 300;
    color: #fff;
    flex-shrink: 0;
    margin: 15px 0;
    border-radius: 3px 3px;
}
@media screen and (max-width: 992px) {
.home-main-label .section-button, .section-text .section-button {
    height: auto;
    width: max-content;
    padding: 5px 20px;
    background-color: var(--verde-medio);
    font-size: 1.1em;
    font-weight: 300;
    color: #fff;
    flex-shrink: 0;
    margin: 15px 0;
}
}

.last-news {
    height: auto;
    min-height: 33%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

}

.last-news article {
    width: 98%;
    height: 100%;
    border-radius: 5px 5px;
    margin: 2% 5%;
    overflow: hidden;
    position: relative;
}

.last-news article img {
    width: auto;
    height: 110%;
}

@media screen and (max-width: 992px) {
    .last-news article img {
        width: 110%;
        height: auto;
    } 
}

.img-ctn {
    height: 250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

article h2 {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 5px 0px;
    color: var(--bianco);
    bottom: 20px;
    width: auto;
    text-transform: capitalize;
    line-height: 1.5rem;
}

#sei article h2 {
    margin: 10px 0;
}

article h2.no-upper {
    text-transform: none;
}

article .article-title {
    position: absolute;
    bottom: 0;
    padding: 10px 20px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3rem;
}

.read-more {
    width: max-content;
    height: max-content;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0px;
    background-color: var(--background-button-home);

    
}


.read-more.esigenza {
    width: 100%;
    height: max-content;
    padding: 0px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

@media screen and (max-width: 992px) {
    .read-more.esigenza {
        width: 90%;
        margin: 10px 5%;
        padding: 10px;
        font-size: 1.1rem;
    }

}


.read-more.esigenza span {
    
    padding: 5px 15px;
    font-size: 1.6rem;font-weight: 300;
    color: white;
    background-color: var(--verde-medio);
    width: max-content;

}
.label-wrp .read-more {
    margin: 20px 0;
    padding: 5px 10px;
} 


.read-more.left {
    justify-content: flex-start;

}

.read-more span {
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 300;
    color: white;
    color: var(--bianco);
    text-align: center;
   
}

.read-more span a {
    font-size: 1.2rem;
    cursor: pointer;
    font-weight: 300;
    color: white;
    color: var(--bianco);
    text-align: center;
    text-decoration: none;
}

.read-more.mini span {
    font-size: 1.1rem;
    padding: 3px 10px;
}

#dieci, #otto, #sette, #undici {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: var(--bianco);
}



#footer {
    justify-content: space-between;
}



.contact-block, .info-block, .footer-block {
    height: 250px;
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--sezione-grigia);
    flex-shrink: 0;
    padding: 0 5%;
}

.contact-block {
    gap: 20px;
}

.mobile #footer .footer-block {
    width: 49%;
    height: auto;
}

.mobile #footer .footer-block.full-width {
    width: 100% !important;
}

.info-block{
    padding: 0 1%;
}
.info-block span {
    color: var(--sezione-grigia);
}

#otto .contact-block {
    height: 200px;
}

#sette .contact-block {
    width: 98%;
    height: 100%;
    margin: 0 1%;
    padding: 0 0;
    position: relative;

}

#sette .contact-block img {
    width: 100%;
    height: auto;
}

#sette .contact-block img.desktop {
    height: 100%;
    width: auto;
}

#sette .contact-block .label {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 5%;
}

#sette.gallery2 {
    display: flex;
    transition: translateX .5s;
    height: auto;
}
@media screen and (max-width: 992px) {

#sette h1 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--bianco);
    padding: 5px 0;
    line-height: 1.4rem;
}

#sette h2 {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--bianco);
    margin-bottom: 10px;
}
}

#otto .contact-block .read-more, #sette .contact-block .read-more {
    background-color: var(--verde-medio);
    padding: 4px 10px;
    margin: 5px 0;
}

.footer-block {
    background-color: transparent;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    padding-top: 10px;
}

.info-block {
    width: 30%;
    height: 200px;
    background-color: var(--bianco);
    align-items: flex-start;
    justify-content: flex-start;

}

.contact-block h1 {
    font-size: 1.4rem;
    line-height: 1.5rem;
    font-weight: 300;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 992px) {
    .contact-block h1 {
        line-height: 1.2rem;
        line-height: 1.7rem;
    }
}


.social-icons {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

.social-icons img {
    height: 25px;
    width: auto;
    padding: 0 10px;
    flex-shrink: 0;
}

.info-block span {
    font-size: .8rem;
    font-weight: 300;
    color: var(--sezione-grigia);
    text-align: center;
    padding: 0 5px;
}
.info-block .social-icons {
    margin-bottom: 5px;
}

.footer-block span {
    color: var(--bianco);
    font-size: .9rem;
    padding: 5px 0;
    font-weight: 300;
    display: flex;
    align-items: center;
    width: max-content;
    margin-right: 10px;
}
.footer-block span img {
    height: 15px;
    width: auto;
    margin: 0 10px 0 2.5px;
}

.footer-block span img.bigger {
    height: 20px;
    width: auto;
    margin: 0 2.5px;
}

.footer-block.mobile-right {
    align-items: flex-end;
}

.footer-block.mobile-full {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-block.mobile-full span.copyright {
    font-size: .8rem;
    font-weight: 300;
    height: auto;
    display: inline;
    padding: 1px 0 !important;
}

.footer-block.mobile-full.copyright {
    margin-top: 10px;
    align-items: flex-start;
}

  


    
@media screen and (max-width: 992px) {
       
        .desktop {
            display: none !important;
        }

        .mobile {
            display: block !important;
        }
}





.grid-2 {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: f ;
    justify-content: space-around;
    padding: 10px 10px;
    background-color: var(--verde-chiaro);
    padding: 2%;
}

.grid-2 .grid-2-item {
    width: 50%;
    height: 500px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

}

.grid-2 .grid-2-item.full {
    width: 100%;
}

.grid-row {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row; 
    padding: 2%;  
    justify-content: center; 
}

.grid-row article {
    margin: 10px 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc(25% - 10px);
    flex-shrink: 0;
}

.grid-row article .img-ctn {
    height: 100%;
    width: 100%;
}

.grid-row article .img-ctn img {
    height: 100%;
    width: auto;
}

.grid-row article h2 {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.grid-row .read-more {
    background-color: transparent;
}

.grid-row .read-more span {
    padding: 5px 10px;
    font-size: 1.1rem;
    background-color: var(--verde-chiarissimo);
    color: var(--verde-scuro)
}

.grid-2-item h1 {
    margin: 15px 15px;
    font-weight: 300;
    color: var(--verde-scuro)
}

.grid-2 .grid-2-item.full .grid-row article {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.grid-2 .grid-2-item.full .grid-row article img {
    height: 68%;
    margin-bottom: 2%;
    width: auto;
}

.grid-2 .grid-2-item.full .grid-row article h2 {
    color: var(--verde-scuro)
}



/* ABOUT US */


.desktop.cover {
    width: 100%;
    height: 60%;
   
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-self: center;
    overflow: hidden;
}

.desktop.cover img {
    width: 100%;
    height: auto;
}


.desktop.cover.no-image, .mobile.cover.no-image {
    background-color: var(--colore-testo-home-chiaro);
    height: 200px !important;
}

.desktop.cover.mini, .mobile.cover.mini {
    height: 20%;
    flex-shrink: 0;
}

.mobile.cover {
    width: 100%;
    height: 80%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile.cover img {
    height: 110%;
    width: auto;

}

.mobible.cover.esigenze img {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
}


h1.align-center, h2.align-center, h3.align-center {
    text-align: center;
    color: var(--colore-testo-home);
    padding: 0 10%;
    margin: 2% 0;
    font-weight: 300;
    width: 100%;
   
}

h2.align-center {
    color: var(--colore-testo-home);
    font-size: 1.8rem;
    font-weight: 300;
}

h2.align-center.esigenza {
    font-size: 2.2rem;
    color: var(--colore-testo-home);
    padding: 15px 10px;
    line-height: 2.1rem;
}

h3.align-center {
    color: var(--colore-testo-home-chiaro);
    font-size: 1.3rem;
   
}

h3.align-center.esigenza {
    font-size: 1.7rem !important;
    padding: 0 10px;
    line-height: 1.6rem;
}

@media screen and (max-width: 992px) {
    h2.align-center.esigenza {
        font-size: 2rem;
        color: var(--verde-scuro);
        padding: 15px 10px;
        line-height: 2.2rem;
        text-align: center;
    }

    h3.align-center.esigenza {
        font-size: 1.4rem;
        padding: 0 10px;
        line-height: 1.8rem;
        text-align: center;
    }
    

.grid-2-page .text-content h3.esigenza {
    text-align: center;
}


}

h3.no-margin {
    margin: 0 0;
}

.cover.img-height img {
    height: 100% !important;
    width: auto !important;
}

.absolute-center {
    width: 100%;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 0;
    background-color: transparent;
    line-height: 100%;
    text-align: center;
}

.absolute-center h1 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bianco);
    font-weight: 500;
}

.absolute-center h1.esigenza {
    font-size: 3rem !important;
    font-weight: 400 !important;
    line-height: 3rem;
    padding: 0 15%;
}

@media screen and (max-width: 992px) {
    .mobile.cover {
        display: flex !important;
        position: relative;
    }

    .mobile.cover img {
        height: auto;
        width: auto;
    }
    .desktop.cover {
        display: none !important;
    }

    h1.align-center {
        line-height: 2rem;
        margin: 20px 0;
    }

    h2.align-center {
        color: var(--verde-scuro);
        font-size: 1.3rem;
        font-weight: 300;
        margin: 15px 0;
        line-height: 1.5rem;
    }
    

    h3.align-center {
        color: var(--verde-medio);
        font-size: 1.2rem;
    }
    
   .grid-2-page .text-content.esigenza {
    padding: 2rem 0;
    background-color: white;
   }


   .grid-2-page .text-content {
    background-color: white;
   }

    .grid-2-page .text-content h3.esigenza {
        text-align: center;
        padding: 0 10px;
    }
}

@media screen and (min-width: 992px) {
    .desktop.cover {
        display: flex !important;
        position: relative;
    }
    .mobile.cover {
        display: none !important;
    }

    .grid-2-page.esigenza .text-content {
        width: 60%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        background-color: var(--bianco);
        flex-direction: column;
    }

    .grid-2-page .text-content h3.esigenza {
        margin: 0 0 5% 0;
        padding: 0 5% 0 0;
    }
}



.grid-3 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 5%;
    height: 400px;
    flex-shrink: 0;
}

@media screen and (max-width: 992px) {
    .grid-3 {
        height: auto;
        margin: 1% 0;
    }
}
.grid-3 .item {
    height: 100%;
    width: 30%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


.grid-3 .item img {
    height: auto;
    width: 100%;
    
}

.fake-cover {
    background-color: purple;
    height: 300px;
    width: 100%;
    flex-shrink: 0;
    margin: 2% 0;
    overflow: hidden;
}
.fake-cover img {
    width: 100%;
    height: auto;
}


@media screen and (max-width: 992px) {
    .fake-cover {
        background-color: purple;
        height: 400px;
        width: 100%;
        flex-shrink: 0;
        margin: 2% 0;
        overflow: hidden;
    }

    .fake-cover img {
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
    }
    
    
}



.grid-2-page {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    height: auto;
    min-height: 400px;
    margin: 0 10%;
    background-color: var(--verde-10);
}



.grid-2-page.reverse {
    flex-direction: row-reverse;
}


@media screen and (max-width: 992px) {
    .grid-2-page {
        flex-direction: column;
        padding: 0 1%;
        min-height: auto;
        height: max-content;
        align-items: center;
        justify-content: flex-start;
        margin: 1% 0;
        width: 100%;
        background-color: white;
       
    }

    .grid-2-page.reverse {
        flex-direction: column;
    }
}



.grid-2-page .text-content {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
   /* background-color: var(--verde-chiarissimo); */
}

.grid-2-page.esigenza .text-content {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--bianco);
}





.grid-2-page.ingredienti .text-content {
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bianco);
}


.grid-2-page .text-content h3 {
    font-size: 1.2rem;
    padding: 0 5%;
    font-weight: 300;
    color: var(--verde-medio);
}

.grid-2-page .text-content h3.esigenza {
    font-size: 1.4rem;
    line-height: 1.8rem;

}



@media screen and (max-width: 992px) {
    .grid-2-page .text-content {
       width: 100%;
       height: auto;
       background-color: white;
       align-items: center;
       justify-content: center;
       padding: 0 0;
       margin: 0 0;
    }


    .grid-2-page .text-content h3 {
        text-align: center;
        font-size: 1.2rem;
    }

   

    .grid-2-page.ingredienti .text-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: var(--bianco);
    }
}



.grid-2-page .img-content {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}



.grid-2-page .img-content img {
    width: 100%;
    height: auto;
}

.ingredienti .img-content img {
    height: 100%;
    width: auto;
}

@media screen and (max-width: 992px) {
    .grid-2-page .img-content {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        overflow: hidden;
        margin: 15px 0;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .grid-2-page .img-content.aboutus {
        height: 250px;
    }
    .grid-2-page .img-content img {
        width: 100%;
        height: auto;
    }

    .grid-2-page .img-content img.height-100 {
        height: 100%;
        width: auto;
    }

    .ingredienti .img-content img {
        height: auto !important;
        width: 100% !important;
    }

    


    
}

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

    
    
    .grid-2-page.ingredienti {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 80%;
        height: 40%;
        min-height: 400px;
        margin: 0 10%;
        background-color: white;
    }

    .grid-2-page.esigenza {
        background-color: white;
    }

    .grid-2-page.ingredienti.reverse {
        flex-direction: row-reverse;
    }

    .grid-2-page.esigenza h3 {
        font-size: 1.8rem !important;
        line-height: 2rem !important;
        padding:  0 0;
        margin:  0 0;
    }

    .read-more.esigenza {
        padding: 2rem 0;
    }

    .read-more.esigenza span {
        padding: 10px 2rem;
    }

    h3.align-center.esigenza {
        font-size: 1.8rem;
        padding: 0 10%;
        line-height: 2rem;
    }
}


@media screen and (max-width: 992px) {
   .grid-2-page.esigenza .text-content {
    flex-direction: column;
    padding: 0 10px;
    min-height: auto;
    height: max-content;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100% !important;
   }

   .grid-2-page.esigenza .text-content h3 {
    margin:  0 0;
    padding: 0 0;
   }
}





/* QUIZ */

.grid-2-quiz {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
}


.grid-2-quiz .item-quiz {
    height: 100%;
    width: 50%;
    background-color: red;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-color: var(--verde-40);
}

.grid-2-quiz .item-quiz.overflow-hidden {
    overflow: hidden;
}




.grid-2-quiz h1 {
    margin: 2% auto;
    font-size: 2.4rem;
    font-weight: 300;
    color: white;
}


.grid-2-quiz .item-quiz .block {
    width: 80%;
    margin: 0 auto;

}

.grid-2-quiz .step-block {

    height: 80px;
    width: 90%;
    margin-right: 10%;

    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.grid-2-quiz .step-block #linea-barbara {
    height: 1%;
    width: 100%;
    z-index: 50;
    position: absolute;
    top: 49.5%;
    left: 0;
    background-color: var(--verde-chiarissimo);
}


.grid-2-quiz .step-block span {
    width: 30px;
    z-index: 70;
    height: 30px;
    background-color: var(--verde-chiarissimo);
    color: var(--verde-medio);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-duration) ease;
}

.grid-2-quiz .step-block .stepDot {
    opacity: 1;
}


.grid-2-quiz .step-block .stepDot.active {
    background-color: var(--verde-scuro);
    color: var(--bianco);
    font-weight: 500;
    opacity: 1;
}

.grid-2-quiz .risposta-block .active .testo-risposta span, .grid-2-quiz .risposta-block span.active .testo-risposta span {
    font-weight: 500!important;
    color: var(--verde-scuro)
}

.grid-2-quiz .quiz-block .risposta-block .active .square {
    background-color: var(--verde-scuro);
}

.grid-2-quiz .item-quiz .quiz-block {
    height: 350px;
    width: 100%;
    position: relative;

}

.grid-2-quiz .item-quiz .quiz-block .domanda {
    font-size: 1.2rem;
    color: var(--verde-scuro);
    height: 25%;
    flex-shrink: 0;
    padding: 10px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.grid-2-quiz .item-quiz .quiz-block .domanda span {
    font-size: 1.5rem;
    font-weight: 500;
    padding: 0 2%;


}

.grid-2-quiz .item-quiz .quiz-block .risposta-block {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    padding: 2%;

}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span {
    height: 50px;
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    font-weight: 300;
    font-size: 1.2rem;
    transition: all var(--transition-duration) ease;
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span.square {
    width: 15px;
    height: 15px;
    border: 1px solid var(--verde-scuro);
    flex-shrink: 0;
    margin: 0 5px;
    padding: 0 0;
    cursor: pointer;
    
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span.square.active, #block-edit-privacy.active {
    background-color: var(--verde-scuro);
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span.active {
    font-weight: 500;;
}


.grid-2-quiz .item-quiz .block .action-block {
    height: 25%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--verde-40);
}

.grid-2-quiz .item-quiz .block .action-block span {

    padding: 10px 20px;
    background-color: var(--verde-medio);
    margin: 0 10px 0 20px;
    color: var(--bianco);
    font-size: 1.2rem;
    cursor: pointer;

}


.item-quiz.img-ctn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-answer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;

}

.testo-risposta {
    width: 90%;
    flex-shrink: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}



@media screen and (max-width: 992px) {
    .item-quiz.img-ctn {
        display: none;
    }
    .grid-2-quiz .item-quiz {
        width: 100%;
    }


    .grid-2-quiz h1 {
        font-size: 2rem;
    }

    .grid-2-quiz h2 {
        font-size: 1.5rem;
    }

    .grid-2-quiz .item-quiz .quiz-block .domanda { 
        height: 25%;
        align-items: center;
    }

.grid-2-quiz .item-quiz .quiz-block .domanda span {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: 300;
}

.grid-2-quiz .item-quiz .quiz-block {
    height: 300px;
}

.grid-2-quiz .item-quiz .block .action-block {
    height: min-content;
    margin-top: 20px;
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 300;
    padding: 0 5px;
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span.square {
    height: 10px;
    width: 10px;
}

.question-block {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 95%;
    margin-right: 5%;
    background-color: var(--verde-chiarissimo);
    transition: left var(--transition-duration) ease;
   
}

#edit-block.question-block, #thanks-block.question-block {
    margin-right: 0;
    width: 100%;
    padding: 0 5%;
}


.grid-2-quiz .item-quiz .block {
    width: 90%;
}

.grid-2-quiz .step-block span {
    width: 20px;
    z-index: 70;
    height: 20px;
    background-color: var(--verde-chiarissimo);
    color: var(--verde-medio);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-duration) ease;
    font-size: .7rem;
}
.grid-2-quiz .item-quiz .block .action-block span {
    padding: 10px 20px;
    background-color: var(--verde-medio);
    margin: 0 10px 0 20px;
    color: var(--bianco);
    font-size: 1rem;
    cursor: pointer;
}

.grid-2-quiz .item-quiz .quiz-block .risposta-block span.active, .grid-2-quiz .risposta-block span.active .testo-risposta span  {
    font-size: 1.1rem;
    font-weight: 300;
}


.risposta-span {
    width: 100%;
}
}



.item-quiz.img-ctn img {
    width: auto !important; 
    height: 100% !important;
}

.question-block {
    position: absolute;
    left: 0;
    top: 0; 
    height: 100%;
    width: 90%;
    margin-right: 10%;
    background-color: var(--verde-chiarissimo);
    transition: left var(--transition-duration) ease;
}

.question-block.inactive {
    opacity: .5;
}


.block-edit {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px 10%;

}

.block-edit h2 {
    font-size: 1.4rem;
    line-height: 1.5rem;
    font-weight: 300;
    text-align: center;
    color: var(--verde-scuro);
}

.block-edit h3 {
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 300;
    text-align: center;
    color: var(--verde-scuro);
}
#thanks-block .block-edit {
    justify-content: center;
}
#thanks-block .block-edit h2 {
    margin: 20px 0;
}

.block-edit input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
   
    border-radius: 0 0;
    font-size: 1.1rem;
    font-weight: 300;
    background-color: transparent;
}


.block-edit-row {
    border: 1px solid var(--verde-scuro);
    width: 100%;
    height: 50px;
    position: relative;
    background-color: transparent;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 10px 0;
}

.block-edit-row.no-border {
    border: 1px solid transparent;
}

.block-edit-row span.square {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-right: 15px;
    border: 1px solid var(--verde-medio);
    cursor: pointer;
    background-color: var(--verde-chiarissimo);
}

.block-edit-row span {
    font-size: 1rem;
    font-weight: 300;
}


.block-edit-row label {
    position: absolute;
    padding: 2px 10px;
    background-color: var(--verde-chiarissimo);
    font-size: .8rem;
    color: var(--verde-medio);
    font-weight: 300;
    height: 30px;
    top: -15px;
    left: 15px;
}

.block-edit-row input {
    width: 100%;
    height: 100%;
    padding: 0 15px;
}

#next-question-btn.disable, #prev-question-btn.disable {
    background-color: #d0d0d0;
    color: #909090;
    opacity: .5;
}

#prev-question-btn.nascondi {
    display: none;
}

@media screen and (max-width: 992px) { 
    .block-edit {
        padding: 2% 2%;
    }

    .block-edit-row {
        height: 40px;
    }

    .block-edit-row input {
        font-size: .8rem;
    }
    .block-edit-row span {
        font-size: .8rem;
        font-weight: 300;
    }
    .block-edit-row label {
        height: auto;
    }

}




.text-column.diagnosi-cosmetica, .text-column.category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding:0 3%;
}


.text-column.diagnosi-cosmetica h1, .text-column.category h1 {
    margin: 20px 0;
    text-align: center;
}

.text-column.diagnosi-cosmetica h2 b {
    font-size: 2rem;
    font-weight: 500;
    color: var(--verde-scuro);
    line-height: 2.1rem;
    text-align: center;
    display: flex;
}
.text-column.diagnosi-cosmetica h3, .text-column.diagnosi-cosmetica h3 b {

    font-size: 1.2rem;
    font-weight: 300;
    text-align: center;
    margin: .75rem 0;
    color: var(--verde-medio);
    line-height: 1.5rem;
}

.text-column.diagnosi-cosmetica h3 b {
    font-weight: 500;
    color: var(--verde-scuro);   
}

.text-column.diagnosi-cosmetica h3.semi-bold {
    color: var(--verde-scuro)
} 

.text-column.diagnosi-cosmetica span h3.semi-bold {
    color: var(--verde-scuro);
    height: auto;
    padding: 5px 0;
    text-align: center;
    margin: 0 0;
    line-height: 1.5rem;
    font-weight: 300;
} 

.text-column.diagnosi-cosmetica span h3 b {
    color: var(--verde-scuro);
    height: auto;
    padding: 5px 0;
    text-align: center;
    margin: 0 0;
    line-height: 1.5rem;
    font-weight: 500;
} 

.text-column.diagnosi-cosmetica span h3.big {
    font-size: 1.6rem;
}

.text-column.diagnosi-cosmetica span {
   padding: 2% 2%;
   margin: 1% 0;
   background-color: var(--verde-chiarissimo);


} 

.text-column.diagnosi-cosmetica span img {
    width: 80%;
    margin: 1% 10%;
}



.read-more.diagnosi {
    background-color: var(--verde-medio);
    width: 80%;
    padding: 5px 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.read-more.diagnosi span {
    color: white;
    background-color: transparent;
    font-size: 1.1rem;
    font-weight: 300;
}

.diagnosi-group-ctn {
    display: flex;
    flex-direction: column;
    margin: .5rem 0;
}

.diagnosi-group-ctn.mono {
    background-color: var(--verde-chiarissimo);
}

.text-image-diagnosi {
    height: auto;
    width: 100%;
    background-color: var(--verde-chiarissimo);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 3% 0;
    padding: 2% 10%;
    align-items: center;
}

.text-image-diagnosi img {
    width: 100%;
}

.diagnosi-group-ctn.mono {
    background-color: white;
}


.diagnosi-group-ctn.mono div {
    padding: 1% 2%;
    background-color: var(--verde-chiarissimo);
    margin: 2% 0;
}


.text-column.category .category-block {
    width: 100%;
    height: 120px;
    background-color: var(--verde-chiarissimo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% 0;
    padding: 40px 0;
    transition: all var(--transition-duration) ease;
}

.text-column.category .category-block {
    justify-content: flex-start !important;
}


.text-column.category .category-block.open {
    height: 400px;
}


.text-column.category #block-prodotti.open {
    height: auto !important;
}


.category-block {
    flex-direction: column;
}

.text-column.category .category-block .row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 40px;
    width: 100%;
    flex-shrink: 0;
}

.text-column.category .category-block .row img {
    height: 1.5rem;
    width: auto;
    transition: transform var(--transition-duration) ease;
    height: 20px;
    position: absolute;
    right: 50px;
    top: 10px;
}

.text-column.category .category-block.open .row img {
    transform: rotate(180deg);
}

.text-column.category .category-block .row h2 {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--colore-testo-home);
    
}



.text-column.category .category-block ul {
    list-style: none;
    padding: 20px 0;

}

.text-column.category .category-block ul.hidden {
    display: none;
}

.text-column.category .category-block ul li, .text-column.category .category-block ul li a {
    font-size: 1rem;
    font-weight: 300;
    color: var(--colore-testo-home);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}




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

    .text-column.diagnosi-cosmetica {
        width: 1000px;
        margin: 0 auto;
        padding: 0 0;
    }

    .diagnosi-group-ctn.mono {
        background-color: white;
    }

    
    .diagnosi-group-ctn.mono div {
        background-color: var(--verde-chiarissimo);
        overflow: hidden;
        padding: 2%;
    }


    .text-image-diagnosi {
        height: 400px;
        width: 300px;
        background-color: var(--verde-chiarissimo);
    }

    

    .text-image-diagnosi img {
        width: auto;
        height: 290px;
    }

    .diagnosi-group-ctn.riga {
        flex-direction: row;
        justify-content: space-around;
        background-color: white;
    }

    .diagnosi-group-ctn.riga div {
        width: 48%;
    }

    .diagnosi-group-ctn.riga div.span-3 {
        width: 30%;
        background-color: white;
    }

    .text-column.diagnosi-cosmetica h3 {
        line-height: 1.5rem;
    }


.text-column.category {
    flex-direction: row;
    margin-bottom: 3%;
    padding: 5% 0;
    align-items: flex-start;
}
.text-column.category .category-block {
    height: auto;
    flex-shrink: 0;
    width: 30%;
    margin: 0 1%;
    background-color: white;
    border: 1px solid var(--colore-testo-home);
}

.text-column.category .category-block ul.hidden {
    display: block;
}

.text-column.category .category-block .row img {
    display: none;
}

.text-column.category .category-block .row img {
    display: none;
}


.text-column.category .category-block .row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 40px;
    width: min-content;
    flex-shrink: 0;
    margin-top: -60px;
    padding: 0 20px;
    background-color: white;
}

.text-column.category .category-block .row h2 {
    font-size: 1.6rem;
}

.text-column.category .category-block ul li {
    font-size: 1.3rem;
}


}


@media screen and (max-width: 992px) {
    .mobile #tre .mini-gallery .bubble-gallery-dot div h2 {
        font-size: 1.7rem;
        line-height: 1.9rem;
    }

    #quattro {
        height: 400px;
        overflow: hidden;
    }

  

    #quattro #gallery-2 .gallery-item-wrp .label {
        position: absolute;
        top: 0%;
        height: 100%;
        width: 100%;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        gap: 1rem;
        background-color: rgba(0, 0, 0, .2);
        padding-bottom: 25%;
    }

    #quattro #gallery-2 .gallery-item-wrp .label .read-more {
        height: auto;
        width: max-content;
        padding: 5px 20px;
        background-color: var(--verde-medio);
        font-size: 1.1rem;
        font-weight: 300;
        color: #fff;
    }

    #quattro #gallery-2 .gallery-item-wrp .label h1 {
        font-size: 1.4rem;
        line-height: 1.5rem;
        font-weight: 500;
        margin: 5px 0px;
        color: var(--bianco);
        bottom: 20px;
        width: auto;
    }


    #quattro #gallery-2 .gallery-item-wrp .label h2 {
    font-size: 1.15rem;
    line-height: 1.3rem;
    font-weight: 500;
    margin: 5px 0px;
    color: var(--bianco);
    bottom: 20px;
    width: auto;
    text-align: center;
}

h1.align-center, .text-column.diagnosi-cosmetica h1 {
    font-size: 2rem !important;
    line-height: 2.2rem !important;
    margin: 20px 0;
}

h2.align-center, .text-column.diagnosi-cosmetica h2 b {
    font-size: 1.6rem !important;
    line-height: 1.7rem !important;
    font-weight: 300;
}
h3.align-center, .text-column.diagnosi-cosmetica h3, .text-column.diagnosi-cosmetica h3 b {
    font-size: 1.4rem !important;
    line-height: 1.8rem !important;
}

.text-column.diagnosi-cosmetica h3 b {
    font-weight: 500;
}

.grid-2-page .img-content {
    width: 100%;
    height: 400px;
}

.grid-2-page .text-content h3 { 
    font-size: 1.4rem !important;
    line-height: 1.8rem !important;
}
}

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

    .grid-2-item h1 { 
        font-size: 2rem;
        font-weight: 300;
    }
    #sei-desktop .grid-2 .grid-2-item {
        width: 100%;
    }

    .desktop #otto .contact-block .sub-square h1, .desktop #dieci .contact-block h1  {
        font-size: 2rem;
        font-weight: 300;
    }

    .desktop #dieci .contact-block h1 {
        line-height: 2.1rem;
    }

    .read-more span {

        font-size: 1.3rem !important;
        font-weight: 300!important;
        cursor: pointer !important;
    }

    .section-button,     .desktop #tre #bubble-gallery .bubble-gallery, .grid-6 .box {
        cursor: pointer !important;
    }


    .grid-2 {
        height: 650px;
    }

    .desktop #tre #bubble-gallery .bubble-gallery.inactive h2  {
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.8rem;
    }

    .desktop #tre #bubble-gallery .bubble-gallery.inactive {
        width: 200px;
        height: 200px;
    }


    #due, #g-2 {
        height: 550px;
    }

    .blank-space {
        height: 100px;
    }

    .blank-space.midi {
        height: 50px;
    }

    .desktop #otto {
        padding: 0 0;
    }

    #dieci {
        min-height: auto;
    }

    .desktop #undici {
        justify-content: space-around;
        min-height: auto;
    }

    .desktop #undici .info-block {
        margin:  0 0;
    }
    #footer {
        padding: 1% 5%;
        min-height: auto;
    }

    .footer-block {
        padding-top: 0;
    }



    .grid-2-page.ingredienti.reverse .img-content {
        justify-content: flex-end;
    }
    .text-column.diagnosi-cosmetica h3 b {
        font-size: 1.4rem;
    }
    h3.align-center.esigenza, .grid-2-page .text-content h3.esigenza, .grid-2-page .text-content h3.esigenza {
        font-size: 1.4rem !important;
        font-weight: 300;
    }

    h2.align-center.esigenza {
        font-size: 2rem !important;
    }

    #quattro, #quattro-desktop {
        height: 400px;
    }

   
}

#sei.mobile .read-more {
        height: auto;
        width: max-content;
        padding: 5px 20px;
        background-color: var(--verde-medio);
        font-size: 1.1em;
        font-weight: 300;
        color: #fff;
        flex-shrink: 0;
        margin: 15px auto;
}



.privacy {
    color: var(--verde-medio);
    font-weight: 300;
    font-size: 1rem;
}


.privacy h2 {
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--verde-scuro);
}

.privacy h3 {
    font-weight: 800;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--verde-scuro);
}


.privacy b {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--verde-scuro);
}


#landscape, #portrait {
    display: none;
    position: fixed;
    width: 100%;
    height: 30%;
    top: 35%;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 0 5%;

}

#landscape h2, #portrait h2 {
    color: var(--verde-medio);
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 1.45rem;
    text-align: center;
}

/* IPAD */

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {


    .gallery-item-wrp img.desktop {
        height: 100% !important;
        width: auto !important;
    }



}

/* PORTRAIT */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait)  {

    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: rgba(255, 255, 255, 1); /* Imposta il livello di oscuramento: 0.7 è il livello di opacità */
        pointer-events: none; /* Assicura che l'overlay non impedisca l'interazione con il contenuto */
        z-index: 9998; /* Assicura che l'overlay sia sopra tutti gli altri contenuti */
      }

    #landscape {
        display: flex;
    }
  

}

@media screen 
and (max-width: 992px)
and (orientation: landscape)

{ 
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 1); /* Imposta il livello di oscuramento: 0.7 è il livello di opacità */
        pointer-events: none !important; /* Assicura che l'overlay non impedisca l'interazione con il contenuto */
        z-index: 9998; /* Assicura che l'overlay sia sopra tutti gli altri contenuti */
        overflow: hidden;
      }

      #portrait {
        display: flex;
    }
}





.chiusura-aziendale {
    width: 30%;
    height: auto;
    padding: 2%;
    background-color: #111;
    color: var(--verde-chiarissimo);
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.5rem;
    position: fixed;
    bottom: 3%;
    left: 3%;
    border-radius: 5px;
    text-transform: uppercase;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-chiusura {
    width: max-content;
    height: auto;
    padding: 5px 10px;
    border-radius: 3px 3px;
    background-color: var(--verde-chiaro);
    color: #111;
    font-size: .9rem;
    font-weight: 500;
}


@media screen 
and (max-width: 992px) {
    .chiusura-aziendale {
        width: 50%;
        font-size: .8rem;
        line-height: 1.1rem;
        left: auto;
        bottom: auto;
        right: 3%;
        top: 90px;
        

    }

    .btn-chiusura { 
        font-size: .8rem;
        padding: 3px 5px;
    }


}

#chiusura.scompari {
    display: none;
}


.grid-6 .box.box-categorie-home {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-event .img-cart-div #nr-articoli-white,.header-event .img-cart-div #nr-articoli-green {
    position: absolute;
    top: 20px;
    right: 2px;
   
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
   
    font-size: .9rem;
    font-weight: 800;
}

#nr-articoli-white {
    background-color: white;
    color: var(--verde-scuro);
}

#nr-articoli-green {
    background-color: var(--verde-scuro);
    color: white;
}

#nr-articoli-white.transparent, #nr-articoli-green.transparent {
    background-color: transparent !important;
    color: transparent !important;
}



.fake-footer {
    width: 100%;
    height: 72px;
    border-bottom: 10px solid white;
    border-top: 10px solid white;
    display: flex
;
    align-items: center;
    justify-content: center;
    background-color: var(--sezione-grigia);
    padding-top: 15px;
}

.fake-footer iframe {
    width: 100% !important;
    height: 52px !important;
    background-color: transparent
}

.physia-square, .design-square {
    background-color: rgb(146,153,109) !important;
    padding: 0 8% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
    text-align: center;
    gap: 15px;
    
}

.design-square {
    background-color: rgb(61,61,59) !important;
}
.physia-square h2, .design-square h2 {
    color: var(--bianco) !important;
  
}
.physia-square h2.big, .design-square h2.big {
    font-size: 2rem;
}
.physia-square h2.light, .design-square h2.light {
    font-weight: 300;
}

.demeral-separator {
    height: 2px;
    width: 100%;
    flex-shrink: 0;
    background-color: rgba(61,61,59,.5) !important;
}



/* DEMERAL ADD*/

#demeral-sei {
    background-image: url("../img/home/salone-parrucchiere.webp");

}



#demeral-otto {
     background-image: url("../img/home/demeral-per-il-sociale.webp");
}

#demeral-otto h1 {
    color: var(--bianco) !important;
    text-align: center;
}

.section-midi, .section-full-lenght {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-label-sfondobianco {
    background-color: rgba(255,255,255,.9);
    padding: 50px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #222;
}

.demeral-home-button {
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 400;
    background-color: var(--background-button-home);
    color: #222;
}

.section-button {
    height: auto;
    width: max-content;
    padding: 8px 25px;
    background-color: var(--background-button-home);
    font-size: 1.3rem;
    font-weight: 300;
    color: #fff;
    flex-shrink: 0;
    margin: 15px 0;
    border-radius: 3px 3px; 
}


#demeral-sette {
    height: 500px;
    width: 100%;
}

.section-2col {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center;
   
}

#inspiration-gallery {
    background-image:  url("../img/home/inspiration-gallery.webp");;
}

#last-news {
    background-image:  url("../img/home/last-news.webp");;
}


.section-2col .col-section {
    width: 48%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: var(--verde-chiarissimo);
     background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;


}

.section-2col .col-section  .home-label-sfondobianco {
    padding: 20px 40px;
    text-align: center;
}

.section-2col .col-section  .home-label-sfondobianco h2, #demeral-otto h2 {
    font-size: 2rem !important;
}

.section-2col .col-section  .home-label-sfondobianco h3, #demeral-otto h3 {
    font-size: 1.5rem !important;
    line-height: 2rem;
}

#demeral-otto h2, #demeral-otto h3, #quattro-desktop h1, #quattro-desktop h3 {
    color: var(--bianco) !important;
    text-align: center;

}


#tre h3 {
    text-align: center;
}


.demeral-aboutus-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    gap: 50px;   
}

.section-textimg {
    width: 100%;
    height: 400px;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--sezione-aboutus);
}

.section-textimg .div-text {
    padding: 0 5%;
    width: 60%;
}
.section-textimg {
    width: 100%;
    height: 100%;
   
}

.section-textimg.dx {
    flex-direction: row-reverse;
}

.aboutus-img-wrp {
    width: 35%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutus-img-wrp img {
    height: auto;
    width: 100%;
}
#page-aboutus h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    text-align: center;
} 

#page-aboutus p, .div-text p {
    
    color: var(--colore-testo-home);
    font-size: 1.6rem;
    line-height: 1.9rem;
    font-weight: 300;
    padding: 20px 0;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.div-text p {
    text-align: left !important;
}

#page-aboutus p.first-p {
    margin-top: 50px;
}

#page-aboutus-wrp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#page-designdivision-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #222;
    color: var(--bianco);
    gap: 50px;
}

#page-designdivision-wrp p {
    color: var(--bianco);
}

.designdivision-subtitle {
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 ;
    text-align: center;
    color: var(--bianco);
    border-bottom: 2px solid var(--bianco);
    font-size: 2.5rem;
    font-weight: 300;
}

#page-designdivision-wrp .row-grid4, .row-grid4 {
    width: 100%;
    padding: 0 10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    height: auto;
    justify-content: center;
    align-items: flex-start;
}

.row-grid4 .card-designdivision {
    width: 300px;
    height: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--bianco);

    padding: 10px 10px;
    flex-shrink: 0;
}


.row-grid4 .card-designdivision label {
    font-size: .8rem;
    font-weight: 300;
  
    color: var(--bianco);
    padding: 10px 0;
}

.card-inspiration {
    width: 300px;
    height: 400px;
    border-radius: 10px 10px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    
}

.card-inspiration .img-card, .card-inspiration .cover-card {
    position: absolute;
    top: -10px;
    left: 0;
    width: 300px;
    height: 400px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.card-inspiration .cover-card {
    top: 0;
    align-items: center;
    cursor: pointer;
}

.card-inspiration .cover-card .title-card {
    color: var(--bianco);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
}

.card-inspiration .img-card img {
    height: 400px;
    width: auto;
}

.cover-card {
    background-color: rgba(193,193,193,.5);
}



.row-grid4 .card-designdivision .title-card {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.address-card, .citta-card {
    font-size: .7rem;
    font-weight: 300;
 
}

.img-card {
    width: 300px;
    height: 230px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 10px;
}

.img-card img {
    height: auto;
    width: 100%;
}

#design-division-cover {
    width: 100%;
    height: 100%;
    color: #222;
    background: rgb(34, 34, 34);
    background: linear-gradient(150deg, rgba(204, 204, 204, 1) 53%, rgba(34, 34, 34, 1) 53%);
    padding: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;

}

#design-division-cover img {
    height: 100px;
    width: auto;
}

#design-division-cover-text {
    color: var(--bianco);
    font-size: 2rem;
    font-weight: 400;
    text-align: right;
}

#design-division-cover-text span {
    font-weight: 300;
    font-size: 1.5rem;
}

.force-black-background {
    background-color: #222 !important;
}

#page-inspiration {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background-color: #222;
}

.inspiration-text {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 100px 0 50px 0;
}

.inspiration-text.collezione {
    padding: 100px 0 0;
}
.collezione-title {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 0 0 50px 0;
}

.collezione-title h2 {
    text-transform: uppercase;
}

.foto-inspiration .cover-card {
    background-color: transparent;
    transition: .5s all ease-in-out;
}

.foto-inspiration .cover-card .title-card {
   color: transparent; 
    transition: 1s all ease-in-out;
}

.foto-inspiration .cover-card:hover {
    background-color: rgba(24,24,24,.5);
}

.foto-inspiration .cover-card:hover .title-card{
    color: var(--bianco);
}

.title-card.foto-singola {
    text-transform: none !important;
}

.box-categorie-home {
    width: 12% !important;
}

.box-categorie-home a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;    
}

.box-categorie-home a img {
    width: 100% !important;
    height: auto !important;
}

.desktop.cover.alto {
    align-items: flex-start !important;
}