/* ///////////////////////////////////////////////////////////////////// */
/* Gradient Flow */

@keyframes flow {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 30% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Rotate Orbit */

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Orbit */

@keyframes counterRotate {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate One */

@keyframes counterRotateOne {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translate(-21rem)
      rotate(-0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg) translate(-21rem)
      rotate(-360deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateOne {
    from {
      transform: translate(-50%, -50%) rotate(0deg) translate(-28rem)
        rotate(-0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(0deg) translate(-28rem)
        rotate(-360deg);
    }
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Two */

@keyframes counterRotateTwo {
  from {
    transform: translate(-50%, -50%) rotate(60deg) translate(-21rem)
      rotate(-60deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(60deg) translate(-21rem)
      rotate(-420deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateTwo {
    from {
      transform: translate(-50%, -50%) rotate(60deg) translate(-28rem)
        rotate(-60deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(60deg) translate(-28rem)
        rotate(-420deg);
    }
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Three */

@keyframes counterRotateThree {
  from {
    transform: translate(-50%, -50%) rotate(120deg) translate(-21rem)
      rotate(-120deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(120deg) translate(-21rem)
      rotate(-480deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateThree {
    from {
      transform: translate(-50%, -50%) rotate(120deg) translate(-28rem)
        rotate(-120deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(120deg) translate(-28rem)
        rotate(-480deg);
    }
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Four */

@keyframes counterRotateFour {
  from {
    transform: translate(-50%, -50%) rotate(180deg) translate(-21rem)
      rotate(-180deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(180deg) translate(-21rem)
      rotate(-540deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateFour {
    from {
      transform: translate(-50%, -50%) rotate(180deg) translate(-28rem)
        rotate(-180deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(180deg) translate(-28rem)
        rotate(-540deg);
    }
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Five */

@keyframes counterRotateFive {
  from {
    transform: translate(-50%, -50%) rotate(240deg) translate(-21rem)
      rotate(-240deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(240deg) translate(-21rem)
      rotate(-600deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateFive {
    from {
      transform: translate(-50%, -50%) rotate(240deg) translate(-28rem)
        rotate(-240deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(240deg) translate(-28rem)
        rotate(-600deg);
    }
  }
}

/* ///////////////////////////////////////////////////////////////////// */
/* Counter Rotate Six */

@keyframes counterRotateSix {
  from {
    transform: translate(-50%, -50%) rotate(300deg) translate(-21rem)
      rotate(-300deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(300deg) translate(-21rem)
      rotate(-660deg);
  }
}

@media (min-width: 768px) {
  @keyframes counterRotateSix {
    from {
      transform: translate(-50%, -50%) rotate(300deg) translate(-28rem)
        rotate(-300deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(300deg) translate(-28rem)
        rotate(-660deg);
    }
  }
}