@import '../components/Componenti/product-grid-box.css';
@import '../components/faq.css';
@import '../Moduli/Stripe/news-stripe.css';

/* Intro stripe
---------------------------------------------------------------*/
    #intro-stripe .stripe-content {
        height: 39.32vw;
    }

/* Text Image Stripe
---------------------------------------------------------------*/
    .text-image-stripe.with-bg-logo > .bg-logo {
        width: calc(100vw - 57.81vw);
        bottom: unset;
        top: 0;
        left: 0;
        transform: unset;
        top: 16%;
    }
    .text-image-stripe .col.col-text {
        width: 36.895%;
        padding-right: 4.95vw; /*95*/
    }
    .text-image-stripe .col.col-img {
        width: 63.105%;
    }
    .text-image-stripe .col-img .col-container {
        height: 56.25vw; /*1080*/
        min-height: 810px;
    }

/* Products Stripe
---------------------------------------------------------------*/
    .products-cats { 
        padding-top: 0.52vw; /*10*/
        gap: 0.52vw 0; /*10*/
    }
    .product-cat { 
    	font-family: var(--rg-font);
        color: var(--color-main);
        padding: 0.26vw 1.04vw; /*5 20*/
        background-color: unset;
        border: unset;
        border-right: 1px solid var(--color-main);
        line-height: 1;
    }
    .product-cat:last-child { 
    	border: unset;
    }
    .product-cat.is-active { 
    	font-family: var(--bd-font);
    }

@media screen and (max-width: 1920px) {
    /* Products Stripe
    ---------------------------------------------------------------*/
        .products-cats { 
            padding-top: 10px; /*10*/
            gap: 10px 0;
        }
        .product-cat { 
            padding: 5px 20px; /*5 20*/
        }
}

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

}

@media screen and (max-width: 1440px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .stripe-content {
            height: 40.69vw;
        }
    
    /* Text Image Stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .col.col-img {
            width: 61.105%;
        }
        .text-image-stripe .col.col-text {
            width: 38.895%;
        }

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

@media screen and (max-width: 1280px) {
    /* Text Image Stripe
    ---------------------------------------------------------------*/
        .text-image-stripe.with-bg-logo > .bg-logo {
            top: 100px;
        }    
        .text-image-stripe .col-img .col-container {
            min-height: 760px;
        }

    .product-cat {
        padding: 3px 15px;
    }
}

@media screen and (max-width: 1150px) {
    .text-image-stripe .col.col-text {
        padding-left: 0;
    } 
}

@media screen and (max-width: 992px) {
    #intro-stripe .stripe-content {
        height: 44.66vw;
    }
    .text-image-stripe.with-bg-logo > .bg-logo {
        width: calc(100vw - 59.27vw);
    }
}

@media screen and (max-width: 767px) {
    /* Intro stripe
    ---------------------------------------------------------------*/
        #intro-stripe .bg-logo {
            display: block !important;
            transform: unset;
            top: 0;
            left: 0;
            bottom: unset;
            width: 342px;
            height: 144px;
        }    
        #intro-stripe .stripe-title,
        #intro-stripe .stripe-description,
        .extra-stripe-text .stripe-description,
        .text-image-stripe .col.col-text {
            padding-left: 0;
            padding-right: 0;
        }
        #intro-stripe .stripe-container {
            padding-top: 92px;
            padding-bottom: 97px;
        }
        #intro-stripe h2,
        .extra-stripe-text h2,
        .text-image-stripe h2 {
            padding-bottom: 35px;
        }
        #intro-stripe .stripe-content {
            position: relative;
            height: unset;
            max-height: unset;
        }
        #intro-stripe .stripe-content img {
            height: 132.4vw;
            max-height: 662px;
            position: relative;
            width: 100vw;
            left: 50%;
            transform: translateX(-50%);
        }
        #intro-stripe .stripe-title {
            padding-bottom: 70px;
        }

    /* Text Image Stripe
    ---------------------------------------------------------------*/
        .text-image-stripe .stripe-container-inner > * {
            width: 100% !important;
        }
        .text-image-stripe .col-text {
            order: 2;
        }
        .text-image-stripe .col-img {
            order: 1;
        }
        .text-image-stripe .col-img .col-container {
            height: unset;
            min-height: unset;
        }
        .text-image-stripe .col-container-inner {
            padding-top: 53px;
        }
        .text-image-stripe .col-img .col-container img {
            height: 129.53vw; /*557*/
            max-height: 648px;
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

    /* Extra stripe text
    ---------------------------------------------------------------*/
        .extra-stripe-text .stripe-container {
            padding-bottom: 96px;
        }

    /* Product Stripe
    ---------------------------------------------------------------*/
        #products .stripe-logo {
            display: block !important;
            padding-bottom: 10px;
        }
        #products .stripe-logo img {
            height: 124px;
        }
        #products .stripe-container {
            padding-top: 30px;
        }
        #products .stripe-title {
            padding-left: 0;
            padding-right: 0;
        }
        #products .stripe-title h2 {
            padding-bottom: 0;
        }
        .products-cats {
            padding-top: 35px;
        }
        .product-cat {
            font-size: 16px;
            padding: 0px 10px;
        }

    /* Product Stripe
    ---------------------------------------------------------------*/
        .faq-golfera-logo {
            opacity: 0;
        }
        #faq .stripe-container {
            padding-top: 50px;
        }

}

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

}