@import '../components/faq.css';
@import '../Moduli/Stripe/news-stripe.css';

/* Intro 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: 7.29vw; /*140*/
    }
	.text-image-stripe .stripe-container-inner:not(.reverse) .col-text .col-container-inner {
	    padding-top: 1.56vw; /*30*/
	}
    .text-image-stripe .mini-img {
	    width: calc(100vw - 57.81vw);
	    height: 17.14vw; /*329*/
	    bottom: 0;
        left: 0;
    }
    .text-image-stripe .reverse .mini-img {
        left: unset;
        right: 0;
    }
	.text-image-stripe .mini-img img {
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    transform: translateX(-50%);
		height: 17.14vw; /* 329*/
		width: 34.58vw; /*664*/
		object-position: bottom;
	}

    .text-image-stripe-1.with-bg-logo > .bg-logo {
	    width: calc(100vw - 59.5vw);
	    left: unset;
	    right: 0.52vw; /*10*/
	    bottom: 12.19vw; /*234*/
        transform: unset;
    }
    .text-image-stripe-2.with-bg-logo > .bg-logo {
	    transform: unset;
	    bottom: 0;
	    left: 0;
	    width: 42%;
    }

/* Full width claim
---------------------------------------------------------------*/
	#central-claim .stripe-container-full .stripe-content {
	    height: 39.32vw;
	}

/* Products
---------------------------------------------------------------*/
	#products .stripe-content.two-col-grid {
	    grid-template-columns: auto 1fr;
	    gap: 0;
	}

	#products .col-stripe-title .col-container {
	    width: 16.77vw; /*322*/
	    padding: 0.68vw 1.15vw; /*13 22*/
    	min-width: 200px;
	}

	#products .col-stripe-title .col-container h2 {
	    line-height: 1.37;
	}

	#products .col-products { 
	    margin: 0 !important;
	    gap: 6.25vw 2.08vw; /*120 40*/
	    padding-left: 3.13vw; /*60*/
	}
	#products .product-img {
	    height: 17.71vw; /*340*/
	}
	#products .product-img img {
		object-position: bottom;
	}	


	#products .product-title {
	    padding: 1.04vw 2.86vw 0 2.86vw; /*20 55 0 55*/
	}
	#products .stripe-container-inner .stripe-content:not(:last-child) {
	    padding-bottom: 2.08vw; /*40*/
	    border-bottom: var(--color-blue) 0.1vw solid;
	}
	#products a:hover * {
	    color: var(--color-gold);
	}	


@media screen and (max-width: 1920px) {
	#products .stripe-container-inner .stripe-content:not(:last-child) {
	    border-width: 2px;
	}
}

@media screen and (max-width: 1600px) {
    .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) {
    .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 - 57vw);
    }
    .text-image-stripe-2.with-bg-logo > .bg-logo {
        width: calc(100vw - 55.97vw);
    }

	#products .stripe-container-inner .stripe-content:not(:last-child) {
	    padding-bottom: 30px;
	}
}

@media screen and (max-width: 1280px) {
    .text-image-stripe .col-img .col-container {
        min-height: 760px;
    }
	.text-image-stripe .col-text .col-container {
        padding-left: 0;
        padding-right: 0;
    }
}

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

}

@media screen and (max-width: 992px) {
	.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);
    }
    .text-image-stripe .col-img .col-container {
        min-height: 695px;
    }

	#products .col-stripe-title .col-container {
	    min-width: 170px;
	}
}

@media screen and (max-width: 767px) {
	.text-image-stripe .stripe-container-inner > * {
	    width: 100% !important;
	}

	.text-image-stripe .stripe-container-inner > .col-text {
	    order: 1;
	}
	.text-image-stripe .stripe-container-inner > .col-img {
	    order: 2;
	}
	.text-image-stripe .stripe-container-inner .col.col-text {
	    padding-left: 0 !important;
	    padding-right: 0 !important;
	}
	.text-image-stripe .col-img .col-container {
	    min-height: unset;
	    height: auto;
	}
	.text-image-stripe .stripe-container-inner > .col-img img {
		height: 115.58vw; /*497*/
		max-height: 578px;
	    width: 100vw;
	    position: relative;
	    left: 50%;
	    transform: translateX(-50%);
	}
	.text-image-stripe h2 {
	    padding-bottom: 30px;
	}

	.text-image-stripe .reverse .mini-img {
	    position: relative !important;
	    width: unset;
	    bottom: unset;
	    height: 160px;
	    width: 366px;
	    left: calc(100% - 260px);
	    object-position: top;
	}
	.text-image-stripe .mini-img img {
	    height: 100% !important;
	    width: 100% !important;
	    transform: unset;
	    left: unset;
	    position: relative;
	    bottom: unset;
	}
	.text-image-stripe {
	    overflow: hidden;
	}
	.text-image-stripe .col-text .col-container {
	    padding-bottom: 15px;
	}
	.text-image-stripe .col-container-inner {
	    padding-bottom: 25px;
	}

	.text-image-stripe-1.with-bg-logo > .bg-logo {
	    width: 100vw;
	    bottom: unset;
	    top: 0;
	    right: unset;
	    left: 0;
	    position: relative;
	}
	.text-image-stripe.text-image-stripe-1 .stripe-container {
	    padding-top: 0;
	    margin-top: -26px;
	}



	.text-image-stripe:not(.text-image-stripe-1) .stripe-container {
	    padding-top: 60px;
	}
	.text-image-stripe-2.with-bg-logo > .bg-logo {
	    width: 318px;
	    height: 134px;
	    bottom: calc(578px + 188px);
	}
	.text-image-stripe .mini-img {
	    position: relative !important;
	    bottom: unset;
	    height: 213px;
	    width: 320px;
	    left: -42px;
	}
	.text-image-stripe:not(.text-image-stripe-1) .col-text .col-container{
	    padding-bottom: 55px;
	}
	.text-image-stripe .stripe-container-inner:not(.reverse) .col-text .col-container-inner {
	    padding-top: 0;
	    padding-bottom: 47px;
	}

	#central-claim .stripe-container {
	    padding-top: 105px;
	    padding-bottom: 105px;
	}
	#central-claim .stripe-container-full .stripe-content {
		height: 115.58vw; /*497*/
		max-height: 578px;
	}


	#products .stripe-container {
	    padding-top: 115px;
	}
	#products .stripe-content.two-col-grid {
	    grid-template-columns: 1fr;
	}
	#products .col-stripe-title .col-container h2 {
	    line-height: 1;
	}
	#products .col-stripe-title .col-container {
	    width: 287px;
	    padding: 16px 20px;
	    padding-left: 0;
	    position: relative;
	}
	#products .col-stripe-title .col-container:after {
	    content: '';
	    display: block;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    background-color: var(--color-gold-50);
	    z-index: -1;
	    left: -32px;
	}
	#products .col-products {
	    grid-template-columns: 1fr 1fr;
	    padding-left: 0;
	    padding-top: 55px;
	    gap: 60px 16px;
	}
	#products .stripe-content.def-sp {
	    padding-top: 70px;
	}
	#products .stripe-container-inner .stripe-content:not(:last-child) {
	    padding-bottom: 70px;
	}	
	#products .product-img {
	    height: 32.79vw;
	    max-height: 210px;
	}
	#products h3 {
	    font-size: 18px;
	}
	#products .product-title {
	    padding: 0;
	    padding-top: 6px;
	}
}

@media screen and (max-width: 500px) {
	.text-image-stripe-2.with-bg-logo > .bg-logo {
	    bottom: calc(115.58vw + 188px);
	}
}