.topic-career-skills {
  background-color: #2c9959;
}

.topic-prototyping,
.topic-user-experience, {
  background-color: #5ca5a0;
}

.topic-accessibility,
.topic-web-design-development {
  background-color: #d73158;
}

/* !override / reset/rescale Bootstrap (3) handiwork — future-friendly */

.hero-promo {
  position: relative;
  font-size: 16px;
}

/* structural spacing */

.hero-promo .container {
  padding: 0 30px 3em;
}

.hero-content-art {
  display: none;
}

@media (min-width: 62em) {

  .hero-promo .container {
    position: relative;
    left: 17%;
    box-sizing: content-box;
    max-width: 37em;
    min-height: 25.125em;
  }

  .hero-promo .hero-content-art {
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #333 no-repeat left center;
    background-size: cover;
    border-image: 1 / 0 0 0 999em / 0 0 0 999em stretch;
    border-right: 2px solid #ccc;
  }

  .hero-promo .hero-content-art::after {
    display: block;
    position: relative;
    left: 2px;
    content: "";
    height: 100%;
    border-right: 2px solid #ccc;
  }

  .hero-content-copy {
    padding-left: 1.4em;
  }

}

/* content / copy */

.hero-content-copy {
  padding-left: .4em;
  margin-top: 6%;
  margin-bottom: 4%;
}

.hero-content-copy header h1 {
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: .1rem;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-content-copy header h2 {
  font-size: 2.5em;
  line-height: 1.15;
  letter-spacing: .1rem;
  word-spacing: -.05rem;
  color: #222;
  margin-top: 0;
  margin-bottom: 0;
}

.take5-brand-kern {
  word-spacing: -.1rem;
}

.hero-content-copy .subhead-topic {
  font-weight: bold;
  font-size: 1em;
  color: #e1e1e1;
  letter-spacing: .1rem;
  margin-bottom: 2.5rem;
}

.hero-content-copy .description {
  font-size: 1.4em;
  color: #222;
  margin-top: 1.6rem;
}

/* cta */

.hero-promo .cta {
  margin-top: 2.5rem;
}

/* !override / reset/rescale font-size adjustment */

.hero-promo a.gym-button-secondary {
  font-size: 105%;
  width: auto !important;
  vertical-align: bottom;
  padding: 1.2em 1.6em !important;
  border: 2px solid #fff !important;
}

/* misc details */

[hidden] {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.no-wrap {
  white-space: nowrap;
}