body, html{
  width: 100%;
  /*height:100%;*/
  margin:0;
  background-color: black;
}

#wrapper{
  background-color: black;
    width: 100vw;
    height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}

#wrapper .cajaVideo{
  position: absolute;
  width:100%;
}

#wrapper .cajaVideoInfo1{
  width:100%;
}


#wrapper .cajaEstrellas{
  position: relative;
  top: -0.3em;
}

.borderWhite{
    border:.1em solid white;
}

.accordion{
  background: transparent;
}

.item{
  background-color: transparent !important; 
}

.accordion-button:not(.collapsed){
  background-color: transparent !important; 
  color: black !important; 
}

.accordion-button:focus{
  border: .1em solid white !important;
  box-shadow: none !important;
}

h2.titulo{
  background-color: transparent;
}

h2.titulo button{
  background: transparent;
  color: black;
  font-weight: bold;
  font-size: .7em;
}

p.texto{
  background-color: transparent;

}

.caja{
  width: 5%;
  height: 2%;
  position: absolute
}

#cajita1,#cajita2,#cajita3,#cajita4,#cajita5,#cajita6{
  top: 16%;
}

#cajita1{
  left: 23.5%;
  width: 6.3%;
  height: 4.4%;
}

#cajita2{
  left: 30.5%;
  width: 5.8%;
  height: 4.4%;
}

#cajita3{
  left: 37%;
  width: 5.8%;
  height: 4.4%;
}

#cajita4{
  right: 37.5%;
  width: 5.6%;
  height: 4.4%;
}

#cajita5{
  right: 31%;
  width: 5.6%;
  height: 4.4%;
}

#cajita6{
  right: 24%;
  width: 6%;
  height: 4.4%;
}

#cajita7,#cajita8,#cajita9,#cajita10,#cajita11,#cajita12{
  top: 24.5%;
}

#cajita7{
  left: 24%;
  width: 6%;
  height: 4.4%;
}

#cajita8{
  left: 30.5%;
  width: 5.8%;
  height: 4.4%;
}

#cajita9{
  left: 37%;
  width: 5.8%;
  height: 4.4%;
}

#cajita10{
  right: 37.8%;
  width: 5.6%;
  height: 4.4%;
}

#cajita11{
  right: 31.2%;
  width: 5.6%;
  height: 4.4%;
}

#cajita12{
  right: 24.5%;
  width: 6%;
  height: 4.4%;
}

#cajita13,#cajita14,#cajita15,#cajita16,#cajita17,#cajita18{
  top: 34%;
}

#cajita13{
  left: 24.3%;
  width: 6%;
  height: 4%;
}

#cajita14{
  left: 31%;
  width: 5.6%;
  height: 4%;
}

#cajita15{
  left: 37.5%;
  width: 5.5%;
  height: 4%;
}

#cajita16{
  right: 37.8%;
  width: 5.6%;
  height: 4%;
}

#cajita17{
  right: 31.2%;
  width: 5.6%;
  height: 4%;
}

#cajita18{
  right: 24.5%;
  width: 6%;
  height: 4%;
}

#cajita19,#cajita20,#cajita21,#cajita22,#cajita23,#cajita24{
  top: 42.8%;
}

#cajita19{
  left: 24.7%;
  width: 5.9%;
  height: 3.8%;
}

#cajita20{
  left: 31.2%;
  width: 5.6%;
  height: 4%;
}

#cajita21{
  left: 37.5%;
  width: 5.5%;
  height: 4%;
}

#cajita22{
  right: 37.8%;
  width: 5.6%;
  height: 4%;
}

#cajita23{
  right: 31.4%;
  width: 5.6%;
  height: 4%;
}

#cajita24{
  right: 24.8%;
  width: 6%;
  height: 4%;
}

#cajita25,#cajita26,#cajita27,#cajita28,#cajita29,#cajita30,#cajita31,#cajita32{
  top: 51%;
}

#cajita25{
  left: 25.2%;
  width: 5.6%;
  height: 4%;
}

#cajita26{
  left: 31.2%;
  width: 5.6%;
  height: 4%;
}

#cajita27{
  left: 37.8%;
  width: 5.5%;
  height: 4%;
}

#cajita28{
  left: 44.2%;
  width: 5.3%;
  height: 4%;
}

#cajita29{
  right: 44.4%;
  width: 5.3%;
  height: 4%;
}

#cajita30{
  right: 38.1%;
  width: 5.6%;
  height: 4%;
}

#cajita31{
  right: 31.8%;
  width: 5.6%;
  height: 4%;
}

#cajita32{
  right: 25.3%;
  width: 6%;
  height: 4%;
}

.pequenio{
  padding: 0.15rem !important;
}

.mensajeHorizontal{
  width: 100%;
  height: 100vh;
  background-color: black;
  background-image: url("Imgs/aviso_entrada_web.png"); 
  background-position: center; 
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position:relative;
  z-index:41;
}

