@font-face {
    font-family: 'Roc Grotesk';
    src: url('../fonts/Kostic-RocGroteskRegular.otf');
    font-weight: 400;
}

body {
    overflow-x: hidden;
}

h1 {
    font-size: 4rem;
    line-height: 100%;
    color: #F3F4FB;
}

h2 {
    font-size: 3rem;
    line-height: 100%;
    color: #F3F4FB;
}


h3 {
    font-size: 2rem;
    line-height: 100%;
    color: #F3F4FB;
}

p {
    font-size: 1rem;
    line-height: 100%;
    color: #F3F4FB;
}

/** BANNER **/

#banner {
    background: url(/wp-content/themes/redi/assets/img/background-tarifas-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 100px 0;
    font-weight: 700;
    position: relative;
}

#banner h1 {
    font-weight: 900;
    letter-spacing: 1px;
}

#banner p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 1px;
}

#banner .cartelera {
    position: relative;
    right: -315px;
    top: 40px;
    width: 100%;
    margin-bottom: -100px;
}

#banner .servicios {
    width: 150%;
    height: auto;
}

/** TARIFA **/

#tarifas {
    font-size: 1rem;
    background-color: #fff;
}

#tarifas p {
    color: #1319c7;
    font-weight: 600;
}

/** VENTAJAS **/

#ventajas {
    background: #1319c7;
    padding: 50px 0;
}

#ventajas h2 {
    font-weight: 600;
}

#ventajas img {
    width: 100%;
    height: 100%;
}

#ventajas .caracteristicas {
    border: 2px solid #44feaa;
    border-radius: 50px;
    padding: 10px 25px;
    margin: 25px 0;
    display: flex;
    align-items: center;
    width: 80%;
    height: auto;
}

#ventajas .caracteristicas img {
    margin: 10px 25px 10px 10px;
    width: auto;
    height: auto;
}

#ventajas .caracteristicas p {
    margin: 0;
}

/** DECODIFICADOR **/

#decodificador {
    background: #44feaa;
    padding: 50px 0;
}

#decodificador h2 {
    color: #5600FF;
    font-weight: 800;
}

#decodificador p {
    color: #5600FF;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
}

#decodificador .espec {
    margin-top: 35px;
    left: -52px;
    position: relative;
}

#decodificador .ventajas {
    width: 85px;
    margin: 0 20px;
    text-align: center;
}

#decodificador img {
    width: 60%;
    height: 60%;
}

#decodificador .ventajas img {
    width: 50px;
    height: auto;
}

@media (max-width: 1250px) {
    #banner .cartelera {
        right: -50px;
        width: 150%;
    }
    #banner .servicios {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #banner .cartelera {
        right: 0;
        width: 100%;
    }

    #tarifas p {
        width: 100% !important;
    }

    #tarifas .canales {
        width: 100% !important;
    }

    #tarifas .mas18 {
        width: 60% !important;
    }

    #decodificador .espec {
        left: 0;
    }

    #ventajas .caracteristicas {
        width: 100%;
    }
}