.responsive-menu {
  display: block;
  background: #fff;
  position: absolute;
  top: 200px;
  right: 0px;
  left: 0px;
  border: 1px solid #ddd;
  z-index: 1000;
  opacity: 0;
  transform: scale(0);
}

.responsive-menu.anim_menu {
  transform-origin: top left;
  animation: fadeInLeftTop 0.6s ease-in-out backwards;
}

.responsive-menu ul {
  list-style: none;
}

.responsive-menu.active {
  animation: fadeInTopLeft 0.6s ease-in-out forwards;
  overflow: hidden;
}

@keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    transform: scale(0);
    transform-origin: top left;
    /* Starts slightly off-screen to the top-left */
  }

  100% {
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    /* Ends at its original position */
  }
}

@keyframes fadeInLeftTop {
  0% {
    opacity: 1;
    transform: scale(1);
    transform-origin: left top;
    /* Starts slightly off-screen to the top-left */
  }

  100% {
    opacity: 0;
    display: none;
    transform: scale(0);
    transform-origin: left top;
    /* Ends at its original position */
  }
}

.bottom-header {
  margin-top: 0%;
  /* animation: expandImageback 0.6s ease-in-out; */
}

.bottom-header.active_menu {
  margin-top: 40%;
  animation: expandImage 0.6s ease-in-out;
}

@keyframes expandImage {
  0% {
    margin-top: 0%;
  }

  100% {
    margin-top: 40%;
  }
}

@keyframes expandImageback {
  0% {
    margin-top: 40%;
  }

  100% {
    margin-top: 0%;
  }
}
.bottom-header {
  margin-top: 0%;
  /* animation: expandImageback 0.6s ease-in-out; */
}

.bottom-header.active_menu {
  margin-top: 45%;
  animation: expandImage 0.6s ease-in-out;
}

@media (max-width: 768px) {
  .bottom-header {
    margin-top: 0%;
    animation: expandMobileImageback 0.6s ease-in-out;
  }
  .bottom-header.active_menu {
    margin-top: 100%;
    animation: expandMobileImage 0.6s ease-in-out;
  }
}

@keyframes expandImage {
  0% {
    margin-top: 0%;
  }

  100% {
    margin-top: 45%;
  }
}

@keyframes expandImageback {
  0% {
    margin-top: 45%;
  }

  100% {
    margin-top: 0%;
  }
}

@keyframes expandMobileImage {
  0% {
    margin-top: 0%;
  }

  100% {
    margin-top: 100%;
  }
}

@keyframes expandMobileImageback {
  0% {
    margin-top: 100%;
  }

  100% {
    margin-top: 0%;
  }
}