#header {
  margin: 0 auto 2rem;
  width: 100%;

  h1,
  .h1 {
    margin-top: 0;
    margin-bottom: 0;
    color: $color-text;
    letter-spacing: .01em;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 2rem;

    @include antialias();
  }
  a {
    background: none;
    color: inherit;
    text-decoration: none;
  }
  #logo {
    display: inline-block;
    float: left;
    margin-right: 20px;
    width: $logo-width;
    height: $logo-height;
    border-radius: 5px;
    background-size: $logo-width $logo-height;
    background-repeat: no-repeat;
    @if $logo-grayout {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
  }
  #nav {
    color: $color-accent-1;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    font-size: .8rem;

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      line-height: 15px;

      a {
        margin-right: 15px;
        color: $color-accent-1;
      }
      a:hover {
        @include underline(5px, $color-accent-1);
      }
      li {
        display: inline-block;
        margin-right: 15px;
        border-right: 1px dotted;
        border-color: $color-accent-1;
        vertical-align: middle;
      }
      .icon {
        display: none;
      }
      li:last-child {
        margin-right: 0;
        border-right: 0;

        a {
          margin-right: 0;
        }
      }
    }
  }
}
@if $logo-grayout {
  #header:hover {
    #logo {
      filter: none;
      -webkit-filter: none;
    }
  }
}
@media screen and (max-width: 480px) {
  #header #title {
    display: table;
    margin-right: 5rem;
    min-height: $logo-height;
    h1 {
      display: table-cell;
      vertical-align: middle;
    }
  }
  #header #nav {
    ul {
      a:hover {
        background: none;
      }
      li {
        display: none;
        border-right: 0;
      }
      li.icon {
        position: absolute;
        top: 77px;
        right: 1rem;
        display: inline-block;
      }
    }
    ul.responsive {
      li {
        display: block;
      }
    }
    li:not(:first-child) {
      padding-top: 1rem;
      padding-left: $logo-width + 20px;
      font-size: 1rem;
    }
  }
};