@font-face {
font-family: "ShowcardGothic"; 
src: url("../font/ShowcardGothic.TTF") format("truetype"); 
font-style: normal; 
font-weight: normal; 
} 
body{
	    margin: 0 auto;
	padding:0px;
	
	height:100%;
	width:100%;
	background-size:cover;
	font-style: regular;
	font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
	max-width: 500px;
}
.webgl-content{background: #222;}
.webgl-content,#loadingBlock,#errorBrowserBlock{
	padding:0px;
	position:absolute;
	height:100vh;
	width:100vw;
	max-width: 500px;
}


canvas{	position:absolute;	height:100%;
	width:100%;}
#gameContainer{
	position:absolute;
	height:calc(100% - 35px);
	width:100%;
}

#fullScreenButton, #logoname{
	height:32px;
	width:35px;
	position:absolute;
	font-size: 20px;
	bottom:0;
	right:5px;
	background-color:transparent;
	color:#fff;
	background-size:35px 35px;
	border:none;
	cursor: pointer;
}
#logoname{font-family: "ShowcardGothic";
    left: 15px;
    bottom: 7px;
    color:#fff;
	background-image:none;
	    height: 23px;
    text-decoration: none;
    font-size: 20px;
	width: 200px;
}

.subtitle{
	
	color:#fff;
	font-size:35px;
	padding-bottom:15px;
	padding-top: 45px;
	display: block;
	margin:auto;
	text-align: center;
}
.logo{display:block;margin:20px auto;width:265px;height:60px}
.logo-game{
	max-height:300px;
	min-height:150px;
	width:auto;
	display: block;
	margin:auto;
	margin-top:5px;
	border-radius:10px;
	box-shadow: 0 20px 20px -10px rgba(0,0,0,0.3);
}

#loadingBlock,#errorBrowserBlock{
background:#000;
	background-size:cover;
	z-index:1
}
.cover{position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    opacity: .5;
    filter: blur(16px);}
.emptyBarbg{border-radius:20px;overflow:hidden;box-shadow: 0 20px 20px -10px rgba(0,0,0,0.3);}
#emptyBar{
	
	background: #222;
	float: right; 
	width: 60%; 
	height: 100%; 
	display: inline-block;
}

#fullBar{

background: rgb(180,58,58);
background: -moz-linear-gradient(90deg, rgba(180,58,58,1) 0%, rgba(253,29,29,1) 31%, rgba(255,174,60,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(180,58,58,1) 0%, rgba(253,29,29,1) 31%, rgba(255,174,60,1) 100%);
background: linear-gradient(90deg, rgba(180,58,58,1) 0%, rgba(253,29,29,1) 31%, rgba(255,174,60,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b43a3a",endColorstr="#ffae3c",GradientType=1);
	float: left; 
	width: 40%; 
	height: 100%; 
	display: inline-block;
}

#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
	height:25vh;
	width:75vw;
	margin:auto;
	text-align: center;
	max-width: 90%;
}

#progressBar{
	
	height:20px;
	color:#fff;
	font-size:16px;
	margin-top:30px
}

#warningBrowserBlock,#warningMobileBlock,#errorContent{
	margin-top:15vh;
	color:#fff;
	font-size:2.3vh;
}

.browserIcons{
	display: inline-flex;
	margin-top:2vh;
}

.browserIcons a{
	width:150px;
}

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

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


/* 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,#loadingBlock,#errorBrowserBlock{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.logo{
		width:25vw;
		height:auto;
		margin-top:1vh;
	}
	
	.subtitle{
		font-size:2vw;
		height:10vw;
		padding-bottom:1vw;
		padding-top: 1vw;
	}

	.subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
		width:80vw;
	}
	
	#progressBar{
		height:6vw;
		margin-top: 2vw;
		font-size:3vw;
	}
	
	#emptyBar,#fullBar{
		height: 2vw; 
	}
	
	#warningBrowserBlock,#warningMobileBlock,#errorContent{
		margin-top:3vw;
		font-size:2vw;
	}
	
	.browserIcons{
		margin-top:1vw;
	}
	
	.browserIcons a{
		width:15vw;
	}
	
	.browserIcons a img{
		width:8vw;
	}
	
	.webgl-content,#loadingBlock,#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,#loadingBlock,#errorBrowserBlock{
		width: inherit;
	}
	
	.webgl-content{
	-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);
	}
	
	.subtitle,#progressBar,#warningBrowserBlock,#warningMobileBlock,#errorContent{
		width:100vh;
	}
	
	.webgl-content,#loadingBlock,#errorBrowserBlock{
		border:1px solid #c6c9ca;
		height:calc(100% - 2px);
	}
}*/


@font-face {
  font-family: 'webgl';
  src: url('../font/webgl.eot?58104938');
  src: url('../font/webgl.eot?58104938#iefix') format('embedded-opentype'),
       url('../font/webgl.woff2?58104938') format('woff2'),
       url('../font/webgl.woff?58104938') format('woff'),
       url('../font/webgl.ttf?58104938') format('truetype'),
       url('../font/webgl.svg?58104938#webgl') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "webgl";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  font-variant: normal;
  text-transform: none;
 

  line-height: 1em;

  margin-left: .2em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
 
.icon-resize-full:before { content: '\e805'; } /* 'о …' */
.icon-resize-small:before { content: '\e80b'; } /* 'о ‹' */