.hidden {
  visibility: hidden;
}

/* left sliding animation */
.slide-left {
  animation: slideLeft ease-in;
  animation-duration: .6s;
}

@keyframes slideLeft {
  0% {
    transform: skewX(30deg) translateX(500px);
  }

  60% {
    transform: translateX(0px);
  }

  62% {
    transform: skewX(0deg) translateX(-30px);
  }

  100% {
    transform: skewX(0deg);
  }

}

/* right sliding animation */
.slide-right {
  animation: slideRight ease-in;
  animation-duration: .6s;
}

@keyframes slideRight {
  0% {
    transform: skewX(30deg) translateX(-500px);
  }

  60% {
    transform: translateX(0px);
  }

  62% {
    transform: skewX(0deg) translateX(30px);
  }

  100% {
    transform: skewX(0deg);
  }

}

.zoom-in {
  animation: animatezoom 0.6s
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.fade-in {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}

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

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fade-out {
  animation: fadeOut ease 3s;
  -webkit-animation: fadeOut ease 3s;
  -moz-animation: fadeOut ease 3s;
  -o-animation: fadeOut ease 3s;
  -ms-animation: fadeOut ease 3s;
}

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

  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.slideup,
.slidedown {
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: max-height 0.8s ease-in-out;
  -moz-transition: max-height 0.8s ease-in-out;
  -o-transition: max-height 0.8s ease-in-out;
  transition: max-height 0.8s ease-in-out;
}

.slidedown {
  max-height: 500px;
}