.cp-spinner {
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  position: relative
}

.cp-round:before {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px #bababa;
  border-right: solid 6px #bababa;
  border-bottom: solid 6px #bababa;
  border-left: solid 6px #bababa;
  position: absolute;
  top: 0;
  left: 0
}

.cp-round:after {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px #36a6e9;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 6px transparent;
  position: absolute;
  top: 0;
  left: 0;
  animation: cp-round-animate 1s ease-in-out infinite
}

@keyframes cp-round-animate {
  0% {
      transform: rotate(0)
  }
  100% {
      transform: rotate(360deg)
  }
}

.cp-pinwheel {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 24px #0fd6ff;
  border-right: solid 24px #58bd55;
  border-bottom: solid 24px #eb68a1;
  border-left: solid 24px #f3d53f;
  animation: cp-pinwheel-animate 1s linear infinite
}

@keyframes cp-pinwheel-animate {
  0% {
      border-top-color: #0fd6ff;
      border-right-color: #58bd55;
      border-bottom-color: #eb68a1;
      border-left-color: #f3d53f;
      transform: rotate(0)
  }
  25% {
      border-top-color: #eb68a1;
      border-right-color: #f3d53f;
      border-bottom-color: #0fd6ff;
      border-left-color: #58bd55
  }
  50% {
      border-top-color: #0fd6ff;
      border-right-color: #58bd55;
      border-bottom-color: #eb68a1;
      border-left-color: #f3d53f
  }
  75% {
      border-top-color: #eb68a1;
      border-right-color: #f3d53f;
      border-bottom-color: #0fd6ff;
      border-left-color: #58bd55
  }
  100% {
      border-top-color: #0fd6ff;
      border-right-color: #58bd55;
      border-bottom-color: #eb68a1;
      border-left-color: #f3d53f;
      transform: rotate(360deg)
  }
}

.cp-balls {
  animation: cp-balls-animate 1s linear infinite
}

.cp-balls:before {
  border-radius: 50%;
  content: " ";
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #0fd6ff;
  position: absolute;
  top: 0;
  left: 0;
  animation: cp-balls-animate-before 1s ease-in-out infinite
}

.cp-balls:after {
  border-radius: 50%;
  content: " ";
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #eb68a1;
  position: absolute;
  bottom: 0;
  right: 0;
  animation: cp-balls-animate-after 1s ease-in-out infinite
}

@keyframes cp-balls-animate {
  0% {
      transform: rotate(0)
  }
  100% {
      transform: rotate(360deg)
  }
}

@keyframes cp-balls-animate-before {
  0% {
      transform: translate(-5px, -5px)
  }
  50% {
      transform: translate(0, 0)
  }
  100% {
      transform: translate(-5px, -5px)
  }
}

@keyframes cp-balls-animate-after {
  0% {
      transform: translate(5px, 5px)
  }
  50% {
      transform: translate(0, 0)
  }
  100% {
      transform: translate(5px, 5px)
  }
}

.cp-bubble {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background: #58bd55;
  animation: cp-bubble-animate 1s linear infinite
}

.cp-bubble:before {
  border-radius: 50%;
  content: " ";
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #58bd55;
  position: absolute;
  left: -30px;
  animation: cp-bubble-animate-before 1s ease-in-out infinite
}

.cp-bubble:after {
  border-radius: 50%;
  content: " ";
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #58bd55;
  position: absolute;
  right: -30px;
  animation: cp-bubble-animate-after 1s ease-in-out infinite
}

@keyframes cp-bubble-animate {
  0% {
      opacity: .5;
      transform: scale(1) translateX(0)
  }
  25% {
      opacity: 1;
      transform: scale(1.1) translateX(-15px)
  }
  50% {
      opacity: 1;
      transform: scale(1.2) translateX(15px)
  }
  100% {
      opacity: .5;
      transform: scale(1) translateX(0)
  }
}

@keyframes cp-bubble-animate-before {
  0% {
      opacity: .5;
      transform: scale(1)
  }
  25% {
      transform: scale(1.1)
  }
  100%,
  50% {
      opacity: 1;
      transform: scale(1)
  }
}

@keyframes cp-bubble-animate-after {
  0%,
  50% {
      opacity: .5;
      transform: scale(1)
  }
  50% {
      transform: scale(1.1)
  }
  100%,
  75% {
      opacity: 1;
      transform: scale(1)
  }
}

.cp-flip {
  transform-style: preserve-3d;
  perspective: 10em
}

.cp-flip:before {
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  background: #f56151;
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  animation: cp-flip-animate-before 2s linear infinite
}

@keyframes cp-flip-animate-before {
  0% {
      transform: rotateY(0) rotateX(0)
  }
  25% {
      transform: rotateY(360deg) rotateX(0)
  }
  50% {
      transform: rotateY(360deg) rotateX(360deg)
  }
  75% {
      transform: rotateY(0) rotateX(360deg)
  }
  100% {
      transform: rotateY(0) rotateX(0)
  }
}

.cp-hue {
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background: #f56151;
  border-radius: 50%;
  animation: cp-hue-animate 1s ease-in-out infinite
}

.cp-hue:before {
  border-radius: 0 12px 12px 0;
  content: " ";
  width: 12px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  animation: cp-hue-animate-before 1s ease-in-out infinite
}

