body{
  margin: 0;
  padding: 0;
}

body > section, body > div.section {
  z-index: 0;
  min-width: 1000px;
  position: relative;
}

/* plugin attr */
.section-reference{
  width: 100%;
  height: 100%; 
  overflow: hidden;*/
}

div.section-to-move{
  display: block;
  position: relative;
  z-index: 2;
}


/*custom attr*/
 #background2{
  height: 100%;
  background: url("images/espacioanimado.gif") no-repeat scroll 0 0 transparent;
  background-size: cover;
  left: -5%;
  width: 120%;
 }


#section_to_move{
  background-image: url("images/marte.png");
  background-repeat: no-repeat;
  top: -600px; 
  height: 151px;
  width: 150px;
  left: 150px;
  border: 1px solid orange;
}

#section_to_move2{
  background: url("images/luna.png");
  /*background-size: 300px 350px;*/
  background-repeat: no-repeat;
  top: -950px; 
  height: 100px;
  width: 100px;
  left: 300px;
  border: 1px solid red;
}

#section_to_move3{
  background: url("images/saturno.png");
  /*background-size: 300px 350px;*/
  background-repeat: no-repeat;
  top: -900px; 
  height: 110px;
  width: 190px;
  left: 700px;
  border: 1px solid green;
}

#section_to_move4{
  background: url("images/urano.png");
  /*background-size: 300px 350px;*/
  background-repeat: no-repeat;
  top: -500px; 
  height: 100px;
  width: 100px;
  left: 700px;
  border: 1px solid yellow;
}

#redes{
    background: url("images/base_redes.png");
    background-repeat: no-repeat;
    top: -575px;
    height: 100px;
    width: 275px;
    border: 1px solid yellow; 
}

#tierra{
    background: url("images/tierra.png");
    background-repeat: no-repeat;
    top: -1000px;
    height: 500px;
    width: 800px;
    border: 1px solid red; 
}

div.some-class{
  height: 100%;
  width: 65%;
}

.luna{
   position: absolute;
   top: 50%;
   left: 0%;
   cursor: pointer;
}

.teazer{
    position: absolute;
    left: 5%;
    top: 10%;
}

.teazer2{
    position: absolute;
    left: 5%;
    top: 10%;
}

.teazer:hover{
    cursor: pointer;
}
.teazer2:hover{
    cursor: pointer;
}

.saturno:hover{
    /*cursor: pointer;*/
}
.saturno2:hover{
    cursor: pointer;
}

.marte{
    position: absolute;
    margin-left: 40%;
    margin-top: 7%;

}
.marte2{
    position: absolute;
    margin-left: 40%;
    margin-top: 7%;
    cursor: pointer;
}

.saturno{
    position: absolute;
    margin-left: 80%;
    margin-top: 15%;
}
.saturno2{
    position: absolute;
    margin-left: 80%;
    margin-top: 15%;
}

.asteroides{
    position: absolute; top: 30%;
     left: 40%;

}

.satelite1{
    position: absolute;
    left:75%;
    top: 50%;
    cursor: pointer;
}
.galaxia{
    position: absolute;
    top: 70%;
    left: 10%;
}

.satelite2{
    position: absolute;
    top: 50%;
    left: 20%;
    cursor: pointer;
}





.tierra{
    position: absolute;
    top: 63%;
    left: 30%;

}
.tierra2{
    position: absolute;
    top: 63%;
    left: 30%;
    cursor: pointer;

}

.urano{
    position: absolute;
    left: 70%;
    top: 20%;
}
.urano2{
    position: absolute;
    left: 70%;
    top: 20%;
    cursor: pointer;
}
.ligas{
    margin-left: 10%;
    margin-top: -9%;

}

.redes{
    margin-left: 20%;
    margin-top: -23%;
}

.logo{
    position: absolute;
    top: 70%;
    left: 38%;
}

.tablero{
    position: absolute;
    left: 35%;
    top: 3%;
    position: fixed;
}

