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

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

	#return {height: 5vw;}
	/* Mobile Portrait */
	@media (min-aspect-ratio: 1/18) and (max-aspect-ratio: 18/18) {
		
		#designer{text-align: left; width:90%;}
		
		/* iphone 12 */
		@media (min-aspect-ratio: 18/54) and (max-aspect-ratio: 18/33) {
 			.info {height: 17.5vh;}
			
			h3b {font-size: 5.75vw;}
			#return {margin-top:10%;}
			#mark {margin-top:10%;}
			
			.work {top: 15%;height: 75%;width: 100%;}
			.workwrapper {height: 75%;width: 100%;}
			
			}
		/* iphone X */
		@media (min-aspect-ratio: 18/33) and (max-aspect-ratio: 18/30) {
			
			.work {margin-top: 10%;height: 87.5%;width: 90%;}
			.workwrapper {height: 87.5%;width: 100%;}

		}
		/* iphone 6-8 */
		@media (min-aspect-ratio: 18/30) and (max-aspect-ratio: 18/25) {
	
			.work {margin-top: 6.5%;height: 95%;width: 90%;}
			.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);}
		
		}
		/* iphone 6-8 & X */
		@media (min-aspect-ratio: 18/33) and (max-aspect-ratio: 18/25) {
 			.info {height: 15vh;}
				
			#return {margin-top:3.75%;}
			#mark {margin-top:7.5%;}
	
		}
		/* iPad */	
		@media (min-aspect-ratio: 18/25) and (max-aspect-ratio: 18/18) {
			.info {height: 20vh;}
				
			#return {margin-top:3.75%;}
			#mark {margin-top:7.5%;}
			
			.work {margin-top: 6.5%;height: 95%;width: 90%;}
			.workwrapper {height: 95%;width: 100%;}
		}
	
	}

	/* Phone Landscape */
	@media (min-aspect-ratio: 18/18) and (max-aspect-ratio: 180/18) {
	
		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;}
		
		.info {height: 12.5vw;}
		.info-container {width: 90%;margin-left:5%;flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
		
		#return {top: 0.5vh;}
		#designer{text-align: right;}
		
		.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;}
		.projectvid {height: calc((90vw / 16) * 9);}
		
		.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: 5 / 13; grid-row: 3 / 4;}
		#workImg-5 {grid-column: 1 / 5; 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);}
	
		/* iPad */
		@media (min-aspect-ratio: 18/18) and (max-aspect-ratio: 18/25) {
			.info {height: 15vh;}
				
			#return {margin-top: 0%;}
			#mark {margin-top: 5%;}
		
		}
}

}

/* Laptop & Desktop */
@media (pointer: fine) {
	
	/*.items {height: calc((90vw / 16) * 10);}
	.item {width: 300%;height: calc((90vw / 16) * 10);}*/
	#designer{text-align: right;}
	
	.workwrapper{height:85%;}
	.work_images {height: 90%;}
	
	#workImg-4 {grid-column: 5 / 13; grid-row: 3 / 4;}
	#workImg-5 {grid-column: 1 / 5; 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; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
	
	#return {margin-top:2.5%;}
	#mark {margin-top:5%;}
	#designer{margin-top:5%;}
		
	.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;}
	.projectvid {height: calc((90vw / 16) * 9);}
	
	#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; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
	
	#return {margin-top:1.25%;}
	#mark {margin-top:6.25%;}
	#designer{margin-top:6.25%;}
		
	.project-container{width: 75%; margin-top:6.25%; 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;}
	.projectvid {height: calc((75vw / 16) * 9);}
	
	#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; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
	
	#return {margin-top:2.5%;}
	#mark {margin-top:7.5%;}
	#designer{margin-top:7.5%;}
		
	.project-container{width: 66%; margin-top:7.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;}
	.projectvid {height: calc((66vw / 16) * 9);}
	
	#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) {}