/*área de juego*/
.contenido
{
position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; display: flex; flex-flow: row wrap;}


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

}

#bocina{  position: absolute; top: 70%; left: 0%; width: 15%; height: 20%; display: flex; flex-flow: row wrap;

}
.imagen
{
  width: 100%;
  height: 99%; 
  display: flex;
  flex-flow: row wrap;
  position: absolute;
  top: 10%;
  left: 0%;
}

.areagame
{
position: absolute; top: 10%; left: 5%; width: 60%; height: 80%; display: flex; flex-flow: row wrap;

}
.panel-dialogo
{
   position: absolute; top: 10%; left: 25%; width: 50%; height: 25%; display: flex; flex-flow: row wrap;

}

.jirafa{
     position: absolute; top: 0%; left: 0%; width: 35%; height: 100%; display: flex; flex-flow: row wrap;

}
.letrero
{
     position: absolute; top: 0%; left: 33%; width: 73%; height: 100%; display: flex; flex-flow: row wrap; color: white; font-size: 380%;
border: 1px solid #797979;
  background: rgba(127, 127, 127, 0.5);
  border-radius: 5px;
  font-size: 3.2em;
}

.panel-opciones
{
  position: absolute; top: 0%; left: 75%; width: 25%; height: 99%; display: flex; flex-flow: row wrap;

}

.cortina{
    position: absolute; top: 0%; left: 0%; width: 99%; height: 99%; display: flex; flex-flow: row wrap;

}

.boton
{
    position: absolute; top: 40%; left: 40%; width: 15%; height: 20%; display: flex; flex-flow: row wrap;

}



#img1
          {        
    position: absolute; top: 92%; left: -140%; width: 230%; height: 5%; display: flex; flex-flow: row wrap;
            }
#rimg1
          {        
    position: absolute; top: 90%; left: 3%; width: 94%; height: 5%; display: flex; flex-flow: row wrap;
  
            }
            #img2
          {        
position: absolute; top: 25%; left: 35%; width: 15%; height: 15%; display: flex; flex-flow: row wrap;
            }

#img3
          {        
position: absolute; top: 45%; left: 35%; width: 15%; height: 15%; display: flex; flex-flow: row wrap;
            }
            #img4
          {        
position: absolute; top: 25%; left: 65%; width: 22%; height: 21%; display: flex; flex-flow: row wrap;
            }
            #rimg4
          {        
    position: absolute; top: 5%; left: 83%; width: 10%; height: 26%; display: flex; flex-flow: row wrap;
  
            }
            #img5
          {        
position: absolute; top: 70%; left: 65%; width: 20%; height: 10%; display: flex; flex-flow: row wrap;
            }
        #rimg5
          {        

        position: absolute; top: 40%; left: 5.5%; width: 6%; height: 7%; display: flex; flex-flow: row wrap;
  
            }
#img6
          {        
position: absolute; top: 70%; left: 15%; width: 21%; height: 12%; display: flex; flex-flow: row wrap;
            }
 #rimg6
          {        
  position: absolute; top: 7%; left: 5.5%; width: 6%; height: 10%; display: flex; flex-flow: row wrap;
  
            }



  .panel-bocina          
  {
     position: absolute; top: -5%; left: 33%; width: 55%; height: 10%; display: flex; flex-flow: row wrap; color: white; font-size: 222%;

}