.black_bg{
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: rgba(55,55,55,.6);
  z-index: 999999;
  /* animation: pulse 6s infinite; */
}

@keyframes pulse{
  0%{
    opacity: 0.6;
  }
  50%{
    opacity: 0.2;
  }
  100%{
    opacity: 0.6;
  }
}

#c {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -560px;
  white-space: nowrap;
}

.s {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  float: left;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.s:nth-child(n + 2) {
  margin-left: 200px;
}

.s:nth-child(1) {
  background: #33bbff;
  -webkit-animation: r0 2s 0s ease-out infinite;
  -moz-animation: r0 2s 0s ease-out infinite;
  animation: r0 2s 0s ease-out infinite;
}
.s:nth-child(1):hover {
  background: #ff3333;
  -webkit-animation: r20 0.5s 0.4s ease-out infinite;
  -moz-animation: r20 0.5s 0.4s ease-out infinite;
  animation: r20 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 179, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1ab3ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 179, 255, 0);
  }
}
@-moz-keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 179, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1ab3ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 179, 255, 0);
  }
}
@keyframes r0 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 179, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1ab3ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1ab3ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 179, 255, 0);
  }
}
@-webkit-keyframes r20 {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff1a1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
@-moz-keyframes r20 {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff1a1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
@keyframes r20 {
  from {
    box-shadow: 0 0 8px 6px #ff1a1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff1a1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 26, 26, 0);
  }
}
.s:nth-child(2) {
  background: #3399ff;
  -webkit-animation: r1 2s 0.25s ease-out infinite;
  -moz-animation: r1 2s 0.25s ease-out infinite;
  animation: r1 2s 0.25s ease-out infinite;
}
.s:nth-child(2):hover {
  background: #ff4733;
  -webkit-animation: r21 0.5s 0.4s ease-out infinite;
  -moz-animation: r21 0.5s 0.4s ease-out infinite;
  animation: r21 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r1 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 140, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a8cff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 140, 255, 0);
  }
}
@-moz-keyframes r1 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 140, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a8cff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 140, 255, 0);
  }
}
@keyframes r1 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 140, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a8cff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a8cff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 140, 255, 0);
  }
}
@-webkit-keyframes r21 {
  from {
    box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff301a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 48, 26, 0);
  }
}
@-moz-keyframes r21 {
  from {
    box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff301a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 48, 26, 0);
  }
}
@keyframes r21 {
  from {
    box-shadow: 0 0 8px 6px #ff301a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff301a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 48, 26, 0);
  }
}
.s:nth-child(3) {
  background: #3377ff;
  -webkit-animation: r2 2s 0.5s ease-out infinite;
  -moz-animation: r2 2s 0.5s ease-out infinite;
  animation: r2 2s 0.5s ease-out infinite;
}
.s:nth-child(3):hover {
  background: #ff5c33;
  -webkit-animation: r22 0.5s 0.4s ease-out infinite;
  -moz-animation: r22 0.5s 0.4s ease-out infinite;
  animation: r22 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r2 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 102, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a66ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a66ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 102, 255, 0);
  }
}
@-moz-keyframes r2 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 102, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a66ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a66ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 102, 255, 0);
  }
}
@keyframes r2 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 102, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a66ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a66ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 102, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 102, 255, 0);
  }
}
@-webkit-keyframes r22 {
  from {
    box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff471a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 71, 26, 0);
  }
}
@-moz-keyframes r22 {
  from {
    box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff471a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 71, 26, 0);
  }
}
@keyframes r22 {
  from {
    box-shadow: 0 0 8px 6px #ff471a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff471a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 71, 26, 0);
  }
}
.s:nth-child(4) {
  background: #3355ff;
  -webkit-animation: r3 2s 0.75s ease-out infinite;
  -moz-animation: r3 2s 0.75s ease-out infinite;
  animation: r3 2s 0.75s ease-out infinite;
}
.s:nth-child(4):hover {
  background: #ff7033;
  -webkit-animation: r23 0.5s 0.4s ease-out infinite;
  -moz-animation: r23 0.5s 0.4s ease-out infinite;
  animation: r23 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r3 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 64, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a40ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a40ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 64, 255, 0);
  }
}
@-moz-keyframes r3 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 64, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a40ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a40ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 64, 255, 0);
  }
}
@keyframes r3 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 64, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a40ff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a40ff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 64, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 64, 255, 0);
  }
}
@-webkit-keyframes r23 {
  from {
    box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff5e1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 94, 26, 0);
  }
}
@-moz-keyframes r23 {
  from {
    box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff5e1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 94, 26, 0);
  }
}
@keyframes r23 {
  from {
    box-shadow: 0 0 8px 6px #ff5e1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff5e1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 94, 26, 0);
  }
}
.s:nth-child(5) {
  background: #3333ff;
  -webkit-animation: r4 2s 1s ease-out infinite;
  -moz-animation: r4 2s 1s ease-out infinite;
  animation: r4 2s 1s ease-out infinite;
}
.s:nth-child(5):hover {
  background: #ff8533;
  -webkit-animation: r24 0.5s 0.4s ease-out infinite;
  -moz-animation: r24 0.5s 0.4s ease-out infinite;
  animation: r24 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r4 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a1aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a1aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 26, 255, 0);
  }
}
@-moz-keyframes r4 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a1aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a1aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 26, 255, 0);
  }
}
@keyframes r4 {
  0% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(26, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #1a1aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #1a1aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(26, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(26, 26, 255, 0);
  }
}
@-webkit-keyframes r24 {
  from {
    box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff751a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 117, 26, 0);
  }
}
@-moz-keyframes r24 {
  from {
    box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff751a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 117, 26, 0);
  }
}
@keyframes r24 {
  from {
    box-shadow: 0 0 8px 6px #ff751a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff751a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 117, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 117, 26, 0);
  }
}
.s:nth-child(6) {
  background: #5533ff;
  -webkit-animation: r5 2s 1.25s ease-out infinite;
  -moz-animation: r5 2s 1.25s ease-out infinite;
  animation: r5 2s 1.25s ease-out infinite;
}
.s:nth-child(6):hover {
  background: #ff9933;
  -webkit-animation: r25 0.5s 0.4s ease-out infinite;
  -moz-animation: r25 0.5s 0.4s ease-out infinite;
  animation: r25 0.5s 0.4s ease-out infinite;
}

