@keyframes fade-down {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

-webkit-@keyframes fade-down {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fade-up {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

-webkit-@keyframes fade-up {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes expand{
  0% {
    height: 0;
  }

  100% {
    height: auto;
  }
}

-webkit-@keyframes expand{
  0% {
    height: 0;
  }

  100% {
    height: auto;
  }
}

@keyframes pop-out {
  0% {
    margin: 0 auto 0 auto;
  }

  100% {
    margin: 50px auto 50px auto;
  }
}

-webkit-@keyframes pop-out {
  0% {
    margin: 0 auto 0 auto;
  }

  100% {
    margin: 50px auto 50px auto;
  }
}

.expand {
  animation: expand 2s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.fade-down {
  animation: fade-down .5s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.fade-down-b {
  animation: fade-down .7s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0s;
  -webkit-animation-delay: .2s;
}

.fade-up {
  animation: fade-up .5s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pop-out {
  animation: pop-out .3s forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.pop-in {
  animation: pop-out .3s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Chrome, Safari, Opera */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-direction: reverse;
}