body, input, textarea, button{font-family: 'Gloria Hallelujah', cursive;font-size:36px;line-height:26px;}
html,body{
	margin:0;
	width:100%;
	height:100%;		
}
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	supported by Chrome, Edge, Opera and Firefox */
}
.mapa{
	/*display:none;*/
	width:100%;
	height:100%;
	position:relative;
	transition: 1s filter linear;
	-webkit-transition: 1s -webkit-filter linear;
	-moz-transition: 1s -moz-filter linear;
	-ms-transition: 1s -ms-filter linear;
	-o-transition: 1s -o-filter linear;
}
.controles{display:none;}
@media only screen and (hover: none) and (pointer: coarse){
	.mapa{
		height:80%;
	}
	.controles{
		padding-top:10px;
		display:table;
		height:20%;
		width:100%;
		background:#222;
		text-align: center;
	}
	
	.arr {
		cursor: pointer;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 40px;
		background: grey;
		color: white;
		font-size: 20px;
		border-right: 10px solid #4d4d4d;
		border-bottom: 10px solid #4d4d4d;
		border-left: 10px solid #5a5a5a;
		border-top: 10px solid #676767;
		display: inline-block;
		margin: 5px;
		transition: all 0.05s linear;
		user-select: none;
	}
	.up {
	  position: relative;
	  top: -4px;
	}
}
.mapa.blur{
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}
.cuadradito{				
	position:absolute;
	/*border:solid 1px #900000;*/
}
.cuadradito.pasto{
	background:#008000;
	background:url('res/img/grass.png');
	background-repeat: repeat;
	background-size: contain;
}
.cuadradito.piedra.mario{				
	background:url('res/img/mario.png'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:65%,contain !important;
	background-position:center center,left top !important;
}
.cuadradito.piedra.mario2{				
	background:url('res/img/mario2.gif'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:100%,contain !important;
	background-position:center center,left top !important;
}

.cuadradito.piedra.caballero{				
	background:url('res/img/caballero.png'),url('res/img/piedra.jpg') !important;				
	background-repeat: no-repeat,repeat !important;
	background-size:200%,contain !important;
	background-position:center center,left top !important;
}

.cuadradito.piedra.cupa{				
	background:url('res/img/cupa.png'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:120%,contain !important;
	background-position:center center,left top !important;
}

.cuadradito.piedra.coin_mario{				
	background:url('res/img/coin_mario.gif'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:65%,contain !important;
	background-position:center center,left top !important;
}
.cuadradito.piedra.coin_mario2{				
	background:url('res/img/coin_mario2.gif'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:65%,contain !important;
	background-position:center center,left top !important;
}
.cuadradito.piedra.coin_caballero{				
	background:url('res/img/coin_caballero.gif'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:65%,contain !important;
	background-position:center center,left top !important;
}
.cuadradito.piedra.coin_cupa{				
	background:url('res/img/coin_cupa.gif'),url('res/img/piedra.jpg') !important;
	background-repeat: no-repeat,repeat !important;
	background-size:65%,contain !important;
	background-position:center center,left top !important;
}
.cuadradito.piedra{				
	background:url('res/img/piedra.jpg');
	background-repeat: repeat;
	background-size: contain;
}
.cuadradito.negro{
	background:#000000;
}
.cartel{
	position:relative;
	z-index:10000;
	background:#222222;
	width:148px;
	height:60px;
	margin:0 auto;
	color:#FF0000;
	font-size:48px/60px;
	padding:6px;
	text-align:center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	cursor:pointer;
}
.cartel .tiempo{
	color:#FF0000;
	font-size:36px;
}
.cartel .nivel{
	color:#FFFFFF;
	font-size:12px;
}

.popup{
	width:100%;
	height:100%;
	position:absolute;
	left:0;top:0;
	background:#00000060;
	z-index:1000;
	
	/*
	visibility: hidden;
	opacity: 0;	
	*/
}
.popup.popup-visible{
	visibility: visible;
	opacity: 1;
	
	transition: opacity 5000ms ease-in;
	transition-delay: 5000ms;	
}
.popup-content{
	padding:2%;
	position:relative;
	width:46%;
	height:46%;
	top:25%;
	left:25%;
	background:#000000aa;
	color:#f0f0f0;
	font-size:36px;
	text-align:center;
	/*line-height:100px;*/
	
	border-radius: 20px;
}
button.iniciar{
	background-color: #ed6755;
    border: none;
    border-radius: 5px;
    width: 200px;
    padding: 14px;
    font-size: 36px;
    color: white;
    box-shadow: 0px 6px 18px -5px #ed6755;
	cursor: pointer;
	line-height:60px;
}
.logo
{
	width: 20vh;
    margin-left: -10%;
}
.fin{
	width:50%;
}