.login{
    background: #00a885;
    border-radius: 4px;
    width: 500px;
    margin: 8% auto;
    padding: 10px;
    color: white;
}

.login-container{
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), 
    url(../img/fondo_manzanas.jpg);
    background-size: cover;
    background-size: 500px 1000px;
    padding-top: 5%;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;

}

.forgot-password-container{
    background: #F2F2F2;
    border-radius: 4px;
    width: 500px;
    margin: 10% auto;
    padding: 10px;
}


/* desktop big */
@media(min-width: 1000px) and (max-width: 1200px){

}

/*desktop small */
@media(min-width: 730px) and (max-width:1000px) {

}
/* tablet landscape */
@media(min-width: 600px) and (max-width: 730px){

}

/* mobile landscape and tablet */
@media(min-width: 450px) and (max-width: 600px){
    .login{
        width: 100%;
    }

    .forgot-password-container{
        width: 100%;
    }
}

/* Mobile */
@media(min-width: 320px) and (max-width: 450px){
    .login{
        width: 100%;
    }

    .forgot-password-container{
        width: 100%;
    }
}

/* Mobile small */
@media(max-width: 320px){
    .login{
        width: 100%;
    }
    
    .forgot-password-container{
        width: 100%;
    }
}