.login {
    background-color: #fff;
    min-height: 100vh;
    text-align: center;
}
.login .img {
    background-image: url('../img/login.jpg');
    background-position: 0 bottom;
    background-size: 66vw;
    overflow: hidden;
}
.form {
    margin-top: 0rem;
    padding: 1rem 6rem 2rem;
    position: relative;
}
.form > img {
    width: 10rem;
    margin-bottom: 0rem;
}
.form select {
    font-size: .8rem;
    padding: .5rem;
}
h2 {
    margin-bottom: 1rem;
    font-weight: bold;
    color: #ababab;
}
.g-recaptcha {
    margin: 0 auto 1rem;
}
.copy {
    bottom: 1em;
    font-size: .9em;
    position: absolute;
    right: 5rem;
    text-align: center;
}
.btn {
    background-color: var(--color-azul);
    border: none;
    color: var(--color-blanco);
    cursor: pointer;
    padding: .5rem;
    width: 100%;
}
.btn, .btn:hover, .btn:active {
    color: var(--color-blanco);
}
.btn:hover, .btn:active {
    background-color: var(--color-azul-oscuro);
}
.recordar-clave > a {
    display: block;
}
form.recordar, form.login-form {
    text-align: left;
    margin-top: 2rem;
}
form.recordar h5 {
    margin-bottom: 1.5rem;
}
form.recordar p, form.recordar ul {
    font-size: .9rem;
}
@media only screen
    and (max-device-width: 780px) {
    .container {
        margin: 0;
        min-height: 100vh;
        padding: 0;
    }
    .login {
        margin: 0;
        width: 100vw;
    }
    .login .img > img{
        display: none;
    }
    .form {
        padding: 3em;
        padding-bottom: 0;
        padding-top: 0;
    }
    .form > img {
        width: 75vw;
    }
}