body {
  margin: 0;
  background: black;
}

@font-face {
  font-family: font1;
  src: url("../fonts/Montserrat/Montserrat-Black.ttf");
  font-weight: 400;
  font-weight: normal;
}
@font-face {
  font-family: font2;
  src: url("../fonts/Montserrat/Montserrat-Light.ttf");
  font-weight: 400;
  font-weight: normal;
}
@font-face {
  font-family: font3;
  src: url("../fonts/Montserrat/Montserrat-Regular.ttf");
  font-weight: 400;
  font-weight: normal;
}
#rotatePantalla {
  background: #160922;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  align-items: center;
}
.contentGif {
  max-width: 300px;
  margin: 0 auto;
}
#rotatePantalla img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes scroll {
  0% {
    top: 100%;
  }
  100% {
    top: -100%;
  }
}

.padreStar {
  transform: rotate(0);
}

.textoStarWar {
  position: absolute;
  width: 11em;
  height: 50em;
  bottom: 0;
  left: 50%;
  margin-left: -5.5em;
  font-size: 8vw;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(350px) rotateX(25deg);
  -webkit-transform: perspective(350px) rotateX(25deg);
}
.contenedorTexto {
  position: absolute;
  top: 100%;
  transition: all 500ms;
}
.addAnimation {
  animation: scroll 200s linear 0.2s;
}
.contenedorTexto p,
.contenedorTexto a {
  color: #ff6;
  font-family: "font3";
  text-align: center;
  font-size: 5vw;
}
.tableFinal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: 0;
  display: none;
  max-width: 31%;
  width: 100%;
  max-height: 215px;
  overflow-y: scroll;
}
table,
td,
th {
  border: 1px solid #00ffff;
  text-align: left;
  font-family: "font2";
}
th {
  font-size: 1.2vw;
  color: #1c2a55;
}
td {
  font-size: 1.2vw;
  color: #666666;
}
.titleFont {
  font-size: 1.5vw;
  font-family: "font1";
  margin-bottom: 14px;
  margin-top: 10px;
  color: #1c2a55;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}

th,
td {
  padding: 5px;
}

.contenedorLogo {
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 433px;
  display: none;
}

.contenedorLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}
.carrucelhombre,
.carrucelmujer {
  display: none;
}
.card_banner_personaje {
  max-width: 19vw;
  margin: 0 auto;
}
.card_banner_personaje img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrucelhombre,
.carrucelmujer {
  position: absolute;
  max-width: 45vw;
  top: 70%;
  left: 57%;
  transform: translate(-57%, -70%);
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "next";
  color: white !important;
  font-size: 6vw !important;
  font-weight: bold !important;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "prev";
  color: white !important;
  font-size: 6vw !important;
  font-weight: bold !important;
}

.swiper-container {
  overflow: hidden;
}

#noregistrado {
  display: none;
}

#noregistrado img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  position: relative;
}

.titulo {
  position: absolute;
  top: 20%;
  left: 5%;
}

.titulo h5 {
  color: white;
  font-size: 3.8vw;
  text-align: center;
  font-family: "font1";
}

@media (max-width: 1600) and (min-width: 1290px) {
  .tableFinal {
    max-width: 35%;
  }
}

@media (min-height: 500px) {
  .tableFinal {
    max-width: 27%;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  .tableFinal {
    max-width: 45%;
  }
}

@media (min-width: 1700px) {
  .tableFinal {
    max-width: 24%;
  }
  th {
    font-size: 0.8vw;
  }
  td {
    font-size: 1vw;
  }
  .titleFont {
    font-size: 1vw;
  }
}

@media (max-width: 635px) {
  .carrucelhombre,
  .carrucelmujer {
    position: absolute;
    max-width: 45vw;
    top: 65%;
    left: 57%;
    transform: translate(-57%, -70%);
  }
}