.overlay-loading-effect {
    @include position(fixed, 0, 0, 0, 0);
    z-index: 991;
    background: rgba(#fff, .9);
    display: none;
}

.wolfo-loading {
    &.open {
        .cssload-loader {
            display: inline-block;
        }

        .overlay-loading-effect {
            display: block;
        }
    }
}

.cssload-loader {
    display: none;
    position: fixed;
    @include center-position();
    z-index: 991;
    height: 100%;
    width: 100%;
}

.cssload-loader .circle {
    width: 15px;
    height: 15px;
    position: absolute;
    background: $highlight_color;
    border-radius: 50%;
    margin: -7.5px;
    -webkit-animation: mesh 3s ease-in-out infinite;
    animation: mesh 3s ease-in-out infinite -1.5s;
}

.cssload-loader > div .circle:last-child {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.cssload-loader > div {
    position: absolute;
    top: 50%;
    #{$left}: 50%;
}

.cssload-loader > div:last-child {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

@-webkit-keyframes mesh {
    0% {
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    50.00001% {
        -webkit-transform-origin: 50% 200%;
        transform-origin: 50% 200%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: 50% 200%;
        transform-origin: 50% 200%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes mesh {
    0% {
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    50% {
        -webkit-transform-origin: 50% -100%;
        transform-origin: 50% -100%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    50.00001% {
        -webkit-transform-origin: 50% 200%;
        transform-origin: 50% 200%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform-origin: 50% 200%;
        transform-origin: 50% 200%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}