/*==============================================================
PRELOADER
==============================================================*/

.preloader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.preloader.hide{
    opacity:0;
    visibility:hidden;
    transition:.4s;
}

.loader{
    width:70px;
    height:70px;
    border-radius:50%;
    border:5px solid #eee;
    border-top-color:var(--primary);
    animation:loaderRotate 1s linear infinite;
}

@keyframes loaderRotate{

    to{
        transform:rotate(360deg);
    }

}

/*==============================================================
PAGE LOADER
==============================================================*/

.page-loader{
    position:fixed;
    inset:0;
    z-index:99999;

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

    background:#fff;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

.page-loader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/*==============================================================
WRAPPER
==============================================================*/

.loader-wrapper{
    width:100%;
    max-width:340px;

    padding:20px;

    text-align:center;
}

/*==============================================================
LOGO
==============================================================*/

.loader-logo{
    width:180px;
    max-width:70%;

    display:block;
    margin:0 auto 35px;

    animation:loaderLogo 1.4s ease infinite alternate;
}

@keyframes loaderLogo{

     0%{
        transform:translateY(0) scale(.97);
    }

    50%{
        transform:translateY(-8px) scale(1);
    }

    100%{
        transform:translateY(0) scale(1.03);
    }

}

/*==============================================================
LOADING BAR
==============================================================*/

.loader-line{
    position:relative;

    width:100%;
    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:#ececec;
}

.loader-line span{
    position:absolute;
    left:-40%;
    top:0;

    width:40%;
    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #e31e24,
        #ff595e,
        #e31e24
    );

    animation:loadingBar 1.2s linear infinite;
}

@keyframes loadingBar{

    from{
        left:-40%;
    }

    to{
        left:100%;
    }

}

/*==============================================================
TEXT
==============================================================*/

.loader-wrapper::after{

    content:"Loading...";

    display:block;

    margin-top:20px;

    font-size:.9rem;

    letter-spacing:4px;

    color:#777;

    text-transform:uppercase;

}

/*==============================================================
BODY LOCK
==============================================================*/

body.loading{
    overflow:hidden;
}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:768px){

    .loader-logo{
        width:140px;
    }

    .loader-wrapper{
        max-width:260px;
    }

}