.main-wrapper {
  display: flex;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 400px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  -webkit-animation: rotate3d 10s linear infinite;
          animation: rotate3d 10s linear infinite;
}
.plane {
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.spoke {
  transform-origin: 0 0;
  transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 0px;
}
.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  left: -3px;
  top: 100%;
  transform: rotateX(90deg);
}
.spoke.spoke-1 {
  transform: rotateZ(10deg);
}
.spoke.spoke-2 {
  transform: rotateZ(20deg);
}
.spoke.spoke-3 {
  transform: rotateZ(30deg);
}
.spoke.spoke-4 {
  transform: rotateZ(40deg);
}
.spoke.spoke-5 {
  transform: rotateZ(50deg);
}
.spoke.spoke-6 {
  transform: rotateZ(60deg);
}
.spoke.spoke-7 {
  transform: rotateZ(70deg);
}
.spoke.spoke-8 {
  transform: rotateZ(80deg);
}
.spoke.spoke-9 {
  transform: rotateZ(90deg);
}
.spoke.spoke-10 {
  transform: rotateZ(100deg);
}
.spoke.spoke-11 {
  transform: rotateZ(110deg);
}
.spoke.spoke-12 {
  transform: rotateZ(120deg);
}
.spoke.spoke-13 {
  transform: rotateZ(130deg);
}
.spoke.spoke-14 {
  transform: rotateZ(140deg);
}
.spoke.spoke-15 {
  transform: rotateZ(150deg);
}
.spoke.spoke-16 {
  transform: rotateZ(160deg);
}
.spoke.spoke-17 {
  transform: rotateZ(170deg);
}
.spoke.spoke-18 {
  transform: rotateZ(180deg);
}
.spoke.spoke-19 {
  transform: rotateZ(190deg);
}
.spoke.spoke-20 {
  transform: rotateZ(200deg);
}
.spoke.spoke-21 {
  transform: rotateZ(210deg);
}
.spoke.spoke-22 {
  transform: rotateZ(220deg);
}
.spoke.spoke-23 {
  transform: rotateZ(230deg);
}
.spoke.spoke-24 {
  transform: rotateZ(240deg);
}
.spoke.spoke-25 {
  transform: rotateZ(250deg);
}
.spoke.spoke-26 {
  transform: rotateZ(260deg);
}
.spoke.spoke-27 {
  transform: rotateZ(270deg);
}
.spoke.spoke-28 {
  transform: rotateZ(280deg);
}
.spoke.spoke-29 {
  transform: rotateZ(290deg);
}
.spoke.spoke-30 {
  transform: rotateZ(300deg);
}
.spoke.spoke-31 {
  transform: rotateZ(310deg);
}
.spoke.spoke-32 {
  transform: rotateZ(320deg);
}
.spoke.spoke-33 {
  transform: rotateZ(330deg);
}
.spoke.spoke-34 {
  transform: rotateZ(340deg);
}
.spoke.spoke-35 {
  transform: rotateZ(350deg);
}
.plane.plane-1 {
  transform: rotateY(15deg);
}
.plane.plane-2 {
  transform: rotateY(30deg);
}
.plane.plane-3 {
  transform: rotateY(45deg);
}
.plane.plane-4 {
  transform: rotateY(60deg);
}
.plane.plane-5 {
  transform: rotateY(75deg);
}
.plane.plane-6 {
  transform: rotateY(90deg);
}
.plane.plane-7 {
  transform: rotateY(105deg);
}
.plane.plane-8 {
  transform: rotateY(120deg);
}
.plane.plane-9 {
  transform: rotateY(135deg);
}
.plane.plane-10 {
  transform: rotateY(150deg);
}
.plane.plane-11 {
  transform: rotateY(165deg);
}
.spoke-0 .dot,
.spoke-36 .dot {
  -webkit-animation: pulsate 0.5s infinite 0s alternate both;
          animation: pulsate 0.5s infinite 0s alternate both;
  background-color: #ac0202;
}
.spoke-1 .dot,
.spoke-35 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.05555556s alternate both;
          animation: pulsate 0.5s infinite 0.05555556s alternate both;
  background-color: #ac0202;
}
.spoke-2 .dot,
.spoke-34 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.11111111s alternate both;
          animation: pulsate 0.5s infinite 0.11111111s alternate both;
  background-color: #ac0202;
}
.spoke-3 .dot,
.spoke-33 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.16666667s alternate both;
          animation: pulsate 0.5s infinite 0.16666667s alternate both;
  background-color: #ac0202;
}
.spoke-4 .dot,
.spoke-32 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.22222222s alternate both;
          animation: pulsate 0.5s infinite 0.22222222s alternate both;
  background-color: #ff3d3d;
}
.spoke-5 .dot,
.spoke-31 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.27777778s alternate both;
          animation: pulsate 0.5s infinite 0.27777778s alternate both;
  background-color: #ff3d3d;
}
.spoke-6 .dot,
.spoke-30 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.33333333s alternate both;
          animation: pulsate 0.5s infinite 0.33333333s alternate both;
  background-color: #fd7c7c;
}
.spoke-7 .dot,
.spoke-29 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.38888889s alternate both;
          animation: pulsate 0.5s infinite 0.38888889s alternate both;
  background-color: #fd7c7c;
}
.spoke-8 .dot,
.spoke-28 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.44444444s alternate both;
          animation: pulsate 0.5s infinite 0.44444444s alternate both;
  background-color: #fd7c7c;
}
.spoke-9 .dot,
.spoke-27 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.5s alternate both;
          animation: pulsate 0.5s infinite 0.5s alternate both;
  background-color: #fd7c7c;
}
.spoke-10 .dot,
.spoke-26 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.55555556s alternate both;
          animation: pulsate 0.5s infinite 0.55555556s alternate both;
  background-color: #fd7c7c;
}
.spoke-11 .dot,
.spoke-25 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.61111111s alternate both;
          animation: pulsate 0.5s infinite 0.61111111s alternate both;
  background-color: #fd7c7c;
}
.spoke-12 .dot,
.spoke-24 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.66666667s alternate both;
          animation: pulsate 0.5s infinite 0.66666667s alternate both;
  background-color: #ffc2c2;
}
.spoke-13 .dot,
.spoke-23 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.72222222s alternate both;
          animation: pulsate 0.5s infinite 0.72222222s alternate both;
  background-color: #ffc2c2;
}
.spoke-14 .dot,
.spoke-22 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.77777778s alternate both;
          animation: pulsate 0.5s infinite 0.77777778s alternate both;
  background-color: #ffc2c2;
}
.spoke-15 .dot,
.spoke-21 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.83333333s alternate both;
          animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #ffc2c2;
}
.spoke-16 .dot,
.spoke-20 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.88888889s alternate both;
          animation: pulsate 0.5s infinite 0.88888889s alternate both;
  background-color: #ffc2c2;
}
.spoke-17 .dot,
.spoke-19 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.94444444s alternate both;
          animation: pulsate 0.5s infinite 0.94444444s alternate both;
  background-color: #ffc2c2;
}
.spoke-18 .dot,
.spoke-18 .dot {
  -webkit-animation: pulsate 0.5s infinite 1s alternate both;
          animation: pulsate 0.5s infinite 1s alternate both;
  background-color: #ffc2c2;
}
@-webkit-keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}
@keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}
.animista-badge {
  font: normal 15px/1.5 sans-serif;
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.8);
  padding: 0.5em 1em;
}
a {
  color: #ff6060;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}