* {
  box-sizing: border-box;
}

.spinner .outer {
  width: 140px;
  height: 140px;
}

.spinner .middle {
  width: 118px;
  height: 118px;
  left: 11px;
  top: 11px;
}

.spinner .inner {
  width: 96px;
  height: 96px;
  left: 22px;
  top: 22px;
}

.spinner .top .outer {
  border-color: #3182c4;
}

.spinner .top .middle {
  border-color: #59a2de;
}

.spinner .top .inner {
  border-color: #3b8cce;
}

.spinner .bottom .outer {
  border-color: #9dc5e7;
}

.spinner .bottom .middle {
  border-color: #a4cdef;
}

.spinner .bottom .inner {
  border-color: #96bedf;
}

.spinner .top,
.spinner .bottom {
  width: 140px;
  height: 140px;
  position: absolute;
  overflow: hidden;
}

.spinner .top {
  clip: rect(0px, 140px, 69px, 0px);
}

.spinner .bottom {
  clip: rect(71px, 140px, 140px, 0px);
}

.spinner .outer,
.spinner .middle,
.spinner .inner {
  position: absolute;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spinner .top .outer,
.spinner .top .middle,
.spinner .top .inner {
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.spinner .bottom .outer,
.spinner .bottom .middle,
.spinner .bottom .inner {
  border-right-color: transparent;
  border-top-color: transparent;
}

.spinner .bottom .outer {
  border-bottom-color: transparent;
}

.spinner .top .inner {
  animation-name: spin-top-inner;
}

.spinner .top .middle {
  animation-name: spin-top-middle;
}

.spinner .top .outer {
  animation-name: spin-top-outer;
}

.spinner .bottom .inner {
  animation-name: spin-bottom-inner;
}

.spinner .bottom .middle {
  animation-name: spin-bottom-middle;
}

.spinner .bottom .outer {
  animation-name: spin-bottom-outer;
}

@keyframes spin-top-inner {
  0%, 5% {
    transform: rotate(-225deg);
  }
  24%, 30% {
    transform: rotate(-45deg);
  }
  45%, 100% {
    transform: rotate(135deg);
  }
}
@keyframes spin-top-middle {
  0%, 4% {
    transform: rotate(-225deg);
  }
  22%, 28% {
    transform: rotate(-45deg);
  }
  45%, 100% {
    transform: rotate(135deg);
  }
}
@keyframes spin-top-outer {
  0% {
    transform: rotate(-225deg);
  }
  20%, 25% {
    transform: rotate(-45deg);
  }
  41%, 100% {
    transform: rotate(135deg);
  }
}
@keyframes spin-bottom-inner {
  0%, 24% {
    transform: rotate(-225deg);
  }
  45% {
    transform: rotate(-45deg);
  }
  64%, 100% {
    transform: rotate(135deg);
  }
}
@keyframes spin-bottom-middle {
  0%, 28% {
    transform: rotate(-225deg);
  }
  47% {
    transform: rotate(-45deg);
  }
  62%, 100% {
    transform: rotate(135deg);
  }
}
@keyframes spin-bottom-outer {
  0%, 32% {
    transform: rotate(-225deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  68%, 100% {
    transform: rotate(135deg);
  }
}
.spinner {
    position: absolute;
    right: 0px;
    left: 43%;
    margin-top: 215px;
}