/* Emulate 'object-fit: cover' without using them 
   to support more browsers */

/* Default Browser Base */
@media only screen and (min-width: 750px) {
	/* START Main page components in browser */
	.contact-container {
		position  : absolute;
		right     : 0%;
		text-align: right;
		margin-top: 9vw;
		/* face in/out */
		animation: fadein 4s;
	}
	a[href^="mailto:"], a[href^="tel:"] {
		opacity: 1;
		text-decoration: none;
		display: block;
		font-size: 4.0vw;
		line-height: 1.05;
	}
	a > span {
		opacity: 0.5;
		font-size: 3.0vw;
	}
	a#a_more {
		position : absolute;
		bottom   : 3%;
		right    : 0%;
		opacity  : 0.5;
		/* color: rgba(239, 207, 227, 0.85); */
	}
	a#a_intro {
		opacity  : 0.5;
	}
	a#a_intro, a#a_more {
		font-size: 1.8vw;
	}
	/* END Main page components */

	/* BEG of main/section1 */
	#s1-bgimg, #mp-bgimg {
		width     : 100vw;
		height    : 100vh;
		object-fit: cover;
		z-index   : -1;
	}
	#s1t-container, #mp-container {
		position  : absolute;
		text-align: right;
		height    : 100vh;
		right     : 2%;
		/* background-color: white; */
	}
	#s1t-container {
		top: 5%;
	}
	#mp-container {
		top: 1%;
	}
	#s1t1, #mpt1 {
		margin-right: -0.05em;
		font-size       : 30vh;
		line-height     : 0.7em;
	}
	#s1t2, #mpt2 {
		font-size       : 7.5vw;
		line-height     : 1em;
		opacity         : 0.2;
		animation       : fadein-opacity-0p2 4s forwards 1;
	}
	#who-are-we::before {
		position        : absolute;
		top             : 30%;
		left            : 56%;
		visibility      : hidden;
		animation       : fadein-opacity-0p2 2s forwards 1,
                          move-to-left       1s forwards 1,
						  disappear          1s forwards 1;
		animation-delay : 0s, 1s, 2s;

		font-size       : 7.5vw;
		line-height     : 1em;
		opacity         : 0.2;
		content         : "Who are we?";
	}
	#team-hcs {
		visibility      : hidden;
		position        : absolute;
		top             : 18%;
		left            : 4.5%;
		text-align      : center;
		font-size       : 5vw;
		line-height     : 1.1em;
		animation       : appear 1s forwards 1;
		animation-delay : 3s;
	}
	#mpt3 {
		font-size   : 5vw;
		line-height : 0.7em;
	}
	/* END of main/section1 */

	/* emulate 'object-fit: cover' without using them */

	/* BEG of section2 */
	#section2 {
		overflow        : hidden;
	}
	#s2-bgimg {
		position        : relative;
		/* top             : 60%; */
		top             : 0%;
		left            : 50%;
		/* transform       : translate(-45%, -45%); */
		transform       : translate(-45%, 0%);
		width           : 105vw;
		height          : auto;
		z-index         : -1;
	}
	#s2-left-half {
		position        : absolute;
		left            : 0%;
		width           : 50vw;
		height          : 100vh;
		display         : flex;
		flex-direction  : column;
		/* align-items     : center; */
		justify-content: center;
		/* align-content: center; */
	}
	#s2t-container {
		display         : flex;
		flex-direction  : column;
		position        : absolute;
		justify-content : center;
		width           : 50vw;
		height          : 86vh;
		left            : 0%;
	}
	#s2t1, #s2t2, #s2t3 {
		visibility      : hidden;
		animation       : appear-from-left 2s forwards 1;
		padding         : 2.5rem  2.5rem  2.5rem  1.5rem;
		/* border    : 1px solid; */
		margin-top      : 4.5vh;
		background-color: rgba(255,255,255,0.65);
	}
	#s2t3 {
		margin-bottom   : 3.8vh;
	}
	#s2t1, #s2t2, #s2t3 {
		flex-grow       : 1;
	}
	#s2t1 {
		animation-delay : 0s;
	}
	#s2t2 {
		animation-delay : 1.5s;
	}
	#s2t3 {
		animation-delay : 3s;
	}
	#s2t1h, #s2t2h, #s2t3h {
		font-size: 5.5vw;
	}
	#s2t1b, #s2t2b, #s2t3b {
		text-align: right;
		font-size : 2vw;
		margin-top: 2vw;
	}
	.s2-mobile-only {
		visibility: hidden;
	}
	/* END of section2 */


	/* BEG of section3 */
	#s3-bgimg {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index       : -1;
	}
	#s3t-container {
		display       : flex;
		flex-direction: column;
		gap           : 3.5vw;
		position      : absolute;
		height        : 100vh;
		left          : 50%;
		top           : 0%;
		width         : 50vw;
		padding       : 2vw;
	}
	#s3t1 {
		white-space: nowrap;
		margin-bottom: 2.0vw;
	}
	#airbnb-logo {
		display: inline-block;
		width: 7vw;
	}
	#s3t1h {
		line-height: 0;
		display: inline-block;
		/* text-align: left; */
		font-size: 9.4vw;
		margin-left: 0.8vw;
	}
	#s3t2h, #s3t3h {
		font-size: 3vw;
		padding-bottom: 1vw;
	}
	#s3t2b1, #s3t2b2, #s3t3b {
		padding-left: 2vw;
		font-size: 1.5vw;
	}

	#jumble-container {
		position       : absolute;
		bottom         : 5%;
		left           : 5%;
		width          : 40vw;
		display        : flex;
	}
	#jumble {
		display         : flex;
		flex-wrap       : wrap;
		justify-content : center;
		align-items     : center;
		align-content   : flex-start;
		width           : 25vw;
		/* height          : 25vw; */
		gap             : 1vw;
		/* background-color: rgba(255, 255,255, 0.5); */
	}
	.jobj {
		width          : 5.0vw;
		animation      : jiggle 1s forwards 2, shrink 1s forwards 1;
	}
	#jumble img:nth-child(1)  { animation-delay: 0s   , 3s; }
	#jumble img:nth-child(2)  { animation-delay: 0.5s , 3s;}
	#jumble img:nth-child(3)  { animation-delay: 0.25s, 3s;}
	#jumble img:nth-child(4)  { animation-delay: 1s   , 3s;}
	#jumble img:nth-child(5)  { animation-delay: 0.5s , 3s;}
	#jumble img:nth-child(6)  { animation-delay: 0.25s, 3s;}
	#jumble img:nth-child(7)  { animation-delay: 0.5s , 3s;}
	#jumble img:nth-child(8)  { animation-delay: 0.75s, 3s;}
	#jumble img:nth-child(9)  { animation-delay: 0.25s, 3s;}
	#jumble img:nth-child(10) { animation-delay: 1s   , 3s;}

	#s3-logotic {
		position        : absolute;
		top             : 27%;
		font-size       : 5.5vw;
		visibility      : hidden;
		animation       : appear 1s forwards 1;
		animation-delay : 3s;
	}
	/* END of section3 */

	/* Quotes */
	#s4t1q1 {
		position: absolute;
		font-size: 2vw;
		padding: 2vw;
		width: 45vw;
		top: 0%;
		left: 50%;
	}
	#s4t1q2 {
		position: absolute;
		width: 50vw;
		font-size: 2vw;
		width: 45vw;
		padding: 2vw;
		top: 28%;
		left: 3%;
	}
	.whose-quote {
		font-size: 1.5vw;
		position: absolute;
		text-align: right;
		right: 15%;
	}
	/* END Quotes */
}