.mensajeHorizontal p{
  width: 50%;
  background-color: white;
  font-size: 1em;
  text-align: center;
  color: black;
  font-weight: bold;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.objeto1{
  background-image: url("Imgs/estrella.png");
  background-position: center;
  background-size:30% 100%;
  background-repeat:no-repeat;
  background-color:transparent;
  animation-name: estrellitaAnimacion1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.objeto{
  background-image: url("Imgs/estrella.png");
  background-position: center;
  background-size:30% 100%;
  background-repeat:no-repeat;
  background-color:transparent;
  animation-name: estrellitaAnimacion;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  width: 5%; height: 8%;
  transform: translate(0%,0%);
  cursor: pointer;
}

.imagenEstrella{
  cursor: pointer;
  background-image: url("Imgs/icono sobre.png");
  background-position: center;
  background-size:30% 100%;
  background-repeat:no-repeat;
  background-color:transparent;
  animation-name: estrellitaAnimacion2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.objeto2{
  background-image: url("Imgs/estrella.png");
  background-position: center;
  background-size:60% 100%;
  background-repeat:no-repeat;
  background-color:transparent;
  animation-name: estrellitaAnimacion3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  width: 2%; height: 4%;
  transform: translate(0%,0%);
  cursor: pointer;
}


@keyframes estrellitaAnimacion3 {
  0%{
    background-size:0% 0%;
  }

  50%{
    background-size:40% 55%;
  }

  100%{
    background-size:0% 0%;
  }
}

@keyframes estrellitaAnimacion2 {
  0%{
    background-size:0% 0%;
  }

  50%{
    background-size:50% 75%;
  }

  100%{
    background-size:0% 0%;
  }
}

@keyframes estrellitaAnimacion {
  0%{
    background-size:0% 0%;
  }

  50%{
    background-size:20% 20%;
  }

  100%{
    background-size:0% 0%;
  }
}

@keyframes estrellitaAnimacion1 {
  0%{
    background-size:0% 0%;
  }

  50%{
    background-size:10% 10%;
  }

  100%{
    background-size:0% 0%;
  }
}

#objeto1{
  position: absolute; top: 43%; left: 11.5%;
  max-width: 300px;
}

#objeto2{
  position: absolute; top: 50%; right: 15%;
}

#objeto3{
  position: absolute;bottom: 11%; left: 49.5%;
}

#objeto3-1{
  position: absolute;bottom: 4%; left: 56.5%;
}

#objeto4{
  position: absolute;bottom: 7%; left: 51%;
}

#objeto5{
  position: absolute;bottom: 13.5%; left: 45%;
}

#objeto6{
  position: absolute;bottom: 18.5%; left: 46.5%;
}

#objeto7{
  position: absolute;bottom: 29.5%; left: 37.4%;
}

#objeto8{
  position: absolute;bottom: 17.5%; left: 54.5%;
}

#objeto9{
  position: absolute;bottom: 14.5%; left: 47.5%;
}

#objeto10{
  position: absolute;bottom: 15%; left: 42%;
}

#objeto11{
  position: absolute;bottom: 12%; left: 56%;
}

#objeto12{
  position: absolute;bottom: 9%; left: 43%;
}

#objeto13{
  position: absolute;bottom: 26%; left: 42%;
}

#objeto14{
  position: absolute;bottom: 7%; left: 46.5%;
}

#objeto15{
  position: absolute;bottom: 4%; left: 39%;
}

#objeto16{
  position: absolute;bottom: 16%; left: 52%;
}

#objeto17{
  position: absolute;top:43%; left: 47.3%;
}

#objeto18{
  position: absolute;bottom:2%; left: 24%;
  width: 5%; height: 10%;
  cursor: pointer;
}

#objeto19{
  position: absolute;bottom:24%; right: 15.7%;
  width: 5%; height: 10%;
  cursor: pointer;
}

#objeto19-1{
  position: absolute;bottom:27%; right: 27%;
  width: 5%; height: 10%;
  cursor: pointer;
}

#objeto19-2{
  position: absolute;bottom:26%; right: 32.3%;
  width: 5%; height: 10%;
  cursor: pointer;
}

#objeto20{
  position: absolute;bottom:38%; left: 15%;
  width: 10%; height: 20%;

  cursor: pointer;
}

#objeto21{
  position: absolute;bottom:13.5%; right: 26.5%;
  width: 5%; height: 10%;
  cursor: pointer;
}

#objeto22{
  position: absolute;bottom:34%; left: 25.5%;
  width: 5%; height: 8%;
  cursor: pointer;
}

