/*
* step and form animations
*/
@keyframes checkmark {
  0% {
    opacity: 0;
    transform: scale(.8);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes validated {
  0% {
    opacity: 0;
    transform: scale(.8) translateY(-50%);
  }
  50% {
    transform: scale(1.3) translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(-50%);
  }
}

@keyframes slidedownandheight {
  0% {
    max-height: 0;
    opacity: 0;
    z-index: -1;
  }
  99% {
    z-index: -1;
  }
  100% {
    max-height: 300px;
    opacity: 1;
    z-index: 0;
  }
}

@keyframes slideupandheight {
  0% {
    max-height: 300px;
    z-index: 0;
  }
  15% {
    max-height: 0;
  }
  99% {
    z-index: -1;
  }
  100% {
    max-height: 0;
    opacity: 0;
    z-index: -1;
  }
}
