/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-chase {
  fill: dodgerblue;
  transform-origin: center;
  animation: main-rotate 2.5s linear infinite normal forwards;
}

@keyframes main-rotate {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(260deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase circle {
  transform-origin: 75px 75px;
  animation: inner-rotate 2.5s linear infinite normal forwards;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase #circ_1 {
  animation-timing-function: cubic-bezier(0.3, 0, 0.5, 0.9);
}

svg#spinner-chase #circ_2 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.8);
}

svg#spinner-chase #circ_3 {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0.7);
}

svg#spinner-chase #circ_4 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.5, 0.6);
}

svg#spinner-chase #circ_5 {
  animation-timing-function: cubic-bezier(0.7, 0, 0.5, 0.5);
}

svg#spinner-chase #circ_6 {
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 0.4);
}

svg#spinner-chase #circ_7 {
  animation-timing-function: cubic-bezier(0.9, 0, 0.5, 0.3);
}

svg#spinner-chase #circ_8 {
  animation-timing-function: cubic-bezier(1, 0, 0.5, 0.2);
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

/* For one color - change the single fill ("dodgerblue" color) value */

/* For multi colors - change #pair-1,2,3,4 fill value */

svg#spinner-collect {
  fill: dodgerblue;
  animation: all 2.5s linear infinite normal forwards;
}

svg#spinner-collect #pair-1 {
  fill: inherit;
}

svg#spinner-collect #pair-2 {
  fill: inherit;
}

svg#spinner-collect #pair-3 {
  fill: inherit;
}

svg#spinner-collect #pair-4 {
  fill: inherit;
}

@keyframes all {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect * {
  transform-origin: center;
}

svg#spinner-collect g#pair-1 {
  animation: group-1 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-1 {
  0% {
    transform: rotate(0deg);
  }

  85%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-2 {
  animation: group-2 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-2 {
  0%, 7% {
    transform: rotate(0deg);
  }

  90%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-3 {
  animation: group-3 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-3 {
  0%, 14% {
    transform: rotate(0deg);
  }

  95%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-4 {
  animation: group-4 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-4 {
  0%, 22% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-dance {
  fill: dodgerblue;
  animation: half-spin 4.8s ease-in-out infinite normal forwards;
}

svg#spinner-dance #group-1 circle {
  fill: #ae2412;
}

svg#spinner-dance #group-3 circle {
  fill: #e1e1e1;
}

@keyframes half-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  15%, 100% {
    transform: rotate(180deg);
  }
}

svg#spinner-dance * {
  transform-origin: center;
}

svg#spinner-dance g#group-1 {
  animation: dance-1 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-1 {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(0);
  }

  15% {
    transform: rotate(-5deg);
  }

  30% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(1) {
  animation: circle-move-1 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-1 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(30px);
  }

  70% {
    transform: translate(10px, 30px);
  }

  80% {
    transform: translate(-10px, 30px);
  }

  100% {
    transform: translateY(30px);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(2) {
  animation: circle-move-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-2 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-30px);
  }

  70% {
    transform: translate(-10px, -30px);
  }

  80% {
    transform: translate(10px, -30px);
  }

  100% {
    transform: translateY(-30px);
  }
}

svg#spinner-dance g#group-2 {
  animation: dance-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-2 {
  0%, 20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(45deg);
    opacity: 1;
  }

  61%, 100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

svg#spinner-dance g#group-3 circle:nth-child(1) {
  animation: circle-move-3 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-3 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(-10px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-3 circle:nth-child(2) {
  animation: circle-move-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-4 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(10px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-4 {
  animation: dance-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-4 {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(-45deg);
    opacity: 1;
  }

  41%, 100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-dance {
    animation: ie-spin 1.2s ease-in-out infinite normal forwards;
  }

  svg#spinner-dance * {
    animation: none !important;
  }
}

@keyframes ie-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(185deg);
  }

  60%, 100% {
    transform: rotate(180deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-drain {
  animation: dspin 4s linear infinite;
  animation: dspin 2.5s linear infinite normal forwards;
}

svg#spinner-drain #circ_1 {
  fill: #ffb400;
}

svg#spinner-drain #circ_2 {
  fill: #ae2412;
}

svg#spinner-drain #circ_3 {
  fill: dodgerblue;
}

svg#spinner-drain #circ_4 {
  fill: #2745ae;
}

svg#spinner-drain circle {
  opacity: 0.8;
}

@keyframes dspin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-drain #circ_2 {
  transform-origin: 66px 71px;
  animation: dspin 3s linear backwards infinite;
}

svg#spinner-drain #circ_3 {
  transform-origin: 69px 69px;
  animation: dspin 2.5s linear backwards infinite;
}

svg#spinner-drain #circ_4 {
  transform-origin: 71px 72px;
  animation: dspin 2s linear infinite;
}

svg#spinner-drain * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-drain circle#circ_2 {
    animation: fade-in-out 2.5s infinite both;
  }

  svg#spinner-drain circle#circ_3 {
    animation: fade-in-out 2.5s 0.33s infinite both;
  }

  svg#spinner-drain circle#circ_4 {
    animation: fade-in-out 2.5s 0.66s infinite both;
  }
}

@keyframes fade-in-out {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-lava #collapse-1 {
  fill: dodgerblue;
  animation: scaling 1.5s ease-in-out 2s infinite both;
}

svg#spinner-lava #collapse-2 {
  fill: #ae2412;
  animation: scaling 2s ease 0.5s infinite both;
}

svg#spinner-lava #collapse-3 {
  fill: #ffb400;
  animation: scaling 2.5s ease-in 0s infinite both;
}

svg#spinner-lava #collapse-4 {
  fill: #2745ae;
  animation: scaling 2s ease-in 1s infinite both;
}

@keyframes scaling {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.7;
  }
}

svg#spinner-lava * {
  transform-origin: center;
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-rolling #background-circle {
  fill: rgba(128, 128, 128, 0.2);
  stroke: rgba(255, 255, 255, 0.85);
}

