html,
body	{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

*,
*::before,
*::after	{
	box-sizing: border-box;
}

.container	{
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;

	width: 100%;
	padding-right: calc(.5 * var(--bs-gutter-x));
	padding-left: calc(.5 * var(--bs-gutter-x));
	margin-right: auto;
	margin-left: auto;
}

:root	{
/*	--aspect-ratio: calc(100vw / 100vh);	*/
	--aspect-ratio: 4;
	--aspect-ratio-bg: 12;
}

.banner	{
	--animation-duration: 6s;
	--size: 2.4rem;

	--tmp: calc(var(--aspect-ratio) / var(--aspect-ratio-bg));
	--position-end: 35%;
	--position-start: calc(var(--position-end) - 50% * (var(--aspect-ratio) / var(--aspect-ratio-bg)));

	--black: #252525;

/*	--sepia: #f4ecd8;	*/
	--sepia: #ceb180;
/*	--sepia: #4c3c26;	*/

/*	--red: #d64a59;		*/
	--red: #e83a56;

	--height: 100%;
/*	--height: 125px;	*/
/*	--height: 250px;	*/
	
	position: relative;
	width: 100%;
	height: var(--height);

	background: url('img/background@2x.webp') center / cover repeat-x;
	overflow: clip;
}

.banner::before	{
	content: '';
	position: absolute;
	top: 15%;
	left: 0;
	height: 100%;
	width: 100%;
	background: url('img/city@2x.webp') 15% 50% / cover repeat-x;
/*	background: url('img/city2.webp') 15% 50% / cover repeat-x;	*/
}

.banner::after	{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
/*	background: url('img/stain@2x.webp') 100% center / auto 100% no-repeat;	*/
	background: linear-gradient(to top left, var(--sepia), transparent 40%);
}

.animate .banner::before	{
	animation: var(--animation-duration) linear infinite;
	animation-name: city-up, city-move, city-fade;
}

.container	{
	position: relative;
	height: 100%;
	perspective: 30rem;
	z-index: 1;
}

.container::before	{
	--height: 90%;

	content: '';
	position: absolute;
	bottom: 0;
	left: 28%;
	height: var(--height);
	background: url('img/cloud.webp') center / 100% 100% no-repeat;
	aspect-ratio: 1.3;
}

.container::after	{
	--height: 140%;

	content: '';
	position: absolute;
	bottom: -40%;
	right: 3%;
	height: var(--height);
	background: url('img/cloud.webp') center / 100% 100% no-repeat;
	aspect-ratio: 1.3;
/*	opacity: .8;	*/
}

.animate .container::before	{
	animation: var(--animation-duration) linear infinite;
	animation-name: cloud-move, city-fade;
}

.animate .container::after	{
	animation: var(--animation-duration) linear infinite;
	animation-name: cloud-up, cloud-fade;
/*	animation-composition: replace, add;	*/
}

.container > *	{
	z-index: 1;
}

.logo	{
	position: absolute;
	top: 50%;
	left: calc(.5 * var(--bs-gutter-x));
	max-width: 370px;
	max-height: 80%;
	transform: translateY(-50%);

	backface-visibility: hidden;
	filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .4));
}

.animate .logo	{
	animation: var(--animation-duration) linear infinite;
	animation-name: logo-down, city-fade;
	animation-composition: add, replace;
}

.text	{
	position: absolute;

	top: 52%;
	right: calc(.5 * var(--bs-gutter-x));

	padding: 0 1em;
/*	padding-top: .05em;	*/
	padding-bottom: .2em;

	font-family: PTSerif, serif;
	font-size: 2.2rem;
	font-style: italic;
	font-weight: bold;
	line-height: 1;
/*	text-transform: uppercase;	*/
	letter-spacing: 1px;

	color: rgba(255, 255, 255, 0);
	background-color: var(--red);

	transform: translateY(-50%);
	clip-path: polygon(0% 0%, 100% 0%, calc(100% - .5em) 50%, 100% 100%, 0% 100%, .5em 50%);

	backface-visibility: hidden;
}

.animate .text	{
	animation: var(--animation-duration) linear infinite;
	animation-name: text-scale, text-fade;
	animation-composition: add, replace;
}

.text span	{
	display: block;
/*	margin-top: -.05em;	*/
}

.rating	{
	position: absolute;
	display: flex;

	justify-content: center;
	align-items: center;

	top: 4%;
	right: calc(.5 * var(--bs-gutter-x));

	width: var(--size);
	height: var(--size);

	font-size: calc(.5 * var(--size));
	font-weight: bold;
	line-height: 1;

	color: var(--black);
/*	color: white;	*/
/*	color: gray;	*/

	border: 2px solid var(--black);
/*	border: 2px solid white;	*/
/*	border: 2px solid gray;	*/
	border-radius: 50%;

	opacity: .6;
/*	opacity: .8;	*/
}

.host	{
	--height: 230%;

	position: absolute;
	bottom: calc(-.58 * var(--height));
	left: 52%;
	height: var(--height);
	transform: translate(-50%);

	filter: drop-shadow(.9rem 0 .3rem rgba(0, 0, 0, .1));
}

/* desktop 250 */

@media (min-width: 1220px) and (min-height: 150px)	{
	.container	{
/*		max-width: 1320px;	*/
		max-width: 1220px;
	}
}

