/*cuando reproduce el audio no muestra el iframe, para no llenar la pantalla de iframe*/
iframe
{
	display:none;
}

body{
  width: 100%;
  justify-content: center;
  align-items: center;
}

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

progress[value]::-webkit-progress-bar {
  background-color:transparent;
    }


progress::-webkit-progress-value {
background-color: hsla( 0.50turn , 100% , 50% , 0.5 );
}

#bocina{
  position: absolute;
  left: 20%;
  top:2%;
  width: 50px;
}

.timer{
position: absolute;
   top: 26.8%;
  left: 52.8%;
height: 40px;
  width: 304px;
  font-size: 20px;
color: white;
border-radius: 0;

}
/*área de juego*/
.contenido
{
    padding: 0px;
    margin: auto;
    width: 930px;
    height: 630px;
   
    background-size: 930px 630px;
  display: flex;
  justify-content: center;
  align-items: center;
    left: 20%;
  position: absolute;
}

#btnIntrucciones{
  width: 70%;
  height: 5%;
  background-color: transparent;
  border-color: transparent;
  position: absolute;
  top: 5%;
  left: 20%;
  color: #303030;
  white-space: normal;
  font-size: 1.5em;
  font-weight: bolder;
  font-style: italic;


}

/*Burbujas*/
#cazul{
display: block;
position: absolute;
top: 20%;
left: 30%;

}
#morado{
display: block;
position: absolute;
top: 40%;
left: 60%;
}
#camarillo{
display: block;
position: absolute;
top: 60%;
left: 50%;
}

#cverde{
display: block;
position: absolute;
top: 80%;
left: 10%;
}



#counting{
  font-size: 37.5px;
  color: white;
  position: absolute;
  top: 20.3%;
  left: 78.5%;
}



/*Contenedores para colocar las imagenes desplegables */

.contenedorgeneral{
  position: absolute;
  width:  350px;
  height: 350px;
  border-radius: 10px;  
   top: 30%;
  left: 7%;
  padding: 2em;

}

.contadorPuntu{



  position: absolute;
  width:  500px;
  height: 50px;
    top: 26.7%;
    left: 90%;
    align-content: center;
    display: none;

}

#contadorPuntualizacion{
  font-family: Verdana;
  font-size: 48px;  
  font-weight: bold;
  color: #995d2d;
  background-color: transparent;
  border: transparent;,
}

.contadorInte{
  position: absolute;
  width:  500px;
  height: 50px;
    top: 79%;
    left: 85%;
    align-content: center;
    display: none;
}
#contadorIntentos{
  font-family: Verdana;
  font-size: 50px;  
  font-weight: bold;
  color: #995d2d;
  background-color: transparent;
  border: transparent;,
}

.Juego{
    position: absolute;
  width:  100%;
  height: 100%;
  border-radius: 10px;  
 
  padding: 2em;
  display: none;
}

/*Para la imagen de instrucciones*/
.instr
{
width: 80px;
height: 70px;
position: absolute;
    top: 10%;
    left: 20%;
/*display: none;*/
}


/*La imagen para las imagenes de volver atras*/
.imgeatras
{
width: 150px;
height: 150px;
position: absolute;
    top: 64%;
    left: 52%;    
    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;


}

/*Se utiliza para genera el div para el sigue participando*/
.sigue{
    width: 300px;
height: 300px;
position: absolute;
    top: 30%;
    left:38%;
    border-radius: 10px;
    background-color: white;
    padding: 2em; 
    display: none;
    
    
}
.sigue #hazsigue{
    font-family: Verdana;
  font-size: 38px;  
  font-weight: bold;
  font-style: italic;

  color: #00bfff; 
}
.sigue p{
   font-family: Verdana;
  font-size: 20px;  
  font-style: italic;
}

/*La imagen para que le boton se vea resaltado*/
.efecto 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;
  

}
.efecto{
   position: absolute;
 top: 268px;
 left: 329px;
}



/*Transiccion para la primera abeja*/
.slideRight0 img {
  position: absolute;
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 5%;
  top: 5%;
  color: black;
  width: 200px;
  height: 200px;
}

.slideLeft0 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;  
  left: 10%;
  top: 7%;
  color: white;
  width: 200px;
  height: 200px;
}

/*Transicion para la segunda abeja*/
.slideRight1 img {
  position: absolute;
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 60%;  
  top: 10%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft1 img{
  position: absolute;
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;  
  left: 65%;
  top: 15%;
  color: white;
  width: 60px;
  height: 60px;
}

/*Colocar la transiccion*/
.slideRight2 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 15%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft2 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 10%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}
.slideRight3 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 0%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft3 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 10%;
  top: 15%;
  color: white;
  width: 60px;
  height: 60px;
}