@font-face{
  font-family: contadormarciano;
  src:url("../fuentes/trebucbd.ttf");
}

#contador{
  position: absolute;
  top: 12%;
  left: 17%;
  font-weight: bold;
  color: #99FF00; 
  text-align: center;
   font-size: 2em;
   font-family: contadormarciano;
}

.base_ligas{
  position: absolute;
  top: 87%;
  left: 30%;
  position: fixed;
}

.base_redes{
  position: absolute;
  top: 85%;
  left: 75%;
  position: fixed;
}



.marco_iz_sup{
  position: absolute;
  top: 5%;
  left: 2%;
  position: fixed;
  
  
}

.marco_der-sup{
  position: absolute;
  top: 5%;
  left: 78%;
  position: fixed;
 
  
}

.marco_iz_infer{
  position: absolute;
  top: 78%;
  left: 2%;
  position: fixed;
  
  
}
.marco_der_infer{
  position: absolute;
  top: 68%;
  left: 95%;
  position: fixed;
  
  
}
.vs{
  position: absolute;
  color: white;
  font-size: 10pt;
  top: 90%;
}


#fondo_baile{
   width: 907px;
   height: 477px;
   background-image: url('images/marcosaturno.png');
   background-size: 100% 100%; 
   background-repeat: no-repeat;
   padding: 6%; padding-top: 5%;
   margin-left: 15%;
}
.pasos_baile{
  margin-right: 0px;
   padding-right: 0px;
}

.pasos_baile img{
  width: 50%; margin-top: 25%;
}


.baile img{
  width: 100%; 
  margin-top: 15%;
}

iframe{
  margin-left: 25%;
}

.gif_tierra{
  width: 80%;
   
 }
 .gif_tierra2{
  display: none;
 }
 .gif_marte{
  width: 70%;
   
 }
 .gif_marte2{
  display: none;
 }
 .gif{
  width: 70%;
   
 }
 .gif2{
  display: none;
 }




/*  modo cel mas pequeño en vertical */
@media only screen and (max-width: 320px) and (max-height: 480px){




.urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 90%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;

} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    display: none;
    
  }
  .gif2{
    display: block;
    width: 70%;
    margin-left: -50%;
    
  }
  .cerrar{
    position: relative;
    margin-top: 175px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 20%;
    
}
.teazer img{
    width: 40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 20%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 40%;
}
.marte2 img{
  width: 40%;
  cursor: pointer;
}
.marte{
  top: 5%;
}
.marte2{
  top: 5%;
}



.base_ligas{
  left: 5%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -20%;

}

.tierra{
  margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
   margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.saturno{
    position: absolute;
    margin-left: 30%;
    margin-top: 40%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 30%;
    margin-top: 40%;
}

#contador{
  position: absolute;
  top: 25%;
  margin-left: -18%;
 font-size: 10pt;
}


.modal-body{
 margin-left: 25%;
  width:100%; 
  height:200px;
}

.modal-body iframe{
  width:100%; 
  height:200px;
  margin-left: -27%;
}

.base_redes{
  top: 70%;
  margin-left: 11%;

}

.base_redes img{
  width: 8%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 30%;
}
.insta img{
  
  
  width: 89%;
 
}

.face img{
  width: 89%;

}

.tw img{
 width: 89%;
}
.you img{
width: 89%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  margin-left: -40%;
  margin-top: 5%;
  z-index: 3;
}


.marco_iz_sup img{
 display: none;
  
  
}

.marco_der-sup img{
  display: none;
 
  
}

.marco_iz_infer img{
  display: none;
  
  
}
.marco_der_infer img{
  display: none;
  
  
}


}

/* modo cel mas pequeño en horizontal */

@media only screen and (max-width: 480px) and (max-height: 320px){

 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width:40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 40%;
}
.marte2 img{
  width: 40%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 20%;
  top: 85%;

}

.base_ligas img{
  width: 70%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 60%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: -5%;
  left: 15%;
  z-index: -2;
}

