@charset "UTF-8"
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Bungee&family=Bungee+Hairline&family=Cormorant:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Open+Sans+Condensed:wght@300;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
    background: #111;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 19px;
}
img{
    height: auto;
    width: auto;
    max-width: 100%;
}
.reset{
    margin: 0;
    padding: 0;
}
.inlineBlock{
    display: inline-block;
    vertical-align: top;
}
.main{
    height: auto;
    width: 100vw;
}
.background{
    background: #111 url(/imagenes/business-6675703_1280.jpg) no-repeat center top;   
}
.background2{
    background: #222 url(/imagenes/fondo_ingreso.jpg) no-repeat center top; 
}
.background3{
    background: #222;
    background: -moz-linear-gradient(top,  #222 0%, #888 100%);
    background: -webkit-linear-gradient(top,  #222 0%,#888 100%);
    background: linear-gradient(to bottom,  #222 0%,#888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#888',GradientType=0 );
}
.background4{ 
    background: #111 url(/imagenes/capucha2.jpg) no-repeat  fixed center top;
}   
.logo2, .logo31{
    display: none;
}
.caja{
    height: auto;
    margin: auto;
    position: relative;
    max-width: 1400px;
    text-align: center;
}
.caja--fondo{
    width: 100%;
}
.caja--interna{
    padding: 3%;
}
.titulo{
    font-family: 'Roboto Slab', serif;
    font-size: 3.4em;
    letter-spacing: 1.2px;
    color:#F6F1E9;
}
.subtitulo{
    font-family: 'Bungee Hairline', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8em;
    margin: 3% auto;
    color:#454545;
}
.menu{
    font-family: 'Open Sans Condensed', sans-serif;
    display: inline;
    margin-bottom: 50%;
    list-style:none;
    text-transform:uppercase;
}
.menu__pagos{
    font-family: 'Lato', sans-serif;
    text-align: center;
    font-size: .9em;
    line-height: 1.5;
    display: inline;
    list-style: none;
}
.menu_2{
    font-family: 'Open Sans Condensed', sans-serif;
    display: inline;
    margin: 10%;
    list-style:none;
    text-transform:uppercase;
}
.caja_menu{
    margin: 5%;
}
.menu__item{
    vertical-align:top;
    text-align:center;
    width:14%;
    margin: 0% 2%;
    border: .1px solid #DC0000;
    border-radius: 20px;
    box-sizing:border-box;
}
.link{
    color: #F6F1E9;
    text-decoration: none;
}
.link:hover{color: #454545;
text-decoration: none;
}
.link--footer:hover{
    color:red;
}
.linkblanco{
    color:#fff;
    text-decoration: none;
    box-sizing:border-box;
    border-radius: 20px;
    font-size: 1.1em;
    letter-spacing: 1.1px;
    display:block;
    margin: 0;
    padding:2px 0;
    transition: color 0.15s linear 0.05s;
}
.linkblanco:hover{
    text-decoration:none;
    background:#222;
    color:red;
}
.linkblanco--2:hover{
    color:white;
}
.oculto{cursor: pointer;}

.ham{display:none;}
.intro{
    margin: 4% 0% 4% 2%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 3fr;
    line-height: 30px;
    vertical-align:middle;
}
.col{
    display: inline-block;
    box-sizing: border-box;
    margin: 10px 5px;
    width:48%;
    vertical-align: middle;
}
.col--2{
    width: 51%;
}
.intro2{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 49% 49%;
    grid-auto-flow: column;
    column-gap: 15px;
    margin: 0 30px 30px 30px;
}
.reglas, .ranking{
    background: rgba(26,23,23,23);
    border-radius: 30px;
    display: block;
    box-sizing: border-box;
    padding:5%;
    margin: 0 10% 5%;
    text-align: left;
    font-family: 'Roboto',sans-serif;
    font-weight: 300;
    line-height: 28px;
    list-style-position: inside;
}
.info{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align:left;
    line-height: 30px;
    padding: 2% 5% 2%;
}
.info--1{
    text-align: center;
    border-top: none;
}
.info--2{
    text-align: left;
}
.info--3{
    margin-bottom: 0;
    line-height: 28px;
    border-bottom: 1px solid #888;
}
h3{
    font-family: 'Roboto Slab', sans-serif;
    line-height: 1.6;
}
.titulo_info{
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.8em;
    text-align: left;
    color:#AD8E70;
    text-shadow: .2px .3px .3px #000;
}
.titulo_seccion{
    font-family: 'Roboto Slab', sans-serif;
    font-size: 2.4em;
    text-align: left;
    align-content:flex-start;
    color: whitesmoke;
    text-shadow: .2px .3px .3px #000;
}
.lista{
    text-align: left;
    list-style: square;
}
.video{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    object-fit: contain;
    padding: 3% 15% 3% 15%;
}
.caja_media{
    width: 28%;
    padding: auto;
    margin: auto auto 7% auto;
    position: relative;
    text-align: center;
    display: block;
    cursor: pointer
}
.texto_pedidos{
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #888;
    border-radius: 5px;
    color: white;
    font-size: 1.5em;
    padding: 1% 0% 1%;
    cursor: pointer;
}
.foto20 {
height: 98%;
width: 100%;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
display: inline-block;
}
.foto20 .mascara{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.fotoH img{
transition: all 0.2s linear;
}
.fotoH:hover img {
transform: scale(1.03);/*Damos un ligero zoom a la imagen*/
}
.foto20 p{
font-family: 'Roboto Slab',serif;
font-size: 2em;
font-weight: 500;
text-transform:uppercase;
position: relative;
color: #fff;
padding: 0% 2% 0%;
text-align: center
}
.fotoH p{
transform:translateY(450%);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.fotoH:hover p{
opacity: 100;
transform: translateY(450%);/*Regresamos a las posiciones originales*/
}
.fotoH:hover p {
transition-delay: 0.1s;
}
.conteo{
    font-family: 'Roboto Slab', serif;
    font-size: 2em;
    font-weight: 500;
    color: #444;
    text-shadow: 1px 1px 1px #fff;
}
.conteo:first-child{
    margin-top: 0%;
}
.numero{
    font-weight: 300;
    color: red;
}
.cifra{
    font-family: 'Roboto Slab', serif;
    font-size: 2em;
    font-weight: 500;
    color:darkgray;
    margin: 5%;
}
.cifra_texto{
    font-family: 'Bungee Hairline', sans-serif;
    font-size: .8em;
    color:floralwhite;
}
#modal{
    background: rgba(0,0,0,.75);
    z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
}
#popup{
    max-width: 65%;
    margin: 1%;
    display: block;
}
#close{
    display: flex;
    justify-content: flex-end;
    padding: 0 0 0;
    position: relative;
    border: none;
}
#close svg{
    padding: 2px;
    color:#777;
}
#close svg:hover{
    color: #00F5FF;
}
#boton{
    width: 280px;
    height: 50px;
    border-radius: 20px;
    background: transparent;
    border: 2px solid white;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    margin: 5% 0% 5% 0%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: .4s ease all;
}
#boton::after{
    content: "";
    width: 1px;
    height: 1px;
    background: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transition: .2s ease-in-out all;
    border-radius: 100px;
    transform-origin: center;
}
#boton span{
    position: relative;
    z-index: 2;
    transition: .4s ease all;
}
#boton:hover::after{
    transform: scale(300);
    background: #DC0000;
}
.advertencia svg{
    color:#FFED00;
}
.contacto__input{
    display: block;
    font-size: 1em;
    font-family: 'Open Sans Condensed', sans-serif;
    height: 20px;
    margin: 10px auto;
    width: 15%;
    border: none;    
    border-radius: 5px;
    padding: 10px;
}
.contacto__entrar{
    background: #000;
    color: #fff;
    display: block; 
    border: none;
    border-radius: 8px;
    font-size: .8em;
    padding: 8px;
    margin: 10px auto 20px auto;
    width: 10%;
}
.imagen{
    opacity: 1;
    transition-duration: 3s;
    transition-timing-function: ease-in;
    transition-delay: .2s;
}
.imagen:hover{filter: opacity(0);
}

