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

/* mobile & tablet - Pointer: Coarse */
@media (any-pointer: coarse) {

	/* iphone 12 */
	@media (min-aspect-ratio: 9/20) and (max-aspect-ratio: 9/17) {
 	.info {height: 17.5vh;}
	
	.work {top: 15%;height: 75%;width: 100%;}
	.workwrapper {height: 75%;width: 100%;}
	
}
	/* iphone 6-8 */
	@media (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/15) {
	.work {top: 10%;height: 87.5%;width: 100%;}
	.workwrapper {height: 87.5%;width: 100%;}
}
	@media (min-aspect-ratio: 9/17) and (max-aspect-ratio: 9/13) {
 	.info {height: 15vh;}
	
	#return {top:2.5%!important;}
}
	@media (min-aspect-ratio: 9/15) and (max-aspect-ratio: 9/13) {
	.work {top: 6.5%;height: 95%;width: 100%;}
	.workwrapper {height: 95%;width: 100%;}

	#workImg-2 img {height: 130%; transform: translateY(-7.5%) scaleX(1);}
	#workImg-4 img {transform: translate(-22.5%, -65%) scale(3);}
	#workImg-5 img {transform: translate(12.5%, 25%) scale(1.75);}
	#workImg-6 img {object-position: 0% 50%; transform: scale(3);}
	#workImg-7 img {object-fit: cover; object-position: 30% 50%; transform: translateY(90%) scale(-5, 5);}
	#workImg-8 img {object-position: 35% 50%; transform: translateY(10%) scale(1.25);}
	
}
	/* Phone Landscape */
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 3/1) {
	
	h1 {font-size: 3.5vw;}
	h1b {font-size: 3vw;}
	h2 {font-size: 3vw;}
	h3 {font-size: 2.75vw;}
	h3b {font-size: 2.25vw; line-height:5vw;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 2vw;}
	
	#return {top: 0.5vh;}
	
	.project-container {margin-top:5%;}
	.project-title {margin-bottom: 0.75vh;}
	.project-sub {width: 75%; margin-bottom: 2.25vh;}
	.project-txt {width: 100%;margin-bottom: 5vh;}
	
	.items {height: calc((90vw / 16) * 10);}
	.item {width: 300%;height: calc((90vw / 16) * 10);}
	
	#hline {margin-top: 15vh;margin-bottom: 0vh; width: 90%;height: 0.125vh;}
	
	.workwrapper{height:85%;}
	.work_images {height: 80%;width: 66%;margin-top:-5vh;margin-bottom: 5vh;}
	#home {margin-top: -2.5vh;margin-bottom: 10vh;}
	
	#workImg-4 {grid-column: 2 / 4; grid-row: 3 / 4;}
	#workImg-5 {grid-column: 1 / 2; grid-row: 3 / 4;}
	#workImg-1 img {width: 150%; object-position: 0% 45%;}
	#workImg-2 img {height: 130%; transform: translateY(-7.5%) scaleX(1);}
	#workImg-3 img {object-position: 0% 100%;}
	#workImg-4 img {transform: translate(7.5%, 17.5%) scale(1.5);}
	#workImg-5 img {transform: translate(12.5%, 22.5%) scale(1.75);}
	#workImg-6 img {object-position: 0% 50%; transform: translateX(40%) scale(2);}
	#workImg-7 img {object-fit: cover; object-position: 30% 50%; transform: translate(0%, 0%) scale(-2, 2);}
	#workImg-8 img {object-position: 35% 50%; transform: translateY(10%) scale(1.25);}

}

}