@keyframes cp-hue-animate {
  0% {
      background: #f56151
  }
  25% {
      background: #58bd55
  }
  50% {
      background: #eb68a1
  }
  75% {
      background: #f3d53f
  }
  100% {
      background: #f56151
  }
}

@keyframes cp-hue-animate-before {
  0% {
      transform: rotateY(0);
      transform-origin: left center;
      opacity: .5
  }
  30%,
  70% {
      transform: rotateY(180deg);
      transform-origin: left center;
      opacity: .2
  }
  100% {
      transform: rotateY(0);
      opacity: .5
  }
}

.cp-skeleton {
  border-radius: 50%;
  border-top: solid 6px #f56151;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 6px transparent;
  animation: cp-skeleton-animate 1s linear infinite
}

.cp-skeleton:before {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px transparent;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 6px #f56151;
  position: absolute;
  top: -6px;
  left: -6px;
  transform: rotateZ(-30deg)
}

.cp-skeleton:after {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px transparent;
  border-right: solid 6px #f56151;
  border-bottom: solid 6px transparent;
  border-left: solid 6px transparent;
  position: absolute;
  top: -6px;
  right: -6px;
  transform: rotateZ(30deg)
}

@keyframes cp-skeleton-animate {
  0% {
      transform: rotate(0);
      opacity: 1
  }
  50% {
      opacity: .7
  }
  100% {
      transform: rotate(360deg);
      opacity: 1
  }
}

.cp-eclipse {
  width: 12px;
  height: 12px;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  background: #f3d53f;
  margin: 12px;
  animation: cp-eclipse-animate 1s ease-out infinite
}

.cp-eclipse:before {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px transparent;
  border-right: solid 6px #f3d53f;
  border-bottom: solid 6px transparent;
  border-left: solid 6px transparent;
  position: absolute;
  top: -18px;
  left: -18px
}

.cp-eclipse:after {
  border-radius: 50%;
  content: " ";
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  border-top: solid 6px transparent;
  border-right: solid 6px transparent;
  border-bottom: solid 6px transparent;
  border-left: solid 6px #f3d53f;
  position: absolute;
  top: -18px;
  right: -18px
}

@keyframes cp-eclipse-animate {
  0% {
      transform: rotate(0)
  }
  100% {
      transform: rotate(360deg)
  }
}

.cp-boxes:before {
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  content: " ";
  background: #58bd55;
  position: absolute;
  top: 12px;
  left: 0;
  animation: cp-boxes-animate-before 1s ease-in-out infinite
}

.cp-boxes:after {
  width: 24px;
  height: 24px;
  display: inline-block;
  box-sizing: border-box;
  content: " ";
  background: #58bd55;
  position: absolute;
  top: 12px;
  right: 0;
  animation: cp-boxes-animate-after 1s ease-in-out infinite
}

@keyframes cp-boxes-animate-before {
  0% {
      transform: translateX(-24px) rotate(45deg)
  }
  50% {
      transform: translateX(-8px) rotate(225deg)
  }
  100% {
      transform: translateX(-24px) rotate(45deg)
  }
}

@keyframes cp-boxes-animate-after {
  0% {
      transform: translateX(24px) rotate(45deg)
  }
  50% {
      transform: translateX(8px) rotate(-225deg)
  }
  100% {
      transform: translateX(24px) rotate(45deg)
  }
}

.cp-morph {
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box;
  background: #0fd6ff;
  animation: cp-morph-animate 1s linear infinite
}

@keyframes cp-morph-animate {
  0% {
      transform: rotate(0) scale(1);
      border-radius: 0;
      background: #f3d53f
  }
  25%,
  75% {
      transform: rotate(180deg) scale(.4);
      border-radius: 50%;
      background: #0fd6ff
  }
  100% {
      transform: rotate(360deg) scale(1);
      border-radius: 0;
      background: #f3d53f
  }
}

.cp-heart {
  animation: cp-heart-animate 2s ease-in-out infinite
}

.cp-heart:before {
  border-radius: 12px 12px 0 0;
  content: " ";
  width: 24px;
  height: 35px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #eb68a1;
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  left: 8px
}

.cp-heart:after {
  border-radius: 12px 12px 0 0;
  content: " ";
  width: 24px;
  height: 35px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #eb68a1;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 8px
}

@keyframes cp-heart-animate {
  0% {
      transform: scale(.9);
      transform-origin: center
  }
  15% {
      transform: scale(1.4);
      transform-origin: center
  }
  30% {
      transform: scale(.9);
      transform-origin: center
  }
  45% {
      transform: scale(1.4);
      transform-origin: center
  }
  100%,
  60% {
      transform: scale(.9);
      transform-origin: center
  }
}

.cp-meter {
  border-radius: 50%;
  border-top: solid 6px #0fd6ff;
  border-right: solid 6px #0fd6ff;
  border-bottom: solid 6px #0fd6ff;
  border-left: solid 6px #0fd6ff;
  width: 48px;
  height: 48px;
  display: inline-block;
  box-sizing: border-box
}

.cp-meter:before {
  border-radius: 3px;
  content: " ";
  width: 6px;
  height: 12px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #0fd6ff;
  position: absolute;
  top: 5px;
  left: 16px;
  transform-origin: center bottom;
  animation: cp-meter-animate-before 1s linear infinite
}

@keyframes cp-meter-animate-before {
  0% {
      transform: rotate(-45deg)
  }
  100% {
      transform: rotate(315deg)
  }
}