:root {
	--main-sty-color: #00000;
	--canvas-overlay-color: #fffff;
}

@font-face {
	font-family: "Gotham";
	src: url("../fonts/Gotham-Light.otf") format("opentype");
}

* {
	font-family: Gotham, sans-serif;
}

html{
	height:100%;
	width:100%;
}

body{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	background: var(--canvas-overlay-color);
	background-size:cover;
	font-style: normal;
}

p {
	color: var(--main-sty-color);
}

.inherit{
	display: inherit;
	width: inherit;
	height: inherit;
}

.webgl-content {
	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15)!important;
	-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15)!important;
	box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15)!important;
}

#loadingBlock,#errorBrowserBlock{
	padding:0;
	position:absolute;
	height:100vh;
	width:100vw;
}

/*#gameContainer,canvas{
	height:100%;
	width:100%;
}*/

#fullScreen-button{
	height:30px;
	width:30px;
	position:absolute;
	z-index:1;
	bottom:5px;
	right:5px;
	background-color:transparent;
	background-image:url("../img/fullScreen_on.png");
	background-size:30px 30px;
	border:none;
	cursor: pointer;
}

#game-loader{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 100px;
	max-height: 200px;
	font-size: 25px;
}

.logo{
	width:auto;
	display: block;
	margin: 2vh auto auto;
}

.button-24 {
	background: var(--main-sty-color);
	border: 1px solid var(--main-sty-color);
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	font-weight: 800;
	line-height: 16px;
	min-height: 40px;
	outline: 0;
	padding: 12px 14px;
	text-align: center;
	text-rendering: geometricprecision;
	text-transform: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
}

.button-24:hover,
.button-24:active {
	background-color: initial;
	background-position: 0 0;
	color: var(--main-sty-color);
}

.button-24:active {
	opacity: .5;
}
#loading-block,#errorBrowserBlock{
	background-size:cover;
	height: calc(100% - 2px);
	width: 100%;
}

#warningBrowserBlock,#warningMobileBlock,#errorContent{
	margin-top: 30px;
	color:var(--main-sty-color);
	font-size:2vh;
	width: 100%;
}

#errorContent{
	font-size:3vh;
	margin-top:5vh;
}

.centered{
	height: 100%;
	max-width:770px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}

.overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: hidden; background: var(--canvas-overlay-color);}
.overlay-layer{ width: 100%; height: 100%;}
.counter {
	text-align: center;
	position: absolute;
	top: 50%;
	right: 50%;
	margin-top: -200px;
	width: 400px;
	margin-right: -200px;
	z-index: 8;
	opacity: 1;
}
.counter p {
	font-size: 30px;
	font-weight: 200;
	color: var(--main-sty-color);
	opacity: inherit;
	display: inherit;
	margin-top: 50px;
	margin-bottom: 0;
}
.counter strong { color: var(--main-sty-color); font-size: 60px; margin-top: -10px; opacity: inherit; display: inherit; }
.counter .ProgressLineB {
	margin-top: 20px;
	background: var(--main-sty-color);
	border: 1px solid var(--main-sty-color);
	height: 10px;
	position: relative;
	opacity: inherit;
	display: inherit;
}
.counter .ProgressLine {
	background: var(--canvas-overlay-color);
	border: none;
	height: 10px;
	width: 0;
	margin-top: -10px;
	position: relative;
	opacity: inherit;
	display: inherit;
}
.counter h1.abs { position: absolute; top: 0; width: 100%; opacity: inherit; display: inherit; }
.counter .color { width: 0px; overflow: hidden; color: var(--main-sty-color); opacity: inherit; display: inherit; }
/*body .vertical-centered-box { position: absolute; width: inherit; height: inherit; text-align: center; }*/
body .vertical-centered-box:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }
body .vertical-centered-box .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; vertical-align: middle; text-align: left; font-size: 0; }
* {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;opacity: inherit;}
.loader-circle {position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(250, 250, 2500, 0.1); margin-left: -60px;margin-top: -60px;top: 95px;}
.loader-line-mask{position:absolute;left:50%;top:50%;width:60px;height:120px;top:95px;margin-left:-60px;margin-top:-60px;overflow:hidden;-webkit-transform-origin:60px 60px;-moz-transform-origin:60px 60px;-o-transform-origin:60px 60px;-ms-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,0));-webkit-animation:rotate 1.2s infinite linear;-moz-animation:rotate 1.2s infinite linear;-o-animation:rotate 1.2s infinite linear;animation:rotate 1.2s infinite linear}
.loader-line-mask .loader-line {width: 120px;height: 120px;border-radius: 50%;box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.5);}
lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}


/* When aspect-ratio is smaller than 4/3*/
/*

@media (max-aspect-ratio: 4/3){

	.webgl-content{
		-webkit-transform: translate(0%, 0%); transform: translate(0%, 0%);
		-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
		-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
		box-shadow: 0px 0px 29px 0px rgba(0,0,0,0.15);
	}

	.keepRatio{
		width:100%;
		padding-top: 75%;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

	.webgl-content,#loading-block,#errorBrowserBlock{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.logo{
		height:auto;
		margin-top:1vh;
	}

	#warningBrowserBlock,#warningMobileBlock,#errorContent{
		margin-top:3vw;
		font-size:2vw;
	}

	.webgl-content,#loading-block,#errorBrowserBlock{
		border:1px solid #c6c9ca;
		width:calc(100% - 2px);
		height:auto;
	}
}


!* When aspect-ratio is bigger than 16/9*!

@media (min-aspect-ratio: 16/9){
	body{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}

	.keepRatio{
		width:178vh;
		height:100%;
		margin:0 auto;
	}

	.webgl-content,#gameContainer,canvas,#loading-block,#errorBrowserBlock{
		width: inherit;
	}

	.webgl-content,#loading-block,#errorBrowserBlock{
		border:1px solid var(--main-sty-color);
		height:calc(100% - 2px);
	}
}
*/