/* prevColor:#3c8dbc, red: #d81c24, blue:#1a0f5c  */

#splash-dimloader {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('../logo/BKH_bg.jpg') rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
}

.splash-loader {
    position: absolute;
    top: 45%;
    left: calc(50% - 100px);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: 10000;
}

.splash-inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

    .splash-inner.one {
        left: 0%;
        top: 0%;
        animation: rotate-one 2s linear infinite;
        -webkit-animation: rotate-one 2s linear infinite;
        border-bottom: 15px solid #ddd;
    }

    .splash-inner.two {
        right: 0%;
        top: 0%;
        animation: rotate-two 2s linear infinite;
        -webkit-animation: rotate-two 2s linear infinite;
        border-right: 15px solid #ddd;
    }

    .splash-inner.three {
        right: 0%;
        bottom: 0%;
        animation: rotate-three 2s linear infinite;
        -webkit-animation: rotate-three 2s linear infinite;
        border-top: 15px solid #ddd;
    }

@-webkit-keyframes rotate-one {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@-webkit-keyframes rotate-two {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@-webkit-keyframes rotate-three {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}



@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}