@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html,body{
color:white;
  font-family:'Opens Sans',helvetica;  
  height:100%;
  width:100%;
  margin: 0px;
}
.fondo{width: 100%; height: 100%; position: absolute; top: 0%; left: 0%;}
.imagen
{
  width: 100%;
  height: 100%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 0%;
  left: 0%;
}


/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
  display:none;
}
.bocina{  position: absolute; top: 11%; left: 33%; width: 8%; height: 10%; display: flex; flex-flow: row wrap;

}



.panel-index{width: 100%; height: 100%;}
.panel-botones{position: absolute; top: 40%; left: 19%; width: 60%; height: 25%; display: flex; flex-flow: row wrap; 
 /*border: 10px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;*/
}

.btnbasico{position: absolute; top: 14%; left: 0%; width: 30%; height: 65%; display: flex; flex-flow: row wrap;}
.btnmedio{position: absolute; top: 14%; left: 34%; width: 30%; height: 65%; display: flex; flex-flow: row wrap;}
.btnavanzado{position: absolute; top: 14%; left: 68%; width: 30%; height: 65%; display: flex; flex-flow: row wrap;}

/*BASICO*/
.panel-juego-basico{ position: absolute; top: 32%; left: 19%; width: 80%; height: 65%; display: flex; flex-flow: row wrap;
border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;}
.instrucciones{   position: absolute; top: 10%; left: 32%; width: 50%; height: 12%; display: flex; flex-flow: row wrap;}
.jirafa{   position: absolute; top: 1%; left: 8%; width: 25%; height: 25%; display: flex; flex-flow: row wrap;}



.panel-fondo{
   position: absolute; top: 0%; left: 0%; width: 99%; height: 99%; display: flex; flex-flow: row wrap;}
.panel-respuestas{position: absolute; top: 0%; left: 0%; width: 30%; height: 99%; display: flex; flex-flow: row wrap;}  

.panel-arrastrables{position: absolute; top: 0%; left: 30.5%; width: 68%; height: 99%; display: flex; flex-flow: row wrap;}  
/*NIVEL 1*/
.resp1{  position: absolute; top: 5%; left: 20%; width: 15%; height: 15%; display: flex; flex-flow: row wrap;}
.resp2{  position: absolute; top: 38%; left: 50%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}
.resp3{  position: absolute; top: 70%; left: 20%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}

.area1{  position: absolute; top: 15%; left: 8%; width: 40%; height: 20%; display: flex; flex-flow: row wrap;}
.area2{  position: absolute; top: 40%; left: 8%; width: 40%; height: 20%; display: flex; flex-flow: row wrap;}
.area3{  position: absolute; top: 64%; left: 8%; width: 40%; height: 20%; display: flex; flex-flow: row wrap;}
/*NIVEL 1*/


/*NIVEL 2*/
.area1_n2{  position: absolute; top: 7%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}
.area2_n2{  position: absolute; top: 22%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}
.area3_n2{  position: absolute; top: 38%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}
.area4_n2{  position: absolute; top: 54%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}
.area5_n2{  position: absolute; top: 69%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}
.area6_n2{  position: absolute; top: 85%; left: 12%; width: 40%; height: 12%; display: flex; flex-flow: row wrap;}

.resp1_n2{  position: absolute; top: 5%; left: 20%; width: 15%; height: 15%; display: flex; flex-flow: row wrap;}
.resp2_n2{  position: absolute; top: 17%; left: 50%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}
.resp3_n2{  position: absolute; top: 34%; left: 20%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}
.resp4_n2{  position: absolute; top: 50%; left: 50%; width: 15%; height: 15%; display: flex; flex-flow: row wrap;}
.resp5_n2{  position: absolute; top: 64%; left: 20%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}
.resp6_n2{  position: absolute; top: 79%; left: 50%; width: 15%; height:15%; display: flex; flex-flow: row wrap;}
/*NIVEL 2*/


/*NIVEL 3*/
.area1_n3{  position: absolute; top: 7%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area2_n3{  position: absolute; top: 22%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area3_n3{  position: absolute; top: 38%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area4_n3{  position: absolute; top: 54%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area5_n3{  position: absolute; top: 69%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area6_n3{  position: absolute; top: 85%; left: 7%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area7_n3{  position: absolute; top: 7%; left: 45%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area8_n3{  position: absolute; top: 22%; left: 45%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}
.area9_n3{  position: absolute; top: 38%; left: 45%; width: 30%; height: 12%; display: flex; flex-flow: row wrap;}

.resp1_n3{  position: absolute; top: 5%;  left: 10%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp2_n3{  position: absolute; top: 15%; left: 40%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp3_n3{  position: absolute; top: 72%; left: 75%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp4_n3{  position: absolute; top: 38%;  left: 10%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp5_n3{  position: absolute; top: 72%;  left: 10%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp6_n3{  position: absolute; top: 50%; left: 40%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp7_n3{  position: absolute; top: 80%; left: 40%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp8_n3{  position: absolute; top: 5%; left: 75%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
.resp9_n3{  position: absolute; top: 38%; left: 75%; width: 12%; height: 12%; display: flex; flex-flow: row wrap;}
/*NIVEL 3*/

/*

border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;
*/