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

.hero-promo {
  position: relative;
  font-size: 16px;
  background-color: #2c2c2c;
}

/* structural spacing */

.hero-promo .container {
  background-color: inherit;
  padding: 1.75em 30px 3.125em;
}

@media (min-width: 32em) and (max-width: 62em) {

  .hero-content-copy .description {
    width: 95%;
  }

}

@media (max-width: 62em) {

  .hero-promo:before {
    display: block;
    content: "";
    height: 100%;
    background-color: #ac2142;
    border-top: 2.5em solid #d73158;
    border-bottom: 1.25em solid #7b182f;
    padding-top: 1.875em;
    animation: 30s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite running;
    animation-name: color-blocks;
  }

  .hero-promo .container {
    max-width: 32em;
  }

  @keyframes color-blocks {

    0% {
      background-color: #ac2142;
      border-top-color: #d73158;
      border-bottom-color: #7b182f;
    }

    20% {
      background-color: #ac2142;
      border-top-color: #d73158;
      border-bottom-color: #7b182f;
    }

    35% {
      background-color: #46807c;
      border-top-color: #5ca5a0;
      border-bottom-color: #2b4d4b;
    }

    60% {
      background-color: #46807c;
      border-top-color: #5ca5a0;
      border-bottom-color: #2b4d4b;
    }

    75% {
      background-color: #237b47;
      border-top-color: #2c9959;
      border-bottom-color: #164d2d;
    }

    90% {
      background-color: #237b47;
      border-top-color: #2c9959;
      border-bottom-color: #164d2d;
    }

    100% {
      background-color: #ac2142;
      border-top-color: #d73158;
      border-bottom-color: #7b182f;
    }

  }

}

@media (min-width: 62em) {

  .hero-promo .container {
    background-color: #2c2c2c;
    padding-top: 2.75em;
    padding-bottom: 4.125em;
  }

  .hero-promo:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #d73158;
    animation: 30s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite running;
    animation-name: color-background;
  }

  .hero-promo .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 1.5em;
    max-width: 54.5em;
    min-height: 27em;
  }

  .hero-promo .container:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-left: 6em solid #ac2142;
    border-right: 4em solid #7b182f;
    animation: 30s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite running;
    animation-name: color-blocks;
  }

  .hero-content-copy {
    margin-left: 12em;
  }

  @keyframes color-background {

    0% {
      background-color: #d73158;
    }

    20% {
      background-color: #d73158;
    }

    35% {
      background-color: #5ca5a0;
    }

    60% {
      background-color: #5ca5a0;
    }

    75% {
      background-color: #2c9959;
    }

    90% {
      background-color: #2c9959;
    }

    100% {
      background-color: #d73158;
    }

  }

  @keyframes color-blocks {

    0% {
      border-left-color: #ac2142;
      border-right-color: #7b182f;
    }

    20% {
      border-left-color: #ac2142;
      border-right-color: #7b182f;
    }

    35% {
      border-left-color: #46807c;
      border-right-color: #2b4d4b;
    }

    60% {
      border-left-color: #46807c;
      border-right-color: #2b4d4b;
    }

    75% {
      border-left-color: #237b47;
      border-right-color: #164d2d;
    }

    90% {
      border-left-color: #237b47;
      border-right-color: #164d2d;
    }

    100% {
      border-left-color: #ac2142;
      border-right-color: #7b182f;
    }

  }

}

/* content / copy */

.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;
}

.hero-content-copy .subhead {
  font-weight: bold;
  font-size: 1.15em;
  color: #f8971d;
  letter-spacing: 0.125rem;
  word-spacing: 0;
  margin-bottom: 2rem;
}

.hero-content-copy .subhead strong {
  font-weight: inherit;
}

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

/* cta */

.hero-promo .cta {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

/* secondary button */

.hero-promo a.gym-button-secondary {
  font-size: 105%;
  color: #fff !important;
  width: auto !important;
  background-color: transparent !important;
  padding: 1.2em 1.4em !important;
  border: 2px solid #f8971d !important;
}

.hero-promo a.gym-button-secondary b {
  color: inherit;
  vertical-align: text-top;
}

.hero-promo a.gym-button-secondary:hover,
.hero-promo a.gym-button-secondary:focus,
.hero-promo a.gym-button-secondary:active {
  border-color: #a6a6a6 !important;
}

/* misc details */

.all-caps {
  text-transform: uppercase;
}

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