.fadeout {
  opacity: 1;
}

.fadeout.is-visible {
  -webkit-animation: fadeOut 3s forwards;
  -moz-animation: fadeOut 3s forwards;
  -ms-animation: fadeOut 3s forwards;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadein {
  opacity: 0;
}

.fadein.is-visible {
  -webkit-animation: fadeIn 2s forwards;
  -moz-animation: fadeIn 2s forwards;
  -ms-animation: fadeIn 2s forwards;
  animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeinleft {
  opacity: 0;
  transform: translateX(-20px);
}

.fadeinleft.is-visible {
  -webkit-animation: fadeInLeft 2s forwards;
  -moz-animation: fadeInLeft 2s forwards;
  -ms-animation: fadeInLeft 2s forwards;
  animation: fadeInLeft 2s forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeinright {
  opacity: 0;
  transform: translateX(20px);
}

.fadeinright.is-visible {
  -webkit-animation: fadeInRight 2s forwards;
  -moz-animation: fadeInRight 2s forwards;
  -ms-animation: fadeInRight 2s forwards;
  animation: fadeInRight 2s forwards;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeintop {
  opacity: 0;
  transform: translateY(-20px);
}

.fadeintop.is-visible {
  -webkit-animation: fadeInTop 2s forwards;
  -moz-animation: fadeInTop 2s forwards;
  -ms-animation: fadeInTop 2s forwards;
  animation: fadeInTop 2s forwards;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeintop-noopacity {
  transform: translateY(-20px);
}

.fadeintop-noopacity.is-visible {
  -webkit-animation: fadeInTopNo 2s forwards;
  -moz-animation: fadeInTopNo 2s forwards;
  -ms-animation: fadeInTopNo 2s forwards;
  animation: fadeInTopNo 2s forwards;
}

@keyframes fadeInTopNo {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.fadeinbottom {
  opacity: 0;
  transform: translateY(20px);
}

.fadeinbottom.is-visible {
  -webkit-animation: fadeInBottom 2s forwards;
  -moz-animation: fadeInBottom 2s forwards;
  -ms-animation: fadeInBottom 2s forwards;
  animation: fadeInBottom 2s forwards;
}

@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}