svg#spinner-rolling #bubble-small {
  fill: #ae2412;
  animation-duration: 1s;
}

svg#spinner-rolling #bubble-medium {
  fill: #ffb400;
  animation-duration: 1.2s;
}

svg#spinner-rolling #bubble-large {
  fill: #2745ae;
  animation-duration: 1.7s;
}

svg#spinner-rolling #bubble-xl {
  fill: #1fffff;
  animation-duration: 2.2s;
}

svg#spinner-rolling #bubble-xxl {
  fill: dodgerblue;
  animation-duration: 3.2s;
}

svg#spinner-rolling circle {
  transform-origin: 75px 75px;
  animation-name: inner-rotate;
  opacity: 0.75;
  transform: rotate(0deg);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-rolling * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-rolling {
    animation: inner-rotate 2s linear infinite;
  }
}

/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-simple {
  fill: #ffb400;
  animation: inner-rotate 3s linear infinite normal forwards;
}

svg#spinner-simple g {
  transform-origin: center;
  transform: rotate(0deg);
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

#spinner-stroke-chaser #thin-stroke {
  stroke: #e1e1e1;
  stroke-width: 0.3;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#spinner-stroke-chaser #thick-stroke {
  stroke: dodgerblue;
  stroke-width: 1.8;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.88, -0.24, 0.29, 1.01);
}

#spinner-stroke-chaser ellipse {
  transform-origin: center;
  stroke-position: inside;
  stroke-linejoin: round;
  stroke-dasharray: 68.66967010498047;
  stroke-dashoffset: 34;
  fill: none;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

#spinner-stroke-chaser ellipse#thin-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 18;
  stroke-dashoffset: 1;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.5;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.75;
  }
}

#spinner-stroke-chaser ellipse#thick-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #spinner-stroke-chaser {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-stroke-ripple {
  stroke: dodgerblue;
}

svg#spinner-stroke-ripple circle {
  stroke-width: 2px;
  transform-origin: center;
  fill: none;
}

svg#spinner-stroke-ripple circle#spinner {
  animation: circle-ripple 2s linear 1.2s infinite both;
}

svg#spinner-stroke-ripple circle#under {
  stroke-width: 1px;
  animation: circle-ripple 2s linear infinite forwards;
}

@keyframes circle-ripple {
  0% {
    opacity: 0;
    transform: scale(0.4);
    stroke-width: 1px;
  }

  60% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
    stroke-width: 0.2px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-ripple circle#spinner {
    stroke-width: 0.5px;
  }
}

/* Change color value of "stroke" attribute below (stroke: #your-color) */

svg#spinner-stroke-stretch {
  stroke: #ffb400;
  animation: spin-1 2s linear infinite normal forwards;
}

svg#spinner-stroke-stretch circle {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 77;
  stroke-width: 1.5;
  transform-origin: center;
  animation: stroke-offset-1 1.4s ease-in-out infinite normal forwards;
}

@keyframes stroke-offset-1 {
  0%, 25% {
    stroke-dashoffset: 72;
    transform: rotate(0);
  }

  50%, 75% {
    stroke-dashoffset: 19;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 72;
    transform: rotate(360deg);
  }
}

@keyframes spin-1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-stretch {
    animation: spin-1 1.4s ease-in-out infinite reverse;
  }

  svg#spinner-stroke-stretch circle#stroke {
    stroke-dasharray: 30;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-strokes-laps #largest-stroke {
  stroke: #ae2412;
}

svg#spinner-strokes-laps #mid-stroke {
  stroke: dodgerblue;
}

svg#spinner-strokes-laps #smallest-stroke {
  stroke: #ffb400;
}

svg#spinner-strokes-laps ellipse {
  stroke-width: 0.5;
  transform-origin: center;
  stroke-position: inside;
  fill: none;
  stroke-linecap: round;
}

@media screen and (max-width: 75px) and (max-height: 75px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 0.8;
  }
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 1;
  }
}

svg#spinner-strokes-laps ellipse#largest-stroke {
  animation: spinner-1 4s infinite linear reverse, offset-1 4s infinite ease reverse;
  stroke-dashoffset: 68.66967010498047;
  stroke-dasharray: 34;
}

svg#spinner-strokes-laps ellipse#mid-stroke {
  animation: spinner-1 2s infinite linear reverse, offset-2 4s infinite ease-in-out;
  stroke-dashoffset: 62.426971435546875;
  stroke-dasharray: 55;
  animation-fill-mode: both;
}

svg#spinner-strokes-laps ellipse#smallest-stroke {
  animation: spinner-1 1s infinite cubic-bezier(0.88, -0.24, 0.29, 1.01);
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-strokes-laps {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-sun #sun {
  fill: #ffb400;
}

svg#spinner-sun #far-star {
  fill: dodgerblue;
}

svg#spinner-sun #near-star {
  fill: #ae2412;
}

svg#spinner-sun #far {
  animation: spin 3s linear infinite forwards;
}

svg#spinner-sun #near {
  animation: spin 3.3s linear infinite forwards;
}

svg#spinner-sun circle.path {
  fill: none;
  stroke: #e1e1e1;
  stroke-miterlimit: 10;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-sun circle.path {
    stroke: #7b7b7b;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  svg#spinner-sun circle.path {
    stroke-width: 2;
  }
}

svg#spinner-sun * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-sun {
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-chase {
  fill: dodgerblue;
  transform-origin: center;
  animation: main-rotate 2.5s linear infinite normal forwards;
}

@keyframes main-rotate {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(260deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase circle {
  transform-origin: 75px 75px;
  animation: inner-rotate 2.5s linear infinite normal forwards;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase #circ_1 {
  animation-timing-function: cubic-bezier(0.3, 0, 0.5, 0.9);
}

svg#spinner-chase #circ_2 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.8);
}

svg#spinner-chase #circ_3 {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0.7);
}

svg#spinner-chase #circ_4 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.5, 0.6);
}

