@charset "UTF-8";
/* CSS Document */

div.image-with-text__container {
	
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 5.84;
	
	.image-with-text__content-container {
		display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
	}
	
	.image-with-text__embed {
		padding-top: 0%;
        width: 100%;
        height: 100%;
	}
	
	h2.image-with-text__title--light,
	div.image-with-text__description--light { 
		color: white;
		margin-bottom: 20px;
	}
	
	a.btn--secondary {
		display: inline-block;
		color: white;
		border-color: white;
	}
	
}

@media only screen and (max-width: 1000px) {
    div.image-with-text__container {
	
        height: auto;
        aspect-ratio: auto;

        .image-with-text__content-container {
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .image-with-text__embed {
        position: absolute;
          top: 50%;
          left: 50%;
          width: 100vw;
          height: 100vh;
          transform: translate(-50%, -50%);
        }

        h2.image-with-text__title--light,
        div.image-with-text__description--light { 
            color: white;
            margin-bottom: 20px;
        }

        a.btn--secondary {
            display: inline-block;
            color: white;
            border-color: white;
        }

    }
}

@media only screen and (max-width: 1000px) {
    div.image-with-text__container .image-with-text__embed>iframe {
        width: 200vw;
    }
}

@media only screen and (max-width: 1000px) {
    div.image-with-text__content--left .image-with-text__embed>iframe {
        left: auto;
        right: 0px;
    }
}

@media only screen and (max-width: 700px) {
    div.image-with-text__container .image-with-text__embed>iframe {
        width: 320vw;
    }
}

div.image-with-text__content--right .image-with-text__text-container {
	display: block;
	position: absolute;
	right: auto;
	left: 4rem;
	top: auto;
	bottom: 4rem;
	width: 30%;
	height: auto;
}

@media only screen and (max-width: 1000px) {
    div.image-with-text__content--right .image-with-text__text-container {
        position: relative;
        width: 70%;
        left: 30px;
        bottom: auto;
        top: auto;
        padding-top: 30px;
        padding-bottom: 30px;
        
    }
}
	
div.image-with-text__content--left .image-with-text__text-container {
	display: block;
	position: absolute;
	left: auto;
	right: 4rem;
	top: auto;
	bottom: 4rem;
	width: 30%;
	height: auto;
	text-align: right;
}
    
@media only screen and (max-width: 1000px) {
    div.image-with-text__content--left .image-with-text__text-container {
        position: relative;
        width: 70%;
        left: calc(25% + 0px);
        right: auto;
        bottom: auto;
        top: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}