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

}
/*área de juego*/
.contenido
{
    padding: 0px;
    margin: auto;
    width: 990px;
    height: 650px;
    background-image: url("../img/fondo.jpg");
    background-size: 990px 650px;

  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.contenidojuego
{
    padding: 0px;
    margin: auto;
    width: 990px;
    height: 650px;
    background-image: url("../img/fondojuego.png");
    background-size: 990px 650px;

  /*IMPORTANTE*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.inicio
{
   width: 730px;
    height: 220px;
    position: absolute;
    top: 4%;
    left:22%; 
}
.basico
{
  width: 150px;
    height: 100px;
    position: absolute;
    top: 50%;
    left:30%; 
}
.medio
{
  width: 150px;
    height: 100px;
    position: absolute;
    top: 50%;
    left:45%; 
}
.dificil
{
  width: 150px;
    height: 100px;
    position: absolute;
    top: 50%;
    left:60%; 
}
.img1
{
  width: 210px;
    height: 180px;
    position: absolute;
    top: 28%;
    left:21%; 
}
.img2
{
  width: 210px;
    height: 180px;
    position: absolute;
    top: 35%;
    left:65%; 
}
.instrucciones1
{
    width: 85%;
    height: 12%;
    position: absolute;
    top: -1.1%;
    left:9%; 
    font-size: 95%;
    font-family: 'arial';
    text-align: justify;
    font-weight: bold;


}

.instrucciones2
{
    width: 690px;
    height: 290px;
    position: absolute;
    top: 1%;
    left:23%; 
    font-size: 25px;
    font-family: 'sans-serif';
}
.resbasico
{
  width: 210px;
    height: 180px;
    position: absolute;
    top: 70%;
    left:40%; 
}
.dialogo
{
  width: 210px;
    height: 180px;
    position: absolute;
    top: 47%;
    left:53%; 
}

.mensajemal
{
  width: 200px;
    height: 180px;
    position: absolute;
    top: 48%;
    left:54%; 
}
.mensajebueno
{
  width: 200px;
    height: 180px;
    position: absolute;
    top: 48%;
    left:54%; 
}


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


.panel-juego{position: absolute; top: 0%; left: 19%; width: 60%; height: 80%; display: flex; flex-flow: row wrap;
border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;
}


.panel-img1{position: absolute; top: 22.5%; left: 26%; width: 12%; height: 20%; display: flex; flex-flow: row wrap;
border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;
}
.panel-img2{position: absolute; top: 27.5%; left: 61.2%; width: 12%; height: 20%; display: flex; flex-flow: row wrap;
border: 1px solid #E87306;
  background: rgba(232, 115, 6, 0.5);
  border-radius: 5px;
}