/* Mobile base */
@media only screen and (min-width: 360px) and (max-width: 749px) {
	#s1-bgimg, #mp-bgimg {
		width     : 100vw;
		height    : 100vh;
		object-fit: cover;
		z-index   : -1;
	}
	#s1t-container, #mp-container {
		position  : absolute;
		text-align: right;
		width     : 60vw;
		height    : 58%;
		right     : 5%;
		/* background-color: rgba(239, 207, 227, 0.5); */
	}
	#s1t-container {
		top: 5%;
	}
	#mp-container {
		top: 1%;
	}
	#s1t1, #mpt1 {
		margin-right: -0.05em;
		font-size   : 17vh;
		line-height : 0.7em;
	}
	#s1t2, #mpt2 {
		font-size   : 7.5vw;
		line-height : 1em;
		opacity     : 0.2;
	}
	#who-are-we::before {
		position        : absolute;
		top             : 25%;
		left            : 50%;
		animation       : fadein-opacity-0p2    1s forwards 1,
                          move-to-left-little   1s forwards 1,
						  disappear             1s forwards 1;
		animation-delay : 1.5s, 3s, 4s;

		font-size       : 4vh;
		opacity         : 0.2;
		content         : "Who are we";
	}
	#team-hcs {
		visibility      : hidden;
		position        : absolute;
		top             : 25%;
		left            : 4.5%;
		text-align      : center;
		font-size       : 3vh;
		line-height     : 1.1em;
		animation       : appear 1s forwards 1;
		animation-delay : 5s;
	}
	#s1t3, #mpt3 {
		font-size   : 5vw;
		line-height : 0.7em;
	}
	/* END section 1/mp */

	/* BEG section2 */
	.s2-mobile-only {
		position        : absolute;
		top             : 2%;
		opacity         : 0.2;
		font-size       : 15vw;
		/* background-color: red; */
	}
	#section2 {
		overflow: hidden;
		/* position: absolute; */
	}
	#s2-bgimg {
		position: relative;
		top: 55%;
		left: 69%;
		transform: translate(-46%, -55%);
		/* transform: translate(-50%, -55%); */
		height: 100%;
		width: auto;
		z-index: -1;
	}
	#s2-left-half {
		position        : absolute;
		left            : 0%;
		width           : 55vw;
		height          : 100vh;
		display         : flex;
		flex-direction  : column;
		justify-content : center;
	}
	#s2t-container {
		display       : flex;
		flex-direction: column;
		position      : absolute;
		width         : 60vw;
		height        : 55vh;
		/* top           : 24.5%; */
		top           : 23%;
		left          : 0%;
	}
	#s2t1, #s2t2, #s2t3 {
		visibility      : hidden;
		animation       : appear-from-left 2s forwards 1;
		padding         : 1.8rem  2.5rem  2.0rem  1.0rem;
		/* border          : 1px solid; */
	}
	#s2t1, #s2t2, #s2t3 { flex-grow       : 1;}
	#s2t1 { animation-delay : 0s; }
	#s2t2 { animation-delay : 1.5s; }
	#s2t3 { animation-delay : 3.0s; }
	#s2t1h, #s2t2h, #s2t3h {
		font-size       : 4.9vh;
	}
	#s2t1b, #s2t2b, #s2t3b {
		text-align      : right;
		font-size       : 2.1vh;
	}
	/* END 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          : 0%;
		top           : 0%;
		width         : 95vw;
		padding       : 2vw;
	}
	#s3t1 {
		white-space     : nowrap;
		margin-bottom   : 2.0vw;
	}
	#s3t1h {
		line-height     : 0;
		display         : inline-block;
		/* text-align: left; */
		/* font-size     : 9.4vw; */
		font-size       : 14vw;
		margin-left     : 0.8vw;
		margin-bottom   : 46vw;
	}
	#airbnb-logo {
		display         : inline-block;
		width           : 10vw;
	}
	#s3t2h, #s3t3h {
		margin-left     : 12vw;
		margin-top      : 10vw;
		font-size       : 7vw;
		padding-left    : 2vw;
		padding-bottom  : 1vw;
		background-color: rgba(255,255,255, 0.65);
	}
	#s3t2b1, #s3t2b2, #s3t3b {
		margin-left     : 27vw;
		padding-left    : 2vw;
		font-size       : 3.8vw;
		background-color: rgba(255,255,255, 0.65);
	}

	#jumble-container {
		position           : absolute;
		top                : 13%;
		right              : 3%;
		/* width           : 40vw; */
		display            : flex;
		justify-content    : flex-end;
	}
	#jumble {
		right           : 0%;
		display         : flex;
		flex-wrap       : wrap;
		justify-content : center;
		align-items     : center;
		align-content   : flex-start;
		width           : 45vw;
		/* height          : 25vw; */
		gap             : 1vw;
		/* background-color: rgba(255, 255,255, 0.25); */
	}
	.jobj {
		width          : 9vw;
		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             : 36%;
		font-size       : 7vw;
		visibility      : hidden;
		animation       : appear 1s forwards 1;
		animation-delay : 3s;
	}
	/* END of section3 */


	/* Quote */
	#s4t1q1, #s4t1q2 {
		position: absolute;
		font-size: 4vw;
		padding: 2vw;
	}	
	#s4t1q1 {
		top: 5%;
		right: 0%;
		width: 70vw;
	}
	#s4t1q2 {
		width: 70vw;		
		top: 27%;
		left: 3%;
	}
	.whose-quote {
		position: absolute;		
		font-size: 3vw;
		text-align: right;
		right: 8%;
	}
	/* END Quote */

	a#a_intro {
		font-size: 4.2vw;
		opacity: 0.5;
	}
	.contact-container {
		position: absolute;
		right   : 0%;
		top     : 59%;
		text-align: right;
		/* face in/out */
		animation: fadein 4s;
	}
	@keyframes fadein {
		0%   { opacity: 0; }
		100% { opacity: 1; }
	}
	a[href^="mailto:"], a[href^="tel:"] {
		opacity: 1;
		text-decoration: none;
		display: block;
		font-size: 5.5vw;
		line-height: 1.5
	}
	a > span {
		opacity: 0.5;
		font-size: 4.8vw;
	}
	a#a_more {
		position: absolute;
		top     : 83%;
		right   : 0%;
		font-size: 4.2vw;
		opacity: 0.5;
		/* color: rgba(239, 207, 227, 0.85); */
	}
}