.tierra img{
  width: 80%;
}
.tierra2{
  margin-top: -5%;
  left: 15%;
  z-index: -1;
}

.tierra2 img{
  width: 80%;
}





.saturno{
    position: absolute;
    margin-left: 50%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 50%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -10%;
 font-size: 15pt;
}
.cerrar{
  margin-top: 10px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:180px;
}

.modal-body iframe{
  width:100%; 
  height:180px;
  margin-left: -27%;
}

.base_redes{
  top: 85%;
  left: 75%;
}

.base_redes img{
  width: 80%;
}

.redes{
   margin-left: 10%;
    margin-top: -23%;
}
.redes img{
  width: 14%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  margin-left: -20%;
  z-index: 3;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}


}

/* modo cel samsung galaxy s2 vertical */

@media only screen and (max-width: 320px) and (max-height: 533px){

 .gif_marte{
  display: none;
   
 }
 .gif_marte2{
  display: block;
  width: 80%;
  margin-left: -50%;
 }
 .cerrarm{
z-index: 1;
  margin-top: 170px;
 }


.urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 90%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    display: none;
    
  }
  .gif2{
    display: block;
    width: 70%;
    margin-left: -50%;
    
  }
  .cerrar{
    position: relative;
    margin-top: 175px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 20%;
    
}
.teazer img{
    width: 40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 20%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 40%;
}
.marte2 img{
  width: 40%;
  cursor: pointer;
}
.marte{
  top: 5%;
}
.marte2{
  top: 5%;
}



.base_ligas{
  left: 5%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -20%;

}

.tierra{
  margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
   margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.saturno{
    position: absolute;
    margin-left: 30%;
    margin-top: 40%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 30%;
    margin-top: 40%;
}

#contador{
  position: absolute;
  top: 25%;
  margin-left: -18%;
 font-size: 10pt;
}


.modal-body{
 margin-left: 25%;
  width:100%; 
  height:200px;
}

.modal-body iframe{
  width:100%; 
  height:200px;
  margin-left: -27%;
}

.base_redes{
  top: 70%;
  margin-left: 11%;

}

.base_redes img{
  width: 8%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 30%;
}
.insta img{
  
  
  width: 89%;
 
}

.face img{
  width: 89%;

}

.tw img{
 width: 89%;
}
.you img{
width: 89%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  margin-left: -40%;
  margin-top: 5%;
  z-index: 3;
}


.marco_iz_sup img{
 display: none;
  
  
}

.marco_der-sup img{
  display: none;
 
  
}

.marco_iz_infer img{
  display: none;
  
  
}
.marco_der_infer img{
  display: none;
  
  
}
}

/* iphone5 vertical */

@media only screen and (max-width: 320px) and (max-height: 568px){
  .gif_marte{
  display: none;
   
 }
 .gif_marte2{
  display: block;
  width: 80%;
  margin-left: -50%;
 }
 .cerrarm{
z-index: 1;
  margin-top: 170px;
 }

.urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 90%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    display: none;
    
  }
  .gif2{
    display: block;
    width: 70%;
    margin-left: -50%;
    
  }
  .cerrar{
    position: relative;
    margin-top: 175px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 20%;
    
}
.teazer img{
    width: 40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 20%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 40%;
}
.marte2 img{
  width: 40%;
  cursor: pointer;
}
.marte{
  top: 5%;
}
.marte2{
  top: 5%;
}



.base_ligas{
  left: 5%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -20%;

}

.tierra{
  margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
   margin-top: 15%;
  left: 5%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.saturno{
    position: absolute;
    margin-left: 30%;
    margin-top: 40%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 30%;
    margin-top: 40%;
}

#contador{
  position: absolute;
  top: 25%;
  margin-left: -18%;
 font-size: 10pt;
}


.modal-body{
 margin-left: 25%;
  width:100%; 
  height:200px;
}

.modal-body iframe{
  width:100%; 
  height:200px;
  margin-left: -27%;
}

