*{
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden !important;
}

/*===== FONT =====*/

@font-face {
    font-family: brocha!important;
    src: url(../assets/font/brocha-black.otf) !important;
}

/*===== FONT =====*/

body{
    background-image: url(./img/bg.png);
    background-size: cover;
    height: auto;
    overflow-x: hidden !important;
}

.navbar-toggler{
    border-radius: 4vh !important;
    background-color: #ffffff;
    border-radius: 60px;
    padding: 0.5em 0.6em;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
#logo{
    width: 42vh !important;
    height: auto;
}
.button-play{
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-play img{
    width: 35vh !important;
    height: auto;
    margin-top: 1vh;

}
.sp-video{
    margin-top: 2vh;
    width: 45vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.sp-video img{
    width: 45vh;
}
.skins{
    margin-top: 2vh;
    width: 45vh;

}
.slider{
    width: 500px;
    height: 500px;
    border-radius: 2px;
    overflow: hidden;
}
.slides{
    width: 500%;
    height: 500px;
    display: flex;
    margin-top: 17vh;

}
.slides input{
    display: none;
}
.slide{
    width: 20%;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;

}
.slide img{
    width: 310px;
    height: auto;
    margin-top: -15vh;
    
}
.navigation-manual{
    position: absolute;
    width: 200px;
    margin-top: 41.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10vh;
    right: auto;
    
}
.manual-btn1{
    border: 2px solid #efc44c;
    background: #efc44c;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
    
    
}
.manual-btn1:not(:last-child){
    margin-right: 20px;

}
.manual-btn1:hover{
    background-color: rgb(0, 255, 255);
}
#radio1:checked ~ .first{
    margin-left: 0;
}
#radio2:checked ~ .first{
    margin-left: -20%;
}
#radio3:checked ~ .first{
    margin-left: -40%;
}
#radio3:checked ~ .first{
    margin-left: -60%;
}
#radio4:checked ~ .first{
    margin-left: -60%;
}
.txt-press{
    margin-top: 41vh;
    font-size: 1.9vh;
}
.card{
    
    margin-top: 12vh;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none !important;
    padding: 2vh;
    width: 22rem;
    margin: 2vh;
    
}
.navigation-manual1{
    position: absolute;
    width: 200px;
    margin-top: 38.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 8vh;
    right: auto;

}
.manual-btn2:hover{
    background-color: rgb(0, 255, 255);
}
#radio5:checked ~ .first{
    margin-left: 0;
}
#radio6:checked ~ .first{
    margin-left: -20%;
}
#radio7:checked ~ .first{
    margin-left: -40%;
}
#radio8:checked ~ .first{
    margin-left: -60%;
}
.faq{
    width: 50rem;
    height: auto ;
    border-radius: 2px;
    overflow: hidden;
    
}
.faqs{
    width: 500%;
    height: auto;
    display: flex;
    margin-top: 30vh;
    position: relative;
    left: -2vh;
    overflow: hidden;

}
.card-title{
    overflow: hidden;
}

.faqs input{
    display: none;
}
.manual-btn2{
    border: 2px solid #efc44c;
    background: #efc44c;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
    margin: 8px;
    

}
.manual-btn2:hover{
    background-color: rgb(255, 0, 242);
}
.card{
    width: 20%;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0vh;
}
.card-body{
    width: 300px;
    padding: 2vh;
    margin: 8vh;
}
.navigation-manual2{
    position: absolute;
    width: 200px;
    margin-top: 3.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10vh;
    right: auto;

}
.game{
    width: 20%;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;

}
.game img{
    width: 410px;
    height: auto;
    margin-top: 29vh;
    
}
.gamer{
    width: 500px;
    height: auto;
    border-radius: 2px;
    overflow: hidden;
}
.gamess{
    width: 500%;
    height: auto;
    display: flex;
    margin-top: 14vh;

}
.gamess input{
    display: none;
}
.navigation-manual3{
    position: absolute;
    width: 200px;
    margin-top: 98vh;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10vh;
    right: auto;

}
.manual-btn3{
    border: 2px solid #4cc9ef;
    background: #4cc9ef;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
    margin: 8px;
    

}
.manual-btn3:hover{
    background-color: rgb(255, 0, 242);
}
#radio9:checked ~ .first{
    margin-left: 0;
}
#radio10:checked ~ .first{
    margin-left: -20%;
}
#radio11:checked ~ .first{
    margin-left: -40%;
}
#radio12:checked ~ .first{
    margin-left: -60%;
}

