/* BANNER */
.v_banners{
  display: inline-grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  grid-auto-flow: dense;
  gap: 10px;

  position: relative;
  left: 50%;
  transform: translate(-50%);

  margin-top: 5ex;
  border-radius: 15px;
}
.h_banners{
  display: grid;
  overflow-x: hidden;
}
.banner__title{
  text-align: center;
  padding: 10px 25px;
  font-size: 1.2em;
}
.vertical{
  width: 150px;
  height: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.horizontal{
  width: 300px;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px){
  .horizontal{
    width: 600px;
    height: 150px;
  }
}


/* BANNER STAR WARS */
.sw_banner{
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(20,32,116,1) 100%);
  background-image: url('../assets/bkg_space.jpg');
}
.sw_banner__ship, .sw_banner__text, .sw_banner__btn, .collection, .logo{
  position: absolute;
}
.sw_banner__ship:nth-child(1){
  width: 200px;
  top: -90px;
  left: -200px;
  animation: fly 8s ease infinite;
  animation-delay: 2.5s;
}
@keyframes fly {
  0%{top: -90px; left: -200px;}
  10%{top: 0px; left: -50px;}
  50%{top: 0px; left: -50px;}
  55%{top: 90px; left: 200px;}
  100%{top: 90px; left: 200px;}
}
.sw_banner__ship:nth-child(2){
  width: 100px;
  top: 10px;
  left: -100px;
  animation: fly2 8s ease infinite;
  animation-delay: 2s;
}
@keyframes fly2{
  0%{top: 10px; left: -100px;}
  10%{top: 85px; left: 0;}
  50%{top: 85px; left: 0;}
  54%{top: 150px; left: 180px;}
  100%{top: 150px; left: 180px;}
}
.sw_banner__text{
  width: 150px;
  top: 150px;
  left: 140px;
  padding: 0 10px;
  font-family: sans-serif;
  font-size: 13px;
  text-align: center;
  color: rgb(214,168,90);
  animation: toLeft .5s ease-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes toLeft {
  from{left: 150px}
  to{left: 0px}
}
.sw_banner__btn{
  top: 240px;
  left: -145px;
  padding: 7px 20px;
  border: 2px solid #fff;
  color: #88592b;
  background: linear-gradient(0deg, rgba(252,250,229,1) 0%, rgba(214,168,90,1) 100%);
  border-radius: 15px;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  animation: toRight .5s ease-out;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}
.sw_banner__btn:hover{
  background: linear-gradient(0deg, rgba(214,168,90,1) 0%, rgba(252,250,229,1) 100%);
}
@keyframes toRight {
  from{left: -145px}
  to{left: 13px}
}
.logo{
  width: 135px;
  top: 505px;
  left: 8px;
  z-index: 1;
  animation: downToUp .5s ease-out;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
@keyframes downToUp {
  0% {top: 505px;}
  100% {top: 305px;}
}
.collection{
  width: 120px;
  top: 495px;
  left: 15px;
  z-index: 2;
  animation: downToUp2 .5s ease-out;
  animation-delay: 2.3s;
  animation-fill-mode: forwards;
}
@keyframes downToUp2 {
  0% {top: 495px}
  100% {top: 360px}
}


/* PARIS MABEL BANNER */
.pm_banner{
  background-color: white;
}
.pm_banner__text, .pm_banner__btn, .pm_banner__model{
  position: absolute;
}
.pm_banner__text{
  font-family: sans-serif;
  color: black;
  font-weight: bold;
}
.pm_banner__text:nth-child(1){
  font-size: 4.4rem;
  top: 0;
  left: 5px;
}
.pm_banner__text:nth-child(2){
  font-size: 1.4rem;
  top: 70px;
  left: 5px;
}
.pm_banner__text:nth-child(3){
  font-size: 1.1rem;
  font-weight: lighter;
  top: 95px;
  left: 5px;
}
.pm_banner__btn{
  padding: 5px 25px;
  border: 1px solid black;
  border-radius: 10px;
  color: black;
  background-color: white;
  font-family: sans-serif;
  font-weight: lighter;
  font-size: .7em;
  top: 130px;
  left: 12px;
  z-index: 2;
  transition: all .5s ease;
}
.pm_banner__btn:hover{
  background-color: black;
  color: white;
}
.pm_banner__model:nth-of-type(1){
  top: 200px;
  left: 30px;
  animation: hide1 7s infinite ease;
}
@keyframes hide1 {
  0% {opacity: 1;}
  40% {opacity: 1;}
  50% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 1;}
}
.pm_banner__model:nth-of-type(2){
  top: 196px;
  left: -40px;
  width: 190px;
  opacity: 0;
  animation: hide2 7s infinite ease;
}
@keyframes hide2 {
  0% {opacity: 0;}
  40% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}


/* DESCUENTO VIDEOJUEGOS */
.vj_banner{
  background: linear-gradient(0deg, rgba(172,38,34,1) 0%, rgba(231,54,49,1) 100%);
}
.vj_banner__text, .vj_banner__btn, .vj_banner__img{
  position: absolute;
}
.vj_banner__text{
  font-family: sans-serif;
  font-size: .9rem;
  text-align: center;
  top: 40px;
}
.vj_banner__btn{
  top: 150px;
  left: 20px;
  font-family: sans-serif;
  font-size: .8rem;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 20px;
  border: 1px solid;
  border-radius: 10px;
  transition: all .5s ease;
}
.vj_banner__btn:hover{
  background-color: white;
  color: rgba(172,38,34);
}
.vj_banner__img:nth-of-type(1){
  top: 370px;
  left: 10px;
  width: 130px;
  z-index: 2;
}
.vj_banner__img:nth-of-type(2){
  top: 220px;
  left: 25px;
  width: 100px;
  z-index: 1;
  animation: UpDown 10s ease infinite;
}
@keyframes UpDown {
  0%{top: 220px;}
  50%{top: 220px;}
  60%{top: 380px;}
  90%{top: 380px;}
  100%{top: 220px;}
}

/* BIOAX */
.bioax{
  position: relative;
  padding: 55px .5rem;
  background-color: rgb(191, 241, 238);
}
.bioax p,
.bioax a{
  font-size: .8rem;
  font-family: sans-serif;
  color: #333;
  text-align: center;
}
.bioax p:nth-of-type(1){
  font-size: 3rem;
}
.bioax a{
  display: block;
  position: absolute;
  left: 15%;
  bottom: 25%;
  border: 1px solid #333;
  border-radius: 30px;
  padding: 5px 20px;
  transition: background-color .5s ease;
}
.bioax a:hover{
  background-color: #333;
  color: rgb(191,241,238);
}
.bioax-logo{
  position: relative;
  top: 20px;
}
.bioax-logo img{
  position: absolute;
}
.bioax-logo img:nth-of-type(1),
.bioax-logo img:nth-of-type(2),
.bioax-logo img:nth-of-type(3){
  width: 40px;
  top: 60px;
}
.bioax-logo img:nth-of-type(3){
  left: 90px;
}
.bioax-logo img:nth-of-type(2){
  width: 50px;
  top: 0px;
  left: 41px;
  transform: rotate(0deg);
  animation: rodar 10s linear infinite;
}
@keyframes rodar {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


/* MEMBRESIA PLUS */
.mp_banner{
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(33,103,160,1) 100%);
}
.mp_banner__card, .mp_banner__text, .mp_banner__btn, .mp_banner__img{
  position: absolute;
  font-family: sans-serif;
  font-size: .8rem;
  color: rgb(33,103,160);
}
.mp_banner__card{
  top: 15px;
  left: 20px;
  width: 200px;
  animation: ring 5s ease infinite;
}
@keyframes ring {
  0%{transform: rotate(0deg);}
  89%{transform: rotate(0deg);}
  90%{transform: rotate(3deg);}
  92%{transform: rotate(-3deg);}
  94%{transform: rotate(3deg);}
  96%{transform: rotate(-3deg);}
  98%{transform: rotate(3deg);}
  100%{transform: rotate(0deg);}
}
.mp_banner__text:nth-of-type(1){
  top: 25px;
  left: 240px;
  font-size: 1rem;
  color: #fff;
  font-weight: bold;
}
.mp_banner__text:nth-of-type(2){
  top: 50px;
  left: 240px;
}
.mp_banner__text:nth-of-type(3){
  top: 65px;
  left: 240px;
}
.mp_banner__text:nth-of-type(4){
  top: 80px;
  left: 240px;
  z-index: 2;
}
.mp_banner__btn{
  top: 105px;
  left: 240px;
  padding: 6px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-size: .75rem;
  font-weight: bold;
  color: #fff;
  background-color: #80bd33;
}
.mp_banner__btn:hover{
  background-color: #85c439;
}
.mp_banner__img{
  top: 30px;
  left: 440px;
  width: 180px;
  opacity: .3;
}
@media screen and (max-width: 500px){
  .mp_banner__card{
    top: 20px;
    width: 260px;
  }
  .mp_banner__text:nth-of-type(1){
    top: 190px;
    left: 20px;
  }
  .mp_banner__text:nth-of-type(2){
    top: 230px;
    left: 20px;
  }
  .mp_banner__text:nth-of-type(3){
    top: 245px;
    left: 20px;
  }
  .mp_banner__text:nth-of-type(4){
    top: 260px;
    left: 20px;
  }
  .mp_banner__btn{
    top: 305px;
    left: 20px;
  }
}


/* TORMENTA RADIO */
.tr_banner{
  background: radial-gradient(circle, rgba(108,121,75,1) 0%, rgba(59,69,33,1) 100%);
}
.tr_banner__img, .tr_banner__text, .tr_banner__btn{
  position: absolute;
}
.tr_banner__img:nth-of-type(1){
  top: 40px;
  left: 430px;
  width: 120px;
}
.tr_banner__img:nth-of-type(2){
  top: 37px;
  left: 80px;
  width: 90px;
}
.tr_banner__img:nth-of-type(3){
  top: 8px;
  left: 60px;
  width: 135px;
  animation: spin 10s linear infinite
}
@keyframes spin {
  from {transform: rotate(0);}
  to{transform: rotate(-360deg);}
}
.tr_banner__text{
  top: 35px;
  left: 50%;
  transform: translate(-50%);
  font-family: sans-serif;
  text-align: center;
  font-size: .8rem;
}
.tr_banner__btn{
  top: 85px;
  left: 410px;
  padding: 5px 20px;
  border-radius: 15px;
  font-family: sans-serif;
  font-size: .8rem;
  background-color: black;
}
.tr_banner__btn:hover{
  background-color: white;
  color: black;
}

@media screen and (max-width: 500px){
  .tr_banner__img:nth-of-type(1){
    top: 295px;
    left: 70px;
    width: 150px;
  }
  .tr_banner__img:nth-of-type(2){
    top: 38px;
    left: 100px;
    width: 100px;
  }
  .tr_banner__img:nth-of-type(3){
    top: 8px;
    left: 80px;
    width: 145px;
  }
  .tr_banner__text{
    top: 160px;
  }
  .tr_banner__btn{
    top: 270px;
    left: 70px;
  }
}