button.animate-press,
a.animate-press,
div.animate-press>a {
  transition: transform 200ms ease;
}

button.animate-press:active,
a.animate-press:active {
  transform: scale(0.9);
}

/* to get a smooth transistion, the height or max-heigh must be set to a px unit value. */
.animate-grow-y {
  visibility: hidden;
  transform: scaleY(0);
  /*max-height: 0;*/
  height: 0;
}

.animate-grow-y.active {
  visibility: visible;
  /*max-height: 90px;*/
  height: 100%;
  animation: growY 300ms ease forwards;
  transition: height 300ms ease;
}

@keyframes growY {
  100% {
    transform: scaleY(1);
  }
}

.animate-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.animate-underline::after {
  content: '';
  position: absolute;
  bottom: -0.12rem;
  left: 0;
  width: 0;
  height: 0.24rem;
  background: #84C1A3;
  background: -webkit-linear-gradient(90deg,rgba(132, 193, 163, 1) 0%, rgba(51, 153, 153, 1) 33%, rgba(30, 61, 91, 1) 100%);
  background: -moz-linear-gradient(90deg,rgba(132, 193, 163, 1) 0%, rgba(51, 153, 153, 1) 33%, rgba(30, 61, 91, 1) 100%);
  background: linear-gradient(90deg,rgba(132, 193, 163, 1) 0%, rgba(51, 153, 153, 1) 33%, rgba(30, 61, 91, 1) 100%);
  transition: width 0.5s;
}

.animate-underline:hover::after,
.animate-underline:active::after,
.animate-underline.animating::after {
  width: 100%;
}

.animate--fade-in {
  opacity: 0;
  /*transition: opacity 500ms;*/

  &.animating {
    opacity: 1;
    /*transition: opacity 500ms;*/
    /*transition-property: opacity;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--fade-out {
  opacity: 1;

  &.animating {
    opacity: 0;
    /*transition: opacity 500ms;*/
    /*transition-property: opacity;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--slide-in-up {
  transform: translateY(100%);

  &.animating {
    transform: translateY(0);
    /*transition: transform 500ms;*/
    /*transition-property: transform;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--slide-in-down {
  transform: translateY(-100%);

  &.animating {
    transform: translateY(0);
    /*transition: transform 500ms;*/
    /*transition-property: transform;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--slide-in-left {
  transform: translateX(100%);

  &.animating {
    transform: translateX(0);
    /*transition: transform 500ms;*/
    /*transition-property: transform;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--slide-in-right {
  transform: translateX(-100%);

  &.animating {
    transform: translateX(0);
    /*transition: transform 500ms;*/
    /*transition-property: transform;*/
    /*transition-duration: 500ms;*/
  }
}

.animate--slide-out-up {
  transform: translateY(0);

  &.animating {
    transform: translateY(-100%);
  }
}

.animate--slide-out-down {
  transform: translateY(0);

  &.animating {
    transform: translateY(100%);
  }
}

.animate--slide-out-left {
  transform: translateX(0);

  &.animating {
    transform: translateX(-100%);
  }
}

.animate--slide-out-right {
  transform: translateX(0);

  &.animating {
    transform: translateX(100%);
  }
}