header {
  background-image: url("../images/drops.png");
  background-position: -300px 40px;
  background-repeat: no-repeat;
  height: 320px;
  margin: 0 auto;

  @include breakpoint($large-screen) {
    background-position: center 40px;
    background-size: contain;
  }

  @include breakpoint($large-screen) {
    height: 400px;
  }

  .top-menu {
    @include pie-clearfix;
    background-color: $blind-gray;
    height: $top-menu-height;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;

    .top-menu-wrapper {
      color: $top-menu-text-color;
      margin: 0 auto;
      padding-top: .9rem;
      width: 100%;

      @include breakpoint($large-screen) {
        width: $content-width;
      }

      a {
        color: $top-menu-text-color;

        &:hover {
          color: $whity-light-gray;
        }
      }

      .top-menu-list {
        float: left;
        margin-left: 15px;
        width: 80%;

        @include breakpoint($large-screen) {
          margin-left: 30px;
        }

        ul {
          @include horizontal-list;

          li {
            font-size: 1.2rem;
            margin: 0;

            &:after {
              content: '\2219';
              margin-left: 10px;
              margin-right: 3px;
            }

            &:last-child:after { content: ''; }
          }
        }
      }

      .feed {
        float: right;
        line-height: 2.2rem;
        text-align: left;
        width: 10%;

        @include breakpoint($large-screen) {
          margin-right: 60px;
          text-align: right;
        }

        i {
          font-size: 1.8rem;
        }
      }
    }
  }

  .logo {
    margin: 0 auto;
    padding: 260px 20px 0 160px;

    @include breakpoint($large-screen) {
      padding: 250px 20px 0;
    }

    $site-title-logo-image: false;

    @if $site-title-logo-image {
      img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
      }
    } @else {
      .logo-text {
        color: #1d1d1d;
        display: block;
        font-size: 6vw;
        margin: 0 auto;
        text-align: center;

        @include breakpoint($large-screen) {
          font-size: 2.5em;
        }
      }
    }
  }
}
