@keyframes load {
    0% {
        opacity: 0.0;
        /*         font-size: 10px; */
        /* 				font-weight: 400; */
        filter: blur(5px);
        letter-spacing: 3px;
    }

    100% {
        /*         opacity: 1; */
        /*         font-size: 12px; */
        /* 				font-weight:600; */
        /* 				filter: blur(0); */
    }
}

.animate {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: auto;
    font-size: 12px;
    font-weight:300;
    font-family: 'Open Sans', sans-serif;
    animation: load 1.2s infinite 0s ease-in-out;
    animation-direction: alternate;
    text-shadow: 0 0 1px white;
}

body, html {
    color: #c3c3c3;
    font-family: 'Open Sans', sans-serif;
    background-color: #14181f;
}

.cover {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #14181f;
}

#unity-loading-bar {
    color: #c3c3c3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    display: none;
}

figure {
    margin: 0;
    transform: translate(-50%,-50%) rotate(0deg) scale(1.4,1.4);
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 150px;
    box-sizing: border-box;
    animation: rotation 20s infinite linear;
}

    figure div:after {
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid #c3c3c3;
        box-sizing: border-box;
        position: absolute;
        left: 20px;
        top: 20px;
        animation: shuffle 2s infinite;
    }

    figure div:nth-child(1) {
        transform: rotate(0deg)
    }

        figure div:nth-child(1):after {
            animation-delay: -0.5s;
        }

    figure div:nth-child(2) {
        transform: rotate(45deg)
    }

        figure div:nth-child(2):after {
            animation-delay: -1s;
        }

    figure div:nth-child(3) {
        transform: rotate(90deg)
    }

        figure div:nth-child(3):after {
            animation-delay: -1.5s;
        }

    figure div:nth-child(4) {
        transform: rotate(135deg)
    }

        figure div:nth-child(4):after {
            animation-delay: -2s;
        }

    figure div:nth-child(5) {
        transform: rotate(180deg)
    }

        figure div:nth-child(5):after {
            animation-delay: -2.5s;
        }

    figure div:nth-child(6) {
        transform: rotate(225deg)
    }

        figure div:nth-child(6):after {
            animation-delay: -3s;
        }

    figure div:nth-child(7) {
        transform: rotate(270deg)
    }

        figure div:nth-child(7):after {
            animation-delay: -3.5s;
        }

    figure div:nth-child(8) {
        transform: rotate(315deg)
    }

        figure div:nth-child(8):after {
            animation-delay: -4s;
        }

@keyframes rotation {
    100% {
        transform: translate(-50%,-50%) rotate(-360deg) scale(1.4,1.4);
    }
}

@keyframes shuffle {
    50% {
        transform: scale(0,0) rotate(-90deg);
        border-radius: 0%;
    }
}