@import '../Moduli/Stripe/news-stripe.css';
@import '../Moduli/Newsletter/newsletter.css';


/* Intro stripe
---------------------------------------------------------------*/
    #intro-stripe .stripe-container-inner {
        padding-top: 4.01vw; /*77*/
    }
    #intro-stripe .col-txt .col-container {
        width: 24.06vw; /*462*/
    }
    #intro-stripe .col-1.col-txt {
        text-align: right;
    }
    #intro-stripe .col-2.col-img {
        margin-top: -7.81vw; /*150*/
    }
    #intro-stripe .col-2.col-img img {
        width: 55.57vw; /*1067*/
        height: 35.31vw; /*678*/
        margin-left: 1.04vw; /*20*/
    }

/* Text Image stripe
---------------------------------------------------------------*/
    .text-image-stripe {
        position: relative;
    }
    .text-image-stripe .stripe-container {
        position: initial !important;
    }
    .text-image-stripe .col.col-img {
        width: 63.105%;
    }
    .text-image-stripe .col-img .col-container {
        height: 56.25vw; /*1080*/
        min-height: 810px;
    }    
    .text-image-stripe .col.col-text {
        width: 36.895%;
    }
    .text-image-stripe .col-text .col-container {
        padding-bottom: 3.91vw; /*75*/
    }
    .text-image-stripe .mini-img {
        width: 25.36vw; /*487*/
        height: 19.06vw; /*366*/
        top: 3.13vw; /*60*/
        left: 0;
    }
    .text-image-stripe .reverse .mini-img {
        left: unset;
        right: 0;
        width: 29.74vw; /*571*/
        height: 17.92vw; /*344*/
        top: 9.9vw; /*190*/
    }

    .text-image-stripe-1.with-bg-logo > .bg-logo {
        width: calc(100vw - 57.81vw); /*57.81 = 1110px image width */
        left: 0;
        transform: unset;
        bottom: 8.07vw; /*155*/
    }
    .text-image-stripe-2.with-bg-logo > .bg-logo {
        transform: unset;
        top: 0;
        right: 0;
        left: unset;
        width: calc(100vw - 57.81vw); /*57.81 = 1110px image width */
        bottom: unset;
    }

/* Our Product
---------------------------------------------------------------*/
    #our-products .col {
        position: relative;
    }
    #our-products .four-col-grid {
        gap: 2.6vw; /*50*/
        margin: 0;
    }
    #our-products .tax-icon {
        height: 10.78vw; /*207*/
        max-width: 100%;
    }
    #our-products .tax-icon img {
        object-position: center bottom;
        max-width: 15.1vw; /*290*/
        margin: 0 auto;
    }
    #our-products .col:not(:nth-child(4n+4)):not(:last-child):after {
        content: '';
        display: block;
        height: 100%;
        width: 0.1vw; /*2*/
        background-color: var(--color-blue);
        position: absolute;
        top: 0;
        right: -1.3vw; /*25*/
    }
    #our-products .tax-cta .btn {
        width: 100% !important;
        margin-top: 0.89vw; /*17*/
    }