.base_redes{
  top: 70%;
  margin-left: 11%;

}

.base_redes img{
  width: 8%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 30%;
}
.insta img{
  
  
  width: 89%;
 
}

.face img{
  width: 89%;

}

.tw img{
 width: 89%;
}
.you img{
width: 89%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  margin-left: -40%;
  margin-top: 5%;
  z-index: 3;
}


.marco_iz_sup img{
 display: none;
  
  
}

.marco_der-sup img{
  display: none;
 
  
}

.marco_iz_infer img{
  display: none;
  
  
}
.marco_der_infer img{
  display: none;
}
  
  
}

/* mi cel vertical */

@media only screen and (max-width: 360px) and (max-height: 640px){
  .gif_marte{
  display: none;
   
 }
 .gif_marte2{
   display: block;
  width: 80%;
  margin-left: -50%;
  margin-top: -20%;
 }
 .cerrarm{
z-index: 1;
  margin-top: 175px;
 }


.urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 90%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;
} 
 
 .gif_tierra{
 display: none;
 }
 .gif_tierra2{
  display: block;
   width: 100%;
    margin-left: -50%;
    margin-top: -90px;
 }

 .gif{
    display: none;
    
  }
  .gif2{
    display: block;
    width: 70%;
    margin-left: -50%;
    
  }
  .cerrar{
    position: relative;
    margin-top:185px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 20%;
    
}
.teazer img{
    width: 40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 20%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 50%;
}

.marte2 img{
  width: 50%;
  cursor: pointer;
}
.marte{
  top: 5%;
}
.marte2{
  top: 5%;
}



.base_ligas{
  left: 5%;
  top: 91%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 15%;
  margin-left: -10%;
  margin-top: 7%;
}
.liga2 img{
  width: 6%;
  margin-top: 6%;
  margin-left: 0%;
}
.liga3 img{
  width: 13%;
  margin-top: 5%;
}
.liga4 img{
  width: 6%;
  margin-top: 5%;
}
.liga5 img{
  width: 10%;
  margin-top: 3%;
  margin-left: 5%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -20%;

}

.tierra{
  margin-top: 7%;
  left: -5%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
   margin-top: 7%;
  left: -5%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.saturno{
    position: absolute;
    margin-left: 30%;
    margin-top: 45%;
    z-index: 1;
}
.saturno img{
  z-index: 5;
}
.saturno2 img{
  z-index: 5;
}
.saturno2{
      position: absolute;
    margin-left: 30%;
    margin-top: 45%;
}

#contador{
  position: absolute;
  top: 25%;
  margin-left: -18%;
 font-size: 10pt;
}


.modal-body{
 margin-left: 25%;
  width:100%; 
  height:200px;
}

.modal-body iframe{
  width:100%; 
  height:200px;
  margin-left: -27%;
}

.base_redes{
  top: 67%;
  margin-left: 11%;

}

.base_redes img{
  width: 8%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 30%;
}
.insta img{
  
  
  width: 89%;
 
}

.face img{
  width: 89%;

}

.tw img{
 width: 89%;
}
.you img{
width: 89%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 60%;
    left: -5%;
}

.satelite2{
  position: absolute;
  top: 50%;
  left: 20%;
  
}
.satelite2 img{
  width: 70%;
  z-index: -1;
}

.satelite1{
  margin-left: -30%;
  margin-top: 10%;
  z-index: 1;
}

.satelite1 img{
  width: 50%;
}


.marco_iz_sup img{
 display: none;
  
  
}

.marco_der-sup img{
  display: none;
 
  
}

.marco_iz_infer img{
  display: none;
  
  
}
.marco_der_infer img{
  display: none;
  
  
}
}

/* mi cel en horizontal*/

