#SideNav {
  font-family: "Pathway Gothic One", sans-serif;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  position: fixed;
  text-align: center;
  top: calc(var(--nav-height) * 2);
  transition: top 0.75s ease-out;
  width: 100%;
  @media (max-width: 768px) {
    display: none;
  }
  & .content {
    margin: 0 auto;
    max-width: 850px;
    padding: 40px 25px 50px 50px;
    text-align: left;
    width: 100%;
    & h1 {
      width: 175px;
    }
    &>ul {
      list-style: none;
      margin: 0;
      letter-spacing: 0.5px;
      padding: 5px 0;
      text-transform: uppercase;
      width: 175px;
      &>li {
        & a {
          color: var(--black);
          opacity: 0.9;
          transition: color 0.4s, opacity 0.4s;
          &:hover {
            opacity: 1;
            text-decoration: none;
          }
        }
        &.active {
          &>a {
            color: var(--red);
            font-weight: 700;
            opacity: 1;
          }
        }
        & ul {
          list-style: none;
          opacity: 0;
          overflow: hidden;
          margin: 0 0 15px;
          max-height: 0;
          padding-left: 20px;
          transition: max-height 0.25s, opacity 0.25s;
          & li {
            &.active {
              & a {
                color: var(--red);
                font-weight: 700;
                opacity: 1;
              }
            }
          }
        }
        &.active ul {
          max-height: 500px;
          opacity: 1;
        }
      }
    }
  }
}
