/* latin */
@font-face {
  font-family: 'berlin sans fb';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo Bhaina'), local('BalooBhaina-Regular'), url(baloobhaina.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Arial Black';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo Bhaina'), local('BalooBhaina-Regular'), url(baloobhaina.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Bizarre';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo Bhaina'), local('BalooBhaina-Regular'), url(baloobhaina.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

* {
	padding: 0;
	margin: 0;
}
html, body {
	background: #000;
	color: #fff;
	overflow: hidden;
	/*touch-action: none;
	-ms-touch-action: none;*/
	cursor:default;
	font-family:berlin sans fb;
}
html{
	height:100%;
}
body{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height:100%;
  
	/* prevent selection highlights when canvas is clicked */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#gamecontainer{
	/*display:none;*/
	/*border:1px solid #f00;*/
	background-color: #000;
	/* centering*/
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
	/*-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);*/
	
	/* h centering*/
	/*-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);*/
	
	text-align:center;
	overflow:none;
}
#c2canvasdiv{
	display:none; /* at first */
	position:relative;
	z-index:7;
}
#loadingscreen, #startscreen, #canvas{
    height: 100%;
    width: 100%;
	overflow:auto;
}
#loadingscreen{
	background-color:#000040;
	display:none;
}
#startscreen{
	background-color:#300000;
	/*background-image:url("http://samsung-wallpapers.com/uploads/allimg/130630/1-130630095939.jpg");*/
	background: rgba(241,231,103,1);
background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 53%, rgba(255,213,150,1) 83%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(53%, rgba(254,182,69,1)), color-stop(83%, rgba(255,213,150,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 53%, rgba(255,213,150,1) 83%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 53%, rgba(255,213,150,1) 83%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 53%, rgba(255,213,150,1) 83%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 53%, rgba(255,213,150,1) 83%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#ffffff', GradientType=0 );
	overflow:hidden !important;
}
#loadingbar{
	display:block;
}
#actionbar{
	display:none; /* at first */
	background:rgba(0,0,0,0.2);
}
#actionbar a{
	display:inline-block;
  background: #f0f0c8;
  background-image: -webkit-linear-gradient(top, #f0f0c8, #e09f6e);
  background-image: -moz-linear-gradient(top, #f0f0c8, #e09f6e);
  background-image: -ms-linear-gradient(top, #f0f0c8, #e09f6e);
  background-image: -o-linear-gradient(top, #f0f0c8, #e09f6e);
  background-image: linear-gradient(to bottom, #f0f0c8, #e09f6e);
  -webkit-border-radius: 19;
  -moz-border-radius: 19;
  border-radius: 19px;
  -webkit-box-shadow: 0.1em 0.1em 0.3em #000000;
  -moz-box-shadow: 0.1em 0.1em 0.3em #000000;
  box-shadow: 0.1em 0.1em 0.3em #000000;
  font-family: berlin sans fb;
  color: #292929;
  font-size: 1em;
  padding: 0.2em 0.8em 0.2em 0.8em;
  border: solid #ffffff 0.2em;
  text-decoration: none;
}
#actionbar a:active, #actionbar a:hover{
  background: #ffffff;
  background-image: -webkit-linear-gradient(top, #ffffff, #dbbe74);
  background-image: -moz-linear-gradient(top, #ffffff, #dbbe74);
  background-image: -ms-linear-gradient(top, #ffffff, #dbbe74);
  background-image: -o-linear-gradient(top, #ffffff, #dbbe74);
  background-image: linear-gradient(to bottom, #ffffff, #dbbe74);
  text-decoration: none;
}
#canvas{
	margin:auto;
	
	-webkit-tap-highlight-color: transparent; /* don't blink selection when tapped */
}

.smallimage{
	width:1px; height:1px; opacity:0.01;
}


/* ________________________________Loading */
.element-animation{
  animation: animationFrames linear 2s;
  animation-iteration-count: infinite;
  -webkit-animation: animationFrames linear 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: animationFrames linear 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation: animationFrames linear 2s;
  -o-animation-iteration-count: infinite;
  -ms-animation: animationFrames linear 2s;
  -ms-animation-iteration-count: infinite;
  max-width:70%;
  margin:auto;
}

@keyframes animationFrames{
  0% {
    opacity:0;
    transform: scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    opacity:1;
    transform: scaleX(1.10) scaleY(1.10) ;
  }
  100% {
    opacity:0;
    transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    -moz-transform: scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    opacity:1;
    -moz-transform: scaleX(1.10) scaleY(1.20) ;
  }
  100% {
    opacity:0;
    -moz-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    opacity:1;
    -webkit-transform: scaleX(1.10) scaleY(1.20) ;
  }
  100% {
    opacity:0;
    -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    -o-transform: scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    opacity:1;
    -o-transform: scaleX(1.10) scaleY(1.20) ;
  }
  100% {
    opacity:0;
    -o-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
    -ms-transform: scaleX(1.00) scaleY(1.00) ;
  }
  50% {
    opacity:1;
    -ms-transform: scaleX(1.10) scaleY(1.20) ;
  }
  100% {
    opacity:0;
    -ms-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

/* __________________________________The Floatbar */
#floatbar{
	width:8%;
	position:absolute;
	right:0px;
	margin:1%;
	background:rgba(0,0,0,0.5);
	z-index:8;
	text-align:center;
}
	#floatbar-therest{
		display:none;
	}
	#floatbar a{
		display:block;
		width:100%;
	}
	#floatbar a:hover{
		opacity:0.6;
	}
	#floatbar a:active{
		opacity:1;
	}
	#floatbar img{
		width:100%;
		margin:2%;
	}
	

/* __________________________________The Modal Dialog Box */
/*background*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	color:#fff;
}

	/* Modal Content/Box */
	.modal-content {
		background-color: rgba(0,0,0,0.4);
		margin: auto; /* 15% from the top and centered */
		padding: 2em;
		border: 0.05em solid #fff;
		width: 70%; /* Could be more or less, depending on screen size */
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		max-height:60%;
		overflow:auto;
		-webkit-box-shadow: 0.05em 0.05em 0.3em 0em #000000;
		box-shadow: 0.15em 0.15em 0.6em 0em #000000;
	}

	/* The Close Button */
	.modalclose	{
		cursor: pointer;
		color: white;
		border: 0.05em solid #fff;
		border-radius: 100%;
		background: #605F61;
		font-size: 2em;
		font-weight: bold;
		display: block;
		line-height: 0px;
		padding: 0.4em 0.2em 0.4em 0.2em;
		position:absolute;
		right:0px;
		top:0px;
		-webkit-box-shadow: 0.05em 0.05em 0.3em 0em #000000;
		box-shadow: 0.05em 0.05em 0.3em 0em #000000;
		}

	.modalclose:hover,
	.modalclose:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}