@media only screen and (max-width: 640px) and (max-height: 360px){
   .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
  margin-top: -5%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 60%;
  height: auto;
}
.cerrarv{
  margin-top: -20px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 80%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 70%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 13%;
    
}
.teazer img{
    width:60%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 13%;
}
.teazer2 img{
    width: 60%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 70%;
}
.marte2 img{
  width: 70%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 20%;
  top: 85%;

}

.base_ligas img{
  width: 70%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 60%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
 top: 50%;
  left: 15%;
 
}

.tierra img{
  width: 80%;
}
.tierra2{
  top: 50%;
  left: 15%;
  z-index: -1;
}

.tierra2 img{
  width: 80%;
}





.saturno{
    position: absolute;
    margin-left: 50%;
    margin-top: 17%;
    z-index: 1;
}
.saturno2{
      position: absolute;
    margin-left: 50%;
    margin-top: 17%;
    z-index: 1;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -10%;
 font-size: 15pt;
}
.cerrar{
  margin-top: 10px;
}

.modal-body{
 margin-left: 25%;
  width:80%; 
  height:180px;
}

.modal-body iframe{
  width:80%; 
  height:180px;
  margin-left: -10%;
}

.base_redes{
  top: 85%;
  left: 75%;
}

.base_redes img{
  width: 80%;
}

.redes{
   margin-left: 10%;
    margin-top: -23%;
}
.redes img{
  width: 14%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 60%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 50%;
  left: 15%;
}
.satelite2 img{
  width: 60%;
  z-index: 1;
}

.satelite1{
  margin-left: -20%;
  margin-top: 6%;
  z-index: 1;

}
.satelite1 img{
  width: 50%;
  z-index: 5;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}


}

/* iphones vertical*/

@media only screen and (min-width: 375px) and (max-width: 445px){
   .gif_marte{
  display: none;
   
 }
 .gif_marte2{
   display: block;
  width: 80%;
  margin-left: -50%;
  margin-top: -20%;
 }
 .cerrarm{
z-index: 1;
  margin-top: 175px;
 }


.urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 90%;
  height: auto;
}
.cerrarv{
  margin-top: 50px;
  z-index: 1;
} 
 
 .gif_tierra{
 display: none;
 }
 .gif_tierra2{
  display: block;
   width: 100%;
    margin-left: -50%;
    margin-top: -90px;
 }

 .gif{
    display: none;
    
  }
  .gif2{
    display: block;
    width: 70%;
    margin-left: -50%;
    
  }
  .cerrar{
    position: relative;
    margin-top:185px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 20%;
    
}
.teazer img{
    width: 40%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 20%;
}
.teazer2 img{
    width: 40%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 50%;
}

.marte2 img{
  width: 50%;
  cursor: pointer;
}
.marte{
  top: 5%;
}
.marte2{
  top: 5%;
}



.base_ligas{
  left: 5%;
  top: 91%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 15%;
  margin-left: -10%;
  margin-top: 7%;
}
.liga2 img{
  width: 6%;
  margin-top: 6%;
  margin-left: 0%;
}
.liga3 img{
  width: 13%;
  margin-top: 5%;
}
.liga4 img{
  width: 6%;
  margin-top: 5%;
}
.liga5 img{
  width: 10%;
  margin-top: 3%;
  margin-left: 5%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -20%;

}

.tierra{
  margin-top: 7%;
  left: -5%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
   margin-top: 7%;
  left: -5%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.saturno{
    position: absolute;
    margin-left: 30%;
    margin-top: 50%;
    z-index: 1;
}
.saturno img{
  z-index: 2;
}
.saturno2 img{
  z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 30%;
    margin-top: 50%;
}

#contador{
  position: absolute;
  top: 25%;
  margin-left: -18%;
 font-size: 10pt;
}


.modal-body{
 margin-left: 25%;
  width:100%; 
  height:200px;
}

.modal-body iframe{
  width:100%; 
  height:200px;
  margin-left: -27%;
}

.base_redes{
  top: 67%;
  margin-left: 11%;

}

.base_redes img{
  width: 8%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 30%;
}
.insta img{
  
  
  width: 89%;
 
}

