/* CSS Document */
	@font-face
	{
		font-family:Chewy;
		src: url(../fonts/Chewy.ttf);
	}
	
	@font-face
	{
		font-family:Roboto;
		src: url(../fonts/Roboto-Regular.ttf);
	}
	
	.miplay
	{
	  position: absolute;  
	  color: rgb(210, 210, 210);
	  width: 80%;
	  margin-left: 5%; 
	  margin-top: 10px;  
	  text-align: center;    
	  padding-top: 20%;
	}
	.regresa
	{
	position:absolute; 
	right:0px;  
	font-family:Roboto; 
	text-decoration: underline; 
	padding-right:4px;
	z-index:3000;
	}
		
	.animacion
	{
		width: 300px;
		position: fixed;
		margin-left: 50%;
		top: 20%;
		margin-left: 50%;
		left: -150px;
		background-size: cover;
		background-position: top left;
		background-repeat: repeat-x;
	}
	
	h1
	{
		font-family:Chewy;
		color: white;
		text-align: center;
		text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
	}
	
	h3{
		font-family:Chewy;
		    color: #DD2C00!important;
    margin: 5px;
	}
	
	.general
	{
		width:700px;
		margin-top:10px;
		padding:15px;
		border:3px solid white;
		border-radius:12px;
		display:table;
	}
	
	.salir{
		  position: absolute;
		  top: -10px;
		  right: -10px;
		  padding: 0px 0px 0px !important;
		  cursor: url(../images/cursor/hand.cur), auto;
	}
	
	.fadebox {
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:1001;
		-moz-opacity: 0.96;
		opacity: .96;
		filter: alpha(opacity=96);
	}
	
	.winner{
		width: 750px;
		height: 418px;
		position: fixed;
		margin-left: 50%;
		top: 20px;
		left: -350px;
		z-index: 2000;
		display:table;
		background-size:100% 100%;	
	}
	
	.emergente{
		width: 700px;
		border: 1px solid white;
		border-radius: 12px;
		background-color: rgba(33,150,243,0.70);
		color:white;
		position: fixed;
		margin-left: 50%;
		top: 20px;
		left: -350px;
		z-index: 2000;
		display:table;
	}
	
	.emergente img{
		padding: 20px;
	}
	
	.emergente p{
		padding: 30px;
		text-align: left;
		font-family: roboto;
		font-size: 20px;
		word-spacing: -2px;
		letter-spacing: 0px;
		white-space: normal;
	}
	
	.emergente .tablaboton{
		    font-size: 20px;
			background-image: url(../images/tablon.png);
			background-size: 100% 100%;
			padding: 12px;
			padding-right: 27px;
			font-family: Chewy;
			margin-top: 20px;
	}
	.emergente .tablaboton:hover{
		    text-decoration:initial;
	}
	
	.aumentar:hover
	{
		cursor:url(../images/cursor/hand.cur) , auto!important;
		-webkit-transition:-webkit-transform 0.8s ease-out; 
		-moz-transition:-moz-transform 0.8s ease-out; 
		-o-transition:-o-transform 0.8s ease-out; 
		-ms-transition:-ms-transform 8.1s ease-out; 
		transition:transform 0.8s ease-out;
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
	
	.infoganaste
	{
		position: absolute;
		left: 190px;
   		top: 25px;
		width: 420px;
		margin: 20px;
		font-family: Roboto;
		color: white;
		font-size: 24px;
		text-align: center;
		text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
	}
	.infoperdiste
{
	  position: absolute;
        left: 180px;
    top: 23px;
  width: 420px;
  margin: 20px;
  font-family: Roboto;
  color: white;
  font-size: 24px;
  text-align: center;
   text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
}
	
	.infoganaste h1 {
		text-shadow: -2px -2px 2px #000, 2px 2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000!important;
	}
	
	.tip + .tooltip > .tooltip-inner {background-color: white; color:black; font-family:Roboto; border:1px solid gray;}
	
	.vidas {
		text-shadow: 1px 1px rgb(221, 192, 192);
		font-family: Chewy;
		font-size: 27px;
		position: absolute;
		bottom: 10%;
		left: 94%;
		z-index: 1000;
	}
	
	.nube
	{			  
		  background-color: rgba(255, 255, 255, 0.83);
  border-radius: 12px;
  font-size: 20px;
  color: #EF6C00;
  padding: 5px;
  width: 92%;
  float: right;
  margin: 15px -15px 15px 15px;
  font-family: Chewy;
  text-align: center;
  height: 75px;
	}
	
	.personajenube
	{		
	  position: absolute;
	  left: 0px;
	  margin-top: 5px;
	  margin-bottom: 5px;
	}
	
	.ventana_interna
	{
		    top: 20px;
			width: 750px;
			height: 550px;
			border: 2px solid rgb(242, 242, 242);
			border-radius: 12px;
			position: relative;
			background-size: 100% 100%;
	}
	
	.nivel {
		color: white;
		text-shadow: 2px 2px black;
		font-family: Chewy;
		font-size: 27px;
		position: absolute;
		top: 90%;
		left: 94%;
		z-index: 1000;
		cursor:auto;
	}
	
	.tablaboton {
		font-size: 20px;
		text-align: center;
		background-image: url(../images/tablon.png);
		background-size: 100% 100%;
		padding: 12px;
		padding-top: 5px;
		font-family: Chewy;
		margin-right: 30px;
		color: white;
		cursor: url(../images/cursor/hand.cur), auto!important;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.tablaboton:hover 
	{
		color: white;
	}
	
	@keyframes latidos {
		from { transform: none; }
		50% { transform: scale(1.4); }
		to { transform: none; }
	}
	
	.infos
	{
		position: absolute;
		bottom: 70px;
		right: 90px;
		z-index: 200;
		font-family: Chewy;
		font-size: 20px;
		color: #FF9800;
		animation: latidos 2s infinite;
	}

	#zona_juego{
		position: relative;
		/*top: 102px;*/
		width: 100%;
		height: 322px;
	}
	
	.ayuda
	{
		cursor: url(../images/cursor/hand.cur), auto;
		padding:2px;
	}