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

@media (any-pointer: coarse) {
.projectimg {height: calc((90vw / 16) * 9)!important;}

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

#img-01 {background-image: url('/images/SV-ThumbnailsC-p-800.jpeg');}
#img-02 {background-image: url('/images/IdeationC-p-800.jpeg');}
#img-03 {background-image: url('/images/ExplorationC-p-800.jpeg');}
#img-04 {background-image: url('/images/Direction-p-800.jpeg');}
#img-05 {background-image: url('/images/cycleBoard__animation--16x9.gif');}

/* Portrait */
@media (min-aspect-ratio: 1/18) and (max-aspect-ratio: 18/18) {
#img-01 {background-image: url('/images/SV-ThumbnailsC-p-800.jpeg');}
#img-02 {background-image: url('/images/IdeationC-p-800.jpeg');}
#img-03 {background-image: url('/images/ExplorationC-p-800.jpeg');}
#img-04 {background-image: url('/images/Direction-p-800.jpeg');}
#img-05 {background-image: url('/images/cycleBoard__animation--16x9.gif');}
	}

/* Landscape */
@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 54/18) {
	#img-01 {background-image: url('/images/SV-ThumbnailsC-p-1600.jpeg');}
	#img-02 {background-image: url('/images/IdeationC-p-1600.jpeg');}
	#img-03 {background-image: url('/images/ExplorationC-p-1600.jpeg');}
	#img-04 {background-image: url('/images/Direction-p-1600.jpeg');}
	#img-05 {background-image: url('/images/cycleBoard__animation--16x9.gif');}	
}
}

@media (any-pointer: fine) {
	
	.img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
}
	
	#img-01 {background-image: url('/images/SV-ThumbnailsC.jpg');}
	#img-02 {background-image: url('/images/IdeationC.jpg');}
	#img-03 {background-image: url('/images/ExplorationC.jpg');}
	#img-04 {background-image: url('/images/Direction.jpg');}
	#img-05 {background-image: url('/images/cycleBoard__animation--16x9.gif');}
	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
		.projectimg {height: calc((90vw / 16) * 9)!important;}
	}
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
		.projectimg {height: calc((75vw / 16) * 9)!important;}
	}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
		.projectimg {height: calc((66vw / 16) * 9)!important;}
	}
}