htm, body {
    background-color: white;
    overflow: hidden;
}

.barra-sup {
    display: none !important;
}

.ventana-inicio-sesion {
    width: 50vw;
    font-size: 150%;
    font-weight: bold;
    background-color: transparent;
    justify-content: space-between;
}

.titulo {
    margin-bottom: 3vh;
}

.nuevo-pass {
	width: 100%;
	font-size: 1rem;
	font-weight: normal;
	cursor: pointer;
}

.cmdingresar {
    box-shadow: 0 0 7.5px 2.5px #213649;
    border-radius: 10px;
    padding: 3px 10px;
    background-color: #f9ae2e;
}

.header-height {
    height: var(--header-height);
}

.footer-height {
    height: var(--footer-height);
}

.img-header {
    width: 100%;
    height: auto;
    content: url(../imgs/header_v.jpg);
}

.img-footer {
    width: 100%;
    height: auto;
    content: url(../imgs/footer_v.jpg);
}

@media screen and (orientation: landscape) {
    :root {
        --header-height: 30vh;
        --footer-height: 25vh;
    }

    .img-header {
        content: url(../imgs/header_h.jpg);
    }

    .img-footer {
        content: url(../imgs/footer_h.jpg);
    }

    .ventana-inicio-sesion {
        border-radius: 20px;
        box-shadow: 4px 4px 7.5px 2.5px #213649;
        padding: 0 50px;
        background-color: whitesmoke;
        justify-content: space-around;
    }

    .titulo {
        margin-top: 2vh;
    }

    .cmdingresar {
        margin-bottom: 2vh;
    }
}

@media only screen and (max-width: 384px) {
    .ventana-inicio-sesion {
        width: 100vw;
        font-size: 100%;
    }
}

@media only screen and (min-width: 384px) and (max-width: 414px) {
    .ventana-inicio-sesion {
        width: 100vw;
        font-size: 125%;
    }
}

@media only screen and (min-width: 414px) {
    .ventana-inicio-sesion {
        font-size: 100%;
    }
}

@media only screen and (min-width: 280px) and (max-width: 320px) {
    .ventana-inicio-sesion {
        width: 80vw;
    }
}

@media only screen and (min-width: 320px) and (max-width: 360px) {
    .ventana-inicio-sesion {
        width: 70vw;
    }
}

@media only screen and (min-width: 360px) and (max-width: 414px) {
    .ventana-inicio-sesion {
        width: 60vw;
    }
}

@media only screen and (min-width: 414px) and (max-width: 600px) {
    .ventana-inicio-sesion {
        width: 55vw;
    }
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
    .ventana-inicio-sesion {
        width: 40vw;
    }
}

@media only screen and (min-width: 8000px) and (max-width: 1024px) {
    .ventana-inicio-sesion {
        width: 50vw;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1440px) {
    .ventana-inicio-sesion {
        width: 25vw;
        font-size: 125%;
        font-weight: bold;
    }
}

    @media only screen and (min-width: 1440px) {
        .ventana-inicio-sesion {
            width: 20vw;
            font-size: 100%;
            font-weight: bold;
        }
    }