@font-face {
    font-family: 'LaNord';
    src: url('../fonts/LaNordV21-SemiLight.woff2') format('woff2'),
        url('../fonts/LaNordV21-SemiLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LaNord';
    src: url('../fonts/LaNordV21-Regular.woff2') format('woff2'),
        url('../fonts/LaNordV21-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LaNord';
    src: url('../fonts/LaNordV21-Bold.woff2') format('woff2'),
        url('../fonts/LaNordV21-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LaNord';
    src: url('../fonts/LaNordV21-Light.woff2') format('woff2'),
        url('../fonts/LaNordV21-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LaNord';
    src: url('../fonts/LaNordV21-Medium.woff2') format('woff2'),
        url('../fonts/LaNordV21-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* *:active, *:focus {
	outline: none;
}

.use-keyboard {
	outline: 2px solid #FFD100;
} */

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
body {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body, html, #Stage {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-ms-content-zooming: none;
	-ms-touch-action: none;
	touch-action: none;
	background: #000;
}

#Stage, #Stage *:not([class*='vjs']) {
	position: absolute;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
}

#Stage * input,  #Stage * textarea {
	-moz-user-select: auto;
	-webkit-user-select: auto;
	-o-user-select: auto;
	-ms-user-select: auto;
	-webkit-tap-highlight-color: auto;
}

span {
	position:relative !important;
}

.Panel span {
	color: #FFD100 !important;
}

.FrontierMenuBurger__icon div {
	background: #fff;
	display: block;
	height: 0.3rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.4s ease, transform 0.4s ease;
	width: 3.6rem;
}

.FrontierMenuBurger__icon div:nth-child(1) {
	transform: translate(-50%, -50%) translateY(-0.8rem);
}

.FrontierMenuBurger__icon div:nth-child(2) {
	transform: translate(-50%, -50%) scaleX(0.8);
}

.FrontierMenuBurger__icon div:nth-child(3) {
	transform: translate(-50%, -50%) translateY(0.8rem) scaleX(0.8);
}

.FrontierMenuBurger:not(.FrontierMenuBurger--active):hover .FrontierMenuBurger__icon div:nth-child(2) {
	transform: translate(-50%, -50%) scaleX(1);
}

.FrontierMenuBurger:not(.FrontierMenuBurger--active):hover .FrontierMenuBurger__icon div:nth-child(3) {
	transform: translate(-50%, -50%) translateY(0.8rem) scaleX(1);
}

.FrontierMenuBurger--active .FrontierMenuBurger__icon div:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.FrontierMenuBurger--active .FrontierMenuBurger__icon div:nth-child(2) {
	opacity: 0;
}

.FrontierMenuBurger--active .FrontierMenuBurger__icon div:nth-child(3) {
	transform: translate(-50%, -50%) scaleX(1) rotate(-45deg);
}

.GLSEO {
	top: -200px !important;
}

::-webkit-scrollbar {
	width: 2em;  /* Total width including `border-width` of scrollbar thumb */
	/* height: 0; */
}

::-webkit-scrollbar-track {
	background-color: #252525;
	border-right: 1.75em solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb {
	/* height: 1em; */
	border-right: 1.75em solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	background-color: #9D9D9D;
	max-height: 20px;
}
::-webkit-scrollbar-button {
	width: 0;
	height: 0;
	display: none;
	/* background: white; */
	/* width: 1rem; */
}
::-webkit-scrollbar-corner {
	background-color: transparent;
}

.HTML a,
.HTML strong {
	color: #FFD100;
	font-weight: inherit;
	position: relative !important;
}

.spinner {
	animation: rotate 2s linear infinite;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 2;
}

.spinner__path {
	stroke: #FFD100;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}
  
@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

.FrontierButton--Loading::before {
	background: #FFD100;
	content: '';
	bottom: -2px;
	animation: scaling 3s ease infinite;
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 100;
}

@keyframes scaling {
	0% {
		transform-origin: 0 0;
		transform: scaleX(0);
	}
	50% {
		transform-origin: 0 0;
		transform: scaleX(1);
	}
	51% {
		transform-origin: 100% 0;
	}
	100% {
		transform-origin: 100% 0;
		transform: scaleX(0);
	}
}