@keyframes girar
{
	0%
	{
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		
	}
	
	
	

	100%
	{
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-webkit-transform-origin: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
		
	}
}

@-webkit-keyframes girar
{
	0%
	{
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		
	}
	
	
	

	100%
	{
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-webkit-transform-origin: rotate(360deg);
		-o-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
		
	}
}
@keyframes girarR
{
	0%
	{
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		
		
	}
	100%
	{
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-webkit-transform-origin: rotate(-360deg);
		-o-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		transform: rotate(-360deg);
		
	}
}


@-webkit-keyframes girarR
{
	0%
	{
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-webkit-transform-origin: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
		
	}
	100%
	{
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		-webkit-transform-origin: rotate(-360deg);
		-o-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		transform: rotate(-360deg);
		
	}

}


body{
	background-color: black;
}

.contenedor
{
	    position: absolute;
    width: 800px;
    height: 600px;
    left: 20%;
top: 0%;
overflow: hidden;
}


.contenedor #fondo
{	
	position: relative;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%
	
	
}





#nivel1
{

position: absolute;
top: 85%;
left: 69%;
color: #FFF;
text-align: center;
border-radius: 25px;
width: 22%;
height: 5%;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif; 
font-size: 100%;



}

#nivel2
{
position: absolute;
top: 92%;
left: 69%;
color: #FFF;
text-align: center;
border-radius: 25px;
width: 22%;
height: 5%;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
}


.baseContenedor
{
position: absolute;
height: 40%;
width: 42%;
bottom: 0%;
left: 43%;

}

.baseContenedor img
{
position: absolute;
height: 100%;
width: 100%;

}



.barra
{
position: absolute;
height: 90%;
width: 40%;
left: 0.5%;
top: 9%;
}

.barra #barrita
{
	position: relative;
height: 100%;
width: 100%;

}

.barra #calculadoraD
{
	position: absolute;
height: 5%;
width: 58%;
top: 26%;
left: 4%;
}

.barra #fotosD
{
	position: absolute;
height: 5%;
width: 61%;
top: 31.5%;
left: 4%;
}

.barra #telFijoD
{
	position: absolute;
height: 5%;
width: 59%;
top: 37.5%;
left: 4%;
}


.barra #cartasD
{
	position: absolute;
height: 5%;
width: 60%;
top: 43.5%;
left: 4%;
}



.barra #celD
{
	position: absolute;
height: 5%;
width: 60%;
top: 49.4%;
left: 4%;
}



.barra #internetD
{
	position: absolute;
height: 5%;
width: 60%;
top: 54.8%;
left: 4%;
}

.barra #lavaD
{
	position: absolute;
height: 5%;
width: 60%;
top: 60.5%;
left: 4%;
}

.barra #mensajeriaD
{
	position: absolute;
height: 5%;
width: 60%;
top: 66.4%;
left: 4%;
}


.barra #microondasD
{
	position: absolute;
height: 5%;
width: 60%;
top: 72.4%;
left: 4%;
}

.barra #refrigeradorD
{
	position: absolute;
height: 5%;
width: 60%;
top: 78.4%;
left: 4%;
}

.barra #relojD
{
	position: absolute;
height: 5%;
width: 60%;
top: 84.4%;
left: 4%;
}


.barra #tabletD
{
	position: absolute;
height: 5%;
width: 60%;
top: 90.4%;
left: 4%;
}



.rueda
{
position: absolute;
left: 33%;
top: 3%;
height: 94%;
width: 62%;
animation: girar 25s linear infinite;
-webkit-animation-name: girar;
-webkit-animation-duration: 25s;
-webkit-animation-iteration-count: 60;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}

.rueda #ruedita
{
	position: relative;
height: 100%;
width: 100%;


}

.rueda #carta
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 74%;
left: 40%;
animation: girarR 25s linear infinite;

}


.figura{
-webkit-animation-name: girarR;
-webkit-animation-duration: 25s;
-webkit-animation-iteration-count: 60;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}

