/* =====================================================
   THINKORA LABS
   LOADER
===================================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    height: 100%;

}


body {

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


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

.loader {

    width: 100%;
    height: 100vh;

    display: flex;

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

    background: #ffffff;

}


/* =====================================================
   LOADER CONTENT
===================================================== */

.loader-content {

    width: min(420px, 80%);

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =====================================================
   THINKORA SYMBOL
===================================================== */

.loader-symbol {

    width: 150px;
    height: 150px;

    display: flex;

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

    border: 1px solid #07111f;

    border-radius: 50%;

    background: #ffffff;

    overflow: hidden;

    margin-bottom: 35px;

}


.loader-symbol img {

    width: 72%;
    height: 72%;

    display: block;

    object-fit: contain;

}


/* =====================================================
   WELCOME
===================================================== */

.loader-welcome {

    margin-bottom: 18px;

    color: #07111f;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;

}


/* =====================================================
   LOADING LINE
===================================================== */

.loader-line {

    width: 100%;
    height: 1px;

    background: rgba(7, 17, 31, 0.15);

    overflow: hidden;

}


.loader-progress {

    width: 0%;
    height: 100%;

    background: #07111f;

    transition:
        width 0.08s linear;

}


/* =====================================================
   LOADING STATUS
===================================================== */

.loader-status {

    width: 100%;

    display: flex;

    justify-content: space-between;

    margin-top: 14px;

    color: rgba(7, 17, 31, 0.55);

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .loader-content {

        width: calc(100% - 60px);

    }


    .loader-symbol {

        width: 125px;
        height: 125px;

        margin-bottom: 30px;

    }


    .loader-symbol img {

        width: 70%;
        height: 70%;

    }


    .loader-welcome {

        font-size: 10px;

        letter-spacing: 0.24em;

        margin-bottom: 16px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .loader-content {

        width: calc(100% - 45px);

    }


    .loader-symbol {

        width: 110px;
        height: 110px;

    }

}