/*
* FONTS
*/
/*
* MEDIA QUERIES
*/
/*
* SPACING
*/
/*
* LAYOUT GRID
*/
.superhero {
  position: relative;
  height: 100%; }
  .superhero p {
    margin: 0 0 7px; }
  .superhero hr.superhero-textbox-divider {
    margin: 7px 0; }
  .superhero .superhero-image-container {
    position: relative; }
    @media only screen and (max-width: 767px) {
      .superhero .superhero-image-container .superhero-image {
        display: none; } }
    .superhero .superhero-image-container .superhero-image-mobile {
      display: none; }
      @media only screen and (max-width: 767px) {
        .superhero .superhero-image-container .superhero-image-mobile {
          display: inherit; } }
  @media only screen and (max-width: 767px) {
    .superhero.superhero-image-default .superhero-content-grid-container {
      position: relative;
      display: block;
      background: rgba(43, 168, 224, 0.85); } }
  @media only screen and (max-width: 767px) {
    .superhero.superhero-image-default .superhero-content-grid-container .superhero-text-container {
      color: #fff; } }
  .superhero .superhero-content-grid-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 2; }
    .superhero .superhero-content-grid-container .superhero-color-block-container {
      padding: 20px;
      /* TODO: SF-7778: Add ...-or-larger media query to the UI Library */ }
      .superhero .superhero-content-grid-container .superhero-color-block-container.top {
        margin: 20px; }
      .superhero .superhero-content-grid-container .superhero-color-block-container.center {
        margin: 20px; }
      .superhero .superhero-content-grid-container .superhero-color-block-container.bottom {
        margin: 20px; }
      @media screen and (min-width: 768px) {
        .superhero .superhero-content-grid-container .superhero-color-block-container.white {
          background: rgba(255, 255, 255, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.bright-blue {
          background: rgba(43, 168, 224, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.candy-apple {
          background: rgba(224, 8, 8, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.charcoal {
          background: rgba(0, 17, 26, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.deep-blue {
          background: rgba(0, 97, 150, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.fire-orange {
          background: rgba(255, 79, 0, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.green {
          background: rgba(5, 163, 74, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.grape {
          background: rgba(110, 10, 150, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.orange {
          background: rgba(255, 130, 0, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.ruby {
          background: rgba(235, 10, 135, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.scarlet {
          background: rgba(161, 5, 36, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.ultraviolet {
          background: rgba(173, 0, 176, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.bubblegum {
          background: rgba(250, 153, 204, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.buttercup {
          background: rgba(255, 194, 0, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.carbon {
          background: rgba(145, 150, 153, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.discount-color {
          background: rgba(235, 10, 135, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.error-color {
          background: rgba(224, 8, 8, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.grass {
          background: rgba(102, 219, 43, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.graphite {
          background: rgba(73, 75, 77, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.margarita {
          background: rgba(191, 242, 28, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.mist {
          background: rgba(248, 248, 248, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.platinum {
          background: rgba(230, 230, 230, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.silver {
          background: rgba(200, 203, 204, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container.sky-blue {
          background: rgba(110, 207, 245, 0.85); }
        .superhero .superhero-content-grid-container .superhero-color-block-container .text-left {
          text-align: left; }
        .superhero .superhero-content-grid-container .superhero-color-block-container .text-right {
          text-align: right; }
        .superhero .superhero-content-grid-container .superhero-color-block-container .text-center {
          text-align: center; } }
      @media only screen and (max-width: 767px) {
        .superhero .superhero-content-grid-container .superhero-color-block-container {
          text-align: center; } }
    .superhero .superhero-content-grid-container .superhero-display-outer {
      display: table;
      width: 100%;
      height: 100%; }
    .superhero .superhero-content-grid-container .superhero-display-inner {
      display: table-cell; }
      .superhero .superhero-content-grid-container .superhero-display-inner.top {
        vertical-align: top; }
      .superhero .superhero-content-grid-container .superhero-display-inner.center {
        vertical-align: middle; }
      .superhero .superhero-content-grid-container .superhero-display-inner.bottom {
        vertical-align: bottom; }
    .superhero .superhero-content-grid-container .superhero-text-container {
      margin-bottom: 2px;
      /* TODO: SF-7778: Add ...-or-larger media query to the UI Library */ }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-lead-in {
        margin-bottom: 5px; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-primary-copy {
        margin-bottom: 15px; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-promo-code-container {
        margin-top: 15px;
        margin-bottom: 10px; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-promo-code-label,
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-promo-code {
        margin-bottom: 5px;
        display: inline-block; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-promo-code {
        margin-right: 5px; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-secondarytextbutton {
        margin-left: 15px; }
      .superhero .superhero-content-grid-container .superhero-text-container .full-width-container {
        margin: 25px; }
      .superhero .superhero-content-grid-container .superhero-text-container .fraction-zone {
        margin-bottom: 17.5px; }
      .superhero .superhero-content-grid-container .superhero-text-container .superhero-call-to-action-link {
        font-weight: normal; }
      @media screen and (min-width: 768px) {
        .superhero .superhero-content-grid-container .superhero-text-container .white {
          color: #fff; }
        .superhero .superhero-content-grid-container .superhero-text-container .bright-blue {
          color: #2ba8e0; }
        .superhero .superhero-content-grid-container .superhero-text-container .candy-apple {
          color: #e00808; }
        .superhero .superhero-content-grid-container .superhero-text-container .charcoal {
          color: #00111a; }
        .superhero .superhero-content-grid-container .superhero-text-container .deep-blue {
          color: #006196; }
        .superhero .superhero-content-grid-container .superhero-text-container .fire-orange {
          color: #ff4f00; }
        .superhero .superhero-content-grid-container .superhero-text-container .green {
          color: #05a34a; }
        .superhero .superhero-content-grid-container .superhero-text-container .grape {
          color: #6e0a96; }
        .superhero .superhero-content-grid-container .superhero-text-container .orange {
          color: #ff8200; }
        .superhero .superhero-content-grid-container .superhero-text-container .ruby {
          color: #eb0a87; }
        .superhero .superhero-content-grid-container .superhero-text-container .scarlet {
          color: #a10524; }
        .superhero .superhero-content-grid-container .superhero-text-container .ultraviolet {
          color: #ad00b0; }
        .superhero .superhero-content-grid-container .superhero-text-container .bubblegum {
          color: #fa99cc; }
        .superhero .superhero-content-grid-container .superhero-text-container .buttercup {
          color: #ffc200; }
        .superhero .superhero-content-grid-container .superhero-text-container .carbon {
          color: #919699; }
        .superhero .superhero-content-grid-container .superhero-text-container .discount-color {
          color: #eb0a87; }
        .superhero .superhero-content-grid-container .superhero-text-container .error-color {
          color: #e00808; }
        .superhero .superhero-content-grid-container .superhero-text-container .graphite {
          color: #494b4d; }
        .superhero .superhero-content-grid-container .superhero-text-container .grass {
          color: #66db2b; }
        .superhero .superhero-content-grid-container .superhero-text-container .margarita {
          color: #bff21c; }
        .superhero .superhero-content-grid-container .superhero-text-container .mist {
          color: #f8f8f8; }
        .superhero .superhero-content-grid-container .superhero-text-container .platinum {
          color: #e6e6e6; }
        .superhero .superhero-content-grid-container .superhero-text-container .silver {
          color: #c8cbcc; }
        .superhero .superhero-content-grid-container .superhero-text-container .sky-blue {
          color: #6ecff5; } }