@font-face {
    font-family: Telcel-Fina;
    src: url("../fonts/Telcel-Fina.otf");
}

@font-face {
    font-family: Telcel-FinaItalicas;
    src: url("../fonts/Telcel-FinaItalicas.otf");
}

@font-face {
    font-family: Telcel-Ligera;
    src: url("../fonts/Telcel-Ligera.otf");
}

@font-face {
    font-family: Telcel-LigeraItalicas;
    src: url("../fonts/Telcel-LigeraItalicas.otf");
}

@font-face {
    font-family: Telcel-Media;
    src: url("../fonts/Telcel-Media.otf");
}

@font-face {
    font-family: Telcel-MediaItalicas;
    src: url("../fonts/Telcel-MediaItalicas.otf");
}

@font-face {
    font-family: Telcel-Obscura;
    src: url("../fonts/Telcel-Obscura.otf");
}

@font-face {
    font-family: Telcel-Robusta;
    src: url("../fonts/Telcel-Robusta.otf");
}

html,
body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    max-height: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    font-family: 'Telcel-Ligera';
}

.titulo {
    color: #366bb3;
    font-size: 6.5vh;
    padding: 0;
    margin: 0;
    line-height: 6vh;
    letter-spacing: 0px;
    font-family: Telcel-Obscura;
}

.titulo2 {
    color: #366bb3;
    font-size: 10vh;
    padding: 0;
    margin: 1vh;
    line-height: 10vh;
    letter-spacing: 0px;
    font-family: Telcel-Obscura;
    text-align: center;
}

a.btn-reg {
    background: #e71d73;
    font-size: 10vh;
    color: white;
    width: 10vh;
    border-radius: 1vh;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin: auto;
}


.descripcion {
    color: #366bb3;
    font-size: 3vh;
    padding-top: 2vh;
    margin: 0;
    font-family: Telcel-Media;
}

.lista {
    font-size: 1.9vh;
}

.lista b {
   font-family: Telcel-Obscura;
}

.pregunta {
    color: #366bb3;
    padding: 0;
    margin: 0;
    font-family: Telcel-Obscura;
}

.datos {
    color: #366bb3;
}

.flex-container {
    padding: 0;
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /*background-color: DodgerBlue;*/
}

.flex-container>div {
    margin-bottom: 1px;
    width: 100%;
}

.flex-container .cabecera {
    height: 10vh;
}

.flex-container .cabecera .logo {
    padding: 1.2vh;
    display: inline;
}

.flex-container .cabecera .logo img {
    margin: 1.5vh;
    width: 18vh;
    height: 5vh;
}

.flex-container .cabecera .fonix {
    float: left;
}
.flex-container .cabecera .fonix img{
    width: 15vh;
}

.flex-container .cabecera .msj {
    float: none;
    text-align: center;
}

.flex-container .cabecera .telcel {
    float: right;
}

.flex-container .contenido {
    height: 76vh;
    width: 98%;
    border-top: 8px solid #e71d73;
    background-image: url('../imgs/BACKGROUND.png');
    background-size: cover;
    background-position: center;
    padding: 2vh;
    padding-top: 2vh;
}

.flex-container .contenido .text-mensaje{
     height: 100%;
    width: 35%;
    margin-left: 7vh;
}

.flex-container .contenido .formulario {
    height: 100%;
    width: 35%;
    margin-left: 7vh;
}

.flex-container .pie {
    height: 8.3vh;
    background: #e71d73;
    font-family: 'Telcel Fina';
}

.pie p {
    margin: auto;
    text-align: center;
    margin-top: 3vh;
    font-size: 2vh;
    font-family: 'Telcel Fina';
}

.pie p a {
    color: white;
    font-family: 'Telcel Fina';
    text-decoration: none;
}

.btn {
    background: #e71d73;
    color: white;
    width: 10vh;
    float: right;
    border-radius: 1vh;
    font-weight: bold;
}

.mensaje {
    padding: 2vh;
    background: #e71d73;
    color: white;
}

input {
    margin: 0;
    padding: 0.8vh;
    width: 28vh;
    height: 4vh;
    border-radius: 2vh;
    border: none;
}

p.form {
    padding: 0;
    margin: 1vh;
    font-family: Telcel-Media;
}

.datos {
    display: flex;
    flex-direction: row;
}

textarea {
    border-radius: 2vh;
    height: 21vh;
    width: 35vh;
}

@media only screen and (max-width: 900px) {
    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        max-height: 100%;
        min-width: 100%;
        max-width: 100%;
        font-size: 1vh;
        box-sizing: border-box;
    }

    .flex-container .contenido {
        padding: 0;
        margin: 0;
        background-image: url('../imgs/back-movil.png');
        height: auto;
    }

    .flex-container .pie {
        width: 100%;
    }

    .flex-container .contenido .formulario {
        padding: 0;
        margin: 0;
        width: 95%;
        margin-left: 1vh;
    }

    .flex-container .contenido .text-mensaje {
        padding: 0;
        margin: 0;
        width: 95%;
        height: 71vh;
    }

    textarea {
        width: 100%;
    }

    .titulo {
        font-size: 3vh;
        line-height: 3vh;
        text-align: center;
    }

    .titulo2 {
        font-size: 9vh;
    }

    .pregunta {
        font-size: 2vh;
        text-align: center;
    }

    .descripcion {
        text-align: center;
    }

    .form > label {
        font-size: 2vh;
    }

    .datos {
        display: flex;
        flex-direction: column;
    }

    textarea {
        width: 90%;
    }

    input {
        width: 90%;
    }

    .btn {
        width: 90%;
        display: block;
        float: none;
        margin-left: 2vh;
    }

    a.btn-reg {
        font-size: 5vh;
        display: block;
        margin-left: 2vh;
        width: 90%;
        text-align: center;
        text-decoration: none;
    }
}


@media only screen and (min-width: 900px) {
    .lista {
        margin: 0;
        padding: 2vh;
        margin-bottom: 0.5vh;
    }

    input[type=text],input[type="email"],textarea{
        font-size: 1.7vh;
        font-family: 'Telcel Ligera';
    }
    .form > label {
        font-size: 2.2vh;
    }
}