.menu {
  top: -100%;
  transition: all 0.4s ease-in-out;
  background-color: #167edfcc !important;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
}
.menu.open {
  top: 0px;
}

.menu.open .links {
    opacity: 0;
    animation: slide-in 0.6s 0.8s ease-out forwards;
}

.menu.open .img {
  opacity: 0;
  animation: slide-in 0.6s 0.4s ease-out forwards;
}

@keyframes slide-in {
  0% {
    opacity: 0;
    margin-top: -28px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
  }
}

nav.open {
    background-color: transparent!important;
    /* backdrop-filter: blur(60px); */
}

nav.open .menu-icon,
nav .close-icon {
  display: none;
}
nav .menu-icon,
nav.open .close-icon {
  display: block;
}