/*
 *  ui-blizzard-navbar overrides
 *  ui-blizzard-navbar shows a desktop-sized navbar above 768px, but SC2's desktop-sized
 *  navbar is too wide to display below 960px. This increases ui-blizzard-navbar's breakpoints
 *  accordingly.
 */
/*
 * Return a neutral color
 * -----------------------------------------------------------------------------
 * @param   number      $value          Color value.
 * @return  number      $color          Returned color
 */
/*
 * Return a color (orange, cyan, blue, purple, or red)
 * -----------------------------------------------------------------------------
 * @param   number      $saturation     Color saturation.
 * @param   number      $value          Color value.
 * @return  number      $color          Returned color
 */
/*
 * Raise a number to a given power.
 * https://www.bhalash.com/archives/13544805657
 * -----------------------------------------------------------------------------
 * @param   number      $number         Number to raise.
 * @param   number      $power          Power to which it should be raised.
 * @return  number      $exponent       Number raised to exponent.
 */
/*
 * Returns a value along the modular scale
 * https://www.bhalash.com/archives/13544805657
 * -----------------------------------------------------------------------------
 * @param   number      $power          The power/scale tier to return
 * @param   number      $unit           The units to returns (e.g. 1rem, 1em)
 * @return  number      $exponent       The rem value
 */
/*
 * Returns the value, without units
 * -----------------------------------------------------------------------------
 * @param   number      $original       Number to remove units from.
 * @return  number      $unitless       Number without units.
 */
/*
 * Returns the pixel equivalent of a rem value, without scaling
 * -----------------------------------------------------------------------------
 * @param   number      $number         Number to raise.
 * @return  number      $exponent       Number raised to exponent.
 */
/* ------------------------------------ *\
    #MIXIN: CLEARFIX
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: NAVIGATION LINK STATES
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: SECTION BORDER TOP
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: SECTION BORDER BOTTOM
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: CONTAINER STANDARD SPACING
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: SECTION STANDARD SPACING
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: SECTION BACKGROUND
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: ASPECT RATIO
\* ------------------------------------ */
/* ------------------------------------ *\
    #MIXIN: FULL VIEWPORT WIDTH
\* ------------------------------------ */
/* ------------------------------------ *\
    #CONTAINER
\* ------------------------------------ */
.Container {
  padding: 0 0.85499rem;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  word-break: break-word; }
  @media (min-width: 640px) {
    .Container {
      padding: 0 1.16961rem; } }
  @media (min-width: 960px) {
    .Container {
      padding: 0 2.99419rem; } }

.Container--flush {
  max-width: calc(1600px - (0.85499rem * 2));
  padding: 0; }
  @media (min-width: 640px) {
    .Container--flush {
      max-width: calc(1600px - (1.16961rem * 2)); } }
  @media (min-width: 960px) {
    .Container--flush {
      max-width: calc(1600px - (2.99419rem * 2)); } }

/* ------------------------------------ *\
    #SECTION
\* ------------------------------------ */
.Section {
  padding: 2.56rem 0;
  /**
     * Variations
     *
     * Primary - Used on the first section item and allows for menu content space.
     * Featured - Used on the featured section items like logged in home page state.
     */
  position: relative; }
  @media (min-width: 640px) {
    .Section {
      padding: 4.79071rem 0; } }
  .Section::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    right: 0;
    height: 2px;
    max-width: 2400px;
    margin: auto;
    background: rgba(153, 204, 255, 0.2);
    z-index: 1;
    /**
        * Reset
        *
        * If we want to remove the bottom border.
        */ }
  .Section.Section--removeBorder {
    position: relative; }
    .Section.Section--removeBorder::after {
      position: absolute;
      content: '';
      top: 100%;
      left: 0;
      right: 0;
      height: 2px;
      max-width: 2400px;
      margin: auto;
      background: rgba(153, 204, 255, 0.2);
      z-index: 1;
      /**
        * Reset
        *
        * If we want to remove the bottom border.
        */
      display: none; }
  .Section.Section--primary {
    padding: 2.56rem 0;
    /**
     * Variations
     *
     * Primary - Used on the first section item and allows for menu content space.
     * Featured - Used on the featured section items like logged in home page state.
     */
    padding: 4.096rem 0 2.56rem; }
    @media (min-width: 640px) {
      .Section.Section--primary {
        padding: 4.79071rem 0; } }
    @media (min-width: 960px) {
      .Section.Section--primary {
        padding: 7.66514rem 0 4.79071rem; } }
    @media (min-width: 1280px) {
      .Section.Section--primary {
        padding: 8.9652rem 0 4.79071rem; } }
  .Section.Section--featured {
    padding: 2.56rem 0;
    /**
     * Variations
     *
     * Primary - Used on the first section item and allows for menu content space.
     * Featured - Used on the featured section items like logged in home page state.
     */ }
    @media (min-width: 640px) {
      .Section.Section--featured {
        padding: 4.79071rem 0; } }
    @media (min-width: 960px) {
      .Section.Section--featured {
        padding: 5.60325rem 0 4.79071rem; } }
    @media (min-width: 1280px) {
      .Section.Section--featured {
        padding: 7.66514rem 0 4.79071rem; } }

.Section-inner > *:first-child {
  margin-top: 0; }

.Section-inner > *:last-child {
  margin-bottom: 0; }

.Section-title {
  text-align: center; }
  .Section-title span {
    padding: 0 0.625rem;
    font-weight: normal; }

.Section-title--secondary {
  margin-bottom: 1.36798rem; }

/* ------------------------------------ *\
    #SECTION GAMEPLAY
\* ------------------------------------ */
.SectionGameplay {
  position: relative;
  position: relative;
  padding: 2.56rem 0 16.77722rem;
  background-color: black;
  background-image: url(https://static.starcraft2.com/qa/images/home-keyart-960--bottom.0c7e1db543ec1ae6b5fa0b9832520feb.jpg);
  background-position: bottom center;
  background-repeat: no-repeat; }
  .SectionGameplay::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    right: 0;
    height: 2px;
    max-width: 2400px;
    margin: auto;
    background: rgba(153, 204, 255, 0.2);
    z-index: 1;
    /**
        * Reset
        *
        * If we want to remove the bottom border.
        */ }
  .SectionGameplay::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    max-width: 2400px;
    margin: auto;
    background: rgba(153, 204, 255, 0.2);
    z-index: 1;
    /**
        * Reset
        *
        * If we want to remove the bottom border.
        */ }
  @media (min-width: 960px) {
    .SectionGameplay {
      padding: 8.9652rem 0;
      background-image: url(https://static.starcraft2.com/qa/images/home-keyart-1600.91e6db36bc539fb1ce485c3781b31067.jpg);
      background-position: top center;
      background-size: cover;
      min-height: 2500px; } }
  @media (min-width: 1600px) {
    .SectionGameplay {
      background-image: url(https://static.starcraft2.com/qa/images/home-keyart-2400.be718a1b9fac3cf5eb7cb4878a499b45.jpg);
      background-size: auto;
      min-height: 2650px; } }
  @media (min-width: 2400px) {
    .SectionGameplay {
      background-size: 2400px auto; } }

.SectionGameplay-mainContent {
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0))), url(https://static.starcraft2.com/qa/images/home-keyart-960--top.5d4119c16fa14a11868a3ba308b7c8d7.jpg);
  background-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0)), url(https://static.starcraft2.com/qa/images/home-keyart-960--top.5d4119c16fa14a11868a3ba308b7c8d7.jpg);
  background-position: top center, top -7.66514rem center;
  background-size: 100% 30px, auto;
  background-repeat: no-repeat; }
  @media (min-width: 640px) {
    .SectionGameplay-mainContent {
      background-position: top center, top -4.79071rem center; } }
  @media (min-width: 960px) {
    .SectionGameplay-mainContent {
      background: none; } }

.SectionGameplay-inner {
  padding-top: 16.77722rem; }
  .SectionGameplay-inner > *:first-child {
    margin-top: 0; }
  .SectionGameplay-inner > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 640px) {
    .SectionGameplay-inner {
      padding-top: 16.77722rem; } }
  @media (min-width: 960px) {
    .SectionGameplay-inner {
      padding-top: 0; } }

.SectionGameplay-lede {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 16px 32px rgba(0, 0, 0, 0.6);
  max-width: 846px;
  margin: 0 auto;
  text-align: center; }
  @media (min-width: 960px) {
    .SectionGameplay-lede {
      margin-bottom: 820px; } }

.SectionGameplay-panels {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto; }

