/* =========================================================
   OLI TRAINING ACADEMY
   PROFESSIONAL PAGE LOADER
========================================================= */

#oliPageLoader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


/* HIDE LOADER */

#oliPageLoader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* LOADER CONTENT */

.oli-loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* LOGO */

.oli-loader-logo {
    width: 125px;
    height: 125px;

    object-fit: contain;

    animation: oliLogoSpin 1.8s linear infinite;

    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
}


/* LOGO TURNING ANIMATION */

@keyframes oliLogoSpin {

    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }

}


/* ACADEMY NAME */

.oli-loader-content h2 {

    margin: 22px 0 5px;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color: #111111;
}


/* LOADING TEXT */

.oli-loader-content p {

    margin: 0;

    font-size: 14px;

    color: #777777;

    letter-spacing: 1px;
}


/* THREE DOTS */

.oli-loading-dots {

    display: flex;
    gap: 6px;

    margin-top: 14px;
}


.oli-loading-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f2a900;

    animation: loadingDots 1.2s infinite ease-in-out;
}


.oli-loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}


.oli-loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes loadingDots {

    0%,
    80%,
    100% {
        transform: scale(0.65);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .oli-loader-logo {
        width: 100px;
        height: 100px;
    }

    .oli-loader-content h2 {
        font-size: 17px;
    }

    .oli-loader-content p {
        font-size: 13px;
    }

}