svg#spinner-chase #circ_5 {
  animation-timing-function: cubic-bezier(0.7, 0, 0.5, 0.5);
}

svg#spinner-chase #circ_6 {
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 0.4);
}

svg#spinner-chase #circ_7 {
  animation-timing-function: cubic-bezier(0.9, 0, 0.5, 0.3);
}

svg#spinner-chase #circ_8 {
  animation-timing-function: cubic-bezier(1, 0, 0.5, 0.2);
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

/* For one color - change the single fill ("dodgerblue" color) value */

/* For multi colors - change #pair-1,2,3,4 fill value */

svg#spinner-collect {
  fill: dodgerblue;
  animation: all 2.5s linear infinite normal forwards;
}

svg#spinner-collect #pair-1 {
  fill: inherit;
}

svg#spinner-collect #pair-2 {
  fill: inherit;
}

svg#spinner-collect #pair-3 {
  fill: inherit;
}

svg#spinner-collect #pair-4 {
  fill: inherit;
}

@keyframes all {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect * {
  transform-origin: center;
}

svg#spinner-collect g#pair-1 {
  animation: group-1 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-1 {
  0% {
    transform: rotate(0deg);
  }

  85%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-2 {
  animation: group-2 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-2 {
  0%, 7% {
    transform: rotate(0deg);
  }

  90%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-3 {
  animation: group-3 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-3 {
  0%, 14% {
    transform: rotate(0deg);
  }

  95%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-4 {
  animation: group-4 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-4 {
  0%, 22% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-dance {
  fill: dodgerblue;
  animation: half-spin 4.8s ease-in-out infinite normal forwards;
}

svg#spinner-dance #group-1 circle {
  fill: #ae2412;
}

svg#spinner-dance #group-3 circle {
  fill: #e1e1e1;
}

@keyframes half-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  15%, 100% {
    transform: rotate(180deg);
  }
}

svg#spinner-dance * {
  transform-origin: center;
}

svg#spinner-dance g#group-1 {
  animation: dance-1 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-1 {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(0);
  }

  15% {
    transform: rotate(-5deg);
  }

  30% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(1) {
  animation: circle-move-1 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-1 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(30px);
  }

  70% {
    transform: translate(10px, 30px);
  }

  80% {
    transform: translate(-10px, 30px);
  }

  100% {
    transform: translateY(30px);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(2) {
  animation: circle-move-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-2 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-30px);
  }

  70% {
    transform: translate(-10px, -30px);
  }

  80% {
    transform: translate(10px, -30px);
  }

  100% {
    transform: translateY(-30px);
  }
}

svg#spinner-dance g#group-2 {
  animation: dance-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-2 {
  0%, 20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(45deg);
    opacity: 1;
  }

  61%, 100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

svg#spinner-dance g#group-3 circle:nth-child(1) {
  animation: circle-move-3 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-3 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(-10px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-3 circle:nth-child(2) {
  animation: circle-move-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-4 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(10px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-4 {
  animation: dance-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-4 {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(-45deg);
    opacity: 1;
  }

  41%, 100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-dance {
    animation: ie-spin 1.2s ease-in-out infinite normal forwards;
  }

  svg#spinner-dance * {
    animation: none !important;
  }
}

@keyframes ie-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(185deg);
  }

  60%, 100% {
    transform: rotate(180deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-drain {
  animation: dspin 4s linear infinite;
  animation: dspin 2.5s linear infinite normal forwards;
}

svg#spinner-drain #circ_1 {
  fill: #ffb400;
}

svg#spinner-drain #circ_2 {
  fill: #ae2412;
}

svg#spinner-drain #circ_3 {
  fill: dodgerblue;
}

svg#spinner-drain #circ_4 {
  fill: #2745ae;
}

svg#spinner-drain circle {
  opacity: 0.8;
}

@keyframes dspin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-drain #circ_2 {
  transform-origin: 66px 71px;
  animation: dspin 3s linear backwards infinite;
}

svg#spinner-drain #circ_3 {
  transform-origin: 69px 69px;
  animation: dspin 2.5s linear backwards infinite;
}

svg#spinner-drain #circ_4 {
  transform-origin: 71px 72px;
  animation: dspin 2s linear infinite;
}

svg#spinner-drain * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-drain circle#circ_2 {
    animation: fade-in-out 2.5s infinite both;
  }

  svg#spinner-drain circle#circ_3 {
    animation: fade-in-out 2.5s 0.33s infinite both;
  }

  svg#spinner-drain circle#circ_4 {
    animation: fade-in-out 2.5s 0.66s infinite both;
  }
}

@keyframes fade-in-out {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-lava #collapse-1 {
  fill: dodgerblue;
  animation: scaling 1.5s ease-in-out 2s infinite both;
}

svg#spinner-lava #collapse-2 {
  fill: #ae2412;
  animation: scaling 2s ease 0.5s infinite both;
}

svg#spinner-lava #collapse-3 {
  fill: #ffb400;
  animation: scaling 2.5s ease-in 0s infinite both;
}

svg#spinner-lava #collapse-4 {
  fill: #2745ae;
  animation: scaling 2s ease-in 1s infinite both;
}

@keyframes scaling {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.7;
  }
}

svg#spinner-lava * {
  transform-origin: center;
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-rolling #background-circle {
  fill: rgba(128, 128, 128, 0.2);
  stroke: rgba(255, 255, 255, 0.85);
}

svg#spinner-rolling #bubble-small {
  fill: #ae2412;
  animation-duration: 1s;
}

svg#spinner-rolling #bubble-medium {
  fill: #ffb400;
  animation-duration: 1.2s;
}

svg#spinner-rolling #bubble-large {
  fill: #2745ae;
  animation-duration: 1.7s;
}

svg#spinner-rolling #bubble-xl {
  fill: #1fffff;
  animation-duration: 2.2s;
}

svg#spinner-rolling #bubble-xxl {
  fill: dodgerblue;
  animation-duration: 3.2s;
}

