/* Animations */
.fade-in {
    opacity: 0;
    transition: opacity 750ms ease-in;
  }
  
  .fade-in.appear {
    opacity: 1;
  }
  
  .from-bottom {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  
  .from-left {
    grid-column: 2 / 3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  
  .from-right {
    grid-column: 3 / 4;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  
  .lg-hidden {
    display: block;
  }
  
  .from-left,
  .from-right,
  .from-bottom {
    transition: opacity 2000ms ease-in, -webkit-transform 1200ms ease-in;
    transition: opacity 2000ms ease-in, transform 1200ms ease-in;
    transition: opacity 2000ms ease-in, transform 1200ms ease-in,
      -webkit-transform 800ms ease-in;
    opacity: 0;
  }
  
  .from-left.appear,
  .from-right.appear,
  .from-bottom.appear {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }