#hero {
}

#hero .primary-content {
  padding-bottom: 20px;
}

#hero .primary-content:after  {
  content: '';
  display: block;
  clear: both;
}

#hero h1 {
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.1em;
}

#hero .tagline {
  font-size: 24px;
  margin-bottom: 0.8em;
  line-height: 1.2;
}


/* ---- hero buttons ---- */

.big-ol-buttons:after {
  content: '';
  display: block;
  clear: both;
}

.big-ol-buttons .button {
  position: relative;
  padding-left: 50px;
  min-height: 52px;
  font-size: 18px;
  background: black;
  background: hsla(0, 0%, 0%, 0.4);
  color: #FB4;
  text-shadow: none;
}

.big-ol-buttons .button:hover {
  background: #4FB;
  color: #222;
  text-shadow: none;
}

.big-ol-buttons .icon {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 32px;
}


/* ---- desktop ---- */

@media screen and ( min-width: 960px ) {

  #hero h1 {
    font-size: 120px;
  }

  #hero .tagline {
    font-size: 32px;
  }

  /* buttons */

  .big-ol-buttons .button {
    font-size: 22px;
    padding-left: 86px;
    min-height: 94px;
  }

  .big-ol-buttons .icon {
    font-size: 56px;
    left: 18px;
    top: 16px;
  }

}