/**
 * Navigation bar.
 */
#navigation {
  overflow: hidden;
  padding: 1em 0;

  /* Main menu and secondary menu links and menu block links. */
  .links,
  .menu {
    margin: 0;
    padding: 0;
    text-align: left;
    li {
      list-style-type: none;
      list-style-image: none;
      text-transform: uppercase;
      @include breakpoint($desktop){
        float: left;
        font-weight: 600;
        padding: 0 20px 0 0;
        &:last-child {
          padding: 0;
        }
      }
      @include breakpoint($lg-desktop){
        padding: 0 30px 0 0;
        &:last-child {
          padding: 0;
        }
      }
      a {
        &:hover {
          color: $medgray;
        }
      }
    }
  }

  .menu {
    @include breakpoint($desktop){
      float: right;
    }
  }
  @include breakpoint($all-devices){
    background-color: #f7f7f7;
    height: 100%;
    overflow-y: auto;
    padding: 0 0 50px;
    position: fixed;
    right: -255px;
    top: 76px;
    width: 255px;
    z-index: 99999;
    -webkit-transition-property: right;
    -moz-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
    .menu-active & {
      right: 0;
      @include transition(all 500ms ease);
    }
    .menu {
      > li {
        border-bottom: 1px solid $ltgray;
        cursor: pointer;
        display: block;
        float: none;
        list-style: none;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 20px;
      }
    }
  }
}