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

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

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

#wrapper {
	position: absolute;
	height: 100vh;
	height: var(--app-height);
}

/*.work {height:calc((var(--app-height)/100)*75);}*/
.about {height:calc((var(--app-height)/100)*85);}
	
/* iphone 12 */
@media (min-aspect-ratio: 18/57) and (max-aspect-ratio: 18/33) {
 	.info {height: 17.5%;}
	
	.work {top: 15%;height: 75%;;width: 100%;}
	
	
	.aboutUp {transform: translateY(25%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(100%); transition: transform 0.5s ease-out;}
	.about_hint-txt {top: 25%;}
	.about_hint-arr {bottom: 5%;}
	.about_content {top: 17%;}
	.about_content-pic {height: 29%;}
	
	about_content-txt {height: auto;}
	#abttxt {margin-bottom: 5%;}
	#abthello {}
}

/* iphone 6-8, iphone X */
@media (min-aspect-ratio: 18/33) and (max-aspect-ratio: 18/30) {
	.work {top: 10%;height: 87.5%;width: 100%;}
	
	.aboutUp {transform: translateY(20%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(105%); transition: transform 0.5s ease-out;}
	.about_content-pic {height: 35%;}
	#contact {margin-top: 7.5vh;}
}

/* iphone 6-8 (Address Bar Compensation)*/
@media (min-aspect-ratio: 18/30) and (max-aspect-ratio: 18/19) {
	.work {top: 6.5%;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);}
	
	.aboutUp {transform: translateY(19%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(105%); transition: transform 0.5s ease-out;}
	
	.about_content-pic {height: 34%;}
	#abthello {display: none;}
	#contact {margin-top: 2.5vh;}
}

/* 6-8, X (Universal) */
@media (min-aspect-ratio: 18/33) and (max-aspect-ratio: 18/19) {
 	.info {height: 15%;}
	
	about_content-txt {height: auto;}
	#abttxt {margin-bottom: 5%;}	
}
	
	
	
/* Phone: Landscape */
@media (min-aspect-ratio: 19/18) and (max-aspect-ratio: 33/18) {
	
	h1 {font-size: 3.5vw;}
	h1b {font-size: 3vw;}
	h2 {font-size: 3vw;}
	h3 {font-size: 2.75vw;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 2vw;}
	
	.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 {top: 12.5%;}
	.work_images {height: 90%;}
	#workImg-4 {grid-column: 5 / 13; grid-row: 3 / 3;}
	#workImg-5 {grid-column: 1 / 5; grid-row: 3 / 3;}
	#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);}
	
	.about {border-radius:1.5vh;}
	.aboutUp {transform: translateY(21.25%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(108%); transition: transform 0.5s ease-out;}
	.about_hint-txt {top: 5%;}
	.about_hint-arr {bottom: 35%; width: 33%;}
	.about_content {flex-flow: column wrap;top: 10%;}
	.about_content-pic {height: 86%; width: 33%; margin-top: 0;}
	.about_content-tag {margin-left: 0%; width: 100%;}
	.about_content-txt {margin-top: 0%; height: 75%;}
	.about_content-txt p {width: 100%;}
	.about_content-con {width: 100%;}

	#tag-lscape {order: 1; margin-bottom: 2.5%;}
	.about_content-txt {order: 2; margin-bottom: 1.25%;}
		#abtmobi {width: 25%; height: 70%;}
		#abttxt {margin-bottom: 2.5%;}
		#abthello {}
	.about_content-con {order: 3;}
	
/* widescreen compensation */
	.info {width: 90%; left: 5%;}
	.info-container {flex-direction: row; align-items: baseline; justify-content: space-between; top: 33%;}
	#designer {margin-bottom: 0;}
	.work {width: 90%; left: 5%;}
	.work_images {top: 7.5%;}
	.about {width: 81%; left: 9.5%;}
}
/* Phone: Landscape - Wide */
@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 55/18) {
	
	h1 {font-size: 3vw;}
	h1b {font-size: 2.25vw;}
	h2 {font-size: 2.5vw;}
	h3 {font-size: 2.375vw;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 1.75vw;}
	
	.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 {top: 12.5%;}
	.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);}
	
	.about {border-radius:1.5vh;}
	.aboutUp {transform: translateY(21.25%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(108%); transition: transform 0.5s ease-out;}
	.about_hint-txt {top: 5%;}
	.about_hint-arr {bottom: 35%; width: 33%;}
	.about_content {flex-flow: column wrap;top: 10%;}
	.about_content-pic {height: 86%; width: 33%; margin-top: 0;}
	.about_content-tag {margin-left: 0%; width: 100%;}
	.about_content-txt {margin-top: 0%; height: 70%;}
	.about_content-txt p {width: 100%;}
	.about_content-con {width: 100%;}

	#tag-lscape {order: 1; margin-bottom: 2%;}
	.about_content-txt {order: 2; margin-bottom: 3%;}
		#abtmobi {width: 20%; height: 70%;}
		#abttxt {margin-bottom: 2%;}
		#abthello {}
	.about_content-con {order: 3;}
	
/* widescreen compensation */
	.info {width: 80%; left: 10%;}
	.info-container {flex-direction: row; align-items: baseline; justify-content: space-between; top: 33%;}
	#designer {margin-bottom: 0;}
	.work {width: 80%; left: 10%;}
	.work_images {top: 7.5%;}
	.about {width: 72%; left: 14%;}
	.about_content {width: 90%; left: 5%;}
}	

/* Visibility: */	
/* Portrait Only */
@media (max-aspect-ratio: 1/1) {
	#abtdsk {display: none;}
	#tag-dsktp {display: none;}
	#tag-lscape {display: none;}
}
/* Landscape Only */
@media (min-aspect-ratio: 1/1) {
	#abtdsk {display: none;}
	#tag {display: none;}
	#tag-dsktp {display: none;}
}
	
}

