#mobilemenu-container {
  left: 0;
  top: 100%;
  width: 100%;
  height: calc(100vh - 100%);
  position: absolute;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  overflow-y: auto;
  visibility: hidden; 
}

#mobilemenu-container.show {
  transform: translateX(0);
  visibility: visible;
}

.hamburger-icon, .close-icon {
  cursor: pointer;
}

.mm-spn.mm-spn--light {
  color: #000000;
  background: #ffffff;
}

/* ==================================================================== */
/* Work in progress to smooth animations for sub menu appearing*/
/* ==================================================================== */
.mm-spn ul {
  /* Overrides current left use property in animation */
  left: unset;
  /* Instead of setting left to 100%, use transform to translate it out of view. */
  transform: translateX(100%);
  /* Transition the transform property instead of the left property. */
  -webkit-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}

.mm-spn ul.mm-spn--open {
  /* Translate to 0 on open to bring it into view. */
  transform: translateX(0);
  /* Overrides current left use property in animation */
  left: unset;
}

.mm-spn.mm-spn--navbar ul.sub-menu {
  top: 0px;
}

.mm-spn.mm-spn--navbar ul:before {
  border-top: 0px solid currentColor;
}

.mm-spn ul {
  padding-right: 0px;
  width: 100%;
  max-width: 100%;
}