@keyframes dropdown {
  0%{
      display: block;
      opacity: 1;
      top: 100%;
      visibility: visible;
      
  }
  100%{
      display: none;
      opacity: 0;
      visibility: hidden;
      top: 90%;
  }
}
@keyframes dropdown_hover {
  0%{
      display: none;
      opacity: 0;
      visibility: hidden;
      top: 90%;
  }
  100%{
      display: block;
      opacity: 1;
      top: 100%;
      visibility: visible;
  }
}




/* bottom to top */
.reveal, .revealbottom {
    transform: translateY(100%);
    transition: var(--transitionSlow);
    opacity: 0;
}

    .reveal.active, .revealbottom.active {
        transform: translateY(0);
        opacity: 1;
    }
    /* top to botom */
.revealTop {
    transform: translateY(-100%);
    transition: var(--transitionSlow);
    opacity: 0;
}

    .revealTop.active {
        transform: translateY(0);
        opacity: 1;
    }
/* left to right */
.revealLeft {
    transform: translateX(-600px);
    transition: var(--transitionSlow);
    opacity: 0;
}

    .revealLeft.active {
        transform: translateX(0);
        opacity: 1;
    }
/* right to left */
.revealRight {
    transform: translateX(600px);
    transition: var(--transitionSlow);
    opacity: 0;
}

    .revealRight.active {
        transform: translateX(0);
        opacity: 1;
    }
/* scale 0 to scale 1 */
.revealZomeOut {
    transform: scale(0.1);
    transition: var(--transitionSlow);
    opacity: 0;
}

    .revealZomeOut.active {
        transform: scale(1);
        opacity: 1;
    }