.cnt{
    color: #ffffff;
    
    
    
}
.cnt img{
    width: 60px;
    
}
.redes{
    display: flex;
    justify-content: center;
    align-items: center;

}
.email{
    margin-top: 14vh;
    
}
.msj{
    margin-top: -3vh;
}
.btn-enviar{
    font-size: 2vh;
    color: #efc44c;
    border: #fafee4 !important;
    border-radius: 0.375rem;
    background-color: #fafee4;
}
.nav-link{
    color: #ffffff !important;
}
@media all  and (min-width:414px){
    .nav-link{
        color: #ffffff !important;
    }
    .cont-web{
        display: none;
    }

}
    

@media all and (max-width: 375px){

    .sp-video{
        position: relative;
        margin-top: 2vh;
        width: 52vh;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 2vh;
    
    }
    .sp-video img{
        width: 45vh;
        
    }
    .slider{
        margin-top: 8vh;
    }
    .navigation-manual{
        margin-top: 52vh;
        left: 12vh;
    }
    .txt-press{
        margin-top: 50vh;
        font-size: 2vh;
    }
    .faqs{
        margin-top: 36vh;
        left: -2vh !important;
    }
    .navigation-manual2 {
        left: 12vh;

    }
    .card{
        border: none !important;
        padding: 2vh;
        width: 20rem;
        margin: 2vh;
    }
    .game img{
        width: 410px;
        height: auto;
        margin-top: 40vh;
        
    }
    .navigation-manual3{
        left: 12vh;
        margin-top: 120vh;
    }
    .nav-link{
        color: #ffffff !important;
    }
    
    .cont-web{
        display: none;
    }
    .android{
        width: 9rem;
        position: absolute;
        height: auto;
        margin-top: -7vh;
        margin-left: 5vh;
    }
    .ios{
        width: 6.6rem;
        position: absolute;
        height: auto;
        margin-top: -5.5vh;
        margin-left: 30vh;  
    }
    
    
}
@media all and (min-width:374px){
    .sp-video{
        position: relative;
        margin-top: 4.8vh;
        width: 50vh;
        height: 85vh;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 2vh;
        
        
   }
    
    .slides{
        
        margin-top: 17vh;
        
        
    }
    .navigation-manual{
        margin-top: 50vh;
        left: 12vh;
    }
    .txt-press{
        margin-top: 47vh;
        font-size: 2.2vh;
    }
    .faqs{
        margin-top: 33vh;
       
    }
    .navigation-manual2 {
        left: 12vh;
        margin-top: 0vh;
 
    }
    .card{
        border: none !important;
        padding: 2vh;
        width: 20rem;
        margin: 2vh;
    }
    .game img{
        width: 410px;
        height: auto;
        margin-top: 34.5vh;
        margin-left: 0vh;
       
    }
    .navigation-manual3{
        left: 12vh;
        margin-top: 115vh;
    }
    .nav-link{
        color: #ffffff !important;
    }
    .faqs{
        left: -2vh !important;
    }
    
    .cnt img{
        width: 45px;
        
    }
    .cont-web{
        display: none;
    }
    .android{
        width: 9rem;
        position: absolute;
        height: auto;
        margin-top: -7vh;
        margin-left: 5vh;
    }
    .ios{
        width: 6.6rem;
        position: absolute;
        height: auto;
        margin-top: -5.5vh;
        margin-left: 30vh;  
    }
    .email{
        margin-top: 17vh;
    }
    
 
}
@media all and (min-width:1024px){
    body{
        background-image: url(./img/web/bg.png);
        background-size: 100%;
        height: auto;
        overflow-x: hidden !important;
    }
    .nav-link{
        color: #ffffff !important;
        left: 15vh !important;
     }
    .navbar{
        left: 18vh !important;
    }
        .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        #logo{
            position: absolute;
            width: 65vh !important;
            height: auto;
            left: 18vh;
            margin-top: 37vh;
        }
   
        .button-play img {
            width: 49vh !important;
            height: auto;
            margin-top: 95vh;
            position: absolute;
            left: 24vh;
        }
        .sp-video{
            width: 256px;
            height: auto!important;
            left: 90vh;
            margin-top: 0vh;
        }
        .video{
            max-width: 1080px;
            margin-top: -30vh;
        }
        .slider{
            position: relative;
            width: 610px;
            height: auto;
            margin-top: 8.5vh;
            left: 22vh !important;
        }
 
       
        .slides img{
            width: 325px;
            height: auto;
           
           
           
        }
        .slides{
            height: 625px;
        }
        .navigation-manual{
            position: absolute;
            width: 20%;
    
            margin-top: 56vh;
            left: 33vh;
        }
        .cont-web{
            position: absolute;
            margin-top: -14vh;
            font-size: 2.1vh;
            left: 34vh;
            display: flex;
            width: 576px;
        }
        
        .cont-mob{
            display: none !important;
        }
    
        .faq {
            width: 70rem;
            height: 36rem;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 41vh;
        }
        .faqs{
            width: 187vh;
             height: 35vh;

        }
        .card-body {
            width: 300px;
            height: 300px;
            padding: 2vh;
            margin: -2vh;
            margin: -3vh;
            
            
            
            
        }
       
       .card-title{
        overflow: hidden;
        
       }
       .card-text{
        font-size: 1.8vh;
        margin-top: 2vh;
        overflow-y: hidden;
       }
       .navigation-manual2{
        left: 56vh;
       }
       .gamess {
        width: 700px;
        /* padding: 15vh; */
        height: 65rem;
        /* display: flex; */
        margin-top: -31vh;
        position: absolute;
        left: 33vh;
        /* overflow-x: hidden; */
         }
        .game{
            width: 20%;
        }
        .navigation-manual3{
            left: 25vh;
            margin-top: 109vh;
        }
        .cnt{
            margin-top: 103vh;
            position: absolute;
            left: 24vh;
        }

     
 
}
@media all and (min-width:1440px){
    body{
        background-image: url(./img/web/bg.png);
        background-size: 100%;
        height: auto;
        overflow-x: hidden !important;
    }
    .nav-link{
        color: #ffffff !important;
        left: 15vh !important;
     }
    .navbar{
        left: 18vh !important;
    }
        .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        #logo {
            position: absolute;
            width: 65vh !important;
            height: auto;
            left: 31vh;
            margin-top: 37vh;
        }
   
        .button-play img {
            width: 49vh !important;
            height: auto;
            margin-top: 95vh;
            position: absolute;
            left: 39vh;
        }
        .sp-video {
            width: 296px;
            height: auto!important;
            left: 98vh;
            margin-top: 0vh;
        }
        .video{
            max-width: 1080px;
            margin-top: -30vh;
        }
        .slider{
            position: relative;
            width: 610px;
            height: auto;
            margin-top: 35.5vh;
             left: 52vh !important;
        }
 
       
        .slides img{
            width: 325px;
            height: auto;
           
           
           
        }
        .slides{
            height: 625px;
        }
        .navigation-manual{
            position: absolute;
            width: 20%;
    
            margin-top: 56vh;
            left: 33vh;
        }
        .cont-web{
            position: absolute;
            margin-top: 14vh;
            font-size: 3vh;
            left: 44vh;
            display: flex;
            width: 855px;
        }
        .txt-press{
            margin-top: 59vh;
        }
        
        .cont-mob{
            display: none !important;
        }
    
        .faq {
            width: 70rem;
            height: 36rem;
            border-radius: 2px;
            margin-top: 116vh;
        }
        .faqs{
            width: 187vh;
             height: 35vh;

        }
        .card-body {
            width: 300px;
            height: 300px;
            padding: 2vh;
            margin: -2vh;
            margin: -3vh;
            
            
            
            
        }
       
       .card-title{
        overflow-y: hidden;
        
       }
       .card{
        overflow-y: hidden;
       }
       .card-text{
        font-size: 1.8vh;
        margin-top: 2vh;
        overflow-y: hidden;
       }
       .navigation-manual2{
        left: 84vh;
       }
       .gamess {
        width: 1163px;
        /* padding: 15vh; */
        height: 65rem;
        /* display: flex; */
        margin-top: 4vh;
        position: absolute;
        left: 34vh;
        /* overflow-x: hidden;*/
         }
        .game{
            width: 20%;
        }
        .navigation-manual3{
            left: 49vh;
            margin-top: 111vh;
        }
        .cnt{
            margin-top: 162vh;
            position: absolute;
            left: 33vh;
        }
        .android{
            width: 15rem;
            position: absolute;
            height: auto;
            margin-top: 47.5vh;
            margin-left: 36vh;
        }
        .ios{
            width: 11.9rem;
            position: absolute;
            height: auto;
            margin-top: 49vh;
            margin-left: 69vh;
        }
        .botones{
            margin-left: -2vh;
        }

     
 
}
@media all and (min-width:1920px){
    body{
        background-image: url(./img/web/bg.png);
        background-size: 100%;
        height: auto;
        overflow-x: hidden !important;
    }
    .nav-link{
        color: #ffffff !important;
        left: 15vh !important;
     }
    .navbar{
        left: 18vh !important;
    }
        .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        #logo {
            position: absolute;
            width: 65vh !important;
            height: auto;
            left: 31vh;
            margin-top: 37vh;
        }
   
        .button-play img {
            width: 49vh !important;
            height: auto;
            margin-top: 95vh;
            position: absolute;
            left: 39vh;
        }
        .sp-video {
            width: 389px;
            height: auto!important;
            left: 83vh;
            margin-top: 1vh;
        }

        
        .video{
            max-width: 1080px;
            margin-top: -30vh;
        }
        .slider{
            position: relative;
            width: 987px;
            height: auto;
            margin-top: 9.5vh;
            left: 15vh !important;
        }
 
       
        .slides img{
            width: 325px;
            height: auto;
           
           
           
        }
        .slides{
            height: 1170px;
        }
        .navigation-manual{
            position: absolute;
            width: 20%;
            margin-top: 79vh;
            left: 39vh;
        }
        .cont-web {
            position: absolute;
            margin-top: -15vh;
            font-size: 2.8vh;
            left: 52vh;
            display: flex;
            width: 980px;
        }
        .txt-press{
            margin-top: 54vh;
        }
        
        .cont-mob{
            display: none !important;
        }
    
        .faq {
            width: 70rem;
            height: 36rem;
            border-radius: 2px;
            margin-top: 90vh;
        }
        .faqs{
            width: 225vh;
            height: 35vh;

        }
        .card-body {
            width: 300px;
            height: 800px;
            
            
            
            
        }
       
       .card-title{
        overflow: hidden;
        
       }
       .card{
        width: 20%;
        overflow: hidden;
       }
       .card-text{
        font-size: 1.8vh;
        margin-top: 2vh;
        overflow-y: hidden;
       }
       .navigation-manual2{
        left: 84vh;
       }
       .gamess {
        width: 1595px;
        /* padding: 15vh; */
        height: 65rem;
        /* display: flex; */
        margin-top: 30vh;
        position: absolute;
        left: 34vh;
        overflow: hidden;
         }
        .game{
            width: 20%;
        }
        
        .navigation-manual3{
            left: 49vh;
            margin-top: 111vh;
        }
        .cnt{
            margin-top: 160vh;
            position: absolute;
            left: 33vh;
        }
        .slide{
            width: 8% !important;
        }
        #radio1:checked ~ .first{
            margin-left: 0;
        }
        #radio2:checked ~ .first{
            margin-left: -12%;
        }
        #radio3:checked ~ .first{
            margin-left: -14%;
        }
        #radio3:checked ~ .first{
            margin-left: -16%;
        }
        #radio4:checked ~ .first{
            margin-left: -18%;
        }
    
        .manual-btn1 {
        border: 2px solid #ef476f;
        background: #ef476f;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
        }
         .android{
        width: 15rem;
        position: absolute;
        height: auto;
        margin-top: 47.5vh;
        margin-left: 42vh;
         }
        .ios{
        width: 12rem;
        position: absolute;
        height: auto;
        margin-top: 49vh;
        margin-left: 68vh;
        }
         .botones{
        margin-left: -2vh;
        }
        #radio5:checked ~ .first{
            margin-left: 0;
        }
        #radio6:checked ~ .first{
            margin-left: -8%;
        }
        #radio7:checked ~ .first{
            margin-left: -10%;
        }
        #radio8:checked ~ .first{
            margin-left: -38%;
        }
        .email{
            margin-top: 18vh;
        }
        .msj {
            margin-top: -2vh;
        }
        .redes{
            padding: 3vh;
        }
        
    
     
 
}
@media screen and (min-width:2020px){
    body{
        background-image: url(./img/web/bg.png);
        background-size: 100%;
        height: auto;
        overflow-x: hidden !important;
    }
    .nav-link{
        color: #36c712 !important;
        left: 15vh !important;
     }
    .navbar{
        left: 18vh !important;
    }
        .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        #logo {
            position: absolute;
            width: 65vh !important;
            height: auto;
            left: 31vh;
            margin-top: 37vh;
        }
   
        .button-play img {
            width: 49vh !important;
            height: auto;
            margin-top: 95vh;
            position: absolute;
            left: 39vh;
        }
        .sp-video {
            width: 389px;
            height: auto!important;
            left: 83vh;
            margin-top: 1vh;
        }

        
        .video{
            max-width: 1080px;
            margin-top: -30vh;
        }
        .slider{
            position: relative;
            width: 987px;
            height: auto;
            margin-top: 9.5vh;
            left: 15vh !important;
        }
 
       
        .slides img{
            width: 325px;
            height: auto;
           
           
           
        }
        .slides{
            height: 1170px;
        }
        .navigation-manual{
            position: absolute;
            width: 20%;
            margin-top: 79vh;
            left: 39vh;
        }
        .cont-web {
            position: absolute;
            margin-top: -15vh;
            font-size: 2.8vh;
            left: 52vh;
            display: flex;
            width: 980px;
        }
        .txt-press{
            margin-top: 54vh;
        }
        
        .cont-mob{
            display: none !important;
        }
    
        .faq {
            width: 70rem;
            height: 36rem;
            border-radius: 2px;
            margin-top: 90vh;
        }
        .faqs{
            width: 225vh;
            height: 35vh;

        }
        .card-body {
            width: 300px;
            height: 800px;
            
            
            
            
        }
       
       .card-title{
        overflow: hidden;
        
       }
       .card{
        width: 20%;
        overflow: hidden;
       }
       .card-text{
        font-size: 1.8vh;
        margin-top: 2vh;
        overflow-y: hidden;
       }
       .navigation-manual2{
        left: 84vh;
       }
       .gamess {
        width: 1595px;
        /* padding: 15vh; */
        height: 65rem;
        /* display: flex; */
        margin-top: 30vh;
        position: absolute;
        left: 34vh;
        overflow: hidden;
         }
        .game{
            width: 20%;
        }
        
        .navigation-manual3{
            left: 49vh;
            margin-top: 111vh;
        }
        .cnt{
            margin-top: 160vh;
            position: absolute;
            left: 33vh;
        }
        .slide{
            width: 8% !important;
        }
        #radio1:checked ~ .first{
            margin-left: 0;
        }
        #radio2:checked ~ .first{
            margin-left: -12%;
        }
        #radio3:checked ~ .first{
            margin-left: -14%;
        }
        #radio3:checked ~ .first{
            margin-left: -16%;
        }
        #radio4:checked ~ .first{
            margin-left: -18%;
        }
    
        .manual-btn1 {
        border: 2px solid #ef476f;
        background: #ef476f;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
        }
         .android{
        width: 15rem;
        position: absolute;
        height: auto;
        margin-top: 47.5vh;
        margin-left: 42vh;
         }
        .ios{
        width: 12rem;
        position: absolute;
        height: auto;
        margin-top: 48.8vh;
        margin-left: 68vh;
        }
         .botones{
        margin-left: -2vh;
        }
        #radio5:checked ~ .first{
            margin-left: 0;
        }
        #radio6:checked ~ .first{
            margin-left: -8%;
        }
        #radio7:checked ~ .first{
            margin-left: -10%;
        }
        #radio8:checked ~ .first{
            margin-left: -38%;
        }
        .email{
            margin-top: 18vh;
        }
        .msj {
            margin-top: -2vh;
        }
        .redes{
            padding: 3vh;
        }
        
    
     
 
}