.imagen2:hover {
    transform: rotateY(720deg);
    transition: .5s all;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
}
.caja__redes{
    padding: 50px 0;
    position:relative;
    text-align: center;
}
.logo__redes{
    margin: auto;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.social ul li
{
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 10px 10px;
}
.social a{
    color: #888;
    display: block;
    line-height: 32px;
    text-align: center;
    font-size: 2.3em;
}
.social:link{
    text-decoration: none;
}
.social a:hover{
    color:#DC0000;
}

.fondoimg{
    background: #fff;
}

.glitch {
  color: #555;
  animation: fadeWhite 4s forwards;
  animation-delay: 2s;
  position: relative;
}
.glitch:after {
  position: absolute;
  left: 1.5px;
  top: 0.5px;
  clip: rect(0, 900px, 0, 0);
  color: #555;
  animation: glitch 2s infinite alternate-reverse;
  animation-delay: 4s;
}
.glitch:before {
  content: "EL JUEGO NEGRO";
  position: absolute;
  left: -1.5px;
  top: -0.5px;
  clip: rect(0, 900px, 0, 0);
  color: #555;
  animation: glitch 2s infinite alternate-reverse;
  animation-delay: 2s;
}

@keyframes fadeWhite {
  100% {
    color: #454545;
  }
}
@keyframes glitch {
  0% {
    clip: rect(33px, 9999px, 67px, 0);
  }
  5% {
    clip: rect(40px, 9999px, 64px, 0);
  }
  10% {
    clip: rect(15px, 9999px, 19px, 0);
  }
  15% {
    clip: rect(70px, 9999px, 92px, 0);
  }
  20% {
    clip: rect(62px, 9999px, 92px, 0);
  }
  25% {
    clip: rect(17px, 9999px, 57px, 0);
  }
  30% {
    clip: rect(55px, 9999px, 58px, 0);
  }
  35% {
    clip: rect(13px, 9999px, 51px, 0);
  }
  40% {
    clip: rect(88px, 9999px, 70px, 0);
  }
  45% {
    clip: rect(20px, 9999px, 67px, 0);
  }
  50% {
    clip: rect(71px, 9999px, 65px, 0);
  }
  55% {
    clip: rect(34px, 9999px, 52px, 0);
  }
  60% {
    clip: rect(99px, 9999px, 53px, 0);
  }
  65% {
    clip: rect(81px, 9999px, 58px, 0);
  }
  70% {
    clip: rect(79px, 9999px, 100px, 0);
  }
  75% {
    clip: rect(79px, 9999px, 50px, 0);
  }
  80% {
    clip: rect(58px, 9999px, 46px, 0);
  }
  85% {
    clip: rect(98px, 9999px, 64px, 0);
  }
  90% {
    clip: rect(25px, 9999px, 43px, 0);
  }
  95% {
    clip: rect(53px, 9999px, 34px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 18px, 0);
  }
}


.nav{
    position: relative;
    text-align: center;
    text-decoration: none;
    padding: 2%;
}
.nav--item{
    width: 180px;
    height: auto;
    margin-bottom: 20px;
    background: transparent;
    font-size: 1.1rem;
    color: #999;
    text-decoration: none;
}
.footer{
    background: url(/imagenes/footer_1280.jpg);
    box-sizing:border-box;
    color:#FFF;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: .8em;
    letter-spacing: .6px;
    text-align: center;
    padding: 1%;
    width: 100%;
}
.footer--2{
    background: none;
}

@media screen and (max-width: 1100px){
    .background{
        background: #000;}
    .logo, .logo3{display: none;
        }
    .logo2, .logo31{
        display: block;
    }
    .intro, .intro2{
        grid-template-columns: minmax(300px, 500px);
        justify-content: center;
    }
    .col{
    margin: 5px;
    width: 95%;
    }
    .menu_2{
        display: none;
    }
}
@media screen and (max-width: 768px){
    .menu{
        display:none;
        position:relative;
        width:100%;
        margin: 2% 0%;
        z-index:20;
    }
    .menu_2{
        display:block;
    }
    .titulo{
    font-size: 2.6em;
    }
    .video{
    padding: 5% 5%;
    }
    .ham{
        display:inline-block;
        vertical-align:top;
        width:30px;
    }
    .ham__linea{
        border:none;
        border-bottom:5px solid #ff0000;
        margin-bottom:5px;
    }
    .menu__item{
        display:block;
        width:100%;
        background: #000;
        margin:auto;
    }
    .caja_media{
    width: 38%;
    }

    .conteo{
        font-size: 1.5em;
    }
    #popup{
        max-width: 100%;
    }
    .contacto__input{
    width: 50%;
 }
    .contacto__entrar{
    width: 30%;
}
    .fotoH p{
transform:translateY(380%);
}
.fotoH:hover p{
transform: translateY(380%);
}
    }