body.paged-nav-is-open {
  overflow: hidden; }

.paged-nav {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: var(--color-light-pure-white);
  max-width: 100%;
  transition: left 200ms ease-in-out 0s;
  z-index: 10; }
  .paged-nav.off-screen {
    left: -100%; }
  .paged-nav.on-screen {
    left: 0; }
  .paged-nav__open-menu-button {
    background-color: transparent;
    border: medium none; }
    .paged-nav__open-menu-button::after {
      font-family: "fontawesome";
      color: var(--color-dark-pure-black);
      content: "\f0c9"; }
  .paged-nav__close-menu-button {
    background-color: transparent;
    border: medium none;
    background-image: url(../images/svg-icons/close-x.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 20px; }
  .paged-nav__header-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    padding: 18px;
    margin-top: 30px;
    border-bottom: 1px solid var(--color-light-brand-color); }
  .paged-nav__menu-container {
    width: 100%;
    height: 100%; }
  .paged-nav__list {
    list-style: none;
    padding: 0;
    margin: 0; }
  .paged-nav__item--thiscategory {
    text-align: center; }
  .paged-nav__panel-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--color-light-pure-white);
    padding-top: 2px;
    transition: left 200ms ease-in-out 0s; }
    .paged-nav__panel-container.off-screen {
      left: -100%; }
    .paged-nav__panel-container.on-screen {
      left: 0;
      height: 100vh;
      overflow-y: scroll;
      overflow-x: hidden;
      padding-bottom: 200px; }
      .paged-nav__panel-container.on-screen .paged-nav__link {
        display: block;
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid var(--color-light-brand-color); }
        .paged-nav__panel-container.on-screen .paged-nav__link.has-subcategories::after {
          content: url(../images/svg-icons/chevron-next.svg);
          float: right; }
        .paged-nav__panel-container.on-screen .paged-nav__link.back-to-parent {
          text-align: center; }
          .paged-nav__panel-container.on-screen .paged-nav__link.back-to-parent::before {
            content: url(../images/svg-icons/chevron-prev.svg);
            float: left; }