.k-main-loading {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 10000000;
    background: rgba(0, 0, 0, 0.38);
}

    .k-main-loading .k-loading {
        z-index: 100000000;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

        .k-main-loading .k-loading:before {
            font-size: 4em;
            margin-top: -.5em;
            margin-left: -.5em;
            width: 1em;
            height: 1em;
            -webkit-animation: k-loading-animation .7s linear infinite;
            animation: k-loading-animation .7s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            display: inline-block;
            content: "";
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
            border-radius: 50%;
            border: .05em solid currentColor;
            border-top-color: transparent;
            border-bottom-color: transparent;
            background-color: transparent;
            border-width: 0.08em !important;
            border-right-color: #fff;
            border-left-color: #fff;
        }

        .k-main-loading .k-loading:after {
            font-size: 4em;
            margin-top: -.25em;
            margin-left: -.25em;
            width: .5em;
            height: .5em;
            animation: k-loading-animation reverse 1.4s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            display: inline-block;
            content: "";
            -webkit-box-sizing: inherit;
            box-sizing: inherit;
            border-radius: 50%;
            border: .05em solid currentColor;
            border-top-color: transparent;
            border-bottom-color: transparent;
            background-color: transparent;
            border-width: 0.08em !important;
            border-right-color: #fff;
            border-left-color: #fff;
        }

@-webkit-keyframes k-loading-animation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes k-loading-animation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}


.global-loader {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999999999;
    overflow: hidden;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.88);
    display: none;
}

    .global-loader:before, .global-loader:after {
        display: block;
        position: fixed;
        content: "" !important;
        left: 0;
        bottom: 0;
        height: 6px !important;
        z-index: 9999;
        border-radius: 3px;
        visibility: hidden;
        will-change: left, right;
    }

    .global-loader:before {
        background-color: #E91E63;
        -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    .global-loader:after {
        background-color: #2196F3;
        -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        -webkit-animation-delay: 1.15s;
        animation-delay: 1.15s;
    }

    .global-loader.show-loading {
        visibility: visible !important;
        display: block !important;
    }



@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}



/**
 * Create the loop delay with
 * the extra keyframes
 */
@-webkit-keyframes moveup {
    0%, 60%, 100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }

    25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
    }
}

@keyframes moveup {
    0%, 60%, 100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }

    25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
    }
}

@-webkit-keyframes movedown {
    0%, 60%, 100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }

    25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
    }
}

@keyframes movedown {
    0%, 60%, 100% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
    }

    25% {
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
        transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
    }
}
/**
 * Square layer styles
 */
.global-loader .layer {
    display: block;
    position: absolute;
    height: 3em;
    width: 3em;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
}

    .global-loader .layer:nth-of-type(1) {
        background: #534a47;
        margin-top: 1.5em;
        -webkit-animation: movedown 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s infinite normal;
        animation: movedown 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.5s infinite normal;
    }

        .global-loader .layer:nth-of-type(1):before {
            content: '';
            position: absolute;
            width: 85%;
            height: 85%;
            background: #37332f;
        }

    .global-loader .layer:nth-of-type(2) {
        background: #5a96bc;
        margin-top: 0.75em;
    }

    .global-loader .layer:nth-of-type(3) {
        background: rgba(255, 255, 255, 0.6);
        -webkit-animation: moveup 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
        animation: moveup 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
    }

.global-loader .lod-con {
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}