svg#spinner-rolling circle {
  transform-origin: 75px 75px;
  animation-name: inner-rotate;
  opacity: 0.75;
  transform: rotate(0deg);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-rolling * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-rolling {
    animation: inner-rotate 2s linear infinite;
  }
}

/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-simple {
  fill: #ffb400;
  animation: inner-rotate 3s linear infinite normal forwards;
}

svg#spinner-simple g {
  transform-origin: center;
  transform: rotate(0deg);
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

#spinner-stroke-chaser #thin-stroke {
  stroke: #e1e1e1;
  stroke-width: 0.3;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#spinner-stroke-chaser #thick-stroke {
  stroke: dodgerblue;
  stroke-width: 1.8;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.88, -0.24, 0.29, 1.01);
}

#spinner-stroke-chaser ellipse {
  transform-origin: center;
  stroke-position: inside;
  stroke-linejoin: round;
  stroke-dasharray: 68.66967010498047;
  stroke-dashoffset: 34;
  fill: none;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

#spinner-stroke-chaser ellipse#thin-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 18;
  stroke-dashoffset: 1;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.5;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.75;
  }
}

#spinner-stroke-chaser ellipse#thick-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #spinner-stroke-chaser {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-stroke-ripple {
  stroke: dodgerblue;
}

svg#spinner-stroke-ripple circle {
  stroke-width: 2px;
  transform-origin: center;
  fill: none;
}

svg#spinner-stroke-ripple circle#spinner {
  animation: circle-ripple 2s linear 1.2s infinite both;
}

svg#spinner-stroke-ripple circle#under {
  stroke-width: 1px;
  animation: circle-ripple 2s linear infinite forwards;
}

@keyframes circle-ripple {
  0% {
    opacity: 0;
    transform: scale(0.4);
    stroke-width: 1px;
  }

  60% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
    stroke-width: 0.2px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-ripple circle#spinner {
    stroke-width: 0.5px;
  }
}

/* Change color value of "stroke" attribute below (stroke: #your-color) */

svg#spinner-stroke-stretch {
  stroke: #ffb400;
  animation: spin-1 2s linear infinite normal forwards;
}

svg#spinner-stroke-stretch circle {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 77;
  stroke-width: 1.5;
  transform-origin: center;
  animation: stroke-offset-1 1.4s ease-in-out infinite normal forwards;
}

@keyframes stroke-offset-1 {
  0%, 25% {
    stroke-dashoffset: 72;
    transform: rotate(0);
  }

  50%, 75% {
    stroke-dashoffset: 19;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 72;
    transform: rotate(360deg);
  }
}

@keyframes spin-1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-stretch {
    animation: spin-1 1.4s ease-in-out infinite reverse;
  }

  svg#spinner-stroke-stretch circle#stroke {
    stroke-dasharray: 30;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-strokes-laps #largest-stroke {
  stroke: #ae2412;
}

svg#spinner-strokes-laps #mid-stroke {
  stroke: dodgerblue;
}

svg#spinner-strokes-laps #smallest-stroke {
  stroke: #ffb400;
}

svg#spinner-strokes-laps ellipse {
  stroke-width: 0.5;
  transform-origin: center;
  stroke-position: inside;
  fill: none;
  stroke-linecap: round;
}

@media screen and (max-width: 75px) and (max-height: 75px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 0.8;
  }
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 1;
  }
}

svg#spinner-strokes-laps ellipse#largest-stroke {
  animation: spinner-1 4s infinite linear reverse, offset-1 4s infinite ease reverse;
  stroke-dashoffset: 68.66967010498047;
  stroke-dasharray: 34;
}

svg#spinner-strokes-laps ellipse#mid-stroke {
  animation: spinner-1 2s infinite linear reverse, offset-2 4s infinite ease-in-out;
  stroke-dashoffset: 62.426971435546875;
  stroke-dasharray: 55;
  animation-fill-mode: both;
}

svg#spinner-strokes-laps ellipse#smallest-stroke {
  animation: spinner-1 1s infinite cubic-bezier(0.88, -0.24, 0.29, 1.01);
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-strokes-laps {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-sun #sun {
  fill: #ffb400;
}

svg#spinner-sun #far-star {
  fill: dodgerblue;
}

svg#spinner-sun #near-star {
  fill: #ae2412;
}

svg#spinner-sun #far {
  animation: spin 3s linear infinite forwards;
}

svg#spinner-sun #near {
  animation: spin 3.3s linear infinite forwards;
}

svg#spinner-sun circle.path {
  fill: none;
  stroke: #e1e1e1;
  stroke-miterlimit: 10;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-sun circle.path {
    stroke: #7b7b7b;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  svg#spinner-sun circle.path {
    stroke-width: 2;
  }
}

svg#spinner-sun * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-sun {
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-chase {
  fill: dodgerblue;
  transform-origin: center;
  animation: main-rotate 2.5s linear infinite normal forwards;
}

@keyframes main-rotate {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(260deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase circle {
  transform-origin: 75px 75px;
  animation: inner-rotate 2.5s linear infinite normal forwards;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase #circ_1 {
  animation-timing-function: cubic-bezier(0.3, 0, 0.5, 0.9);
}

svg#spinner-chase #circ_2 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.8);
}

svg#spinner-chase #circ_3 {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0.7);
}

svg#spinner-chase #circ_4 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.5, 0.6);
}

svg#spinner-chase #circ_5 {
  animation-timing-function: cubic-bezier(0.7, 0, 0.5, 0.5);
}

svg#spinner-chase #circ_6 {
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 0.4);
}

svg#spinner-chase #circ_7 {
  animation-timing-function: cubic-bezier(0.9, 0, 0.5, 0.3);
}

svg#spinner-chase #circ_8 {
  animation-timing-function: cubic-bezier(1, 0, 0.5, 0.2);
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

/* For one color - change the single fill ("dodgerblue" color) value */

/* For multi colors - change #pair-1,2,3,4 fill value */