#objeto22-1{
  position: absolute;bottom:26.5%; left: 1%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto23{
  position: absolute;bottom:45.5%; left: 16%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto23-1{
  position: absolute;bottom:40%; left: 36%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto24{
  position: absolute;bottom:8.5%; right: 19.5%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto25{
  position: absolute;bottom:46.5%; right: 24%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto26{
  position: absolute;bottom:13%; left: 19%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto27{
  position: absolute;bottom:0%; left: 31.5%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto28{
  position: absolute;bottom:16%; left: 47.3%;
  width: 5%; height: 12%;
  cursor: pointer;
}

#objeto29{
  position: absolute;bottom:12%; right: 42.5%;
  width: 5%; height: 12%;
  cursor: pointer;
}

div.aparecerDespues{
  height: 30vh;
  width: 79%;
  position: absolute;
  overflow: scroll;
  overflow-x: hidden;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}


#overL {
  position: absolute; top: 7%; left: 10%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  cursor: pointer;
  background-color: white;
  padding: 0em .2em;
  z-index: 49;
}

#back {
  position: absolute; top: 7%; left: 10%;
  width: 1.8%; height: 5%;
  transform: translate(0%,0%);
  cursor: pointer;
  background-color: white;
  padding: 0em .2em;
  z-index: 49;
}

.musicControl {
  position: absolute; top: 7%; left: 13%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  cursor: pointer;
  background-color: white;
  padding: 0em .2em;
  z-index: 49;
}

.musicIconIndex {
  position: absolute; top: 7%; left: 10%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  cursor: pointer;
  background-color: white;
  padding: 0em .2em;
  z-index: 49;
}

#overP {
  position: absolute; top: 7%; left: 13.5%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}


#overJ{
  position: absolute; top: 7%; left: 13.5%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  cursor: pointer;
  cursor: pointer;
  background-color: white;
  padding: 0em .2em;
  z-index: 49;
}

  #overH {
  position: absolute; top: 7%; left: 7%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}
    #overS {
  position: absolute; top: 90%; left: 93%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}
#background-video  {
  width: 100%;
  height: 100%;
  object-fit:contain; 
  z-index: -1;
}
#overB {
  position: absolute; top: 54.5%; left: 31.5%;
  width: 4%; height: 8%;
  z-index: 49;
}
#overC {
  position: absolute; top: 54.5%; left: 48%;
  width:4%; height: 8%;
  z-index: 49;
}
#overD {
  position: absolute; top: 54.5%; left: 63.5%;
  width: 4%; height: 8%;
  z-index: 49;
}
#overK {
  position: absolute; top: 61%; left: 47.2%;
  width: 5%; height: 9%;
  z-index: 39;
}
#overT {
  position: absolute; top: 95%; left: 45%;
  width: 5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}
#overU {
  position: absolute; top: 90%; left: 90%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}
    #overW {
  position: absolute; top: 90%; left: 87%;
  width: 2.5%; height: 5%;
  transform: translate(0%,0%);
  z-index: 49;
}
    #overZ {
  position: absolute; top: 65%; left: 33.33%;
  width: 35%; height: 35%;
  transform: translate(0%,0%);
  z-index: 49;
}
#overX {
  position: absolute; top: 5%; left: 15%;
  width: 70%;
  transform: translate(0%,0%);
  opacity: 1;
}
    #caja1{
  position: absolute; top: 13.5%; left: 23.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
    #caja2{
  position: absolute; top: 13.5%; left: 30.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
    #caja3{
  position: absolute; top: 13.5%; left: 37%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja4{
  position: absolute; top: 13.5%; left: 56.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja5{
  position: absolute; top: 13.5%; left: 63.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja6{
  position: absolute; top: 13.5%; left: 70%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja7{
  position: absolute; top: 22.5%; left: 23.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja8{
  position: absolute; top: 22.5%; left: 30.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja9{
  position: absolute; top: 22.5%; left: 37%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja10{
  position: absolute; top: 22.5%; left: 56.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja11{
  position: absolute; top: 22.5%; left: 63%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja12{
  position: absolute; top: 22.5%; left: 69.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja13{
  position: absolute; top: 32.5%; left: 24.25%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja14{
  position: absolute; top: 32.5%; left: 30.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja15{
  position: absolute; top: 32.5%; left: 37%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja16{
  position: absolute; top: 32.5%; left:56.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja17{
  position: absolute; top: 32.5%; left: 63%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja18{
  position: absolute; top: 32.5%; left: 69.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja19{
  position: absolute; top: 42%; left: 24.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja20{
  position: absolute; top: 42%; left: 30.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja21{
  position: absolute; top: 42%; left: 37%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja22{
  position: absolute; top: 42%; left: 56.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja23{
  position: absolute; top: 42%; left: 62.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja24{
  position: absolute; top: 42%; left: 69%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja25{
  position: absolute; top: 51%; left: 24.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja26{
  position: absolute; top: 51%; left: 31%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja27{
  position: absolute; top: 51%; left: 37.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja28{
  position: absolute; top: 51%; left: 43.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja29{
  position: absolute; top: 51%; left: 50%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja30{
  position: absolute; top: 51%; left: 56.5%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja31{
  position: absolute; top: 51%; left: 62.75%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#caja32{
  position: absolute; top: 51%; left: 69%;
  width: 6%; height: 4%;
  transform: translate(0%,0%);
}
#invisible{
  display:none;
  opacity: 0;
}