.banner-registro,
.banner-registro-estudiante,
.banner-nuevacontra,
.banner-recuperacuenta{
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    height: 100vh;
    position: relative;
}
.banner-registro{
    background-image: url('../../img/Iconos_Mattes/Pantallas/Graficos/Mattes_Comedor.png');
}

.banner-registro-estudiante {
    background-image: url('../../img/Iconos_Mattes/Pantallas/Graficos/bedroom-interior.jpg');
}

.banner-nuevacontra {
    background-image: url('../../img/Iconos_Mattes/Pantallas/Graficos/log-in-secured-access-verify-identity-password-concept.jpg');
}

.banner-recuperacuenta {
    background-image: url('../../img/Iconos_Mattes/Pantallas/Graficos/23771568875_6b87b51754_z.jpg');
}

.registro {
    background-color: #fff;
    border-radius: 17px;
    filter: drop-shadow(4px 4px 3px #4e4c4c);
    padding: 2.5rem 3rem;
    position: absolute;
    top: 150px;
    left: auto;
    right: auto;
    opacity: 0.8;
}

@media (min-width:500px) {
    .registro {
        top: 235px;
    }
}

@media (min-width:900px) {
    .registro {
        top: 275px;
    }
}

@media (min-width:1100px) {
    .registro{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.signin-logo {
    font-family: "Gothicb";
    z-index: 11;
}

.text-cuenta {
    color: #0088F7;
    font-family: "Gothic";
}

.nueva-contraseña,
.recupera-cuenta {
    background-color: #fff;
    border-radius: 17px;
    filter: drop-shadow(4px 4px 3px #4e4c4c);
    padding: 2.5rem 3rem;
    position: absolute;
    top: 150px;
    left: -45px;
    opacity: 1;
}

@media (min-width:400px) {
    .nueva-contraseña,
    .recupera-cuenta{
        left:0px;
    }
}
@media (min-width:450px) {
    .nueva-contraseña,
    .recupera-cuenta{
        left:25px;
    }
}
@media (min-width:500px) {
    .nueva-contraseña,
    .recupera-cuenta{
        left: 50%;
        transform: translate(-50%, 0%);
    }
}

@media (min-width:768px) {
    .nueva-contraseña,
    .recupera-cuenta{
        top:15%;
    }
}
@media (min-width:992px) {
    .nueva-contraseña,
    .recupera-cuenta{
        top:15%;
        transform: translate(-5%, 5%);
    }
}
@media (min-width:1200px) {
    .nueva-contraseña,
    .recupera-cuenta{
        top:15%;
        transform: translate(20%, 10%);
    }
}