@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
} 

#gameContainer {width: 100%; height: 100%; position: absolute; margin: auto}

#gameContainer canvas {
	display: block;
	width: 100%;
	height: 100%;
}

div#webgl-content {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%; 
	height: 100%
}

div#loadingBox {
	width: 100%;
	height: 0px;
	position: absolute;
	top: 50%;
	margin-top: 137px;
	text-align: center;
}

div#icon {
	width: 300px;
	height: 310px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -185px;
	margin-left: -150px;
	background-image: url("Template/3rlogo.png");
	background-repeat: no-repeat;
}

div#box {
	width: 328px;
	height: 367px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -199px;
	margin-left: -164px;
}

div#bgBar {
	display: none;
	position: absolute;
	width: 300px;
	margin-left: -150px;
	left: 50%;
	height: 18px;
	background-color: #511e61;
}

div#progressBar {
	display: none;
	left: 50%;
	position: absolute;
	margin-left: -150px;
	width: 0px;
	height: 18px;
	background-color: #1ed760;
}

p#loadingInfo {
	color: #fff;
	letter-spacing: 1px;
	position: absolute;
	width: 100%;
	font-family: sans-serif;
	text-align: center;
	top: 50%;
	font-size: 11px;
	font-weight: 500;
	margin-top: 140px;
}

div#spinner {
	position: absolute;
	height: 18px;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	position: relative;
	overflow: hidden;
	background-color: #511e61;
}

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

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



/* start div */
#start { color:#fff; text-align: center; height:100vh; background-size: cover; background-image: url("https://3rstudio.com/wp-content/themes/3rstudio/img/slider-start-bg.jpg"); background-repeat: no-repeat; background-position: center;}
.start-frame{display:inline-block; border:5px solid #fff; padding:30px 160px; margin-top:100px;  background: rgba(209, 110, 76, .3);}
#start h1{font-size:60px; line-height: 57px; text-transform: uppercase; margin:10px 0 10px 0; letter-spacing: 1px; }
#start h2{font-size:21px; text-transform: uppercase; margin-bottom:30px;}
#start p{font-size:15px; padding:5px 7px; } 
.buttons{margin:20px 0;}
#reveal {background-color: #1ED760; border:3px solid #fff; padding:7px 17px; margin:0 0 10px 0; font-size:25px; font-weight:600; color:#fff; letter-spacing: 2px;}
#reveal:hover{color:#1ED760; background-color: #fff; transition: all .2s ease-in-out;}