.top-nav {
  display: none;
  font-family: $brand-font;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: $layer-6;
  background: rgba($white, .9);
  height: 60px;
  padding: 0px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, .2);

  .button-dropdown {
    float: right;
    display: none;
  }


  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {

    .top-nav-links {
      display: none;
    }

    .button-dropdown {
      display: block;
      line-height: 60px;

      .button {
        line-height: 60px;
        height: 60px;
      }

      .button-dropdown-list  {

        li a {
          line-height: 28px; 
        }
      }
    }
  }

  > h1 {
    font-weight: 300;
    line-height: 60px;
    height:  60px;
    font-size: 23px;
    margin: 0px 0px 0px 20px;
    padding: 0px;
    text-transform: uppercase;
    float: left;

    a {
      color: $gray;
      text-decoration: none;
    }
  }


  .top-nav-links {
    float: right;
    margin: 0px 20px 0px 0px;
    padding: 0px;

    li {
      float: right;
      margin: 0px;
    }

    a {
      transition-property: all;
      transition-duration: .3s;
      font-weight: 300;
      display: inline-block;
      line-height: 60px;
      padding: 0px 10px;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14px;

      &:hover {
        background: rgba($white, 1);
      }
    }
  }
}