/* CSS Document */
/*-------------------------------------------*/
#vocabulario1>div:hover
{
	background-color: #ffe0b2;
	cursor: url(../images/cursor/hand.cur), auto;
}
#vocabulario2>div:hover
{
	background-color: #ffe0b2;
	cursor: url(../images/cursor/hand.cur), auto;
}
.pasos>span:hover
{
	background-color: #ffe0b2;
	cursor: url(../images/cursor/hand.cur), auto;
}
.pasos_ampliado>ol>li:hover
{
	padding: 2px;
    background-color: #ffe0b2;
	cursor: url(../images/cursor/hand.cur), auto;
    border-radius: 5px;
}
#zona_trabajo
{
	margin-top: 25px;
}


.cursor:hover
{
		cursor:url(../images/cursor/hand.cur) , auto!important;
}
.vocabulario
{
	font-family:roboto;
	    width: 230px;
    background-color: white;
    padding: 10px;
    float: left;
    position: fixed;
    top: 40px;
	z-index: 4;
	display:none;
}
#vocabulario2
{
	top: 45%;
    right: 10px;
    z-index: 2;
	width:429px;
}
.vocabulario .cerrarvoc
{
	    width: 110%;
    height: 10px;
    position: relative;
    left: -10px;
    top: 10px;
    background-color: #997150;
    text-align: center;
	
}
.vocabulario .cerrarvoc .fa
{
	color:white;
	position:relative;
	top: -5px;
}


.preparacion span
{
	color: #1d1d1b;
    font-size: 17px;
}

.preparacion li
{
	float:left;
	margin-right: 30px;
}


.leer
{
	position: absolute;
    top: 62px;
    z-index: 3;
    width: 40px;
    height: 50px;
    left: 5px;
    color: white;
    background-color: #FFD180;
    border-radius: 12px;
    padding: 5px;
    color: #1d1d1b;
    font-size: 30px;
    font-family: Roboto;
}
.leer2
{
	position: absolute;
    top: 61px;
    z-index: 3;
    width: 40px;
    height: 50px;
    left: 5px;
    color: white;
    background-color: #FFD180;
    border-radius: 12px;
    padding: 5px;
    color: #1d1d1b;
    font-size: 30px;
    font-family: Roboto;
}
.creditos
{
	position: absolute;
    top: 110px;
    font-family: Roboto;
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.84);
    border-radius: 8px;
    width: 80%;
    margin-left: 12%;
    padding: 19px;
}
.aljuego
{
	position: absolute;
    top: 361px;
    width: 176px;
    left: 530px;
    color: #593820;
    background-color: #FFD180;
    border-radius: 12px;
    padding: 6px;
    font-size: 23px;
    text-align: center;
    font-family: Chewy;
    animation: 2s milatido infinite;
    cursor: url(../images/cursor/hand.cur), auto;
}
.postre
{
      width: 35%;
    position: absolute;
    left: 31%;
    top: 47%;
    z-index: 2;
}

.ilumina
{
        width: 50%;
    position: absolute;
    left: 23%;
    top: 157px;
}
.postre2
{
         width: 54%;
    position: absolute;
    left: 25%;
    top: 69px;
    z-index: 2;
}
.ilumina2
{
   width: 70%;
    position: absolute;
    left: 18%;
    top: 8px;
}

.julititulo
{
	position: absolute;
    left: 6%;
    top: 12%;
    width: 19%;
    height: auto;
	animation: 2s milatido ease;
}