@-webkit-keyframes r5 {
  0% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(64, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #401aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #401aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(64, 26, 255, 0);
  }
}
@-moz-keyframes r5 {
  0% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(64, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #401aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #401aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(64, 26, 255, 0);
  }
}
@keyframes r5 {
  0% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 0px rgba(0, 0, 0, 0), 0 0 0px 0px rgba(64, 26, 255, 0);
  }
  10% {
    box-shadow: 0 0 8px 6px #401aff, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #401aff;
  }
  100% {
    box-shadow: 0 0 8px 6px rgba(64, 26, 255, 0), 0 0 0px 40px rgba(0, 0, 0, 0), 0 0 0px 40px rgba(64, 26, 255, 0);
  }
}
@-webkit-keyframes r25 {
  from {
    box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff8c1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 140, 26, 0);
  }
}
@-moz-keyframes r25 {
  from {
    box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff8c1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 140, 26, 0);
  }
}
@keyframes r25 {
  from {
    box-shadow: 0 0 8px 6px #ff8c1a, 0 0 12px 10px rgba(0, 0, 0, 0), 0 0 12px 14px #ff8c1a;
  }
  to {
    box-shadow: 0 0 8px 6px rgba(255, 140, 26, 0), 0 0 4px 40px rgba(0, 0, 0, 0), 0 0 4px 41px rgba(255, 140, 26, 0);
  }
}



.loading {
    position: absolute;
    top: 50%;
    left: 50%;
}
.loading .bullet {
    position: absolute;
    padding: 5px;
    border-radius: 50%;
    background: #aaeeff;
    -webkit-animation: animIn 1s ease-in-out 0s infinite;
    animation: animIn 1s ease-in-out 0s infinite;
}
.loading .bullet:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.loading .bullet:nth-child(2) {
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
.loading .bullet:nth-child(3) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.loading .bullet:nth-child(4) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
}
@-webkit-keyframes animIn {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
}
@keyframes animIn {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
}

.spinner {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  position: relative;
  top: calc(50vh - 50px);
  /* transform: translateY(-50%); */
  text-align: center;
  opacity: 1 !important;
  -webkit-animation: sdk-rotate 2.0s infinite linear;
  animation: sdk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #566CAD;
  border-radius: 100%;

  -webkit-animation: sdk-bounce 2.0s infinite ease-in-out;
  animation: sdk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sdk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sdk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sdk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sdk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


body {
  background: #eef1f3;
}

@-webkit-keyframes loader {
  0% {
    width: 0;
  }
  20% {
    width: 10%;
  }
  25% {
    width: 24%;
  }
  43% {
    width: 41%;
  }
  56% {
    width: 50%;
  }
  66% {
    width: 52%;
  }
  71% {
    width: 60%;
  }
  75% {
    width: 76%;
  }
  94% {
    width: 86%;
  }
  100% {
    width: 95%;
  }
}

@keyframes loader {
  0% {
    width: 0;
  }
  20% {
    width: 10%;
  }
  25% {
    width: 24%;
  }
  43% {
    width: 41%;
  }
  56% {
    width: 50%;
  }
  66% {
    width: 52%;
  }
  71% {
    width: 60%;
  }
  75% {
    width: 76%;
  }
  94% {
    width: 86%;
  }
  100% {
    width: 95%;
  }
}
.progress-bar {
  border-radius: 3px;
  overflow: hidden;
  width: 60vw;
}
.progress-bar span {
  display: block;
}

.bar {
  background: rgba(0, 0, 0, 0.075);
}

.progress {
  -webkit-animation: loader 50s ease;
          animation: loader 50s ease;
  background: #75b800;
  color: #fff;
  padding: 5px;
  width: 95%;
}
.progress-bar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(233, 233, 233, 1) 0,
    rgba(233, 233, 233, 0.9) 50%,
    rgba(233, 233, 233, 0.8) 100%
  );
  animation: shimmer 5s ease-out infinite;
  content: "";
}

.progress-bar {
  left: 50%;
  max-width: 50%;
  position: absolute;
  top: 90%;
  transform: translate3d(-50%, -50%, 0);
}

@keyframes shimmer {
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}