/* dropwdown */
.dropdown {
  display: none;
}
.link .dropdown::after {
  animation: pullback 0.5s forwards 0.225s;
}
.link:hover .dropdown {
  display: block;
  position: absolute;
  animation: pullout 0.5s backwards 0.225s;
}

/* custom animation pullout */
@keyframes pullout { 
  0% { opacity: 0; transform: translateY(-40px); }
  95% { opacity: 0.5; transform: translateY(-0.1px); }
  98% { opacity: 0.7; transform: translateY(0px); }
  100% { opacity: 1; }
}
@keyframes pullback {
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* @keyframes pullback {
  from { opacity: 1; transform: translateY(0px); }
  to { opacity: 0; transform: translateY(-20px); }
} */



/* arrow */
#arrow {
  width: 30px;
  height: 30px;
  transition: transform 0.45s;  /*give transform time to animate*/
}

.link:hover #arrow{
  transform: rotate(90deg);  /*turn arrow with right rotate 90 degrees*/
}