@import "fonts/fonts.css";
@import "colors.css";
@import "normalize.css";
@import "markup.css";
@import "grid.css";
@import "typographic.css" screen and (min-width: 768px);
@import "typographic-mobile.css?v=2" screen and (max-width: 767px);
@import "effects.css?v=2";
@import "blocks.css" screen and (min-width: 868px);
@import "blocks-mobile.css" screen and (max-width: 867px);
/* @import "blocks-mobile-se.css" screen and (max-width: 320px); */

@media (max-height: 500px) and (min-width: 500px) and (orientation: landscape) {
	html:after {
		content: "Please use portrait orientation";
		position: fixed;
		display: flex;
		font-size: 2.3rem;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		top: 0; left: 0;
		z-index: 10000;
		background-color: black;
		/* background-color: var(--c-brand-back); */
		color: var(--gr-solid-mask);
	}
	
}


/* Mqrquee */
.element-marquee > span {
	display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
	transition: margin linear 0.1s;
}
/* endregion */


/* Popup VIDEO */
.page-video {
	display: none;
	z-index: -10;
}
.Android .page-video.active,
.Unknown .page-video.active {
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	z-index: 200;
	background: none;
}
#video-close-button {
	position: absolute;
	top: 0.5em;
	right: 0.5em;

	cursor: pointer;

	font-size: 3.2rem;
	color: white;
}

.Android .active #stream-player:not(.hidden),
.Unknown .active #stream-player:not(.hidden){ 
	position: absolute;
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%;
	border: none;
}

/* endregion */


/* Popup subscribe item */
.popup-legacy {
	position: fixed;
    bottom: 1em;
    left: 1em;
    width: 28em;
    text-align: left;
    z-index: 100;
    border-radius: 1em;
    padding: 2em;
    color: #aaa;
    background-color: rgba(0,0,0,0.85);
    backdrop-filter: blur(17.5px);
    border: 2px solid #57504f;
}
/* endregion */

/* Popup subscribe item */
.popup-subscribe {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 100;
	border-radius: 1em;
	padding: 2em;
	color: #aaa;

	background-color: rgba(0,0,0,0.85);
	backdrop-filter: blur(17.5px);
	text-align: center;
	border: 2px solid #57504f;
	min-width: 32em;
}
.popup-subscribe.hidden {
	display: none;
}
.popup-subscribe > * {
	width: 100%;
	display: inline-block;
	text-align: center;
}
.popup-subscribe input{
  padding: 0;
  border: 0;
  background: none;
  margin: 1rem 0 1.5rem;
  padding: .25em 0;
  width: 100%;
  border-bottom: 1px solid #57504f;
  font-size: 1.25rem;
  outline: none;
}
.popup-subscribe input:focus {
	border-bottom: 1px solid white;
}
.button-subscribe{
	padding: 0.35em 1em;
	border: 1.5px solid #57504f;
	outline: none;
	cursor: pointer;
}
.button-subscribe:hover{
	background-color: #57504f;
}
.popup-subscribe p {
	font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.5em;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}
.popup-subscribe-close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	cursor: pointer;
	font-size: 2em;
	color: white;
	width: auto;
}
/*endregion*/


/* Ultrawide */
@media only screen and (min-aspect-ratio: 21/9){
	body {
		max-width: calc(160vh) !important;
		margin: 0 auto !important;
	}
	.site-header {
		max-width: calc(160vh) !important;
		left: initial !important;
	}
	/* .page-realize {
		background-position: center var(--menu-height);
	} */
}