@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;700;900&display=swap');
.montserrat{
  font-family: 'Montserrat', sans-serif;
}
h1{
  font-family:'montserrat';
}
h2{
  font-family:'montserrat';
}
p{
    font-family:'montserrat';
}

.lazy .slick-slide .img {
    height: 100vh!important;
    width: 100%!important;
 
}
.slick-slide img .img {
  height: auto!important;
  width: auto!important;

}
.prev, .next{
  margin-top: 50%;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-current {
  opacity: 1;
}
.bg-transparent{
    background-color: #cccccc00!important;
}
.slick-dots{
  position: absolute;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    content: '•';
    text-align: center;
    border:solid 1px white;
    border-radius: 50%;
    z-index: 20;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  width: 15px;
  margin-top: -64px;
  height: 15px;
  padding: 5px;
  position: absolute;
  cursor: pointer;
  color: transparent;
  border: 0;
  z-index: 10;
  outline: none;
  background: transparent;}
.slick-dots li.slick-active button:before
{
  position: absolute;
    background-color: #ed3237;
    color: #ed3237;
}
/* The Modal (background) */
.modal{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.closeModal:hover,
.closeModal:focus {
text-decoration: none;
cursor: pointer;
}

/*fondo*/
@media only screen and (max-width:768px) {
  #btn-cerrar{
    top: 85vh;
  }
.backgroundPiel{
  background-image: url('../img/fondo.png');
  background-size: cover;
  height: 100vh;
  }
  .fondoBienvenido{
    background-image: url('../img/bienvenidoMobile.png');
  }
  .ganadores{
    background-image: url('../img/ganadores.png'); 
    background-size: 100%; 
    height:30px;
  }
  .bg-textura{
    background-image: url('../img/fondo.png'); 
    background-size:cover;
    height: 100%;
  }
  .modalBienvenido {
    background: rgba(0,0,0,0.8);
    background-image: url("../img/fondoBienvenida.png");
    animation: modal 0s 0s forwards;
    visibility: visible;
    opacity: 0;
    height:120vh;
    z-index: 999999;
    background-size: cover;
  }
}
@media only screen and (min-width:540px)and (max-width:640px) {
  #btn-cerrar{
    top: 85vh;
  }
  .fondoBienvenido{
    background-image: url('../img/bienvenidoMobile.png');
  }
  .ganadores{
    background-image: url('../img/ganadores.png'); 
    background-size: 100%; 
    height:45px;
  } 
  .modalBienvenido {
    background: rgba(0,0,0,0.8);
    background-image: url("../img/fondoBienvenida.png");
    animation: modal 0s 0s forwards;
    visibility: visible;
    opacity: 0;
    height:120vh;
    z-index: 999999;
    background-size: cover;
  }
}
@media only screen and (min-width:640px)and (max-width:768px) {
  .fondoBienvenido{
    background-image: url('../img/bienvenidoMobile.png');
  }
  .ganadores{
    background-image: url('../img/ganadores2.png'); 
    background-size: 100%; 
    padding-top: 5px;
    height:50px;
  } 
  .modalBienvenido {
    background: rgba(0,0,0,0.8);
    background-image: url("../img/fondoBienvenida.png");
    animation: modal 0s 0s forwards;
    visibility: visible;
    opacity: 0;
    height:120vh;
    z-index: 999999;
    background-size: cover;
  }
}

