/*? @Ricardo Palencia Santuario | whatsapp: 5527495616 | Click*Space */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

/* Body */
body{
    background-color: rgba(0,33,71, .9);
    font-family: 'Montserrat', sans-serif;
    background-image: url(https://res.cloudinary.com/dvm0absef/image/upload/v1691811802/Home%20Lykos/recuperar_pw_logo_jeuopw.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    }

.container{
    width: 85%;
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 3%;
    }

form{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-size: 1.5rem;
    color: #fff;
    display: block;
    }
    form h3{
        padding-top: 3rem;
        font-weight: 200;
        font-size: 1.5em;
        padding-bottom: 2em;
        color: rgb(255,184,28);
        }
    form .usuario{
        width: 55%;
        text-align: center;
        height: 2.98rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 1.2em;
        color: rgb(0,33,71);
        border-radius: 7px;
        border: none;
        outline: none;
        }

    form .recuperar{
        width: 55%;
        height: 2.98rem;
        margin-top: 3rem;
        color: rgb(0,33,71);
        border-color: rgb(255,184,28);
        background-color: rgb(255,184,28);
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 1.0em;
        border-radius: 7px;
        display: block;
        margin: 0 auto;
        margin-top: 50px;
        }
        form .recuperar:hover{
            cursor: pointer;
            border-color: rgb(255,184,28);
            background-color: rgb(0,33,71);
            color: #fff;
            }

/* ICON */
header img{
    width: 250px;
    height: 68.16px;
    }

/*? Resposive 1100 / 1400 */
@media screen and (max-width:1100px) and (max-height: 1400px) {
body{
    background-color: rgba(0,33,71,.9);
    font-family: 'Montserrat', sans-serif;
    background-image: url(https://res.cloudinary.com/dvm0absef/image/upload/v1691811822/Home%20Lykos/recuperar_pw_logo_movil_nxvs1h.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;}

.container{
    width: 85%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 4%;}

form{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-size: 1.5rem;
    color: #fff;
    display: block;}
    form h3{
        padding-top: 1.5rem;
        font-size: 1.1em;
        margin-left: 20%;
        width: 60%;
        padding-bottom: 2em;}
    form .usuario{
        width: 90%;
        text-align: center;
        margin-top: 1.5em;
        height: 4rem;
        font-size: 1.7em;
        border-radius: 10px;}

    form .recuperar{
        width: 90%;
        height: 4rem;
        margin-top: 3rem;
        font-size: 1.7em;
        border-radius: 10px;}
        form .recuperar:hover{
            cursor: pointer;
            border-color: rgb(255,184,28);
            background-color: rgb(0,33,71);
            color: #fff;}

/* ICON */
header img{
    width: 250px;
    height: 68.16px;
    margin-left: 30%;}

}

/*? Resposive 1100 / 800 */
@media screen and (max-width:1100px) and (max-height: 800px) {
    body{
    background-color: rgba(0,33,71,.9);
    font-family: 'Montserrat', sans-serif;
    background-image: url(https://res.cloudinary.com/dvm0absef/image/upload/v1691811822/Home%20Lykos/recuperar_pw_logo_movil_nxvs1h.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;}

.container{
    width: 85%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 2%;}

form{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-size: 1rem;
    color: #fff;
    display: block;}
    form h3{
        padding-top: 1.5rem;
        font-size: 1.1em;
        margin-left: 30%;
        width: 40%;
        padding-bottom: 2em;}
    form .usuario{
        width: 90%;
        text-align: center;
        margin-top: 1.5em;
        height: 2.5rem;
        font-size: 1em;
        border-radius: 10px;}

    form .recuperar{
        width: 90%;
        height: 2.5rem;
        margin-top: 3rem;
        font-size: 1em;
        border-radius: 10px;}
        form .recuperar:hover{
            cursor: pointer;
            border-color: rgb(255,184,28);
            background-color: rgb(0,33,71);
            color: #fff;}

/* ICON */
header img{
    width: 187.5px;
    height: 51.12px;
    margin-left: 40%;}

}

/*? Resposive 900 / 1100 */
@media screen and (max-width:900px) and (max-height: 1100px) {
body{
    background-color: rgba(0,33,71,.9);
    font-family: 'Montserrat', sans-serif;
    background-image: url(https://res.cloudinary.com/dvm0absef/image/upload/v1691811822/Home%20Lykos/recuperar_pw_logo_movil_nxvs1h.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;}

.container{
    width: 85%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 4%;}

form{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-size: 1.2rem;
    color: #fff;
    display: block;}
    form h3{
        padding-top: 1.5rem;
        font-size: 1.1em;
        margin-left: 20%;
        width: 60%;
        padding-bottom: 2em;}
    form .usuario{
        width: 90%;
        text-align: center;
        margin-top: 1.5em;
        height: 3rem;
        font-size: 1.5em;
        border-radius: 10px;}

    form .recuperar{
        width: 90%;
        height: 3rem;
        margin-top: 3rem;
        font-size: 1.5em;
        border-radius: 10px;}
        form .recuperar:hover{
            cursor: pointer;
            border-color: rgb(255,184,28);
            background-color: rgb(0,33,71);
            color: #fff;
            }

/* ICON */
header img{
    width: 250px;
    height: 68.16px;
    margin-left: 30%;}

}

/*? Resposive 550 / 850 */
@media screen and (max-width:550px) and (max-height: 850px) {
body{
    background-color: rgba(0,33,71,.9);
    font-family: 'Montserrat', sans-serif;
    background-image: url(https://res.cloudinary.com/dvm0absef/image/upload/v1691811822/Home%20Lykos/recuperar_pw_logo_movil_nxvs1h.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;}

.container{
    width: 85%;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 3%;}

form{
    width: 100%;
    text-align: center;
    padding-top: 2em;
    font-size: .65rem;
    color: #fff;
    display: block;}
    form h3{
        padding-top: 1.5rem;
        font-size: 1.1em;
        margin-left: 15%;
        width: 70%;
        padding-bottom: 2em;}
    form .usuario{
        width: 90%;
        text-align: center;
        margin-top: 1.5em;
        height: 2rem;
        font-size: 1.2em;
        border-radius: 10px;}

    form .recuperar{
        width: 90%;
        height: 2rem;
        margin-top: 3rem;
        font-size: 1.2em;
        border-radius: 10px;}
        form .recuperar:hover{
            cursor: pointer;
            border-color: rgb(255,184,28);
            background-color: rgb(0,33,71);
            color: #fff;
            }

/* ICON */
header img{
    width: 125px;
    height: 34.08px;
    margin-left: 30%;}

}