.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

a {
  text-decoration: none;
}

/* ALL LOADERS */

.loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

/* LOADER 1 */

#loader-1:before,
#loader-1:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #e3342f;
}

#loader-1:before {
  z-index: 100;
  -webkit-animation: spin 1s infinite;
          animation: spin 1s infinite;
}

#loader-1:after {
  border: 10px solid #ccc;
}

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

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

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

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

/* LOADER 2 */

#loader-2 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #e3342f;
  margin: 35px 5px;
}

#loader-2 span:nth-child(1) {
  -webkit-animation: bounce 1s ease-in-out infinite;
          animation: bounce 1s ease-in-out infinite;
}

#loader-2 span:nth-child(2) {
  -webkit-animation: bounce 1s ease-in-out 0.33s infinite;
          animation: bounce 1s ease-in-out 0.33s infinite;
}

#loader-2 span:nth-child(3) {
  -webkit-animation: bounce 1s ease-in-out 0.66s infinite;
          animation: bounce 1s ease-in-out 0.66s infinite;
}

@-webkit-keyframes bounce {
  0%, 75%, 100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }
}

@keyframes bounce {
  0%, 75%, 100% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }
}

/* LOADER 3 */

#loader-3:before,
#loader-3:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  background-color: #3498db;
  -webkit-animation: squaremove 1s ease-in-out infinite;
          animation: squaremove 1s ease-in-out infinite;
}

#loader-3:after {
  bottom: 0;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes squaremove {
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }

  25% {
    transform: translate(40px, 40px) rotate(45deg);
  }

  50% {
    transform: translate(0px, 80px) rotate(0deg);
  }

  75% {
    transform: translate(-40px, 40px) rotate(45deg);
  }
}

@keyframes squaremove {
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }

  25% {
    transform: translate(40px, 40px) rotate(45deg);
  }

  50% {
    transform: translate(0px, 80px) rotate(0deg);
  }

  75% {
    transform: translate(-40px, 40px) rotate(45deg);
  }
}

/* LOADER 4 */

#loader-4 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
  opacity: 0;
}

#loader-4 span:nth-child(1) {
  -webkit-animation: opacitychange 1s ease-in-out infinite;
          animation: opacitychange 1s ease-in-out infinite;
}

#loader-4 span:nth-child(2) {
  -webkit-animation: opacitychange 1s ease-in-out 0.33s infinite;
          animation: opacitychange 1s ease-in-out 0.33s infinite;
}

#loader-4 span:nth-child(3) {
  -webkit-animation: opacitychange 1s ease-in-out 0.66s infinite;
          animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@-webkit-keyframes opacitychange {
  0%, 100% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}

@keyframes opacitychange {
  0%, 100% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}

/* LOADER 5 */

#loader-5 span {
  display: block;
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 20px;
  height: 20px;
  background-color: #3498db;
}

#loader-5 span:nth-child(2) {
  -webkit-animation: moveanimation1 1s ease-in-out infinite;
          animation: moveanimation1 1s ease-in-out infinite;
}

#loader-5 span:nth-child(3) {
  -webkit-animation: moveanimation2 1s ease-in-out infinite;
          animation: moveanimation2 1s ease-in-out infinite;
}

#loader-5 span:nth-child(4) {
  -webkit-animation: moveanimation3 1s ease-in-out infinite;
          animation: moveanimation3 1s ease-in-out infinite;
}

@-webkit-keyframes moveanimation1 {
  0%, 100% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(30px);
  }
}

@keyframes moveanimation1 {
  0%, 100% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(30px);
  }
}

@-webkit-keyframes moveanimation2 {
  0%, 100% {
    transform: translateY(0px);
  }

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

@keyframes moveanimation2 {
  0%, 100% {
    transform: translateY(0px);
  }

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

@-webkit-keyframes moveanimation3 {
  0%, 100% {
    transform: translate(0px, 0px);
  }

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

@keyframes moveanimation3 {
  0%, 100% {
    transform: translate(0px, 0px);
  }

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

/* LOADER 6 */

#loader-6 {
  top: 40px;
  left: -2.5px;
}

#loader-6 span {
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #3498db;
}

#loader-6 span:nth-child(1) {
  -webkit-animation: grow 1s ease-in-out infinite;
          animation: grow 1s ease-in-out infinite;
}

#loader-6 span:nth-child(2) {
  -webkit-animation: grow 1s ease-in-out 0.15s infinite;
          animation: grow 1s ease-in-out 0.15s infinite;
}

#loader-6 span:nth-child(3) {
  -webkit-animation: grow 1s ease-in-out 0.3s infinite;
          animation: grow 1s ease-in-out 0.3s infinite;
}

#loader-6 span:nth-child(4) {
  -webkit-animation: grow 1s ease-in-out 0.45s infinite;
          animation: grow 1s ease-in-out 0.45s infinite;
}

@-webkit-keyframes grow {
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.8);
  }
}

@keyframes grow {
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.8);
  }
}

/* LOADER 7 */

#loader-7 {
  -ms-perspective: 120px;
  perspective: 120px;
}

#loader-7:before {
  content: "";
  position: absolute;
  left: 25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #3498db;
  -webkit-animation: flip 1s infinite;
          animation: flip 1s infinite;
}

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

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(180deg) rotateX(180deg);
  }
}

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

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(180deg) rotateX(180deg);
  }
}

/* LOADER 8 */

#loader-8:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: calc(50% - 10px);
  left: 0px;
  background-color: #3498db;
  -webkit-animation: rotatemove 1s infinite;
          animation: rotatemove 1s infinite;
}

@-webkit-keyframes rotatemove {
  0% {
    transform: scale(1) translateX(0px);
  }

  100% {
    transform: scale(2) translateX(45px);
  }
}

@keyframes rotatemove {
  0% {
    transform: scale(1) translateX(0px);
  }

  100% {
    transform: scale(2) translateX(45px);
  }
}