/* Base browser square */
@media only screen and (min-width: 750px)
and (min-aspect-ratio: 0.9) and (max-aspect-ratio: 1.1) {
	/* START section2 */
	#section2 {
		overflow: hidden;
	}
	#s2-bgimg {
		position        : relative;
		top             : 0%;
		left            : 48%;
		transform       : translate(-40%, 0%);
		height          : auto;
		width           : 110vw;
		z-index         : -1;
	}
	#s2t-container {
		display         : flex;
		flex-direction  : column;
		position        : absolute;
		width           : 50vw;
		height          : 100vh;
		left            : 0%;
	}
	#s2t1, #s2t2, #s2t3 {
		padding: 2.5rem  2.5rem  2.5rem  1.5rem;
		/* border : 1px solid; */
		background-color: rgba(255,255,255,0.65);
	}
	#s2t1h, #s2t2h, #s2t3h {
		font-size: 5.5vw;
	}
	#s2t1b, #s2t2b, #s2t3b {
		text-align: right;
		font-size : 2vw;
		margin-top: 2vw;
	}
	/* END of section2 */
}
/* END Base browser square */

/* Base browser mid-wide */
@media only screen and (min-width: 750px)
and (min-aspect-ratio: 1.1) and (max-aspect-ratio: 1.3) {
	#s2-bgimg {
		position        : relative;
		top             : 0%;
		left            : 50%;
		transform       : translate(-45%, 0%);
		width           : 110vw;
		height          : auto;
		z-index         : -1;
	}
	#s2t-container {
		display: flex;
		flex-direction: column;
		position      : absolute;
		width         : 48vw;
		height        : 110vh;
	}
	/* #s2t1 { margin-top: 0;} */
	#s2t3 { margin-bottom: 0;}
	#s2t2, #s2t3 {
		margin-top: 6vh;
	}
	/* BEG section3 */
	#s3-logotic {
		top: 48%;
	}
	/* END section3 */
}

