.spinner {
    width: 96px;
    height: 96px;
    left: 50%;
    top: 50%;
    margin: -48px 0px 0px -48px;
    position: absolute;
    perspective: 70px;
    transform-style: preserve-3d;
}
@keyframes bounce-in {
    0% {
        transform: translate3d(0px, 0px, 0px) scale(0);
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
    }
    37% {
        transform: translate3d(0px, 0px, 0px) scale(1.5);
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }
    56% {
        transform: translate3d(0px, 0px, 0px) scale(0.8);
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
    }
    73% {
        transform: translate3d(0px, 0px, 0px) scale(1.2);
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }
    83% {
        transform: translate3d(0px, 0px, 0px) scale(0.9);
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
    }
    90% {
        transform: translate3d(0px, 0px, 0px) scale(1.1);
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }
    95% {
        transform: translate3d(0px, 0px, 0px) scale(0.9);
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
    }
    100% {
        transform: translate3d(0px, 0px, 0px) scale(1.0);
    }
}
.spinner .main-dot {
    width: 50px;
    height: 50px;
    left: 48px;
    top: 48px;
    margin: -25px 0px 0px -25px;
    position: absolute;
    transform: scale(0);
    animation-delay: 0.5s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
    animation-name: bounce-in;
}
.spinner .small-dot {
    width: 20px;
    height: 20px;
    left: 48px;
    top: 48px;
    margin: -10px 0px 0px -10px;
    position: absolute;
    border-radius: 10px;
    opacity: 0;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes circle-1 {
    0% {
        opacity: 0;
        transform: translate3d(13.89px, -14.98px, -34.39px) scale(0.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(14.38px, -15.47px, -33.97px) scale(0.35);
    }
    6% {
        transform: translate3d(15.78px, -16.91px, -32.64px) scale(0.35);
    }
    9% {
        transform: translate3d(17.97px, -19.18px, -30.15px) scale(0.35);
    }
    12% {
        transform: translate3d(20.67px, -22.08px, -26.17px) scale(0.35);
    }
    15% {
        transform: translate3d(23.46px, -25.24px, -20.31px) scale(0.35);
    }
    18% {
        transform: translate3d(25.68px, -28.10px, -12.28px) scale(0.35);
    }
    21% {
        transform: translate3d(26.52px, -29.88px, -2.07px) scale(0.35);
    }
    24% {
        transform: translate3d(25.01px, -29.64px, 9.81px) scale(0.35);
    }
    27% {
        transform: translate3d(20.30px, -26.43px, 22.12px) scale(0.35);
    }
    30% {
        transform: translate3d(11.99px, -19.57px, 32.76px) scale(0.35);
    }
    33% {
        transform: translate3d(0.56px, -9.06px, 38.96px) scale(0.35);
    }
    36% {
        transform: translate3d(-12.25px, 3.93px, 37.87px) scale(0.35);
    }
    39% {
        transform: translate3d(-23.21px, 16.62px, 28.02px) scale(0.35);
    }
    42% {
        transform: translate3d(-28.79px, 24.74px, 12.62px) scale(0.35);
    }
    45% {
        transform: translate3d(-28.92px, 27.36px, -3.90px) scale(0.35);
    }
    48% {
        transform: translate3d(-24.92px, 25.32px, -18.37px) scale(0.35);
    }
    51% {
        transform: translate3d(-18.48px, 20.19px, -29.17px) scale(0.35);
    }
    54% {
        transform: translate3d(-11.12px, 13.56px, -35.95px) scale(0.35);
    }
    57% {
        transform: translate3d(-3.98px, 6.72px, -39.23px) scale(0.35);
    }
    60% {
        transform: translate3d(2.27px, 0.53px, -39.93px) scale(0.35);
    }
    63% {
        transform: translate3d(7.31px, -4.57px, -39.06px) scale(0.35);
    }
    66% {
        transform: translate3d(11.09px, -8.43px, -37.50px) scale(0.35);
    }
    69% {
        transform: translate3d(13.68px, -11.07px, -35.92px) scale(0.35);
    }
    72% {
        transform: translate3d(15.18px, -12.59px, -34.80px) scale(0.35);
    }
    75% {
        transform: translate3d(15.67px, -13.09px, -34.40px) scale(0.35);
    }
    100% {
        transform: translate3d(13.89px, -14.98px, -34.39px) scale(0.35);
    }
}

@keyframes circle-2 {
    0% {
        opacity: 0;
        transform: translate3d(5.06px, -5.10px, -39.35px) scale(0.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(5.62px, -5.66px, -39.20px) scale(0.35);
    }
    6% {
        transform: translate3d(7.27px, -7.33px, -38.64px) scale(0.35);
    }
    9% {
        transform: translate3d(9.96px, -10.05px, -37.41px) scale(0.35);
    }
    12% {
        transform: translate3d(13.51px, -13.72px, -35.06px) scale(0.35);
    }
    15% {
        transform: translate3d(17.61px, -18.08px, -31.03px) scale(0.35);
    }
    18% {
        transform: translate3d(21.73px, -22.70px, -24.75px) scale(0.35);
    }
    21% {
        transform: translate3d(25.07px, -26.86px, -15.82px) scale(0.35);
    }
    24% {
        transform: translate3d(26.57px, -29.60px, -4.25px) scale(0.35);
    }
    27% {
        transform: translate3d(25.09px, -29.76px, 9.23px) scale(0.35);
    }
    30% {
        transform: translate3d(19.69px, -26.21px, 22.92px) scale(0.35);
    }
    33% {
        transform: translate3d(10.10px, -18.31px, 34.10px) scale(0.35);
    }
    36% {
        transform: translate3d(-2.69px, -6.39px, 39.39px) scale(0.35);
    }
    39% {
        transform: translate3d(-15.91px, 7.44px, 35.94px) scale(0.35);
    }
    42% {
        transform: translate3d(-25.23px, 18.59px, 24.85px) scale(0.35);
    }
    45% {
        transform: translate3d(-29.50px, 25.08px, 10.06px) scale(0.35);
    }
    48% {
        transform: translate3d(-29.23px, 26.85px, -4.98px) scale(0.35);
    }
    51% {
        transform: translate3d(-25.68px, 24.88px, -17.93px) scale(0.35);
    }
    54% {
        transform: translate3d(-20.28px, 20.52px, -27.71px) scale(0.35);
    }
    57% {
        transform: translate3d(-14.23px, 15.08px, -34.21px) scale(0.35);
    }
    60% {
        transform: translate3d(-8.43px, 9.57px, -37.91px) scale(0.35);
    }
    63% {
        transform: translate3d(-3.41px, 4.65px, -39.58px) scale(0.35);
    }
    66% {
        transform: translate3d(0.57px, 0.69px, -39.99px) scale(0.35);
    }
    69% {
        transform: translate3d(3.40px, -2.15px, -39.80px) scale(0.35);
    }
    72% {
        transform: translate3d(5.09px, -3.84px, -39.49px) scale(0.35);
    }
    75% {
        transform: translate3d(5.65px, -4.40px, -39.35px) scale(0.35);
    }
    100% {
        transform: translate3d(5.06px, -5.10px, -39.35px) scale(0.35);
    }
}

@keyframes circle-3 {
    0% {
        opacity: 0;
        transform: translate3d(-5.06px, 5.10px, -39.35px) scale(0.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(-4.50px, 4.54px, -39.49px) scale(0.35);
    }
    6% {
        transform: translate3d(-2.81px, 2.86px, -39.80px) scale(0.35);
    }
    9% {
        transform: translate3d(0.03px, 0.02px, -40.00px) scale(0.35);
    }
    12% {
        transform: translate3d(3.99px, -3.95px, -39.60px) scale(0.35);
    }
    15% {
        transform: translate3d(8.90px, -8.97px, -37.95px) scale(0.35);
    }
    18% {
        transform: translate3d(14.42px, -14.78px, -34.26px) scale(0.35);
    }
    21% {
        transform: translate3d(19.86px, -20.82px, -27.79px) scale(0.35);
    }
    24% {
        transform: translate3d(24.23px, -26.23px, -18.03px) scale(0.35);
    }
    27% {
        transform: translate3d(26.21px, -29.78px, -5.10px) scale(0.35);
    }
    30% {
        transform: translate3d(24.45px, -30.06px, 9.91px) scale(0.35);
    }
    33% {
        transform: translate3d(17.98px, -25.82px, 24.70px) scale(0.35);
    }
    36% {
        transform: translate3d(6.85px, -16.52px, 35.78px) scale(0.35);
    }
    39% {
        transform: translate3d(-6.96px, -3.31px, 39.25px) scale(0.35);
    }
    42% {
        transform: translate3d(-18.87px, 9.47px, 33.97px) scale(0.35);
    }
    45% {
        transform: translate3d(-26.77px, 19.04px, 22.82px) scale(0.35);
    }
    48% {
        transform: translate3d(-30.31px, 24.44px, 9.15px) scale(0.35);
    }
    51% {
        transform: translate3d(-30.16px, 25.92px, -4.31px) scale(0.35);
    }
    54% {
        transform: translate3d(-27.42px, 24.42px, -15.86px) scale(0.35);
    }
    57% {
        transform: translate3d(-23.27px, 21.09px, -24.78px) scale(0.35);
    }
    60% {
        transform: translate3d(-18.66px, 16.98px, -31.04px) scale(0.35);
    }
    63% {
        transform: translate3d(-14.30px, 12.88px, -35.07px) scale(0.35);
    }
    66% {
        transform: translate3d(-10.64px, 9.33px, -37.41px) scale(0.35);
    }
    69% {
        transform: translate3d(-7.91px, 6.65px, -38.64px) scale(0.35);
    }
    72% {
        transform: translate3d(-6.24px, 4.99px, -39.19px) scale(0.35);
    }
    75% {
        transform: translate3d(-5.69px, 4.44px, -39.34px) scale(0.35);
    }
    100% {
        transform: translate3d(-5.06px, 5.10px, -39.35px) scale(0.35);
    }
}

@keyframes circle-4 {
    0% {
        opacity: 0;
        transform: translate3d(-13.89px, 14.98px, -34.39px) scale(0.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(-13.40px, 14.49px, -34.79px) scale(0.35);
    }
    6% {
        transform: translate3d(-11.88px, 13.00px, -35.92px) scale(0.35);
    }
    9% {
        transform: translate3d(-9.24px, 10.41px, -37.50px) scale(0.35);
    }
    12% {
        transform: translate3d(-5.38px, 6.64px, -39.08px) scale(0.35);
    }
    15% {
        transform: translate3d(-0.29px, 1.60px, -39.97px) scale(0.35);
    }
    18% {
        transform: translate3d(5.91px, -4.65px, -39.29px) scale(0.35);
    }
    21% {
        transform: translate3d(12.75px, -11.79px, -36.04px) scale(0.35);
    }
    24% {
        transform: translate3d(19.38px, -19.15px, -29.29px) scale(0.35);
    }
    27% {
        transform: translate3d(24.53px, -25.60px, -18.52px) scale(0.35);
    }
    30% {
        transform: translate3d(26.58px, -29.62px, -4.07px) scale(0.35);
    }
    33% {
        transform: translate3d(23.98px, -29.50px, 12.43px) scale(0.35);
    }
    36% {
        transform: translate3d(15.89px, -23.95px, 27.82px) scale(0.35);
    }
    39% {
        transform: translate3d(3.22px, -13.01px, 37.69px) scale(0.35);
    }
    42% {
        transform: translate3d(-9.76px, -0.22px, 38.79px) scale(0.35);
    }
    45% {
        transform: translate3d(-20.25px, 11.20px, 32.63px) scale(0.35);
    }
    48% {
        transform: translate3d(-27.11px, 19.50px, 22.02px) scale(0.35);
    }
    51% {
        transform: translate3d(-30.32px, 24.20px, 9.74px) scale(0.35);
    }
    54% {
        transform: translate3d(-30.56px, 25.72px, -2.12px) scale(0.35);
    }
    57% {
        transform: translate3d(-28.79px, 24.89px, -12.31px) scale(0.35);
    }
    60% {
        transform: translate3d(-25.94px, 22.67px, -20.33px) scale(0.35);
    }
    63% {
        transform: translate3d(-22.79px, 19.89px, -26.18px) scale(0.35);
    }
    66% {
        transform: translate3d(-19.89px, 17.19px, -30.15px) scale(0.35);
    }
    69% {
        transform: translate3d(-17.62px, 15.00px, -32.63px) scale(0.35);
    }
    72% {
        transform: translate3d(-16.18px, 13.60px, -33.96px) scale(0.35);
    }
    75% {
        transform: translate3d(-15.70px, 13.11px, -34.37px) scale(0.35);
    }
    100% {
        transform: translate3d(-13.89px, 14.98px, -34.39px) scale(0.35);
    }
}
.spinner .small-dot.\31 {
    animation-name: circle-1;
    animation-delay:  2.0s;
    background-color: #00bfcb;
}
.spinner .small-dot.\32 {
    animation-name: circle-2;
    animation-delay: 2.06s;
    background-color: #02cdcb;
}
.spinner .small-dot.\33 {
    animation-name: circle-3;
    animation-delay: 2.12s;
    background-color: #00d6ba;
}
.spinner .small-dot.\34 {
    animation-name: circle-4;
    animation-delay: 2.18s;
    background-color: #00e0a3;
}