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

#img-01 {background-image: url('/images/thermaflex/thermaFlex_1_title-mobile.jpg');}
#img-02 {background-image: url('/images/thermaflex/thermaFlex_2_targetMarket-mobile.jpg');}
#img-03 {background-image: url('/images/thermaflex/thermaFlex_3_statement-mobile.jpg');}
#img-04 {background-image: url('/images/thermaflex/thermaFlex_4_tech-mobile.jpg');}
#img-05 {background-image: url('/images/thermaflex/thermaFlex_5_UI.jpg');}
#img-06 {background-image: url('/images/thermaflex/thermaFlex_6_schematic-mobile.jpg');}
#img-07 {background-image: url('/images/thermaflex/thermaFlex_7_last-mobile.jpg');}

@media (any-pointer: coarse) {

#imgCont-01 {height: calc((90vw / 16) * 9);}
#imgCont-02 {height: calc((90vw / 16) * 10.5);}
#imgCont-03 {height: calc((90vw / 16) * 10.5);}
#imgCont-04 {height: calc((90vw / 16) * 10.5);}
#imgCont-05 {height: calc((90vw / 16) * 10.5);}
#imgCont-06 {height: calc((90vw / 16) * 10.5);}
#imgCont-07 {height: calc((90vw / 16) * 10.5);}


.projectimg {}

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

/* 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) {
	
	.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.5);}
		#imgCont-01 {height: calc((90vw / 16) * 9);}
	
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		.projectimg {height: calc((75vw / 16) * 10.5);}
		#imgCont-01 {height: calc((75vw / 16) * 9);}
		
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		.projectimg {height: calc((66vw / 16) * 10.5);}
		#imgCont-01 {height: calc((66vw / 16) * 9);}
		
	}
}