.a11y-sliding-menu__panel {
  position: fixed;
  top: auto;
  overflow: scroll;
  width: 400px;
  height: 100vh;
  background-color: #ffffff;
  padding: 1.25rem;
  transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);
  transform: translate3d(100vw, 0, 0);
  z-index: 1000;
}
.a11y-sliding-menu__panel > section, .a11y-sliding-menu__panel > div {
  display: none;
}
.a11y-sliding-menu--visible .a11y-sliding-menu__panel > section, .a11y-sliding-menu--visible .a11y-sliding-menu__panel > div {
  display: block;
}

.a11y-sliding-menu__shader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.a11y-sliding-menu--visible .a11y-sliding-menu__shader {
  opacity: 0.75;
  z-index: 999;
}

.a11y-sliding-menu__page {
  transition: all 0.2s ease-in;
}
.a11y-sliding-menu--visible .a11y-sliding-menu__page {
  z-index: 9;
}

.a11y-sliding-menu--hidden.a11y-sliding-menu-direction--right .a11y-sliding-menu__panel {
  transform: translate3d(100vw, 0, 0);
}
.a11y-sliding-menu--hidden.a11y-sliding-menu-direction--left .a11y-sliding-menu__panel {
  transform: translateX(calc(100vw - 400px));
}

.a11y-sliding-menu--visible.a11y-sliding-menu-direction--right .a11y-sliding-menu__panel {
  transform: translate3d(calc(100vw - 400px), 0, 0);
}
.a11y-sliding-menu--visible.a11y-sliding-menu-direction--right .a11y-sliding-menu__page {
  margin-left: calc(0vw - 400px);
}
.a11y-sliding-menu--visible.a11y-sliding-menu-direction--left .a11y-sliding-menu__panel {
  position: absolute;
  transform: translate3d(0vw, 0, 0);
}
.a11y-sliding-menu--visible.a11y-sliding-menu-direction--left .a11y-sliding-menu__page {
  margin-left: calc(100vw - 400px);
}