svg#spinner-collect {
  fill: dodgerblue;
  animation: all 2.5s linear infinite normal forwards;
}

svg#spinner-collect #pair-1 {
  fill: inherit;
}

svg#spinner-collect #pair-2 {
  fill: inherit;
}

svg#spinner-collect #pair-3 {
  fill: inherit;
}

svg#spinner-collect #pair-4 {
  fill: inherit;
}

@keyframes all {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect * {
  transform-origin: center;
}

svg#spinner-collect g#pair-1 {
  animation: group-1 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-1 {
  0% {
    transform: rotate(0deg);
  }

  85%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-2 {
  animation: group-2 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-2 {
  0%, 7% {
    transform: rotate(0deg);
  }

  90%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-3 {
  animation: group-3 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-3 {
  0%, 14% {
    transform: rotate(0deg);
  }

  95%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-4 {
  animation: group-4 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-4 {
  0%, 22% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-dance {
  fill: dodgerblue;
  animation: half-spin 4.8s ease-in-out infinite normal forwards;
}

svg#spinner-dance #group-1 circle {
  fill: #ae2412;
}

svg#spinner-dance #group-3 circle {
  fill: #e1e1e1;
}

@keyframes half-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  15%, 100% {
    transform: rotate(180deg);
  }
}

svg#spinner-dance * {
  transform-origin: center;
}

svg#spinner-dance g#group-1 {
  animation: dance-1 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-1 {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(0);
  }

  15% {
    transform: rotate(-5deg);
  }

  30% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(1) {
  animation: circle-move-1 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-1 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(30px);
  }

  70% {
    transform: translate(10px, 30px);
  }

  80% {
    transform: translate(-10px, 30px);
  }

  100% {
    transform: translateY(30px);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(2) {
  animation: circle-move-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-2 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-30px);
  }

  70% {
    transform: translate(-10px, -30px);
  }

  80% {
    transform: translate(10px, -30px);
  }

  100% {
    transform: translateY(-30px);
  }
}

svg#spinner-dance g#group-2 {
  animation: dance-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-2 {
  0%, 20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(45deg);
    opacity: 1;
  }

  61%, 100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

svg#spinner-dance g#group-3 circle:nth-child(1) {
  animation: circle-move-3 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-3 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(-10px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-3 circle:nth-child(2) {
  animation: circle-move-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-4 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(10px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-4 {
  animation: dance-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-4 {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(-45deg);
    opacity: 1;
  }

  41%, 100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-dance {
    animation: ie-spin 1.2s ease-in-out infinite normal forwards;
  }

  svg#spinner-dance * {
    animation: none !important;
  }
}

@keyframes ie-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(185deg);
  }

  60%, 100% {
    transform: rotate(180deg);
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-drain {
  animation: dspin 4s linear infinite;
  animation: dspin 2.5s linear infinite normal forwards;
}

svg#spinner-drain #circ_1 {
  fill: #ffb400;
}

svg#spinner-drain #circ_2 {
  fill: #ae2412;
}

svg#spinner-drain #circ_3 {
  fill: dodgerblue;
}

svg#spinner-drain #circ_4 {
  fill: #2745ae;
}

svg#spinner-drain circle {
  opacity: 0.8;
}

@keyframes dspin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-drain #circ_2 {
  transform-origin: 66px 71px;
  animation: dspin 3s linear backwards infinite;
}

svg#spinner-drain #circ_3 {
  transform-origin: 69px 69px;
  animation: dspin 2.5s linear backwards infinite;
}

svg#spinner-drain #circ_4 {
  transform-origin: 71px 72px;
  animation: dspin 2s linear infinite;
}

svg#spinner-drain * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-drain circle#circ_2 {
    animation: fade-in-out 2.5s infinite both;
  }

  svg#spinner-drain circle#circ_3 {
    animation: fade-in-out 2.5s 0.33s infinite both;
  }

  svg#spinner-drain circle#circ_4 {
    animation: fade-in-out 2.5s 0.66s infinite both;
  }
}

@keyframes fade-in-out {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-lava #collapse-1 {
  fill: dodgerblue;
  animation: scaling 1.5s ease-in-out 2s infinite both;
}

svg#spinner-lava #collapse-2 {
  fill: #ae2412;
  animation: scaling 2s ease 0.5s infinite both;
}

svg#spinner-lava #collapse-3 {
  fill: #ffb400;
  animation: scaling 2.5s ease-in 0s infinite both;
}

svg#spinner-lava #collapse-4 {
  fill: #2745ae;
  animation: scaling 2s ease-in 1s infinite both;
}

@keyframes scaling {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.7;
  }
}

svg#spinner-lava * {
  transform-origin: center;
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-rolling #background-circle {
  fill: rgba(128, 128, 128, 0.2);
  stroke: rgba(255, 255, 255, 0.85);
}

svg#spinner-rolling #bubble-small {
  fill: #ae2412;
  animation-duration: 1s;
}

svg#spinner-rolling #bubble-medium {
  fill: #ffb400;
  animation-duration: 1.2s;
}

svg#spinner-rolling #bubble-large {
  fill: #2745ae;
  animation-duration: 1.7s;
}

svg#spinner-rolling #bubble-xl {
  fill: #1fffff;
  animation-duration: 2.2s;
}

svg#spinner-rolling #bubble-xxl {
  fill: dodgerblue;
  animation-duration: 3.2s;
}

svg#spinner-rolling circle {
  transform-origin: 75px 75px;
  animation-name: inner-rotate;
  opacity: 0.75;
  transform: rotate(0deg);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-rolling * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-rolling {
    animation: inner-rotate 2s linear infinite;
  }
}

/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-simple {
  fill: #ffb400;
  animation: inner-rotate 3s linear infinite normal forwards;
}

svg#spinner-simple g {
  transform-origin: center;
  transform: rotate(0deg);
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