/* Our Lines
---------------------------------------------------------------*/
    body #our-linee ul.facet-list,
    body #our-linee ul.facet-list li,
    body #our-linee ul.facet-list,
    body #our-linee ul.facet-list li button {
        margin: 0;
    }
    #our-linee ul > li:not(.menu-item):before {
        display: none;
    }
    .fascia-grid{
        display: grid;
        gap: 1.09vw;
        align-items: start;
        grid-template-columns: 39.2% 1fr;
    }

    /* Left Col
    ---------------------------------------------------------------*/
        .facet-list{ 
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 0.63vw;
        }
        .facet-item{ 
            position: relative;
        }
        .facet-item h3 { 
            margin: 0 !important;
        }
        .facet-title{
            width: 100%; 
            padding: 1.88vw 1.77vw;
            border: unset;
            cursor: pointer;
            position: relative;
            font-family: var(--rg-font);
            align-items: center;
        }
        .facet-title > span {
            flex-grow: 1;
            line-height: 1.27;
        }
        .facet-title svg {
            width: 0.99vw;
            height: 1.56vw;
            min-width: 10px;
            min-height: 15px;            
            flex-shrink: 0;
            aspect-ratio: 19/30;
        }

        .facet-title[aria-expanded="true"],
        .facet-title:hover { 
            font-family: var(--sbd-font);
            background-color: var(--color-gold-light);
        }
        .facet-title[aria-expanded="true"] svg path { 
            fill: var(--color-white);
        }
        .facet-title:hover svg path { 
            fill: var(--color-white);
        }

    /* Right Col
    ---------------------------------------------------------------*/
        .panel-intro {
            height: 20.52vw; /*394*/
        }
        .panel-intro-container {
            padding-top: 0.52vw; /*10*/
        }
        .panel-intro h3 {
            line-height: 1;
            padding-bottom: 1.56vw; /*30*/
        }
        .panel-intro .btn {
            min-width: 17.81vw; /*342*/
        }

        .facet-content .facet-panel{ 
            display: block !important;
        }
        .panel-img-container {
            display: block;
            width: 100%;
            height: 30.47vw; /*585*/
        }

    /* Desktop Only
    ---------------------------------------------------------------*/
    @media (min-width: 993px) {
        .facet-list .facet-panel { 
            display: none !important; 
        }
        .facet-content .facet-panel { 
            display: block !important; 
        }

        .facet-content {
          position: relative;
          overflow: hidden;
          min-height: 200px;
        }
        .facet-panel {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          opacity: 0;
          transform: translateY(50px);
          transition: opacity 0.4s ease, transform 0.4s ease;
        }
        
        .facet-panel.active {
          position: relative;
          opacity: 1;
          transform: translateY(0);
        }
        
        .facet-panel.exit {
          opacity: 0;
          transform: translateY(50px);
        }        
    }

/* Sustainability
---------------------------------------------------------------*/
    #sustainability .stripe-container-inner {
        width: 47%;
    }
    #sustainability.with-bg-img > .bg-img {
        overflow: hidden;
    }
    #sustainability .hand {
        position: absolute;
        bottom: 0;
        left: 13%;
        height: 106%;
        bottom: -12%;
    }


@media screen and (max-width: 1920px) {

}

@media screen and (max-width: 1890px) {
    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .mini-img {
            width: 24.36vw; /*487*/
            height: 18.06vw; /*366*/
        }
        .text-image-stripe .reverse .mini-img {
            width: 28.74vw; /*571*/
            height: 16.92vw; /*344*/
        }
}

@media screen and (max-width: 1600px) {
    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .mini-img {
            width: 25.36vw;
            height: 19.06vw;
        }
        .text-image-stripe .reverse .mini-img {
            width: 26.74vw;
            height: 15.92vw;
        }

        .text-image-stripe .stripe-container-inner:not(.reverse) .col.col-text {
            padding-right: 5.386vw;
        }
        .text-image-stripe .stripe-container-inner.reverse .col.col-text {
            padding-left: 5.386vw;
        }        
}


@media screen and (max-width: 1440px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .with-bg-logo > .bg-logo {
            bottom: 6%;
        }
        #intro-stripe .col-txt .col-container {
            width: 26.06vw;
        }
        #intro-stripe .col-2.col-img img {
            width: 60.57vw;
            height: 39.31vw;
        }

    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .mini-img {
            width: 23.36vw; /*487*/
            height: 18.06vw; /*366*/
        }
        .text-image-stripe .reverse .mini-img {
            width: 28.74vw;
            height: 16.92vw;
        }

        .text-image-stripe .col.col-img {
            width: 61.105%;
        }
        .text-image-stripe .col.col-text {
            width: 38.895%;
        }

        .text-image-stripe-1.with-bg-logo > .bg-logo {
            width: calc(100vw - 55.97vw);
        }
        .text-image-stripe-2.with-bg-logo > .bg-logo {
            width: calc(100vw - 55.97vw);
        }

    /* Our Product
    ---------------------------------------------------------------*/
        #our-products .tax-cta .btn {
            margin-top: 15px;
        }
}

