.nt-effect-blink {
  font-size: 25px;
  font-family: cursive;
  color: white;
  animation-name: nt-blink-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes nt-blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}


.nt-effect-wiggle {
    animation: nt-wiggle-animation 2s linear infinite;
}
  
  /* Keyframes */
  @keyframes nt-wiggle-animation {
    0%, 7% {
      transform: rotateZ(0);
    }
    15% {
      transform: rotateZ(-15deg);
    }
    20% {
      transform: rotateZ(10deg);
    }
    25% {
      transform: rotateZ(-10deg);
    }
    30% {
      transform: rotateZ(6deg);
    }
    35% {
      transform: rotateZ(-4deg);
    }
    40%, 100% {
      transform: rotateZ(0);
    }
  }


  .nt-effect-float-up {
    animation: nt-float-up-animation 3s ease-in-out infinite;
  }

  @keyframes nt-float-up-animation {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-20px);
    }
    100% {
      transform: translatey(0px);
    }
  }

  .nt-effect-float-down {
    animation: nt-float-down-animation 3s ease-in-out infinite;
  }

  @keyframes nt-float-down-animation {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(+20px);
    }
    100% {
      transform: translatey(0px);
    }
  }

  .nt-effect-float-left {
    animation: nt-float-left-animation 3s ease-in-out infinite;
  }

  @keyframes nt-float-left-animation {
    0% {
      transform: translatex(0px);
    }
    50% {
      transform: translatex(-20px);
    }
    100% {
      transform: translatex(0px);
    }
  }

  .nt-effect-float-right {
    animation: nt-float-right-animation 3s ease-in-out infinite;
  }

  @keyframes nt-float-right-animation {
    0% {
      transform: translatex(0px);
    }
    50% {
      transform: translatex(+20px);
    }
    100% {
      transform: translatex(0px);
    }
  }

 .nt-effect-float-up.slow,
 .nt-effect-float-down.slow,
 .nt-effect-float-left.slow,
 .nt-effect-float-right.slow
{
    animation-duration: 6s;
}

.nt-effect-float-up.fast,
 .nt-effect-float-down.fast,
 .nt-effect-float-left.fast,
 .nt-effect-float-right.fast
{
    animation-duration: 1s;
}


.nt-effect-spin {
    animation-name: nt-spin-animation;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.nt-effect-spin.reverse {
    animation-name: nt-spin-reverse-animation;
}

@keyframes nt-spin-animation {
    from {
        transform: rotate(0deg);
    }

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

@keyframes nt-spin-reverse-animation {
    from {
        transform: rotate(0deg);
    }

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

.nt-effect-spin.slow {
    animation-duration: 5000ms;
}

.nt-effect-spin.fast {
    animation-duration: 500ms;
}

@keyframes nt-spin-animation {
    from {
        transform: rotate(0deg);
    }

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


.nt-effect-skeleton-line {
  float: left;
  width: 100%;
  height: 16px;
  border-radius: 7px;
  opacity: 50%;
  background-image: linear-gradient(45deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 66%;
  animation: nt-skeleton-line-animation 1.5s infinite linear;
}

.nt-effect-skeleton-line.slow {
  animation-duration: 2s;
}

.nt-effect-skeleton-line.fast {
  animation-duration: 1s;
}

@keyframes nt-skeleton-line-animation {
  0% {
      background-position: -100%;
  }

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