
div.loading
{opacity:0;
width:140px;
height:140px;
position:absolute;
left: 50%;
top:0%;
transform: translate(-50%, 0%);
}

div#bgBar
{
opacity:0;
}
div#progressBar
{
opacity:0;
}
div#loading
{
position:relative;
}

* {
	margin: 0;
	padding: 0;
}

div#mobile {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
}

div#fanLink {
	position: absolute;
	width: 500px;
	left:50px;
	top:50%;
	transform: translate(0%, -50%);
}
div#fanFrame {
	position: absolute;
	left: 0%;
}
div#fanLink {
	position: absolute;
	width: 285px;
	height:50px;
	left: 0%;
	top: 0%;
	transform: translate(0%, 0%);
}
div#appLink {
	position: absolute;
	width: 285px;
	height:45px;
	left: 100%;
	top: 0%;
	transform: translate(-100%, 0%);
}
img#app_store {
	width: 136px;
}
img#google_play {
	width: 136px;
}
div#webglcontent {
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
}

div#webBackground {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	border-style: solid;
	opacity:0.5;
    z-index:-1;
}
img#webBackground {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#gameContainer canvas {
	border-style: solid;
	border-color: green;
	height: 100%;
	width: 100%;
	display: block;
}
div#bg{
	border-style: solid;
	border-color: green;
}
img#bg{
	
	border-color: green;
	height:100%;
	top: -50%;
	margin:auto;
	display:block;
}

div#loadingBox {
	width: 90%;
	height: 5%;
	top: 100%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -100%);
	text-align: center;
}

div#loadingInfo {
	//position: absolute;
	color: #fff;
	letter-spacing: 1px;
	width: 100%;
	left: 50%;
	//margin-top: 45%;
	font-family: sans-serif;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	margin-left: -50%;
	text-shadow: 0px 0px 5px #000;
}

div#spinner {
	position: absolute;
	height: 2.5%;
	left: 50%;
	margin-left: -35%;
	width: 70%;
	margin-top: 45%;
	overflow: hidden;
	background-color: #882121;
	box-shadow: 1px 1px 5px #111;
}

div#spinner:before {
	display: block;
	position: absolute;
	content: "";
	width: 150%;
	margin-left: -10px;
	height: 1%;
	background-color: #e85352;
	transform: rotate(-5deg);
	animation: loading 1s linear infinite;
}

@keyframes loading {
	from {
		top: -185%
	}
	to {
		top: 225%
	}
}
