$mobile-header-height: 50px;

.header{
  background: $dark-grey;
  margin-bottom: $grid-margin;
  padding: $grid-padding;
  color: white;
  @include small{
    height: $mobile-header-height;
    padding: 10px;
    position: relative;
  }
  a, a:link, a:visited{
    color: inherit;
    &.button{
      color: white;
    }
  }
  .nav{
    list-style-type: none;
    >li{
      margin-bottom: 0;
      display: inline-block;
      &:last-child .header-submodule{
        margin-right: 0px;
      }
    }
  }
}
.header-module, .header-submodule{
  display: inline-block;
  margin-right: 20px;
}
.header-module{
  &:last-child{
    margin-right: 0px;
  }
}
.logo{
  vertical-align: middle;
  line-height: 1;
  padding: 0 60px; // leave space for nav button on mobile
  @include small{
    margin-right: 0;
    a{
      font-size: 24px;
      display: block;
      position: static;
      width: 100%;
      height: $mobile-header-height;
      line-height: $mobile-header-height;
      text-align: center;
      left: 0px;
      top: 0px;
      z-index: 10;
      margin-right: 0;
    }
  }
}
.logo-image{
  a, img{
    display: block;
    height: 100%;
    width: 100%;
  }
}

.mobile-menu-button{
  position: absolute;
  display: inline-block;
  padding: 4px;
  top: 50%;
  margin-top: -17px;
  .hamburger{
    fill: white;
  }
  z-index:100;

}
.account-link{
  display: inline-block;
}
.sign-in{
  margin-right: 20px;
}