#spinner-stroke-chaser #thin-stroke {
  stroke: #e1e1e1;
  stroke-width: 0.3;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#spinner-stroke-chaser #thick-stroke {
  stroke: dodgerblue;
  stroke-width: 1.8;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.88, -0.24, 0.29, 1.01);
}

#spinner-stroke-chaser ellipse {
  transform-origin: center;
  stroke-position: inside;
  stroke-linejoin: round;
  stroke-dasharray: 68.66967010498047;
  stroke-dashoffset: 34;
  fill: none;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

#spinner-stroke-chaser ellipse#thin-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 18;
  stroke-dashoffset: 1;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.5;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.75;
  }
}

#spinner-stroke-chaser ellipse#thick-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #spinner-stroke-chaser {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-stroke-ripple {
  stroke: dodgerblue;
}

svg#spinner-stroke-ripple circle {
  stroke-width: 2px;
  transform-origin: center;
  fill: none;
}

svg#spinner-stroke-ripple circle#spinner {
  animation: circle-ripple 2s linear 1.2s infinite both;
}

svg#spinner-stroke-ripple circle#under {
  stroke-width: 1px;
  animation: circle-ripple 2s linear infinite forwards;
}

@keyframes circle-ripple {
  0% {
    opacity: 0;
    transform: scale(0.4);
    stroke-width: 1px;
  }

  60% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
    stroke-width: 0.2px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-ripple circle#spinner {
    stroke-width: 0.5px;
  }
}

/* Change color value of "stroke" attribute below (stroke: #your-color) */

svg#spinner-stroke-stretch {
  stroke: #ffb400;
  animation: spin-1 2s linear infinite normal forwards;
}

svg#spinner-stroke-stretch circle {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 77;
  stroke-width: 1.5;
  transform-origin: center;
  animation: stroke-offset-1 1.4s ease-in-out infinite normal forwards;
}

@keyframes stroke-offset-1 {
  0%, 25% {
    stroke-dashoffset: 72;
    transform: rotate(0);
  }

  50%, 75% {
    stroke-dashoffset: 19;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 72;
    transform: rotate(360deg);
  }
}

@keyframes spin-1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-stretch {
    animation: spin-1 1.4s ease-in-out infinite reverse;
  }

  svg#spinner-stroke-stretch circle#stroke {
    stroke-dasharray: 30;
  }
}

/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-strokes-laps #largest-stroke {
  stroke: #ae2412;
}

svg#spinner-strokes-laps #mid-stroke {
  stroke: dodgerblue;
}

svg#spinner-strokes-laps #smallest-stroke {
  stroke: #ffb400;
}

svg#spinner-strokes-laps ellipse {
  stroke-width: 0.5;
  transform-origin: center;
  stroke-position: inside;
  fill: none;
  stroke-linecap: round;
}

@media screen and (max-width: 75px) and (max-height: 75px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 0.8;
  }
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 1;
  }
}

svg#spinner-strokes-laps ellipse#largest-stroke {
  animation: spinner-1 4s infinite linear reverse, offset-1 4s infinite ease reverse;
  stroke-dashoffset: 68.66967010498047;
  stroke-dasharray: 34;
}

svg#spinner-strokes-laps ellipse#mid-stroke {
  animation: spinner-1 2s infinite linear reverse, offset-2 4s infinite ease-in-out;
  stroke-dashoffset: 62.426971435546875;
  stroke-dasharray: 55;
  animation-fill-mode: both;
}

svg#spinner-strokes-laps ellipse#smallest-stroke {
  animation: spinner-1 1s infinite cubic-bezier(0.88, -0.24, 0.29, 1.01);
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-strokes-laps {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}

/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-sun #sun {
  fill: #ffb400;
}

svg#spinner-sun #far-star {
  fill: dodgerblue;
}

svg#spinner-sun #near-star {
  fill: #ae2412;
}

svg#spinner-sun #far {
  animation: spin 3s linear infinite forwards;
}

svg#spinner-sun #near {
  animation: spin 3.3s linear infinite forwards;
}

svg#spinner-sun circle.path {
  fill: none;
  stroke: #e1e1e1;
  stroke-miterlimit: 10;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-sun circle.path {
    stroke: #7b7b7b;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  svg#spinner-sun circle.path {
    stroke-width: 2;
  }
}

svg#spinner-sun * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-sun {
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-chase {
  fill: dodgerblue;
  transform-origin: center;
  animation: main-rotate 2.5s linear infinite normal forwards;
}

@keyframes main-rotate {
  0% {
    transform: rotate(0deg);
  }

  60% {
    transform: rotate(260deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase circle {
  transform-origin: 75px 75px;
  animation: inner-rotate 2.5s linear infinite normal forwards;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-chase #circ_1 {
  animation-timing-function: cubic-bezier(0.3, 0, 0.5, 0.9);
}

svg#spinner-chase #circ_2 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.5, 0.8);
}

svg#spinner-chase #circ_3 {
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0.7);
}

svg#spinner-chase #circ_4 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.5, 0.6);
}

svg#spinner-chase #circ_5 {
  animation-timing-function: cubic-bezier(0.7, 0, 0.5, 0.5);
}

svg#spinner-chase #circ_6 {
  animation-timing-function: cubic-bezier(0.8, 0, 0.5, 0.4);
}

svg#spinner-chase #circ_7 {
  animation-timing-function: cubic-bezier(0.9, 0, 0.5, 0.3);
}

svg#spinner-chase #circ_8 {
  animation-timing-function: cubic-bezier(1, 0, 0.5, 0.2);
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

/* For one color - change the single fill ("dodgerblue" color) value */

/* For multi colors - change #pair-1,2,3,4 fill value */

svg#spinner-collect {
  fill: dodgerblue;
  animation: all 2.5s linear infinite normal forwards;
}

svg#spinner-collect #pair-1 {
  fill: inherit;
}

svg#spinner-collect #pair-2 {
  fill: inherit;
}

svg#spinner-collect #pair-3 {
  fill: inherit;
}