.rueda #cel
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 22%;
left: 9%;;
animation: girarR 25s linear infinite;

}

.rueda #compu
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 57%;
left: 8%;
animation: girarR 25s linear infinite;
}

.rueda #mensajero
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 57%;
left: 74%;
animation: girarR 25s linear infinite;
}

.rueda #tablet
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 23%;
left: 74%;
animation: girarR 25s linear infinite;
}

.rueda #telefono
{
	opacity: 0;
	position: absolute;
height: 20%;
width: 20%;
top: 5%;
left: 40%;
animation: girarR 25s linear infinite;
}

.suelta
{
	position: absolute;
height: 32%;
width: 25%;
top: 35%;
left: 52%;
}

 .ui-drop-hover
            {
               
               -ms-transform: scale(1.12,1.12)!important;
               transform: scale(1.12,1.12) !important;
               -webkit-transform: scale(1.12,1.12) !important;
              

            }

.suelta #sueltito
{
	position: relative;
	height: 100%;
	width: 100%;
}

.suelta #inventito
{
	position: absolute;
height: 60%;
width: 60%;
top: 24%;
left: 21%;
}

.cronometroContenedor
{
	position: absolute;
width: 10%;
height: 5%;
top: 108px;
left: 3.8%;
display: table;
color: #FFF;
font-size: 133%;
font-weight: bold;
box-sizing: border-box;
}
.cronometroContenedor span
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-family: sans-serif;
	box-sizing: border-box;
}


.marcadorC
{
	position: absolute;
width: 10%;
height: 5%;
top: 108px;
left: 16.5%;
display: table;
color: #FFF;
font-size: 133%;
font-weight: bold;
box-sizing: border-box;
}
.marcadorC span
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-family: sans-serif;
	box-sizing: border-box;
}


#reinicio
{
position: absolute;
top: 2%;
left: 1%;
color: #FFF;
text-align: center;
border-radius: 25px;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
width: 22%;
height: 5%;
font-size: 100%;
}

#reinicio:hover
{
	background-color: #ff6b00;
}

#menu
{
position: absolute;
top: 2%;
left: 24%;
color: #FFF;
text-align: center;
border-radius: 25px;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
width: 22%;
height: 5%;
font-size: 100%;

}

#menu:hover
{
	background-color:#ff6b00; 
}




.completoContenedor
{
	position: absolute;
	width: 110%;
	height: 110%;
	top: 0%;
	left: 0%;
	display: none;
}
.completoContenedor img
{
	 

}
.resultadoTiempo
{
	position: absolute;
	width: 30%;
	height: 5%;
	top: 55%;
	left: 35%;
	display: table;
	background: #c2185b;
	border-radius: 5px;
}
.resultadoTiempo span
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
	font-family: sans-serif;
	color: #fff;
}
.completoContenedor button
{
	position: absolute;
	width: 25%;
	height: 5%;
	top: 67%;
	left: 37.5%;
	border: none;
	background: #00897b;
	color: #fff;
	cursor: pointer;
	border-radius: 10px;
}
.completoContenedor button:hover
{
	background: #c2185b;
}

#menutwo
{
position: absolute;
top: 67%;
left: 35%;
color: #FFF;
text-align: center;
border-radius: 25px;
width: 30%;
height: 5%;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
}

#menutwo:hover
{
	background-color: #ff6b00;
}


#nivelsito2{
	position: absolute;
top: 85%;
left: 69%;
color: #FFF;
text-align: center;
border-radius: 25px;
width: 22%;
height: 5%;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif; 
font-size: 100%;
}

#munusito{
	position: absolute;
top: 92%;
left: 69%;
color: #FFF;
text-align: center;
border-radius: 25px;
width: 22%;
height: 5%;
background: #008C5A none repeat scroll 0% 0%;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;


}


@media only screen and (max-width: 768px) and (orientation: portrait)
{
	.contenedor
	{
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0%;
		top: 25%;
	}
}


@media only screen and (max-width: 1024px) and (orientation: portrait)
{
	.contenedor
	{
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0%;
		top: 25%;
	}
}