/* Class to add for showing */
.fade-in {
    display: block; /* Overrides display: none instantly at 0% of animation */
    animation: fadeIn2 1s ease-in forwards;
  }
  
  /* Class to add for hiding */
  .fade-out {
    animation: fadeOut2 1s ease-out forwards;
  }
  
  @keyframes fadeIn2 {
    0% {
      opacity: 0;
      display: block; /* Sets display to block at the very start */
    }
    100% {
      opacity: 1;
      display: block;
    }
  }
  
  @keyframes fadeOut2 {
    0% {
      opacity: 1;
      display: block;
    }
    100% {
      opacity: 0;
      display: none; /* Sets display to none at the very end */
    }

}