@import "../components/Headers/top-bar.css";
@import "../components/Headers/menu-utils.css";
@import "../components/Headers/searchbar-01.css";
@import "../components/Headers/header-no-img.css";

body {
	background-color: #faf8f0;
}
/* Contact Box
----------------------------------------------------------*/
    #contacts .stripe-content {
        gap: 3.125vw; /*60*/
    }
    #contacts .contact-box {
        width: calc(33.3% - 2.084vw);
        height: 23.958vw; /*460*/
        min-height: 330px;
        position: relative;
        overflow: hidden;    
    }
    #contacts .contact-box > img {
        position: absolute;
        z-index: 1;
        top: 31.5%;
        left: 17%;
        width: 30.729vw; /*590*/
        height: 23.281vw; /*447*/
        opacity: 0.1;
    }
    .contact-box .contact-box-content {
        padding: 3.125vw 2.083vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 2;
    }
    .contact-box .contact-header {
        flex-grow: 1;
    }
    .contact-box h2 {
        letter-spacing: 0;
        margin-bottom: 0.781vw; /*15px*/
    }
    .contact-box .button-container {
        gap: 0 1.042vw; /*20*/
    }
    .contact-box a {
        margin-top: 1.042vw; /*20*/
    }
    .contact-box .contact-button a {
        min-width: 8.594vw; /*165*/
        min-width: 165px;
    }

    /* 4 - 7 or 8 Contact Boxes
    ---------------------------------------------------------------------*/
        #contacts .apply-pad-2 .stripe-content {
            gap: 1.563vw; /*30*/
        }
        #contacts .apply-pad-2 .contact-box {
            width: calc(25% - 1.173vw);
        }
        #contacts .apply-pad-2 .contact-box h2 {
            line-height: 0.933;
        }



/* Sede Legale Stripe
----------------------------------------------------------*/
    #registered-office .stripe-container {
        position: relative;
        z-index: 2;
    }
    #registered-office .stripe-content {
        padding-top: 15.104vw; /*290*/
    }

    #registered-office h2 {
        line-height: 1;
    }

    #registered-office .contact-box {
        width: 28.125vw; /*540*/
        height: auto;
        min-width: 330px;
        min-height: auto;
    }
    #registered-office .contact-box-content {
        height: auto;
        padding-top: 2.604vw; /*50*/
    }
    #registered-office .contact-box-content .button-container {
        padding-top: 4.688vw; /*90*/
    }
    #registered-office .btn {
        margin-top: 0;
    }

    #registered-office .map-img-container:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2.604vw; /*50*/
        z-index: 2;
        background: rgb(250 248 240);
        background: linear-gradient(0deg, rgba(250, 248, 240, 0) 0%, rgba(250, 248, 240, 1) 90%);
    }
    #registered-office .map-img-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        z-index: 1;
        height: 100%;
    }
    #registered-office .map-img-container > img {
        position: relative;
        z-index: 1;
    }




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

}

/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1690px) {

}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	/* Contact Box
	----------------------------------------------------------*/	
        .contact-box {
            height: 26.25vw;
        }
        .contact-box .contact-button a {
            min-width: 150px;
        }    
}

/* Small Laptops - Ok until 1150px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	/* Contact Box
	----------------------------------------------------------*/	
        #contacts .apply-pad-2 .stripe-content,
        #contacts .stripe-content {
            gap: 15px;
        }
        .contact-box {
            width: calc(33.3% - 10px);
            height: 30.156vw;
        }
        .contact-box .button-container {
            display: block;
        }
        .contact-box .contact-button a {
            min-width: 140px;
        }
        /* 4 - 7 or 8 Contact Boxes
        ---------------------------------------------------------------------*/
            #contacts .apply-pad-2 .contact-box {
                width: calc(25% - 12px);
            }
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
	/* Contact Box
	----------------------------------------------------------*/	
	    /* 4 - 7 or 8 Contact Boxes
	    ---------------------------------------------------------------------*/
	        #contacts .apply-pad-2 .contact-box {
	            width: calc(50% - 7.5px);
	        }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	/* Contact Box
	----------------------------------------------------------*/	
        #contacts .apply-pad-4 {
            padding-left: 0;
            padding-right: 0;
        }
        .contact-box .contact-box-content {
            padding: 35px 25px;
        }

	/* Sede Legale Stripe
	----------------------------------------------------------*/
	    #registered-office .stripe-content {
	        padding-top: 140px;
	    }
	    #registered-office .contact-box-content {
	        padding-top: 35px;
	    }
	    #registered-office .map-img-container > img {
	        object-position: 55%;
	    }
	    #registered-office .contact-box > img {
	        width: 305px;
	        height: 231px;
	    }
	    #registered-office .contact-box .button-container {
	        padding-top: 30px;
	    }
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	/* Contact Box
	----------------------------------------------------------*/	
        #contacts .stripe-content .contact-box {
            width: 100% !important;
            height: 290px !important;
            min-height: unset !important;
        }
        #contacts .contact-box h2 {
            font-size: 23px;
        }
        #contacts .stripe-content .contact-box > img {
            top: 25%;
            left: unset !important;
            right: 2%;
        }

        .contact-box h2 {
            margin-bottom: 10px;
        }
        .contact-box .contact-box-content {
            padding: 30px 20px;
        }
        .contact-box .contact-button a {
            margin-top: 10px;
        }

	    /* 4 - 7 or 8 Contact Boxes
	    ---------------------------------------------------------------------*/
	        #contacts .apply-pad-2 .contact-box {
	            width: calc(50% - 7.5px) !important;
	        }    

	/* Sede Legale Stripe
	----------------------------------------------------------*/
	    #registered-office .stripe-container {
	        padding-bottom: 80px;
	    }    
	    #registered-office .apply-pad-4 {
	        padding-left: 0;
	        padding-right: 0;
	    }
	    #registered-office .stripe-content {
	        padding-top: 300px;
	    }
	    #registered-office .contact-box {
	        min-width: 310px;
	    }
	    #registered-office .contact-box-content {
	        padding-top: 30px;
	    }
	    #registered-office h2 {
	        font-size: 36px;
	    }
	    #registered-office .map-img-container > img {
	        object-position: 70%;
	    }
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	/* Contact Box
	----------------------------------------------------------*/		
	    /* 4 - 7 or 8 Contact Boxes
	    ---------------------------------------------------------------------*/
	        #contacts .apply-pad-2 .contact-box {
	            width: 100% !important;
	        }
	        #contacts .apply-pad-2 .contact-box svg {
	            right: unset;
	            left: 0;
	        }
}