/* Open/Close Animation */
@keyframes openanimation {
  from {
    max-height: 0;
  }
  to {
    max-height: var(--animation-height); 
  }
}
@keyframes closeanimation {
  from {
    max-height: var(--animation-height); 
  }
  to {
    max-height: 0;
  }
}
/* Set menu height */
.anim-container {
  --animation-height: 300rem; /* update this for the relevant animation */
}

/* set the default for the menu on page load - i.e. hidden */
.anim-container {
  max-height: 0;
  overflow: hidden;
  animation: none;
  display: none;
}
/* Set the default if there is no Javascript - i.e. visible */
.no-js .anim-container {
  max-height:none;
  overflow: visible;
  animation: none;
  display: block;
}
.no-js button.anim-button {
  display: none !important;/* Hide the toggle button if there is no Javascript */
}
/* set the animation for opening the menu */
.is-open.anim-container {
  animation: openanimation 0.5s; /* Call the Keyframe above and run over 0.5s */
  animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
  display: block; /* need display:block while it is open */
}
/* Set the animation for closing the menu - note the .closing only appears while the menu is closing. It is removed afterwards. Do not change the timing here as it is matched in Javascript */
.closing.anim-container {
  animation: closeanimation 0.25s; /* Call the Keyframe above and run over 0.25s - do not change */
  animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
  display: block; /* keep display:block while it is closing */
}