/*  css-loading-spinners.css
  Copyright (c) Ian A. Cook
  MIT License
  https://github.com/nai888/css-loading-spinners
*/

:root {
  --cls-color: var(--hot-pink);
  --cls-sec-color: var(--cream);
  --cls-size: 5rem;
  --cls-margin: 1rem;
  --cls-speed: 3s;
}

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

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

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

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

@-webkit-keyframes flip-flop {

  0%,
  100% {
    -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
  }

  50% {
    -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
  }
}

@keyframes flip-flop {

  0%,
  100% {
    -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
    transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(0deg);
  }

  50% {
    -webkit-transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
    transform: perspective(calc(var(--cls-size) / 5 * 8)) rotateY(180deg);
  }
}

@-webkit-keyframes signal {
  0% {
    -webkit-transform: scale(0);
    -webkit-opacity: 0;
  }

  50% {
    -webkit-opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -webkit-opacity: 0;
  }
}

@keyframes signal {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    opacity: 0;
  }

  50% {
    -webkit-opacity: 1;
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 0;
    opacity: 0;
  }
}

@-webkit-keyframes grow-shrink {

  0%,
  100% {
    -webkit-transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes grow-shrink {

  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

[class^="cls-"] {
  box-sizing: border-box;
}

.cls-spinner {
  display: block;
  position: relative;
  width: var(--cls-size);
  height: var(--cls-size);
  margin: var(--cls-margin);
}

.cls-flip-flop {
  -webkit-animation: flip-flop calc(var(--cls-speed) / 2) ease infinite;
  animation: flip-flop calc(var(--cls-speed) / 2) ease infinite;
}

.cls-spin {
  -webkit-animation: spin var(--cls-speed) linear infinite;
  animation: spin var(--cls-speed) linear infinite;
}

.cls-circle {
  border-width: calc(var(--cls-size) / 5 * 0.75);
  border-style: solid;
  border-color: var(--cls-sec-color);
  border-top-color: var(--cls-color);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.cls-dual-circle {
  border-width: calc(var(--cls-size) / 5 * 0.75);
  border-style: solid;
  border-color: var(--cls-color) transparent;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.cls-bowtie,
.cls-bowtie-v {
  border-width: calc(var(--cls-size) / 2);
  border-style: solid;
  border-color: transparent var(--cls-color);
  border-radius: 50%;
}

.cls-bowtie-v {
  border-color: var(--cls-color) transparent;
}

.cls-square {
  width: 100%;
  height: 100%;
  background-color: var(--cls-color);
}

.cls-signal,
.cls-triple-signal,
.cls-triple-signal::before,
.cls-triple-signal::after {
  border-width: calc(var(--cls-size) / 25);
  border-style: solid;
  border-color: var(--cls-color);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
}

.cls-triple-signal::before,
.cls-triple-signal::after,
.cls-rings::before,
.cls-rings::after {
  content: '';
  top: 50%;
  left: 50%;
  margin: calc(var(--cls-size) / -2) 0 0 calc(var(--cls-size) / -2);
}

.cls-signal,
.cls-triple-signal,
.cls-triple-signal::before,
.cls-triple-signal::after {
  -webkit-animation: signal calc(var(--cls-speed) / 2) ease-out infinite;
  animation: signal calc(var(--cls-speed) / 2) ease-out infinite;
}

.cls-triple-signal::before {
  -webkit-animation-delay: calc(var(--cls-speed) / 20);
  animation-delay: calc(var(--cls-speed) / 20);
}

.cls-triple-signal::after {
  -webkit-animation-delay: calc(var(--cls-speed) * 3 / 20);
  animation-delay: calc(var(--cls-speed) * 3 / 20);
}

.cls-ring,
.cls-rings,
.cls-rings::before,
.cls-rings::after {
  border-width: calc(var(--cls-size) / 25);
  border-style: solid;
  border-color: var(--cls-color);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.cls-rings,
.cls-rings::before,
.cls-rings::after {
  position: absolute;
}

.cls-ring,
.cls-rings,
.cls-rings::before,
.cls-rings::after {
  -webkit-animation: grow-shrink var(--cls-speed) ease-in-out infinite;
  animation: grow-shrink var(--cls-speed) ease-in-out infinite;
}

.cls-rings::before {
  -webkit-animation-delay: calc(var(--cls-speed) / -4);
  animation-delay: calc(var(--cls-speed) / -4);
}

.cls-rings::after {
  -webkit-animation-delay: calc(var(--cls-speed) / 4);
  animation-delay: calc(var(--cls-speed) / 4);
}