/*Codigo para las cucarachas*/
.slideRight4 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft4 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}

/*Codigo para las cucarachas*/
.slideRight5 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft5 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}

/*Codigo para las cucarachas*/
.slideRight6 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 20%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft6 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 25%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}

/*Esttilo para las moscas*/
/*Codigo para las cucarachas*/
.slideRight7 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 60%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft7 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 65%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 8 de las moscas*/
.slideRight8 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 30%;  
  top: 30%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft8 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 35%;
  top: 35%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 9 el primero de los mosquitos*/
.slideRight9 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 60%;  
  top: 70%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft9 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 35%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight10 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 40%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft10 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 60%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight11 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 20%;  
  top: 60%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft11 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 25%;
  top: 65%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight12 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 0%;  
  top: 20%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft12 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 55%;
  top: 25%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight13 img {
  position: absolute;  
  transition-duration: 1s;  
  -webkit-transition-duration: 1s;  
  -o-transition-duration: 1s;
  left: 50%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft13 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 55%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}


/*El numero 10 el primero de los mosquitos*/
.slideRight14 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 10%;  
  top: 15%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft14 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 15%;
  top: 10%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight15 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 30%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft15 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 35%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight16 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 20%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft16 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 25%;
  top: 60%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight17 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 15%;  
  top: 20%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft17 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 20%;
  top: 25%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight18 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 40%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft18 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 45%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight19 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 0%;  
  top: 15%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft19 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 5%;
  top: 20%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight20 img {
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;
  left: 50%;  
  top: 20%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft20 img{
  position: absolute;  
  transition-duration: 3s;  
  -webkit-transition-duration: 3s;  
  -o-transition-duration: 3s;   
  left: 60%;
  top: 25%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight21 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 20%;  
  top: 20%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft21 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 25%;
  top: 25%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight22 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 30%;  
  top: 30%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft22 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 35%;
  top: 35%;
  color: white;
  width: 60px;
  height: 60px;
}
/*El numero 10 el primero de los mosquitos*/
.slideRight23 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 40%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft23 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 50%;
  top: 50%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight24 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 40%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft24 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 45%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight25 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 40%;  
  top: 20%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft25 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 45%;
  top: 25%;
  color: white;
  width: 60px;
  height: 60px;
}


/*El numero 10 el primero de los mosquitos*/
.slideRight26 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 60%;  
  top: 30%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft26 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 65%;
  top: 35%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight27 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 30%;  
  top: 30%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft27 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 35%;
  top: 35%;
  color: white;
  width: 60px;
  height: 60px;
}






/*El numero 10 el primero de los mosquitos*/
.slideRight28 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft28 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight29 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 60%;  
  top: 25%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft29 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 65%;
  top: 30%;
  color: white;
  width: 60px;
  height: 60px;
}


/*El numero 10 el primero de los mosquitos*/
.slideRight30 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 45%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft30 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 50%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight31 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 50%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft31 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 55%;
  color: white;
  width: 60px;
  height: 60px;
}







/*El numero 10 el primero de los mosquitos*/
.slideRight32 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 30%;  
  top: 3%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft32 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 35%;
  top: 5%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight33 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 5%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft33 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 8%;
  color: white;
  width: 60px;
  height: 60px;
}


/*El numero 10 el primero de los mosquitos*/
.slideRight34 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 65%;  
  top: 10%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft34 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 60%;
  top: 14%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight35 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 20%;  
  top: 15%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft35 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 25%;
  top: 19%;
  color: white;
  width: 60px;
  height: 60px;
}
  

.slideRight36 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 50%;  
  top: 25%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft36 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 55%;
  top: 30%;
  color: white;
  width: 60px;
  height: 60px;
}


/*El numero 10 el primero de los mosquitos*/
.slideRight37 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 10%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft37 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 12%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}

/*El numero 10 el primero de los mosquitos*/
.slideRight38 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 40%;  
  top: 40%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft38 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 45%;
  top: 45%;
  color: white;
  width: 60px;
  height: 60px;
}
  /*El numero 10 el primero de los mosquitos*/
.slideRight39 img {
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;
  left: 35%;  
  top: 35%;
  color: black;
  width: 60px;
  height: 60px;
}
.slideLeft39 img{
  position: absolute;  
  transition-duration: 5s;  
  -webkit-transition-duration: 5s;  
  -o-transition-duration: 5s;   
  left: 40%;
  top: 40%;
  color: white;
  width: 60px;
  height: 60px;
}
  
#audio{
  display: none;
}