/* ------------------------------------ *\
    #SECTION BASICS
\* ------------------------------------ */
@media (min-width: 960px) {
  .SectionBasics {
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url(https://static.starcraft2.com/qa/images/bg-basics-macro-micro-1600.4013e62f04b32a0c3fdefc76d8ce969e.jpg);
    background-size: auto; } }
  @media (min-width: 960px) and (min-width: 2400px) {
    .SectionBasics {
      background-size: 2400px auto; } }

@media (min-width: 1600px) {
  .SectionBasics {
    background-image: url(https://static.starcraft2.com/qa/images/bg-basics-macro-micro-2400.e534938408e6daa13b6e4204e85f370f.jpg); } }

@media (min-width: 960px) {
  .SectionBasics-top::after {
    display: none; } }

@media (min-width: 960px) {
  .SectionBasics-bottom {
    padding-bottom: 0; } }

/* ------------------------------------ *\
    #SECTION RACES
\* ------------------------------------ */
.SectionRaces-intro,
.SectionRaces-tabs {
  position: relative;
  z-index: 1; }

/* ------------------------------------ *\
    #NAVIGATION CONTAINER
\* ------------------------------------ */
.NavigationContainer {
  display: none;
  position: absolute;
  top: 58px;
  width: 100%;
  z-index: 5;
  will-change: transform; }
  .NavigationContainer.is-sticking {
    -webkit-transform: translate(0, -47px);
            transform: translate(0, -47px);
    -webkit-transition: none;
    transition: none; }
    @media (min-width: 1280px) {
      .NavigationContainer.is-sticking {
        -webkit-transform: translate(0, -57px);
                transform: translate(0, -57px); } }
  .NavigationContainer.is-stuck {
    position: fixed;
    top: 0;
    padding: 0;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s; }
  .NavigationContainer.is-unsticking {
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; }
  @media (min-width: 960px) {
    .NavigationContainer {
      display: block; } }
  @media (min-width: 1280px) {
    .NavigationContainer {
      top: 87px; } }

.NavigationContainer-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0.85499rem; }
  .is-stuck .NavigationContainer-inner {
    max-width: none;
    padding: 0; }
  @media (min-width: 1280px) {
    .NavigationContainer-inner {
      padding: 0 2.99419rem; } }

/* ------------------------------------ *\
    #NEWS ARTICLE CONTAINER
\* ------------------------------------ */
.NewsArticleContainer {
  max-width: 1200px;
  margin: 0 auto; }

.NewsArticleContainer-banner {
  position: relative;
  margin-bottom: 2.56rem; }

.NewsArticleContainer-bannerImage {
  display: block; }

.NewsArticleContainer-bannerOverlay {
  -webkit-box-shadow: inset 0 0 0 2px rgba(153, 204, 255, 0.2), inset 0 0 40px rgba(0, 102, 204, 0.6), inset 0 0 160px rgba(0, 102, 204, 0.4);
          box-shadow: inset 0 0 0 2px rgba(153, 204, 255, 0.2), inset 0 0 40px rgba(0, 102, 204, 0.6), inset 0 0 160px rgba(0, 102, 204, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

/* ------------------------------------ *\
    #FEATURED CONTENT
\* ------------------------------------ */
.FeaturedContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 2.99419rem;
  margin-top: 2.99419rem; }
  .FeaturedContent > *:first-child {
    margin-top: 0; }
  .FeaturedContent > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 960px) {
    .FeaturedContent {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }

.FeaturedContent-section {
  margin-bottom: 2.99419rem; }
  .FeaturedContent-section > *:first-child {
    margin-top: 0; }
  .FeaturedContent-section > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 960px) {
    .FeaturedContent-section {
      margin-bottom: 0; }
      .FeaturedContent-section:first-child {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 66.6666%;
                flex: 1 1 66.6666%;
        max-width: 66.6666%;
        padding-right: 0.39062rem; }
      .FeaturedContent-section:last-child {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 33.3333%;
                flex: 1 0 33.3333%;
        max-width: 33.3333%;
        padding-left: 0.39062rem; } }

.FeaturedContent-block {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }
  .FeaturedContent-block.FeaturedContent-block--fill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }

.FeaturedContent-tileContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -0.19531rem; }
  @media (min-width: 640px) {
    .FeaturedContent-tileContainer {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }

.FeaturedContent-tile {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  padding: 0 0.19531rem 0.39062rem; }
  @media (min-width: 640px) {
    .FeaturedContent-tile {
      padding-bottom: 0;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto; } }

.FeaturedContent-footer {
  margin-top: 0.53437rem; }

/* ------------------------------------ *\
    #GLOBAL CTA
\* ------------------------------------ */
.GlobalCTA {
  border-bottom: 0;
  background-image: url(https://static.starcraft2.com/qa/images/bg-play_cta-960.341c3624b929d1c0aaaedbe093cd8586.jpg);
  background-repeat: no-repeat;
  background-position: center; }
  @media (min-width: 960px) {
    .GlobalCTA {
      background-image: url(https://static.starcraft2.com/qa/images/bg-play_cta-1600.2d86abdf4277bd0fc999000020d0ba3e.jpg); } }
  @media (min-width: 1600px) {
    .GlobalCTA {
      background-image: url(https://static.starcraft2.com/qa/images/bg-play_cta-2400.6f98e2ade2dc99dea5ff131b05adb86e.jpg); } }

/* ------------------------------------ *\
    #WRAPPER
\* ------------------------------------ */
.Wrapper {
  overflow: hidden; }

/* ------------------------------------ *\
    #GAMEMODE CARD
\* ------------------------------------ */
.GameMode-cardRow {
  display: none; }
  @media (min-width: 640px) {
    .GameMode-cardRow {
      display: block; } }
  @media (min-width: 960px) {
    .GameMode-cardRow {
      display: none; } }

@media (min-width: 640px) {
  .GameMode-card {
    display: none; } }

@media (min-width: 960px) {
  .GameMode-card {
    display: block; } }

/* ------------------------------------ *\
    #SECTION REWARDS
\* ------------------------------------ */
.SectionRewards {
  padding-top: 20px;
  background-image: url(https://static.starcraft2.com/qa/images/rewards-background-960.953fc03cb8cd6e4b5c31e6a6c552b6b9.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #010302; }
  .SectionRewards:after {
    display: none; }
  @media (min-width: 960px) {
    .SectionRewards {
      background-image: url(https://static.starcraft2.com/qa/images/rewards-background-1600.811d135363da6e2c5c55d0d4f049dd25.png); } }
  @media (min-width: 1600px) {
    .SectionRewards {
      background-image: url(https://static.starcraft2.com/qa/images/rewards-background-2400.0b1051b90930f2c36e280f8acb60c176.png);
      padding-top: 50px; } }

.SectionRewards-mainContent {
  padding-top: 70px;
  position: relative;
  z-index: 1;
  padding-bottom: 250px; }
  @media (min-width: 960px) {
    .SectionRewards-mainContent {
      padding-bottom: 500px; } }
  @media (min-width: 1600px) {
    .SectionRewards-mainContent {
      padding-top: 120px;
      padding-bottom: 25%; } }

.SectionRewards:before {
  display: none; }

.anniversary-rewards-card-long {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }

.anniversary-rewards-card-long .Tile:before {
  padding-top: 42%; }

.SectionRewards .anniversary-rewards-card-one .card-image {
  margin-top: 30px; }

.SectionRewards .anniversary-rewards-card-long .card-left {
  width: 33.333%; }

.SectionRewards .anniversary-rewards-card-long .card-image {
  width: 66.6667%; }

.SectionRewards .anniversary-rewards-card-long .card-text {
  padding-top: 30px;
  border-top: 2px solid rgba(153, 204, 255, 0.2); }

.SectionRewards .anniversary-rewards-card-long .card-left {
  width: 33.333%; }

.SectionRewards .anniversary-rewards-card-one.mobileOnly {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (min-width: 1600px) {
    .SectionRewards .anniversary-rewards-card-one.mobileOnly {
      display: none; } }

.SectionRewards .PromoIntro {
  max-width: 640px;
  margin: 0 auto 60px; }
  @media (min-width: 1600px) {
    .SectionRewards .PromoIntro {
      max-width: 900px;
      margin-bottom: 130px; } }

.SectionRewards .PromoIntro-heading {
  font-size: 21px;
  margin-bottom: 0.5em;
  line-height: 1.25em; }
  @media (min-width: 1600px) {
    .SectionRewards .PromoIntro-heading {
      font-size: 39px;
      margin-bottom: 0.75em; } }

.SectionRewards .PromoIntro-small {
  text-transform: uppercase;
  font-size: 15px;
  font-family: "Eurostile Extd","Source Sans Pro",sans-serif;
  color: #7aa3cc;
  display: block;
  line-height: 1.2em;
  letter-spacing: 0.05em;
  margin-bottom: 1em; }
  @media (min-width: 1600px) {
    .SectionRewards .PromoIntro-small {
      font-size: 21px;
      margin-bottom: 0.5em; } }

.SectionRewards .PromoIntro-text {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.5em; }
  @media (min-width: 1600px) {
    .SectionRewards .PromoIntro-text {
      font-size: 25px; } }

.SectionRewards .blog__card-supertitle {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 18px;
  font-family: Eurostile;
  color: #7aa3cc;
  display: block;
  line-height: 1.2em;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em; }
  @media (min-width: 1600px) {
    .SectionRewards .blog__card-supertitle {
      font-size: 20px; } }

.SectionRewards .blog_card-title {
  font-size: 25px;
  font-family: Eurostile;
  line-height: 1.2em;
  letter-spacing: 0.02em; }
  @media (min-width: 1600px) {
    .SectionRewards .blog_card-title {
      font-size: 28px; } }

.SectionRewards .blog_card-meta {
  text-transform: uppercase;
  font-size: 18px;
  font-family: Eurostile;
  color: white;
  letter-spacing: 0.075em; }
  @media (min-width: 1600px) {
    .SectionRewards .blog_card-meta {
      font-size: 20px; } }

.SectionRewards .blog_card-text {
  font-size: 19px;
  line-height: 1.5em; }
  @media (min-width: 1600px) {
    .SectionRewards .blog_card-text {
      font-size: 21px; } }

@media (min-width: 640px) {
  .SectionRewards .anniversary-rewards-card-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }

.SectionRewards .anniversary-rewards-card-one,
.SectionRewards .anniversary-rewards-card-long {
  background-color: #000d1a;
  outline: 2px solid rgba(153, 204, 255, 0.2); }
  .SectionRewards .anniversary-rewards-card-one .card-top,
  .SectionRewards .anniversary-rewards-card-long .card-top {
    margin: 30px 30px 0 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative; }
    .SectionRewards .anniversary-rewards-card-one .card-top .card-header,
    .SectionRewards .anniversary-rewards-card-long .card-top .card-header {
      text-align: left;
      width: 100%; }
      .SectionRewards .anniversary-rewards-card-one .card-top .card-header .blog_card-title,
      .SectionRewards .anniversary-rewards-card-long .card-top .card-header .blog_card-title {
        margin: 0; }
    .SectionRewards .anniversary-rewards-card-one .card-top .card-icon,
    .SectionRewards .anniversary-rewards-card-long .card-top .card-icon {
      text-align: right;
      width: 48px; }
      .SectionRewards .anniversary-rewards-card-one .card-top .card-icon img,
      .SectionRewards .anniversary-rewards-card-long .card-top .card-icon img {
        display: block; }
    .SectionRewards .anniversary-rewards-card-one .card-top .card-icon.diablo,
    .SectionRewards .anniversary-rewards-card-long .card-top .card-icon.diablo {
      width: 61px;
      margin: 0; }
    .SectionRewards .anniversary-rewards-card-one .card-top .card-icon.heartstone,
    .SectionRewards .anniversary-rewards-card-long .card-top .card-icon.heartstone {
      width: 65px; }
  .SectionRewards .anniversary-rewards-card-one .card-text,
  .SectionRewards .anniversary-rewards-card-long .card-text {
    margin: 30px;
    text-align: left; }
    .SectionRewards .anniversary-rewards-card-one .card-text .blog_card-text,
    .SectionRewards .anniversary-rewards-card-long .card-text .blog_card-text {
      margin: 0; }
    .SectionRewards .anniversary-rewards-card-one .card-text .blog_card-meta,
    .SectionRewards .anniversary-rewards-card-long .card-text .blog_card-meta {
      margin-bottom: 0.5em; }

.SectionRewards .anniversary-rewards-card-one {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.SectionRewards-lede {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 16px 32px rgba(0, 0, 0, 0.6);
  max-width: 846px;
  margin: 0 auto;
  text-align: center; }
  @media (min-width: 960px) {
    .SectionRewards-lede {
      margin-bottom: 820px; } }

.SectionRewards-panels {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 1599px) {
  .desktopOnly {
    display: none; } }

@media (min-width: 1600px) {
  .mobileOnly {
    display: none; } }

.PromoIntro-text {
  word-break: keep-all; }

/* ------------------------------------ *\
    #BACKDROP
\* ------------------------------------ */
/* Used for applying backgrounds on more simple sections. Some sections may need their own background implementaions */
.Backdrop {
  background-position: top center;
  background-repeat: no-repeat; }
  @media (min-width: 2400px) {
    .Backdrop {
      background-size: 2400px auto; } }

.Backdrop--cover {
  background-size: cover; }

.Backdrop--homeLoggedIn {
  background-image: url(https://static.starcraft2.com/qa/images/bg-home-logged_in-960-Blue-100-10.c4ebf34aab3e46280d0e2f48b77fbc10.jpg);
  background-color: #000d1a; }
  @media (min-width: 960px) {
    .Backdrop--homeLoggedIn {
      background-image: url(https://static.starcraft2.com/qa/images/bg-home-logged_in-1600-Blue-100-10.0d6621f6c153588d01f546c1118a0f44.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--homeLoggedIn {
      background-image: url(https://static.starcraft2.com/qa/images/bg-home-logged_in-2400-Blue-100-10.658d0ed999593adff87875c994cb715a.jpg); } }

.Backdrop--videos {
  background-image: url(https://static.starcraft2.com/qa/images/bg-media-videos-960--Blue-60-10.df1bebb11633b31ab95fb994bbcb2d03.jpg);
  background-color: #0a121a; }
  @media (min-width: 960px) {
    .Backdrop--videos {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-videos-1600--Blue-60-10.ba69060db1eecc4bd08032276070d746.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--videos {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-videos-2400--Blue-60-10.5ceb6228f5f98cf7854ebd8a94969dfe.jpg); } }

.Backdrop--screenshots {
  background-image: url(https://static.starcraft2.com/qa/images/bg-media-screenshots-960--RichBlue-60-10.d7ec5313faad58ae3d26e3e7d3402f13.jpg);
  background-color: #0a0a1a; }
  @media (min-width: 960px) {
    .Backdrop--screenshots {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-screenshots-1600--RichBlue-60-10.a44000fc0e53f5ba477970c68cfdf132.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--screenshots {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-screenshots-2400--RichBlue-60-10.3926ea61bf438b9a3f67cf14c5003ba9.jpg); } }

.Backdrop--comics {
  background-image: url(https://static.starcraft2.com/qa/images/bg-media-comics-960--RichBlue-60-10.80b2a2b37c674a69e9ee46ba00fb903f.jpg);
  background-color: #0a121a; }
  @media (min-width: 960px) {
    .Backdrop--comics {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-comics-1600--RichBlue-60-10.82690051446b419823252632d3fe6c56.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--comics {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-comics-2400--RichBlue-60-10.eb0e0fdf7262adb9607dc07944624876.jpg); } }

.Backdrop--wallpapers {
  background-image: url(https://static.starcraft2.com/qa/images/bg-media-wallpapers-960--RichBlue-60-10.0211f337914867a5fbc391b6c0a4ded7.jpg);
  background-color: #0a0a1a; }
  @media (min-width: 960px) {
    .Backdrop--wallpapers {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-wallpapers-1600--RichBlue-60-10.117b2b4d89081b39c2bd386925f5cd48.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--wallpapers {
      background-image: url(https://static.starcraft2.com/qa/images/bg-media-wallpapers-2400--RichBlue-60-10.308b4c7b50c52c227d5e612970db3eaf.jpg); } }

.Backdrop--newsList {
  background-image: url(https://static.starcraft2.com/qa/images/bg-news-archive-960--Blue-80-10.7b06c477e27f49bc076d219295bc6ef3.jpg);
  background-color: #050f1a; }
  @media (min-width: 960px) {
    .Backdrop--newsList {
      background-image: url(https://static.starcraft2.com/qa/images/bg-news-archive-1600--Blue-80-10.ec4a264eed6df6533c0f7c2cf728f7ad.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--newsList {
      background-image: url(https://static.starcraft2.com/qa/images/bg-news-archive-2400--Blue-80-10.8e01428e4dec1f8ac3d562740234af07.jpg); } }

.Backdrop--newsArticle {
  background-image: url(https://static.starcraft2.com/qa/images/bg-news-single-960--RichBlue-80-10.98bfd09a711e59bf97e6e06161514c44.jpg);
  background-color: #05051a; }
  @media (min-width: 960px) {
    .Backdrop--newsArticle {
      background-image: url(https://static.starcraft2.com/qa/images/bg-news-single-1600--RichBlue-80-10.c0aea1db305e18433ee0675061b29a80.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--newsArticle {
      background-image: url(https://static.starcraft2.com/qa/images/bg-news-single-2400--RichBlue-80-10.7fb92208025d57fc14bfc7d6968fa6b3.jpg); } }

.Backdrop--f2p {
  background-image: url(https://static.starcraft2.com/qa/images/bg-f2p-960.eb12bc1aacebd4a5bc4318c0a4574fe8.jpg); }
  @media (min-width: 960px) {
    .Backdrop--f2p {
      background-image: url(https://static.starcraft2.com/qa/images/bg-f2p-1600.ddd04f6c8934041699b62f8a4656b73b.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--f2p {
      background-image: url(https://static.starcraft2.com/qa/images/bg-f2p-2400.659a967688f561e82d36b6bd4624c781.jpg); } }

.Backdrop--overview {
  background-image: url(https://static.starcraft2.com/qa/images/bg-game-overview-960.733821e303215d74e79585ab49a9cce8.jpg); }
  @media (min-width: 960px) {
    .Backdrop--overview {
      background-image: url(https://static.starcraft2.com/qa/images/bg-game-overview-1600.a3b3869e2cf1d6f7318aad41a1090ab4.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--overview {
      background-image: url(https://static.starcraft2.com/qa/images/bg-game-overview-2400.7952afede2afb08b46e07b0652fcfbae.jpg); } }

.Backdrop--basics {
  background-image: url(https://static.starcraft2.com/qa/images/bg-basics-macro-micro-960-top.7b2a336eb717a759f91503bc148b98e5.jpg); }
  @media (min-width: 960px) {
    .Backdrop--basics {
      background-image: none; } }

.Backdrop--multitasking {
  background-image: url(https://static.starcraft2.com/qa/images/bg-basics-macro-micro-960-bottom.01bd972fd00ca97410cdd8ff097c3d72.jpg);
  background-position: center bottom; }
  @media (min-width: 960px) {
    .Backdrop--multitasking {
      background-image: none; } }

.Backdrop--gameMode {
  background-image: url(https://static.starcraft2.com/qa/images/bg-game-modes-960.1bd0ecb516e72caf3af8602f798d9029.jpg); }
  @media (min-width: 960px) {
    .Backdrop--gameMode {
      background-image: url(https://static.starcraft2.com/qa/images/bg-game-modes-1600.5ce623dd4c86c43dfd4db6862815f577.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--gameMode {
      background-image: url(https://static.starcraft2.com/qa/images/bg-game-modes-2400.3476f918e683b216da8d53fe83c1c7a4.jpg); } }

.Backdrop--nextStep {
  background-image: url(https://static.starcraft2.com/qa/images/bg-resources-960.aa495700e2fb46249452b8da5f90b87a.jpg); }
  @media (min-width: 960px) {
    .Backdrop--nextStep {
      background-image: url(https://static.starcraft2.com/qa/images/bg-resources-1600.920b2390c711e2413e6a75ecad94d63b.jpg); } }
  @media (min-width: 1600px) {
    .Backdrop--nextStep {
      background-image: url(https://static.starcraft2.com/qa/images/bg-resources-2400.1ae98d94bfb267cf7e546743be8dea82.jpg); } }

.Backdrop--races {
  background: #000; }

/* ------------------------------------ *\
    #NAVIGATION
\* ------------------------------------ */
.Navigation {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 32px rgba(0, 0, 0, 0.4);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 8px 32px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
  font-family: "Eurostile", "Source Sans Pro", sans-serif;
  font-size: 0.731rem;
  letter-spacing: 0.15em; }

.Navigation-inner {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 0.731rem;
  border: 2px solid #22476b;
  border-right: 0;
  background: rgba(20, 36, 51, 0.8) -webkit-gradient(linear, left bottom, left top, from(rgba(20, 61, 102, 0.2)), color-stop(50%, rgba(20, 61, 102, 0)));
  background: rgba(20, 36, 51, 0.8) linear-gradient(0deg, rgba(20, 61, 102, 0.2), rgba(20, 61, 102, 0) 50%);
  -webkit-box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2);
          box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2); }
  .is-authenticated .Navigation-inner {
    padding-right: 0; }

.Navigation-inner,
.Navigation-cta {
  height: 47px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; }
  @media (min-width: 1280px) {
    .Navigation-inner,
    .Navigation-cta {
      height: 57px; } }

.Navigation-logo {
  border: 2px solid rgba(153, 204, 255, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50px;
  padding: 0 0.45688rem;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  background: rgba(0, 0, 0, 0.4); }
  .Navigation-logo > img {
    -webkit-transition: -webkit-filter 0.2s linear;
    transition: -webkit-filter 0.2s linear;
    transition: filter 0.2s linear;
    transition: filter 0.2s linear, -webkit-filter 0.2s linear; }
    @media (min-width: 1280px) {
      .Navigation-logo > img {
        width: auto;
        max-height: 45px; } }
  .Navigation-logo:hover > img {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3); }
  @media (min-width: 1280px) {
    .Navigation-logo {
      width: 75px; } }

.Navigation-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 0 0.731rem; }

.Navigation-link {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 0.625rem;
  color: #cce6ff; }
  div.Navigation-link {
    cursor: pointer; }
  .Navigation-link:visited, .Navigation-link:focus, .Navigation-link:active {
    color: #cce6ff; }
  .Navigation-link:hover {
    color: #cce6ff;
    -webkit-box-shadow: 0 2px #3d6b99;
            box-shadow: 0 2px #3d6b99;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 128, 255, 0.2)), to(rgba(0, 128, 255, 0.05)));
    background-image: linear-gradient(0deg, rgba(0, 128, 255, 0.2), rgba(0, 128, 255, 0.05)); }
  .Navigation-link.is-active {
    color: white;
    -webkit-box-shadow: 0 2px #66b3ff;
            box-shadow: 0 2px #66b3ff;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 128, 255, 0.4)), to(rgba(0, 128, 255, 0.1)));
    background-image: linear-gradient(0deg, rgba(0, 128, 255, 0.4), rgba(0, 128, 255, 0.1)); }
    .Navigation-link.is-active > svg {
      fill: white; }
  @media (min-width: 1280px) {
    .Navigation-link {
      padding: 0 0.731rem; } }

html:lang(pt) .Navigation-link,
html:lang(pt) .Navigation-user,
html:lang(pt) .Navigation-cta,
html:lang(es) .Navigation-link,
html:lang(es) .Navigation-user,
html:lang(es) .Navigation-cta,
html:lang(de) .Navigation-link,
html:lang(de) .Navigation-user,
html:lang(de) .Navigation-cta,
html:lang(fr) .Navigation-link,
html:lang(fr) .Navigation-user,
html:lang(fr) .Navigation-cta,
html:lang(pl) .Navigation-link,
html:lang(pl) .Navigation-user,
html:lang(pl) .Navigation-cta,
html:lang(ru) .Navigation-link,
html:lang(ru) .Navigation-user,
html:lang(ru) .Navigation-cta,
html:lang(it) .Navigation-link,
html:lang(it) .Navigation-user,
html:lang(it) .Navigation-cta {
  letter-spacing: 0;
  font: 600 18px "Source Sans Pro"; }

html:lang(pt) .Navigation-user,
html:lang(es) .Navigation-user,
html:lang(de) .Navigation-user,
html:lang(fr) .Navigation-user,
html:lang(pl) .Navigation-user,
html:lang(ru) .Navigation-user,
html:lang(it) .Navigation-user {
  padding-left: 0;
  padding-right: 0; }

html:lang(de) .Navigation-links,
html:lang(pl) .Navigation-links,
html:lang(ru) .Navigation-links,
html:lang(es) .Navigation-links,
html:lang(fr) .Navigation-links,
html:lang(pt) .Navigation-links {
  padding-left: 0;
  padding-right: 0; }
  @media (max-width: 1279px) {
    html:lang(de) .Navigation-links a:first-child,
    html:lang(pl) .Navigation-links a:first-child,
    html:lang(ru) .Navigation-links a:first-child,
    html:lang(es) .Navigation-links a:first-child,
    html:lang(fr) .Navigation-links a:first-child,
    html:lang(pt) .Navigation-links a:first-child {
      padding: 0;
      width: 0; } }

html:lang(ru) .Navigation-link,
html:lang(ru) .Navigation-user,
html:lang(ru) .Navigation-cta,
html:lang(es) .Navigation-link,
html:lang(es) .Navigation-user,
html:lang(es) .Navigation-cta,
html:lang(fr) .Navigation-link,
html:lang(fr) .Navigation-user,
html:lang(fr) .Navigation-cta,
html:lang(de) .Navigation-link,
html:lang(de) .Navigation-user,
html:lang(de) .Navigation-cta {
  font-size: 16px; }
  @media (min-width: 1440px) {
    html:lang(ru) .Navigation-link,
    html:lang(ru) .Navigation-user,
    html:lang(ru) .Navigation-cta,
    html:lang(es) .Navigation-link,
    html:lang(es) .Navigation-user,
    html:lang(es) .Navigation-cta,
    html:lang(fr) .Navigation-link,
    html:lang(fr) .Navigation-user,
    html:lang(fr) .Navigation-cta,
    html:lang(de) .Navigation-link,
    html:lang(de) .Navigation-user,
    html:lang(de) .Navigation-cta {
      font-size: 18px; } }

.Navigation-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  a.Navigation-user {
    padding: 0 0.731rem;
    line-height: 1;
    color: #cce6ff; }
    a.Navigation-user:visited, a.Navigation-user:focus, a.Navigation-user:active {
      color: #cce6ff; }
    a.Navigation-user:hover {
      color: #cce6ff;
      -webkit-box-shadow: 0 2px #3d6b99;
              box-shadow: 0 2px #3d6b99;
      background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 128, 255, 0.2)), to(rgba(0, 128, 255, 0.05)));
      background-image: linear-gradient(0deg, rgba(0, 128, 255, 0.2), rgba(0, 128, 255, 0.05)); }
    a.Navigation-user.is-active {
      color: white;
      -webkit-box-shadow: 0 2px #66b3ff;
              box-shadow: 0 2px #66b3ff;
      background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 128, 255, 0.4)), to(rgba(0, 128, 255, 0.1)));
      background-image: linear-gradient(0deg, rgba(0, 128, 255, 0.4), rgba(0, 128, 255, 0.1)); }
      a.Navigation-user.is-active > svg {
        fill: white; }

.Navigation-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0 0.731rem;
  text-transform: uppercase;
  font-family: "Eurostile", "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 0.731rem;
  letter-spacing: 0.15em;
  -webkit-box-shadow: none;
          box-shadow: none;
  text-shadow: none; }
  .Navigation-cta.btn {
    color: #ffdd99;
    line-height: 1; }
  .is-authenticated .Navigation-cta {
    padding: 0 0.28555rem; }

.Navigation-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 0.33398rem;
  vertical-align: middle;
  fill: #cce6ff; }
  .Navigation-icon.Navigation-icon--home {
    width: 16px;
    height: 16px;
    margin: 0; }
    @media (min-width: 1280px) {
      .Navigation-icon.Navigation-icon--home {
        width: 19px; } }
  .Navigation-icon.Navigation-icon--external {
    width: 8px;
    height: 8px;
    fill-rule: evenodd; }
    @media (min-width: 1280px) {
      .Navigation-icon.Navigation-icon--external {
        width: 10px;
        height: 10px; } }
  .Navigation-icon.Navigation-icon--arrow {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s; }
    .is-open .Navigation-icon.Navigation-icon--arrow {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
    @media (min-width: 1280px) {
      .Navigation-icon.Navigation-icon--arrow {
        width: 12px;
        height: 12px; } }

/* ------------------------------------ *\
    #NAVIGATION MOBILE
\* ------------------------------------ */
.NavigationMobile {
  text-transform: uppercase;
  font-family: "Eurostile", "Source Sans Pro", sans-serif;
  font-size: 0.85499rem;
  letter-spacing: 0.15em; }

.NavigationMobile-logo {
  display: block;
  max-width: 210px;
  margin: 30px auto 20px; }

.NavigationMobile-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.731rem 1.36798rem;
  line-height: 1.6;
  color: #cce6ff; }
  div.NavigationMobile-link {
    cursor: pointer; }
  .NavigationMobile-link:visited, .NavigationMobile-link:focus, .NavigationMobile-link:active {
    color: #cce6ff; }
  .NavigationMobile-link:hover {
    -webkit-box-shadow: inset 2px 0 #3d6b99;
            box-shadow: inset 2px 0 #3d6b99;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.2)), to(rgba(0, 128, 255, 0.05)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.2), rgba(0, 128, 255, 0.05)); }
  .NavigationMobile-link.is-active {
    color: white;
    -webkit-box-shadow: inset 2px 0 #66b3ff;
            box-shadow: inset 2px 0 #66b3ff;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.4)), to(rgba(0, 128, 255, 0.1)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.4), rgba(0, 128, 255, 0.1)); }

.NavigationMobile-link--dropdown {
  padding: 0.625rem 1.36798rem;
  font-size: 0.731rem; }

a.NavigationMobile-user {
  display: block;
  padding: 0.731rem 1.36798rem;
  line-height: 1; }
  a.NavigationMobile-user:visited, a.NavigationMobile-user:focus, a.NavigationMobile-user:active {
    color: #cce6ff; }
  a.NavigationMobile-user:hover {
    -webkit-box-shadow: inset 2px 0 #3d6b99;
            box-shadow: inset 2px 0 #3d6b99;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.2)), to(rgba(0, 128, 255, 0.05)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.2), rgba(0, 128, 255, 0.05)); }
  a.NavigationMobile-user.is-active {
    color: white;
    -webkit-box-shadow: inset 2px 0 #66b3ff;
            box-shadow: inset 2px 0 #66b3ff;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.4)), to(rgba(0, 128, 255, 0.1)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.4), rgba(0, 128, 255, 0.1)); }

.NavigationMobile-cta {
  padding: 1.16961rem 1.36798rem; }
  .NavigationMobile-cta > a {
    margin: 0;
    text-transform: uppercase;
    color: #ffdd99;
    line-height: 1; }

.NavigationMobile-icon {
  display: inline-block;
  margin-left: 0.45688rem;
  fill: #cce6ff; }
  .NavigationMobile-icon.NavigationMobile-icon--external {
    width: 9px;
    fill-rule: evenodd; }
  .NavigationMobile-icon.NavigationMobile-icon--arrow {
    width: 12px;
    opacity: 0.6; }
    .is-active .NavigationMobile-icon.NavigationMobile-icon--arrow {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }

.NavigationMobile-dropdown {
  display: none;
  padding: 0.625rem 0;
  background: black; }
  .NavigationMobile-dropdown.is-open {
    display: block; }

/* ------------------------------------ *\
    #NAVIGATION DROPDOWN
\* ------------------------------------ */
.NavigationDropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 250px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s linear 0.2s, opacity 0.2s;
  transition: visibility 0s linear 0.2s, opacity 0.2s; }
  .is-open .NavigationDropdown {
    opacity: 1;
    visibility: visible;
    -webkit-transition: visibility 0s linear 0s, opacity 0.2s;
    transition: visibility 0s linear 0s, opacity 0.2s; }

.NavigationDropdown-inner {
  padding: 0.39062rem 0;
  border: 2px solid #0c2d4f;
  background-color: rgba(10, 31, 51, 0.8); }

.NavigationDropdown-link {
  display: block;
  padding: 0.39062rem 0.731rem;
  font-size: 0.625rem;
  color: #cce6ff;
  line-height: 1.6;
  text-shadow: none; }
  .NavigationDropdown-link:visited, .NavigationDropdown-link:focus, .NavigationDropdown-link:active {
    color: #cce6ff; }
  .NavigationDropdown-link:hover {
    -webkit-box-shadow: -2px 0 #3d6b99;
            box-shadow: -2px 0 #3d6b99;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.2)), to(rgba(0, 128, 255, 0.05)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.2), rgba(0, 128, 255, 0.05)); }
  .NavigationDropdown-link.is-active {
    color: white;
    -webkit-box-shadow: -2px 0 #66b3ff;
            box-shadow: -2px 0 #66b3ff;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 128, 255, 0.4)), to(rgba(0, 128, 255, 0.1)));
    background-image: linear-gradient(90deg, rgba(0, 128, 255, 0.4), rgba(0, 128, 255, 0.1)); }

/* ------------------------------------ *\
    #LIVE INDICATOR
\* ------------------------------------ */
.LiveIndicator {
  width: 9px;
  height: 9px;
  margin-right: 0.33398rem;
  border-radius: 50%;
  background: red;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
          box-shadow: 0 0 5px rgba(255, 0, 0, 0.6);
  -webkit-animation: pulse 1.5s infinite alternate;
          animation: pulse 1.5s infinite alternate; }

.LiveIndicator--mobile {
  margin-right: 0.45688rem; }

@-webkit-keyframes pulse {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }

@keyframes pulse {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }

/* ------------------------------------ *\
    #PROFILE PILL
\* ------------------------------------ */
.ProfilePill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.24414rem;
  border-left: 2px solid #22476b;
  background: rgba(0, 0, 0, 0.4);
  height: 100%; }

.ProfilePill--mobile {
  padding: 0.53437rem;
  margin-bottom: 0.731rem;
  border: 0; }

.ProfilePill-avatar {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 35px;
  -webkit-box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2);
          box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2);
  border: solid 2px rgba(0, 102, 204, 0.2);
  -webkit-transition: -webkit-filter 0.2s linear;
  transition: -webkit-filter 0.2s linear;
  transition: filter 0.2s linear;
  transition: filter 0.2s linear, -webkit-filter 0.2s linear; }
  .ProfilePill:hover .ProfilePill-avatar {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3); }
  .ProfilePill--mobile .ProfilePill-avatar {
    max-width: 45px; }
  @media (min-width: 1280px) {
    .ProfilePill-avatar {
      max-width: 45px; } }

.ProfilePill-description {
  padding: 0 0.625rem; }

.ProfilePill-tag,
.ProfilePill-link {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 1.3;
  -webkit-transition: -webkit-filter 0.2s;
  transition: -webkit-filter 0.2s;
  transition: filter 0.2s;
  transition: filter 0.2s, -webkit-filter 0.2s; }
  .ProfilePill:hover .ProfilePill-tag, .ProfilePill:hover
  .ProfilePill-link {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3); }

.ProfilePill-tag {
  color: #cce6ff;
  font-size: 0.625rem; }
  .ProfilePill--mobile .ProfilePill-tag {
    font-size: 0.731rem; }

.ProfilePill-link {
  display: block;
  color: #66b3ff;
  font-size: 0.45688rem; }
  .ProfilePill--mobile .ProfilePill-link {
    font-size: 0.53437rem; }

/* ------------------------------------ *\
    #HERO
\* ------------------------------------ */
.Hero {
  position: relative;
  position: relative;
  text-align: center;
  padding: 1.6rem 0;
  overflow: hidden;
  margin-top: 46px; }
  .Hero::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    right: 0;
    height: 2px;
    max-width: 2400px;
    margin: auto;
    background: rgba(153, 204, 255, 0.2);
    z-index: 1;
    /**
        * Reset
        *
        * If we want to remove the bottom border.
        */ }
  @media (min-width: 640px) {
    .Hero {
      padding: 6.5536rem 0 4.79071rem; } }
  @media (min-width: 960px) {
    .Hero {
      margin-top: 0; } }
  @media (min-width: 1280px) {
    .Hero {
      padding-top: 178px;
      padding-bottom: calc(200px - 3.50203rem); } }
  .Hero .ActionBox {
    padding-top: 0; }

.Hero-videoWrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 2400px;
  background-size: cover;
  background-position: center; }

.Hero-video {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  @media (min-width: 960px) {
    .Hero-video {
      display: block; } }
  @media (min-width: 1920px) {
    .Hero-video {
      width: 100%; } }

.Hero-content {
  position: relative; }

.Hero-logo > img {
  max-width: 100%;
  width: auto; }

.Hero-heading small {
  color: #cce6ff; }
  @media (min-width: 960px) {
    .Hero-heading small {
      font-size: 0.85499rem; } }

/* ------------------------------------ *\
    #Anniversary
\* ------------------------------------ */
.Hero-anniversary {
  background: url(https://static.starcraft2.com/qa/images/header-keyart-1600-FPO.bd4e2b0d6a6868f1a06224729b109157.png) center; }

/* ------------------------------------ *\
    #ARTICLE
\* ------------------------------------ */
.Article {
  max-width: 31.3964rem;
  margin: 0 auto;
  overflow-x: hidden; }
  .Article .breakout {
    width: 1200px;
    margin-left: calc(-1 * (1200px - 31.3964rem) / 2); }

/* ------------------------------------ *\
    #SCENE
\* ------------------------------------ */
/* This component is very unique and requires some manually positioned visuals */
.Scene {
  margin-top: -1.87137rem; }
  .Scene > *:first-child {
    margin-top: 0; }
  .Scene > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 640px) {
    .Scene {
      margin-top: -3.50203rem; } }
  @media (min-width: 960px) {
    .Scene {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      margin-top: -2.18877rem; } }
  @media (min-width: 1280px) {
    .Scene {
      width: auto;
      position: static;
      left: auto;
      right: auto;
      margin-left: 0;
      margin-right: 0; } }
  @media (min-width: 1440px) {
    .Scene {
      margin-top: -2.18877rem; } }

.Scene-visual {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden; }
  @media (min-width: 960px) {
    .Scene-visual {
      width: auto;
      position: static;
      left: auto;
      right: auto;
      margin-left: 0;
      margin-right: 0;
      position: relative;
      overflow: visible; } }

.Scene-image > img {
  position: relative;
  width: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
  @media (min-width: 960px) {
    .Scene-image > img {
      width: 100%;
      left: auto;
      -webkit-transform: none;
              transform: none; } }

.Scene-cutout {
  display: none;
  position: absolute;
  width: auto;
  z-index: 1; }
  @media (min-width: 1280px) {
    .Scene-cutout {
      display: block; } }
  .Scene-cutout.Scene-cutout--bottomLeft {
    width: 10%;
    left: -2.2%;
    bottom: 26.8%; }
  .Scene-cutout.Scene-cutout--bottomRight {
    width: 10.5%;
    left: 23.2%;
    bottom: 11%; }
  .Scene-cutout.Scene-cutout--topLeft {
    width: 21%;
    top: 4.7%;
    left: 1.2%; }
  .Scene-cutout.Scene-cutout--bottom {
    width: 24.5%;
    bottom: 5.9%;
    right: -1.2%; }
  .Scene-cutout.Scene-cutout--top {
    width: 34.2%;
    top: 0.7%;
    right: 2%; }

.Scene-list {
  max-width: 440px;
  margin: -0.731rem auto 0; }
  .Scene-list > *:first-child {
    margin-top: 0; }
  .Scene-list > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 640px) {
    .Scene-list {
      margin: 0.731rem auto 0; } }
  @media (min-width: 960px) {
    .Scene-list {
      max-width: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 0 2%;
      margin: 0; } }
  @media (min-width: 1440px) {
    .Scene-list {
      margin: -0.731rem auto 0; } }

/* The positioning/scaling on this list is purely dependant on the scene visual, as that is the part of the */
.Scene-listItem {
  position: relative;
  margin-bottom: 2.99419rem;
  padding-left: 1.87137rem;
  counter-increment: step-counter; }
  .Scene-listItem > *:first-child {
    margin-top: 0; }
  .Scene-listItem > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 960px) {
    .Scene-listItem {
      padding: 0 2.18877rem 0 1.87137rem;
      margin: 0;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 33.3333%;
              flex: 1 1 33.3333%; } }
  @media (min-width: 1440px) {
    .Scene-listItem:last-child {
      padding-right: 0; } }
  .Scene-listItem::before {
    position: absolute;
    top: 1px;
    left: 0;
    width: 1.16961rem;
    height: 1.16961rem;
    font-family: "Eurostile Extd", "Source Sans Pro", sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    color: black;
    text-align: center;
    line-height: 2;
    border-radius: 50%;
    background: #99ccff;
    content: counter(step-counter); }

.Scene-heading {
  margin-bottom: 0.625rem;
  font-weight: 700; }

.Scene-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
  margin-top: 0.625rem;
  font-size: 0.85499rem;
  line-height: 1.36798; }

/* ------------------------------------ *\
    #MAP
\* ------------------------------------ */
.Map {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 10.48576rem; }

.Map-inner {
  position: relative;
  max-width: 2400px;
  margin: 0 auto; }

.Map-image {
  display: block;
  opacity: 0;
  -webkit-transform: translateY(15%);
          transform: translateY(15%);
  will-change: transform;
  -webkit-transition: opacity 0.5s ease, -webkit-transform 1s ease;
  transition: opacity 0.5s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity 0.5s ease;
  transition: transform 1s ease, opacity 0.5s ease, -webkit-transform 1s ease; }
  .is-activeMap .Map-image {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }

.Map-modalClose {
  display: none;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 12px;
  top: 12px;
  -webkit-transform: translateY(1.16961rem);
          transform: translateY(1.16961rem);
  cursor: pointer; }
  .Map-modalClose .Map-modalCloseIcon {
    display: block;
    -webkit-filter: drop-shadow(1px 1px 2px black);
            filter: drop-shadow(1px 1px 2px black); }
    .Map-modalClose .Map-modalCloseIcon:hover {
      -webkit-filter: brightness(120%);
              filter: brightness(120%); }
  .is-active .Map-modal .Map-modalClose {
    display: block; }

.Map-mapPinContainer {
  position: absolute;
  width: 1px;
  height: 1px;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  will-change: transform; }
  .is-activeMap .Map-mapPinContainer {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  .Map-mapPinContainer.Map-mapPinContainer--1 {
    top: 13%;
    left: 27%;
    -webkit-transition: opacity 0.5s ease 0.5s, -webkit-transform 0.75s ease 0.5s;
    transition: opacity 0.5s ease 0.5s, -webkit-transform 0.75s ease 0.5s;
    transition: transform 0.75s ease 0.5s, opacity 0.5s ease 0.5s;
    transition: transform 0.75s ease 0.5s, opacity 0.5s ease 0.5s, -webkit-transform 0.75s ease 0.5s; }
  .Map-mapPinContainer.Map-mapPinContainer--2 {
    top: 21%;
    left: 35%;
    -webkit-transition: opacity 0.5s ease 0.6s, -webkit-transform 0.75s ease 0.6s;
    transition: opacity 0.5s ease 0.6s, -webkit-transform 0.75s ease 0.6s;
    transition: transform 0.75s ease 0.6s, opacity 0.5s ease 0.6s;
    transition: transform 0.75s ease 0.6s, opacity 0.5s ease 0.6s, -webkit-transform 0.75s ease 0.6s; }
  .Map-mapPinContainer.Map-mapPinContainer--3 {
    top: 47%;
    left: 11.5%;
    -webkit-transition: opacity 0.5s ease 0.7s, -webkit-transform 0.75s ease 0.7s;
    transition: opacity 0.5s ease 0.7s, -webkit-transform 0.75s ease 0.7s;
    transition: transform 0.75s ease 0.7s, opacity 0.5s ease 0.7s;
    transition: transform 0.75s ease 0.7s, opacity 0.5s ease 0.7s, -webkit-transform 0.75s ease 0.7s; }
  .Map-mapPinContainer.Map-mapPinContainer--4 {
    top: 14%;
    left: 43.5%;
    -webkit-transition: opacity 0.5s ease 0.8s, -webkit-transform 0.75s ease 0.8s;
    transition: opacity 0.5s ease 0.8s, -webkit-transform 0.75s ease 0.8s;
    transition: transform 0.75s ease 0.8s, opacity 0.5s ease 0.8s;
    transition: transform 0.75s ease 0.8s, opacity 0.5s ease 0.8s, -webkit-transform 0.75s ease 0.8s; }
  .Map-mapPinContainer.Map-mapPinContainer--5 {
    top: 29%;
    left: 47.5%;
    -webkit-transition: opacity 0.5s ease 0.9s, -webkit-transform 0.75s ease 0.9s;
    transition: opacity 0.5s ease 0.9s, -webkit-transform 0.75s ease 0.9s;
    transition: transform 0.75s ease 0.9s, opacity 0.5s ease 0.9s;
    transition: transform 0.75s ease 0.9s, opacity 0.5s ease 0.9s, -webkit-transform 0.75s ease 0.9s; }
  .Map-mapPinContainer.Map-mapPinContainer--6 {
    top: 58%;
    left: 65.5%;
    -webkit-transition: opacity 0.5s ease 1s, -webkit-transform 0.75s ease 1s;
    transition: opacity 0.5s ease 1s, -webkit-transform 0.75s ease 1s;
    transition: transform 0.75s ease 1s, opacity 0.5s ease 1s;
    transition: transform 0.75s ease 1s, opacity 0.5s ease 1s, -webkit-transform 0.75s ease 1s; }
  .Map-mapPinContainer.Map-mapPinContainer--7 {
    top: 48%;
    left: 84.5%;
    -webkit-transition: opacity 0.5s ease 1.1s, -webkit-transform 0.75s ease 1.1s;
    transition: opacity 0.5s ease 1.1s, -webkit-transform 0.75s ease 1.1s;
    transition: transform 0.75s ease 1.1s, opacity 0.5s ease 1.1s;
    transition: transform 0.75s ease 1.1s, opacity 0.5s ease 1.1s, -webkit-transform 0.75s ease 1.1s; }
  .Map-mapPinContainer.Map-mapPinContainer--8 {
    top: 62%;
    left: 91.5%;
    -webkit-transition: opacity 0.5s ease 1.2s, -webkit-transform 0.75s ease 1.2s;
    transition: opacity 0.5s ease 1.2s, -webkit-transform 0.75s ease 1.2s;
    transition: transform 0.75s ease 1.2s, opacity 0.5s ease 1.2s;
    transition: transform 0.75s ease 1.2s, opacity 0.5s ease 1.2s, -webkit-transform 0.75s ease 1.2s; }
  .Map-mapPinContainer::before, .Map-mapPinContainer::after {
    content: '';
    position: absolute;
    left: 45%;
    -webkit-transform: translateX(-45%);
            transform: translateX(-45%);
    bottom: -14px;
    width: 51px;
    height: 59px;
    background-repeat: no-repeat;
    background-position: center; }
  .Map-mapPinContainer::before {
    background-image: url(https://static.starcraft2.com/qa/images/img-pin-inactive.3fbfa1ecaec276a8d0cb32f18cb7735a.png); }
  .Map-mapPinContainer::after {
    background-image: url(https://static.starcraft2.com/qa/images/img-pin-active.4ee9aa172ba25899994edd098ff98161.png);
    background-position: left -2px bottom -1px;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s; }
  .Map-mapPinContainer:hover::after, .Map-mapPinContainer.is-active::after {
    opacity: 1; }

.Map-modal {
  width: 320px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 25px;
  opacity: 0;
  z-index: 3;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  cursor: auto;
  pointer-events: none; }
  .is-active .Map-modal {
    pointer-events: auto; }
  .Map-mapPinContainer--3 .Map-modal {
    left: 30%;
    -webkit-transform: translateX(-30%);
            transform: translateX(-30%); }
    @media (min-width: 1440px) {
      .Map-mapPinContainer--3 .Map-modal {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); } }
  .Map-mapPinContainer--7 .Map-modal {
    left: 60%;
    -webkit-transform: translateX(-60%);
            transform: translateX(-60%); }
    @media (min-width: 1440px) {
      .Map-mapPinContainer--7 .Map-modal {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); } }
  .Map-mapPinContainer--8 .Map-modal {
    left: 80%;
    -webkit-transform: translateX(-80%);
            transform: translateX(-80%); }
    @media (min-width: 2100px) {
      .Map-mapPinContainer--8 .Map-modal {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); } }
  .Map-modal img {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  .is-active .Map-modal {
    opacity: 1; }

/* ------------------------------------ *\
    #FLOW CHART
\* ------------------------------------ */
.FlowChart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  margin: 54px auto; }
  @media (min-width: 640px) {
    .FlowChart {
      width: 66vw;
      max-width: 1065px;
      margin: 0 auto; } }
  @media (min-width: 960px) {
    .FlowChart {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      margin: 160px auto 200px;
      padding: 100px 0; }
      .FlowChart::before, .FlowChart::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.4); }
      .FlowChart::before {
        top: 0; }
      .FlowChart::after {
        bottom: 0; } }

.FlowChart-header {
  margin-top: 0;
  margin-bottom: 0.85499rem; }

.FlowChart-desc {
  margin-top: 0;
  font-size: 0.85499rem; }

.FlowChart-branch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2.18877rem 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative; }
  @media (min-width: 960px) {
    .FlowChart-branch {
      max-width: 16.77722rem;
      padding: 2.18877rem 0 0.731rem; } }
  .FlowChart-branch::before, .FlowChart-branch::after {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
    left: 50%;
    margin-left: -1px; }
    @media (min-width: 960px) {
      .FlowChart-branch::before, .FlowChart-branch::after {
        height: 100px; } }
  .FlowChart-branch::before {
    bottom: 100%; }
  .FlowChart-branch::after {
    top: 100%;
    display: none; }
    @media (min-width: 960px) {
      .FlowChart-branch::after {
        display: block; } }

@media (min-width: 960px) {
  .FlowChart-branch--left {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); } }

.FlowChart-branch--right::after {
  display: block;
  margin-top: -30px; }
  @media (min-width: 960px) {
    .FlowChart-branch--right::after {
      margin-top: 0; } }

@media (min-width: 960px) {
  .FlowChart-branch--right {
    -webkit-transform: translateX(50%);
            transform: translateX(50%); } }

@media (min-width: 960px) {
  .FlowChart-branch--center::before, .FlowChart-branch--center::after {
    height: 200px; } }

.FlowChart-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 9px solid rgba(255, 255, 255, 0.4);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent; }

.FlowChart-arrow--bottom {
  top: 100%; }
  .FlowChart-branch--center .FlowChart-arrow--bottom {
    display: none; }
    @media (min-width: 960px) {
      .FlowChart-branch--center .FlowChart-arrow--bottom {
        display: block;
        margin-top: 200px; } }
  @media (min-width: 960px) {
    .FlowChart-branch--right .FlowChart-arrow--bottom {
      display: none; } }

/* ------------------------------------ *\
    #RACE SUMMARY
\* ------------------------------------ */
.RaceSummary {
  display: none;
  margin-top: 2.99419rem;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease; }
  .RaceSummary.is-shown {
    opacity: 1; }
  .RaceSummary.is-active {
    display: block; }

.RaceSummary-content {
  position: relative;
  max-width: 490px;
  margin: 0 auto;
  z-index: 1; }
  @media (min-width: 960px) {
    .RaceSummary-content {
      max-width: 450px;
      margin: 0; } }
  @media (min-width: 1280px) {
    .RaceSummary-content {
      max-width: 630px; } }

.RaceSummary-headingImage {
  margin-bottom: 1.16961rem; }
  @media (min-width: 960px) {
    .RaceSummary-headingImage {
      display: none; } }

.RaceSummary-heading {
  font-size: 1.16961rem;
  color: white; }

.RaceSummary-description,
.RaceSummary-listItem,
.RaceSummary-listHeading,
.RaceSummary-unitDesc {
  color: #ffeecc; }

.RaceSummary-unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1.36798rem 0; }
  .RaceSummary-unit:last-child {
    margin-bottom: 0; }

.RaceSummary-unitBlock {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }
  .RaceSummary-unitBlock > *:first-child {
    margin-top: 0; }
  .RaceSummary-unitBlock > *:last-child {
    margin-bottom: 0; }
  .RaceSummary-unitBlock:last-child {
    -ms-flex-negative: 1;
        flex-shrink: 1;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding-left: 0.53437rem; }

.RaceSummary-unitImage {
  width: 80px;
  height: 80px;
  background-image: url(https://static.starcraft2.com/qa/images/img-race-unit-sprite.71bc1df0e2d581d4274b78a8ab9015f5.png);
  background-repeat: no-repeat; }
  .RaceSummary-unitImage.RaceSummary-unitImage--1 {
    background-position: 0 -0px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--2 {
    background-position: 0 -80px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--3 {
    background-position: 0 -160px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--4 {
    background-position: -80px -0px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--5 {
    background-position: -80px -80px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--6 {
    background-position: -80px -160px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--7 {
    background-position: -160px -0px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--8 {
    background-position: -160px -80px; }
  .RaceSummary-unitImage.RaceSummary-unitImage--9 {
    background-position: -160px -160px; }

.RaceSummary-bg {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: #000; }
  @media (min-width: 960px) {
    .RaceSummary-bg {
      display: block; } }
  @media (min-width: 960px) {
    .RaceSummary-bg.RaceSummary-bg--terran {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--terran-1600.8a8741c414927b17b264ca775feb7101.jpg); } }
  @media (min-width: 1600px) {
    .RaceSummary-bg.RaceSummary-bg--terran {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--terran-2400.e44ac58c068025632f8778f91a068ecf.jpg); } }
  .zh-tw .RaceSummary-bg.RaceSummary-bg--terran {
    -webkit-transform: translateY(120px);
            transform: translateY(120px); }
  @media (min-width: 960px) {
    .RaceSummary-bg.RaceSummary-bg--zerg {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--zerg-1600.1be9b285c1246b90c8ed68a57ab4b8dd.jpg); } }
  @media (min-width: 1600px) {
    .RaceSummary-bg.RaceSummary-bg--zerg {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--zerg-2400.3af059bb13516b7715b1c79f061e3439.jpg); } }
  @media (min-width: 960px) {
    .RaceSummary-bg.RaceSummary-bg--protoss {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--protoss-1600.3144d2d4f120bef0ec5a86064af442f5.jpg); } }
  @media (min-width: 1600px) {
    .RaceSummary-bg.RaceSummary-bg--protoss {
      background-image: url(https://static.starcraft2.com/qa/images/bg-race--protoss-2400.6fe2c88e711c2696b7f5f85f3b8440da.jpg); } }

.RaceSummary-unitTitle,
.RaceSummary-unitDesc {
  margin: 0.11154rem 0; }

.RaceSummary-unitDesc {
  font-size: 0.85499rem; }

/* ------------------------------------ *\
    #MEDIA OVERRIDES for Edge/IE
\* ------------------------------------ */
button.btn.btn-simple.WallpaperSelect {
  top: -2px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

@media (min-width: 640px) and (max-width: 1279px) {
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 5; }
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 9; }
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 5; }
  .Backdrop--videos .TileGrid--secondary .TileGrid-item:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 9; } }

@media (min-width: 640px) {
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 4; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 10; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(10) {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(11) {
    -ms-grid-row: 4;
    -ms-grid-column: 4; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(12) {
    -ms-grid-row: 4;
    -ms-grid-column: 7; }
  .Backdrop--screenshots .TileGrid--tertiary .TileGrid-item:nth-child(13) {
    -ms-grid-row: 4;
    -ms-grid-column: 10; } }

@media (min-width: 640px) {
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 9; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 9; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 9; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(10) {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(11) {
    -ms-grid-row: 4;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(12) {
    -ms-grid-row: 4;
    -ms-grid-column: 9; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(13) {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(14) {
    -ms-grid-row: 4;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(15) {
    -ms-grid-row: 4;
    -ms-grid-column: 9; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(16) {
    -ms-grid-row: 5;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(17) {
    -ms-grid-row: 5;
    -ms-grid-column: 5; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(18) {
    -ms-grid-row: 5;
    -ms-grid-column: 9; } }

@media (min-width: 1024px) {
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(1), .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(2) {
    -ms-grid-column-span: 6; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item {
    -ms-grid-column-span: 3; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 7; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 4; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 7; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 10; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 4; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 7; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(10) {
    -ms-grid-row: 3;
    -ms-grid-column: 10; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(11) {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(12) {
    -ms-grid-row: 4;
    -ms-grid-column: 4; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(13) {
    -ms-grid-row: 4;
    -ms-grid-column: 7; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(14) {
    -ms-grid-row: 4;
    -ms-grid-column: 10; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(15) {
    -ms-grid-row: 5;
    -ms-grid-column: 1; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(16) {
    -ms-grid-row: 5;
    -ms-grid-column: 4; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(17) {
    -ms-grid-row: 5;
    -ms-grid-column: 7; }
  .Backdrop--comics .TileGrid--secondary .TileGrid-item:nth-child(18) {
    -ms-grid-row: 5;
    -ms-grid-column: 10; } }

@media (min-width: 640px) {
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 5; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 9; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 5; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 9; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 5; }
  .Backdrop--wallpapers .TileGrid--3col .TileGrid-item:nth-child(9) {
    -ms-grid-row: 3;
    -ms-grid-column: 9; } }

/* ------------------------------------ *\
    #BLIZZARD NAVBAR OVERRIDES
\* ------------------------------------ */
.Navbar.is-compact .Navbar-mobile {
  background: rgba(20, 36, 51, 0.8) -webkit-gradient(linear, left bottom, left top, from(rgba(20, 61, 102, 0.2)), color-stop(50%, rgba(20, 61, 102, 0)));
  background: rgba(20, 36, 51, 0.8) linear-gradient(0deg, rgba(20, 61, 102, 0.2), rgba(20, 61, 102, 0) 50%);
  border-bottom: 2px solid #22476b;
  -webkit-box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2);
          box-shadow: inset 0 0 20px rgba(102, 179, 255, 0.2);
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0; }

.Navbar.is-compact.is-custom-logo .Navbar-mobile .Navbar-customLogo img {
  height: 38px;
  margin-top: 5px; }

.Navbar.is-compact .Navbar-siteMenu .Navbar-modalContent {
  background: #0a1f33;
  -webkit-box-shadow: inset 0 0 24px rgba(61, 107, 153, 0.4);
          box-shadow: inset 0 0 24px rgba(61, 107, 153, 0.4); }

/* ------------------------------------ *\
    #BLIZZARD NAVBAR FOOTER OVERRIDES
\* ------------------------------------ */
.NavbarFooter {
  background: #000;
  margin-top: 0;
  padding-top: 2.18877rem; }

.NavbarFooter-additionalLegalEsrb {
  max-width: 100%;
  width: inherit; }

/* ------------------------------------ *\
    #FANCYBOX OVERRIDES
\* ------------------------------------ */
.fancybox-container {
  margin: 0; }

.fancybox-slide--video .fancybox-content,
.fancybox-image-wrap {
  position: relative;
  max-height: 90%;
  max-width: 90%; }
  .fancybox-slide--video .fancybox-content::before,
  .fancybox-image-wrap::before {
    display: block;
    content: '';
    width: 100%;
    padding-top: 56.25%; }
  .fancybox-slide--video .fancybox-content > *:not(button):not(a),
  .fancybox-image-wrap > *:not(button):not(a) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  @media (max-width: 640px) {
    .fancybox-slide--video .fancybox-content,
    .fancybox-image-wrap {
      width: 100%;
      max-width: 100%; } }
  .fancybox-slide--video .fancybox-content > .btn-close,
  .fancybox-image-wrap > .btn-close {
    position: absolute;
    z-index: 2;
    top: -1.6rem;
    right: 0.85499rem;
    cursor: pointer; }
    @media (min-width: 640px) {
      .fancybox-slide--video .fancybox-content > .btn-close,
      .fancybox-image-wrap > .btn-close {
        top: -1.36798rem;
        right: -1.36798rem; } }

.fancybox-caption {
  font-family: "Eurostile Extd", "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  border: 0; }

.fancybox-button::after {
  display: none; }

.fancybox-button.ArrowLink--right {
  -webkit-transform: scale(1);
          transform: scale(1); }
  .fancybox-button.ArrowLink--right:hover, .fancybox-button.ArrowLink--right:active {
    -webkit-transform: scale(1);
            transform: scale(1); }

.fancybox-button.ArrowLink--left {
  -webkit-transform: scale(-1);
          transform: scale(-1); }
  .fancybox-button.ArrowLink--left:hover, .fancybox-button.ArrowLink--left:active {
    -webkit-transform: scale(-1);
            transform: scale(-1); }

/* ------------------------------------ *\
    #STYLEGUIDE OVERRIDES
\* ------------------------------------ */
/**
 * NOTE: This should not be used to override base styles. Only for very applicatoin specific implmentations.
 * All other changes should be made in the styleguide repo.
 */
.blog_card-link,
.TileGrid-item {
  opacity: 1;
  -webkit-transition: opacity 500ms, color 0.2s, border-bottom 0.2s;
  transition: opacity 500ms, color 0.2s, border-bottom 0.2s; }
  .blog_card-link.is-notDisplayed,
  .TileGrid-item.is-notDisplayed {
    display: none; }
  .blog_card-link.is-invisible,
  .TileGrid-item.is-invisible {
    opacity: 0; }

.blog_card-text span,
.PromoPanel-desc span,
.PromoIntro-text span {
  display: block; }

.Article .btn {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto; }

.Article .pull-left {
  float: left !important; }

.Article .pull-right {
  float: right !important; }

.Article .center-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 960px) {
  .ScrollableSection > * {
    padding: 0 0.85499rem; } }
  @media (max-width: 960px) and (min-width: 640px) {
    .ScrollableSection > * {
      padding: 0 1.16961rem; } }
  @media (max-width: 960px) and (min-width: 960px) {
    .ScrollableSection > * {
      padding: 0 2.99419rem; } }

.ScrollableSection .ps__rail-x {
  margin: 0 0.85499rem; }
  @media (min-width: 640px) {
    .ScrollableSection .ps__rail-x {
      margin: 0 1.16961rem; } }
  @media (min-width: 960px) {
    .ScrollableSection .ps__rail-x {
      margin: 0 2.99419rem; } }

@media (min-width: 960px) {
  .ScrollableSection-inner--compactCards {
    padding: 0 0.85499rem; } }

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto; }
  @media (min-width: 960px) {
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
      -webkit-hyphens: manual;
          -ms-hyphens: manual;
              hyphens: manual; } }

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

.TileGrid-item-center {
  grid-column-start: 4;
  grid-column-end: 10; }

.Subscribe .Tile {
  box-shadow: none;
  -webkit-box-shadow: none; }
  .Subscribe .Tile:before {
    padding-top: 41.70528%; }
  .Subscribe .Tile::after {
    box-shadow: none;
    -webkit-box-shadow: none; }

.Subscribe .TileGrid-inner {
  grid-column-gap: 20px; }

@media (min-width: 1280px) {
  .anniversary-news .TileGrid-item:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 4;
    grid-column: span 4; } }

@media (min-width: 1280px) {
  .anniversary-news .TileGrid-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 5;
    -ms-grid-column-span: 4;
    grid-column: span 4; } }

@media (min-width: 1280px) {
  .anniversary-news .TileGrid-item:nth-child(5) {
    -ms-grid-row: 2;
    -ms-grid-column: 8;
    -ms-grid-column-span: 4;
    grid-column: span 4; } }

@media (min-width: 1280px) {
  .anniversary-news .TileGrid-item:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 11;
    -ms-grid-column-span: 4;
    grid-column: span 4; } }

.stretch-title {
  max-width: none; }

.SectionRewards .TileGridWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: -30px; }
  @media (min-width: 640px) {
    .SectionRewards .TileGridWrapper {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; } }
  @media (min-width: 1600px) {
    .SectionRewards .TileGridWrapper {
      margin-left: -74px; } }

.SectionRewards .TileGrid {
  margin: 0 0 30px 30px;
  width: calc(100% - 30px); }
  @media (min-width: 1600px) {
    .SectionRewards .TileGrid {
      margin: 0 0 74px 74px;
      width: calc(100% - 74px); } }

.SectionRewards .TileGrid.anniversary-rewards-card-one {
  margin: 0 0 30px 30px; }
  @media (min-width: 640px) {
    .SectionRewards .TileGrid.anniversary-rewards-card-one {
      width: calc(50% - 30px); } }
  @media (min-width: 1600px) {
    .SectionRewards .TileGrid.anniversary-rewards-card-one {
      margin: 0 0 74px 74px;
      width: calc(33.333% - 74px); } }

.Section--sc20:after {
  display: none; }

.Section.Section--sc20 {
  background-image: url(https://static.starcraft2.com/qa/images/header-keyart-EN-960.6d9bd32518446b292654987bede09adc.jpg);
  background-color: #001122;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 420px;
  padding-bottom: 120px; }
  @media (min-width: 960px) {
    .Section.Section--sc20 {
      background-size: cover;
      background-image: url(https://static.starcraft2.com/qa/images/header-keyart-EN-1600.5c0d8f3bfd37f060605ed27e5c5c2bca.jpg);
      padding: 4.79071rem 0; } }
  @media (min-width: 1600px) {
    .Section.Section--sc20 {
      background-image: url(https://static.starcraft2.com/qa/images/header-keyart-EN-2400.58497b98f108fbd3f01f474acbbccb29.jpg); } }

.Section.Section--sc20[country="TW"] {
  background-image: url(https://static.starcraft2.com/qa/images/header-keyart-TW-960.acf2546880c79b8a51840c729b60746d.jpg); }
  @media (min-width: 960px) {
    .Section.Section--sc20[country="TW"] {
      background-image: url(https://static.starcraft2.com/qa/images/header-keyart-TW-1600.83736f2ba33a2947e75949e85d919238.jpg); } }
  @media (min-width: 1600px) {
    .Section.Section--sc20[country="TW"] {
      background-image: url(https://static.starcraft2.com/qa/images/header-keyart-TW-2400.cc6ed87fc8088155532c4f78244ff25f.jpg); } }

.Section.Section--sc20 {
  position: relative; }
  @media (min-width: 960px) {
    .Section.Section--sc20:after {
      content: '';
      display: block;
      position: static;
      height: 0;
      max-width: none;
      background: transparent;
      padding-top: 59.375%; } }
  @media (min-width: 1600px) {
    .Section.Section--sc20:after {
      padding-top: 42.625%; } }

.Backdrop--header-anniversary {
  overflow: hidden; }
  @media (min-width: 960px) {
    .Backdrop--header-anniversary {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 4.79071rem 0; } }
  .Backdrop--header-anniversary::after {
    background-color: transparent; }

.Backdrop--header-anniversary .headerImgWrapper {
  max-width: 220px;
  margin: 0 auto 30px; }

.Backdrop--header-anniversary .PromoIntro {
  width: 100%;
  max-width: 600px;
  margin-top: 0; }
  @media (min-width: 1600px) {
    .Backdrop--header-anniversary .PromoIntro {
      max-width: 800px; } }

@media (min-width: 960px) {
  .Backdrop--header-anniversary .Section-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%); } }

@media (min-width: 1600px) {
  .Backdrop--header-anniversary .Section-container {
    top: 43%; } }

.Backdrop--header-anniversary .ActionBox {
  padding: 0; }

.Backdrop--header-anniversary .PromoIntro-heading {
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.05em; }
  .Backdrop--header-anniversary .PromoIntro-heading .PromoIntro-small {
    font-size: 15px;
    letter-spacing: 0.1em; }
  @media (min-width: 1600px) {
    .Backdrop--header-anniversary .PromoIntro-heading {
      font-size: 39px; }
      .Backdrop--header-anniversary .PromoIntro-heading .PromoIntro-small {
        font-size: 21px; } }

.Backdrop--subscribe {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 1; }

.Backdrop--subscribe .subscribe-content-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 30px;
  padding-top: 30px; }
  @media (min-width: 1600px) {
    .Backdrop--subscribe .subscribe-content-flex {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .Backdrop--subscribe .subscribe-content-flex > div {
        width: 33.333%;
        padding-right: 20px; }
      .Backdrop--subscribe .subscribe-content-flex .Tile-link:first-child {
        padding-right: 60px; } }

.Backdrop--subscribe .PromoIntro {
  margin: 0 auto 100px; }
  @media (min-width: 1600px) {
    .Backdrop--subscribe .PromoIntro {
      text-align: left; } }

.Backdrop--subscribe .PromoIntro-heading {
  display: block;
  font-size: 21px;
  margin-bottom: 10px;
  letter-spacing: 0.025em; }

.Backdrop--subscribe .PromoIntro-small {
  display: block;
  font-size: 15px;
  margin-top: 10px; }

.Backdrop--subscribe .PromoIntro-text {
  font-size: 18px; }

@media (min-width: 1600px) {
  .Backdrop--subscribe .PromoIntro-heading {
    font-size: 25px; }
  .Backdrop--subscribe .PromoIntro-small {
    font-size: 18px; }
  .Backdrop--subscribe .PromoIntro-text {
    font-size: 23px; } }

.Backdrop--subscribe .btn-group .btn {
  font-weight: 400;
  margin: calc(1em + 10px) 10px 10px;
  font-size: 17px;
  font-family: Eurostile, sans-serif;
  letter-spacing: 0.1em;
  padding-left: 1.5em;
  padding-right: 1.5em; }

.Backdrop--subscribe {
  background-color: #010d1e; }
  .Backdrop--subscribe .Section-container {
    position: relative;
    z-index: 1; }
  .Backdrop--subscribe .top-flare,
  .Backdrop--subscribe .bottom-flare {
    pointer-events: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    @media (min-width: 1600px) {
      .Backdrop--subscribe .top-flare:after, .Backdrop--subscribe .top-flare:before,
      .Backdrop--subscribe .bottom-flare:after,
      .Backdrop--subscribe .bottom-flare:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 300%;
        background-repeat: repeat-x; }
      .Backdrop--subscribe .top-flare:before,
      .Backdrop--subscribe .bottom-flare:before {
        right: 100%; }
      .Backdrop--subscribe .top-flare:after,
      .Backdrop--subscribe .bottom-flare:after {
        left: 100%; } }
  .Backdrop--subscribe .top-flare {
    top: -143px;
    height: 283px;
    width: 100%;
    background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-960-top.574bd96e1b5ffbfe17154c1ea9500298.png);
    background-repeat: repeat-x; }
    @media (min-width: 960px) {
      .Backdrop--subscribe .top-flare {
        top: -373px;
        height: 799px;
        width: 1600px;
        background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-1600-top.83b917e4a2f7a69b4dce890b46ab491e.png); } }
    @media (min-width: 1600px) {
      .Backdrop--subscribe .top-flare {
        top: -374px;
        height: 801px;
        width: 2400px;
        background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-2400-top.5c7e68157b3e2ed1564161d36d9357ad.png); }
        .Backdrop--subscribe .top-flare:before, .Backdrop--subscribe .top-flare:after {
          background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-2400-repeat-top.b562f0c858ea4556ec0e898efdb5d59d.png); } }
  .Backdrop--subscribe .bottom-flare {
    bottom: -90px;
    height: 276px;
    width: 960px;
    background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-960-bottom.056f2e310f18daec13129906f1990648.png); }
    @media (min-width: 960px) {
      .Backdrop--subscribe .bottom-flare {
        bottom: -227px;
        height: 648px;
        width: 1600px;
        background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-1600-bottom.3690141ea95a74fc3ebb35ed17f7a1a8.png); } }
    @media (min-width: 1600px) {
      .Backdrop--subscribe .bottom-flare {
        height: 646px;
        bottom: -226px;
        width: 2400px;
        background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-2400-bottom.121742bf09731ef63d73d86d75c88fc8.png); }
        .Backdrop--subscribe .bottom-flare:before, .Backdrop--subscribe .bottom-flare:after {
          background-image: url(https://static.starcraft2.com/qa/images/subscribe-background-2400-repeat-bottom.b2e495aade28a027e5778e99d6ecf208.png); } }
  .Backdrop--subscribe:after {
    display: none; }

.Backdrop--subscribe .videoItem {
  max-width: 290px;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); }
  @media (min-width: 960px) {
    .Backdrop--subscribe .videoItem {
      max-width: 460px;
      -webkit-transform: translateY(-25%);
              transform: translateY(-25%); } }

.Backdrop--featured-news .top-flare {
  position: absolute;
  left: 50%;
  bottom: 100%;
  -webkit-transform: translate(-50%, 22%);
          transform: translate(-50%, 22%);
  background-image: url(https://static.starcraft2.com/qa/images/news-background-top-960.79c21ce867ebb2f8a935ed7805746389.png);
  background-position: center;
  background-size: contain;
  width: 960px;
  padding-top: 0; }
  @media (min-width: 960px) {
    .Backdrop--featured-news .top-flare {
      width: 1600px;
      background-image: url(https://static.starcraft2.com/qa/images/news-background-top-1600.b19eac931144293f88e8a29675c80ae5.png); } }
  @media (min-width: 1600px) {
    .Backdrop--featured-news .top-flare {
      width: 100%;
      background-image: url(https://static.starcraft2.com/qa/images/news-background-top-2400.59d076c998576cc9674a79937d5a83de.png); } }
  .Backdrop--featured-news .top-flare:before {
    content: '';
    display: block;
    padding-top: 70.9375%; }
    @media (min-width: 960px) {
      .Backdrop--featured-news .top-flare:before {
        padding-top: 90.5%; } }
    @media (min-width: 1600px) {
      .Backdrop--featured-news .top-flare:before {
        padding-top: 71.08333%; } }

.Backdrop--featured-news .btn {
  margin: 10px;
  width: auto; }

.Backdrop--featured-news {
  background-color: #030404;
  background-image: url(https://static.starcraft2.com/qa/images/news-background-bottom-960.0831adc5f8528abab0ee7844b73273f9.png);
  background-position: center bottom;
  padding-bottom: 320px; }
  .Backdrop--featured-news:after {
    display: none; }
  @media (min-width: 960px) {
    .Backdrop--featured-news {
      background-image: url(https://static.starcraft2.com/qa/images/news-background-bottom-1600.16f8f8dacd99dd810926bbee0ccf43d0.png);
      padding-bottom: 640px; } }
  @media (min-width: 1600px) {
    .Backdrop--featured-news {
      background-image: url(https://static.starcraft2.com/qa/images/news-background-bottom-2400.e869c16bf57af51ee424c7470f18ce40.png);
      padding-bottom: 800px; } }

.Backdrop--featured-news .Section-container {
  position: relative; }

.Backdrop--featured-news {
  background-position: center bottom; }
  .Backdrop--featured-news::after {
    background-color: transparent; }
  .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 9; }
  .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 9; }
  .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 5; }
  .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 9; }
  @media (min-width: 960px) and (max-width: 1280px) {
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(1) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 1;
      grid-row: 1;
      -ms-grid-column: 1; }
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(2) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 1;
      grid-row: 1;
      -ms-grid-column: 7; }
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(3) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 2;
      grid-row: 2;
      -ms-grid-column: 7; }
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(4) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 2;
      grid-row: 2;
      -ms-grid-column: 1; }
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(5) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 7; }
    .Backdrop--featured-news .TileGrid--primary .TileGrid-item:nth-child(6) {
      -ms-grid-column-span: 6;
      grid-column: span 6;
      -ms-grid-row: 3;
      grid-row: 3;
      -ms-grid-column: 1; } }

.AnniversaryCTA {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  position: relative;
  padding-top: 90px;
  padding-bottom: 90px; }
  @media (min-width: 960px) {
    .AnniversaryCTA {
      margin-top: -20px; } }
  @media (min-width: 1600px) {
    .AnniversaryCTA {
      margin-top: -100px;
      padding-top: 190px;
      padding-bottom: 100px; } }

.AnniversaryCTA {
  background-image: url(https://static.starcraft2.com/qa/images/footer-background-960.8a50576652ef7eb1d83f9818ee54a253.png);
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-size: auto 100%; }
  @media (min-width: 960px) {
    .AnniversaryCTA {
      background-image: url(https://static.starcraft2.com/qa/images/footer-background-1600.1fbe06fde78f022ee1d673d946cafb7b.png); } }
  @media (min-width: 1600px) {
    .AnniversaryCTA {
      background-image: url(https://static.starcraft2.com/qa/images/footer-background-2400.d02cb29fb75babc9e73ad6e6439e2e4b.png); } }

.AnniversaryCTA .PromoIntro.stretch-title {
  margin-bottom: 60px;
  max-width: 600px; }
  @media (min-width: 1600px) {
    .AnniversaryCTA .PromoIntro.stretch-title {
      max-width: none; } }

.AnniversaryCTA .PromoIntro-small {
  font-size: 15px;
  margin-bottom: 0.5em; }

.AnniversaryCTA .PromoIntro-heading {
  font-size: 21px; }

.AnniversaryCTA .PromoIntro-text {
  margin-top: 0; }

@media (min-width: 1600px) {
  .AnniversaryCTA .PromoIntro-small {
    font-size: 18px; }
  .AnniversaryCTA .PromoIntro-heading {
    font-size: 33px; } }

.AnniversaryCTA .PromoIntro img {
  max-width: 275px; }
  @media (min-width: 1600px) {
    .AnniversaryCTA .PromoIntro img {
      max-width: 400px; } }

.anniversary-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%; }
  .anniversary-cta .flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  @media (min-width: 1600px) {
    .anniversary-cta {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row; }
      .anniversary-cta .flex-container {
        width: 50%; } }

.anniversary-cta .btn {
  width: auto;
  margin: calc(1.5em + 10px) 10px 10px; }

.anniversary-cta .flex-container {
  position: relative;
  padding: 0;
  margin: 0; }
  .anniversary-cta .flex-container .PromoIntro {
    margin: 0 auto;
    position: relative; }

.anniversary-cta .flex-container:first-child {
  padding-bottom: 60px;
  margin-bottom: 60px; }
  .anniversary-cta .flex-container:first-child:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 180px;
    border-bottom: 2px solid #3a6187;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
    @media (min-width: 1600px) {
      .anniversary-cta .flex-container:first-child:after {
        left: 100%;
        width: 0;
        height: 66.667%;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        border: 0;
        border-right: 2px solid #3a6187; } }


/*# sourceMappingURL=main.bbd6feb695c076706674.css.map*/