.header-body {
  padding: 17px 50px 17px 60px;
  position: relative;
  width: 914px;

  @include mq('1040px') {
    box-sizing: border-box;
    padding: 17px 30px;
    max-width: 914px;
    width: 100%;
  }
}

.header-logo {
  height: 66px;
  width: 156px;

  display: inline-block;
  vertical-align: top;
  margin: 0;

  background: image_url('crowdint-logo-inverse.svg') no-repeat;
  background-size: contain;

  @include mq(770px) {
    width: 120px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -60px;
    margin-top: -25px;
  }
}

.header-nav {
  display: inline-block;
  position: absolute;
  right: 3.125em;
  top: 50%;
  margin-top: -0.625em;

  @include mq('1040px') {
    right: 0;
  }

  @include mq(770px) { display: none; }
}

.header-nav-link {
  color: $white;
}

.header-button {
  padding: 0.6em 1.95em;
}

.header-mobile-menu {
  display: none;
  width: 30px;
  height: 28px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -14px;

  background: $very-dark-grey image_url('menu-icon-mobile.svg') no-repeat;
	background-size: contain;

  @include mq(770px) {
    display: block;
    top: 100%;
  }
}

.header-mobile-contact { background-color: $contact-color; }
.header-mobile-team { background-color: $team-color; }
.header-mobile-about { background-color: $about-color; }
.header-mobile-we-do { background-color: $we-do-color; }
.header-mobile-careers { background-color: $very-dark-grey; }

.header-home, .header-portfolio, .header-blog { border-bottom: solid 1px $black; }
.header-team { border-bottom: solid 1px $team-color; }
.header-about { border-bottom: solid 1px $about-color; }
.header-we-do { border-bottom: solid 1px $we-do-color; }
.header-contact { border-bottom: solid 1px $contact-color; }
.header-careers { border-bottom: solid 1px $careers-color; }

.header-blog {
  background-color: $very-dark-grey;
}
