body {
    --loader-size: 250px
}

.d-none {
    display: none;
}

.preloader {
    direction: ltr;
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: 5s;
}

.preloader:before {
    content: '';
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    /*background: rgba(28,21,112,0.9);*/
    background: #012042;
    transition: 2s;
}

.preloader:after {
    content: '';
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    /*background: rgba(28,21,112,0.9);*/
    background: #012042;
    transition: 2s;
}

.preloader.complate:before {
    right: -50%;
}

.preloader.complate:after {
    left: -50%;
}

.ateyload {
    direction: ltr;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 20500;
}

.okColor {
    color: #fff !important;
}

.cssload-loader {
    z-index: 21000;
    position: relative;
    left: calc(50% - var(--loader-size, 200px) / 2);
    top: calc(50% - var(--loader-size, 200px) / 2);
    width: var(--loader-size, 200px);
    height: var(--loader-size, 200px);
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    display: flex;
    justify-content: center;
    background-image: url(../logo-loading.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.cssload-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: transparent;
}

.cssload-inner.cssload-two {
    right: 0;
    top: 0;
    border-left: 16px solid #02fd67;
    /*border-left: 10px solid yellow;*/
    animation: cssload-rotate-two 1.6s linear infinite;
    -o-animation: cssload-rotate-two 1.6s linear infinite;
    -ms-animation: cssload-rotate-two 1.6s linear infinite;
    -webkit-animation: cssload-rotate-two 1.6s linear infinite;
    -moz-animation: cssload-rotate-two 1.6s linear infinite;
}

.preloader.complate, .cssload-loader.complate, .ateyload.complate {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cssload-loader.complate {
    transition: 3s;
}

.ateyload.complate {
    transition: 5s;
}

@keyframes cssload-rotate-two {
    0% {
        transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg);
    }
}

@-o-keyframes cssload-rotate-two {
    0% {
        -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg);
    }
}

@-ms-keyframes cssload-rotate-two {
    0% {
        -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg);
    }
}

@-webkit-keyframes cssload-rotate-two {
    0% {
        -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg);
    }
}

@-moz-keyframes cssload-rotate-two {
    0% {
        -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg);
    }
}

}