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

/* Phone & Tablet */
@media (any-pointer: coarse) {
#dsktp-vid {display: none;}
	
#sec-00A {height: calc((90vw / 16) * 9);margin-bottom: -2.5vw!important;}
#sec-00B {height: calc((90vw / 16) * 9);margin-bottom: -2.5vw!important;}
#sec-00C {height: calc((90vw / 16) * 9);}
#sec-00D {height: calc((90vw / 16) * 9);}
#sec-00E {height: calc((90vw / 16) * 9);}
#sec-00F {height: calc((90vw / 16) * 9);}
#sec-02A{}
#sec-02B{}
#sec-13A{margin-bottom: -5vw!important;}
#sec-13A{margin-top: 0vw!important;}

#imgCont-01 {height: calc((90vw / 9) * 19.5);}
#imgCont-02A {height: calc((90vw / 9) * 13);}
#imgCont-02B {height: calc((90vw / 9) * 22.5);}
#imgCont-03 {height: calc((90vw / 9) * 26);}
#imgCont-04 {height: calc((90vw / 9) * 19.5);}
#imgCont-05 {height: calc((90vw / 9) * 19.5);}
#imgCont-06 {height: calc((90vw / 9) * 26);}
#imgCont-07 {height: calc((90vw / 9) * 26);}
#imgCont-08 {height: calc((90vw / 9) * 26);}
#imgCont-09 {height: calc((90vw / 9) * 26);}
#imgCont-10 {height: calc((90vw / 9) * 26);}
#imgCont-11 {height: calc((90vw / 9) * 26);}
#imgCont-12 {height: calc((90vw / 16) * 9);}
#imgCont-13A {height: calc((90vw / 16) *7.5);}
#imgCont-13B {height: calc((90vw / 9) * 9);}
#imgCont-14 {height: calc((90vw / 9) * 16);}

.project-section {margin-top: 7.5vw!important; margin-bottom: 15vw;/*box-shadow: 3px 3px 5px #010b1430;*/}
.projectimg {}
/*box-shadow: 0px 3px 5px #010b1430;*/

.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 0%;
}

#img-02A {}
#img-02B {background-position: 50% 96%;}
#img-13A {background-position: 30% 0%;}
#img-13B {background-position: 10% 0%;}
#img-14 {background-position: 35% 0%;}
#vid-0A {object-position: 50% 50%;}
#vid-0B {object-position: 50% 50%;}
#vid-0C {object-position: 50% 50%;}
#vid-0D {transform: scale(1.25) translateY(5%); object-position: 50% 50%;}
#vid-0E {transform: rotateZ(180deg); object-position: 50% 50%;}

#img-01 {background-image: url('/images/rove/rove_00_betterBackpack-mobile.jpg');}
#img-02A {background-image: url('/images/rove/rove_01_ideation-mobile.jpg');}
#img-02B {background-image: url('/images/rove/rove_01_ideation-mobile.jpg');}
#img-03 {background-image: url('/images/rove/rove_03_modularPrinciples-mobile.jpg');}
#img-04 {background-image: url('/images/rove/rove_04_frameExploration-mobile.jpg');}
#img-05 {background-image: url('/images/rove/rove_05_modularCompartments-mobile.jpg');}
#img-06 {background-image: url('/images/rove/rove_06_legDesign-mobile.jpg');}
#img-07 {background-image: url('/images/rove/rove_07_tJoints-mobile.jpg');}
#img-08 {background-image: url('/images/rove/rove_08_frameIssues-mobile.jpg');}
#img-09 {background-image: url('/images/rove/rove_09_matDesign-mobile.jpg');}
#img-10 {background-image: url('/images/rove/rove_10_directionBackpack-mobile.jpg');}
#img-11 {background-image: url('/images/rove/rove_12_mockUp-mobile.jpg');}
#img-12 {background-image: url('/images/rove/rove_11_processImages-mobile.jpg');}
#img-13A {background-image: url('/images/rove__viewFinder-alt2-p-1600.jpeg');}
#img-13B {background-image: url('/images/rove__viewFinder-alt2-p-1600.jpeg');}
#img-14 {background-image: url('/images/rovetitle-p-1600.jpeg');}

