@keyframes loading {
   0% { transform: translate(6px,40px) scale(0); }
  25% { transform: translate(6px,40px) scale(0); }
  50% { transform: translate(6px,40px) scale(1); }
  75% { transform: translate(40px,40px) scale(1); }
 100% { transform: translate(74px,40px) scale(1); }
}
@keyframes loading-r {
   0% { transform: translate(74px,40px) scale(1): }
 100% { transform: translate(74px,40px) scale(0); }
}
@keyframes loading-c {
   0% { background: #ea3f34 }
  25% { background: #674794 }
  50% { background: #52a360 }
  75% { background: #f2982c }
 100% { background: #ea3f34 }
}
.loading div {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(40px,40px) scale(1);
  background: #ea3f34;
  animation: loading 1s infinite cubic-bezier(0,0.5,0.5,1);
}
.loading div:nth-child(1) {
  background: #f2982c;
  transform: translate(74px,40px) scale(1);
  animation: loading-r 0.25s infinite cubic-bezier(0,0.5,0.5,1), loading-c 1s infinite step-start;
}.loading div:nth-child(2) {
  animation-delay: -0.25s;
  background: #ea3f34;
}.loading div:nth-child(3) {
  animation-delay: -0.5s;
  background: #f2982c;
}.loading div:nth-child(4) {
  animation-delay: -0.75s;
  background: #52a360;
}.loading div:nth-child(5) {
  animation-delay: -1s;
  background: #674794;
}
.loadingio-spinner{
  width: 60px;
  height: 60px;
  display: inline-block;
  overflow: hidden;
  background: transparent;
}
.loading {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.58);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.loading div { box-sizing: content-box; }