/* Laptop & Desktop */
@media (any-pointer: fine) {
	
	/*.items {height: calc((90vw / 16) * 10);}
	.item {width: 300%;height: calc((90vw / 16) * 10);}*/
	
	.workwrapper{height:85%;}
	.work_images {height: 90%;}
	
	#workImg-4 {grid-column: 2 / 4; grid-row: 3 / 4;}
	#workImg-5 {grid-column: 1 / 2; grid-row: 3 / 4;}
	
	#workImg-1 img {width: 150%; object-position: 0% 45%;}
	#workImg-2 img {height: 130%; transform: translateY(-7.5%) scaleX(1);}
	#workImg-3 img {object-position: 0% 100%;}
	#workImg-4 img {transform: translate(7.5%, 17.5%) scale(1.5);}
	#workImg-5 img {transform: translate(12.5%, 22.5%) scale(1.75);}
	#workImg-6 img {object-position: 0% 50%; transform: translateX(40%) scale(2);}
	#workImg-7 img {object-fit: cover; object-position: 30% 50%; transform: translate(0%, 0%) scale(-2, 2);}
	#workImg-8 img {object-position: 35% 50%; transform: translateY(10%) scale(1.25);}
	
	@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 29/18) {
	
	h1 {font-size: 3.5vw;}
	h1b {font-size: 3vw;}
	h2 {font-size: 2.25vw;}
	h3 {font-size: 2vw;}
	h3b {font-size: 2.25vw;}
	h4 {font-size: 3.25vw;}
	h4b {font-size: 2.5vw;}
	p {font-size: 1.625vw;}
	
	.info-container {width: 90%;margin-left:5%;flex-direction: row; align-items: flex-end; justify-content: space-between;}
	
	#return {top:3.75%;}
		
	.project-container{width: 90%; margin-top:5%; margin-left: 5%;}
	.project-title {margin-bottom: 0.75vh;}
	.project-sub {width: 100%; margin-bottom: 2.25vh;}
	.project-txt {width: 100%;margin-bottom: 5vh;}
	
	#hline {margin-top: 15vh;margin-bottom: 0vh; width: 90%;height: 0.125vh;}
		
	.work {width: 90%; margin-left: 5%;margin-top:5%;}
	
}	
	
	@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
	
	h1 {font-size: 3.25vw;}
	h1b {font-size: 2.5vw;}
	h2 {font-size: 2.25vw;}
	h3 {font-size: 2vw;}
	h3b {font-size: 2vw;}
	h4 {font-size: 2.75vw;}
	h4b {font-size: 2.25vw;}
	p {font-size: 1.5vw;}
		
	.info-container {width: 75%;margin-left:12.5%;flex-direction: row; align-items: flex-end; justify-content: space-between;}
	
	#return {top:1.25%;}
		
	.project-container{width: 75%; margin-top:5%; margin-left: 12.5%;}
	.project-title {margin-bottom: 0.75vh;}
	.project-sub {width: 86%; margin-bottom: 2.25vh;}
	.project-txt {width: 100%;margin-bottom: 5vh;}
	
	#hline {margin-top: 15vh;margin-bottom: 0vh; margin-left:12.5vw; width: 75%;height: 0.125vh;}
	
	.work {width: 75%; margin-left: 12.5%;margin-top:5%;}
	

}
	@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
	
	h1 {font-size: 2.5vw;}
	h1b {font-size: 1.8vw;}
	h2 {font-size: 1.8vw;}
	h3 {font-size: 1.5vw;}
	h3b {font-size: 1.75vw;}
	h4 {font-size: 2.25vw;}
	h4b {font-size: 1.75vw;}
	p {font-size: 1.25vw;}
	
	.info-container {width: 66%; margin-left:16.5%;flex-direction: row; align-items: flex-end; justify-content: space-between;}
	
	#return {top: 2.5%;}
	/*#mark, #designer {margin: 10% 0% 0% 0%;}*/
		
	.project-container{width: 66%; margin-top:5%; margin-left: 16.5%;}
		
	.project-title {margin-bottom: 0.75vh;}
	.project-sub {width: 75%; margin-bottom: 2.25vh;}
	.project-txt {width: 100%;margin-bottom: 5vh;}
	
	#hline {margin-top: 15vh;margin-bottom: 0vh; margin-left:16.5vw; width: 66%;height: 0.125vh;}
	
	.work {width: 66%; margin-left: 16.5%;margin-top:5%;}

}

}


/* Visibility */
/* Portrait Only */
@media (max-aspect-ratio: 1/1) {}
/* Landscape Only */
@media (min-aspect-ratio: 1/1) {}