@media screen and (max-width: 1280px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .with-bg-logo > .bg-logo {
            bottom: 12%;
        }
        #intro-stripe .col-txt .col-container {
            width: 35.06vw;
        }
        #intro-stripe .col-2.col-img img {
            width: 71.57vw;
            height: 43.31vw;
            margin-left: 1.04vw;
        }

    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .col-img .col-container {
            height: 56.25vw;
            min-height: 760px;
        } 
        .text-image-stripe-1.with-bg-logo > .bg-logo {
            bottom: 9.07vw;
        }

    /* Our Lines
    ---------------------------------------------------------------*/
        .facet-title{
            padding: 24px 22px;
        }
        .panel-intro {
            height: 237px;
        }
        .panel-img-container {
            height: 402px;
        }
        .facet-list {
            gap: 8px;
        }
}


@media screen and (max-width: 1150px) {

}


@media screen and (max-width: 992px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .with-bg-logo > .bg-logo {
            position: relative;
        }
        #intro-stripe .stripe-container-inner {
            padding-top: 50px;
        }
        #intro-stripe .col-txt .col-container {
            width: 100%;
        }
        #intro-stripe .col-1.col-txt {
            text-align: left;
        }
        #intro-stripe .col-1 {
            padding-bottom: 4.125vw;
        }    
        #intro-stripe .col-2.col-img {
            margin-top: -22.81vw;
        }
        #intro-stripe .col-2.col-img img {
            margin: 0;
            width: 100vw;
            height: 50.31vw;
            left: 50%;
            position: relative;
            transform: translateX(-50%);
        }
        .text-image-stripe-1.with-bg-logo > .bg-logo {
            width: calc(100vw - 59.68vw);
        }
        .text-image-stripe-2.with-bg-logo > .bg-logo {
            width: calc(100vw - 59.68vw);
        }

        #intro-stripe .col-3.col-txt {
            text-align: right;
        }

    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .stripe-container-inner:not(.reverse) .col.col-text {
            padding-right: 3.386vw;
        }
        .text-image-stripe .stripe-container-inner.reverse .col.col-text {
            padding-left: 3.386vw;
        }
        .text-image-stripe .col-text .col-container {
            padding-bottom: 35px;
        }
        .text-image-stripe .col-img .col-container {
            min-height: 695px;
        }

    /* Our Product
    ---------------------------------------------------------------*/
        #our-products .four-col-grid {
            gap: 8.6vw;
        }
        #our-products .col:after {
            display: none !important;
        }
        #our-products .col:not(:nth-child(2n+2)):not(:last-child):after {
            content: '';
            display: block !important;
            height: 100%;
            width: 0.1vw;
            background-color: var(--color-blue);
            position: absolute;
            top: 0;
            right: -4.3vw;
        }
        #our-products.with-bg-logo > .bg-logo {
            width: 56.98vw;
            left: 0;
            transform: unset;
            top: unset;
            bottom: -4%;
        }
        #our-products .tax-icon img {
            max-width: 16.1vw;
        }
        #our-products .tax-icon {
            height: 11.78vw;
        }

    /* Our Lines
    ---------------------------------------------------------------*/
        .fascia-grid{ 
            grid-template-columns: 1fr; 
        }
        .facet-title {
            padding: 20px 20px;
        }
        .facet-content{ 
            display: none;
        }

        .facet-list {
            gap: 10px;
        }
        .facet-title svg {
            transform: rotate(90deg);
        }
        .facet-title [aria-expanded="true"] svg {
            transform: rotate(-90deg);
        }    
        .facet-list .facet-panel {
            margin-top: 10px;
        }
        .facet-list .facet-panel[hidden]{
            display: none !important;
        }
        .facet-title[aria-expanded="true"]::after{
            transform: translateY(-50%) rotate(90deg);
        }
        .panel-intro {
            height: auto;
            padding: 4.54vw 11.09vw;
        }    

    /* Sustainability
    ---------------------------------------------------------------*/
        #sustainability .stripe-container-inner {
            width: 52%;
        }
}


