@font-face {
    font-family: revelaciones;
    src: url('../fonts/revelaciones.otf');
}
@font-face {
    font-family: numeros;
    src: url('../fonts/numero.ttf');
}

body, html {
    height: 100%;
}

.main_cont{
    background-image: url('../images/bkg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    /* height: 100%; */
}

.revelaciones {
    font-family: revelaciones;
    color: #fef129;
    font-size: 8rem;
    text-transform: capitalize;
    text-align: center;
    position: relative;
    top: -300px;
    text-shadow: 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8);
}

.numeros, .numeros a, .numeros a:hover {
    text-decoration: none;
    font-family: numeros;
    font-size: 10rem;
    text-align: center;
    position: relative;
    top: -160px;
    color: #fef129;
    line-height: normal;
    text-shadow: 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8);
}
.numeros span {
    font-size: 1.2rem;
    text-align: center;
    color: #ffffff;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    top: -180px;
}

.slogan{
    font-family: revelaciones;
    color: #ffffff;
    font-size: 4rem;
    text-transform: capitalize;
    text-align: center;
    position: relative;
    top: -320px;
    text-shadow: 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8);
}
.llamar{
    color: #ffffff;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: -300px;
    text-shadow: 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8), 3px 3px 5px rgba(0, 0,0, 0.8);
}
.btn-primary a, .btn-primary a:hover {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}

@media(max-width: 767px){
    .main_cont{
        padding-top: 10%;
        height: 100%;
    }
    .revelaciones {
        top: -80px;
        font-size: 2.2rem;
    }
    .numeros, .numeros a, .numeros a:hover{
        top: -40px;
        font-size: 4rem;
    }
    .numeros span{
        top: -40px;
        font-size: 0.8rem;
    }
    .slogan{
        top: -75px;
        font-size: 1rem;
    }
    .llamar .btn-primary{
        font-size: 0.6rem;
    }
    .llamar {
        top: -65px;
        font-size: 0.8rem;
    }

}