/*Spinning Circle*/

.anim-spinning-circle {
    position: relative;
    animation: anim-spinning-circle-infinite-spin 3600ms infinite linear;
}

    .anim-spinning-circle > div {
        width: 50%;
        height: 50%;
        position: absolute;
    }

        .anim-spinning-circle > div:nth-child(1) {
            background-color: #2F4F4F;
            top: 0;
            left: 0;
            border-top-left-radius: 100%;
            border-bottom-right-radius: 100%;
            animation: anim-spinning-circle-infinite-spin 1800ms infinite ease-in-out, anim-spinning-circle-top-left-shift 1800ms infinite ease-in-out;
        }

        .anim-spinning-circle > div:nth-child(2) {
            background-color: #808080;
            top: 0;
            right: 0;
            border-top-right-radius: 100%;
            border-bottom-left-radius: 100%;
            animation: anim-spinning-circle-infinite-spin 1800ms infinite ease-in-out, anim-spinning-circle-top-right-shift 1800ms infinite ease-in-out;
        }

        .anim-spinning-circle > div:nth-child(3) {
            background-color: #AFCFCF;
            bottom: 0;
            right: 0;
            border-top-left-radius: 100%;
            border-bottom-right-radius: 100%;
            animation: anim-spinning-circle-infinite-spin 1800ms infinite ease-in-out, anim-spinning-circle-bottom-right-shift 1800ms infinite ease-in-out;
        }

        .anim-spinning-circle > div:nth-child(4) {
            background-color: #C0C0C0;
            bottom: 0;
            left: 0;
            border-top-right-radius: 100%;
            border-bottom-left-radius: 100%;
            animation: anim-spinning-circle-infinite-spin 1800ms infinite ease-in-out, anim-spinning-circle-bottom-left-shift 1800ms infinite ease-in-out;
        }

@keyframes anim-spinning-circle-infinite-spin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes anim-spinning-circle-top-left-shift {

    0% {
        top: 0%;
        left: 0%;
    }

    50% {
        top: -25%;
        left: -25%;
    }

    100% {
        top: 0%;
        left: 0%;
    }
}

@keyframes anim-spinning-circle-top-right-shift {

    0% {
        top: 0%;
        right: 0%;
    }

    50% {
        top: -25%;
        right: -25%;
    }

    100% {
        top: 0%;
        right: 0%;
    }
}

@keyframes anim-spinning-circle-bottom-right-shift {

    0% {
        bottom: 0%;
        right: 0%;
    }

    50% {
        bottom: -25%;
        right: -25%;
    }

    100% {
        bottom: 0%;
        right: 0%;
    }
}

@keyframes anim-spinning-circle-bottom-left-shift {

    0% {
        bottom: 0%;
        left: 0%;
    }

    50% {
        bottom: -25%;
        left: -25%;
    }

    100% {
        bottom: 0%;
        left: 0%;
    }
}

/*End of Spinning Circle*/