@import "../components/Headers/defaultHeader.css";
@import "../components/stripe-newsletter.css";



/* Intro Stripe
---------------------------------------------------------------*/
	#intro-stripe .stripe-img {
	    width: 50%;
	    height: 42.708vw; /*820*/
	}
	#intro-stripe .stripe-text {
	    width: 50%;
	}

/* Title Image Stripe
---------------------------------------------------------------*/
	#quote-stripe .stripe-text {
	    width: 44%;
	}
	#quote-stripe .stripe-text h2:first-child {
	    margin-bottom: 2.604vw;
	}
	#quote-stripe .stripe-img {
	    width: 56%;
	    height: 42.708vw; /*820*/
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		overflow: hidden;
	}

/* Mission Stripe
---------------------------------------------------------------*/
	#mission-stripe .stripe-text {
	    min-height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    position: relative;
	    z-index: 2;
	    padding: 7.813vw 0; /*150 0*/
	}
	#mission-stripe .stripe-text-container {
	    z-index: 2;
	    padding: 5.469vw; /*105*/
	    max-width: 34.896vw; /*670*/
	}
	#mission-stripe .h4-font {
	    margin-bottom: 2.083vw; /*40*/
	}
	#mission-stripe h2 span {
	    display: block;
	}
	#mission-stripe .stripe-img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	}
	#mission-stripe .stripe-img:before {
	    content: '';
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    background-color: #0a1c12;
	    opacity: 0.8;
	}
	#mission-stripe .mission-logo {
	    width: 9.948vw; /*191*/
	    height: 2.344vw; /*45*/
	    margin: 0 auto;
	    margin-top: 2.708vw; /*52*/
	}

/*Shape
---------------------------------------------------------------*/
	#quote-stripe svg {
	    filter: invert(91%) sepia(16%) saturate(70%) hue-rotate(28deg) brightness(105%) contrast(88%);
	    opacity: 0.3;
	    position: absolute;
	    bottom: 0;
	    right: 8.854vw; /*170*/
	    height: 66.146vw; /*1270*/
	}
	#quote-stripe {
	    position: relative;
	    z-index: 1;
	}
	#intro-stripe,
	#quote-stripe .stripe-container-full,
	#mission-stripe {
	    position: relative;
	    z-index: 2;
	}

@media screen and (max-width: 1920px) {
	#mission-stripe .stripe-text-container {
	    max-width: 670px;
	}
	#mission-stripe .mission-logo {
	    width: 191px; /*191*/
	    height: 45px; /*45*/
	    margin-top: 52px; /*52*/
	}
}

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

}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	#intro-stripe .stripe-img {
	    width: 50%;
	    height: 46.944vw;
	}

	#quote-stripe .stripe-img {
	    height: 44.375vw;
	}

	#mission-stripe .stripe-text-container {
	    max-width: 580px;
	}
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	#intro-stripe .stripe-content {
	    padding-left: 0;
	}
	#intro-stripe .stripe-img {
	    height: 55.469vw;
	}

	#quote-stripe .stripe-img {
	    height: 49.531vw;
	}
	#quote-stripe svg {
	    height: 75.146vw;
	}

    #mission-stripe .mission-logo {
        margin-top: 40px;
        width: 170px;
        height: 42px;
    }
    #mission-stripe .stripe-text-container {
        max-width: 510px;
        padding: 50px;
    }	
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {

}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	#intro-stripe .stripe-container-inner {
	    padding-left: 0;
	    padding-right: 0;
	}
	#intro-stripe .stripe-img {
	    height: 59.476vw;
	}

	#quote-stripe svg {
	    height: 79.146vw;
	}

	#mission-stripe .stripe-text {
	    min-height: 75vh;
	}
	#mission-stripe .stripe-text-container {
	    max-width: 440px;
	}
	#mission-stripe .mission-logo {
	    width: 150px;
	    height: 36px;
	}	
}

/* Mobile
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	#intro-stripe .stripe-container {
	    padding-top: 80px;
		padding-bottom: 40px;
	}
	#intro-stripe .stripe-content {
	    padding-right: 0;
	}	
	#intro-stripe .stripe-content > * {
	    width: 100%;
	    padding-left: 0;
	}
	#intro-stripe .stripe-img {
	    height: 69.333vw;
	    max-height: 350px;
	    margin-bottom: 30px;
	}


	#quote-stripe .stripe-container-full,
	#quote-stripe .stripe-content {
	    padding-left: 0;
	    padding-right: 0;
	}
	#quote-stripe .stripe-content > * {
	    width: 100%;
	}
	#quote-stripe .stripe-text {
	    order: 2;
	    padding-left: 55px;
	    padding-right: 55px;
	}
	#quote-stripe .stripe-text h2:first-child {
	    margin-bottom: 30px;
	}
	#quote-stripe .stripe-content .stripe-img {
	    order: 1;
	    border-radius: unset;
	    height: 69.333vw;
	    min-height: 260px;
	    max-height: 350px;
	    margin-bottom: 30px;
	}
	#quote-stripe svg {
	    height: 187vw;
	}


	#mission-stripe .stripe-text {
	    padding-top: 80px;
	    padding-bottom: 80px;
	    padding-left: 20px;
	    padding-right: 20px;
	}

	#mission-stripe .stripe-text-container {
	    max-width: 440px;
	    padding: 40px;
	}
	#mission-stripe .h4-font {
	    margin-bottom: 25px;
	}
	#mission-stripe .mission-logo {
	    margin-top: 28px;
	}	
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 360px) {
	#quote-stripe .stripe-text {
	    padding-left: 45px;
	    padding-right: 45px;
	}
}