/* desktop 125 */

@media (min-width: 800px) and (max-height: 148.98px)	{
	.container	{
		max-width: 800px;
	}

	.container::before	{
		--height: 180%;

		bottom: -50%;
		left: 15%;
	}

	.container::after	{
		--height: 140%;

		bottom: -40%;
		right: 10%;
	}
}

@media (max-height: 148.98px)	{
	.text	{
		top: 52%;
		font-size: 1.5rem;
	}
}

/* tablet 250 */

@media (max-width: 1219.98px) and (min-height: 150px)	{
	.container	{
		max-width: 640px;
	}

	.logo	{
		top: 45%;
		left: auto;
		right: calc(.5 * var(--bs-gutter-x));
	}

	.text	{
		top: auto;
		bottom: 0;
		font-size: 2rem;
	}

	.host	{
		--height: 150%;

		bottom: calc(-.35 * var(--height));
		left: calc(.5 * var(--bs-gutter-x));
		transform: none;
	}
}

/* tablet 125 */

@media (max-width: 799.98px) and (max-height: 148.98px)	{
	.container	{
		max-width: 480px;
	}

	.banner	{
		--size: 2rem;
	}

	.logo	{
		top: 56%;
		left: auto;
		right: calc(.5 * var(--bs-gutter-x));
	}

	.animate .logo	{
		animation-name: logo-down, city-fade, rotate;
		animation-composition: add, replace, add;
	}

	.text	{
		top: 52%;
/*		bottom: 0;	*/
		font-size: 1.5rem;

		transform: translateY(-50%) rotate3d(0, 1, 0, 180deg);
	}

	.animate .text	{
		animation-name: text-scale, text-fade, rotate;
		animation-composition: add, replace, add;
	}

	.host	{
/*		--height: 150%;	*/

/*		bottom: calc(-.35 * var(--height));	*/
		left: calc(.5 * var(--bs-gutter-x));
		transform: none;
	}
}

/* mobile 250 */

@media (max-width: 639.98px) and (min-height: 150px)	{
	.container	{
		max-width: 340px;
	}

	.banner	{
		--size: 2rem;
	}

	.logo	{
		top: 30%;
		max-width: 55%;
	}

	.text	{
		bottom: calc(.44 * var(--height));
		font-size: 1rem;
/*		font-size: 4.8vw;	*/
/*		transform: translateY(-50%);	*/
	}

	.host	{
		--height: 89%;

/*		bottom: calc(-.1 * var(--height));	*/
		bottom: 0;
		left: calc(.5 * var(--bs-gutter-x));
/*		transform: none;	*/
	}
}

/* mobile 125 */

@media (max-width: 479.98px) and (max-height: 148.98px)	{
	.logo	{
		max-width: 50%;
	}

	.animate .logo	{
		animation-name: logo-down, city-fade, rotate;
		animation-composition: add, replace, add;
	}

	.text	{
		font-size: 1rem;
		transform: translateY(-50%) rotate3d(0, 1, 0, 180deg);
	}

	.animate .text	{
		animation-name: text-scale, text-fade, rotate;
		animation-composition: add, replace, add;
	}
}

/* animations */

@keyframes city-up	{
	 0%	{transform: translateY(85%);}
	15%	{transform: none;}
}

@keyframes city-move	{
	  0%	{background-position: var(--position-start) 50%;}
	 15%	{background-position: var(--position-start) 50%;}
	100%	{background-position: var(--position-end) 50%;}
}

@keyframes city-fade	{
	  0%	{opacity:   0%;}
	 15%	{opacity: 100%;}
	 85%	{opacity: 100%;}
	100%	{opacity:   0%;}
}

@keyframes text-fade	{
	  0%	{opacity:   0%;}
	 20%	{opacity:   0%;}
	 35%	{opacity: 100%;}
	 85%	{opacity: 100%;}
	100%	{opacity:   0%;}
}

@keyframes text-scale	{
	  0%	{transform: scale(.5); color: rgba(255, 255, 255, 0);}
	 20%	{transform: scale(.5); color: rgba(255, 255, 255, 0);}
	 25%	{transform: scale( 1); color: rgba(255, 255, 255, 0);}
	 30%	{transform: scale( 1); color: rgba(255, 255, 255, 1);}
	100%	{transform: scale( 1); color: rgba(255, 255, 255, 1);}
}

@keyframes logo-down	{
	   0%	{transform: translateY(-100%);}
	  15%	{transform: none;}
	 100%	{transform: none;}
}

@keyframes rotate	{
	  0%	{transform: none;}
	 40%	{transform: none;}
	 50%	{transform: rotate3d(0, 1, 0, -180deg);}
	100%	{transform: rotate3d(0, 1, 0, -180deg);}
}

@keyframes cloud-up	{
	 0%	{transform: translateY(50%); animation-timing-function: ease-in-out;}
	18%	{transform: none;}
}

@keyframes cloud-move	{
	  0%	{transform: translate(-25%); animation-timing-function: ease-in-out;}
	 12%	{transform: none;}
	100%	{transform: none;}
}

@keyframes cloud-fade	{
	  0%	{opacity:  0%;}
	 18%	{opacity: 80%;}
	 85%	{opacity: 80%;}
	100%	{opacity:  0%;}
}