/* VERSION DESKTOP */

@media only screen and (min-width: 995px) {
    .only-cel {
        display: none !important;
    }
}

/* VERSION CELULAR */
@media only screen and (max-width: 995px) {
    /* General */
    .only-pc {
        display: none !important;
    }

    body {
        background-image: url(../img/fondo-flujo-degradado.jpg)
    }

    .container {
        max-width: 90%;
    }

    .titulo {
        font-size: 60px;
    }

    .subtitulo {
        font-size: 40px;
    }

    .bajada {
        font-size: 33px;
    }

    .progreso p {
        font-size: 30px;
    }

    .progreso .circle {
        width: 40px;
        height: 40px;
    }

    .progreso .circle .label {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 30px;
    }

    select {
        background-position:
        calc(100% - 30px) 45px,
        calc(100% - 21px) 45px,
        100% 0;
    }

    /* index.html.twig */
    .index .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4rem 1rem 1rem 1rem;
    }

    .index .titulo {
        margin-top: 30px;
    }

    .index .subtitulo {
        margin: 0;
    }

    .index .bajada {
        font-size: 33px;
    }

    .index .botones {
        flex-direction: column;
        align-items: center;
        flex-grow: 0.4;
        justify-content: space-around;
    }  

    .index .btn {
        height: 180px;
    }

    .index .btn img {
        height: 60px;
        width: unset;
        margin-right: 15px;
    }

    .index .botones span {
        font-weight: bold;
        font-size: 50px;
    }

    .index .botones .boton {
        width: 100%;
    }

    .index .botones .boton button {
        max-width: unset;
        font-size: 38px;
    }

    .index .botones .boton h6 {
        font-size: 30px;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    /* crear-cuenta.html.twig */
    .crear-cuenta .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 1215px;
        padding-top: 6rem;
    }

    .crear-cuenta .jumbotron.j2 {
        padding-top: 16rem;
    }

    .crear-cuenta .titulo {
        flex-grow: 0.05;
    }

    .crear-cuenta .subtitulo {
        margin: 0;
        flex-grow: 0.05;
    }

    .crear-cuenta .bajada {
        font-size: 33px;
        flex-grow: 0.6  ;
    }

    .crear-cuenta .botones {
        flex-direction: column;
        align-items: center;
        flex-grow: 0.2;
        justify-content: space-around;
    }

    .crear-cuenta .botones .boton {
        margin-left: 0;
        width: 100%;
        max-width: unset;
        height: 100px;
    }

    .crear-cuenta .botones .boton .form-control {
        height: 100px;
        font-size: 30px;
        border-radius: 50px;
    }

    .crear-cuenta .botones .boton h6 {
        font-size: 30px;
    }

    .crear-cuenta .botones .boton .btn {
        height: 100px;
        font-size: 40px;
        border-radius: 50px;
        line-height: 100px;
    }

    /* crear-cuenta-banco-estado.html.twig */
    .crear-cuenta-banco-estado .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 1345px !important;
        padding-bottom: 40px;
        padding-top: 4rem;
    }
    .crear-cuenta-banco-estado .titulo {
        margin-top: 30px;
    }

    .crear-cuenta-banco-estado .subtitulo {
        margin: 0;
        flex-grow: 0.7;
        padding-top: 1em;
    }

    .crear-cuenta-banco-estado .bajada {
        font-size: 33px;
        flex-grow: 0.3;
    }

    .crear-cuenta-banco-estado .botones {
        flex-direction: column;
        align-items: center;
        flex-grow: 0.9;
        justify-content: space-around;
        margin-bottom: 20px;
    }

    .crear-cuenta-banco-estado .botones h6 {
        font-size: 30px;
    }

    .crear-cuenta-banco-estado .botones .col-4 {
        justify-content: flex-end;
    }

    .crear-cuenta-banco-estado .botones .col-4 .form-control {
        height: 100px;
        border-radius: 50px;
        font-size: 30px;
    }
    
    .crear-cuenta-banco-estado .botones .col-4 .error {
        bottom: -20px
    }

    .crear-cuenta-banco-estado .botones .col-4 .btn {
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        border-radius: 50px;
    }

    /* datos-iniciales.html.twig */
    
    .datos-iniciales .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
    }

    .datos-iniciales form {
        flex-grow: 1;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        margin: unset;
        max-width: unset;
    }

    .datos-iniciales .titulo h5 {
        font-size: 50px;
        font-weight: 700;
    }

    .datos-iniciales .input-group {
        border-radius: 50px;
        height: 100px;
    }

    .datos-iniciales .input-group .input-group-prepend.col-4 {
        flex: 0 0 36.33333333%;
        max-width: 36.3333333333%;
    }

    .datos-iniciales .input-group .input-group-text {
        padding-left: 30px;
        font-size: 30px;
        text-align: left;
    }

    .datos-iniciales .input-group .form-control {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 30px;
        padding: 29px 12px;
    }

    .datos-iniciales ul {
        font-size: 28px;
    }

    .datos-iniciales .col-sm-10 {
        max-width: unset;
        margin-left: 0;
    }

    .datos-iniciales .btn {
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        border-radius: 50px;
        width: 100%;
    }

    /* datos-iniciales-be.html.twig */

    .datos-iniciales-be .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
    }

    .datos-iniciales-be form {
        flex-grow: 1;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        margin: unset;
        max-width: unset;
    }
    .datos-iniciales-be .titulo h5 {
        font-size: 50px;
        font-weight: 700;
    }

    .datos-iniciales-be .input-group {
        border-radius: 50px;
        height: 100px;
    }

    .datos-iniciales-be .input-group .input-group-prepend.col-4 {
        flex: 0 0 36.33333333%;
        max-width: 36.3333333333%;
    }

    .datos-iniciales-be .input-group .input-group-text {
        padding-left: 30px;
        font-size: 30px;
        text-align: left;
    }

    .datos-iniciales-be .input-group .form-control {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 30px;
        padding: 29px 12px;
    }

    .datos-iniciales-be ul {
        font-size: 28px;
    }

    .datos-iniciales-be .col-sm-10 {
        max-width: unset;
        margin-left: 0;
    }

    .datos-iniciales-be .btn {
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        border-radius: 50px;
        width: 100%;
    }

    /* planes.html.twig */
    .planes .jumbotron {
        padding-top: 42px;
    }

    .planes .progreso {
        padding-bottom: 42px;
    }
    
    .planes .titulo h5 {
        font-size: 50px;
    }

    .planes .subtitulo {
        margin-bottom: 20px;
    }

    .planes .encabezado {
        max-width: 80%;
        flex: unset;
        align-self: center;
    }
    
    .planes .encabezado p {
        font-size: 30px;
        margin: 30px 0 26px;
    }
    
    .planes .encabezado form select {
        height: 100px;
        border-radius: 50px;
        padding-left: 30px;
        font-size: 30px;
    }

    .planes .encabezado form select option {
        font-size: 10px;
    }

    .planes .fila-planes {
        flex-direction: column;
        align-items: center;
    }

    .planes .fila-planes .boxes {
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
    }

    .planes .fila-planes .boxes .boxplan {
        margin: 15px;
        width: 70%;
    }

    .planes .fila-planes .boxes .boxplan .box-head-1 {
        font-size: 30px;
    }

    .planes .fila-planes .boxes .boxplan .box-head-2 {
        font-size: 25px;
        line-height: 1;
    }

    .planes .fila-planes .boxes .boxplan .tabla {
        font-size: 30px;
        padding: 10px;
    }

    .planes .fila-planes .boxes .boxplan .tabla p {
        font-size: 25px;
        line-height: 1;
    }

    .planes .fila-planes .boxes .boxplan .numero {
        font-size: 40px;
    }

    .planes .fila-planes .caracteristicas {
        margin-top: 50px;
        border: none
    }

    .planes .fila-planes .caracteristicas .text-left {
        padding-left: 0;
        text-align: center !important;
        font-size: 40px;
        font-weight: bold;
    }

    .planes .fila-planes .caracteristicas .caracteristica {
        height: 40px;
        font-size: 28px;
        margin-left: 9%;
    }

    .planes .fila-boton .boton {
        width: 100%;
        margin-top: 50px;
    }

    .planes .fila-boton .boton .btn {
        font-size: 40px;
        height: 100px;
        border-radius: 50px;
    }

    .planes .fila-boton .boton p {
        font-size: 30px;
    }

    .planes .fila-boton .boton p:last-child {
        margin-top: 0.5em;
    }

    /* enroll.html.twig */
    .enroll .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 6rem;
        padding-bottom: 24px;
    }

    .enroll .titulo {
        font-size: 50px;
        flex-grow: 0.01;
    }

    .enroll .subtitulo {
        font-size: 40px;
        flex-grow: 0.1;
    }

    .enroll .bajada {
        font-size: 33px;
        flex-grow: 0.1;
    }

    .enroll .password {
        flex-grow: 0.4;
        font-size: 70px;
    }

    .enroll .botones {
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
    }

    .enroll .botones .col {
        margin: 15px 0;
    }

    .enroll .botones .col .btn {
        max-width: unset;
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        font-weight: bold;
        border-radius: 50px;
    }

    .enroll .texto-1 {
        font-size: 35px
    }

    .enroll .texto-2 {
        font-size: 35px;
        margin: 0 0 20px;
    }

    /* pay_tarjeta.html.twig (index y cargas) */

    .pay-tarjeta .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        padding-top: 15px;
    }

    .pay-tarjeta .progreso {
        padding-bottom: 11px;
    }

    .pay-tarjeta .titulo {
        margin: 0;
        font-size: 50px;
    }

    .pay-tarjeta .subtitulo {
        font-size: 33px;
        margin: 0;
    }

    .pay-tarjeta form {
        flex-grow: 1;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        margin: unset;
        max-width: unset;
    }

    .pay-tarjeta .form-check {
        margin-top: 30px;
    }

    .pay-tarjeta .form-check-input {
        height: 30px;
        width: 30px;
        margin-top: 0.4rem;
        margin-left: -2.65rem;
    }

    .pay-tarjeta .form-check-label {
        font-size: 30px;
    }

    .pay-tarjeta .input-group {
        border-radius: 50px;
        height: 100px;
    }

    .pay-tarjeta .input-group .input-group-prepend.col-4 {
        flex: 0 0 36.33333333%;
        max-width: 36.3333333333%;
    }

    .pay-tarjeta .input-group .input-group-text {
        padding-left: 30px;
        font-size: 30px;
        text-align: left;
    }

    .pay-tarjeta .input-group .form-control {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 30px;
        padding: 29px 12px;
    }

    .pay-tarjeta .bajada {
        margin: 60px 0;
    }

    .pay-tarjeta .bajada h6 {
        font-size: 30px;
    }

    .pay-tarjeta .bajada h6:first-child {
        margin-bottom: 55px;
    }

    .pay-tarjeta .bajada h2 {
        font-size: 40px;
    }

    .pay-tarjeta .btn {
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        border-radius: 50px;
        width: 100%;
        margin: 0;
    }

    /* index.html.twig (cargas) */

    .index-cargas .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
    }

    .index-cargas .titulo {
        flex-grow: 0.05;
    }

    .index-cargas .subtitulo {
        flex-grow: 0.05;
    }

    .index-cagras .bajada {
        margin-bottom: 30px;
        flex-grow: 0.05;
    }

    .index-cargas .bajada p:first-child {
        margin-bottom: 3rem;
    }

    .index-cargas .convenio {
        font-size: 33px;
    }

    .index-cargas .lista-cargas {
        margin-left: 0;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 0.85;
        max-width: unset;
    }

    .index-cargas .lista-cargas .row .col h5,
    .index-cargas .lista-cargas .row .col i {
        font-size: 25px;
    }

    .lista-cargas .row .col .btn {
        height: 80px;
        line-height: 80px;
        font-size: 30px;
    }

    .index-cargas .btn {
        height: 100px;
        border-radius: 50px;
        font-size: 40px;
        font-weight: bold;
        line-height: 100px;
        max-width: unset;
    }


    .modal-cargas .modal-dialog {
        max-width: 800px;
        position: absolute;
        transform: translate(-50%, -50%) !important;
        top: 50%;
        left: 50%;
        width: 100%;
        border-radius: 30px;
        overflow: hidden;
    }

    .modal-cargas .modal-dialog .modal-body p {
        font-size: 50px;
    }

    .modal-cargas .modal-dialog .modal-body h3 {
        font-size: 80px;
    }

    .modal-cargas .modal-dialog .modal-footer .btn {
        height: 100px;
        border-radius: 50px;
        font-size: 50px;
        font-weight: bold;
    }

    /* agregar.html.twig, editar.html.twig y agregar_be.html.twig */
    .agregar-carga .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
    }

    .agregar-carga .titulo {
        margin-bottom: 40px;
    }

    .agregar-carga form {
        flex-grow: 1;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        margin: unset;
        max-width: unset;
    }

    .agregar-carga .input-group {
        border-radius: 50px;
        height: 100px;
    }

    .agregar-carga .input-group .input-group-prepend.col-4 {
        flex: 0 0 36.33333333%;
        max-width: 36.3333333333%;
    }

    .agregar-carga .input-group .input-group-text {
        padding-left: 15px;
        font-size: 30px;
        text-align: left;
    }

    .agregar-carga .input-group .form-control {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        font-size: 30px;
        padding: 29px 12px;
    }

    .agregar-carga .boton {
        flex-grow: 0.6;
        display: -webkit-flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .agregar-carga .btn {
        height: 100px;
        font-size: 40px;
        line-height: 100px;
        border-radius: 50px;
        width: 100%;
        margin: 0;
    }

    /* eliminar-cupo.html.twig y eliminar.html.twig */

    .eliminar-cupo .jumbotron {
        min-height: 715px !important;
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .eliminar-cupo .botones {
        max-width: unset;
        margin: 0;
    }
    .eliminar-cupo .botones .btn {
        height: 100px;
        border-radius: 50px;
        font-size: 40px;
        line-height: 100px;
    }

    /* error.html.twig */

    .error .jumbotron {
        display: -webkit-flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 715px !important;
    }

    .error .titulo {
        margin: 0 0 50px;
    }

    .error .subtitulo {
        margin: 0;
        flex-grow: 1;
    }

    .error .btn {
        width: 100%;
        height: 100px;
        line-height: 100px;
        border-radius: 50px;
        font-size: 30px;
        font-weight: bold;
    }

    /* condicionesmedismart.html.twig */

    .condiciones-medismart .titulo {
        font-size: 60px;
    }

    .condiciones-medismart .subtitulo {
        font-size: 40px;
    }

    .condiciones-medismart .contenido {
        width: 90%;
    }

    .condiciones-medismart .contenido p {
        font-size: 30px;
    }
}