:root{
    --Color-Rojo:#ed1c27;
    --Color-Rojo-Oscuro:#c2161f;
    --Color-Blanco: #ffffff;
    --Color-Negro:#585858;
    --Color-Gris: #D9D9D9;
    --Color-Gris-Footer: #f4f4f4;
}

/* Reset */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    color: var(--Color-Negro);
}

.legal{
    position: absolute;
    top: 100px;
    right: 10px;
    width: 15px;
    z-index: 3;
}
.lemotive{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 8%;
    z-index: 3;
}


.cuerpo{
    background-image: url(../img/GL1OH-fd2f1ced-4f8f-42f2-a55f-997bcc3b6516_240424-background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.adultomayor{
    background-image: url(../img/MxXL5-12355d71-47ba-4b73-863b-216282340217_background-tarjeta-adulto-mayor.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.formulario{
    background-color: var(--Color-Blanco);
    margin: 50px 0px;
    padding: 30px 0px;
    border-radius: 50px;
    box-shadow: 0px 5px 10px rgba(188, 188, 188, 0.402);
}
.formulario h1{
    text-align: center;
    font-size: 3rem;
    margin-bottom: 30px;
}
.formulario h1 b{
    font-style: italic;
}
.formulario h1 b span{
    color: var(--Color-Blanco);
    background-color: var(--Color-Rojo);
    border-radius: 10px;
    padding: 0px 10px;
}

.formulario h2{
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;
}

.formulario form label{
    font-size: 1.1rem;
    font-weight: 200;
}

.formulario form select, .formulario form input{
    color: #808080;
}
.formulario form ::placeholder{
    color: #aaaaaa;
    font-weight: 400;
}
.formulario form .form-check .form-check-label a{
    color: var(--Color-Rojo);
}
.formulario form .form-check .form-check-label a:hover{
    color: var(--Color-Rojo-Oscuro);
}
.formulario form .boton{
    display: flex;
    justify-content: center;
}

.formulario form .boton button{
    color: var(--Color-Blanco);
    font-size: 1.6rem;
    background-color: var(--Color-Rojo);
    border-radius: 30px;
    border: 1px solid transparent;
    padding: 5px 40px;
    margin: 20px 0px;
}
.formulario form .boton button:hover{
    background-color: var(--Color-Rojo-Oscuro);
    cursor: pointer;
    transform: scale(1.1 , 1.1);
}

/**************************/
/********* FOOTER *********/
/**************************/

footer{
    background-color: var(--Color-Gris-Footer);
    padding: 20px 0px;
}
footer p{
    font-size: 1.2rem;
    margin:0px;
}


/***************************/
/********** MODAL **********/
/***************************/

.modal-content{
    border-radius: 20px;
    border: 1px solid transparent;
}
.modal-header{
    background-color: var(--Color-Rojo);
    border-radius: 18px 18px 0px 0px;
    display: flex;
    justify-content: center;
    align-content: center;
}
.modal-header img{
    width: 60%;
}
.modal-body .check{
    display: flex;
    justify-content: center;
    align-content: center;
}
.modal-body .check img{
    width: 10%;
    margin: 10px 0px 20px 0px;
}
.modal-body h2{
    font-size: 1.5rem;
    text-align: justify;
    padding: 10px 30px;
}
.modal-body h1{
    font-size: 2rem;
    text-align: center;
    padding: 10px 30px;
}
.modal-body h2 a{
    color: var(--Color-Negro);
    text-decoration: none;
}
.modal-body h2 a:hover{
    text-decoration: underline;
}
.formulario form .collapse .card p{
    text-align: justify;
    padding: 0px 20px;
    font-weight: 300;
}
.modal-footer{
    display: flex;
    justify-content: center;
    align-content: center;
}
.modal-footer .btn-closemodal{
    background-color: var(--Color-Rojo);
    color: var(--Color-Blanco);
    font-size: 1.3rem;
    padding: 3px 40px;
    border-radius: 15px;
}
.modal-footer .btn-closemodal:hover{
    background-color: var(--Color-Rojo-Oscuro);
}

@media (max-width: 1200px) {
    .lemotive{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 10%;
    }
}


@media (max-width: 820px) {
    .lemotive{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 10%;
    }
    footer p{
        font-size: 1rem;
        margin:0px;
    }
}


@media (max-width: 576px) {
    main{
        overflow-x: hidden;
    }
    .lemotive{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 20%;
    }
    footer p{
        font-size: 1rem;
        margin:0px;
    }
}