/* flatter */
@media only screen and (min-width: 360px) and (max-width: 749px)
and (min-aspect-ratio: 0.54) {
	#s2-bgimg {
		position: relative;
		top: 50%;
		left: 50%;
		/*transform: translate(-42%, -55%); */
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	#s2t-container {
		width: 50vw;
	}
	#s2t1b, #s2t2b, #s2t3b {
		text-align: right;
		font-size : 3.5vw;
		margin-top: 1vw;
	}
}

/* Galaxy Note 3 Android 4.3 */
@media only screen and (width: 360px) and (max-width: 749px)
and (height: 640px) {
	#s2-bgimg {
		left: 59%;
	}
	#s2t-container {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 60vw;
		height: 59vh;
		top: 22%;
		left: 0%;
	}
} /* END of Galaxy Note 3 Android 4.3 */

/* Pixel 2XL Android 8, expected to override */
@media only screen and (width: 411px) and (max-width: 749px)
and (height: 823px) {
	#s2-bgimg {
		left: 70%;
	}
	#s2t-container {
		width: 64vw;
		height: 58vh;
		top: 22%;
	}

	#s2t1 {
		/* display: flex; */
		flex-grow: 1;
		border: 1px solid;
		/* height: 30%; */
		/* align-items    : center; */
		padding: 2.5rem;
	}
	#s2t1h {
		font-size: 5.5vw;
	}
	#s2t1b {
		text-align: right;
		font-size: 2vw;
		margin-top: 2vw;
	}

	#s2t2 {
		padding: 2.5rem;

		flex-grow: 1.4;

		border: 1px solid;
	}
	#s2t2h {
		font-size: 5.5vw;
	}
	#s2t2b {
		text-align: right;
		font-size: 2vw;
		margin-top: 2vw;
	}

	#s2t3 {
		/* justify-content: center; */
		padding: 2.5rem;

		flex-grow: 0.9;

		border: 1px solid;
	}
	#s2t3h {
		font-size: 5.5vw;
	}
	#s2t3b {
		text-align: right;
		font-size: 2vw;
		margin-top: 2vw;
	}
}
/* END Galaxy Note 3 Android 4.3 or Pixel 2XL Android 8 */

/* iPhone SE Gen2, expected to override */
@media only screen and (width: 375px) and (max-width: 749px)
and (height: 667px) {
	/* emulate 'object-fit: cover' without using them */
	#section2 {
		overflow        : hidden;
		/* position: absolute; */
	}
	#s2-bgimg {
		position        : relative;
		top             : 55%;
		left            : 59%;
		/* transform: translate(-50%, -50%); */
		transform       : translate(-42%, -55%);
		height          : 100vw;
		width           : auto;
		z-index         : -1;
	}
	#s2t-container {
		width           : 60vw;
		height          : 55vh;
	}

} /* END of iPhone SE Gen2 */

/* iPhone early 20s: 13 */