.face img{
  width: 89%;

}

.tw img{
 width: 89%;
}
.you img{
width: 89%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 60%;
    left: -5%;
}

.satelite2{
  position: absolute;
  top: 50%;
  left: 20%;
  
}
.satelite2 img{
  width: 70%;
  z-index: -1;
}

.satelite1{
  margin-left: -30%;
  margin-top: 10%;
  z-index: 1;
}
.satelite1 img{
  width: 50%;
}


.marco_iz_sup img{
 display: none;
  
  
}

.marco_der-sup img{
  display: none;
 
  
}

.marco_iz_infer img{
  display: none;
  
  
}
.marco_der_infer img{
  display: none;
  
  
}


}


/* iphons horizontal */

@media only screen and (min-width: 666px) and (max-width: 736px){
   .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
  margin-top: -5%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 60%;
  height: auto;
}
.cerrarv{
  margin-top: -20px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 80%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 70%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 13%;
    
}
.teazer img{
    width:60%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 13%;
}
.teazer2 img{
    width: 60%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 50%;
}

.marte img{
  width: 70%;
}
.marte2 img{
  width: 70%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 20%;
  top: 85%;

}

.base_ligas img{
  width: 70%;
 
}




.tel img{
  width: 10%;
  margin-left: -16%;
  margin-top: 7%;
}
.liga2 img{
  width: 5%;
  margin-top: 7%;
  margin-left: -5%;
}
.liga3 img{
  width: 10%;
  margin-top: 7%;
}
.liga4 img{
  width: 6%;
  margin-top: 8%;
}
.liga5 img{
  width: 8%;
  margin-top: 8%;
  margin-left: -1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 60%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
 top: 55%;
  left: 15%;
 
}

.tierra img{
  width: 80%;
}
.tierra2{
  top: 55%;
  left: 15%;
  z-index: -1;
}

.tierra2 img{
  width: 80%;
}





.saturno{
    position: absolute;
    margin-left: 50%;
    margin-top: 17%;
    z-index: 1;
}
.saturno2{
      position: absolute;
    margin-left: 50%;
    margin-top: 17%;
    z-index: 1;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -10%;
 font-size: 15pt;
}
.cerrar{
  margin-top: 10px;
}

.modal-body{
 margin-left: 25%;
  width:80%; 
  height:180px;
}

.modal-body iframe{
  width:80%; 
  height:180px;
  margin-left: -10%;
}

.base_redes{
  top: 85%;
  left: 75%;
}

.base_redes img{
  width: 80%;
}

.redes{
   margin-left: 10%;
    margin-top: -23%;
}
.redes img{
  width: 14%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 20%;
}
.satelite2 img{
  width: 60%;
  z-index: -1;
}

.satelite1{
  margin-left: -20%;
  margin-top: 6%;
  z-index: 1;
}
.satelite1 img{
  width: 50%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}


}






@media only screen and (min-width: 1366px) and (min-height: 768px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 90%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 3%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 3%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}

@media only screen and (min-width: 1440px) and (min-height:900px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 90%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 6%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 6%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}

@media only screen and (min-width: 1600px) and (min-height: 900px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 6%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 6%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}

@media only screen and (min-width: 1680px) and (min-height: 1050px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 8%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 8%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}


@media only screen and (min-width: 1920px) and (min-height: 1080px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 7%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 7%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}

