@charset "utf-8";
/* CSS Document */

@keyframes overlay {
	0%{opacity: 0;}
	25%{opacity: 0;}
	50%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}

#img-00 {background-image: url('/images/rivian/Rivian_Storyboards-0.jpg');}
#img-01 {background-image: url('/images/rivian/Rivian_Storyboards-1.jpg');}
#img-02 {background-image: url('/images/rivian/Rivian_Storyboards-2.jpg');}
#img-03 {background-image: url('/images/rivian/Rivian_Storyboards-3.jpg');}
#img-04 {background-image: url('/images/rivian/Rivian_Storyboards-4.jpg');}
#img-05 {background-image: url('/images/rivian/Rivian_Storyboards-5.jpg');}
#img-06 {background-image: url('/images/rivian/Rivian_Storyboards-6.jpg');}
#img-07_A {background-image: url('/images/rivian/Rivian_Storyboards-7-1.jpg');}
#img-07_B {background-image: url('/images/rivian/Rivian_Storyboards-7-2.jpg');}
#img-08 {background-image: url('/images/rivian/Rivian_Storyboards-9.jpg');}
#img-09 {background-image: url('/images/rivian/Rivian_Storyboards-8.jpg');}
#img-10 {background-image: url('/images/rivian/Rivian_Storyboards-10.jpg');}

#img-07_A{
	z-index: 1;	
}
#img-07_B{
	z-index: 2;
	animation: overlay 5s ease-in-out infinite running!important;
}

#riv-txt-00, #riv-txt-01, #riv-txt-02, #riv-txt-03, #riv-txt-04, #riv-txt-05 {
	margin-top: 1vw;
	margin-bottom: 0vw;
	margin-left:2.5%;
	width: 95%;
}
@media (any-pointer: coarse) {

#imgCont-01 {height: calc((90vw / 16) * 10);}
#imgCont-02 {height: calc((90vw / 16) * 10);}
#imgCont-03 {height: calc((90vw / 16) * 10);}
#imgCont-04 {height: calc((90vw / 16) * 10);}
#imgCont-05 {height: calc((90vw / 16) * 10);}
#imgCont-06 {height: calc((90vw / 16) * 10);}
#imgCont-07 {height: calc((90vw / 16) * 10);}
#imgCont-08 {height: calc((90vw / 16) * 10);}
#imgCont-09 {height: calc((90vw / 16) * 10);}
#imgCont-10 {height: calc((90vw / 16) * 10);}
#imgCont-11 {height: calc((90vw / 16) * 10);}


.project-section {}

.img {
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center;
  	background-size: cover;
  	background-repeat: no-repeat;
  	opacity: 1;
}

/* Portrait */
@media (min-aspect-ratio: 1/18) and (max-aspect-ratio: 18/18) {}

/* Landscape */
@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 54/18) {}

}

@media (any-pointer: fine) {
	
	.project-section {}
	.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	}
	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
		.projectimg {height: calc((90vw / 16) * 10);}
		#imgCont-01 {height: calc((90vw / 16) * 10);}
	
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		.projectimg {height: calc((75vw / 16) * 10);}
		#imgCont-01 {height: calc((75vw / 16) * 10);}
		
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		.projectimg {height: calc((66vw / 16) * 10);}
		#imgCont-01 {height: calc((66vw / 16) * 10);}
		
	}
}