/* Laptop & Desktop */
@media (any-pointer: fine) {
	
@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;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 1.5vw;}
	
	.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 {top: 12.5%;}
	.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);}
	
	.about {border-radius:1.5vh;}
	.aboutUp {transform: translateY(22.5%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(108%); transition: transform 0.5s ease-out;}
	.about_hint-txt {top: 5%;}
	.about_hint-arr {bottom: 35%; width: 33%;}
	.about_content {flex-flow: row wrap; top: 17%; align-items: flex-start; justify-content: center;align-content: flex-start;}
	.about_content-pic {order: 1; height: 50%; width: 25%; margin-top: 0.5%;}
	.about_content-tag {order: 2; margin-left: 0%; width: auto;}
	.about_content-txt {order: 3; margin-top: 0; height: 50%; width: 65%;}
	.about_content-txt p {width: 100%;}
	.about_content-con {order: 4; width: 100%; margin-top: 7.5%;flex-shrink: 2;}
	#tag-dsktp {margin-top: 0; margin-bottom: 3%;}
	#abttxt {margin-bottom: 3%;}
	#contact {}
	#abtdsk {}
}	
@media (min-aspect-ratio: 29/18) and (max-aspect-ratio: 33/18) {
	
	h1 {font-size: 3.5vw;}
	h1b {font-size: 2.5vw;}
	h2 {font-size: 2.25vw;}
	h3 {font-size: 1.625vw;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 1.125vw;}
	
	.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 {top: 12.5%;}
	.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);}
	
	
	.about {border-radius:1.5vh;}
	.aboutUp {transform: translateY(20%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(108%); transition: transform 0.5s ease-out;}
	
	.about_hint-txt {top: 5%;}
	.about_hint-arr {bottom: 35%; width: 33%;}
	.about_content {flex-flow: row wrap; top: 15%; align-items: flex-start; justify-content: center;align-content: flex-start;}
	.about_content-pic {order: 1; height: 50%; width: 25%; margin-top: 0.75%;}
	.about_content-tag {order: 2; margin-left: 0%; margin-top:0;width: auto;}
	.about_content-txt {order: 3; margin-top: 0; height: 50%; width: 65%;}
	.about_content-txt p {width: 100%;}
	.about_content-con {order: 4; width: 100%; margin-top: 10%;flex-shrink: 2;}
	#tag-dsktp {margin-top: 0; margin-bottom: 3%;}
	#abttxt {margin-bottom: 3%;}
	#contact {}
	#abtdsk {}
	
	/* widescreen compensation */
	.info {width: 75%; left: 12.5%;}
	.info-container {flex-direction: row; align-items: baseline; justify-content: space-between; top: 33%;}
	#designer {margin-bottom: 0;}
	.work {width: 75%; left: 12.5%;}
	.work_images {top: 7.5%;}
	.about {width: 67.5%; left: 16.25%;}
}
@media (min-aspect-ratio: 33/18) and (max-aspect-ratio: 54/18) {
	
	h1 {font-size: 2.4vw;}
	h1b {font-size: 1.8vw;}
	h2 {font-size: 1.8vw;}
	h3 {font-size: 1.5vw;}
	h4 {font-size: 5vh;}
	h4b {font-size: 3.5vh;}
	p {font-size: 1.075vw;}
	
	.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 {top: 12.5%;}
	.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);}
	
	.about {border-radius:1.5vh;}
	.aboutUp {transform: translateY(20%); transition: transform 0.35s ease-in;}
    .aboutDn {transform: translateY(108%); transition: transform 0.5s ease-out;}
	
	.about_hint-txt {top: 5%;}
	.about_hint-arr {bottom: 35%; width: 33%;}
	.about_content {flex-flow: row wrap; top: 15%; align-items: flex-start; justify-content: center;align-content: flex-start;}
	.about_content-pic {order: 1; height: 50%; width: 25%; margin-top: 1%;}
	.about_content-tag {order: 2; margin-left: 0%; width: auto;}
	.about_content-txt {order: 3; margin-top: 0; height: 50%; width: 65%;}
	.about_content-txt p {width: 100%;}
	.about_content-con {order: 4; width: 100%; margin-top: 15%;flex-shrink: 2;}
	#tag-dsktp {margin-top: 0; margin-bottom: 3%;}
	#abttxt {margin-bottom: 3%;}
	#contact {}
	#abtdsk {}
	
	/* widescreen compensation */
	.info {width: 66%; left: 16.5%;}
	.info-container {flex-direction: row; align-items: baseline; justify-content: space-between; top: 33%;}
	#designer {margin-bottom: 0;}
	.work {width: 66%; left: 16.5%;}
	.work_images {top: 7.5%;}
	.about {width: 59.4%; left: 19.75%;}
}
	
/* Portrait Only */
@media (max-aspect-ratio: 1/1) {
	#abtdsk {display: none;}
	#tag-dsktp {display: none;}
	#tag-lscape {display: none;}
}

/* Landscape Only */
@media (min-aspect-ratio: 1/1) {
	#abtmobi {display: none;}
	#tag {display: none;}
	#tag-lscape {display: none;}
}	
	
}