.circle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -450px;
  margin-left: -450px;
  /* -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%); */
}

.circle {
    border: 1px solid transparent;
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  
  .circle-1 {
    width: 950px;
    height: 950px;
    top: 0px;
    left: 0px;
  }
  .circle-1.smallest {
    -webkit-animation: spin-smallest-1 70.9s infinite linear;
    animation: spin-smallest-1 70.9s infinite linear;
  }
  @keyframes spin-smallest-1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .circle-1.largest {
    -webkit-animation: spin-largest-1 2.9s infinite linear;
    animation: spin-largest-1 2.9s infinite linear;
  }
  @keyframes spin-largest-1 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(3240deg);
    }
  }
  
  .circle-2 {
    width: 918px;
    height: 918px;
    top: 16px;
    left: 16px;
  }
  .circle-2.smallest {
    -webkit-animation: spin-smallest-2 70.9s infinite linear;
    animation: spin-smallest-2 70.9s infinite linear;
  }
  @keyframes spin-smallest-2 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(720deg);
    }
  }
  .circle-2.largest {
    -webkit-animation: spin-largest-2 2.9s infinite linear;
    animation: spin-largest-2 2.9s infinite linear;
  }
  @keyframes spin-largest-2 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2880deg);
    }
  }
  
  .circle-3 {
    width: 886px;
    height: 886px;
    top: 32px;
    left: 32px;
  }
  .circle-3.smallest {
    -webkit-animation: spin-smallest-3 70.9s infinite linear;
    animation: spin-smallest-3 70.9s infinite linear;
  }
  @keyframes spin-smallest-3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1080deg);
    }
  }
  .circle-3.largest {
    -webkit-animation: spin-largest-3 2.9s infinite linear;
    animation: spin-largest-3 2.9s infinite linear;
  }
  @keyframes spin-largest-3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2520deg);
    }
  }
  
  .circle-4 {
    width: 854px;
    height: 854px;
    top: 48px;
    left: 48px;
  }
  .circle-4.smallest {
    -webkit-animation: spin-smallest-4 70.9s infinite linear;
    animation: spin-smallest-4 70.9s infinite linear;
  }
  @keyframes spin-smallest-4 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1440deg);
    }
  }
  .circle-4.largest {
    -webkit-animation: spin-largest-4 2.9s infinite linear;
    animation: spin-largest-4 2.9s infinite linear;
  }
  @keyframes spin-largest-4 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2160deg);
    }
  }
  
  .circle-5 {
    width: 822px;
    height: 822px;
    top: 64px;
    left: 64px;
  }
  .circle-5.smallest {
    -webkit-animation: spin-smallest-5 70.9s infinite linear;
    animation: spin-smallest-5 70.9s infinite linear;
  }
  @keyframes spin-smallest-5 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1800deg);
    }
  }
  .circle-5.largest {
    -webkit-animation: spin-largest-5 2.9s infinite linear;
    animation: spin-largest-5 2.9s infinite linear;
  }
  @keyframes spin-largest-5 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1800deg);
    }
  }
  
  .circle-6 {
    width: 790px;
    height: 790px;
    top: 80px;
    left: 80px;
  }
  .circle-6.smallest {
    -webkit-animation: spin-smallest-6 70.9s infinite linear;
    animation: spin-smallest-6 70.9s infinite linear;
  }
  @keyframes spin-smallest-6 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2160deg);
    }
  }
  .circle-6.largest {
    -webkit-animation: spin-largest-6 2.9s infinite linear;
    animation: spin-largest-6 2.9s infinite linear;
  }
  @keyframes spin-largest-6 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1440deg);
    }
  }
  
  .circle-7 {
    width: 758px;
    height: 758px;
    top: 96px;
    left: 96px;
  }
  .circle-7.smallest {
    -webkit-animation: spin-smallest-7 70.9s infinite linear;
    animation: spin-smallest-7 70.9s infinite linear;
  }
  @keyframes spin-smallest-7 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2520deg);
    }
  }
  .circle-7.largest {
    -webkit-animation: spin-largest-7 2.9s infinite linear;
    animation: spin-largest-7 2.9s infinite linear;
  }
  @keyframes spin-largest-7 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(1080deg);
    }
  }
  
  .circle-8 {
    width: 726px;
    height: 726px;
    top: 112px;
    left: 112px;
  }
  .circle-8.smallest {
    -webkit-animation: spin-smallest-8 70.9s infinite linear;
    animation: spin-smallest-8 70.9s infinite linear;
  }
  @keyframes spin-smallest-8 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(2880deg);
    }
  }
  .circle-8.largest {
    -webkit-animation: spin-largest-8 2.9s infinite linear;
    animation: spin-largest-8 2.9s infinite linear;
  }
  @keyframes spin-largest-8 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(720deg);
    }
  }
  
  .circle-9 {
    width: 694px;
    height: 694px;
    top: 128px;
    left: 128px;
  }
  .circle-9.smallest {
    -webkit-animation: spin-smallest-9 70.9s infinite linear;
    animation: spin-smallest-9 70.9s infinite linear;
  }
  @keyframes spin-smallest-9 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(3240deg);
    }
  }
  .circle-9.largest {
    -webkit-animation: spin-largest-9 2.9s infinite linear;
    animation: spin-largest-9 2.9s infinite linear;
  }
  @keyframes spin-largest-9 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .circle-10 {
    width: 662px;
    height: 662px;
    top: 144px;
    left: 144px;
  }
  .circle-10.smallest {
    -webkit-animation: spin-smallest-10 70.9s infinite linear;
    animation: spin-smallest-10 70.9s infinite linear;
  }
  @keyframes spin-smallest-10 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(3600deg);
    }
  }
  .circle-10.largest {
    -webkit-animation: spin-largest-10 2.9s infinite linear;
    animation: spin-largest-10 2.9s infinite linear;
  }
  @keyframes spin-largest-10 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  
  .circle-11 {
    width: 630px;
    height: 630px;
    top: 160px;
    left: 160px;
  }
  .circle-11.smallest {
    -webkit-animation: spin-smallest-11 70.9s infinite linear;
    animation: spin-smallest-11 70.9s infinite linear;
  }
  @keyframes spin-smallest-11 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(3960deg);
    }
  }
  .circle-11.largest {
    -webkit-animation: spin-largest-11 2.9s infinite linear;
    animation: spin-largest-11 2.9s infinite linear;
  }
  @keyframes spin-largest-11 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  
  .circle-12 {
    width: 598px;
    height: 598px;
    top: 176px;
    left: 176px;
  }
  .circle-12.smallest {
    -webkit-animation: spin-smallest-12 70.9s infinite linear;
    animation: spin-smallest-12 70.9s infinite linear;
  }
  @keyframes spin-smallest-12 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(4320deg);
    }
  }
  .circle-12.largest {
    -webkit-animation: spin-largest-12 2.9s infinite linear;
    animation: spin-largest-12 2.9s infinite linear;
  }
  @keyframes spin-largest-12 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-720deg);
    }
  }
  
  .circle-13 {
    width: 566px;
    height: 566px;
    top: 192px;
    left: 192px;
  }
  .circle-13.smallest {
    -webkit-animation: spin-smallest-13 70.9s infinite linear;
    animation: spin-smallest-13 70.9s infinite linear;
  }
  @keyframes spin-smallest-13 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(4680deg);
    }
  }
  .circle-13.largest {
    -webkit-animation: spin-largest-13 2.9s infinite linear;
    animation: spin-largest-13 2.9s infinite linear;
  }
  @keyframes spin-largest-13 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-1080deg);
    }
  }
  
  .circle-14 {
    width: 534px;
    height: 534px;
    top: 208px;
    left: 208px;
  }
  .circle-14.smallest {
    -webkit-animation: spin-smallest-14 70.9s infinite linear;
    animation: spin-smallest-14 70.9s infinite linear;
  }
  @keyframes spin-smallest-14 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(5040deg);
    }
  }
  .circle-14.largest {
    -webkit-animation: spin-largest-14 2.9s infinite linear;
    animation: spin-largest-14 2.9s infinite linear;
  }
  @keyframes spin-largest-14 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-1440deg);
    }
  }
  
  .circle-15 {
    width: 502px;
    height: 502px;
    top: 224px;
    left: 224px;
  }
  .circle-15.smallest {
    -webkit-animation: spin-smallest-15 70.9s infinite linear;
    animation: spin-smallest-15 70.9s infinite linear;
  }
  @keyframes spin-smallest-15 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(5400deg);
    }
  }
  .circle-15.largest {
    -webkit-animation: spin-largest-15 2.9s infinite linear;
    animation: spin-largest-15 2.9s infinite linear;
  }
  @keyframes spin-largest-15 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-1800deg);
    }
  }
  
  .circle-16 {
    width: 470px;
    height: 470px;
    top: 240px;
    left: 240px;
  }
  .circle-16.smallest {
    -webkit-animation: spin-smallest-16 70.9s infinite linear;
    animation: spin-smallest-16 70.9s infinite linear;
  }
  @keyframes spin-smallest-16 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(5760deg);
    }
  }
  .circle-16.largest {
    -webkit-animation: spin-largest-16 2.9s infinite linear;
    animation: spin-largest-16 2.9s infinite linear;
  }
  @keyframes spin-largest-16 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-2160deg);
    }
  }
  
  .circle-17 {
    width: 438px;
    height: 438px;
    top: 256px;
    left: 256px;
  }
  .circle-17.smallest {
    -webkit-animation: spin-smallest-17 70.9s infinite linear;
    animation: spin-smallest-17 70.9s infinite linear;
  }
  @keyframes spin-smallest-17 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(6120deg);
    }
  }
  .circle-17.largest {
    -webkit-animation: spin-largest-17 2.9s infinite linear;
    animation: spin-largest-17 2.9s infinite linear;
  }
  @keyframes spin-largest-17 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-2520deg);
    }
  }
  
  .circle-18 {
    width: 406px;
    height: 406px;
    top: 272px;
    left: 272px;
  }
  .circle-18.smallest {
    -webkit-animation: spin-smallest-18 70.9s infinite linear;
    animation: spin-smallest-18 70.9s infinite linear;
  }
  @keyframes spin-smallest-18 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(6480deg);
    }
  }
  .circle-18.largest {
    -webkit-animation: spin-largest-18 2.9s infinite linear;
    animation: spin-largest-18 2.9s infinite linear;
  }
  @keyframes spin-largest-18 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-2880deg);
    }
  }
  
  .circle-19 {
    width: 374px;
    height: 374px;
    top: 288px;
    left: 288px;
  }
  .circle-19.smallest {
    -webkit-animation: spin-smallest-19 70.9s infinite linear;
    animation: spin-smallest-19 70.9s infinite linear;
  }
  @keyframes spin-smallest-19 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(6840deg);
    }
  }
  .circle-19.largest {
    -webkit-animation: spin-largest-19 2.9s infinite linear;
    animation: spin-largest-19 2.9s infinite linear;
  }
  @keyframes spin-largest-19 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-3240deg);
    }
  }
  
  .circle-20 {
    width: 342px;
    height: 342px;
    top: 304px;
    left: 304px;
  }
  .circle-20.smallest {
    -webkit-animation: spin-smallest-20 70.9s infinite linear;
    animation: spin-smallest-20 70.9s infinite linear;
  }
  @keyframes spin-smallest-20 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(7200deg);
    }
  }
  .circle-20.largest {
    -webkit-animation: spin-largest-20 2.9s infinite linear;
    animation: spin-largest-20 2.9s infinite linear;
  }
  @keyframes spin-largest-20 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-3600deg);
    }
  }