/* Base browser wide */
@media only screen and (min-width: 750px)
and (min-aspect-ratio: 1.3) and (max-aspect-ratio: 2) {
	#s2-bgimg {
		position        : relative;
		top             : 0%;
		left            : 50%;
		transform       : translate(-45%, 0%);
		width           : 110vw;
		height          : auto;
		z-index         : -1;
	}
	#s2t-container {
		display         : flex;
		flex-direction  : column;
		position        : absolute;
		width           : 47vw;
		height          : 100vh;
	}
	#s2t1 { margin-top   : 1.2vh;}
	#s2t2 { margin-top   : 18.5vh;}
	#s2t3 { margin-top   : 20vh;}
	#s2t3 { margin-bottom: 1.2vh;}
	#s2t1, #s2t2, #s2t3 {
		padding: 2.5vh 2.5rem  2.5vh 1.5rem;
		/* padding: 2.5rem  2.5rem  2.5rem 1.5rem; */
		/* border : 1px solid; */
		background-color: rgba(255,255,255,0.65);
	}
	#s2t1 {
		padding-top     : 0;
		padding-bottom  : 0;
	}
	#s2t3 {
		padding-top     : 0;
		padding-bottom  : 0;
	}
	#s2t1h, #s2t2h, #s2t3h {
		font-size       : 5.8vh;
	}
	#s2t1b, #s2t2b, #s2t3b {
		text-align: right;
		font-size : 2.7vh;
		margin-top: 1.5vh;
	}
	/* END of section2 */
}

/* broswer long */
/* Laptop/Desktop browser set long w=h and w<h, rarely found due to hi pixel */
@media only screen and (min-width: 1025px)
and (max-aspect-ratio: 1) {
	#section2 {
		margin        : 0;
	}
	#s2t-container {
		display       : flex;
		flex-direction: column;
		position      : absolute;
		width         : 49.5vw;
		height        : 85vh;
		margin-top    : 0;
		top           : 3rem;
		/* bottom: 5%; */
	}
	#s2t1 { flex-grow: 1;}
	#s2t2 { flex-grow: 1;}
	#s2t3 { flex-grow: 1;}
	#s2t1, #s2t2, #s2t3 {
		margin-top:    2rem;
		background-color: rgba(255,255,255,0.65);
	}
}