/*
* FONTS
*/
/*
* MEDIA QUERIES
*/
/*
* SPACING
*/
/*
* LAYOUT GRID
*/
/*
* FONTS
*/
/*
* MEDIA QUERIES
*/
/*
* SPACING
*/
/*
* LAYOUT GRID
*/
.superhero-cta-container-xs {
  background: rgba(43, 168, 224, 0.85);
  text-align: center;
  padding-bottom: 30px; }
  .superhero-cta-container-xs .superhero-cta-button {
    padding: 10px; }
    .superhero-cta-container-xs .superhero-cta-button a.cta-link {
      color: #fff;
      text-decoration: underline; }

.superhero div.superhero-xp-placeholder-outer {
  position: relative; }
  .superhero div.superhero-xp-placeholder-outer div.superhero-xp-placeholder-inner {
    position: absolute;
    bottom: 0;
    z-index: 3;
    width: 100%; }

.superhero .superhero-cta-button.cta-skin-white {
  background: rgba(255, 255, 255, 0.85); }
  .superhero .superhero-cta-button.cta-skin-white.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-white.superhero-cta-button-hover:active {
    background: rgba(255, 255, 255, 0.85); }

.superhero .superhero-cta-button.cta-skin-bright-blue {
  background: rgba(43, 168, 224, 0.85); }
  .superhero .superhero-cta-button.cta-skin-bright-blue.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-bright-blue.superhero-cta-button-hover:active {
    background: rgba(87, 186, 230, 0.85); }

.superhero .superhero-cta-button.cta-skin-candy-apple {
  background: rgba(224, 8, 8, 0.85); }
  .superhero .superhero-cta-button.cta-skin-candy-apple.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-candy-apple.superhero-cta-button-hover:active {
    background: rgba(248, 52, 52, 0.85); }

.superhero .superhero-cta-button.cta-skin-deep-blue {
  background: rgba(0, 97, 150, 0.85); }
  .superhero .superhero-cta-button.cta-skin-deep-blue.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-deep-blue.superhero-cta-button-hover:active {
    background: rgba(0, 119, 184, 0.85); }

.superhero .superhero-cta-button.cta-skin-fire-orange {
  background: rgba(255, 79, 0, 0.85); }
  .superhero .superhero-cta-button.cta-skin-fire-orange.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-fire-orange.superhero-cta-button-hover:active {
    background: rgba(255, 114, 51, 0.85); }

.superhero .superhero-cta-button.cta-skin-grape {
  background: rgba(110, 10, 150, 0.85); }
  .superhero .superhero-cta-button.cta-skin-grape.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-grape.superhero-cta-button-hover:active {
    background: rgba(143, 14, 197, 0.85); }

.superhero .superhero-cta-button.cta-skin-charcoal {
  background: rgba(73, 75, 77, 0.85); }
  .superhero .superhero-cta-button.cta-skin-charcoal.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-charcoal.superhero-cta-button-hover:active {
    background: rgba(145, 150, 153, 0.85); }

.superhero .superhero-cta-button.cta-skin-green {
  background: rgba(5, 163, 74, 0.85); }
  .superhero .superhero-cta-button.cta-skin-green.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-green.superhero-cta-button-hover:active {
    background: rgba(7, 200, 91, 0.85); }

.superhero .superhero-cta-button.cta-skin-orange {
  background: rgba(255, 130, 0, 0.85); }
  .superhero .superhero-cta-button.cta-skin-orange.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-orange.superhero-cta-button-hover:active {
    background: rgba(255, 155, 51, 0.85); }

.superhero .superhero-cta-button.cta-skin-ruby {
  background: rgba(235, 10, 135, 0.85); }
  .superhero .superhero-cta-button.cta-skin-ruby.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-ruby.superhero-cta-button-hover:active {
    background: rgba(247, 66, 167, 0.85); }

.superhero .superhero-cta-button.cta-skin-scarlet {
  background: rgba(161, 5, 36, 0.85); }
  .superhero .superhero-cta-button.cta-skin-scarlet.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-scarlet.superhero-cta-button-hover:active {
    background: rgba(210, 7, 47, 0.85); }

.superhero .superhero-cta-button.cta-skin-ultraviolet {
  background: rgba(173, 0, 176, 0.85); }
  .superhero .superhero-cta-button.cta-skin-ultraviolet.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-ultraviolet.superhero-cta-button-hover:active {
    background: rgba(206, 0, 210, 0.85); }

.superhero .superhero-cta-button.cta-skin-platinum {
  background: rgba(230, 230, 230, 0.85); }
  .superhero .superhero-cta-button.cta-skin-platinum.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-platinum.superhero-cta-button-hover:active {
    background: rgba(230, 230, 230, 0.85); }

.superhero .superhero-cta-button.cta-skin-carbon {
  background: rgba(145, 150, 153, 0.85); }
  .superhero .superhero-cta-button.cta-skin-carbon.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-carbon.superhero-cta-button-hover:active {
    background: rgba(145, 150, 153, 0.85); }

.superhero .superhero-cta-button.cta-skin-graphite {
  background: rgba(73, 75, 77, 0.85); }
  .superhero .superhero-cta-button.cta-skin-graphite.superhero-cta-button-hover:hover, .superhero .superhero-cta-button.cta-skin-graphite.superhero-cta-button-hover:active {
    background: rgba(73, 75, 77, 0.85); }

.superhero .superhero-cta-button .cta-anchor .cta-link.cta-text-white {
  color: #fff; }

.superhero .superhero-cta-button .cta-anchor .cta-link.cta-text-charcoal {
  color: #00111a; }

.superhero .superhero-cta-button .cta-anchor .cta-link.cta-text-accent-blue {
  color: #0099e0; }