/*BOTONES CONTROL*/
.latidoboton
{
	animation: 1s milatido infinite;
	color: #58371F;
}
.boton_control
{
	position: relative;
    bottom: 42px;
    color: white;
	cursor: url(../images/cursor/hand.cur), auto;
}
.siguiente{	right: 10px; float: right;}
.atras{	left: 10px; float: left;}
.boton_control:hover{ color: #58371F; }
/*FIN BOTONES CONTROL*/

.fondo1{  background-color: #FF9800;}
.fondo2{ background: url(../images/fondos/fondo2.png);    background-size: 100%;}
.fondo3{ background-color: #FF9800;}
.fondo4{ background: url(../images/fondos/fondo4.png);    background-size: 100%;}

.tituloinicial {
    position: absolute;
    font-size: 35px;
    font-family: Chewy;
    color: white;
    position: absolute;
    left: 196px;
    width: 75%;
    text-align: left;
}
/*JUEGO*/

#zona_trabajo{
		  min-height: 100%;
		  left: 0px;
		  top: 3px;
		  width: 100%;
		  border-radius: 12px;
		  position: absolute;	
	}
	
	#zona_trabajo h3
	{
		text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
	}
	
	.ready
	{
		 width: 21px;
   		 position: relative;
    	left: 3px;
    	bottom: 3px;
		display:none;
	}
	
	.tab-pane
	{
		width: 104%;
		border: 3px solid #E65F16;
		height: 267px;
		border-radius: 12px 12px 12px 12px;
		background-color: rgba(255, 255, 255, 0.85);
		margin-bottom: 5px;
	}
	.pasos_ampliado
	{
		position: absolute;
		width: 90%;
		font-size: 20px;
		border: 3px solid  #FF9800;
		overflow-y: auto;
		background-color: white;
		padding: 8px;
		margin-top: 8px;
		font-size: 16px;
		border-radius: 20px 20px 20px 20px;
		top: -10px;
		left: 54px;
		z-index: 10;
		display:none;
	}
	
	.pasos
	{
		height: 115px;
		border: 3px solid #E65F16;
		overflow-y: auto;
		background-color: rgba(255, 255, 255, 0.78);
		padding: 12px;
		padding-top: 15px;
		margin-top: 8px;
		font-size: 19px;
		border-radius: 12px 0px 12px 12px;
		animation:3s iluminar ease;
	}
	
	.en_el_paso
	{
		position: absolute;
    top: 0px;
    left: 31px;
    margin: 0px;
	z-index:2;
	}
	
	.pasos_ampliado .active
	{
		padding: 2px;
   		background-color: #64DD17;
    	border-radius: 5px;
	}
	
		
	.ingredientes
	{
	height: 394px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 3px solid #E65F16;
    border-radius: 12px;
	padding:3px;
	}
	
	.arrastrable
	{
		background-color:white;
		width:67px;
		height:auto;
		margin:3px;
	}
	
	.cazuela
	{
	    position: relative;
   	    left: 0%;
    	bottom: 7px;
	}
	
	.platon_final
	{
	
		
		    width: 33%;
    position: absolute;
    left: 66%;
    top: 63%;
	}
	
	.platon
	{
		position: relative;
		top: 71px;
		left: 10%;
		width: 75%;
	}
	
	.platon2
	{
	    position: relative;
		top: 34px;
		left: 35%;
		width: 271px;
	}
	
	.batidora
	{
		position: relative;
    	top: 20px;
    	left: 0px;
		animation:2s milatido infinite;
		display:none;
	}
	
	.batiendo
	{
		position: relative;
		top: 5px;
		left: 6%;
		width: 86%;
	}
	

	.estado
	{
		    position: absolute;
			left: 67%;
			top: 31%;
			display: table;
			z-index: 3000;
			width: 97px;
			display:none;
	}
	#listo
	{
		position: absolute;
    z-index: 1;
    top: 56%;
    left: 73%;
    background-color: white;
    padding: 7px;
    font-family: chewy;
    border-radius: 13px;
    border: 2px solid #B17E49;
    font-size: 18px;
	animation:1s milatido infinite;
	cursor:url(../images/cursor/hand.cur) , auto!important;
	display:none;
	}
	
	
	.contenedorPieza
	{
		position: relative;
		left: 89px;
		bottom: 222px;
		z-index: 2;
		width: 213px;
		height: 105px;
		display: table;
	}
	#platoncon {
			    position: relative;
    left: 112px;
    bottom: 110px;
    z-index: 2;
    width: 213px;
    height: 105px;
    display: table;
			}
	
	#cazuela_final
	{
		  /*  position: relative;
			bottom: 160px;
			right: -2%;
			width: 234px;*/
			    position: relative;
    bottom: 20px;
    right: -2%;
    width: 221px;
	}
	
	
	#mesa .contenedorPieza
	{
		left: 225px;
    	bottom: 105px;
	}
	
	#mesa #mesas
	{
		left: 264px;
		bottom: 121px;
		width: 166px;
	}
	
	#mesa #mesas2
	{
		 bottom: 239px!important;
   		 width: 171px;
   		left: 258px;
		display:none;
	}
	
	#mesa #mesas3
	{
		bottom:94px!important;
		left:109px;
		display:none;
	}
	#tamizar,#platon,#mesa,#molde
	{
		background-image:url(../images/tema/img/mesa1.png);
	}
	
	#horno,#decora
	{
		background-image:url(../images/tema/img/mesa2.png);
	}
	
	#tamizar .contenedorPieza
	{
		left: 130px;
    	bottom: 177px;
	}
	
	.tamizador
	{
		position: relative;
		width: 241px;
		left: 25%;
		top: 27px;
	}
	
	#tamizado_final
	{
		width: 200px;
   		position: relative;
   		left: 23px;
    	bottom: 164px;
	}
	
	
    .molde
	{
		    position: relative;
			width: 269px;
			left: 35%;
			top: -37px;
	}
	.estilo
	{
		    position: relative;
    width: 92%;
    left: 6%;
    bottom: 40px;
	}
	#molde .contenedorPieza
	{
		    left: 255px;
    bottom: 44px;
    position: absolute;
    width: 187px;
	}
	
	.moldefin
	{
		    position: relative;
    width: 271px;
    left: 34%;
    top: 47px;
	}
	.moldefin2
	{
		    position: relative;
    width: 294px;
    left: 29%;
    top: 23px;
	}
	
	#frambuesas_final
	{
	      width: 70%;
    position: relative;
    left: -107px;
    top: -246px;
	}
	.botones
	{
		width: 35%;
		position: absolute;
		right: 9px;
		top: 23px;
		background-color: #AFD8DC;
		font-family: chewy;
		padding: 5px;
		border-radius: 15px;
		font-size: 17px;
	}
	.botones .tit
	{
		Color: black;
    background-color: inherit;
    border-radius: 0px;
    border-bottom: 2px solid white;
    margin-bottom: -14px;
    font-size: 17px;
	}
	.cuentatras
	{
		width: 96%;
		height: 100px;
		position: absolute;
		bottom: -13px;
		display:none;
	}
	.botones span
	{
		background-color: #94C3C9;
    border-radius: 12px;
    color: white;
    padding: 4px;
    margin: 2px;
    font-size: 17px;
	}
	
	.horno
	{
		    width: 240px;
    position: absolute;
    top: 20px;
    left: 37px;
	}
	#servir
	{
		top: 151px;
    left: 285px;
    width: 152px;
    height: 84px;
	}
	.thuevos
	{
		    position: absolute;
    z-index: 3;
    left: 10px;
    font-family: Chewy;
    font-size: 25px;
	}
	#molde_horneado
	{
		width: 14%;
		top: 15%;
		left: 26%;
		position: absolute;
	}
	
	.horno2
	{
		    width: 240px;
    position: absolute;
    top: 20px;
    left: 37px;
	}
	#hornear
	{
		    top: 53px;
    left: 45px;
	}
	#molde_final
	{
		width: 212px;
    	position: absolute;
   	 	right: 23px;
    	top: 33%;
	}
	
	#cuchara
	{
	  	position: relative;
   	 	width: 100px;
    	right: -2px;
     	top: -21px;
		animation: 2s milatido infinite;
	}
	
	#cuchara2
	{
		position: relative;
   		 width: 100px;
    	right: 0px;
    	top: -23px;
	}
		
	.cuchara3
	{
	  	position: absolute;
   		width: 100px;
    	left: 73px;
    	top: 36px;
    	animation: 2s milatido infinite;
		z-index:3;
		display:none;
	}
		




@keyframes aum {
   
   50% { opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */}
}
@keyframes iluminar {
   
  		50% { border:4px dashed #E65F16; }
		to { transform: initial; }
}
@keyframes milatido {
		from { transform: none; }
		50% { transform: scale(1.1); }
		to { transform: none; }
	}

@keyframes rotar{
     from { animation: 2s  bounceInDown ease; }
    80% { -webkit-transition: -webkit-transform 1s ease-out;
 -moz-transition: -moz-transform 1s ease-out;
 transition: transform 1s ease-out;
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);}
 
}

@keyframes rotando{
    
    0% { opacity:0;}
	100% { opacity:1;}
 
}
	
	
/**EMERGENTES**/

.miemergente{
		width: 750px;
   		 color: #1d1d1b;
		position: fixed;
		margin-left: 50%;
		top: 20px;
		left: -375px;
		z-index: 2000;
		display:table;
	}