svg#spinner-collect #pair-4 {
  fill: inherit;
}

@keyframes all {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect * {
  transform-origin: center;
}

svg#spinner-collect g#pair-1 {
  animation: group-1 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-1 {
  0% {
    transform: rotate(0deg);
  }

  85%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-2 {
  animation: group-2 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-2 {
  0%, 7% {
    transform: rotate(0deg);
  }

  90%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-3 {
  animation: group-3 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-3 {
  0%, 14% {
    transform: rotate(0deg);
  }

  95%, 100% {
    transform: rotate(359deg);
  }
}

svg#spinner-collect g#pair-4 {
  animation: group-4 2s cubic-bezier(0.56, -0.17, 0.73, 1) infinite normal forwards;
}

@keyframes group-4 {
  0%, 22% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-dance {
  fill: dodgerblue;
  animation: half-spin 4.8s ease-in-out infinite normal forwards;
}

svg#spinner-dance #group-1 circle {
  fill: #ae2412;
}

svg#spinner-dance #group-3 circle {
  fill: #e1e1e1;
}

@keyframes half-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  15%, 100% {
    transform: rotate(180deg);
  }
}

svg#spinner-dance * {
  transform-origin: center;
}

svg#spinner-dance g#group-1 {
  animation: dance-1 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-1 {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(0);
  }

  15% {
    transform: rotate(-5deg);
  }

  30% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(1) {
  animation: circle-move-1 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-1 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(30px);
  }

  70% {
    transform: translate(10px, 30px);
  }

  80% {
    transform: translate(-10px, 30px);
  }

  100% {
    transform: translateY(30px);
  }
}

svg#spinner-dance g#group-1 circle:nth-child(2) {
  animation: circle-move-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-2 {
  0%, 40% {
    transform: translateY(0);
  }

  60% {
    transform: translateY(-30px);
  }

  70% {
    transform: translate(-10px, -30px);
  }

  80% {
    transform: translate(10px, -30px);
  }

  100% {
    transform: translateY(-30px);
  }
}

svg#spinner-dance g#group-2 {
  animation: dance-2 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-2 {
  0%, 20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(0);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(45deg);
    opacity: 1;
  }

  61%, 100% {
    transform: rotate(45deg);
    opacity: 0;
  }
}

svg#spinner-dance g#group-3 circle:nth-child(1) {
  animation: circle-move-3 2.4s cubic-bezier(0.28, -0.17, 0.74, 1.17) infinite alternate forwards;
}

@keyframes circle-move-3 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(-10px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-3 circle:nth-child(2) {
  animation: circle-move-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes circle-move-4 {
  0%, 40% {
    transform: translateX(0);
  }

  60% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(10px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

svg#spinner-dance g#group-4 {
  animation: dance-4 2.4s ease-in-out infinite alternate forwards;
}

@keyframes dance-4 {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(0);
  }

  40% {
    transform: rotate(-45deg);
    opacity: 1;
  }

  41%, 100% {
    transform: rotate(-45deg);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-dance {
    animation: ie-spin 1.2s ease-in-out infinite normal forwards;
  }

  svg#spinner-dance * {
    animation: none !important;
  }
}

@keyframes ie-spin {
  0% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(185deg);
  }

  60%, 100% {
    transform: rotate(180deg);
  }
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-drain {
  animation: dspin 4s linear infinite;
  animation: dspin 2.5s linear infinite normal forwards;
}

svg#spinner-drain #circ_1 {
  fill: #ffb400;
}

svg#spinner-drain #circ_2 {
  fill: #ae2412;
}

svg#spinner-drain #circ_3 {
  fill: dodgerblue;
}

svg#spinner-drain #circ_4 {
  fill: #2745ae;
}

svg#spinner-drain circle {
  opacity: 0.8;
}

@keyframes dspin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-drain #circ_2 {
  transform-origin: 66px 71px;
  animation: dspin 3s linear backwards infinite;
}

svg#spinner-drain #circ_3 {
  transform-origin: 69px 69px;
  animation: dspin 2.5s linear backwards infinite;
}

svg#spinner-drain #circ_4 {
  transform-origin: 71px 72px;
  animation: dspin 2s linear infinite;
}

svg#spinner-drain * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-drain circle#circ_2 {
    animation: fade-in-out 2.5s infinite both;
  }

  svg#spinner-drain circle#circ_3 {
    animation: fade-in-out 2.5s 0.33s infinite both;
  }

  svg#spinner-drain circle#circ_4 {
    animation: fade-in-out 2.5s 0.66s infinite both;
  }
}

@keyframes fade-in-out {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-lava #collapse-1 {
  fill: dodgerblue;
  animation: scaling 1.5s ease-in-out 2s infinite both;
}

svg#spinner-lava #collapse-2 {
  fill: #ae2412;
  animation: scaling 2s ease 0.5s infinite both;
}

svg#spinner-lava #collapse-3 {
  fill: #ffb400;
  animation: scaling 2.5s ease-in 0s infinite both;
}

svg#spinner-lava #collapse-4 {
  fill: #2745ae;
  animation: scaling 2s ease-in 1s infinite both;
}

@keyframes scaling {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.7;
  }
}

svg#spinner-lava * {
  transform-origin: center;
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-rolling #background-circle {
  fill: rgba(128, 128, 128, 0.2);
  stroke: rgba(255, 255, 255, 0.85);
}

svg#spinner-rolling #bubble-small {
  fill: #ae2412;
  animation-duration: 1s;
}

svg#spinner-rolling #bubble-medium {
  fill: #ffb400;
  animation-duration: 1.2s;
}

svg#spinner-rolling #bubble-large {
  fill: #2745ae;
  animation-duration: 1.7s;
}

svg#spinner-rolling #bubble-xl {
  fill: #1fffff;
  animation-duration: 2.2s;
}

svg#spinner-rolling #bubble-xxl {
  fill: dodgerblue;
  animation-duration: 3.2s;
}

