header {

margin-top: 100px;
margin-bottom: 20px;

.title {
  display: block;
  font-weight: 300;
  font-size: 6.0rem;
  letter-spacing: -.1rem;
  line-height: 1.2;
  margin-bottom: 0;

  .subtitle {
    font-size: 50%;
  }
}

.description {
  display: block;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.8px;
  line-height: 29.7px;
  margin-bottom: 10px;
}

.social-links {
  display: block;
  text-align: center;

  li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
  }

  @media (min-width: 40.0rem) {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    float: right;
  }
}

.header-nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      display: inline;
      text-transform: lowercase;
      font-size: 2.2rem;
      margin-right: 20px;
    }
  }
}

&.small {
  position: static;

  @media (min-width: 40.0rem) {
    position: relative;
  }

  .title {
    display: inline-block;
    font-weight: 300;
    font-size: 3.4rem;
    letter-spacing: -.1rem;
    line-height: 1.2;
    margin-bottom: 0;

    .subtitle {
      font-size: 50%;
    }
  }

  .header-nav {
    font-size: 2.0rem;

    @media (min-width: 40.0rem) {
      position: absolute;
      display: inline-block;
      bottom: 0;
      right: 0;
      text-align: right;
    }
  }
}

}