/*******************************************************/
/***************** 05. Custom Animation ****************/
/*******************************************************/
/* Animation Delay */
@for $i from 1 through 2
     .delay-#{1 * $i}-0s
        animation-delay: #{$i}s
   
@for $i from 1 through 9
    .delay-0-#{1 * $i}s
        animation-delay: #{0 + .1 * $i}s

@for $i from 1 through 9
    .delay-1-#{1 * $i}s
        animation-delay: #{1 + .1 * $i}s

/* Menu Sticky */
@keyframes sticky
    0%
        top: -100px
    100%
        top: 0
        
/* Hero Circle */
@keyframes rotated_circle
    0%
        transform: rotate(0deg)
    100%
        transform: rotate(360deg)
             
/* Hero Circle */
@keyframes upDownLeft
    0%,
    100%
        transform: translate(0px, 0px)
    25%,
    75%
        transform: translate(0px, 50px)
    50%
        transform: translate(-50px, 50px)
    
@keyframes shapeAnimationOne
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(0px, 150px) rotate(90deg)

  50%
    transform: translate(150px, 150px) rotate(180deg)

  75%
    transform: translate(150px, 0px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationTwo
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(-150px, -0px) rotate(270deg)

  50%
    transform: translate(-150px, -150px) rotate(180deg)

  75%
    transform: translate(-0px, -150px) rotate(90deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationThree
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate(50px, 150px) rotate(90deg)

  50%
    transform: translate(150px, 150px) rotate(180deg)

  75%
    transform: translate(150px, 50px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationFour
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate((-150px) -50px) rotate(90deg)

  50%
    transform: translate(-150px, -150px) rotate(180deg)

  75%
    transform: translate(-50px, -150px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes shapeAnimationFive
  0%
    transform: translate(0px, 0px) rotate(0deg)

  25%
    transform: translate((-100px) -100px) rotate(90deg)

  50%
    transform: translate(100px, 50px) rotate(180deg)

  75%
    transform: translate(-100px, 150px) rotate(270deg)

  100%
    transform: translate(0px, 0px) rotate(360deg)

@keyframes down-up-one
  0%
    transform: rotateX(0deg) translateY(0px)

  50%
    transform: rotateX(0deg) translateY(25px)

  100%
    transform: rotateX(0deg) translateY(0px)

@keyframes down-up-two
  0%
    transform: rotateX(0deg) translate(0px)

  50%
    transform: rotateX(0deg) translate(25px, -25px)

  100%
    transform: rotateX(0deg) translate(0px)

@keyframes moveLeftRight
    0%
        transform: translateX(0)
    50%
        transform: translateX(80px)
    100%
        transform: translateX(0)
    
@keyframes pulse
    to
        box-shadow: 0 0 0 35px rgba(255, 255, 255, 0)