/* 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) {
	
	.project-container {margin-top:5%; margin-left: 16.5%; width: 66%;}
	.project-section {margin-top: 7.5vh!important; margin-bottom: 15vh;}
	
	#sec-00A {height: calc((66vw / 16) * 9);margin-bottom: -5vh!important;}
	#sec-00B {height: calc((66vw / 16) * 9);margin-bottom: -5vh!important;}
	#sec-00C {height: calc((66vw / 16) * 9);}
	#sec-00D {height: calc((66vw / 16) * 9);}
	#sec-00E {height: calc((66vw / 16) * 9);}
	#sec-00F {height: calc((66vw / 16) * 9);}
	
	#imgCont-01 {height: calc((66vw / 9) * 19.5);}
	#imgCont-02A {height: calc((66vw / 9) * 13);}
	#imgCont-02B {height: calc((66vw / 9) * 22.5);}
	#imgCont-03 {height: calc((66vw / 9) * 26);}
	#imgCont-04 {height: calc((66vw / 9) * 19.5);}
	#imgCont-05 {height: calc((66vw / 9) * 19.5);}
	#imgCont-06 {height: calc((66vw / 9) * 26);}
	#imgCont-07 {height: calc((66vw / 9) * 26);}
	#imgCont-08 {height: calc((66vw / 9) * 26);}
	#imgCont-09 {height: calc((66vw / 9) * 26);}
	#imgCont-10 {height: calc((66vw / 9) * 26);}
	#imgCont-11 {height: calc((66vw / 9) * 26);}
	#imgCont-12 {height: calc((66vw / 16) * 9);}
	#imgCont-13A {height: calc((66vw / 16) *7.5);}
	#imgCont-13B {height: calc((66vw / 9) * 9);}
	#imgCont-14 {height: calc((66vw / 9) * 16);}
}
}

/* Laptop & Desktop */
@media (any-pointer: fine) {
	
	#dsktp-vid {display: flex; flex-flow: row nowrap; width: 90%; margin-left: 5%;}
	
	.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	}
	
	#img-01 {background-image: url('/images/rove__betterBackpack--pano.jpg');}
	#img-02A {background-image: url('/images/rove__ideation--pano.jpg');}
	#img-02B {background-image: url('/images/rove__ideationCont--pano.jpg');}
	#img-03 {background-image: url('/images/rove__modularPrinciples--pano.jpg');}
	#img-04 {background-image: url('/images/rove__frameExploration--pano.jpg');}
	#img-05 {background-image: url('/images/rove__modularCompartments--pano.jpg');}
	#img-06 {background-image: url('/images/rove__legDesign--pano.jpg');}
	#img-07 {background-image: url('/images/rove__tJoints--pano.jpg');}
	#img-08 {background-image: url('/images/rove__frameIssues--pano.jpg');}
	#img-09 {background-image: url('/images/rove__matDesign--pano.jpg');}
	#img-10 {background-image: url('/images/rove__directionBackpack--pano.jpg');}
	#img-11 {background-image: url('/images/rove__mockUp--pano.jpg');}
	#img-12 {background-image: url('/images/rove__processImages--pano.jpg');}
	#img-13A {background-image: url('/images/rove__viewFinder-alt2.jpg');}
	#img-13B {background-image: url('/images/rove__viewFinder-alt2.jpg');}
	#img-14 {background-image: url('/images/rovetitle.jpg');}
	
	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
		/*#return {background: red;}*/
		
		.project-container {margin-top:5%; margin-left: 0%; width: 100%;}
		.project-section {margin-top: 7.5vh!important; margin-bottom: 5vh;}
	
		.projectvid video {width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;}
		
		#sec-00A {height: calc((25vw / 16) * 10); ;margin-right:0.5%;}
		#sec-00B {height: calc((25vw / 16) * 10); margin-left:0.5%;margin-right:0.5%;}
		#sec-00C {height: calc((25vw / 16) * 10); margin-left:0.5%;}
		
		#sec-00D {height: calc((90vw / 16) * 8); margin-left: 5%; width: 90%;}
			#vid-0D {width: 100%;height: calc((90vw / 16) * 8);overflow: hidden;}
		#sec-00E {height: calc((90vw / 16) * 8); margin-left: 5%; width: 90%;}
			#vid-0E {width: 100%;height: calc((90vw / 16) * 8);overflow: hidden;}
		#sec-00F {height: calc((90vw / 16) * 8); margin-left: 5%; width: 90%;}
			#vid-0F {width: 100%;height: calc((90vw / 16) * 8);overflow: hidden;}
		
		#imgCont-01 {height: calc((100vw / 16) * 9);}
		#imgCont-02A {height: calc((100vw / 16) * 9);}
		#imgCont-02B {height: calc((100vw / 16) * 9);}
		#imgCont-03 {height: calc((100vw / 16) * 9);}
		#imgCont-04 {height: calc((100vw / 16) * 9);}
		#imgCont-05 {height: calc((100vw / 16) * 9);}
		#imgCont-06 {height: calc((100vw / 16) * 9);}
		#imgCont-07 {height: calc((100vw / 16) * 9);}
		#imgCont-08 {height: calc((100vw / 16) * 9);}
		#imgCont-09 {height: calc((100vw / 16) * 9);}
		#imgCont-10 {height: calc((100vw / 16) * 9);}
		#imgCont-11 {height: calc((100vw / 16) * 9);}
		#imgCont-12 {height: calc((100vw / 16) * 9);}
		#imgCont-13A {display:none;}
		#imgCont-13B {height: calc((90vw / 16) * 8);margin-left: 5%; width: 90%;}
		#imgCont-14 {height: calc((90vw / 16) * 8);margin-left: 5%; width: 90%;}
	
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		/*#return {background: blue;}*/
		
		.project-container {margin-top:5%; margin-left: 0%; width: 100%;}
		.project-section {margin-top: 7.5vh!important; margin-bottom: 5vh;}
	
		.projectvid video {width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;}
		
		#sec-00A {height: calc((25vw / 16) * 10); ;margin-right:0.5%;}
		#sec-00B {height: calc((25vw / 16) * 10); margin-left:0.5%;margin-right:0.5%;}
		#sec-00C {height: calc((25vw / 16) * 10); margin-left:0.5%;}
		
		#sec-00D {height: calc((75vw / 16) * 8); margin-left: 12.5%; width: 75%;}
			#vid-0D {width: 100%;height: calc((75vw / 16) * 8);overflow: hidden;}
		#sec-00E {height: calc((75vw / 16) * 8); margin-left: 12.5%; width: 75%;}
			#vid-0E {width: 100%;height: calc((75vw / 16) * 8);overflow: hidden;}
		#sec-00F {height: calc((75vw / 16) * 8); margin-left: 12.5%; width: 75%;}
			#vid-0F {width: 100%;height: calc((75vw / 16) * 8);overflow: hidden;}
		
		#imgCont-01 {height: calc((100vw / 16) * 8);}
		#imgCont-02A {height: calc((100vw / 16) * 8);}
		#imgCont-02B {height: calc((100vw / 16) * 8);}
		#imgCont-03 {height: calc((100vw / 16) * 8);}
		#imgCont-04 {height: calc((100vw / 16) * 8);}
		#imgCont-05 {height: calc((100vw / 16) * 8);}
		#imgCont-06 {height: calc((100vw / 16) * 8);}
		#imgCont-07 {height: calc((100vw / 16) * 8);}
		#imgCont-08 {height: calc((100vw / 16) * 8);}
		#imgCont-09 {height: calc((100vw / 16) * 8);}
		#imgCont-10 {height: calc((100vw / 16) * 8);}
		#imgCont-11 {height: calc((100vw / 16) * 8);}
		#imgCont-12 {height: calc((100vw / 16) * 8);}
		#imgCont-13A {display:none;}
		#imgCont-13B {height: calc((75vw / 16) * 8);margin-left: 12.5%; width: 75%;}
		#imgCont-14 {height: calc((75vw / 16) * 8);margin-left: 12.5%; width: 75%;}
	
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		/*#return {background: green;}*/
		
		.project-container {margin-top:5%; margin-left: 0%; width: 100%;}
		.project-section {margin-top: 7.5vh!important; margin-bottom: 5vh;}
	
		.projectvid video {width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;}
		
		#sec-00A {height: calc((25vw / 16) * 10); ;margin-right:0.5%;}
		#sec-00B {height: calc((25vw / 16) * 10); margin-left:0.5%;margin-right:0.5%;}
		#sec-00C {height: calc((25vw / 16) * 10); margin-left:0.5%;}
		
		#sec-00D {height: calc((66vw / 16) * 8); margin-left: 16.5%; width: 66%;}
			#vid-0D {width: 100%;height: calc((66vw / 16) * 8);overflow: hidden;}
		#sec-00E {height: calc((66vw / 16) * 9); margin-left: 16.5%; width: 66%;}
			#vid-0E {width: 100%;height: calc((66vw / 16) * 8);overflow: hidden;}
		#sec-00F {height: calc((66vw / 16) * 9); margin-left: 16.5%; width: 66%;}
			#vid-0F {width: 100%;height: calc((66vw / 16) * 8);overflow: hidden;}
		
		#imgCont-01 {height: calc((100vw / 16) * 9);}
		#imgCont-02A {height: calc((100vw / 16) * 9);}
		#imgCont-02B {height: calc((100vw / 16) * 9);}
		#imgCont-03 {height: calc((100vw / 16) * 9);}
		#imgCont-04 {height: calc((100vw / 16) * 9);}
		#imgCont-05 {height: calc((100vw / 16) * 9);}
		#imgCont-06 {height: calc((100vw / 16) * 9);}
		#imgCont-07 {height: calc((100vw / 16) * 9);}
		#imgCont-08 {height: calc((100vw / 16) * 9);}
		#imgCont-09 {height: calc((100vw / 16) * 9);}
		#imgCont-10 {height: calc((100vw / 16) * 9);}
		#imgCont-11 {height: calc((100vw / 16) * 9);}
		#imgCont-12 {height: calc((100vw / 16) * 9);}
		#imgCont-13A {display:none;}
		#imgCont-13B {height: calc((66vw / 16) * 9);margin-left: 16.5%; width: 66%;}
		#imgCont-14 {height: calc((66vw / 16) * 9);margin-left: 16.5%; width: 66%;}
	
	}
}