body{
	margin:0px;
	padding:0px;
	position: absolute;
	height:100%;
	width:100%;
	background-size:cover;
	font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color:#f0f0f1;
}

.webgl-content,#loadingBlock,#errorBrowserBlock{
	padding:0px;
	position:absolute;
	height:100vh;
	width:100vw;
	max-height: 720px;
	max-width: 1280px;
	background-color:#f0f0f1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#sizeLimiter{
	max-width: 1280px;
	max-height: 720px;
	width: 100%;
	height: 100%;
	margin: auto;
}

#gameContainer,canvas{
	position:absolute;
	height:100%;
	width:100%;
	background-color:#f0f0f1;
	max-height: 720px;
	max-width: 1280px;
}

#fullScreenButton{
	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;
}

.progressBlock {
	display: flex;
	justify-content: space-between;
	width: 50%;
	align-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.3);
	border-radius: 100vw;
	align-self: center;
	padding: 3vw;
}

.subtitle{
	color:#1896a7;
	font-size:2.5vh;
	padding-bottom:3vh;
	padding-top: 3vh;
	display: block;
	height:15vh;
	width:40vw;
	margin:auto;
	text-align: center;
}

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

#loadingBlock,#errorBrowserBlock{
	background-image:url("../img/background.jpg");
	background-size:cover;
}


#warningBrowserBlock,#warningMobileBlock,#errorContent{
	width:100%;
	position: absolute;
	bottom: 0;
	flex-direction: row;
	align-items:center;
	background-color: rgba(0,0,0,0.5);
	justify-content: center;
	display: inline-flex;
}


.warningBrowserText{

	color:#EBEBEB;
	font-size:1.5vw;
	font-weight: 300;
	padding-left: 2%;
	padding-right: 2%;
	margin: 2%;
	border-left: 1px solid #EBEBEB;
	width: 65%;
	text-align: center;
}

.warningBrowserWarning{

	width: 4%;
}
.warningBrowserWarning  img{

	width: 100%;
}

.browserIcons{
	display: inline-flex;
}

.browserIcons a{
	width:5vw;
}

.browserIcons a img{
	width:5vw;
}

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

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

.donut__background, .donut__value {
	fill: transparent;
	stroke-width: 0.18rem;
	-webkit-transition: all 1s ease;
	transition: all 0.2s ease;
}

.donut__background {
	fill: rgba(0,0,0,0.3);
}

.donut__value {
	stroke: #ff6900;
	stroke-linecap: round;
	stroke-dasharray: 93px  ;
	transform-origin: center;
	-webkit-transform: rotateZ(-90deg) rotateX(180deg);
	transform: rotateZ(-90deg) rotateX(180deg);
}
.donut__text {
	font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:lighter;
	font-size:0.4rem;
	text-anchor:middle;
	alignment-baseline:central;
	dominant-baseline:central;
	vertical-align: middle;
	fill:white;
}
.donut__texterror {
	font-family:"Myriad Pro", Myriad,"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:1rem;
	text-anchor:middle;
	alignment-baseline:central;
	vertical-align: middle;
	fill:white;
}

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

@media (max-aspect-ratio: 16/9){

	.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%;
		max-width: 1280px;
		max-height: 720px;
		height: 56.25vw;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin: auto;
	}

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

	.logo{
		width:auto;
		height:10vw;
	}

	.subtitle{
		font-size:2vw;
		height:10vw;
		padding-bottom:1vw;
		padding-top: 1vw;
	}


	.webgl-content,#loadingBlock,#errorBrowserBlock{
		border:1px solid #c6c9ca;
		width:calc(100% - 2px);
		height:auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* 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;
		max-height: 720px;
		max-width: 1280px;
	}

	.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);
	}

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

	.browserIcons a{
		width:8vh;
	}

	.browserIcons a img{
		width:8vh;
	}
	.warningBrowserText{
		font-size:3vh;
	}

}