@media only screen and (min-width:768px) {
  #btn-cerrar{
    top: 85vh;
  }
  .backgroundPiel{
    background-image: url('../img/fondo1.png');
    background-size: cover;
    height: 100vh;
    }
    .ganadores{
      background-image: url('../img/ganadores.png'); 
      background-size: 100%; 
      height:42px!important;
    }
    .modalBienvenido {
      background: rgba(0,0,0,0.8);
      background-image: url("../img/fondoBienvenida.png");
      animation: modal 0s 0s forwards;
      visibility: visible;
      opacity: 0;
      height:120vh;
      z-index: 999999;
      background-size: cover;
    }
    .fondoBienvenido{
      background-image: url('../img/fondo_juegos.png');
    }
  }
  @media only screen and (min-width:992px) {
    .parent:hover .child,
    .parent:focus .child {
        
        transform: scale(1.1);
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s
    }
    .parent{
        overflow: hidden;
    }
    .juego2:hover{
      transform: translate(-20px, -10px);
    }
    .juego2logo:hover{
      transform: translate(0px,-10px);
    }
    .juego2a:hover{
      transform: translate(10px, -20px);
    }
    .modalBienvenido {
      background: rgba(0,0,0,0.8);
      background-image: url("../img/fondoBienvenida.png");
      animation: modal 0s 0s forwards;
      visibility: visible;
      opacity: 0;
      height:110vh;
      z-index: 999999;
      background-size: cover;
    }
    .fondoBienvenido{
      background-image: url('../img/fondo_juegos.png');

    }
  }
  @media only screen and (min-width:1024px)and (max-width:1150px) {
    #btn-cerrar{
      top: 84vh;
    }
    .ganadores{
      background-image: url('../img/fondoGanadores.png'); 
      background-size: 100%; 
      padding-top: -5px;
      height:50px;
    } 
  }
  @media only screen and (min-width:1150px) {
    #btn-cerrar{
      top: 90vh;
    }
  }
  @media only screen and (min-width:1380px) {
    .fondoBienvenido{
      background-image: url('../img/fondo_juegos.png');
    }
    #btn-cerrar{
      top: 90vh;
    }
    .ganadores{
      background-image: url('../img/ganadores.png'); 
      background-size: 100%; 
      height:70px!important;
    }
    .lineaLimite {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-height: 18px!important;
      -webkit-box-orient: vertical;
      font-size: 20px!important; 
      text-align: left; 
      padding-left: 4px;
    }
  }
  
  /*SCROLL*/
  .scroll ::-webkit-scrollbar {
    width: 5px!important;
  }
/* Handle */
.scroll ::-webkit-scrollbar-thumb {
    background: #ff8383!important; 
}

/*LIMITE DE LINEA*/
.cajaTexto {
  width: 85%;
  margin: 0 0 .3em 0;
  overflow: hidden;
}
.lineaLimite {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-height: 18px!important;
  -webkit-box-orient: vertical;
  font-size: 12px!important; 
  text-align: left; 
  padding-left: 4px;
}

.deco {
  width: 100%;
  height: 100%;
  position: absolute;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  0%   {background-image: url("../img/fondoBienvenida.png");left:0px;top:-150px; position: absolute;}
  100% {left:0px; top:0px; position: absolute;}
}

.contenido {
margin: auto;
width: 40%;
height: 40%;
border-radius: 10px;
}

#cerrar {
display: none;
}

#cerrar + label {
color: #fff;
font-size: 25px;
z-index: 999999999;

animation: modal 1s 1s forwards;
visibility: hidden;
opacity: 0;
}

#cerrar:checked + label, #cerrar:checked ~ .modalBienvenido {
display: none;
}

@keyframes modal {
100% {
  visibility: visible;
  opacity: 1;
}
}
@keyframes modalBienvenido1 {
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}
  50%  {left:200px; top:200px;}
  75%  {left:0px; top:200px;}
  100% {
  visibility: visible;
      opacity: 1;
      left:0px; 
      top:0px;
}
}
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #ff3838; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.texto-slide{
    width: 600px !important;
}

@media screen and (max-width:767px){
  .img__game{
    width:75%!important
  }
}

.prevJuegos{
  position: absolute;
  bottom: 50px;
  transition:all 300ms;
  left: 30px;
  --tw-bg-opacity: 1;
  color: rgba(255, 0, 34, var(--tw-bg-opacity));
  transition:all 300ms;

}

.nextJuegos{
  position: absolute;
  bottom: 50px;
  right: 30px;
  --tw-bg-opacity: 1;
  color: rgba(255, 0, 34, var(--tw-bg-opacity));
  transition:all 300ms;


}

@media screen and (min-width:1000px){
  .prevJuegos , .nextJuegos{
    top:175px; 
    color: rgba(255, 0, 34, var(--tw-bg-opacity));
    bottom:0;

  }
  .prevJuegos{
    left:-50px;
  }
  .nextJuegos{
    right:-50px;
  }
}

@media screen and (max-width:999px){
  .prevJuegos{
    left:0px;
  }
  .nextJuegos{
    right:0px;
  }
}

@media screen and (min-width:700px){
  .prevJuegos , .nextJuegos{
    bottom:50px
  }
  
}

.game{
  width:100%
}

@media screen and (max-width:701px){
  .prevJuegos , .nextJuegos{
    bottom:55px 
  }
  
  .game{
    width:75%!important
  }
  .prevJuegos{
    left:30px;
  }
  .nextJuegos{
    right:30px;
  }
}

@media screen and (max-width:637px){
  .prevJuegos , .nextJuegos{
    bottom:60px 
  }
}

@media screen and (max-width:767px){
  .juego2{
    margin-top:25px
  }
}

@media screen and (min-width:1536px){
  .shared{
    bottom:-75px
  }
}