svg#spinner-rolling circle {
  transform-origin: 75px 75px;
  animation-name: inner-rotate;
  opacity: 0.75;
  transform: rotate(0deg);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

svg#spinner-rolling * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-rolling {
    animation: inner-rotate 2s linear infinite;
  }
}
/* Change color value of "fill" attribute below (fill: #your-color) */

svg#spinner-simple {
  fill: #ffb400;
  animation: inner-rotate 3s linear infinite normal forwards;
}

svg#spinner-simple g {
  transform-origin: center;
  transform: rotate(0deg);
}

@keyframes inner-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}
/* Change color value of the "stroke" attributes below (stroke: #your-color) */

#spinner-stroke-chaser #thin-stroke {
  stroke: #e1e1e1;
  stroke-width: 0.3;
  animation-duration: 2s;
  animation-timing-function: linear;
}

#spinner-stroke-chaser #thick-stroke {
  stroke: dodgerblue;
  stroke-width: 1.8;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.88, -0.24, 0.29, 1.01);
}

#spinner-stroke-chaser ellipse {
  transform-origin: center;
  stroke-position: inside;
  stroke-linejoin: round;
  stroke-dasharray: 68.66967010498047;
  stroke-dashoffset: 34;
  fill: none;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

#spinner-stroke-chaser ellipse#thin-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 18;
  stroke-dashoffset: 1;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.5;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  #spinner-stroke-chaser ellipse#thin-stroke {
    stroke-width: 0.75;
  }
}

#spinner-stroke-chaser ellipse#thick-stroke {
  animation-name: spinner-1;
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #spinner-stroke-chaser {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}
/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-stroke-ripple {
  stroke: dodgerblue;
}

svg#spinner-stroke-ripple circle {
  stroke-width: 2px;
  transform-origin: center;
  fill: none;
}

svg#spinner-stroke-ripple circle#spinner {
  animation: circle-ripple 2s linear 1.2s infinite both;
}

svg#spinner-stroke-ripple circle#under {
  stroke-width: 1px;
  animation: circle-ripple 2s linear infinite forwards;
}

@keyframes circle-ripple {
  0% {
    opacity: 0;
    transform: scale(0.4);
    stroke-width: 1px;
  }

  60% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
    stroke-width: 0.2px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-ripple circle#spinner {
    stroke-width: 0.5px;
  }
}
/* Change color value of "stroke" attribute below (stroke: #your-color) */

svg#spinner-stroke-stretch {
  stroke: #ffb400;
  animation: spin-1 2s linear infinite normal forwards;
}

svg#spinner-stroke-stretch circle {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 77;
  stroke-width: 1.5;
  transform-origin: center;
  animation: stroke-offset-1 1.4s ease-in-out infinite normal forwards;
}

@keyframes stroke-offset-1 {
  0%, 25% {
    stroke-dashoffset: 72;
    transform: rotate(0);
  }

  50%, 75% {
    stroke-dashoffset: 19;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 72;
    transform: rotate(360deg);
  }
}

@keyframes spin-1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-stroke-stretch {
    animation: spin-1 1.4s ease-in-out infinite reverse;
  }

  svg#spinner-stroke-stretch circle#stroke {
    stroke-dasharray: 30;
  }
}
/* Change color value of the "stroke" attributes below (stroke: #your-color) */

svg#spinner-strokes-laps #largest-stroke {
  /* stroke: #ae2412; */
  stroke: #B0C8E8;
}

svg#spinner-strokes-laps #mid-stroke {
  /* stroke: dodgerblue; */
  stroke: #7AA2D6;
}

svg#spinner-strokes-laps #smallest-stroke {
  /* stroke: #ffb400; */
  stroke: #407BBF;
}

svg#spinner-strokes-laps ellipse {
  stroke-width: 0.5;
  transform-origin: center;
  stroke-position: inside;
  fill: none;
  stroke-linecap: round;
}

@media screen and (max-width: 75px) and (max-height: 75px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 0.8;
  }
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-strokes-laps ellipse {
    stroke-width: 1;
  }
}

svg#spinner-strokes-laps ellipse#largest-stroke {
  animation: spinner-1 4s infinite linear reverse, offset-1 4s infinite ease reverse;
  stroke-dashoffset: 68.66967010498047;
  stroke-dasharray: 34;
}

svg#spinner-strokes-laps ellipse#mid-stroke {
  animation: spinner-1 2s infinite linear reverse, offset-2 4s infinite ease-in-out;
  stroke-dashoffset: 62.426971435546875;
  stroke-dasharray: 55;
  animation-fill-mode: both;
}

svg#spinner-strokes-laps ellipse#smallest-stroke {
  animation: spinner-1 1s infinite cubic-bezier(0.88, -0.24, 0.29, 1.01);
  stroke-dasharray: 56.18427276611328;
  stroke-dashoffset: 28;
}

@keyframes spinner-1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(359deg);
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-strokes-laps {
    animation: spinner-1 1s infinite ease-in-out reverse, offset-2 2s infinite ease-in-out;
  }
}
/* Change color value of the "fill" attributes below (fill: #your-color) */

svg#spinner-sun #sun {
  fill: #ffb400;
}

svg#spinner-sun #far-star {
  fill: dodgerblue;
}

svg#spinner-sun #near-star {
  fill: #ae2412;
}

svg#spinner-sun #far {
  animation: spin 3s linear infinite forwards;
}

svg#spinner-sun #near {
  animation: spin 3.3s linear infinite forwards;
}

svg#spinner-sun circle.path {
  fill: none;
  stroke: #e1e1e1;
  stroke-miterlimit: 10;
}

@media screen and (max-width: 50px) and (max-height: 50px) {
  svg#spinner-sun circle.path {
    stroke: #7b7b7b;
  }
}

@media screen and (max-width: 25px) and (max-height: 25px) {
  svg#spinner-sun circle.path {
    stroke-width: 2;
  }
}

svg#spinner-sun * {
  transform-origin: center;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  svg#spinner-sun {
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}