@import url('https://fonts.cdnfonts.com/css/object-sans');

/* reset css default */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { overflow: hidden; }

body{
	/* margin:0px;
	padding:0px; */
	/* position: absolute; 
	background-size:cover; */
	font-style: regular;
	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;
	background-color:#f0f0f1;
}

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

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

.logo{
	height:25vh;
	width:auto;
	display: block;
	margin:auto;
	margin-top:2vh;
}

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

#alignCenter{
  position: fixed;
	height: 17.85vw;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* width >= 1024 => ukuruan laptop */
/* width < 1024 => ukuran tab */
/* widht <= 425 => ukuran handphone */

@media (width < 1024px) {  
	#alignCenter{
		position: fixed;
		height: 17.85vw;
		top: 45%;
		left: 50%;
		/* transform: translate(-50%, -50%); */
	}
}

@media (width < 758px) {  
	#alignCenter{
		position: fixed;
		height: 17.85vw;
		top: 30%;
		left: 50%;
		/* transform: translate(-50%, -50%); */
	}
}

#warningBrowserBlock,#warningMobileBlock,#errorContent{
	height:25vh;
	width:50vw;
	margin:auto;
	text-align: center;
}

#progressBar{
	/* border: 1px solid red; */
	height:2vh;
	width:50vw;
	margin:auto;
	text-align: center;
	color:#666666;
	font-size:4vh;
	/* position: absolute; */
	/* top: 45vh; */
}

#emptyBar{
	position: absolute;
	margin-top: 0.45vh;
	border-radius: 0.45vh;
	height:	0.9vh;
	width: 100%;
  	background-color: #FF636C;
}

#fullBar{
	position: absolute;
	border-radius: 0.9vh;
	height:	1.8vh;
	width: 50%;
  background-color: #FFB73F;
	float: left;
}

#progressText{
	padding-top: 14vh;
	height:3vh;
	width:50vw;
	margin:auto;
	text-align: center;
	color:#0c0c0c;
	font-size:2vh;
	font-family: 'Object Sans', sans-serif;
	font-weight: bold;
}
.loadingDetailtext {
	float: left;
	margin-right: 5px;
}
.loadingPercentText {
	float: right;
	margin-left: 5px;
}

#warningBrowserBlock,#warningMobileBlock,#errorContent{
	margin-top:15vh;
	color:#666666;
	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%;
	margin-left:auto;
	margin-right:auto;
}