﻿.ZoneLoadingCtrl-layer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(68, 68, 68, 0.3);
    z-index: 11111;
    cursor: default
}

    .ZoneLoadingCtrl-layer .ZoneLoadingCtrl-wrap {
        display: table;
        width: 100%;
        height: 100%;
    }

        .ZoneLoadingCtrl-layer .ZoneLoadingCtrl-wrap .ZoneLoadingCtrl-text {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            text-shadow: 2px 3px 2.6px #a2a2a2;
            font-size: 3.8em;
            position: relative;
            top: -20px;
        }

    .ZoneLoadingCtrl-layer.active-ZoneLoadingCtrl .ZoneLoadingCtrl-wrap .ZoneLoadingCtrl-text span:nth-child(1) {
        animation: ZoneLoadingCtrl-01 0.82s infinite;
    }

    .ZoneLoadingCtrl-layer.active-ZoneLoadingCtrl .ZoneLoadingCtrl-wrap .ZoneLoadingCtrl-text span:nth-child(2) {
        animation: ZoneLoadingCtrl-02 0.82s infinite;
    }

    .ZoneLoadingCtrl-layer.active-ZoneLoadingCtrl .ZoneLoadingCtrl-wrap .ZoneLoadingCtrl-text span:nth-child(3) {
        animation: ZoneLoadingCtrl-03 0.82s infinite;
    }

@keyframes ZoneLoadingCtrl-01 {
    25% {
        color: #000;
    }

    50% {
        color: #fff;
    }
}

@keyframes ZoneLoadingCtrl-02 {
    50% {
        color: #000;
    }

    75% {
        color: #fff;
    }
}

@keyframes ZoneLoadingCtrl-03 {
    75% {
        color: #000;
    }

    100% {
        color: #fff;
    }
}