@media only screen and (min-width: 1920px) and (min-height: 1200px){
     .gif_marte{
  display: block;
  width: 70%;
  margin-left: -50%;
   
 }
 .gif_marte2{
   display: none;
 }
 .cerrarm{
z-index: 1;
  margin-top: 0px;
 }
 .urano{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano2{
    position: absolute;
    left: 50%;
    top: 15%;
    cursor: pointer;
}
.urano img{
  width: 100%;
}
.urano2 img{
  width: 100%;
}
video{
  margin-left: -55%;
  width: 80%;
  height: auto;
}
.cerrarv{
  margin-top: 250px;
  z-index: 1;
} 
 
 .gif_tierra{
  width: 100%;
    margin-left: -50%;
 }
 .gif_tierra2{
  display: none;
 }

 .gif{
    width: 90%;
    margin-left: -50%;
    
  }
  .gif2{
    display: none;
    
  }
  .cerrar{
    position: relative;
    margin-top: 75px;
   z-index: 1;
  }
.teazer{
    position: absolute;
    left: 0%;
    top: 25%;
    
}
.teazer img{
    width: 100%;
}


.teazer2{
     position: absolute;
    left: 0%;
    top: 25%;
}
.teazer2 img{
    width: 100%;
}


.luna{
   position: absolute;
   top: 50%;
   left: 2%;
}
.luna img{
  width: 100%;
}

.marte img{
  width: 100%;
}
.marte2 img{
  width: 100%;
  cursor: pointer;
}
.marte{
  top: 2%;
}
.marte2{
  top: 2%;
}



.base_ligas{
  left: 40%;
  top: 93%;

}

.base_ligas img{
  width: 100%;
 
}




.tel img{
  width: 20%;
  margin-left: -14%;
  margin-top: 4%;
}
.liga2 img{
  width: 7%;
  margin-top: 4.5%;
  margin-left: 0%;
}
.liga3 img{
  width: 15%;
  margin-top: 5%;
  margin-left: 3%;
}
.liga4 img{
  width: 8%;
  margin-top: 5%;
  margin-left: 2%;
}
.liga5 img{
  width: 10%;
  margin-top: 5%;
  margin-left: 1%;
}

.ligas{
  width: 100%;
  margin-top: -15%;
  margin-left: 20%;
}

.tablero img{
  width: 100%;
  margin-top:2%;
  margin-left: -3%;

}

.tierra{
  margin-top: 9%;
  left: 35%;
  z-index: -1;
}

.tierra img{
  width: 100%;
}
.tierra2{
  margin-top: 9%;
  left: 35%;
  z-index: -1;
}

.tierra2 img{
  width: 100%;
}

.base_redes{
  top: 80%;
  margin-left: 12%;

}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 35%;
    margin-top: -1%;
}
.redes img{
  width: 15%;
}

.saturno{
    position: absolute;
    margin-left: 60%;
    margin-top: 17%;
    z-index: 2;
}
.saturno2{
      position: absolute;
    margin-left: 60%;
    margin-top: 17%;
}

#contador{
  position: absolute;
  top: 20%;
  margin-left: -4%;
 font-size: 30pt;
}
.cerrar{
  margin-top: 50px;
}

.modal-body{
 margin-left: 25%;
  width:100%; 
  height:580px;
}

.modal-body iframe{
  width:100%; 
  height:580px;
  margin-left: -25%;
}

.base_redes{
  top: 89%;
  left: 61%;
}

.base_redes img{
  width: 100%;
}

.redes{
   margin-left: 10%;
    margin-top: -22%;
}
.redes img{
  width: 20%;
}



.vs{
  display: none;
}

.galaxia{
    position: absolute;
    top: 50%;
    left: 10%;
}

.satelite2{
  position: absolute;
  top: 40%;
  left: 30%;
}

.satelite1{
  position: absolute;
  margin-left: 50px;
  margin-top: 10%;
}


.marco_iz_sup img{
  position: absolute;
  top: 5%;
  left: 2%;
  width: 30%;
  position: fixed;
  
  
}

.marco_der-sup img{
  position: absolute;
  top: 5%;
  left: 73%;
  width: 25%;
  position: fixed;
 
  
}

.marco_iz_infer img{
  position: absolute;
  top: 77%;
  left: 1%;
  width: 15%;
  position: fixed;
  
  
}
.marco_der_infer img{
  position: absolute;
  top: 66%;
  left: 96%;
  width: 2.5%;
  position: fixed;
  
  
}

.satelite1{
  margin-left: -5%;
  z-index: 3;
}
}