.animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
  
  .animated.hinge {
    -webkit-animation-duration: 1s;
    animation-duration: 1s; }
  
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0; }
    to {
      opacity: 1; } }
  
  @keyframes fadeIn {
    from {
      opacity: 0; }
    to {
      opacity: 1; } }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn; }

    @keyframes slideIn {
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
      100% {
        transform:translateY(0rem);
        opacity: 1;
      }
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
    }
    
    @-webkit-keyframes slideIn {
      0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
      }
      0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
      }
    }
    
    .slideIn {
      -webkit-animation-name: slideIn;
      animation-name: slideIn;
    }