/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
  display:none;
}
/*área de juego*/
.contenido
{
    padding: 0px;
    margin: auto;
    width: 930px;
    height: 630px;
    background-image: url("../img/CS_fondo.png");
    background-size: 930px 630px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/*Comienza codigo nuevo*/
#divLeft {
  height: 400px;
  float: left;
}

#divRight {
  height:400px;
  float: left;
}

#div1, #div2 {
  float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}

#divLeft1{position: absolute; top: 20%; left: 30%}
#divLeft2{position: absolute; top: 20%; left: 42%}  
#divLeft3{position: absolute; top: 20%; left: 54%}
#divLeft4{position: absolute; top: 20%; left: 65%}


#divRight1{position: absolute; top: 48%; left: 3%;}
#divRight2{position: absolute; top: 48%; left: 12.5%} 
#divRight3{position: absolute; top: 48%; left: 22%}
#divRight4{position: absolute; top: 48%; left: 31.5%}
#divRight5{position: absolute; top: 48%; left: 41%}
#divRight6{position: absolute; top: 48%; left: 50.5%} 
#divRight7{position: absolute; top: 48%; left: 60%}
#divRight8{position: absolute; top: 48%; left: 69.5%}
#divRight9{position: absolute; top: 48%; left: 79%}
#divRight10{position: absolute; top: 48%; left: 88.5%}

#drag0{width: 80px; height: 80px;}
#drag1{width: 80px; height: 80px;}
#drag2{width: 80px; height: 80px;}
#drag3{width: 80px; height: 80px;}

.divRight{
  height: 80px;
  width: 80px;
  border: 1px solid #000; 
}

/*Para la imagen del pajarito*/
.imge
{
width: 300px;
height: 300px;
position: absolute;
    top: 30%;
    left:40%;
display: none;
}

/*La imagen para las imagenes del perrito*/
.imgeperro
{
width: 150px;

position: absolute;
    top: 15%;
    left:45%;
    display: none;
}
/*La imagen para las imagenes de volver atras*/
.imgeatras
{
width: 150px;

position: absolute;
    top: 60%;
    left: 45%;    
    display: none;
    
}

/*La imagen para que le boton se vea resaltado*/
.imgeaatras img:hover {

  transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;


}


#btnIntrucciones{
  width: 65%;
  height: 10%;
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  top: 12%;
  left: 19%;
  color: #303030;
  white-space: normal;
  font-size: 1em;
  font-weight: bolder;
  font-style: italic;
  text-align: left;

}

#bocina{
  position: absolute;
  left: 9%;
  top:13%;
}