@media screen and (max-width: 767px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .col-2.col-img img {
            height: 70vw;
        }
        #intro-stripe .col-1 {
            padding-bottom: 30px;
        }
        #intro-stripe .col-3.col-txt {
            padding-top: 20px;
        }

    /* Text Image stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .bg-logo {
            display: none;
        }    
        .text-image-stripe .stripe-container-inner > * {
            width: 100% !important;
        }
        .text-image-stripe .stripe-container-inner > .col-img {
            order: 1;
            margin-bottom: 40px;
        }
        .text-image-stripe .col.col-text {
            order: 2;
            padding-right: 0 !important;
            padding-left: 22.09vw;
            text-align: left;
            position: relative;
        }
        .text-image-stripe .col-img .col-container {
            min-height: unset;
            height: 93.02vw;
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .text-image-stripe .mini-img {
            width: 26.74vw; /*115*/
            height: 53.49vw; /*230*/
            top: 0;
            left: -32px;
            max-width: 134px;
            max-height: 267px;
        }

        .text-image-stripe .stripe-container-inner.reverse .col.col-text {
            text-align: right;
            padding-left: 22.09vw; /*95*/
        }
        .text-image-stripe .reverse .mini-img {
            left: -32px;
            right: unset;
            top: unset;
            bottom: 0;
            width: 46.51vw; /*00*/
            height: 28.6vw;/*123*/
            max-width: 232px;
            max-height: 143px;            
        }

    /* Our Lines
    ---------------------------------------------------------------*/
        #our-linee .stripe-container {
            padding-bottom: 22px;
        }    
        #our-linee .stripe-title {
            padding-bottom: 40px;
        }
        #our-linee .facet-list {
            gap: 6px;
        }
        #our-linee .facet-title {
            padding: 14px 45px;
        }
        #our-linee .facet-title > span {
            text-align: center;
        }
        #our-linee .facet-title svg {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            right: 22px;
        }
        #our-linee [aria-expanded="true"] svg {
            transform: translateY(-50%) rotate(-90deg);
        }
        #our-linee .panel-intro {
            padding: 50px 30px 60px 30px;
        }
        #our-linee .panel-intro .btn {
            margin-top: 11px;
        }
        #our-linee .panel-img-container {
            height: 111.63vw;
        }


    /* Sustainability
    ---------------------------------------------------------------*/
        #sustainability {
            display: flex;
            flex-flow: wrap;
        }

        #sustainability .hand {
            position: relative;
            left: 0;
            height: 104.65vw;
            bottom: 0;
            object-fit: cover;
            object-position: 102%;
            position: relative;
            z-index: 1;
        }
        #sustainability .bg-img .bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        #sustainability.with-bg-img > .bg-img {
            position: initial;
            order: 2;
        }
        #sustainability .stripe-container {
            order: 1;
            padding-top: 55px;
        }
        #sustainability .stripe-container-inner {
            width: 100%;
            text-align: center;
        }
        #sustainability .stripe-container-inner .stripe-title {
            padding: 0 30px 20px 30px;
        }        
        #sustainability .stripe-description {
            padding-right: 0;
        }
}


@media screen and (max-width: 600px) {
    /* Our Product
    ---------------------------------------------------------------*/
        #our-products.with-bg-logo > .bg-logo {
            width: 79.98vw;
            bottom: -5%;
        }
        #our-products .stripe-container-inner {
            padding-top: 0;
            padding-bottom: 5px;
        }
        #our-products .stripe-container {
            padding-top: 40px;
        }
        #our-products .stripe-title {
            padding-bottom: 45px;
        }
        #our-products .col:not(:nth-child(2n+2)):not(:last-child):after {
            display: none !important;
        }
        #our-products .four-col-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }
        #our-products .tax-icon {
            height: 112px;
        }
        #our-products .tax-icon img {
            width: auto !important;
            max-width: 170px;
        }
        #our-products .tax-cta .btn {
            width: unset !important;
            min-width: 207px;
            margin-top: 8px;
        }
}