.righToLeft {
    animation: righToLeft cubic-bezier(.4,0,.2,1) 2s;
}

.fadeInUp>div {
    animation: fadeInUp cubic-bezier(.4,0,.2,1) 1s;
}

.fadeIn {
    animation: fadeIn cubic-bezier(.4,0,.2,1) 1s;
}

.login-bg {
    background: url('../img/unsplash/pexels-athena.webp') no-repeat center center fixed;
    background-size: cover;
    backdrop-filter: blur(10px);

}

@media (max-width: 992px) {

    .login-form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 200px;
        min-width: 100%;
        z-index: 2;
        background: none !important;
    }

    .login-form>div {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.75);
        padding: 20px !important;
        margin: 15px !important;
    }

    .login-saludo {
        display: none;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes righToLeft {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}