@font-face {
  font-family: "Brutal";
  font-display: swap;
  font-weight: 300;
  src: local("Brutal Light"), local("Brutal-Light"),
    url(a724d1efe0d15b8e9f08ad0288e177fd.woff2) format("woff2"),
    url(bf25baf22b53213083ab4a4a3f6f1cdc.woff) format("woff");
}

@font-face {
  font-family: "Brutal";
  font-display: swap;
  font-weight: 400;
  src: local("Brutal Regular"), local("Brutal-Regular"),
    url(4555758a9a1a19e87a66eceaf00b1b23.woff2) format("woff2"),
    url(c36d188d8cef7e9bc736d4cdebac8d9b.woff) format("woff");
}

@font-face {
  font-family: "Brutal";
  font-display: swap;
  font-weight: 500;
  src: local("Brutal Medium"), local("Brutal-Medium"),
    url(5f601a4caa6f187bd35621b49fc8e2bc.woff2) format("woff2"),
    url(6a0ccd2aaeeedfaf1f99e3c667afc67e.woff) format("woff");
}

@font-face {
  font-family: "Brutal";
  font-display: swap;
  font-weight: 700;
  src: local("Brutal Bold"), local("Brutal-Bold"),
    url(0dfc6422538b3d86ce582109b873e084.woff2) format("woff2"),
    url(7d12e2ec7b3852a53f4efa5095dc2a8f.woff) format("woff");
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

b,
strong {
  font-weight: 700;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: Brutal, sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.43;
}

body::backdrop {
  background-color: #0b0b0b;
}

@media print {
  body {
    background-color: #fff;
  }
}

@charset "UTF-8";

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/

/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/

:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}

/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */

/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/

/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/

/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/

[dir=ltr] .fadeIn {
 -webkit-animation: global-fadeIn_9d9c7d54 300ms ease-in-out;
 animation: global-fadeIn_9d9c7d54 300ms ease-in-out;
}

[dir=rtl] .fadeIn {
  -webkit-animation: global-fadeIn_9d9c7d54 300ms ease-in-out;
          animation: global-fadeIn_9d9c7d54 300ms ease-in-out;
}

@-webkit-keyframes global-fadeIn_9d9c7d54 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes global-fadeIn_9d9c7d54 {
  from { opacity: 0; }
  to { opacity: 1; }
}

[dir=ltr] .fadeInAndOut {
 -webkit-animation: global-fadeInAndOut_d3d01577 2s ease-in-out 0s infinite;
 animation: global-fadeInAndOut_d3d01577 2s ease-in-out 0s infinite;
}

[dir=rtl] .fadeInAndOut {
  -webkit-animation: global-fadeInAndOut_d3d01577 2s ease-in-out 0s infinite;
          animation: global-fadeInAndOut_d3d01577 2s ease-in-out 0s infinite;
}

@-webkit-keyframes global-fadeInAndOut_d3d01577 {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

@keyframes global-fadeInAndOut_d3d01577 {
  0% { opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

[dir=ltr] .moveBar {
 -webkit-animation:  global-moveBar-ltr_8e9a1964 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
 animation:  global-moveBar-ltr_8e9a1964 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

[dir=rtl] .moveBar {
  -webkit-animation:  global-moveBar-rtl_2a34740a 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
          animation:  global-moveBar-rtl_2a34740a 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@-webkit-keyframes global-moveBar-ltr_8e9a1964 {
  0% {
    width: 0;
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@-webkit-keyframes global-moveBar-rtl_2a34740a {
  0% {
    width: 0;
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
  }

  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes global-moveBar-ltr_8e9a1964 {
  0% {
    width: 0;
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes global-moveBar-rtl_2a34740a {
  0% {
    width: 0;
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
  }

  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

[dir=ltr] .slideInFromRight {
 -webkit-animation:  global-slideInFromRight-ltr_861bc21c 300ms ease-in-out;
 animation:  global-slideInFromRight-ltr_861bc21c 300ms ease-in-out;
}

[dir=rtl] .slideInFromRight {
  -webkit-animation:  global-slideInFromRight-rtl_6bc7d292 300ms ease-in-out;
          animation:  global-slideInFromRight-rtl_6bc7d292 300ms ease-in-out;
}

@-webkit-keyframes global-slideInFromRight-ltr_861bc21c {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes global-slideInFromRight-rtl_6bc7d292 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes global-slideInFromRight-ltr_861bc21c {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes global-slideInFromRight-rtl_6bc7d292 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

[dir=ltr] .slideInFromLeft {
 -webkit-animation:  global-slideInFromLeft-ltr_027d70f8 300ms ease-in-out;
 animation:  global-slideInFromLeft-ltr_027d70f8 300ms ease-in-out;
}

[dir=rtl] .slideInFromLeft {
  -webkit-animation:  global-slideInFromLeft-rtl_ac331f4a 300ms ease-in-out;
          animation:  global-slideInFromLeft-rtl_ac331f4a 300ms ease-in-out;
}

@-webkit-keyframes global-slideInFromLeft-ltr_027d70f8 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes global-slideInFromLeft-rtl_ac331f4a {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes global-slideInFromLeft-ltr_027d70f8 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes global-slideInFromLeft-rtl_ac331f4a {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.heroSizing {
  height: 65vh;
  min-height: 18.75rem;
  max-height: 37.5rem;
}

@media (min-width: 1024px) {

[dir] .isLauncher .launcherSpacingTop {
    margin-top: 1.13rem
}
  }

[dir] .containerSpacingTop {
  margin-top: 3.19rem;
}

[dir] .isLauncher .containerSpacingTop {
    margin-top: 1.13rem;
  }

@media (min-width: 1280px) {

[dir] .containerSpacingTop {
    margin-top: 3.75rem;
}

    [dir] .isLauncher .containerSpacingTop {
      margin-top: 1.13rem;
    }
  }

[dir] .containerSpacingPaddingTop {
  padding-top: 3.19rem;
}

[dir] .isLauncher .containerSpacingPaddingTop {
    padding-top: 1.13rem;
  }

@media (min-width: 1280px) {

[dir] .containerSpacingPaddingTop {
    padding-top: 3.75rem;
}

    [dir] .isLauncher .containerSpacingPaddingTop {
      padding-top: 1.13rem;
    }
  }

[dir] .containerSpacingBottom {
  margin-bottom: 3.19rem
}

@media (min-width: 1280px) {

[dir] .containerSpacingBottom {
    margin-bottom: 3.75rem
}
  }

[dir] .containerSpacingPaddingBottom {
  padding-bottom: 3.19rem
}

@media (min-width: 1280px) {

[dir] .containerSpacingPaddingBottom {
    padding-bottom: 3.75rem
}
  }

.contentGridPosition {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
  grid-column: 1 / span 25;
  width: 100vw
}

@media (min-width: 768px) {

.contentGridPosition {
    -ms-grid-column: 1;
    -ms-grid-column-span: 48;
    grid-column: 1 / span 48
}
  }

@media (min-width: 1024px) {

.contentGridPosition {
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 64;
    grid-column: 1 / span 64
}
  }

@media (min-width: 1280px) {

.contentGridPosition {
    -ms-grid-column: 1;
    -ms-grid-column-span: 64;
    grid-column: 1 / span 64
}
  }

@media (min-width: 1440px) {

.contentGridPosition {
    -ms-grid-column: 1;
    -ms-grid-column-span: 72;
    grid-column: 1 / span 72
}
  }

.isLauncher .contentGridPosition {
    width: 100%
  }

@media (min-width: 1024px) {

  .isLauncher .contentGridPosition {
      -ms-grid-row: 2;
      -ms-grid-row-span: 2;
      grid-row: 2 / 4;
      grid-column: calc(10 + 1) / -1
  }
    }

@media (min-width: 1280px) {

  .isLauncher .contentGridPosition {
      grid-column: calc(12 + 1) / span calc(64 - 12)
  }
    }

@media (min-width: 1440px) {

  .isLauncher .contentGridPosition {
      grid-column: calc(12 + 1) / span calc(72 - 12)
  }
    }

[dir] .storeSpacingTop {
  padding-top: calc(3.25rem + 5rem)
}

@media (min-width: 768px) {

[dir] .storeSpacingTop {
    padding-top: calc(3.25rem + 5rem)
}
  }

@media (min-width: 1024px) {

[dir] .storeSpacingTop {
    padding-top: calc(3.25rem + 6.25rem)
}
  }

[dir] .isLauncher .storeSpacingTop {
    padding-top: 5rem
  }

@media (min-width: 1024px) {

  [dir] .isLauncher .storeSpacingTop {
      padding-top: 5rem
  }
    }

@media (min-width: 1280px) {

  [dir] .isLauncher .storeSpacingTop {
      padding-top: 6.88rem
  }
    }

.gridContentFullBleed {
  width: 100vw
}

[dir=ltr] .gridContentFullBleed {
 margin-left: calc(-1 * (100vw / 25 * 2));
 margin-right: 0
}

[dir=rtl] .gridContentFullBleed {
  margin-right: calc(-1 * (100vw / 25 * 2));
  margin-left: 0
}

@media (min-width: 768px) {

[dir=ltr] .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 48 * 2))
}

[dir=rtl] .gridContentFullBleed {
    margin-right: calc(-1 * (100vw / 48 * 2))
}
  }

@media (min-width: 1024px) {

[dir=ltr] .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 64 * 8))
}

[dir=rtl] .gridContentFullBleed {
    margin-right: calc(-1 * (100vw / 64 * 8))
}
  }

@media (min-width: 1280px) {

[dir=ltr] .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 64 * 8))
}

[dir=rtl] .gridContentFullBleed {
    margin-right: calc(-1 * (100vw / 64 * 8))
}
  }

@media (min-width: 1440px) {

[dir=ltr] .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 72 * 9))
}

[dir=rtl] .gridContentFullBleed {
    margin-right: calc(-1 * (100vw / 72 * 9))
}
  }

@media (min-width: 1024px) {

  .isLauncher .gridContentFullBleed {
      width: calc((100vw / 64) * (64 - 10))
  }

  [dir=ltr] .isLauncher .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 64 * 2))
  }

  [dir=rtl] .isLauncher .gridContentFullBleed {
      margin-right: calc(-1 * (100vw / 64 * 2))
  }
    }

@media (min-width: 1280px) {

  .isLauncher .gridContentFullBleed {
      width: calc((100vw / 64) * (64 - 12))
  }

  [dir=ltr] .isLauncher .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 64 * 2))
  }

  [dir=rtl] .isLauncher .gridContentFullBleed {
      margin-right: calc(-1 * (100vw / 64 * 2))
  }
    }

@media (min-width: 1440px) {

  .isLauncher .gridContentFullBleed {
      width: calc((100vw / 72) * (72 - 12))
  }

  [dir=ltr] .isLauncher .gridContentFullBleed {
  margin-left: calc(-1 * (100vw / 72 * 2))
  }

  [dir=rtl] .isLauncher .gridContentFullBleed {
      margin-right: calc(-1 * (100vw / 72 * 2))
  }
    }

.disableVerticalScroll {
  height: 100vh;
  overflow-y: hidden;
}

@media (min-width: 1024px) {

.top-nav-base {
    display: none;
}
  }

.top-nav-base {

  z-index: 11;
}

[dir] .pdp-top-nav-settings {
  margin-top: 3.25rem;
}

[dir] .isLauncher .pdp-top-nav-settings {
    margin-top: 0;
  }

.footer-news-letter-modal #signUpEmail {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

[dir] .footer-news-letter-modal #sign-up-button {
    margin-top: 1.88rem;
  }

[dir=ltr] .isLauncher .launcher-nav-left {
 left: 0
  }

[dir=rtl] .isLauncher .launcher-nav-left {
    right: 0
  }

@media (min-width: 1024px) {
  [dir=ltr] .isLauncher .launcher-nav-left {
  left: 16vw
  }
  [dir=rtl] .isLauncher .launcher-nav-left {
      right: 16vw
  }
    }

@media (min-width: 1280px) {
  [dir=ltr] .isLauncher .launcher-nav-left {
  left: 16vw
  }
  [dir=rtl] .isLauncher .launcher-nav-left {
      right: 16vw
  }
    }

@media (min-width: 1440px) {
  [dir=ltr] .isLauncher .launcher-nav-left {
  left: 16vw
  }
  [dir=rtl] .isLauncher .launcher-nav-left {
      right: 16vw
  }
    }

@media (min-width: 1600px) {
  [dir=ltr] .isLauncher .launcher-nav-left {
  left: 16vw
  }
  [dir=rtl] .isLauncher .launcher-nav-left {
      right: 16vw
  }
    }

/* Storybook specific body styles for storyshots. */

.sb-show-main {
  width: auto;
}

/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src:
    url(18a73ba16dc31d004c98ed8a60a40119.woff2) format('woff2'),
    url(b849ea411a805a95f54cc4601f231d65.woff) format('woff'),
    url(6bdf2f828f7f8f96ac80e900968f37ce.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src:
    url(d79d6e70bdff22e3c1f98b4d2942737a.woff2) format('woff2'),
    url(2805911e23e96e182a1ba8b21dfe8f8e.woff) format('woff'),
    url(238e00f0fa64488177245f36b3eb0638.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  src:
    url(f68c721353520e42240e4c13ee4471f0.woff2) format('woff2'),
    url(479ba86267f5c4d32c519438742be1dd.woff) format('woff'),
    url(097066db6e19d2a951edb2538c2f35db.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src:
    url(4a10414f32f422d022dd87786b99b14a.woff2) format('woff2'),
    url(1d406ca598cb8ea0628f59923d03dea0.woff) format('woff'),
    url(8bf62c468e1d44171babca1710c6ed00.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src:
    url(ad821a457451c4b20b9e89b0554eda29.woff2) format('woff2'),
    url(dd86498a685179624a70c5cd40db9aa2.woff) format('woff'),
    url(b636abf40ba29994f783db5df087d103.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 900;
  src:
    url(00dc82d349772b0353928ee8d41a4b74.woff2) format('woff2'),
    url(0ce46d8b1cd5b5462e4157204d3452bc.woff) format('woff'),
    url(f28252845e55ac606024c07ea5b0297e.otf) format('opentype');
}
/*
 * Noto Sans Thai (Thai) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  src: url(4b0fdf37b4f63be9f4d985a3ca221b85.eot);
  src:
    url(4b0fdf37b4f63be9f4d985a3ca221b85.eot?#iefix) format('embedded-opentype'),
    url(ff960060fff3384f551f2b27456592be.woff2) format('woff2'),
    url(eb544db5f73c9f2dc7048617ce9b442f.woff) format('woff'),
    url(5eb0018995f7296ef85114dc010e2e95.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  src: url(4b0fdf37b4f63be9f4d985a3ca221b85.eot);
  src:
    url(4b0fdf37b4f63be9f4d985a3ca221b85.eot?#iefix) format('embedded-opentype'),
    url(ff960060fff3384f551f2b27456592be.woff2) format('woff2'),
    url(eb544db5f73c9f2dc7048617ce9b442f.woff) format('woff'),
    url(5eb0018995f7296ef85114dc010e2e95.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  src: url(f4058e5c8a8c5f4650f98c64b0910246.eot);
  src:
    url(f4058e5c8a8c5f4650f98c64b0910246.eot?#iefix) format('embedded-opentype'),
    url(a9babbcb069bb8d64f394b7b15eb7387.woff2) format('woff2'),
    url(4b396fc6cccf9e65025275b46ac0024e.woff) format('woff'),
    url(1fd09c79a94d0eb21593c93ea072d03d.ttf) format('truetype');
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Avatar-wrapper_6c2df0f7 {
  display: block;
  position: relative;
}
.Avatar-avatar_099c6cf9 {
  display: block;
  overflow: hidden
}
.Avatar-avatar_099c6cf9 > img {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
.Avatar-pip_65ad65e3 {
  position: absolute;
  top: -0.13rem;
}
[dir=ltr] .Avatar-pip_65ad65e3 {
 right: -0.13rem;
}
[dir=rtl] .Avatar-pip_65ad65e3 {
  left: -0.13rem;
}
.Avatar-crest_a41e1cb8 {
  /* antialiases the clip path better */
  outline: 0.06rem solid rgba(0, 0, 0, 0);
  -webkit-clip-path: polygon(0 7%, 1.5% 3%, 3% 1.5%, 7% 0, 93% 0, 97% 1.5%, 98.5% 3%, 100% 7%, 100% 76%, 99% 79%, 97% 81%, 93% 83%, 53% 99.5%, 51% 100%, 49% 100%, 47% 99.5%, 7% 83%, 3% 81%, 1% 79%, 0 76%);
          clip-path: polygon(0 7%, 1.5% 3%, 3% 1.5%, 7% 0, 93% 0, 97% 1.5%, 98.5% 3%, 100% 7%, 100% 76%, 99% 79%, 97% 81%, 93% 83%, 53% 99.5%, 51% 100%, 49% 100%, 47% 99.5%, 7% 83%, 3% 81%, 1% 79%, 0 76%);
}
.Avatar-round_d2276975 {
  /* prevent corner flickering when parent elements animate */
  -webkit-backface-visibility: hidden; /* IE fix */
}
[dir] .Avatar-round_d2276975 {
  border-radius: 50%;
  border: 0.06rem solid transparent;
}
[dir] .Avatar-square_3432dc6e {
  border-radius: 0.13rem;
}
.Avatar-xxxSmall_abd436fa {
  font-size: 0.31rem;
  width: 0.75rem;
  height: 0.75rem
}
.Avatar-xxxSmall_abd436fa.Avatar-crest_a41e1cb8 {
    height: calc(0.75rem * 1.19);
  }
.Avatar-xxSmall_41763719 {
  font-size: 0.56rem;
  width: 1.25rem;
  height: 1.25rem
}
.Avatar-xxSmall_41763719.Avatar-crest_a41e1cb8 {
    height: calc(1.25rem * 1.19);
  }
.Avatar-xSmall_4c57acda {
  font-size: 0.69rem;
  width: 1.63rem;
  height: 1.63rem
}
.Avatar-xSmall_4c57acda.Avatar-crest_a41e1cb8 {
    height: calc(1.63rem * 1.19);
  }
.Avatar-small_e5dcf75f {
  font-size: 0.88rem;
  width: 2.13rem;
  height: 2.13rem
}
.Avatar-small_e5dcf75f.Avatar-crest_a41e1cb8 {
    height: calc(2.13rem * 1.19);
  }
.Avatar-medium_cbadf952 {
  font-size: 1.13rem;
  width: 2.63rem;
  height: 2.63rem
}
.Avatar-medium_cbadf952.Avatar-crest_a41e1cb8 {
    height: calc(2.63rem * 1.19);
  }
.Avatar-large_88eb5c00 {
  font-size: 1.88rem;
  width: 3.75rem;
  height: 3.75rem
}
.Avatar-large_88eb5c00.Avatar-crest_a41e1cb8 {
    height: calc(3.75rem * 1.19);
  }
.Avatar-xLarge_d16b364d {
  font-size: 2.25rem;
  width: 5rem;
  height: 5rem
}
.Avatar-xLarge_d16b364d.Avatar-crest_a41e1cb8 {
    height: calc(5rem * 1.19);
  }
.Avatar-initial_bcd8efd9 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #f4f4f4;
  font-weight: 500;
  text-transform: uppercase;
  line-height: normal;
}
[dir] .Avatar-initial_bcd8efd9 {
  background: rgba(255, 255, 255, 0.1);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Pip-indicator_6270961b {
  display: block;
  height: 0.38rem;
  width: 0.38rem;
}
[dir] .Pip-indicator_6270961b {
  border-radius: 50%;
}
[dir] .Pip-offline_e72d24e3 {
  background-color: #e63c3c;
}
[dir] .Pip-online_e602c5e7 {
  background-color: #75e000;
}
[dir] .Pip-away_74e96c0f {
  background-color: #e08220;
}
[dir] .Pip-notification_346bdbac {
  background-color: #0078f2;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
:root {
  /* TODO: Replace with new grid variables when they're merged. */
}
[dir] .BannerImage-groupWrapper_19acce75 {
  padding-bottom: 0.94rem
}
[dir] .BannerImage-groupWrapper_19acce75.BannerImage-placeholder_e0b41c07 .BannerImage-placeholderAsset_ebc13c53::after, [dir] .BannerImage-groupWrapper_19acce75.BannerImage-placeholder_e0b41c07 .BannerImage-placeholderContent_e48a43d8 {
    background-color: var(--theme-custom-color-primary);
  }
.BannerImage-groupWrapper_19acce75.BannerImage-placeholder_e0b41c07 .BannerImage-placeholderAsset_ebc13c53::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .BannerImage-groupWrapper_19acce75.BannerImage-placeholder_e0b41c07 .BannerImage-placeholderAsset_ebc13c53::after {
    border-radius: 50%;
  }
.BannerImage-cardsContainer_d9f3f32e {
  list-style-type: none;

  -webkit-align-content: stretch;

      -ms-flex-line-pack: stretch;

          align-content: stretch;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
}
[dir] .BannerImage-cardsContainer_d9f3f32e {
  margin: 0;
  padding: 0;
}
.BannerImage-card_48badde9 {
  -o-transition: background-color 125ms ease-in-out;
  transition: background-color 125ms ease-in-out;
  list-style-type: none;
  overflow: hidden
}
[dir] .BannerImage-card_48badde9 {
  -webkit-transition: background-color 125ms ease-in-out;
  margin: 0;
  padding: 0;

  background-color: transparent;
  margin-bottom: 1rem
}
[dir=ltr] .BannerImage-card_48badde9 {
  margin-left: 1rem
}
[dir=rtl] .BannerImage-card_48badde9 {
  margin-right: 1rem
}
@media (max-width: 767px) {
.BannerImage-card_48badde9 {
    /* 100% total width * (1 / total_elements) - gutter_absolute_space * (1 - 1/elements_per_row) */
    -webkit-flex-basis: calc(50% - calc(1rem / 2) * 0.5);
        -ms-flex-preferred-size: calc(50% - calc(1rem / 2) * 0.5);
            flex-basis: calc(50% - calc(1rem / 2) * 0.5)
}
[dir=ltr] .BannerImage-card_48badde9 {
    margin-left: calc(1rem / 2)
}
[dir=rtl] .BannerImage-card_48badde9 {
    margin-right: calc(1rem / 2)
}

    [dir=ltr] .BannerImage-card_48badde9:nth-child(odd) {
    margin-left: 0;
    }

    [dir=rtl] .BannerImage-card_48badde9:nth-child(odd) {
      margin-right: 0;
    }
  }
@media (min-width: 768px) and (max-width: 1919px) {
.BannerImage-card_48badde9 {
    -webkit-flex-basis: calc(25% - 1rem * 0.75);
        -ms-flex-preferred-size: calc(25% - 1rem * 0.75);
            flex-basis: calc(25% - 1rem * 0.75)
}
[dir] .BannerImage-card_48badde9 {
    margin-bottom: 1rem
}
[dir=ltr] .BannerImage-card_48badde9 {
    margin-left: 1rem
}
[dir=rtl] .BannerImage-card_48badde9 {
    margin-right: 1rem
}

    [dir=ltr] .BannerImage-card_48badde9:nth-child(4n + 1) {
    margin-left: 0;
    }

    [dir=rtl] .BannerImage-card_48badde9:nth-child(4n + 1) {
      margin-right: 0;
    }
  }
@media (min-width: 1024px) {
[dir] .BannerImage-card_48badde9 {
    margin-bottom: 3rem
}
  }
@media (min-width: 1280px) {
[dir] .BannerImage-card_48badde9 {
    margin-bottom: 3.44rem
}
  }
@media (min-width: 1920px) {
.BannerImage-card_48badde9 {
    -webkit-flex-basis: calc(20% - 1rem * 0.8);
        -ms-flex-preferred-size: calc(20% - 1rem * 0.8);
            flex-basis: calc(20% - 1rem * 0.8)
}

    [dir=ltr] .BannerImage-card_48badde9:nth-child(5n + 1) {
    margin-left: 0;
    }

    [dir=rtl] .BannerImage-card_48badde9:nth-child(5n + 1) {
      margin-right: 0;
    }
  }
.BannerImage-placeholderCardImage_72af9d17 {
  position: relative;
}
[dir] .BannerImage-placeholderCardImage_72af9d17 {
  padding-bottom: calc(4 / 3 * 100%);

  padding-top: 0.06rem;
  margin-bottom: 1.19rem;
}
.BannerImage-placeholderCardImage_72af9d17 .BannerImage-inner_c58ad655 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
[dir] .BannerImage-placeholderCardImage_72af9d17 {
    margin-bottom: 1rem
}
  }
.BannerImage-placeholderCopy_209f1ceb {
  display: block;
  height: 0.94rem
}
[dir] .BannerImage-placeholderCopy_209f1ceb {
  margin-bottom: 0.25rem
}
[dir] .BannerImage-placeholderCopy_209f1ceb:not(:nth-child(2n)) {
    margin-bottom: 0.94rem;
  }
.BannerImage-placeholderCopySmall_2eac1893 {
  display: block;
  height: 0.94rem;
}
[dir] .BannerImage-placeholderCopySmall_2eac1893 {
  margin-top: 0.94rem;
}
[dir=ltr] .BannerImage-placeholderCopySmall_2eac1893 {
  margin-right: 65%;
}
[dir=rtl] .BannerImage-placeholderCopySmall_2eac1893 {
  margin-left: 65%;
}
.BannerImage-imageWrapper_dfff3db2 {
  display: none;
  z-index: 0
}
@media (min-width: 768px) {
.BannerImage-imageWrapper_dfff3db2 {
    display: block;
    height: calc(100% + 2.19rem);
    position: absolute;
    top: 0;
    width: 100%
}
[dir=ltr] .BannerImage-imageWrapper_dfff3db2 {
    right: calc(-1 * 2 * (100vw / 48))
}
[dir=rtl] .BannerImage-imageWrapper_dfff3db2 {
    left: calc(-1 * 2 * (100vw / 48))
}
  }
@media (min-width: 1024px) {
.BannerImage-imageWrapper_dfff3db2 {
    height: calc(100% + 2.19rem)
}
[dir=ltr] .BannerImage-imageWrapper_dfff3db2 {
    right: 0
}
[dir=rtl] .BannerImage-imageWrapper_dfff3db2 {
    left: 0
}
  }
@media (min-width: 1280px) {
.BannerImage-imageWrapper_dfff3db2 {
    height: calc(100% + 6.25rem + 2.19rem);
    top: calc(-1 * 6.25rem)
}
  }
@media (min-width: 1280px) {

  .isLauncher .BannerImage-imageWrapper_dfff3db2 {
      top: calc(-1 * 6.88rem)
  }
    }
.BannerImage-image_80e31b5d {
  height: 100%;
}
[dir=rtl] .BannerImage-image_80e31b5d img {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }
.BannerImage-image_80e31b5d .BannerImage-inner_c58ad655 {
    /* IE fix: use object fit instead of width:auto */
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: right;
       object-position: right;
    position: absolute;
    width: 100%;
  }
[dir] .BannerImage-image_80e31b5d .BannerImage-inner_c58ad655 {
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }
[dir=ltr] .BannerImage-image_80e31b5d .BannerImage-inner_c58ad655 {
  background-position-x: right !important;
  right: 0;
  }
[dir=rtl] .BannerImage-image_80e31b5d .BannerImage-inner_c58ad655 {
    background-position-x: left !important;
    left: 0;
  }
.BannerImage-imageWrapper_dfff3db2::after {
  bottom: 0;
  content: '';
  height: 2.19rem;
  position: absolute;
  z-index: 1;
}
[dir] .BannerImage-imageWrapper_dfff3db2::after {
  background-image: -webkit-linear-gradient(top, transparent 0%, var(--theme-custom-color-primary-bg) 100%);
  background-image: -o-linear-gradient(top, transparent 0%, var(--theme-custom-color-primary-bg) 100%);
  background-image: linear-gradient(to bottom, transparent 0%, var(--theme-custom-color-primary-bg) 100%);
}
[dir=ltr] .BannerImage-imageWrapper_dfff3db2::after {
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--theme-custom-color-primary-bg)));
  left: 0;
  right: 0;
}
[dir=rtl] .BannerImage-imageWrapper_dfff3db2::after {
  background-image: -webkit-gradient(linear, right top, right bottom, from(transparent), to(var(--theme-custom-color-primary-bg)));
  right: 0;
  left: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BannerTitle-title_bcbe0135 {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1;

  color: var(--theme-custom-color-primary-text);
  width: 13.13rem
}
[dir] .BannerTitle-title_bcbe0135 {
  padding-top: 0.63rem
}
@media (min-width: 768px) {
.BannerTitle-title_bcbe0135 {
    font-size: 3.13rem;
    letter-spacing: -0.03rem;
    line-height: 1;
    width: 75%
}
[dir=ltr] .BannerTitle-title_bcbe0135 {
  padding-right: 0.5rem
}
[dir=rtl] .BannerTitle-title_bcbe0135 {

    padding-left: 0.5rem
}
  }
@media (min-width: 1024px) {
.BannerTitle-title_bcbe0135 {
    width: 60%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Picture-image_c7ea350b {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
}
[dir] .Picture-image_c7ea350b {
  -webkit-transition: opacity 125ms ease-in-out;
}
.Picture-idle_cc6d73bf {
  opacity: 0;
}
.Picture-picture_6dd45462 {
  /* ensure pictures have a height (besides padding) that can be detected by the intersection observer */
  min-height: 0.06rem;
}
.Picture-broken_598c05b5 {
  width: 18%;
  position: absolute;
  top: 50%;
}
[dir=ltr] .Picture-broken_598c05b5 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .Picture-broken_598c05b5 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.Picture-visible_5e20a43f {
  opacity: 1;

  /* Adds a little bit of delay to fade in to smooth out the transition */
  -webkit-transition-delay: 450ms;
       -o-transition-delay: 450ms;
}
[dir] .Picture-visible_5e20a43f {
          transition-delay: 450ms;
}
.Picture-fullSize_872e0c33 {
  width: 100%;
  height: 100%;
  display: block;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProgressBar-wrapper_36917650 {
  display: block;
}
[dir] .ProgressBar-wrapper_36917650 {
  padding: 0.63rem;
  margin: 0 -0.63rem 0.63rem;
}
.ProgressBar-inner_9d50b1f5 {
  position: relative;
  display: block;
}
.ProgressBar-button_cad8377b {
  position: absolute;
  width: 100%;
  height: 1.25rem;
  top: 0;
  z-index: 11;
}
[dir] .ProgressBar-background_40093f05 {
  background-color: rgba(143, 143, 143, 0.2);
}
[dir] .ProgressBar-railWrapper_66b27480 {
  border: solid 1Px transparent;
}
.ProgressBar-railWrapper_66b27480:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .ProgressBar-railWrapper_66b27480:focus {
    border-color: #fff;
  }
.ProgressBar-railWrapper_66b27480 {

  position: absolute;
  width: 100%;
  height: 1.25rem;
  top: 0;
}
.ProgressBar-rail_5e608889 {
  height: 0.19rem;
  width: 100%;
  pointer-events: none;
  position: absolute;
  top: 0.63rem;
}
[dir] .ProgressBar-primary_505f066c, [dir] .ProgressBar-secondary_03b48476 {
  background-color: var(--theme-custom-color-accent)
}
.ProgressBar-primary_505f066c.ProgressBar-transition_570d816d, .ProgressBar-secondary_03b48476.ProgressBar-transition_570d816d {
    -o-transition: width 100ms linear;
    transition: width 100ms linear;
  }
[dir] .ProgressBar-primary_505f066c.ProgressBar-transition_570d816d, [dir] .ProgressBar-secondary_03b48476.ProgressBar-transition_570d816d {
    -webkit-transition: width 100ms linear;
  }
.ProgressBar-primary_505f066c {
  z-index: 1;
}
.ProgressBar-primaryIndicator_aebcf736 {
  width: 1.38rem;
  height: 1.38rem;
  position: absolute;
  z-index: 2;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0
}
[dir] .ProgressBar-primaryIndicator_aebcf736 {
  cursor: pointer
}
[dir=ltr] .ProgressBar-primaryIndicator_aebcf736 {
 margin-left: -0.69rem
}
[dir=rtl] .ProgressBar-primaryIndicator_aebcf736 {
  margin-right: -0.69rem
}
[dir=ltr] .ProgressBar-primaryIndicator_aebcf736.ProgressBar-transition_570d816d {
 -webkit-transition: left 100ms linear;
 -o-transition: left 100ms linear;
 transition: left 100ms linear;
  }
[dir=rtl] .ProgressBar-primaryIndicator_aebcf736.ProgressBar-transition_570d816d {
    -webkit-transition: right 100ms linear;
    -o-transition: right 100ms linear;
    transition: right 100ms linear;
  }
.ProgressBar-primaryIndicator_aebcf736::after {
    content: '';
    display: block;
    width: 0.75rem;
    height: 0.75rem;
  }
[dir] .ProgressBar-primaryIndicator_aebcf736::after {
    border-radius: 50%;
    background-color: #fff;
  }
.ProgressBar-shouldHideIndicator_956ffa84 .ProgressBar-primaryIndicator_aebcf736 {
    display: none;
  }
.ProgressBar-secondary_03b48476 {
  opacity: 0.4;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.HtmlPlayer-video_0f07a4d2 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
[dir] .HtmlPlayer-video_0f07a4d2 {
  cursor: pointer;
}
.HtmlPlayer-video_0f07a4d2::-webkit-media-text-track-display {
  top: -10% !important;
}
.HtmlPlayer-controls_17ad7067 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  bottom: 0;
  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: absolute;
  width: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none
}
[dir] .HtmlPlayer-controls_17ad7067 {
  -webkit-transition: opacity 125ms ease-in-out;
  padding: 0 1.88rem 0.63rem;
  cursor: default
}
.HtmlPlayer-controls_17ad7067::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -0.06rem;
    height: 150%;
    width: 100%;
    z-index: -1;
  }
[dir] .HtmlPlayer-controls_17ad7067::before {
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  }
[dir=ltr] .HtmlPlayer-controls_17ad7067::before {
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
 left: 0;
  }
[dir=rtl] .HtmlPlayer-controls_17ad7067::before {
    background: -webkit-gradient(linear, right top, right bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
    right: 0;
  }
.HtmlPlayer-controlsVisible_2650a0a5 .HtmlPlayer-controls_17ad7067 {
    opacity: 1;
    pointer-events: auto;
  }
.HtmlPlayer-controls_17ad7067 li div.HtmlPlayer-captionsLine_69741b6d {
    height: 0.15rem;
    position: absolute;
    width: 65%;
    bottom: 15%;
  }
[dir] .HtmlPlayer-controls_17ad7067 li div.HtmlPlayer-captionsLine_69741b6d {
    background-color: white;
  }
[dir=ltr] .HtmlPlayer-controls_17ad7067 li div.HtmlPlayer-captionsLine_69741b6d {
 left: 17.5%;
  }
[dir=rtl] .HtmlPlayer-controls_17ad7067 li div.HtmlPlayer-captionsLine_69741b6d {
    right: 17.5%;
  }
.HtmlPlayer-controls_17ad7067 .HtmlPlayer-captionsLineHidden_20f0bcd1 {
    opacity: 0;
  }
.HtmlPlayer-controls_17ad7067 .HtmlPlayer-captionsButton_ccc23c38 {
    position: relative;
  }
.HtmlPlayer-controls_17ad7067 .HtmlPlayer-captionsText_306462b3 {
    color: black;

    font-size: 0.88rem;

    letter-spacing: 0.01rem;

    line-height: 1.4;

    font-weight: 500;
  }
[dir] .HtmlPlayer-controls_17ad7067 .HtmlPlayer-captionsText_306462b3 {
    border-radius: 0.5rem;
    background-color: #fff;
    padding: 0 0.2rem;
  }
.HtmlPlayer-controls_17ad7067 .HtmlPlayer-captionsText_306462b3 span {
      display: inline-block;
    }
.HtmlPlayer-controls_17ad7067 .HtmlPlayer-controlWrapper_3500034c {
    height: 100%;
  }
.HtmlPlayer-controls_17ad7067[focus-within] {
  opacity: 1;
  pointer-events: auto;
}
.HtmlPlayer-controls_17ad7067:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.HtmlPlayer-progressWrapper_39e58e33 {
  width: 100%;
}
[dir=ltr] .HtmlPlayer-progressWrapper_39e58e33 {
 padding-left: 0.63rem;
 padding-right: 0.63rem;
}
[dir=rtl] .HtmlPlayer-progressWrapper_39e58e33 {
  padding-right: 0.63rem;
  padding-left: 0.63rem;
}
.HtmlPlayer-volumeWrapper_10be06d5 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.HtmlPlayer-volumeRail_8669e69d {
  -o-transition: max-width 125ms ease-in-out;
  transition: max-width 125ms ease-in-out;

  max-width: 0;
  width: 3.38rem;
  overflow: hidden;
}
[dir] .HtmlPlayer-volumeRail_8669e69d {
  -webkit-transition: max-width 125ms ease-in-out;
  margin-top: -0.81rem;
}
.HtmlPlayer-volumeWrapper_10be06d5:hover .HtmlPlayer-volumeRail_8669e69d {
    max-width: 3.38rem;
    overflow: visible;
  }
.HtmlPlayer-volumeWrapper_10be06d5 .HtmlPlayer-volumeRailVisible_18723c8f {
    max-width: 3.38rem;
    overflow: visible;
  }
.HtmlPlayer-volumeRailInner_f195c1ee {
  width: 3.38rem;
  display: block;
}
[dir] .HtmlPlayer-volumeRailInner_f195c1ee {
  padding: 0 0.38rem;
}
[dir] .HtmlPlayer-button_6570cbc8 {
  border: solid 1Px transparent;
}
.HtmlPlayer-button_6570cbc8:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .HtmlPlayer-button_6570cbc8:focus {
    border-color: #fff;
  }
.HtmlPlayer-button_6570cbc8 {
  color: #fff;
  height: 100%;
}
[dir] .HtmlPlayer-button_6570cbc8 {

  padding: 0.63rem;
}
.HtmlPlayer-timestamp_d188489e {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  position: relative;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
[dir] .HtmlPlayer-timestamp_d188489e {
  padding: 0.72rem;
}
.HtmlPlayer-timestamp_d188489e span {
    display: inline-block;
  }
.HtmlPlayer-fullScreen_f1883483 {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RatingOverlay-full_b8c2db30 {
  height: 100%;
  width: 100%;
  display: block;
}
[dir] .RatingOverlay-full_b8c2db30 {
  background-color: black;
}
.RatingOverlay-overlay_5c01b114 {
  position: absolute;
  display: block;
  width: 25%;
}
.RatingOverlay-overlay_5c01b114 img.RatingOverlay-image_a285433f {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
  }
[dir] .RatingOverlay-overlay_5c01b114 img.RatingOverlay-image_a285433f {
    margin: 0 auto;
  }
.RatingOverlay-topLeft_a45e7fcd {
  top: 1.25rem;
}
[dir=ltr] .RatingOverlay-topLeft_a45e7fcd {
 left: 1.25rem;
 text-align: left;
}
[dir=rtl] .RatingOverlay-topLeft_a45e7fcd {
  right: 1.25rem;
  text-align: right;
}
.RatingOverlay-topRight_dbea6dda {
  top: 1.25rem;
}
[dir=ltr] .RatingOverlay-topRight_dbea6dda {
 right: 1.25rem;
 text-align: right;
}
[dir=rtl] .RatingOverlay-topRight_dbea6dda {
  left: 1.25rem;
  text-align: left;
}
.RatingOverlay-bottomLeft_42b88874 {
  bottom: 1.25rem;
}
[dir=ltr] .RatingOverlay-bottomLeft_42b88874 {
 left: 1.25rem;
 text-align: left;
}
[dir=rtl] .RatingOverlay-bottomLeft_42b88874 {
  right: 1.25rem;
  text-align: right;
}
.RatingOverlay-bottomRight_b048dcb6 {
  bottom: 1.25rem;
}
[dir=ltr] .RatingOverlay-bottomRight_b048dcb6 {
 right: 1.25rem;
 text-align: right;
}
[dir=rtl] .RatingOverlay-bottomRight_b048dcb6 {
  left: 1.25rem;
  text-align: left;
}
.RatingOverlay-image_wrapper_3a0390f5 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
[dir] .RatingOverlay-image_wrapper_3a0390f5 {
  text-align: center;
}
.RatingOverlay-image_wrapper_3a0390f5 img.RatingOverlay-image_a285433f {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
  }
[dir] .RatingOverlay-image_wrapper_3a0390f5 img.RatingOverlay-image_a285433f {
    margin: 0 auto;
  }
.RatingOverlay-image_centered_875597ad {
  width: 100%;
}
[dir] .RatingOverlay-image_centered_875597ad {
  text-align: center;
}
.RatingOverlay-transition_fc0f16c3 {
  -o-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}
[dir] .RatingOverlay-transition_fc0f16c3 {
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
}
.RatingOverlay-hidden_e57f20d1 {
  opacity: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.EpicPlayer-wrapper_38c924f1 {
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  top: 0;
}
[dir=ltr] .EpicPlayer-wrapper_38c924f1 {
 left: 0;
}
[dir=rtl] .EpicPlayer-wrapper_38c924f1 {
  right: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Button-main_d4ab9eb9 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;
  -o-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  transition: color 125ms ease-in-out, background-color 125ms ease-in-out;

  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  line-height: normal;
  color: #fff
}
[dir] .Button-main_d4ab9eb9 {
  -webkit-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  text-align: center
}
.Button-main_d4ab9eb9:disabled {
    pointer-events: none;
  }
[dir] .Button-main_d4ab9eb9:disabled {
    cursor: default;
  }
.Button-main_d4ab9eb9:disabled > span {
      opacity: 0.5;
      display: block;
    }
.Button-mainStatic_ca1ee412 {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.Button-primary_093f075b,
.Button-secondary_537f66bd {
  height: 3.13rem
}
[dir] .Button-primary_093f075b, [dir] .Button-secondary_537f66bd {
  padding: 0 1.25rem
}
.Button-primary_093f075b.Button-hasMinWidth_b666ef1e, .Button-secondary_537f66bd.Button-hasMinWidth_b666ef1e {
    min-width: 12.5rem;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.Button-primary_093f075b,
.Button-secondary_537f66bd {
    height: 2.5rem
}
  }
@media (max-width: 1023px) {
.Button-scalesDown_b69db502 {
    font-size: 0.63rem
}

    .Button-scalesDown_b69db502.Button-primary_093f075b,
    .Button-scalesDown_b69db502.Button-secondary_537f66bd {
      height: 2.5rem;
    }
  }
.Button-primary_093f075b {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--theme-custom-color-accent-text);
  position: relative
}
[dir] .Button-primary_093f075b {
  background-color: var(--theme-custom-color-accent)
}
.Button-primary_093f075b.Button-hasHover_8f3ca91c:hover {
    color: var(--theme-custom-color-accent-text);
  }
[dir] .Button-primary_093f075b.Button-hasHover_8f3ca91c:hover {
    background: var(--theme-custom-color-accent-hover);
  }
.Button-secondary_537f66bd {
  -o-transition: border-color 125ms ease-in-out;
  transition: border-color 125ms ease-in-out
}
[dir] .Button-secondary_537f66bd {
  -webkit-transition: border-color 125ms ease-in-out;

  background: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0.06rem;
  border-color: rgba(255, 255, 255, 0.1)
}
[dir] .Button-secondary_537f66bd.Button-hasHover_8f3ca91c:hover {
    border-color: rgba(255, 255, 255, 0.3);
  }
.Button-tertiary_dd5910a9 {
  -o-transition: border-color 125ms ease-in-out;
  transition: border-color 125ms ease-in-out;
  height: 1.88rem
}
[dir] .Button-tertiary_dd5910a9 {
  -webkit-transition: border-color 125ms ease-in-out;

  background: rgba(0, 0, 0, 0);
  border-color: rgba(255, 255, 255, 0.2);
  border-style: solid;
  border-width: 0.06rem;
  padding: 0 0.94rem
}
[dir] .Button-tertiary_dd5910a9.Button-hasHover_8f3ca91c:hover {
    border-color: rgba(255, 255, 255, 0.3);
  }
.Button-quaternary_f29bbab7 {
  -o-transition: border-color 125ms ease-in-out;
  transition: border-color 125ms ease-in-out
}
[dir] .Button-quaternary_f29bbab7 {
  -webkit-transition: border-color 125ms ease-in-out;

  padding: 0;
  background: rgba(0, 0, 0, 0);
  border-bottom: 0.06rem solid rgba(0, 0, 0, 0)
}
[dir] .Button-quaternary_f29bbab7.Button-hasHover_8f3ca91c:hover {
    border-bottom: 0.06rem solid currentColor;
  }
/* hard coded themes
 * for overwriting custom theme */
.Button-gray_15fe056c {
  color: #121212
}
[dir] .Button-gray_15fe056c {
  background-color: #d2d2d2
}
.Button-gray_15fe056c.Button-hasHover_8f3ca91c:hover,
  .Button-gray_15fe056c:disabled {
    color:
      #121212; /* color needs to be explicitly set or it will be overridden by custom theme */
  }
[dir] .Button-gray_15fe056c.Button-hasHover_8f3ca91c:hover, [dir] .Button-gray_15fe056c:disabled {

    background-color: #d2d2d2;
  }
.Button-darkGray_fad9ea95 {
  color: #f4f4f4
}
[dir] .Button-darkGray_fad9ea95 {
  background-color: #353535
}
.Button-darkGray_fad9ea95.Button-hasHover_8f3ca91c:hover,
  .Button-darkGray_fad9ea95:disabled {
    color:
      #f4f4f4; /* color needs to be explicitly set or it will be overridden by custom theme */
  }
[dir] .Button-darkGray_fad9ea95.Button-hasHover_8f3ca91c:hover, [dir] .Button-darkGray_fad9ea95:disabled {

    background-color: #535353;
  }
.Button-dark_c0429b3d {
  color: #f4f4f4
}
[dir] .Button-dark_c0429b3d {
  background-color: #0078f2
}
.Button-dark_c0429b3d.Button-hasHover_8f3ca91c:hover,
  .Button-dark_c0429b3d.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {
    color:
      #f4f4f4; /* color needs to be explicitly set or it will be overridden by custom theme */
  }
[dir] .Button-dark_c0429b3d.Button-hasHover_8f3ca91c:hover, [dir] .Button-dark_c0429b3d.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {

    background-color: #3595f1;
  }
.Button-light_fca21740 {
  color: #121212
}
[dir] .Button-light_fca21740 {
  background-color: #f5ca23
}
.Button-light_fca21740.Button-hasHover_8f3ca91c:hover,
  .Button-light_fca21740.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {
    color:
      #121212; /* color needs to be explicitly set or it will be overridden by custom theme */
  }
[dir] .Button-light_fca21740.Button-hasHover_8f3ca91c:hover, [dir] .Button-light_fca21740.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {

    background-color: #f7d44f;
  }
.Button-black_06d5536c {
  color: #f4f4f4
}
[dir] .Button-black_06d5536c {
  background-color: #202020
}
.Button-black_06d5536c.Button-hasHover_8f3ca91c:hover,
  .Button-black_06d5536c.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {
    color:
      #f4f4f4; /* color needs to be explicitly set or it will be overridden by custom theme */
  }
[dir] .Button-black_06d5536c.Button-hasHover_8f3ca91c:hover, [dir] .Button-black_06d5536c.Button-hasHover_8f3ca91c.Button-shouldForceHover_37e1215e {

    background-color: #353535;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ErrorView-settingsButton_18251d44 {
  position: absolute;
  color: #fff;
  top: 1.25rem
}
[dir=ltr] .ErrorView-settingsButton_18251d44 {
 left: 1.25rem
}
[dir=rtl] .ErrorView-settingsButton_18251d44 {
  right: 1.25rem
}
@media (min-width: 1024px) {
.ErrorView-settingsButton_18251d44 {
    top: unset;
    bottom: 1.25rem
}
  }
.ErrorView-character_efa9d44f {
  position: absolute;
  top: 0;
  bottom: -7.81rem;
  width: 24.38rem;
  display: none;
  z-index: 3
}
[dir=ltr] .ErrorView-character_efa9d44f {
 right: -12.5rem;
 background: url(4553982d7272dd810fcae949cd09e912.png) no-repeat right bottom/contain
}
[dir=rtl] .ErrorView-character_efa9d44f {
  left: -12.5rem;
  background: url(4553982d7272dd810fcae949cd09e912.png) no-repeat left bottom/contain
}
@media (min-width: 768px) {
.ErrorView-character_efa9d44f {
    display: block
}
  }
@media (min-width: 1024px) {
.ErrorView-character_efa9d44f {
    bottom: -7.38rem;
    width: 16.5rem
}
[dir=ltr] .ErrorView-character_efa9d44f {
  right: -0.94rem
}
[dir=rtl] .ErrorView-character_efa9d44f {
    left: -0.94rem
}
  }
@media (min-width: 1280px) {
.ErrorView-character_efa9d44f {
    bottom: -5rem;
    width: 23.38rem
}
[dir=ltr] .ErrorView-character_efa9d44f {
  right: -0.94rem
}
[dir=rtl] .ErrorView-character_efa9d44f {
    left: -0.94rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.WarningTemplate-wrapper_4600e045 {
  position: fixed;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  top: 0;
  z-index: 1001;
  height: 100vh;
  width: 100vw
}
[dir=ltr] .WarningTemplate-wrapper_4600e045 {
 left: 0
}
[dir=rtl] .WarningTemplate-wrapper_4600e045 {
  right: 0
}
.WarningTemplate-wrapper_4600e045.WarningTemplate-isLauncher_db027c18 {
    top: 5rem;
    height: calc(100vh - 5rem);
    width: 100%
  }
@media (min-width: 1024px) {
.WarningTemplate-wrapper_4600e045.WarningTemplate-isLauncher_db027c18 {
      top: 0;
      height: 100vh;
      width: auto
  }
[dir=ltr] .WarningTemplate-wrapper_4600e045.WarningTemplate-isLauncher_db027c18 {
  right: 0
  }
[dir=rtl] .WarningTemplate-wrapper_4600e045.WarningTemplate-isLauncher_db027c18 {
      left: 0
  }
    }
/* Hide the app footer */
.WarningTemplate-wrapper_4600e045 + div {
  display: none;
}
.WarningTemplate-pageTitle_ac38ebda {
  /* TODO - update this CSS or remove the title HTML from the component if we keep the latest visual changes. */
  display: none;
}
.WarningTemplate-contentWrapper_aae6f6a4 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  position: relative;
}
[dir] .WarningTemplate-contentWrapper_aae6f6a4 {
  background-color: #202020;
}
.WarningTemplate-messageWrapper_5dfb362d {
  color: #f4f4f4;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 75%;
  position: relative
}
[dir] .WarningTemplate-messageWrapper_5dfb362d {
  text-align: center
}
@media (min-width: 768px) {
.WarningTemplate-messageWrapper_5dfb362d {
    max-width: 70%
}
  }
@media (min-width: 1024px) {
.WarningTemplate-messageWrapper_5dfb362d {
    max-width: 65%;
    position: static
}
  }
.WarningTemplate-messageBackgroundText_490f16f5 {
  color: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 8.13rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  z-index: 1
}
[dir=ltr] .WarningTemplate-messageBackgroundText_490f16f5 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%)
}
[dir=rtl] .WarningTemplate-messageBackgroundText_490f16f5 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%)
}
@media (min-width: 768px) {
.WarningTemplate-messageBackgroundText_490f16f5 {
    font-size: 12.5rem
}
  }
@media (min-width: 1024px) {
.WarningTemplate-messageBackgroundText_490f16f5 {
    font-size: 18.75rem
}
  }
@media (min-width: 1280px) {
.WarningTemplate-messageBackgroundText_490f16f5 {
    font-size: 25rem
}
  }
.WarningTemplate-messageIcon_9b069eca,
.WarningTemplate-messageText_06273162,
.WarningTemplate-messageDescription_85545249 {
  position: relative;
  z-index: 2;
}
[dir] .WarningTemplate-messageIcon_9b069eca {
  margin-bottom: 3.19rem
}
@media (max-height: 499px) {
.WarningTemplate-messageIcon_9b069eca {
    display: none
}
  }
.WarningTemplate-messageText_06273162 {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1;
  width: 100%
}
[dir] .WarningTemplate-messageText_06273162 {

  margin: 0
}
@media (min-width: 1280px) {
.WarningTemplate-messageText_06273162 {
    font-size: 3.13rem;
    letter-spacing: -0.03rem;
    line-height: 1
}
  }
.WarningTemplate-messageDescription_85545249 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  opacity: 0.5;
}
[dir] .WarningTemplate-messageDescription_85545249 {

  margin-top: 3.19rem;
  margin-bottom: 0;
}
.WarningTemplate-childrenWrapper_a9786a9d {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  position: static;
  z-index: 5;
}
[dir] .WarningTemplate-childrenWrapper_a9786a9d {
  margin-top: 1.25rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Video-wrapper_89a1988b {
  height: 0;
  z-index: 0;
}
.Video-content_5c473ec8 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
[dir=ltr] .Video-content_5c473ec8 {
 left: 0;
}
[dir=rtl] .Video-content_5c473ec8 {
  right: 0;
}
iframe.Video-content_5c473ec8 {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
}
[dir] iframe.Video-content_5c473ec8 {
          transform: scale(1.02);
  margin: -0.06rem;
}
.Video-disabledOverlay_a8a1236a {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
[dir=ltr] .Video-disabledOverlay_a8a1236a {
 left: 0;
}
[dir=rtl] .Video-disabledOverlay_a8a1236a {
  right: 0;
}
.Video-externalVideo_c0791261 img {
  display: block;
}
.Video-externalLink_1811a593 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.Video-poster_2814d0c3 {
  z-index: -1;
}
.Video-playExternal_4d2ec99d {
  color: #fff
}
@media (min-width: 768px) {
.Video-playExternal_4d2ec99d {
    height: 5rem;
    width: 5rem
}
  }
.Video-swipeGuard_513342a4 {
  width: 100%;
  position: absolute;
  top: 2.81rem;
  height: calc(100% - 5.63rem);
  z-index: 1
}
@media (min-width: 576px) {
.Video-swipeGuard_513342a4 {
    display: none
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Markdown-wrapper_d5d034fd {
  color: var(--theme-custom-primary-text);
}
.Markdown-wrapper_d5d034fd strong {
    font-weight: 700;
  }
.Markdown-wrapper_d5d034fd .Markdown-heading_4f36fd81 {
    font-size: inherit;
  }
[dir] .Markdown-wrapper_d5d034fd .Markdown-heading_4f36fd81 {
    margin-bottom: 0.63rem;
  }
.Markdown-wrapper_d5d034fd .Markdown-paragraph_fe094d70,
  .Markdown-wrapper_d5d034fd .Markdown-list_9d54cea1,
  .Markdown-wrapper_d5d034fd caption {
    color: var(--theme-custom-color-primary-body-text); /* This prevents nested elements from inheriting text opacity. */
  }
[dir] .Markdown-wrapper_d5d034fd .Markdown-paragraph_fe094d70, [dir] .Markdown-wrapper_d5d034fd .Markdown-list_9d54cea1, [dir] .Markdown-wrapper_d5d034fd caption {
    margin-bottom: 1.56rem;
  }
.Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026 {
    display: inline-block;
    color: var(--theme-custom-color-primary-body-text)
  }
.Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026:hover {
      color: var(--theme-custom-primary-text);
    }
.Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026 .Markdown-link_400e32f9 {
      display: inline-block;
      color: inherit;
      word-break: break-word;
    }
[dir] .Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026 .Markdown-link_400e32f9 {
      border-bottom: solid 0.06rem var(--theme-custom-color-primary-body-text);
      border-bottom: solid 1px var(--theme-custom-color-primary-body-text);
      cursor: pointer;
    }
.Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026 .Markdown-linkIcon_0a365804 {
      display: inline-block;
      vertical-align: middle;
      width: 0.44rem;
      height: 0.44rem;
    }
[dir] .Markdown-wrapper_d5d034fd .Markdown-linkWrapper_a4deb026 .Markdown-linkIcon_0a365804 {
      margin: 0 0.19rem;
    }
.Markdown-wrapper_d5d034fd .Markdown-list_9d54cea1 {
    list-style-type: disc;
  }
[dir=ltr] .Markdown-wrapper_d5d034fd .Markdown-list_9d54cea1 {
 margin-left: 0.38rem;
 padding-left: 0.63rem;
  }
[dir=rtl] .Markdown-wrapper_d5d034fd .Markdown-list_9d54cea1 {
    margin-right: 0.38rem;
    padding-right: 0.63rem;
  }
[dir] .Markdown-wrapper_d5d034fd .Markdown-listItem_7a553e64.Markdown-isMultiLine_b80e86de {
    margin: 1.25rem 0;
  }
.Markdown-wrapper_d5d034fd .Markdown-image_2d69d9e9,
  .Markdown-wrapper_d5d034fd img,
  .Markdown-wrapper_d5d034fd .Markdown-caption_61c31489 {
    width: 100%;
  }
.Markdown-wrapper_d5d034fd .Markdown-caption_61c31489 {
    display: block;
  }
[dir] .Markdown-wrapper_d5d034fd .Markdown-caption_61c31489 {
    margin: 0.63rem 0 1.56rem;
    text-align: center;
  }
.Markdown-wrapper_d5d034fd hr {
    opacity: 0.1;
    height: 0.08rem;
  }
[dir] .Markdown-wrapper_d5d034fd hr {
    border-style: solid;
    border-width: 0 0 0.06rem;
    border-color: var(--theme-custom-primary-text);
    margin: 3em 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BannerDescription-description_bbbf9d22 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: rgba(255, 255, 255, 0.6);
  width: 100%
}
[dir] .BannerDescription-description_bbbf9d22 {
  padding-top: 0.63rem
}
.BannerDescription-description_bbbf9d22 > div { /* Remove bottom margin from markdown paragraph */
  }
[dir] .BannerDescription-description_bbbf9d22 > div {
    margin-bottom: 0 !important;
  }
@media (min-width: 768px) {
.BannerDescription-description_bbbf9d22 {
    width: 50%
}
[dir=ltr] .BannerDescription-description_bbbf9d22 {
  padding-right: 0.5rem
}
[dir=rtl] .BannerDescription-description_bbbf9d22 {
    padding-left: 0.5rem
}
  }
@media (min-width: 1024px) {
.BannerDescription-description_bbbf9d22 {
    width: 40%
}
  }
@media (min-width: 1920px) {
.BannerDescription-description_bbbf9d22 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.BannerDescription-description_bbbf9d22 a:focus,
  .BannerDescription-description_bbbf9d22 a:hover {
    color: #fff !important;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BannerEyebrow-eyebrow_90bfee21 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  color: var(--theme-custom-color-primary-text);
  width: 13.13rem
}
@media (min-width: 768px) {
.BannerEyebrow-eyebrow_90bfee21 {
    width: 25%
}
[dir=ltr] .BannerEyebrow-eyebrow_90bfee21 {
  padding-right: 0.5rem
}
[dir=rtl] .BannerEyebrow-eyebrow_90bfee21 {
    padding-left: 0.5rem
}
  }
@media (min-width: 1024px) {
.BannerEyebrow-eyebrow_90bfee21 {
    width: 20%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Banner-container_125f3756 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  z-index: 0;
}
@media (min-width: 768px) {
[dir] .Banner-containerWithImage_1d53ab4b {
    padding-top: 3.19rem;
    padding-bottom: 3.19rem
}
  }
.Banner-content_661b1d45 {
  height: 100%;
  width: 100%;
  z-index: 2
}
@media (min-width: 768px) {
.Banner-content_661b1d45 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 100%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* this is where we hit the 1600px --content-max-width for launcher & web */
:root { /* padding bottom is lr padding * h/w ratio */
}
.Slider-slider_9adc54ca {
  display: block;
  width: 100%;
  overflow: hidden;
}
.Slider-track_c88c90bd {
  display: block;
  transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1), -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
[dir] .Slider-track_c88c90bd {
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.Slider-slides_5029292b {
  position: relative;
  list-style: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column
}
[dir] .Slider-slides_5029292b {
  margin: 0;
  padding: 0
}
.Slider-slides_5029292b.Slider-hasClones_275461e0 .Slider-slide_45eec135:first-child {
      display: none;
    }
.Slider-slides_5029292b.Slider-hasClones_275461e0 .Slider-slide_45eec135:last-child {
      display: none;
    }
@media (min-width: 768px) {
      .Slider-slides_5029292b.Slider-hasClones_275461e0 .Slider-slide_45eec135:first-child,
      .Slider-slides_5029292b.Slider-hasClones_275461e0 .Slider-slide_45eec135:last-child {
        display: block;
      }
    }
@media (min-width: 768px) {
.Slider-slides_5029292b {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
}

    .Slider-slides_5029292b .Slider-slide_45eec135:first-child {
      display: block;
    }

    .Slider-slides_5029292b .Slider-slide_45eec135:last-child {
      display: block;
    }
  }
.isLauncher .Slider-slides_5029292b {
    /*
        x = 1.5 columns
      */
  }
@media (min-width: 1024px) {

  [dir=ltr] .isLauncher .Slider-slides_5029292b {
  -webkit-transform: translate3d(calc(100vw / 64 * 1.5), 0, 0);
  transform: translate3d(calc(100vw / 64 * 1.5), 0, 0)
  }

  [dir=rtl] .isLauncher .Slider-slides_5029292b {
      -webkit-transform: translate3d(calc(-1*(100vw / 64 * 1.5)), 0, 0);
              transform: translate3d(calc(-1*(100vw / 64 * 1.5)), 0, 0)
  }
    }
@media (min-width: 1280px) {

  [dir=ltr] .isLauncher .Slider-slides_5029292b {
  -webkit-transform: translate3d(calc(100vw / 64 * 1.5), 0, 0);
  transform: translate3d(calc(100vw / 64 * 1.5), 0, 0)
  }

  [dir=rtl] .isLauncher .Slider-slides_5029292b {
      -webkit-transform: translate3d(calc(-1*(100vw / 64 * 1.5)), 0, 0);
              transform: translate3d(calc(-1*(100vw / 64 * 1.5)), 0, 0)
  }
    }
@media (min-width: 1440px) {

  [dir=ltr] .isLauncher .Slider-slides_5029292b {
  -webkit-transform: translate3d(calc(100vw / 72 * 1.5), 0, 0);
  transform: translate3d(calc(100vw / 72 * 1.5), 0, 0)
  }

  [dir=rtl] .isLauncher .Slider-slides_5029292b {
      -webkit-transform: translate3d(calc(-1*(100vw / 72 * 1.5)), 0, 0);
              transform: translate3d(calc(-1*(100vw / 72 * 1.5)), 0, 0)
  }
    }
@media (min-width: 2135px) {

  .isLauncher .Slider-slides_5029292b {
      /*
        x = pagewidth - sidebarwidth - 3 columns + (half the content max width)
        */
  }

  [dir=ltr] .isLauncher .Slider-slides_5029292b {
  -webkit-transform: translate3d(calc(((100vw - 16vw) - ((100vw / 72 * 3) + 100rem)) * 0.5), 0, 0);
  transform: translate3d(calc(((100vw - 16vw) - ((100vw / 72 * 3) + 100rem)) * 0.5), 0, 0)
  }

  [dir=rtl] .isLauncher .Slider-slides_5029292b {
      -webkit-transform: translate3d(calc(-1*(((100vw - 16vw) - ((100vw / 72 * 3) + 100rem)) * 0.5)), 0, 0);
              transform: translate3d(calc(-1*(((100vw - 16vw) - ((100vw / 72 * 3) + 100rem)) * 0.5)), 0, 0)
  }
    }
@media (min-width: 768px) {
.Slider-slider_9adc54ca,
.Slider-slides_5029292b,
.Slider-track_c88c90bd,
.Slider-slide_45eec135 {
    height: 100%
}
  }
.Slider-trackResizing_fbcdf28f {
  -o-transition: none;
  transition: none;
}
[dir] .Slider-trackResizing_fbcdf28f {
  -webkit-transition: none;
}
.Slider-slide_45eec135 {
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;

  position: relative;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 1;
  height: 56.25vw
}
[dir] .Slider-slide_45eec135 {
  -webkit-transition: opacity 200ms ease;
  margin: 0;
  margin-bottom: 0.63rem
}
@media (min-width: 1024px) {
.Slider-slide_45eec135 {
    /* LR padding is 1/2 column. Padding bottom is LR padding * h/w ratio */
    height: auto;
    opacity: 0.3;
    pointer-events: none
}
[dir] .Slider-slide_45eec135 {
    padding: 0 calc((100vw / 64) * 0.5) calc(100vw / 64 * 0.5 * 1.125);
    margin-bottom: 0
}
  }
@media (min-width: 1440px) {
.Slider-slide_45eec135 {
    /* LR padding is 1/2 column. Padding bottom is LR padding * h/w ratio */
}
[dir] .Slider-slide_45eec135 {
    padding: 0 calc((100vw / 72) * 0.5) calc(100vw / 72 * 0.5 * 1.125)
}
  }
.Slider-slide_45eec135:hover,
  .Slider-slide_45eec135.Slider-current_62d79311 {
    opacity: 1;
    pointer-events: auto;
  }
.Slider-current_62d79311 {
  opacity: 1;
}
.Slider-slides_5029292b.Slider-prevHovered_046df4b9 .Slider-slide_45eec135:not(.Slider-current_62d79311) {
    opacity: 1;
  }
@media (min-width: 1024px) {

  .Slider-slides_5029292b.Slider-prevHovered_046df4b9 .Slider-current_62d79311 + .Slider-slide_45eec135 {
      opacity: 0.3
  }
    }
.Slider-slides_5029292b.Slider-nextHovered_0fb4f190 .Slider-current_62d79311 + .Slider-slide_45eec135 {
    opacity: 1;
  }
.Slider-controls_db235697 {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10
}
@media (min-width: 768px) {
.Slider-controls_db235697 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    pointer-events: none
}
  }
.Slider-button_10d388bb {
  /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  overflow: hidden;
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);

  /* perspective(1px) is added to fix render issues in the launcher http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
  top: 50%;
  -webkit-transform: perspective(0.06rem) translateY(-50%);
  z-index: 1;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 10vw;
  height: 100%;
  pointer-events: auto
}
[dir] .Slider-button_10d388bb {
          transform: perspective(0.06rem) translateY(-50%);
  padding: 0.63rem
}
.Slider-button_10d388bb:nth-child(1) {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
.Slider-button_10d388bb:nth-child(2) {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
@media (min-width: 768px) {
.Slider-button_10d388bb {
    height: calc(100% - 5.63rem);
    top: 0;
    -webkit-transform: none;
        -ms-transform: none
}
[dir] .Slider-button_10d388bb {
            transform: none
}
  }
@media (min-width: 1024px) {
.Slider-button_10d388bb {
    top: 0;
    height: calc(100% - 1.05rem);
    width: 11vw
}
[dir] .Slider-button_10d388bb {
    padding: 1.25rem
}
  }
.isLauncher .Slider-button_10d388bb {
    /* EGS-9315 */
  }
@media (min-width: 1024px) {

  .isLauncher .Slider-button_10d388bb {
      min-width: 5vw;
      height: calc(100% - 5.63rem);
      top: 0;
      -webkit-transform: none;
          -ms-transform: none
  }

  [dir] .isLauncher .Slider-button_10d388bb {
              transform: none;
      padding: 0.63rem
  }

      .isLauncher .Slider-button_10d388bb:nth-child(1) {
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
      }

      [dir=ltr] .isLauncher .Slider-button_10d388bb:nth-child(1) {
  left: calc(100vw / 64 * 2);
      }

      [dir=rtl] .isLauncher .Slider-button_10d388bb:nth-child(1) {
        right: calc(100vw / 64 * 2);
      }

        .isLauncher .Slider-button_10d388bb:nth-child(1) .Slider-arrow_a702238d {
          -webkit-transform: translateY(2.31rem);
              -ms-transform: translateY(2.31rem);
        }

        [dir] .isLauncher .Slider-button_10d388bb:nth-child(1) .Slider-arrow_a702238d {
                  transform: translateY(2.31rem);
        }

      .isLauncher .Slider-button_10d388bb:nth-child(2) {
        /* cover the next slides controls */
        height: calc(100% - (100vw / 64 * 0.5 * 1.125));
      }
    }
@media (min-width: 1280px) {

  .isLauncher .Slider-button_10d388bb {
      min-width: 5.31rem
  }

      [dir=ltr] .isLauncher .Slider-button_10d388bb:nth-child(1) {
  left: calc(100vw / 64 * 2);
      }

      [dir=rtl] .isLauncher .Slider-button_10d388bb:nth-child(1) {
        right: calc(100vw / 64 * 2);
      }
    }
@media (min-width: 1440px) {
      [dir=ltr] .isLauncher .Slider-button_10d388bb:nth-child(1) {
  left: calc(100vw / 72 * 2);
      }
      [dir=rtl] .isLauncher .Slider-button_10d388bb:nth-child(1) {
        right: calc(100vw / 72 * 2);
      }
    }
@media (min-width: 1600px) {

  [dir] .isLauncher .Slider-button_10d388bb {
      padding: 1.25rem
  }

      .isLauncher .Slider-button_10d388bb:nth-child(1) {
        -webkit-align-items: flex-end;
            -ms-flex-align: end;
                align-items: flex-end;
        width: calc(100vw / 72 * 2 + 5.63rem);
      }

      [dir=ltr] .isLauncher .Slider-button_10d388bb:nth-child(1) {
  left: 0;
      }

      [dir=rtl] .isLauncher .Slider-button_10d388bb:nth-child(1) {
        right: 0;
      }

      .isLauncher .Slider-button_10d388bb:nth-child(2) {
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
        height: calc(100% - 1.05rem);
      }
    }
@media (min-width: 2135px) {
      .isLauncher .Slider-button_10d388bb:nth-child(1) {
        /*
          sidebarWidth: 12;
          columnSize: 100vw / var(--grid-column-count--xxl)
          availableSpace: (100vw - (columnSize * var(--grid-sidebar-width--xxl));
          contentWidth: ((columnSize * 6) + var(--content-max-width)))
          remainingSpace: availableSpace - contentWidth
          leftWidth: remainingSpace * 0.5
        */
        width: calc(((100vw - (100vw / 72 * 12)) - ((100vw / 72 * 6) + 100rem)) * 0.5);

        /* cover previous slide */
        height: calc(100% - (100vw / 72 * 0.5 * 1.125));
      }

      .isLauncher .Slider-button_10d388bb:nth-child(2) {
        /*
          sidebarWidth: 12;
          columnSize: 100vw / var(--grid-column-count--xxl)
          availableSpace: (100vw - (columnSize * var(--grid-sidebar-width--xxl));
          contentWidth: ((columnSize * 6) + var(--content-max-width)))
          remainingSpace: availableSpace - contentWidth
          rightWidth: remainingSpace * 0.5 + (columnSize * 2)
        */
        width: calc(((100vw - (100vw / 72 * 12)) - ((100vw / 72 * 6) + 100rem)) * 0.5 + (100vw / 72 * 2));
      }
    }
.Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, .Slider-button_10d388bb:hover .Slider-arrow_a702238d::before {
      opacity: 1;
    }
.Slider-button_10d388bb:focus .Slider-arrow_a702238d::after, .Slider-button_10d388bb:hover .Slider-arrow_a702238d::after {
      opacity: 1;
    }
.Slider-icon_2b29cfa7 {
  color: currentColor;
}
[dir] .Slider-icon_2b29cfa7 {
  margin: 0.94rem;
}
[dir=ltr] .Slider-prev_243f2f47 .Slider-icon_2b29cfa7 {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }
[dir=rtl] .Slider-prev_243f2f47 .Slider-icon_2b29cfa7 {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
    }
[dir=rtl] .Slider-next_7fba5931 .Slider-icon_2b29cfa7 {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }
.Slider-slider_9adc54ca:hover .Slider-button_10d388bb:hover .Slider-icon_2b29cfa7 {
    color: var(--theme-custom-color-accent-text);
  }
.Slider-arrow_a702238d {
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;

  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: var(--theme-custom-color-primary-bg);
  opacity: 0
}
[dir] .Slider-arrow_a702238d {
  -webkit-transition: opacity 200ms ease
}
@media (min-width: 768px) {
.Slider-arrow_a702238d {
    height: 3.13rem;
    width: 3.13rem;
    clip: initial;
}

    .Slider-arrow_a702238d .Slider-buttonLabel_6fd1b646 {
      /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
      position: absolute;
      height: 0.06rem;
      width: 0.06rem;
      overflow: hidden;
      clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
    }
  }
.Slider-button_10d388bb:focus .Slider-arrow_a702238d::before,
  .Slider-arrow_a702238d::before {
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;

    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    z-index: -2;
  }
[dir] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir] .Slider-arrow_a702238d::before {
    -webkit-transition: opacity 200ms ease;
    background-color: var(--theme-custom-color-primary-text);
  }
[dir=ltr] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir=ltr] .Slider-arrow_a702238d::before {
 left: 0;
  }
[dir=rtl] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir=rtl] .Slider-arrow_a702238d::before {
    right: 0;
  }
.Slider-button_10d388bb:focus .Slider-arrow_a702238d::before,
  .Slider-arrow_a702238d::after {
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;

    content: '';
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: -1;
  }
[dir] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir] .Slider-arrow_a702238d::after {
    -webkit-transition: opacity 200ms ease;
    background-color: var(--theme-custom-color-accent-hover);
  }
[dir=ltr] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir=ltr] .Slider-arrow_a702238d::after {
 left: 0;
  }
[dir=rtl] .Slider-button_10d388bb:focus .Slider-arrow_a702238d::before, [dir=rtl] .Slider-arrow_a702238d::after {
    right: 0;
  }
.Slider-button_10d388bb:focus .Slider-arrow_a702238d,
  .Slider-arrow_a702238d:hover::before,
  .Slider-slider_9adc54ca:hover .Slider-arrow_a702238d {
    opacity: 1;
  }
@media (min-width: 1024px) {

  [dir] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
      margin-top: calc(1.25rem / -2)
  }

  [dir=ltr] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
  margin-left: calc(1.25rem + 0.63rem)
  }

  [dir=rtl] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
      margin-right: calc(1.25rem + 0.63rem)
  }
    }
@media (min-width: 1280px) {

  [dir] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
      margin-top: calc(1.88rem / -2)
  }

  [dir=ltr] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
  margin-left: calc(1.88rem + 0.63rem)
  }

  [dir=rtl] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
      margin-right: calc(1.88rem + 0.63rem)
  }
    }
@media (min-width: 1600px) {

  [dir=ltr] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
  margin-left: 0.63rem
  }

  [dir=rtl] .Slider-notCentered_62318c52 .Slider-arrow_a702238d {
      margin-right: 0.63rem
  }
    }
.Slider-sliderDotsWrapper_4d4732f5 {
  display: none
}
[dir] .Slider-sliderDotsWrapper_4d4732f5 {
  margin-top: 1.25rem
}
@media (min-width: 768px) {
.Slider-sliderDotsWrapper_4d4732f5 {
    display: block
}
  }
@media (min-width: 1024px) {
.Slider-sliderDotsWrapper_4d4732f5 {
    -webkit-transform: translateY(-0.38rem);
        -ms-transform: translateY(-0.38rem)
}
[dir] .Slider-sliderDotsWrapper_4d4732f5 {
    margin-top: 0;
            transform: translateY(-0.38rem)
}
  }
@media (min-width: 768px) {
.Slider-dots_4cb75b05 {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center
}
  }
.Slider-dotWrapper_7a667fef {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .Slider-dotWrapper_7a667fef {
  padding: 0.31rem 0.63rem;
  cursor: pointer;
}
.Slider-dotWrapper_7a667fef::before {
  position: absolute;
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}
.Slider-dotWrapper_7a667fef:hover::before {
  z-index: 9;
}
.Slider-dot_cc4360b7 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  width: 4Px;
  height: 4Px;
  opacity: 0.3;
  display: inline-block;
  position: relative;
}
[dir] .Slider-dot_cc4360b7 {
  -webkit-transition: opacity 125ms ease-in-out;
  border-radius: 100%;
  background-color: currentColor;
}
.Slider-dot_cc4360b7::before {
  transition: -webkit-transform 200ms ease;
  -o-transition: transform 200ms ease;
  transition: transform 200ms ease;
  transition: transform 200ms ease, -webkit-transform 200ms ease;

  content: '';
  display: block;
  position: absolute;
  width: 10Px;
  height: 10Px;
  top: 50%;
  opacity: 0.1;
}
[dir] .Slider-dot_cc4360b7::before {
  -webkit-transition: -webkit-transform 200ms ease;
  border-radius: 100%;
  border: 4Px solid;
}
[dir=ltr] .Slider-dot_cc4360b7::before {
 left: 50%;
 -webkit-transform: translate(-50%, -50%) scale(0);
 -ms-transform: translate(-50%, -50%) scale(0);
 transform: translate(-50%, -50%) scale(0);
}
[dir=rtl] .Slider-dot_cc4360b7::before {
  right: 50%;
  -webkit-transform: translate(50%, -50%) scale(0);
      -ms-transform: translate(50%, -50%) scale(0);
          transform: translate(50%, -50%) scale(0);
}
.Slider-dotWrapper_7a667fef:focus .Slider-dot_cc4360b7, .Slider-dotWrapper_7a667fef:active .Slider-dot_cc4360b7, .Slider-dotWrapper_7a667fef:hover .Slider-dot_cc4360b7 {
    opacity: 1;
    -webkit-transition-duration: 0s;
         -o-transition-duration: 0s;
  }
[dir] .Slider-dotWrapper_7a667fef:focus .Slider-dot_cc4360b7, [dir] .Slider-dotWrapper_7a667fef:active .Slider-dot_cc4360b7, [dir] .Slider-dotWrapper_7a667fef:hover .Slider-dot_cc4360b7 {
            transition-duration: 0s;
  }
[dir] .Slider-dotWrapper_7a667fef[focus-within] {
  border: solid 1Px transparent;
}
[dir] .Slider-dotWrapper_7a667fef:focus-within {
  border: solid 1Px transparent;
}
.Slider-dotWrapper_7a667fef[focus-within]:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Slider-dotWrapper_7a667fef[focus-within]:focus {
    border-color: #fff;
  }
.Slider-dotWrapper_7a667fef:focus-within:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Slider-dotWrapper_7a667fef:focus-within:focus {
    border-color: #fff;
  }
.Slider-dotWrapper_7a667fef[focus-within] {

  opacity: 1;
  outline: 0;
}
[dir] .Slider-dotWrapper_7a667fef[focus-within] {
  border-color: #fff;
}
.Slider-dotWrapper_7a667fef:focus-within {

  opacity: 1;
  outline: 0;
}
[dir] .Slider-dotWrapper_7a667fef:focus-within {
  border-color: #fff;
}
.Slider-dotWrapper_7a667fef input:checked ~ .Slider-dot_cc4360b7 {
  opacity: 1
}
[dir=ltr] .Slider-dotWrapper_7a667fef input:checked ~ .Slider-dot_cc4360b7::before {
 -webkit-transform: translate(-50%, -50%) scale(1);
 -ms-transform: translate(-50%, -50%) scale(1);
 transform: translate(-50%, -50%) scale(1);
  }
[dir=rtl] .Slider-dotWrapper_7a667fef input:checked ~ .Slider-dot_cc4360b7::before {
    -webkit-transform: translate(50%, -50%) scale(1);
        -ms-transform: translate(50%, -50%) scale(1);
            transform: translate(50%, -50%) scale(1);
  }
.Slider-input_51f7e302 {
  clip: rect(0 0 0 0);
  height: 0.06rem;
  overflow: hidden;
  position: absolute;
  width: 0.06rem;

  width: 0.31rem;
  height: 0.31rem;
}
[dir] .Slider-input_51f7e302 {
  border: 0;
  margin: -0.06rem;
  padding: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ScrollingText-wrapper_ba006e0a {
  display: block;
  overflow: hidden;
}
.ScrollingText-column_c21e3143 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ScrollingText-inner_fabaee7f {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;
}
[dir] .ScrollingText-inner_fabaee7f {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
}
.ScrollingText-otherLineWrapper_4aa6559e {
  height: 0;
}
[dir] .ScrollingText-isVisible_870282a1 {
  background: green;
}
[dir] .ScrollingText-isHidden_f2b5610c {
  background: red;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CounterTitle-wrapper_424ac088 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.CounterTitle-primary_c88ec205 {
  font-size: inherit
}
.CounterTitle-primary_c88ec205:not(:only-child) {
    opacity: 0.5;
  }
.CounterTitle-secondary_aa4e3992 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
[dir=ltr] .CounterTitle-secondary_aa4e3992 {
 margin-left: 0.88rem;
}
[dir=rtl] .CounterTitle-secondary_aa4e3992 {
  margin-right: 0.88rem;
}
.CounterTitle-button_4b083266 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  opacity: 0.5;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DiscountAmount-hiddenScreenReader_b98454d9 {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DownloadBar-main_4592350d {
  height: 0.19rem;
  width: 100%;
  display: none
}
@media (min-width: 1024px) {
.DownloadBar-main_4592350d {
    display: block
}
  }
[dir] .DownloadBar-error_403ee71b {
  background-color: #e63c3c;
}
[dir] .DownloadBar-inactive_ecda6003 {
  background-color: rgba(255, 255, 255, 0.3);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LoadingBar-main_ed74e329 {
  width: 100%;
  height: 0.19rem;
  overflow: hidden;
}
.LoadingBar-bar_95053c02 {
  height: 100%;
  -o-transition: height 0.3s ease-out;
  transition: height 0.3s ease-out;
}
[dir] .LoadingBar-bar_95053c02 {
  -webkit-transition: height 0.3s ease-out;
}
[dir] .LoadingBar-foregroundDefaultBg_ce68efec {
  background-color: #0078f2;
}
[dir] .LoadingBar-background_bbb62745 {
  background-color: #202020;
}
.LoadingBar-foregroundInvisible_a2360146 {
  height: 0;
}
.LoadingBar-foregroundSolid_bb8d139c {
  width: 0;
  -o-transition: width 1s ease-out;
  transition: width 1s ease-out;
}
[dir] .LoadingBar-foregroundSolid_bb8d139c {
  -webkit-transition: width 1s ease-out;
}
.LoadingBar-foregroundIndeterminate_a6bc48e4 {
  width: 100%;
}
.LoadingBar-small_b68e40e7 {
  width: 1.88rem;
}
.LoadingBar-small_b68e40e7 .LoadingBar-foregroundSolid_bb8d139c {
    -webkit-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
  }
[dir] .LoadingBar-small_b68e40e7 .LoadingBar-foregroundSolid_bb8d139c {
            transition-duration: 0.5s;
  }
[dir=ltr] .LoadingBar-small_b68e40e7 .LoadingBar-foregroundIndeterminate_a6bc48e4 {
 -webkit-animation-duration: 0.8s;
 animation-duration: 0.8s;
  }
[dir=rtl] .LoadingBar-small_b68e40e7 .LoadingBar-foregroundIndeterminate_a6bc48e4 {
    -webkit-animation-duration: 0.8s;
            animation-duration: 0.8s;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DropDown-root_201e6182 {
  width: 100%;
  position: relative;
}
.DropDown-root_201e6182 button {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4;
  }
[dir] .DropDown-toggle_5c07b8b1 {
  border: solid 1Px transparent
}
.DropDown-toggle_5c07b8b1:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .DropDown-toggle_5c07b8b1:focus {
    border-color: #fff;
  }
.DropDown-toggle_5c07b8b1 {

  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  opacity: 0.75
}
[dir] .DropDown-toggle_5c07b8b1 {
  margin-bottom: 0.31rem;
  padding: 0.31rem
}
.DropDown-toggle_5c07b8b1.DropDown-isDisabled_817e401c {
    opacity: 0.3;
    pointer-events: none;
  }
.DropDown-toggle_5c07b8b1::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  outline: 0.06rem solid currentColor;
  opacity: 0;
}
[dir=ltr] .DropDown-toggle_5c07b8b1::before {
 left: 0;
}
[dir=rtl] .DropDown-toggle_5c07b8b1::before {
  right: 0;
}
.DropDown-toggle_5c07b8b1:not(.DropDown-isDisabled_817e401c):hover,
.DropDown-toggle_5c07b8b1:focus {
  opacity: 1;
}
.DropDown-toggle_5c07b8b1:focus::before {
  opacity: 0.25;
}
[dir=ltr] .DropDown-toggleLabel_dba019f0, [dir=ltr] .DropDown-toggleLabelPrefix_7e5a6ffc {
 margin-right: 0.31rem;
}
[dir=rtl] .DropDown-toggleLabel_dba019f0, [dir=rtl] .DropDown-toggleLabelPrefix_7e5a6ffc {
  margin-left: 0.31rem;
}
.DropDown-toggleLabelPrefix_7e5a6ffc {
  opacity: 0.6;
}
.DropDown-menu_2d4b0dee {
  color: #fff;
  width: 100%;
  position: absolute;
  z-index: 1000;
}
[dir] .DropDown-menu_2d4b0dee {
  background-color: #2b2b2b;
  border-radius: 0.19rem;
  padding: 0.63rem 0;
}
.DropDown-menuItem_5708e186 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  width: 100%;
  color: currentColor;
  display: block;
  position: relative;
  opacity: 0.5
}
[dir] .DropDown-menuItem_5708e186 {
  -webkit-transition: opacity 125ms ease-in-out;
  padding: 0.5rem 1.25rem
}
.DropDown-menuItem_5708e186:hover,
  .DropDown-menuItem_5708e186.DropDown-isSelected_93f0020e {
    opacity: 1;
  }
.DropDown-menuItem_5708e186:focus .DropDown-menuItemLabel_1be29228 {
    opacity: 1;
  }
[dir] .DropDown-menuItem_5708e186:focus .DropDown-menuItemLabel_1be29228 {
    border-bottom: 0.06rem solid #fff;
  }
.DropDown-menuItem_5708e186:hover .DropDown-menuItemLabel_1be29228::after {
    opacity: 1;
  }
.DropDown-menuItemLabel_1be29228 {
  position: relative
}
.DropDown-menuItemLabel_1be29228::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1Px;
    bottom: 0;
    opacity: 0;
  }
[dir] .DropDown-menuItemLabel_1be29228::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background-color: currentColor;
  }
[dir=ltr] .DropDown-menuItemLabel_1be29228::after {
 left: 0;
  }
[dir=rtl] .DropDown-menuItemLabel_1be29228::after {
    right: 0;
  }
.DropDown-icon_1ad5825c {
  color: currentColor;
  width: 8Px;
  height: 10Px;
  transition: -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir] .DropDown-icon_1ad5825c {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir=ltr] .DropDown-icon_1ad5825c {
 -webkit-transform: rotateZ(90deg);
 -ms-transform: rotate(90deg);
 transform: rotateZ(90deg);
}
[dir=rtl] .DropDown-icon_1ad5825c {
  -webkit-transform: rotateZ(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotateZ(-90deg);
}
[dir=ltr] .DropDown-iconUp_f7719b80 {
 -webkit-transform: rotateZ(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotateZ(-90deg);
}
[dir=rtl] .DropDown-iconUp_f7719b80 {
  -webkit-transform: rotateZ(90deg);
      -ms-transform: rotate(90deg);
          transform: rotateZ(90deg);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DynamicLogo-wrapper_6fb5bed4 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .DynamicLogo-wrapper_6fb5bed4 {
  -webkit-transition: opacity 125ms ease-in-out;
}
.DynamicLogo-logo_3af88135 {
  height: auto;
  width: 100%;
}
.DynamicLogo-tallRatio_aee6d298 .DynamicLogo-logo_3af88135 {
    height: 100%;
    width: auto;
  }
.DynamicLogo-smallContainer_c0a44c51 {
  width: 40%;
  min-width: 8.75rem
}
.DynamicLogo-smallContainer_c0a44c51.DynamicLogo-tallRatio_aee6d298 {
    height: 40%;
    min-height: 5.63rem;
  }
.DynamicLogo-tallContainer_f5ce5697 {
}
@media (min-width: 768px) {
.DynamicLogo-tallContainer_f5ce5697 {
    width: 50%;
    min-width: 13.13rem
}

    .DynamicLogo-tallContainer_f5ce5697.DynamicLogo-tallRatio_aee6d298 {
      height: 30%;
      min-height: 8.75rem;
    }
  }
.DynamicLogo-bannerContainer_fa370e6d {
  width: 65%;
  height: auto;
  min-width: 8.75rem
}
.DynamicLogo-bannerContainer_fa370e6d.DynamicLogo-tallRatio_aee6d298 {
    height: 32.5vh;
    min-height: 9.38rem;
    max-height: 15.63rem;
  }
@media (min-width: 576px) {
.DynamicLogo-bannerContainer_fa370e6d {
    width: 40%;
    min-width: 11.25rem;
    max-width: 25rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.EpicBackButton-centered_0fa84692 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.EpicBackButton-link_35359380 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: inherit;
}
[dir] .EpicBackButton-icon_2a8f5ff1 {
  margin-bottom: 0.88rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FriendStatus-button_29bc9d0b {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 5rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%
}
[dir] .FriendStatus-button_29bc9d0b {
  background-color: #202020;
  cursor: default;
  padding: 0 0.94rem
}
.FriendStatus-button_29bc9d0b::after {
    z-index: 1000;
  }
.FriendStatus-buttonActive_ad4216d3 {
  position: relative;
}
.FriendStatus-buttonActive_ad4216d3::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .FriendStatus-buttonActive_ad4216d3::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .FriendStatus-buttonActive_ad4216d3::after {
 left: 0;
  }
[dir=rtl] .FriendStatus-buttonActive_ad4216d3::after {
    right: 0;
  }
.FriendStatus-buttonActive_ad4216d3:hover::after {
    opacity: 0.1;
  }
[dir] .FriendStatus-buttonActive_ad4216d3 {

  cursor: pointer;
}
.FriendStatus-textWrapper_f9f8230d {
  color: #f4f4f4;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden
}
[dir] .FriendStatus-textWrapper_f9f8230d {
  margin: 0 0.94rem
}
@media (min-width: 1280px) {
[dir] .FriendStatus-textWrapper_f9f8230d {
    margin: 0 1.25rem
}
  }
.FriendStatus-textWrapper_f9f8230d span {
    display: block;
  }
.FriendStatus-primaryText_1eb5a6a0 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
}
[dir] .FriendStatus-primaryText_1eb5a6a0 {

  margin-bottom: -0.13rem;
}
.FriendStatus-secondaryText_ac6f7c7b {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;

  opacity: 0.5;
}
.FriendStatus-iconWrapper_2f8c9e17 {
  display: none
}
@media (min-width: 1280px) {
.FriendStatus-iconWrapper_2f8c9e17 {
    display: block
}
  }
.FriendStatus-ctaTextWrapper_48913897 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  font-weight: 500;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  bottom: 0;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  z-index: 100
}
[dir] .FriendStatus-ctaTextWrapper_48913897 {
  -webkit-transition: opacity 125ms ease-in-out;
  background-color: #353535
}
[dir=ltr] .FriendStatus-ctaTextWrapper_48913897 {
 padding-right: 0.94rem;
 right: 0
}
[dir=rtl] .FriendStatus-ctaTextWrapper_48913897 {
  padding-left: 0.94rem;
  left: 0
}
.FriendStatus-ctaTextWrapper_48913897::before {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 3.13rem;
  }
[dir=ltr] .FriendStatus-ctaTextWrapper_48913897::before {
 background-image: -webkit-gradient(linear, left top, right top, from(rgba(32, 32, 32, 0)), to(#353535));
 background-image: -webkit-linear-gradient(left, rgba(32, 32, 32, 0), #353535);
 background-image: -o-linear-gradient(left, rgba(32, 32, 32, 0), #353535);
 background-image: linear-gradient(to right, rgba(32, 32, 32, 0), #353535);
 left: 0;
 -webkit-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 transform: translateX(-100%);
  }
[dir=rtl] .FriendStatus-ctaTextWrapper_48913897::before {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(32, 32, 32, 0)), to(#353535));
    background-image: -webkit-linear-gradient(right, rgba(32, 32, 32, 0), #353535);
    background-image: -o-linear-gradient(right, rgba(32, 32, 32, 0), #353535);
    background-image: linear-gradient(to left, rgba(32, 32, 32, 0), #353535);
    right: 0;
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
  }
.FriendStatus-button_29bc9d0b:hover .FriendStatus-ctaTextWrapper_48913897 {
    opacity: 1;
  }
[dir] .FriendStatus-placeholder_83b804b3 .FriendStatus-placeholderAsset_06ad9447::after, [dir] .FriendStatus-placeholder_83b804b3 .FriendStatus-placeholderContent_d5ed3641 {
    background-color: var(--theme-custom-color-primary);
  }
.FriendStatus-placeholder_83b804b3 .FriendStatus-placeholderAsset_06ad9447::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .FriendStatus-placeholder_83b804b3 .FriendStatus-placeholderAsset_06ad9447::after {
    border-radius: 50%;
  }
.FriendStatus-placeholder_83b804b3 .FriendStatus-primaryText_1eb5a6a0 {
    height: 0.81rem;
    width: 5.63rem;
  }
[dir] .FriendStatus-placeholder_83b804b3 .FriendStatus-primaryText_1eb5a6a0 {
    margin-bottom: 0.44rem;
  }
.FriendStatus-placeholder_83b804b3 .FriendStatus-secondaryText_ac6f7c7b {
    height: 0.81rem;
    width: 6.56rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SmallSocialCard-wrapper_9aa7b829 {
  position: relative
}
.SmallSocialCard-wrapper_9aa7b829::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .SmallSocialCard-wrapper_9aa7b829::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .SmallSocialCard-wrapper_9aa7b829::after {
 left: 0;
  }
[dir=rtl] .SmallSocialCard-wrapper_9aa7b829::after {
    right: 0;
  }
.SmallSocialCard-wrapper_9aa7b829:hover::after {
    opacity: 0.1;
  }
.SmallSocialCard-wrapper_9aa7b829 {

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 15.94rem
}
[dir] .SmallSocialCard-wrapper_9aa7b829 {
  padding: 1.81rem 0.94rem
}
@media (min-width: 768px) {
.SmallSocialCard-wrapper_9aa7b829 {
    width: 18.44rem
}
[dir] .SmallSocialCard-wrapper_9aa7b829 {
    padding: 2.44rem 1.88rem
}
  }
@media (min-width: 1024px) {
.SmallSocialCard-wrapper_9aa7b829 {
    display: none
}
  }
[dir] .SmallSocialCard-wrapper_9aa7b829.SmallSocialCard-friends_ff04c488 {
    background-color: #202020;
  }
.SmallSocialCard-iconsWrapper_78ecb66e {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
}
[dir=ltr] .SmallSocialCard-iconsWrapper_78ecb66e {
 margin-left: 0.94rem;
}
[dir=rtl] .SmallSocialCard-iconsWrapper_78ecb66e {
  margin-right: 0.94rem;
}
.SmallSocialCard-iconsWrapper_78ecb66e > span:not(:only-child) {
    overflow: hidden;
  }
[dir] .SmallSocialCard-iconsWrapper_78ecb66e > span:not(:only-child) {
    border-radius: 50%;
  }
[dir=ltr] .SmallSocialCard-iconsWrapper_78ecb66e > span:not(:only-child) {
 margin-left: -1.69rem;
  }
[dir=rtl] .SmallSocialCard-iconsWrapper_78ecb66e > span:not(:only-child) {
    margin-right: -1.69rem;
  }
.SmallSocialCard-iconsWrapper_78ecb66e > span:first-child {
    z-index: 3;
  }
[dir=ltr] .SmallSocialCard-iconsWrapper_78ecb66e > span:first-child {
 margin-left: 0;
  }
[dir=rtl] .SmallSocialCard-iconsWrapper_78ecb66e > span:first-child {
    margin-right: 0;
  }
.SmallSocialCard-iconsWrapper_78ecb66e > span:nth-child(2) {
    z-index: 2;
  }
.SmallSocialCard-friends_ff04c488 .SmallSocialCard-iconsWrapper_78ecb66e > span:nth-child(2) {
      -webkit-filter: brightness(70%);
              filter: brightness(70%);
    }
.SmallSocialCard-iconsWrapper_78ecb66e > span:nth-child(3) {
    z-index: 1;
  }
.SmallSocialCard-friends_ff04c488 .SmallSocialCard-iconsWrapper_78ecb66e > span:nth-child(3) {
      -webkit-filter: brightness(50%);
              filter: brightness(50%);
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FriendStatusList-wrapper_cd81fa22 {
}
[dir] .FriendStatusList-wrapper_cd81fa22 li {
    margin-top: 0.63rem
  }
[dir] .FriendStatusList-wrapper_cd81fa22 li:first-child {
      margin-top: 0;
    }
.FriendStatusList-showLarge_c1f9954b {
  display: none
}
@media (min-width: 1024px) {
.FriendStatusList-showLarge_c1f9954b {
    display: block
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Grid-list_7b91293a {
  /* TODO Fix resetList style order issue:
     https://jira.it.epicgames.net/browse/OPP-10129
     https://jira.it.epicgames.net/browse/OPP-10515
     composes: resetList from global; */
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
[dir] .Grid-list_7b91293a {
  padding: 0;
  margin: 0 calc(1.25rem / -2);
}
@media (min-width: 1280px) {
[dir] .Grid-list_7b91293a {
    margin: 0 calc(1.25rem / -2);
}
  }
[dir] .Grid-list_7b91293a {

  margin-top: calc(0.94rem / -1);
}
[dir] .Grid-item_cd1811f7 {
  padding: calc(1.25rem / 2);
}
@media (min-width: 1280px) {
[dir] .Grid-item_cd1811f7 {
    padding: calc(1.25rem / 2);
}
  }
.Grid-item_cd1811f7 {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(100% / 2);
}
@media (min-width: 768px) {
.Grid-item_cd1811f7 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 3);
}
  }
@media (min-width: 1024px) {
.Grid-item_cd1811f7 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 4);
}
  }
@media (min-width: 1280px) {
.Grid-item_cd1811f7 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 5);
}
  }
[dir] .Grid-item_cd1811f7 {

  margin: 0.94rem 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.GameBox-wrapper_10f8f9ef {
  width: 100%;
  position: relative;
  display: block;
}
.GameBox-wrapperSize_096f29b8 {
  position: relative;
}
[dir] .GameBox-wrapperSize_096f29b8 {
  padding-bottom: 45%;
}
.GameBox-wrapperSize_096f29b8 .GameBox-inner_be9cb71d {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.GameBox-contentWrapper_dc3c1954 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.GameBox-backgroundImage_f1b8fa49 {
  transition: -webkit-filter 200ms ease;
  -o-transition: filter 200ms ease;
  transition: filter 200ms ease;
  transition: filter 200ms ease, -webkit-filter 200ms ease;

  -webkit-filter: grayscale(100%);

          filter: grayscale(100%);
}
[dir] .GameBox-backgroundImage_f1b8fa49 {
  -webkit-transition: -webkit-filter 200ms ease;
}
[dir] .GameBox-background_4e8fe73f {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
[dir] .GameBox-bgProgress_46b81888 {
  background-clip: content-box;
}
[dir=ltr] .GameBox-bgProgress_46b81888 {
 -webkit-transition: padding-right 200ms ease;
 -o-transition: padding-right 200ms ease;
 transition: padding-right 200ms ease;
 left: 0;
 padding-left: 0 !important;
}
[dir=rtl] .GameBox-bgProgress_46b81888 {
  -webkit-transition: padding-left 200ms ease;
  -o-transition: padding-left 200ms ease;
  transition: padding-left 200ms ease;

  right: 0;
  padding-right: 0 !important;
}
[dir] .GameBox-bgMissing_f4f1e2f7 {
  background: #121212 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAD9JREFUGBlj9Pf3n3T48OF3DDgAE0jS1tZWCIc8AxNIAp8isAJ8iuAKcClCUYBNEYYCdEWMQkJCDSBBbADkOwCQ9x5EdD1AMAAAAABJRU5ErkJggg==) repeat;
  background-size: auto;
}
.GameBox-logo_4f81c440 {
  width: 43%;
  height: 55%;
}
[dir] .GameBox-logo_4f81c440 {
  background-size: contain;
}
.GameBox-updating_ad3267b9 .GameBox-logo_4f81c440 {
    -webkit-filter: grayscale(70%);
            filter: grayscale(70%);
  }
.GameBox-logoMissing_6a7ffee5 {
  opacity: 0.5;
}
/* The grayscale filter doesn't work in IE,
   so we also layer in an overlay as backup */
.GameBox-overlay_a5cf567f {
  -o-transition: width 200ms ease;
  transition: width 200ms ease;
}
[dir] .GameBox-overlay_a5cf567f {
  -webkit-transition: width 200ms ease;

  background-color: rgba(32, 32, 32, 0.5);
}
[dir=ltr] .GameBox-overlay_a5cf567f {
 right: 0;
}
[dir=rtl] .GameBox-overlay_a5cf567f {
  left: 0;
}

.Popup-container_274582fa {
  position: relative;
  display: inline-block;
}

.Popup-content_b8485752 {
  position: absolute;
  top: calc(100% + 1.25rem);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

[dir] .Popup-content_b8485752 {
  background-color: #fff;
}

[dir=ltr] .Popup-content_b8485752 {
  -webkit-box-shadow: 0.38rem 0.44rem 2.38rem 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0.38rem 0.44rem 2.38rem 0 rgba(0, 0, 0, 0.35);
}

[dir=rtl] .Popup-content_b8485752 {
  -webkit-box-shadow: -0.38rem 0.44rem 2.38rem 0 rgba(0, 0, 0, 0.35);
          box-shadow: -0.38rem 0.44rem 2.38rem 0 rgba(0, 0, 0, 0.35);
}

.Popup-arrow_cd11bff7 {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(100% + 1.25rem - 0.63rem);
  width: 0;
  height: 0;
}

[dir] .Popup-arrow_cd11bff7 {
  border-style: solid;
  border-width: 0 0.44rem 0.63rem;
  border-color: transparent transparent #fff;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ListLayout-grid_b8a45dce,
.ListLayout-list_10289ac6 {
  list-style: none outside none;
}
[dir] .ListLayout-grid_b8a45dce, [dir] .ListLayout-list_10289ac6 {
  padding: 0;
  margin: 0;
}
.ListLayout-grid_b8a45dce {
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  min-width: 100%;
}
[dir] .ListLayout-grid_b8a45dce {
  margin: 0 calc(1.25rem / -2);
}
.ListLayout-list_10289ac6 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.ListLayout-gridItem_1d6b0c0a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: calc(100% / 2);
      -ms-flex-preferred-size: calc(100% / 2);
          flex-basis: calc(100% / 2);
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: calc(100% / 2)
}
[dir] .ListLayout-gridItem_1d6b0c0a {
  padding: 0 calc(1.25rem / 2) 3.19rem
}
@media (min-width: 576px) {
.ListLayout-gridItem_1d6b0c0a {
    -webkit-flex-basis: calc(100% / 3);
        -ms-flex-preferred-size: calc(100% / 3);
            flex-basis: calc(100% / 3);
    width: calc(100% / 3)
}
  }
@media (min-width: 768px) {
.ListLayout-gridItem_1d6b0c0a {
    -webkit-flex-basis: calc(100% / 4);
        -ms-flex-preferred-size: calc(100% / 4);
            flex-basis: calc(100% / 4);
    width: calc(100% / 4)
}
  }
@media (min-width: 1024px) {
.ListLayout-gridItem_1d6b0c0a {
    -webkit-flex-basis: calc(100% / 5);
        -ms-flex-preferred-size: calc(100% / 5);
            flex-basis: calc(100% / 5);
    width: calc(100% / 5)
}
  }
@media (min-width: 1600px) {
.ListLayout-gridItem_1d6b0c0a {
    -webkit-flex-basis: calc(100% / 6);
        -ms-flex-preferred-size: calc(100% / 6);
            flex-basis: calc(100% / 6);
    width: calc(100% / 6)
}
  }
.ListLayout-listItem_a84858a2 {
  width: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LoadingBarPortal-loadingBar_6406b2db {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000005;
}
[dir=ltr] .LoadingBarPortal-loadingBar_6406b2db {
 left: 0;
}
[dir=rtl] .LoadingBarPortal-loadingBar_6406b2db {
  right: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.OffsetAnchor-el_2869d98e {
  position: relative;
  top: calc((5rem * 2 + 0.94rem) * -1);
}
.isLauncher .OffsetAnchor-el_2869d98e {
    top: auto;
    bottom: calc(5rem + 3.13rem);
  }
@media (min-width: 768px) {
.OffsetAnchor-el_2869d98e {
    top: calc((5rem * 2 + 0.94rem) * -1);
    width: 100%;
}

    .isLauncher .OffsetAnchor-el_2869d98e {
      top: auto;
      bottom: calc(5rem + 3.13rem);
    }
  }
@media (min-width: 1024px) {
.OffsetAnchor-el_2869d98e {
    bottom: calc(6.25rem + 3.19rem);
}

    .isLauncher .OffsetAnchor-el_2869d98e {
      bottom: 5rem;
    }
  }
@media (min-width: 1280px) {
.OffsetAnchor-el_2869d98e {
    bottom: calc(6.25rem + 3.75rem);
}

    .isLauncher .OffsetAnchor-el_2869d98e {
      bottom: 6.88rem;
    }
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Overlay-root_1dbc7aac {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 11;
}
[dir] .Overlay-root_1dbc7aac {
  background-color: rgba(0, 0, 0, 0.7);
}
[dir=ltr] .Overlay-root_1dbc7aac {
 left: 0;
}
[dir=rtl] .Overlay-root_1dbc7aac {
  right: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.PaginationSlots-container_f3233c94 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir] .PaginationSlots-container_f3233c94 {
  margin: 0;
  padding: 0;
}
.PaginationSlots-slotItem_152b82cd {
}
[dir] .PaginationSlots-slotItem_152b82cd {
  padding: 0 0.94rem;
}
.PaginationSlots-ellipsis_7e62a665 {
  font-size: 1rem;
  line-height: normal;
  color: rgba(255, 255, 255, 0.4);
}
.PaginationSlots-pageLink_603b81d5 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.4);
  height: auto;
  min-width: auto !important;
}
[dir] .PaginationSlots-pageLink_603b81d5 {

  background-color: rgba(0, 0, 0, 0);
  padding: 0;
}
.PaginationSlots-pageLink_603b81d5:hover {
  color: #fff;
}
[dir] .PaginationSlots-pageLink_603b81d5:hover {
  background: rgba(0, 0, 0, 0) !important;
}
.PaginationSlots-pageLinkSelected_fffe1b5c {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #fff;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Pagination-container_2f5383cc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.Pagination-buttons_cf6cd6fe {
  color: rgba(255, 255, 255, 0.4);
  height: 1.25rem;
  min-width: auto !important;
  width: 2.5rem;
}
[dir] .Pagination-buttons_cf6cd6fe {
  background-color: rgba(0, 0, 0, 0);
  padding: 0 0.94rem;
}
.Pagination-buttons_cf6cd6fe:hover {
  color: #fff;
}
[dir] .Pagination-buttons_cf6cd6fe:hover {
  background: rgba(0, 0, 0, 0) !important;
}
.Pagination-arrowIcon_201c15bb {
  color: currentColor;
  height: 0.69rem;
  width: 0.69rem;
}
.Pagination-arrowIcon_201c15bb:hover {
  color: currentColor;
}
[dir=ltr] .Pagination-arrowLeftIcon_46ca5834 {
 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
}
[dir=rtl] .Pagination-arrowLeftIcon_46ca5834 {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.AlertPrompts-window_cfe363cd {
  display: none;
}
.AlertPrompts-showWindow_7afa8bb0 {
  position: fixed;
  top: 0;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 99999;
}
[dir] .AlertPrompts-showWindow_7afa8bb0 {
  background: rgba(0, 0, 0, 0.5);
  padding: 10%;
}
[dir=ltr] .AlertPrompts-showWindow_7afa8bb0 {
 left: 0;
 right: 0;
}
[dir=rtl] .AlertPrompts-showWindow_7afa8bb0 {
  right: 0;
  left: 0;
}
.AlertPrompts-content_18894220 {
  display: block;
  min-width: 18.75rem;
  max-width: 28rem;
  text-decoration: none;
}
[dir] .AlertPrompts-content_18894220 {
  background: #202020;
  padding: 3rem;
  text-align: center;
}
.AlertPrompts-title_5df054cd {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
}
.AlertPrompts-description_832dde93 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  color: rgba(255, 255, 255, 0.5);
  text-transform: none;
}
[dir] .AlertPrompts-description_832dde93 {
  margin-bottom: 1.88rem;
}
.AlertPrompts-buttons_cefb735b {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .AlertPrompts-buttons_cefb735b > button {
    margin: 0 auto;
    margin-bottom: 0.63rem
  }
[dir] .AlertPrompts-buttons_cefb735b > button:last-child {
      margin-bottom: 0;
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RadioGroup-form_6b3572fd {
  height: 100%;
}
.RadioGroup-wrapper_3a3501b8 input:checked ~ .RadioGroup-label_cc1e0158,
.RadioGroup-wrapper_3a3501b8 input:not(:disabled) ~ .RadioGroup-label_cc1e0158:hover {
  opacity: 1;
}
[dir] .RadioGroup-wrapper_3a3501b8 input:not(:disabled) ~ .RadioGroup-label_cc1e0158 {
  cursor: pointer;
}
[dir] .RadioGroup-wrapper_3a3501b8 input:disabled ~ .RadioGroup-label_cc1e0158 {
  cursor: not-allowed;
}
[dir=ltr] .RadioGroup-wrapper_3a3501b8:not(:last-of-type) {
 margin-right: 1.25rem;
}
[dir=rtl] .RadioGroup-wrapper_3a3501b8:not(:last-of-type) {
  margin-left: 1.25rem;
}
.RadioGroup-label_cc1e0158 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;
  display: inline-block;
  outline: 0;
  position: relative;
}
[dir] .RadioGroup-label_cc1e0158 {
  -webkit-transition: opacity 125ms ease-in-out;
}
.RadioGroup-label_cc1e0158::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-width: 2.5rem;
    min-height: 2.5rem;
    position: absolute;
    top: 50%;
  }
[dir] .RadioGroup-label_cc1e0158::before {
    border: 1Px solid transparent;
  }
[dir=ltr] .RadioGroup-label_cc1e0158::before {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  }
[dir=rtl] .RadioGroup-label_cc1e0158::before {
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
.RadioGroup-label_cc1e0158:focus::before {
    /* This media query makes it so the focus state only displays for desktop */
  }
@media (hover: hover) {
.RadioGroup-label_cc1e0158:focus::before {
      outline: 0;
      opacity: 0.25
  }
[dir] .RadioGroup-label_cc1e0158:focus::before {
      border-color: var(--theme-custom-color-primary-text)
  }
    }
.RadioGroup-label_cc1e0158 {

  opacity: 0.3;
  height: 100%;
}
.RadioGroup-visuallyHidden_f6cda9e6 {
  clip: rect(0 0 0 0);
  height: 0.06rem;
  overflow: hidden;
  position: absolute;
  width: 0.06rem;
}
[dir] .RadioGroup-visuallyHidden_f6cda9e6 {
  border: 0;
  margin: -0.06rem;
  padding: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .SectionWrapper-content_d9895861 {
  margin: 0 auto;
}
.isLauncher .SectionWrapper-content_d9895861 {
  max-width: 120rem;
}
[dir] .SectionWrapper-vertical_c5c45a04 {
  margin-bottom: 3.75rem
}
[dir] .SectionWrapper-vertical_c5c45a04:last-child {
    margin-bottom: 0;
  }
@media (min-width: 768px) {
[dir] .SectionWrapper-vertical_c5c45a04 {
    margin-bottom: calc(3.19rem + 1.25rem)
}
  }
@media (min-width: 1280px) {
[dir] .SectionWrapper-vertical_c5c45a04 {
    margin-bottom: calc(3.75rem + 1.25rem)
}
  }
[dir] .SectionWrapper-verticalInset_98ccc500 {
  margin: calc(0.94rem * 2) 0
}
@media (min-width: 768px) {
[dir] .SectionWrapper-verticalInset_98ccc500 {
    margin: 4.38rem 0
}
  }
@media (min-width: 1280px) {
[dir] .SectionWrapper-verticalInset_98ccc500 {
    margin: 6.25rem 0
}
  }
@media (min-width: 1280px) {
[dir] .SectionWrapper-horizontalInset_78f5fd4b {
    padding: 0 6.25rem
}
  }
.SectionWrapper-horizontalInset_78f5fd4b .SectionWrapper-content_d9895861 {
    max-width: 100rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SmartButton-wrapper_334e6071 {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative
}
.SmartButton-wrapper_334e6071.SmartButton-large_948c29a8 button {
    height: 4.06rem;
  }
.SmartButton-wrapper_334e6071.SmartButton-hideTheme_d9ed24d6:not(:hover) button {
    color: var(--theme-custom-color-primary-text);
  }
[dir] .SmartButton-wrapper_334e6071.SmartButton-hideTheme_d9ed24d6:not(:hover) button {
    background-color: var(--theme-custom-color-primary-highlight);
  }
.SmartButton-mainButton_d8d5a0bb {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1
}
.SmartButton-mainButton_d8d5a0bb.SmartButton-noEvent_0987382a {
    pointer-events: none;
  }
[dir] .SmartButton-mainButton_d8d5a0bb.SmartButton-noEvent_0987382a {
    cursor: default;
  }
[dir=ltr] .SmartButton-mainButton_d8d5a0bb.SmartButton-alignLeft_43fe1ec8 {
 text-align: left;
  }
[dir=rtl] .SmartButton-mainButton_d8d5a0bb.SmartButton-alignLeft_43fe1ec8 {
    text-align: right;
  }
.SmartButton-mainButton_d8d5a0bb {

  /* case: if there is only one sub button */
}
[dir=ltr] .SmartButton-large_948c29a8 .SmartButton-mainButton_d8d5a0bb:not(:only-of-type) {
 padding: 0 0 0 1.5rem;
  }
[dir=rtl] .SmartButton-large_948c29a8 .SmartButton-mainButton_d8d5a0bb:not(:only-of-type) {
    padding: 0 1.5rem 0 0;
  }
[dir] .SmartButton-mainButton_d8d5a0bb:nth-last-of-type(2) ~ .SmartButton-iconButton_9c39bcaa {
    padding: 0 1.25rem;
  }
[dir] .SmartButton-large_948c29a8 .SmartButton-mainButton_d8d5a0bb:nth-last-of-type(2) ~ .SmartButton-iconButton_9c39bcaa {
      padding: 0 1.5rem;
    }
.SmartButton-iconButton_9c39bcaa {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: relative;
}
[dir=ltr] :not(.SmartButton-large_948c29a8) .SmartButton-iconButton_9c39bcaa {
 padding-left: 1rem
  }
[dir=rtl] :not(.SmartButton-large_948c29a8) .SmartButton-iconButton_9c39bcaa {
    padding-right: 1rem
  }
[dir=ltr] :not(.SmartButton-large_948c29a8) .SmartButton-iconButton_9c39bcaa:not(:last-of-type) {
 padding-right: 1rem;
    }
[dir=rtl] :not(.SmartButton-large_948c29a8) .SmartButton-iconButton_9c39bcaa:not(:last-of-type) {
      padding-left: 1rem;
    }
[dir=ltr] .SmartButton-large_948c29a8 .SmartButton-iconButton_9c39bcaa:last-of-type {
 padding-right: 1.5rem;
  }
[dir=rtl] .SmartButton-large_948c29a8 .SmartButton-iconButton_9c39bcaa:last-of-type {
    padding-left: 1.5rem;
  }
.SmartButton-iconButton_9c39bcaa ~ .SmartButton-iconButton_9c39bcaa::before {
    content: '';
    position: absolute;
    height: 20%;
    top: 40%;
    width: 0.06rem;
    opacity: 0.2;
    z-index: 2;
  }
[dir] .SmartButton-iconButton_9c39bcaa ~ .SmartButton-iconButton_9c39bcaa::before {
    background-color: currentColor;
  }
[dir=ltr] .SmartButton-iconButton_9c39bcaa ~ .SmartButton-iconButton_9c39bcaa::before {
 left: 0;
  }
[dir=rtl] .SmartButton-iconButton_9c39bcaa ~ .SmartButton-iconButton_9c39bcaa::before {
    right: 0;
  }
:disabled .SmartButton-icon_1d08fa0d {
  opacity: 0.3;
}
/* Content that will show up on top of the progress wrapper */
.SmartButton-topContent_e7bbb581 {
  position: relative;
  z-index: 2;
}
.SmartButton-progressWrapper_3cbd774f {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
[dir=ltr] .SmartButton-progressWrapper_3cbd774f {
 left: 0;
}
[dir=rtl] .SmartButton-progressWrapper_3cbd774f {
  right: 0;
}
.SmartButton-progress_6210b543 {
  -o-transition: width 200ms ease;
  transition: width 200ms ease;

  height: 100%;
}
[dir] .SmartButton-progress_6210b543 {
  -webkit-transition: width 200ms ease;
  background-color: rgba(255, 255, 255, 0.2);
}
.SmartButton-indeterminate_4a5dc3bc {
  width: 100% !important;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SocialCard-wrapper_e47739cd {
  position: relative
}
.SocialCard-wrapper_e47739cd::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .SocialCard-wrapper_e47739cd::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .SocialCard-wrapper_e47739cd::after {
 left: 0;
  }
[dir=rtl] .SocialCard-wrapper_e47739cd::after {
    right: 0;
  }
.SocialCard-wrapper_e47739cd:hover::after {
    opacity: 0.1;
  }
.SocialCard-wrapper_e47739cd::after {
    z-index: 2;
  }
[dir] .SocialCard-backgroundColor_c8ab3ac8 {
  background-color: #202020;
}
.SocialCard-button_429b4ff9 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 1
}
[dir] .SocialCard-button_429b4ff9 {
  padding: 1.5rem 0.94rem
}
@media (min-width: 768px) {
[dir] .SocialCard-button_429b4ff9 {
    padding: 2.5rem
}
  }
.SocialCard-heading_75bf2f3a {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
}
.SocialCard-iconsWrapper_a34de23c {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir=ltr] .SocialCard-iconsWrapper_a34de23c {
 padding-left: 0.94rem;
}
[dir=rtl] .SocialCard-iconsWrapper_a34de23c {
  padding-right: 0.94rem;
}
.SocialCard-icon_3cf5ce1c {
  position: relative;
  z-index: 2
}
[dir=ltr] .SocialCard-icon_3cf5ce1c {
 margin-left: 0.63rem
}
[dir=rtl] .SocialCard-icon_3cf5ce1c {
  margin-right: 0.63rem
}
.SocialCard-icon_3cf5ce1c:first-child {
    z-index: 3;
  }
[dir=ltr] .SocialCard-icon_3cf5ce1c:first-child {
 margin-left: 0;
  }
[dir=rtl] .SocialCard-icon_3cf5ce1c:first-child {
    margin-right: 0;
  }
.SocialCard-icon_3cf5ce1c:nth-child(3) {
    z-index: 1;
  }
.SocialCard-icon_3cf5ce1c {

  /* cluster 2nd and 3rd avatars in set of 3 */
}
[dir=ltr] .SocialCard-icon_3cf5ce1c:first-child:nth-last-child(3) ~ span {
 margin-left: -1.13rem;
  }
[dir=rtl] .SocialCard-icon_3cf5ce1c:first-child:nth-last-child(3) ~ span {
    margin-right: -1.13rem;
  }
@media (min-width: 1024px) {
.SocialCard-icon_3cf5ce1c {
    height: 3.75rem;
    width: 3.75rem
}
  }
.SocialCard-cta_c4ee1d1c {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 1600px) {
.SocialCard-feed_bef60054 {
    width: 100%
}
  }
.SocialCard-feed_bef60054 .SocialCard-heading_75bf2f3a {
    max-width: 50%;
    min-width: 10.63rem
  }
@media (min-width: 768px) {

  .SocialCard-feed_bef60054 .SocialCard-heading_75bf2f3a {
      font-size: 1.25rem;
      letter-spacing: -0.01rem;
      line-height: 1.25;

      max-width: 70%
  }
    }
@media (min-width: 768px) {

  .SocialCard-feed_bef60054 .SocialCard-icon_3cf5ce1c {
      height: 3.75rem;
      width: 3.75rem
  }
    }
.SocialCard-rightRail_9d0a8db8 .SocialCard-button_429b4ff9 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column
  }
[dir] .SocialCard-rightRail_9d0a8db8 .SocialCard-button_429b4ff9 {
    text-align: center;
    padding: 20%
  }
@media (max-width: 1023px) {
  .SocialCard-rightRail_9d0a8db8 .SocialCard-button_429b4ff9 {
      display: none
  }
    }
.SocialCard-rightRail_9d0a8db8 .SocialCard-heading_75bf2f3a {
    opacity: 0.5;
  }
[dir] .SocialCard-rightRail_9d0a8db8 .SocialCard-heading_75bf2f3a {
    margin-top: 0.94rem;
    margin-bottom: 1.25rem;
  }
.SocialCard-rightRail_9d0a8db8 .SocialCard-iconsWrapper_a34de23c {
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
  }
[dir=ltr] .SocialCard-rightRail_9d0a8db8 .SocialCard-iconsWrapper_a34de23c {
 padding-left: 0;
  }
[dir=rtl] .SocialCard-rightRail_9d0a8db8 .SocialCard-iconsWrapper_a34de23c {
    padding-right: 0;
  }
@media (min-width: 768px) {
  [dir] .SocialCard-rightRailSingle_f4861b61 .SocialCard-button_429b4ff9 {
      padding: 1.5rem 0.94rem
  }
    }
@media (max-width: 1023px) {
  .SocialCard-rightRailSingle_f4861b61 .SocialCard-button_429b4ff9 {
      display: none
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .social-facebook-bg_4a3ad14e {
  background-color: #334985 !important;
}
[dir] .social-vk-bg_cb9fbb27 {
  background-color: #4e74a0 !important;
}
[dir] .social-steam-bg_87efc155 {
  background-color: #232323 !important;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Tag-tag_f48cdf8c {
  display: inline-block;
  color: #f4f4f4;
  text-transform: uppercase;
  font-size: 0.56rem;
  font-weight: 500;
  line-height: 0.5rem;
  letter-spacing: 0.41;
  position: relative;
}
[dir] .Tag-tag_f48cdf8c {
  background-color: rgba(244, 244, 244, 0.1);
  padding: 0.5rem 0.63rem 0.38rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Toggle-input_1cf97fba {
  display: none;
}
.Toggle-slider_b45950c1 {
  -o-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;
  position: relative;
}
[dir] .Toggle-slider_b45950c1 {
  -webkit-transition: all 125ms ease-in-out;

  background-color: #444;
  cursor: pointer;
}
.disableHeavyTransitions .Toggle-slider_b45950c1 {
    -o-transition: none;
    transition: none;
  }
[dir] .disableHeavyTransitions .Toggle-slider_b45950c1 {
    -webkit-transition: none;
  }
[dir=ltr] .disableHeavyTransitions .Toggle-slider_b45950c1 {
 -webkit-animation: unset !important;
 animation: unset !important;
  }
[dir=rtl] .disableHeavyTransitions .Toggle-slider_b45950c1 {
    -webkit-animation: unset !important;
            animation: unset !important;
  }
.Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -o-transition: all 125ms ease-in-out;
    transition: all 125ms ease-in-out;

    content: '';
    position: absolute;
    top: 0;
  }
[dir] .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -webkit-transition: all 125ms ease-in-out;
    background-color: #fff;
    background-clip: padding-box;
    border: 0.13rem solid transparent;
    border-radius: 50%;
  }
.disableHeavyTransitions .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -o-transition: none;
    transition: none;
  }
[dir] .disableHeavyTransitions .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -webkit-transition: none;
  }
[dir=ltr] .disableHeavyTransitions .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
 -webkit-animation: unset !important;
 animation: unset !important;
  }
[dir=rtl] .disableHeavyTransitions .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -webkit-animation: unset !important;
            animation: unset !important;
  }
.Toggle-slider_b45950c1.Toggle-disabled_d2bc1e5f {
    pointer-events: none;
  }
[dir] .Toggle-slider_b45950c1.Toggle-disabled_d2bc1e5f {
    background-color: #444;
    cursor: not-allowed;
  }
[dir] .Toggle-slider_b45950c1.Toggle-disabled_d2bc1e5f span {
      background-color: rgba(255, 255, 255, 0.5);
    }
[dir] input:checked + .Toggle-slider_b45950c1 {
  background-color: #0078f2;
}
[dir=ltr] input:checked + .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
 -webkit-transform: translateX(calc(100% - 0.25rem));
 -ms-transform: translateX(calc(100% - 0.25rem));
 transform: translateX(calc(100% - 0.25rem));
  }
[dir=rtl] input:checked + .Toggle-slider_b45950c1 .Toggle-indicator_822e6c2b {
    -webkit-transform: translateX(calc(-1*(100% - 0.25rem)));
        -ms-transform: translateX(calc(-1*(100% - 0.25rem)));
            transform: translateX(calc(-1*(100% - 0.25rem)));
  }
input:checked + .Toggle-slider_b45950c1.Toggle-disabled_d2bc1e5f {
    pointer-events: none;
  }
[dir] input:checked + .Toggle-slider_b45950c1.Toggle-disabled_d2bc1e5f {
    background-color: #444;
    cursor: default;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Tooltip-tooltip_4bbc5a59 {
  position: relative;
}
.Tooltip-trigger_2e6a230a {
  display: inline-block;
  text-decoration: underline;
}
.Tooltip-bubble_2c379c60 {
  min-width: 8.75rem;
  max-width: 15.63rem;
  position: absolute;
  z-index: 10
}
.Tooltip-bubble_2c379c60::after {
    content: '';
    position: absolute;
  }
.Tooltip-top_81d7dccc {
  bottom: 100%
}
[dir] .Tooltip-top_81d7dccc {
  padding-bottom: 0.56rem
}
[dir=ltr] .Tooltip-top_81d7dccc {
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%)
}
[dir=rtl] .Tooltip-top_81d7dccc {
  right: 50%;
  -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
          transform: translateX(50%)
}
.Tooltip-top_81d7dccc::after {
    bottom: 0;
  }
[dir] .Tooltip-top_81d7dccc::after {
    border-top: 0.56rem solid rgba(0, 0, 0, 0.7);
  }
[dir=ltr] .Tooltip-top_81d7dccc::after {
 border-left: 0.56rem solid transparent;
 border-right: 0.56rem solid transparent;
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
  }
[dir=rtl] .Tooltip-top_81d7dccc::after {
    border-right: 0.56rem solid transparent;
    border-left: 0.56rem solid transparent;
    right: 50%;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
  }
.Tooltip-message_6adabd53 {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
}
[dir] .Tooltip-message_6adabd53 {
  background: rgba(0, 0, 0, 0.7);
  padding: 0.75em;
  text-align: center;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NavigationVerticalMenu-root_65b5827a {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: currentColor;
}
.NavigationVerticalMenu-centered_ad2f847a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.NavigationVerticalMenu-list_884f876d {
  list-style: none;
}
[dir=ltr] .NavigationVerticalMenu-list_884f876d {
 padding-left: 0;
}
[dir=rtl] .NavigationVerticalMenu-list_884f876d {
  padding-right: 0;
}
[dir] .NavigationVerticalMenu-menu_d8ff6e2a {
  margin: 0;
}
.NavigationVerticalMenu-menuItem_edb11750 {
  width: 100%
}
[dir] .NavigationVerticalMenu-menuItem_edb11750 {
  text-align: center
}
[dir] .NavigationVerticalMenu-menuItem_edb11750:not(:only-child):first-child {
      margin-top: 0.63rem;
    }
[dir] .NavigationVerticalMenu-menuItem_edb11750:not(:only-child):last-child {
      margin-bottom: 0.63rem;
    }
.NavigationVerticalMenu-link_6eac5981 {
  color: inherit;
  display: inline-block;
  width: 100%;
}
[dir] .NavigationVerticalMenu-link_6eac5981 {
  padding: 1.25rem 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Autocomplete-autoCompleteResult_b7ec3185 {
  list-style: none;
  width: 100%
}
.Autocomplete-autoCompleteResult_b7ec3185:focus {
    outline: 0;
  }
.Autocomplete-autoCompleteResultLimit_4cdd9b34:nth-child(n+5):not(.Autocomplete-seeMore_da25a580) {
    display: none;
  }
.Autocomplete-autoCompleteResultLink_d0aac5b8 {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%
}
[dir] .Autocomplete-autoCompleteResultLink_d0aac5b8 {
  padding: 1.25rem
}
.Autocomplete-autoCompleteResultLink_d0aac5b8:focus {
    outline: 0;
  }
.Autocomplete-seeMore_da25a580 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir] .Autocomplete-seeMore_da25a580 {
  border-top: solid 0.06rem rgba(143, 143, 143, 0.2);
}
.Autocomplete-resultText_e9dad9de {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #fff;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
[dir] .Autocomplete-resultText_e9dad9de {
  border-bottom: solid 0.06rem transparent;
}
.Autocomplete-resultText_e9dad9de strong {
    font-weight: 700;
  }
[dir] .Autocomplete-resultText_e9dad9de strong {
    text-shadow: currentColor 0 0;
  }
[dir] .Autocomplete-resultText_e9dad9de:hover {
    border-color: #fff;
  }
.Autocomplete-resultText_e9dad9de:focus {
    outline: 0;
  }
[dir] .Autocomplete-active_8d375c94 .Autocomplete-resultText_e9dad9de {
    border-bottom: solid 0.06rem  #fff;
  }
.Autocomplete-searchAutocomplete_a1136db3 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  width: 100%
}
[dir] .Autocomplete-searchAutocomplete_a1136db3 {

  background-color: #121212;
  margin: 0;
  padding: 0 3.13rem
}
@media (min-width: 1024px) {
.Autocomplete-searchAutocomplete_a1136db3 {
    position: absolute;
    z-index: 1000;
    bottom: -0.63rem;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
    -webkit-box-shadow: 0 0.13rem 2.19rem 0 rgba(0, 0, 0, 0.5)
}
[dir] .Autocomplete-searchAutocomplete_a1136db3 {
            transform: translateY(100%);
    background-color: #2b2b2b;
    padding: 0;
            box-shadow: 0 0.13rem 2.19rem 0 rgba(0, 0, 0, 0.5)
}

    .Autocomplete-searchAutocomplete_a1136db3::before {
      height: 0;
      width: 0.38rem;

      position: absolute;
      top: 0;
      -webkit-transform: translateY(calc(-100% + 0.06rem));
          -ms-transform: translateY(calc(-100% + 0.06rem));
      content: '';
    }

    [dir] .Autocomplete-searchAutocomplete_a1136db3::before {
      border-bottom: 0.38rem solid #2b2b2b;
              transform: translateY(calc(-100% + 0.06rem));
    }

    [dir=ltr] .Autocomplete-searchAutocomplete_a1136db3::before {
  border-left: 0.38rem solid transparent;
  border-right: 0.38rem solid transparent;
  left: 8%;
    }

    [dir=rtl] .Autocomplete-searchAutocomplete_a1136db3::before {
      border-right: 0.38rem solid transparent;
      border-left: 0.38rem solid transparent;
      right: 8%;
    }
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SearchBar-searchContainer_bd274174 {
  position: relative;
}
.SearchBar-searchBarWrapper_75a8b555 {
  width: 100%;
  position: relative;
}
.SearchBar-link_44338245 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;

  opacity: 0.7;
  color: currentColor
}
[dir] .SearchBar-link_44338245 {
  -webkit-transition: opacity 200ms ease;
  padding: calc(0.94rem / 2)
}
.SearchBar-link_44338245:hover,
  .SearchBar-link_44338245:focus {
    opacity: 1;
  }
@media (min-width: 768px) {
[dir] .SearchBar-link_44338245 {
    padding: calc(1.25rem / 2)
}
  }
@media (min-width: 1024px) {
[dir] .SearchBar-link_44338245 {
    margin-bottom: 0.31rem;
}

    .SearchBar-isOpaque_9636ad2a .SearchBar-link_44338245 {
      color: #fff;
    }
  }
@media (min-width: 1280px) {
[dir] .SearchBar-link_44338245 {
    margin-bottom: 0
}
  }
.SearchBar-searchBar_1727c774 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%
}
@media (min-width: 1024px) {
[dir] .SearchBar-searchBar_1727c774 {
    padding: 0 0.94rem
}
  }
.SearchBar-searchBar_1727c774::before {
    -o-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;

    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    color: #252525;
  }
[dir] .SearchBar-searchBar_1727c774::before {
    -webkit-transition: color 0.25s ease-in-out;
    border: 0.31rem solid currentColor;
    border-radius: 0.19rem;
    background-color: currentColor;
  }
[dir=ltr] .SearchBar-searchBar_1727c774::before {
 left: 0;
  }
[dir=rtl] .SearchBar-searchBar_1727c774::before {
    right: 0;
  }
.SearchBar-searchBar_1727c774[focus-within]::before {
    color: #383838;
    -webkit-transition-duration: 0s;
         -o-transition-duration: 0s;
  }
[dir] .SearchBar-searchBar_1727c774[focus-within]::before {
            transition-duration: 0s;
  }
.SearchBar-searchBar_1727c774:focus-within::before {
    color: #383838;
    -webkit-transition-duration: 0s;
         -o-transition-duration: 0s;
  }
[dir] .SearchBar-searchBar_1727c774:focus-within::before {
            transition-duration: 0s;
  }
.SearchBar-searchForm_5b504a9f {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative
}
[dir] .SearchBar-searchForm_5b504a9f {
  padding: 1.25rem 1.88rem
}
@media (max-width: 1023px) {
[dir] .SearchBar-searchForm_5b504a9f {
    border-bottom: 0.06rem solid rgba(255, 255, 255, 0.1);
    background-color: #121212
}

    [dir] .SearchBar-searchForm_5b504a9f[focus-within] {
      background-color: #2b2b2b;
    }

    [dir] .SearchBar-searchForm_5b504a9f:focus-within {
      background-color: #2b2b2b;
    }
  }
@media (min-width: 1024px) {
[dir] .SearchBar-searchForm_5b504a9f {
    padding: 0
}
  }
[dir] .SearchBar-searchForm_5b504a9f[focus-within] {
  border-bottom-color: transparent;
}
[dir] .SearchBar-searchForm_5b504a9f:focus-within {
  border-bottom-color: transparent;
}
.SearchBar-inputWrapper_1262bb52 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.SearchBar-searchField_922d778e {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #fff;
  width: 100%;
  line-height: normal;
  min-height: 100%; /* 38 */
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
[dir] .SearchBar-searchField_922d778e {
  margin: 0 1.25rem;
  padding: 12Px 5Px;
}
.SearchBar-searchField_922d778e ::-webkit-input-placeholder,
  .SearchBar-searchField_922d778e ::-moz-placeholder,
  .SearchBar-searchField_922d778e :-ms-input-placeholder,
  .SearchBar-searchField_922d778e ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
  }
.SearchBar-searchField_922d778e ::-webkit-input-placeholder,
  .SearchBar-searchField_922d778e ::-moz-placeholder,
  .SearchBar-searchField_922d778e :-ms-input-placeholder,
  .SearchBar-searchField_922d778e ::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
  }
.SearchBar-searchField_922d778e::-ms-clear {
    display: none !important;
    color: rgba(0, 0, 0, 0) !important;
  }
@media (min-width: 1024px) {
[dir] .SearchBar-searchField_922d778e {
    margin: 0 0.63rem
}
  }
.SearchBar-searchIcon_4b1ec6ef {
  color: white;
  max-height: 100%;
  max-width: 100%;
  pointer-events: none;
  width: auto
}
[dir] .SearchBar-searchIcon_4b1ec6ef {
  text-align: center
}
.SearchBar-searchIcon_4b1ec6ef:focus {
    outline: 0;
  }
.SearchBar-searchOpenButton_046b7e3c .SearchBar-searchIcon_4b1ec6ef {
    height: 1rem
  }
@media (min-width: 1024px) {

  .SearchBar-searchOpenButton_046b7e3c .SearchBar-searchIcon_4b1ec6ef {
      height: 0.88rem
  }
    }
.SearchBar-searchCloseButton_9dbd1190 .SearchBar-searchIcon_4b1ec6ef {
    height: 0.75rem
  }
@media (min-width: 1024px) {

  .SearchBar-searchCloseButton_9dbd1190 .SearchBar-searchIcon_4b1ec6ef {
      height: 0.63rem
  }
    }
.SearchBar-searchIcon_4b1ec6ef svg {
    display: inline-block;
    width: auto;
  }
.SearchBar-searchOpenButton_046b7e3c,
.SearchBar-searchCloseButton_9dbd1190 {
  display: inline-block;
  outline: 0;
  position: relative;
}
.SearchBar-searchOpenButton_046b7e3c::before, .SearchBar-searchCloseButton_9dbd1190::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-width: 2.5rem;
    min-height: 2.5rem;
    position: absolute;
    top: 50%;
  }
[dir] .SearchBar-searchOpenButton_046b7e3c::before, [dir] .SearchBar-searchCloseButton_9dbd1190::before {
    border: 1Px solid transparent;
  }
[dir=ltr] .SearchBar-searchOpenButton_046b7e3c::before, [dir=ltr] .SearchBar-searchCloseButton_9dbd1190::before {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  }
[dir=rtl] .SearchBar-searchOpenButton_046b7e3c::before, [dir=rtl] .SearchBar-searchCloseButton_9dbd1190::before {
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
.SearchBar-searchOpenButton_046b7e3c:focus::before, .SearchBar-searchCloseButton_9dbd1190:focus::before {
    /* This media query makes it so the focus state only displays for desktop */
  }
@media (hover: hover) {
.SearchBar-searchOpenButton_046b7e3c:focus::before, .SearchBar-searchCloseButton_9dbd1190:focus::before {
      outline: 0;
      opacity: 0.25
  }
[dir] .SearchBar-searchOpenButton_046b7e3c:focus::before, [dir] .SearchBar-searchCloseButton_9dbd1190:focus::before {
      border-color: var(--theme-custom-color-primary-text)
  }
    }
.SearchBar-searchOpenButton_046b7e3c,
.SearchBar-searchCloseButton_9dbd1190 {

  overflow: visible;
}
.SearchBar-searchOpenButton_046b7e3c svg {
  width: 0.92rem;
  height: 0.88rem;
}
.SearchBar-searchCloseButton_9dbd1190 svg {
  width: 0.63rem;
  height: 0.63rem;
}
.SearchBar-announcement_08622681 {
  opacity: 0;
  position: absolute;
}
[dir=ltr] .SearchBar-announcement_08622681 {
 left: 100%;
}
[dir=rtl] .SearchBar-announcement_08622681 {
  right: 100%;
}
.SearchBar-invisible_187d015d {
  visibility: hidden;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NavigationVertical-root_37b52574 {
  color: var(--theme-custom-color-primary-text);
  position: relative;
  z-index: 11;
}
[dir] .NavigationVertical-defaultBg_184829da {
  background-color: var(--theme-ui-primary-bg);
}
[dir] .NavigationVertical-themedBg_44d7d442 {
  background-color: var(--theme-custom-color-primary-bg);
}
.NavigationVertical-head_c8db0f2b {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative
}
[dir] .NavigationVertical-head_c8db0f2b {
  border-bottom: 0.06rem solid transparent;
  padding: 1.25rem 0
}
.NavigationVertical-head_c8db0f2b::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1Px;
    bottom: 0;
    opacity: 0.15;
  }
[dir] .NavigationVertical-head_c8db0f2b::after {
    background-color: currentColor;
  }
[dir=ltr] .NavigationVertical-head_c8db0f2b::after {
 left: 0;
  }
[dir=rtl] .NavigationVertical-head_c8db0f2b::after {
    right: 0;
  }
.NavigationVertical-body_8bd3707b {
  color: inherit;
  position: absolute;
  top: calc(5rem - 1.25rem);
  max-height: calc(100vh - 5rem - 3.25rem);
  overflow-y: auto;
}
[dir=ltr] .NavigationVertical-body_8bd3707b {
 left: 0;
 right: 0;
}
[dir=rtl] .NavigationVertical-body_8bd3707b {
  right: 0;
  left: 0;
}
.NavigationVertical-left_9c6fbb2a {
  opacity: 1;
}
[dir=ltr] .NavigationVertical-left_9c6fbb2a {
 left: 1.25rem;
}
[dir=rtl] .NavigationVertical-left_9c6fbb2a {
  right: 1.25rem;
}
.NavigationVertical-center_2a007251 {
  position: relative;
  width: 100%;
  height: 2.5rem;
}
.NavigationVertical-absolutelyCentered_e1e24d19 {
  position: absolute;
  top: 50%;
}
[dir=ltr] .NavigationVertical-absolutelyCentered_e1e24d19 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .NavigationVertical-absolutelyCentered_e1e24d19 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.NavigationVertical-fullWidth_2050d73a {
  width: 100%;
}
.NavigationVertical-titleWidth_49c1a5b4 {
  width: calc(100% - 1.25rem * 2 - 2.5rem * 2 - 1.25rem); /* prevent overlap with left/right content like search icon */
}
.NavigationVertical-right_8f85223b {
  opacity: 1;
}
[dir=ltr] .NavigationVertical-right_8f85223b {
 right: 1.25rem;
}
[dir=rtl] .NavigationVertical-right_8f85223b {
  left: 1.25rem;
}
.NavigationVertical-menuIcon_68a9a379,
.NavigationVertical-searchIcon_e207c1e6 {
  color: currentColor;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
[dir] .NavigationVertical-menuIcon_68a9a379, [dir] .NavigationVertical-searchIcon_e207c1e6 {
  -webkit-transition: opacity 0.15s linear;
}
.NavigationVertical-opaque_0af0d96f {
  color: currentColor;
  opacity: 0.15;
  pointer-events: none;
}
.NavigationVertical-menuIcon_68a9a379 {
  width: 1.13rem;
  height: 0.69rem;
}
.NavigationVertical-searchIcon_e207c1e6 {
  width: 1.06rem;
  height: 1.06rem;
}
.NavigationVertical-logo_d5f4e279 {
  display: block;
  -webkit-transform: translateZ(0);
}
[dir] .NavigationVertical-logo_d5f4e279 {
          transform: translateZ(0);
}
.NavigationVertical-logoIcon_92b40b48 {
  width: 42Px;
  height: 42Px;
}
.NavigationVertical-logoOut_ce525dad {
  opacity: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
  transition: opacity 0.25s linear 2s, -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
  -o-transition: opacity 0.25s linear 2s, transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
  transition: opacity 0.25s linear 2s, transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
  transition: opacity 0.25s linear 2s, transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s, -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
}
[dir] .NavigationVertical-logoOut_ce525dad {
          transform: translateY(-100%);
  -webkit-transition: opacity 0.25s linear 2s, -webkit-transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 2s;
}
.NavigationVertical-subNavLabelWrapper_c6415c22 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
  color: currentColor;
  height: 2.19rem
}
[dir] .NavigationVertical-subNavLabelWrapper_c6415c22 {
  text-align: center;
          transform: translateY(100%)
}
.NavigationVertical-subNavLabelWrapper_c6415c22:focus {
    outline: 0.06rem solid #fff;
  }
[dir] .NavigationVertical-subNavLabelWrapperWithEyebrow_06b24de5 {
  margin-top: 0.5rem;
}
.NavigationVertical-subNavLabelWrapperIn_bfb65ae2 {
  pointer-events: auto;
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
  transition: opacity 0.25s linear 2.35s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s;
  -o-transition: opacity 0.25s linear 2.35s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s;
  transition: opacity 0.25s linear 2.35s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s;
  transition: opacity 0.25s linear 2.35s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s;
}
[dir] .NavigationVertical-subNavLabelWrapperIn_bfb65ae2 {
          transform: translateY(0);
  -webkit-transition: opacity 0.25s linear 2.35s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 2.35s;
}
.NavigationVertical-subNavEyebrow_4bf3509a {
  font-size: 0.56rem;
  letter-spacing: 0.09;
  text-transform: uppercase;
  font-weight: 500;

  color: currentColor;
  opacity: 0.5;
}
.NavigationVertical-subNavLabel_cceb3a9e {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  top: 0;
}
.NavigationVertical-subNavLabel_cceb3a9e span {
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;

    max-width: 100%;
  }
.NavigationVertical-subNavIcon_4e199177 {
  width: 8Px;
  height: 10Px;
  transition: -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir] .NavigationVertical-subNavIcon_4e199177 {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir=ltr] .NavigationVertical-subNavIcon_4e199177 {
 margin-left: 0.31rem;
 -webkit-transform: rotateZ(90deg);
 -ms-transform: rotate(90deg);
 transform: rotateZ(90deg);
}
[dir=rtl] .NavigationVertical-subNavIcon_4e199177 {
  margin-right: 0.31rem;
  -webkit-transform: rotateZ(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotateZ(-90deg);
}
[dir=ltr] .NavigationVertical-subNavIconUp_00e95f88 {
 -webkit-transform: rotateZ(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotateZ(-90deg);
}
[dir=rtl] .NavigationVertical-subNavIconUp_00e95f88 {
  -webkit-transform: rotateZ(90deg);
      -ms-transform: rotate(90deg);
          transform: rotateZ(90deg);
}
.NavigationVertical-hidden_35f0fb9f {
  display: none;
}
.NavigationVertical-button_0f120754 {
  display: inline-block;
  outline: 0;
  position: relative;
}
.NavigationVertical-button_0f120754::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-width: 2.5rem;
    min-height: 2.5rem;
    position: absolute;
    top: 50%;
  }
[dir] .NavigationVertical-button_0f120754::before {
    border: 1Px solid transparent;
  }
[dir=ltr] .NavigationVertical-button_0f120754::before {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  }
[dir=rtl] .NavigationVertical-button_0f120754::before {
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
.NavigationVertical-button_0f120754:focus::before {
    /* This media query makes it so the focus state only displays for desktop */
  }
@media (hover: hover) {
.NavigationVertical-button_0f120754:focus::before {
      outline: 0;
      opacity: 0.25
  }
[dir] .NavigationVertical-button_0f120754:focus::before {
      border-color: var(--theme-custom-color-primary-text)
  }
    }
.NavigationVertical-button_0f120754 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  color: currentColor;
}
[dir] .NavigationVertical-button_0f120754 {
  -webkit-transition: opacity 125ms ease-in-out;
}
.NavigationVertical-disabled_a712287d {
  pointer-events: none;
}
.NavigationVertical-invisible_126f4e4f {
  visibility: hidden;
}
.NavigationVertical-searchBarWrapper_8e13d825 {
  width: 100%;
}
[dir] .NavigationVertical-searchBar_a0fe5dec {
  padding: 1.88rem;
}
.NavigationVertical-transparent_cc79eaea {
  opacity: 0;
}
.NavigationVertical-head_c8db0f2b,
.NavigationVertical-searchBar_a0fe5dec {
  max-height: 5rem;
}
.NavigationVertical-left_9c6fbb2a,
.NavigationVertical-right_8f85223b {
  /* This is here so there's no visual jump if one of the buttons is hidden */
  min-width: 40Px;
  min-height: 40Px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryItemLayout-listItem_fd2452d2 {
  height: 4.38rem;
  width: 100%;
  position: relative
}
[dir] .LibraryItemLayout-listItem_fd2452d2 {
  margin-bottom: 0.31rem
}
.LibraryItemLayout-listItem_fd2452d2.LibraryItemLayout-gridLayout_35306d33 {
    width: 100%;
    height: auto;
  }
[dir] .LibraryItemLayout-listItem_fd2452d2.LibraryItemLayout-gridLayout_35306d33 {
    margin-bottom: 0;
  }
.LibraryItemLayout-content_270fd702 {
  -o-transition: background-color 125ms ease-in-out;
  transition: background-color 125ms ease-in-out;
  color: #f4f4f4;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
[dir] .LibraryItemLayout-content_270fd702 {
  -webkit-transition: background-color 125ms ease-in-out;

  background-color: rgba(32, 32, 32, 0.5);
}
[dir=ltr] .LibraryItemLayout-content_270fd702 {
 padding-left: 0.5rem;
}
[dir=rtl] .LibraryItemLayout-content_270fd702 {
  padding-right: 0.5rem;
}
.LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-content_270fd702 {
    display: block;
  }
[dir] .LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-content_270fd702 {
    background-color: transparent;
    padding-bottom: 0.38rem;
  }
[dir=ltr] .LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-content_270fd702 {
 padding-left: 0;
  }
[dir=rtl] .LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-content_270fd702 {
    padding-right: 0;
  }
[dir] .LibraryItemLayout-isFullColor_81189d20 .LibraryItemLayout-content_270fd702 {
    background-color: #202020;
  }
[dir] .LibraryItemLayout-gridLayout_35306d33.LibraryItemLayout-isFullColor_81189d20 .LibraryItemLayout-content_270fd702 {
    background-color: transparent;
  }
[dir] .LibraryItemLayout-hasHover_bf50bf34:hover .LibraryItemLayout-content_270fd702, [dir] .LibraryItemLayout-active_07518b63 .LibraryItemLayout-content_270fd702 {
    cursor: pointer;
    background-color: #0078f2;
  }
/* turn off hover on grid view */
[dir] .LibraryItemLayout-gridLayout_35306d33.LibraryItemLayout-hasHover_bf50bf34:hover .LibraryItemLayout-content_270fd702, [dir] .LibraryItemLayout-gridLayout_35306d33.LibraryItemLayout-active_07518b63 .LibraryItemLayout-content_270fd702 {
    background-color: transparent;
  }
.LibraryItemLayout-wrapperActionButton_c7bf3ad8 {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  font-weight: 400
}
[dir] .LibraryItemLayout-wrapperActionButton_c7bf3ad8 {
  background-color: transparent;
  padding: 0
}
.LibraryItemLayout-wrapperActionButton_c7bf3ad8.LibraryItemLayout-disabled_a19bbf5b {
    pointer-events: none;
  }
.LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-wrapperActionButton_c7bf3ad8 {
    width: 100%;
    height: auto;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
  }
[dir] .LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-wrapperActionButton_c7bf3ad8 {
    background-color: transparent;
  }
.LibraryItemLayout-buttonInner_f0d60586 {
  position: absolute;
  top: 0;
  bottom: 0;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
}
[dir=ltr] .LibraryItemLayout-buttonInner_f0d60586 {
 left: 0;
 right: 0;
}
[dir=rtl] .LibraryItemLayout-buttonInner_f0d60586 {
  right: 0;
  left: 0;
}
.LibraryItemLayout-gridLayout_35306d33 .LibraryItemLayout-buttonInner_f0d60586 {
    display: block;
    position: relative;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SettingsLayout-container_784ea3b6 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
[dir] .SettingsLayout-container_784ea3b6 {
  background-color: #f4f4f4;
  padding: calc(1.25rem / 2) 0;
}
[dir] .SettingsLayout-container_784ea3b6 button {
    padding: calc(1.25rem / 2) 1.25rem;
  }
[dir] .SettingsLayout-container_784ea3b6.SettingsLayout-large_454c4469 {
    padding: calc(1.5rem / 2) 0;
  }
@media (max-width: 575px) {
[dir] .SettingsLayout-container_784ea3b6 {
    padding: calc(3.13rem / 2) 0
}
  }
.SettingsLayout-positionMarker_d1519e6d {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
}
[dir=ltr] .SettingsLayout-positionMarker_d1519e6d {
 right: 0;
 left: 0;
}
[dir=rtl] .SettingsLayout-positionMarker_d1519e6d {
  left: 0;
  right: 0;
}
.SettingsLayout-closed_d977cc6e {
  display: none;
}
button.SettingsLayout-closeButton_80bf6dac {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  position: absolute;
  top: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.6
}
[dir] button.SettingsLayout-closeButton_80bf6dac {
  -webkit-transition: opacity 125ms ease-in-out;

  padding: 1.81rem 2.13rem 1.94rem
}
[dir=ltr] button.SettingsLayout-closeButton_80bf6dac {
 right: 0
}
[dir=rtl] button.SettingsLayout-closeButton_80bf6dac {
  left: 0
}
button.SettingsLayout-closeButton_80bf6dac:hover {
    opacity: 1;
  }
button.SettingsLayout-closeButton_80bf6dac .SettingsLayout-icon_bd4ed67c svg {
    width: 0.75rem;
    height: 0.75rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryPlaceholder-wrapper_0860c0b7 {

  height: 4.38rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .LibraryPlaceholder-wrapper_0860c0b7 {
  background-color: rgba(32, 32, 32, 0.3);
  margin-bottom: 0.31rem;
}
[dir=ltr] .LibraryPlaceholder-wrapper_0860c0b7 {

 padding-left: 0.5rem;
}
[dir=rtl] .LibraryPlaceholder-wrapper_0860c0b7 {
  padding-right: 0.5rem;
}
[dir] .LibraryPlaceholder-wrapper_0860c0b7 .LibraryPlaceholder-placeholderAsset_48fc4d24::after, [dir] .LibraryPlaceholder-wrapper_0860c0b7 .LibraryPlaceholder-placeholderContent_1b8cc0b4 {
    background-color: var(--theme-custom-color-primary);
  }
.LibraryPlaceholder-wrapper_0860c0b7 .LibraryPlaceholder-placeholderAsset_48fc4d24::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .LibraryPlaceholder-wrapper_0860c0b7 .LibraryPlaceholder-placeholderAsset_48fc4d24::after {
    border-radius: 50%;
  }
.LibraryPlaceholder-wrapper_0860c0b7.LibraryPlaceholder-gridLayout_5e1111ff {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
[dir] .LibraryPlaceholder-wrapper_0860c0b7.LibraryPlaceholder-gridLayout_5e1111ff {
    margin-bottom: 0;
    background-color: transparent;
  }
[dir=ltr] .LibraryPlaceholder-wrapper_0860c0b7.LibraryPlaceholder-gridLayout_5e1111ff {

 padding-left: 0;
  }
[dir=rtl] .LibraryPlaceholder-wrapper_0860c0b7.LibraryPlaceholder-gridLayout_5e1111ff {
    padding-right: 0;
  }
.LibraryPlaceholder-gamePlaceholder_1fd5385a {
  width: calc((16 / 9) * 3.44rem);
  height: 3.44rem;
}
[dir] .LibraryPlaceholder-gamePlaceholder_1fd5385a {
  background-color: #202020;
}
.LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gamePlaceholder_1fd5385a {
    position: relative;

    width: 100%;
    height: auto;
  }
[dir] .LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gamePlaceholder_1fd5385a {
    padding-bottom: calc(4 / 3 * 100%);
  }
.LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gamePlaceholder_1fd5385a .LibraryPlaceholder-inner_d0f3a755 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.LibraryPlaceholder-group_b7db5561 {
  width: 30%
}
[dir] .LibraryPlaceholder-group_b7db5561 {
  margin: 0 0.63rem
}
@media (min-width: 768px) {
.LibraryPlaceholder-group_b7db5561 {
    width: 50%
}
  }
.LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-group_b7db5561 {
    width: 100%;
  }
[dir] .LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-group_b7db5561 {
    margin: 0.63rem 0 0;
  }
.LibraryPlaceholder-gameTitle_c89488aa,
.LibraryPlaceholder-gameStatus_6a6f0a84 {
  display: block;
  width: 100%;
  height: 1rem
}
@media (min-width: 768px) {
.LibraryPlaceholder-gameTitle_c89488aa,
.LibraryPlaceholder-gameStatus_6a6f0a84 {
    width: 40%
}
  }
.LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gameTitle_c89488aa, .LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gameStatus_6a6f0a84 {
    width: 80%;
  }
.LibraryPlaceholder-gameStatus_6a6f0a84 {
  width: 60%
}
[dir] .LibraryPlaceholder-gameStatus_6a6f0a84 {
  margin: 0.38rem 0 0
}
@media (min-width: 768px) {
.LibraryPlaceholder-gameStatus_6a6f0a84 {
    width: 20%
}
  }
.LibraryPlaceholder-gridLayout_5e1111ff .LibraryPlaceholder-gameStatus_6a6f0a84 {
    width: 60%;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BoxImage-boxImage_b975fcce {
  overflow: hidden;
  position: relative;
}
[dir] .BoxImage-boxImage_b975fcce {
  background-color: rgba(32, 32, 32, 0.5);
}
.BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
.BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c {
    position: relative;
  }
[dir] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c {
    padding-bottom: calc(4 / 3 * 100%);
  }
.BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
    position: absolute;
    width: 100%;
  }
.BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
      width: auto;
      height: 100%;
    }
[dir=ltr] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
 left: 50%;
 -webkit-transform: translate(-50%);
 -ms-transform: translate(-50%);
 transform: translate(-50%);
    }
[dir=rtl] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
      right: 50%;
      -webkit-transform: translate(50%);
          -ms-transform: translate(50%);
              transform: translate(50%);
    }
.BoxImage-thumbnailProgress_d5813146 {
  position: absolute;
  top: 0;
  bottom: 0;

  overflow: hidden;
}
[dir=ltr] .BoxImage-thumbnailProgress_d5813146 {
 -webkit-transition: right 200ms ease;
 -o-transition: right 200ms ease;
 transition: right 200ms ease;
 left: 0;
 right: 0;
}
[dir=rtl] .BoxImage-thumbnailProgress_d5813146 {
  -webkit-transition: left 200ms ease;
  -o-transition: left 200ms ease;
  transition: left 200ms ease;
  right: 0;
  left: 0;
}
.BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c {
    height: 100%;
  }
[dir] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c {
      padding-bottom: 0;
    }
.BoxImage-gridLayout_8f0961dc .BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
        width: 100%;
        height: 100%;
        -webkit-transform: none;
            -ms-transform: none;
      }
[dir] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
                transform: none;
      }
[dir=ltr] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
 left: 0;
      }
[dir=rtl] .BoxImage-gridLayout_8f0961dc .BoxImage-thumbnailProgress_d5813146 .BoxImage-thumbnail_f6440a5c .BoxImage-inner_5d9f5a31 {
        right: 0;
      }
.BoxImage-thumbnailLogo_7b380bea {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
}
[dir=ltr] .BoxImage-thumbnailLogo_7b380bea {
 left: 0;
 right: 0;
}
[dir=rtl] .BoxImage-thumbnailLogo_7b380bea {
  right: 0;
  left: 0;
}
[dir] .BoxImage-thumbnailLogo_7b380bea .BoxImage-background_460ee0ac {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
.BoxImage-thumbnailLogo_7b380bea .BoxImage-logo_3f0fabaa {
    width: 70%;
    height: 70%;
  }
[dir] .BoxImage-thumbnailLogo_7b380bea .BoxImage-logo_3f0fabaa {
    background-size: contain;
  }
.BoxImage-updating_47ac4d75 .BoxImage-thumbnailLogo_7b380bea .BoxImage-logo_3f0fabaa {
      -webkit-filter: grayscale(70%);
              filter: grayscale(70%);
    }
.BoxImage-grayscale_c93f6292 {
  transition: -webkit-filter 200ms ease;
  -o-transition: filter 200ms ease;
  transition: filter 200ms ease;
  transition: filter 200ms ease, -webkit-filter 200ms ease;

  -webkit-filter: grayscale(100%);

          filter: grayscale(100%);

  /* The grayscale filter doesn't work in IE,
      so we also add opacity */
  opacity: 0.3;
}
[dir] .BoxImage-grayscale_c93f6292 {
  -webkit-transition: -webkit-filter 200ms ease;
}
.BoxImage-indeterminate_409f038b {
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryViewToggle-iconGridView_16bb4ce6 {
  width: 11Px;
}
.LibraryViewToggle-iconListView_899a838a {
  width: 15Px;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryHeader-controls_fcb1a62d {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .LibraryHeader-controls_fcb1a62d {
  margin: 0 0 1.25rem
}
@media (min-width: 1280px) {
[dir] .LibraryHeader-controls_fcb1a62d {
    margin-bottom: 1.88rem
}
  }
.LibraryHeader-sortAndFilterWrapper_b56bef98 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.LibraryHeader-sortAndFilterTitle_7ed7ce86 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  opacity: 0.6;
  display: block;
}
[dir] .LibraryHeader-sortAndFilterTitle_7ed7ce86 {
  padding: 0.31rem 0;
  margin-bottom: 0.31rem;
}
.LibraryHeader-filterWrapper_3e7c4d91,
.LibraryHeader-sortWrapper_16e970b0 {
  width: 9.38rem;
}
.LibraryHeader-viewToggleWrapper_8c4cde21 {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center
}
@media (min-width: 1024px) {
[dir=ltr] .LibraryHeader-viewToggleWrapper_8c4cde21 {
  margin-right: 2.13rem
}
[dir=rtl] .LibraryHeader-viewToggleWrapper_8c4cde21 {
    margin-left: 2.13rem
}
  }
@media (max-width: 1023px) {
.LibraryHeader-searchWrapper_70b41aed {
    display: none
}
  }
.LibraryHeader-searchWrapper_70b41aed {

  width: 12.75rem
}
[dir=ltr] .LibraryHeader-searchWrapper_70b41aed {
 margin-left: 1rem
}
[dir=rtl] .LibraryHeader-searchWrapper_70b41aed {
  margin-right: 1rem
}
@media (min-width: 1280px) {
.LibraryHeader-searchWrapper_70b41aed {
    width: 13.75rem
}
[dir=ltr] .LibraryHeader-searchWrapper_70b41aed {
  margin-left: 1.25rem
}
[dir=rtl] .LibraryHeader-searchWrapper_70b41aed {
    margin-right: 1.25rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.HandleActionButton-settingsOption_a8280c44,
.HandleActionButton-link_dbaf3ce2 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #121212
}
[dir] .HandleActionButton-settingsOption_a8280c44, [dir] .HandleActionButton-link_dbaf3ce2 {
  padding: calc(1.25rem / 2) 1.25rem
}
.HandleActionButton-settingsOption_a8280c44.HandleActionButton-hasHover_0246b03b:hover, .HandleActionButton-link_dbaf3ce2.HandleActionButton-hasHover_0246b03b:hover {
    text-decoration: underline;
  }
.HandleActionButton-settingsOption_a8280c44:disabled, .HandleActionButton-link_dbaf3ce2:disabled {
    color: #8f8f8f;
    opacity: 0.3;
    pointer-events: none;
  }
[dir] .HandleActionButton-container_a39a1028.HandleActionButton-large_5e725156 .HandleActionButton-settingsOption_a8280c44, [dir] .HandleActionButton-container_a39a1028.HandleActionButton-large_5e725156 .HandleActionButton-link_dbaf3ce2 {
    padding: calc(1.5rem / 2) 1.5rem;
  }
@media (max-width: 575px) {
[dir] .HandleActionButton-settingsOption_a8280c44, [dir] .HandleActionButton-link_dbaf3ce2 {
    padding: calc(3.13rem / 2) 1.25rem
}
  }
.HandleActionButton-content_e9642a5f {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.HandleActionButton-link_dbaf3ce2:hover {
    text-decoration: underline;
  }
.HandleActionButton-title_89ba049a {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #121212;
  text-transform: capitalize;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SettingsButton-settingsButton_8b52b2e9 {
  -o-transition: background-color 125ms ease-in-out;
  transition: background-color 125ms ease-in-out;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  width: 4.38rem;
  height: 100%;
}
[dir] .SettingsButton-settingsButton_8b52b2e9 {
  -webkit-transition: background-color 125ms ease-in-out;
  background-color: transparent;
}
[dir] .SettingsButton-settingsButton_8b52b2e9:hover, [dir] .SettingsButton-listItem_2adade4b.SettingsButton-active_a85e2abb .SettingsButton-settingsButton_8b52b2e9 {
    background-color: #006cdb;
  }
[dir] .SettingsButton-gridLayout_0204248b .SettingsButton-settingsButton_8b52b2e9:hover, [dir] .SettingsButton-gridLayout_0204248b .SettingsButton-listItem_2adade4b.SettingsButton-active_a85e2abb .SettingsButton-settingsButton_8b52b2e9 {
      background-color: #0078f2;
    }
.SettingsButton-gridLayout_0204248b {
  position: absolute;
  bottom: 1.25rem;
  width: 2rem;
  height: 1.38rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .SettingsButton-gridLayout_0204248b {
  padding: 0;
  background-color: transparent;
}
[dir=ltr] .SettingsButton-gridLayout_0204248b {
 right: 0;
}
[dir=rtl] .SettingsButton-gridLayout_0204248b {
  left: 0;
}
.SettingsButton-icon_accc7a19 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  opacity: 0.6;
  width: 0.75rem;
  height: 0.63rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .SettingsButton-icon_accc7a19 {
  -webkit-transition: opacity 125ms ease-in-out;
}
.SettingsButton-icon_accc7a19 svg {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
.SettingsButton-listItem_2adade4b.SettingsButton-hasHover_0cb6d847:hover .SettingsButton-icon_accc7a19 {
    opacity: 1;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NewsPlaceholder-main_e7f05c6d {

  position: relative;
  width: 100%;
}
[dir] .NewsPlaceholder-main_e7f05c6d .NewsPlaceholder-placeholderAsset_ab67b27f::after, [dir] .NewsPlaceholder-main_e7f05c6d .NewsPlaceholder-placeholderContent_87d70e5a {
    background-color: var(--theme-custom-color-primary);
  }
.NewsPlaceholder-main_e7f05c6d .NewsPlaceholder-placeholderAsset_ab67b27f::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .NewsPlaceholder-main_e7f05c6d .NewsPlaceholder-placeholderAsset_ab67b27f::after {
    border-radius: 50%;
  }
.NewsPlaceholder-header_4c50892b {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  pointer-events: none;
  overflow: hidden;
}
[dir] .NewsPlaceholder-header_4c50892b {
  background-color: #202020;
  padding: 2.81rem 2.19rem;
}
.NewsPlaceholder-heading_e5ccb2df {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1;
  height: 0.8em;
  width: 40%;
}
[dir] .NewsPlaceholder-heading_e5ccb2df {

  margin-bottom: 0.63rem;
}
.NewsPlaceholder-meta_5ab08726 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  width: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.NewsPlaceholder-icon_2d47ab02 {
  width: 1.25rem;
  height: 1.25rem;
}
[dir] .NewsPlaceholder-icon_2d47ab02 {
  border-radius: 50%;
}
[dir=ltr] .NewsPlaceholder-icon_2d47ab02 {

 margin-right: 0.63rem;
}
[dir=rtl] .NewsPlaceholder-icon_2d47ab02 {
  margin-left: 0.63rem;
}
.NewsPlaceholder-metaText_f415cf16 {
  width: 22%;
  height: 0.8em;
}
.NewsPlaceholder-image_235917d8 {
  width: 100%;
  height: 16.25rem;
}
[dir] .NewsPlaceholder-image_235917d8 {
  background-color: #2b2b2b;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@charset "UTF-8";
[dir] .feedItem {
  background-color: #202020;
}
.feedContentWrapper {
  color: #f4f4f4;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  z-index: 2
}
[dir] .feedContentWrapper {
  padding: 1.25rem 0.94rem
}
@media (min-width: 768px) {
[dir] .feedContentWrapper {
    padding: 2.19rem 2.5rem
}
  }
.FeedItem-wrapper_8f744848 {
}
.FeedItem-inner_d73fca7b {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.5;
}
[dir] .FeedItem-child_8eb398e1:not(:first-child) {
  margin-top: 0.88rem;
}
.FeedItem-item_01daa2c8,
.FeedItem-itemFull_14ac4294 {
}
.FeedItem-itemFull_14ac4294 {
  width: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Throbber-main_a43c4204 {
  width: 2.5rem;
  height: 2.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.Throbber-main_a43c4204 .Throbber-square_1af5405a {
    width: calc(2.5rem / 2);
    height: calc(2.5rem / 2);
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%
  }
[dir] .Throbber-main_a43c4204 .Throbber-square_1af5405a {
    background-color: #0078f2
  }
[dir=ltr] .Throbber-main_a43c4204 .Throbber-square_1af5405a {
 -webkit-animation: Throbber-pulsate_be9d2e7e 2s infinite ease-in-out both;
 animation: Throbber-pulsate_be9d2e7e 2s infinite ease-in-out both
  }
[dir=rtl] .Throbber-main_a43c4204 .Throbber-square_1af5405a {
    -webkit-animation: Throbber-pulsate_be9d2e7e 2s infinite ease-in-out both;
            animation: Throbber-pulsate_be9d2e7e 2s infinite ease-in-out both
  }
[dir=ltr] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(2) {
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
    }
[dir=rtl] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(2) {
      -webkit-animation-delay: -0.5s;
              animation-delay: -0.5s;
    }
[dir=ltr] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(3) {
 -webkit-animation-delay: -1.5s;
 animation-delay: -1.5s;
    }
[dir=rtl] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(3) {
      -webkit-animation-delay: -1.5s;
              animation-delay: -1.5s;
    }
[dir=ltr] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(4) {
 -webkit-animation-delay: -1s;
 animation-delay: -1s;
    }
[dir=rtl] .Throbber-main_a43c4204 .Throbber-square_1af5405a:nth-child(4) {
      -webkit-animation-delay: -1s;
              animation-delay: -1s;
    }
@-webkit-keyframes Throbber-pulsate_be9d2e7e {
  0%,
  80%,
  100% {
    opacity: 0.8;
  }

  40% {
    opacity: 1;
  }
}
@keyframes Throbber-pulsate_be9d2e7e {
  0%,
  80%,
  100% {
    opacity: 0.8;
  }

  40% {
    opacity: 1;
  }
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Feed-list_b1e57271 {
  width: 100%;
  max-width: 100%;
}
[dir] .Feed-list_b1e57271 > li:not(:last-child) {
    margin-bottom: 1.88rem;
  }
@media (min-width: 1600px) {
.Feed-list_b1e57271 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
[dir=ltr] .Feed-list_b1e57271 {
  margin-left: auto;
}
[dir=rtl] .Feed-list_b1e57271 {
    margin-right: auto;
}

    [dir=ltr] .Feed-list_b1e57271 > li {
  margin-left: 0.63rem;
  margin-right: 0.63rem;
    }

    [dir=rtl] .Feed-list_b1e57271 > li {
      margin-right: 0.63rem;
      margin-left: 0.63rem;
    }

    [dir] .Feed-list_b1e57271 > li:not(:last-child) {
      margin-bottom: 1.25rem;
    }
  }
.Feed-topErrorMessage_869ad885 { /* margin aligns to the rightrail */
  width: 100%;
}
[dir] .Feed-topErrorMessage_869ad885 {
  margin-top: 2.13rem;
}
[dir] .Feed-messageButton_033d8801 {
  margin-top: 0.88rem;
}
.Feed-title_467c482f {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
@media (min-width: 1024px) {
.Feed-title_467c482f {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.Feed-title_467c482f {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
[dir] .Feed-title_467c482f {

  margin-bottom: 0.94rem;
}
[dir=ltr] .Feed-title_467c482f {
 margin-left: 0;
}
[dir=rtl] .Feed-title_467c482f {
  margin-right: 0;
}
h1.Feed-title_467c482f,
  h2.Feed-title_467c482f {
    opacity: 0.5;
  }
@media (min-width: 1600px) {
.Feed-title_467c482f {
    width: 100%
}
[dir=ltr] .Feed-title_467c482f {
  margin-left: 0.63rem;
  margin-right: 0.63rem
}
[dir=rtl] .Feed-title_467c482f {
    margin-right: 0.63rem;
    margin-left: 0.63rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Card-wrapper_fcb990aa {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
[dir] .Card-wrapper_fcb990aa {
  background-color: #202020;
  padding: 1.25rem 0.94rem;
}
.Card-loading_0d27a3b6::after {
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
[dir] .Card-loading_0d27a3b6::after {
  background-color: rgba(255, 255, 255, 0.1);
}
[dir=ltr] .Card-loading_0d27a3b6::after {
 -webkit-animation:  Card-loading-ltr_a367a4dc 1.5s ease infinite 200ms;
 animation:  Card-loading-ltr_a367a4dc 1.5s ease infinite 200ms;
 left: 0;
}
[dir=rtl] .Card-loading_0d27a3b6::after {
  -webkit-animation:  Card-loading-rtl_727f34af 1.5s ease infinite 200ms;
          animation:  Card-loading-rtl_727f34af 1.5s ease infinite 200ms;
  right: 0;
}
@-webkit-keyframes Card-loading-ltr_a367a4dc {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes Card-loading-rtl_727f34af {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes Card-loading-ltr_a367a4dc {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes Card-loading-rtl_727f34af {
  0% {
    opacity: 1;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.Card-asset_f278fa0b {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir=ltr] .Card-asset_f278fa0b {
 margin-right: 0.94rem;
}
[dir=rtl] .Card-asset_f278fa0b {
  margin-left: 0.94rem;
}
.Card-contentWrapper_22341871 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
.Card-titlesWrapper_18adadc1 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.Card-primaryText_5d8936a8 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625
}
@media (min-width: 768px) {
.Card-primaryText_5d8936a8 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
.Card-secondaryText_ae6033c0 {
  display: none;
  opacity: 0.5
}
[dir] .Card-secondaryText_ae6033c0 {
  margin-top: 0.25rem
}
@media (min-width: 768px) {
.Card-secondaryText_ae6033c0 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;

    display: block
}
  }
.Card-secondaryLine_17849429 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;

  display: block;
}
.Card-buttonsWrapper_2f756e81 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
[dir] .Card-buttonsWrapper_2f756e81 {
  margin-top: 0.25rem
}
@media (min-width: 768px) {
.Card-buttonsWrapper_2f756e81 {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse
}
  }
.Card-button_42d03562 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  color: #f4f4f4
}
[dir=ltr] .Card-button_42d03562 {
 text-align: left
}
[dir=rtl] .Card-button_42d03562 {
  text-align: right
}
[dir=ltr] .Card-button_42d03562:not(:first-child) {
 margin-left: 1.25rem;
  }
[dir=rtl] .Card-button_42d03562:not(:first-child) {
    margin-right: 1.25rem;
  }
@media (min-width: 768px) {
[dir] .Card-button_42d03562 {
    padding: 0 0.94rem
}
[dir=ltr] .Card-button_42d03562 {
  margin-left: 0;
  text-align: right
}
[dir=rtl] .Card-button_42d03562 {
    margin-right: 0;
    text-align: left
}
  }
.Card-buttonCompleted_10df5da0 {
  opacity: 0.5;
}
.Card-buttonDisable_82dcc9bb {
  pointer-events: none;
}
.Card-buttonDisable_82dcc9bb .Card-button_42d03562:last-child {
    -o-transition: all 200ms ease;
    transition: all 200ms ease;

    opacity: 0;
  }
[dir] .Card-buttonDisable_82dcc9bb .Card-button_42d03562:last-child {
    -webkit-transition: all 200ms ease;
  }
.Card-wrapperSingle_83faf424 {
  min-height: 5.31rem
}
@media (min-width: 768px) {
.Card-wrapperSingle_83faf424 {
    max-height: 7.5rem
}
[dir] .Card-wrapperSingle_83faf424 {
    padding: 1.88rem 0.94rem
}
  }
@media (min-width: 768px) {

  [dir=ltr] .Card-wrapperSingle_83faf424 .Card-asset_f278fa0b {
  margin-left: 0.94rem;
  margin-right: 1.88rem
  }

  [dir=rtl] .Card-wrapperSingle_83faf424 .Card-asset_f278fa0b {
      margin-right: 0.94rem;
      margin-left: 1.88rem
  }
    }
@media (min-width: 768px) {

    .Card-wrapperSingle_83faf424 .Card-asset_f278fa0b .Card-avatar_4e347e52 {
        font-size: 1.63rem;
        line-height: normal;
        height: 3.75rem;
        width: 3.75rem
    }
      }
@media (min-width: 768px) {

  .Card-wrapperSingle_83faf424 .Card-contentWrapper_22341871 {
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row
  }
    }
@media (min-width: 768px) {
.Card-wrapperGrouped_b789cd27 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 17.75rem
}
[dir] .Card-wrapperGrouped_b789cd27 {
    padding: 3.13rem 1.88rem 2.13rem
}
  }
@media (min-width: 768px) {

  [dir] .Card-wrapperGrouped_b789cd27 .Card-asset_f278fa0b {
      margin: 0 0 1.25rem
  }
    }
@media (min-width: 768px) {

    .Card-wrapperGrouped_b789cd27 .Card-asset_f278fa0b .Card-avatar_4e347e52 {
        font-size: 2.19rem;
        line-height: normal;
        height: 5rem;
        width: 5rem
    }
      }
@media (min-width: 768px) {

  .Card-wrapperGrouped_b789cd27 .Card-titlesWrapper_18adadc1 {
      width: 100%
  }

  [dir] .Card-wrapperGrouped_b789cd27 .Card-titlesWrapper_18adadc1 {
      padding-bottom: 1.25rem;
      text-align: center
  }
    }
@media (min-width: 768px) {

  .Card-wrapperGrouped_b789cd27 .Card-primaryText_5d8936a8 {
      font-size: 0.88rem;
      letter-spacing: 0.01rem;
      line-height: 1.4;
      font-weight: 500
  }
    }
@media (min-width: 768px) {

  .Card-wrapperGrouped_b789cd27 .Card-secondaryText_ae6033c0 {
      font-size: 0.88rem;
      letter-spacing: 0.01rem;
      line-height: 1.4
  }
    }
@media (min-width: 768px) {

  .Card-wrapperGrouped_b789cd27 .Card-buttonsWrapper_2f756e81 {
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center
  }
    }
@media (min-width: 768px) {

  [dir] .Card-wrapperGrouped_b789cd27 .Card-button_42d03562 {
      text-align: center
  }

      .Card-wrapperGrouped_b789cd27 .Card-button_42d03562:not(:first-child) {
        display: none;
      }
    }
[dir] .Card-placeholder_cbe21645 .Card-placeholderAsset_91e69503::after, [dir] .Card-placeholder_cbe21645 .Card-placeholderContent_1fe6ef85 {
    background-color: var(--theme-custom-color-primary);
  }
.Card-placeholder_cbe21645 .Card-placeholderAsset_91e69503::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .Card-placeholder_cbe21645 .Card-placeholderAsset_91e69503::after {
    border-radius: 50%;
  }
.Card-placeholder_cbe21645 .Card-asset_f278fa0b::after {
    height: 2.63rem;
    width: 2.63rem;
  }
@media (min-width: 768px) {
.Card-placeholder_cbe21645.Card-wrapperSingle_83faf424 .Card-asset_f278fa0b::after {
      height: 3.75rem;
      width: 3.75rem
  }
    }
@media (min-width: 768px) {
.Card-placeholder_cbe21645.Card-wrapperGrouped_b789cd27 .Card-asset_f278fa0b::after {
      height: 5rem;
      width: 5rem
  }
    }
.Card-placeholder_cbe21645 .Card-primaryText_5d8936a8 {
    height: 0.88rem;
    width: 5.38rem
  }
@media (min-width: 768px) {

  [dir] .Card-placeholder_cbe21645 .Card-primaryText_5d8936a8 {
      margin: 0 auto 0.25rem
  }
    }
.Card-placeholder_cbe21645 .Card-secondaryText_ae6033c0 {
    height: 0.75rem;
    width: 7.38rem
  }
@media (min-width: 768px) {

  [dir] .Card-placeholder_cbe21645 .Card-secondaryText_ae6033c0 {
      margin: 0 auto
  }
    }
@media (min-width: 768px) {
[dir=ltr] .Card-placeholder_cbe21645.Card-wrapperSingle_83faf424 .Card-primaryText_5d8936a8, [dir=ltr] .Card-placeholder_cbe21645.Card-wrapperSingle_83faf424 .Card-secondaryText_ae6033c0 {
  margin-left: 0;
  margin-right: 0
  }
[dir=rtl] .Card-placeholder_cbe21645.Card-wrapperSingle_83faf424 .Card-primaryText_5d8936a8, [dir=rtl] .Card-placeholder_cbe21645.Card-wrapperSingle_83faf424 .Card-secondaryText_ae6033c0 {
      margin-right: 0;
      margin-left: 0
  }
    }
.Card-placeholder_cbe21645 .Card-button_42d03562 {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center;
    display: block;
    height: 0.69rem;
    width: 2.06rem
  }
@media (min-width: 768px) {

  [dir] .Card-placeholder_cbe21645 .Card-button_42d03562 {
      margin: 0 0.94rem
  }
    }
@media (min-width: 768px) {
[dir] .Card-placeholder_cbe21645.Card-wrapperGrouped_b789cd27 .Card-button_42d03562 {
      margin: 0.13rem auto 0
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Column-column_bf842c7a {
  position: relative
}
@media (min-width: 768px) {
[dir] .Column-column_bf842c7a {
    border: solid rgba(255, 255, 255, 0.1)
}
[dir=ltr] .Column-column_bf842c7a {
  border-width: 0 0 0 0.06rem
}
[dir=rtl] .Column-column_bf842c7a {
    border-width: 0 0.06rem 0 0
}
  }
@media (min-width: 768px) {
[dir] .Column-column_bf842c7a:first-child {
      border-width: 0
  }
    }
[dir] .Column-column_bf842c7a:nth-child(2) {
    border-width: 0;
  }
.Column-hover_91fcb4a1::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    height: 100%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
  }
[dir] .Column-hover_91fcb4a1::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .Column-hover_91fcb4a1::after {
 left: 0;
 right: 0;
  }
[dir=rtl] .Column-hover_91fcb4a1::after {
    right: 0;
    left: 0;
  }
.Column-hover_91fcb4a1:hover::after {
    opacity: 0.1;
  }
.Column-card_cc16f396 {
  width: 100%
}
[dir=ltr] .Column-card_cc16f396 {
 margin-right: -100%
}
[dir=rtl] .Column-card_cc16f396 {
  margin-left: -100%
}
@media (min-width: 768px) {
[dir] .Column-card_cc16f396 {
    margin-bottom: -17.75rem
}
[dir=ltr] .Column-card_cc16f396 {
  margin-right: 0
}
[dir=rtl] .Column-card_cc16f396 {
    margin-left: 0
}
  }
.Column-cardAlphaIn_1e9234c4 {
}
[dir=ltr] .Column-cardSlideIn_44ff015d:not(:first-child) {
 -webkit-animation:  Column-card-slide-in-ltr_f65d822e 0.3s ease-out both 750ms;
 animation:  Column-card-slide-in-ltr_f65d822e 0.3s ease-out both 750ms
}
[dir=rtl] .Column-cardSlideIn_44ff015d:not(:first-child) {
  -webkit-animation:  Column-card-slide-in-rtl_1614c4f1 0.3s ease-out both 750ms;
          animation:  Column-card-slide-in-rtl_1614c4f1 0.3s ease-out both 750ms
}
@media (min-width: 768px) {
[dir=ltr] .Column-cardSlideIn_44ff015d:not(:first-child) {
  -webkit-animation-name: Column-card-slide-in-md_545be5eb;
  animation-name: Column-card-slide-in-md_545be5eb
}
[dir=rtl] .Column-cardSlideIn_44ff015d:not(:first-child) {
    -webkit-animation-name: Column-card-slide-in-md_545be5eb;
            animation-name: Column-card-slide-in-md_545be5eb
}
  }
[dir=ltr] .Column-cardSlideOut_2b16a2d0 {
 -webkit-animation:  Column-card-slide-out-ltr_20a0fcfc 0.3s ease-out both 750ms;
 animation:  Column-card-slide-out-ltr_20a0fcfc 0.3s ease-out both 750ms
}
[dir=rtl] .Column-cardSlideOut_2b16a2d0 {
  -webkit-animation:  Column-card-slide-out-rtl_09b5cb0d 0.3s ease-out both 750ms;
          animation:  Column-card-slide-out-rtl_09b5cb0d 0.3s ease-out both 750ms
}
@media (min-width: 768px) {
[dir=ltr] .Column-cardSlideOut_2b16a2d0 {
  -webkit-animation-name: Column-card-slide-out-md_4159e17c;
  animation-name: Column-card-slide-out-md_4159e17c
}
[dir=rtl] .Column-cardSlideOut_2b16a2d0 {
    -webkit-animation-name: Column-card-slide-out-md_4159e17c;
            animation-name: Column-card-slide-out-md_4159e17c
}
  }
@-webkit-keyframes Column-card-slide-in-ltr_f65d822e {
  0% { -webkit-transform: translateX(100%); transform: translateX(100%); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes Column-card-slide-in-rtl_1614c4f1 {
  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes Column-card-slide-in-ltr_f65d822e {
  0% { -webkit-transform: translateX(100%); transform: translateX(100%); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes Column-card-slide-in-rtl_1614c4f1 {
  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes Column-card-slide-in-md_545be5eb {
  0% { -webkit-transform: translateY(100%); transform: translateY(100%); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes Column-card-slide-in-md_545be5eb {
  0% { -webkit-transform: translateY(100%); transform: translateY(100%); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes Column-card-slide-out-ltr_20a0fcfc {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@-webkit-keyframes Column-card-slide-out-rtl_09b5cb0d {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@keyframes Column-card-slide-out-ltr_20a0fcfc {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@keyframes Column-card-slide-out-rtl_09b5cb0d {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@-webkit-keyframes Column-card-slide-out-md_4159e17c {
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
@keyframes Column-card-slide-out-md_4159e17c {
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
.Column-buttonDismiss_a75cecbc {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  color: #fff;
  display: none;
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
  position: absolute;
  top: 0.63rem;
  z-index: 1
}
[dir] .Column-buttonDismiss_a75cecbc {
  -webkit-transition: opacity 125ms ease-in-out;
  padding: 0.63rem
}
[dir=ltr] .Column-buttonDismiss_a75cecbc {
 right: 0.63rem
}
[dir=rtl] .Column-buttonDismiss_a75cecbc {
  left: 0.63rem
}
@media (min-width: 768px) {
.Column-buttonDismiss_a75cecbc {
    display: block
}
  }
.Column-column_bf842c7a:not(:hover) .Column-buttonDismiss_a75cecbc {
    opacity: 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .AddFriends-singleVersionCard_bdacd474 {
  background-color: #202020;
}
.AddFriends-multiVersion_ad63113a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden
}
@media (min-width: 768px) {
.AddFriends-multiVersion_ad63113a {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 17.75rem
}
  }
@media (min-width: 1600px) {
.AddFriends-multiVersion_ad63113a {
    width: 100%
}
  }
.AddFriends-multiVersionColumn_a8ddf5d8 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap
}
[dir] .AddFriends-multiVersionColumn_a8ddf5d8 {
  background-color: #202020;
  margin-bottom: 0.13rem
}
@media (min-width: 768px) {
.AddFriends-multiVersionColumn_a8ddf5d8 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 33.333%
}
[dir] .AddFriends-multiVersionColumn_a8ddf5d8 {
    margin-bottom: 0
}
  }
@media (min-width: 1024px) {
.AddFriends-multiVersionColumn_a8ddf5d8 {
    width: 25%
}
  }
@media (min-width: 768px) {
[dir=ltr] .AddFriends-multiVersionColumn_a8ddf5d8:first-child {
  margin-right: 0.63rem
  }
[dir=rtl] .AddFriends-multiVersionColumn_a8ddf5d8:first-child {
      margin-left: 0.63rem
  }
    }
[dir] .AddFriends-multiVersionColumn_a8ddf5d8:last-child {
    margin-bottom: 0;
  }
.AddFriends-emptyCardsExitAnimation_edf6c4af {
  -o-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;

  -webkit-transform: scale(0);

      -ms-transform: scale(0) /* card height + 30px spacing in feed */
}
[dir] .AddFriends-emptyCardsExitAnimation_edf6c4af {
  -webkit-transition: all 125ms ease-in-out;

          transform: scale(0);
  margin-bottom: calc((5.31rem + 1.88rem) * -1)
}
@media (min-width: 768px) {
.AddFriends-emptyCardsExitAnimation_edf6c4af { /* card height + 30px spacing in feed */
}
[dir] .AddFriends-emptyCardsExitAnimation_edf6c4af {
    margin-bottom: calc((7.5rem + 1.88rem) * -1)
}
  }
/* TODO Consider moving these to global classes in epic-diesel-common */
@media (min-width: 768px) {
.AddFriends-hideMdLg_9ef7ee6a {
    display: none !important
}
  }
@media (min-width: 1280px) {
.AddFriends-hideMdLg_9ef7ee6a {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important
}
  }
.AddFriends-showMdLg_99bc5032 {
  display: none !important
}
@media (min-width: 768px) {
.AddFriends-showMdLg_99bc5032 {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important
}
  }
@media (min-width: 1280px) {
.AddFriends-showMdLg_99bc5032 {
    display: none !important
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.iconStyles-addFriend_4a52665c {
  opacity: 0.9;
}
.iconStyles-addFriend_4a52665c .background {
    fill: #8f8f8f;
  }
.iconStyles-epicGray_bee64075 .background {
    fill: #8f8f8f;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NewsMeta-wrapper_db350566 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
}
.NewsMeta-author_23aca5e5,
.NewsMeta-bullet_2d175904,
.NewsMeta-time_38bb312c {
  display: inline-block;
  opacity: 0.5;
}
[dir] .NewsMeta-bullet_2d175904 {
  padding: 0 0.44rem;
}
[dir=ltr] .NewsMeta-icon_26eb4a06 {
 margin-right: 0.44rem;
}
[dir=rtl] .NewsMeta-icon_26eb4a06 {
  margin-left: 0.44rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NewsCta-item_403ea311 {
  position: relative;
}
.NewsCta-item_403ea311::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .NewsCta-item_403ea311::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .NewsCta-item_403ea311::after {
 left: 0;
  }
[dir=rtl] .NewsCta-item_403ea311::after {
    right: 0;
  }
.NewsCta-item_403ea311:hover::after {
    opacity: 0.1;
  }
.NewsCta-item_403ea311 {

  color: #f4f4f4;
}
.NewsCta-wrapper_c6ea50d0 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 2
}
[dir] .NewsCta-wrapper_c6ea50d0 {
  padding: 0 2.19rem;
  text-align: center
}
[dir=ltr] .NewsCta-wrapper_c6ea50d0 {
 left: 0
}
[dir=rtl] .NewsCta-wrapper_c6ea50d0 {
  right: 0
}
@media (min-width: 768px) {
[dir] .NewsCta-wrapper_c6ea50d0 {
    padding: 0 4.38rem
}
  }
.NewsCta-heading_7be6c3b7 {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1;
  width: 100%
}
[dir] .NewsCta-heading_7be6c3b7 {

  padding-bottom: 1.25rem
}
@media (min-width: 1024px) {
.NewsCta-heading_7be6c3b7 {
    font-size: 3.13rem;
    letter-spacing: -0.03rem;
    line-height: 1
}
  }
[dir] .NewsCta-meta_dcd31e66 {
  margin-bottom: 2.5rem;
}
.NewsCta-image_318fbc8e {
  display: block;
  height: auto;
  width: 100%;
}
/* Hardcoded posts */
.NewsCta-background_8bb26cd6 {
  height: 0;
}
[dir] .NewsCta-background_8bb26cd6 {
  background-size: cover;
  padding-bottom: 70%;
}
[dir] .NewsCta-welcome_e07a4a1c {
  background-image: url(bea3397476a96b6e2d2ddcaa209dbf06.jpg);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@charset "UTF-8";
[dir] .feedItem {
  background-color: #202020;
}
.feedContentWrapper {
  color: #f4f4f4;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  z-index: 2
}
[dir] .feedContentWrapper {
  padding: 1.25rem 0.94rem
}
@media (min-width: 768px) {
[dir] .feedContentWrapper {
    padding: 2.19rem 2.5rem
}
  }
.NewsItem-item_bae9035f {
  position: relative
}
.NewsItem-item_bae9035f::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .NewsItem-item_bae9035f::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .NewsItem-item_bae9035f::after {
 left: 0;
  }
[dir=rtl] .NewsItem-item_bae9035f::after {
    right: 0;
  }
.NewsItem-item_bae9035f:hover::after {
    opacity: 0.1;
  }
.NewsItem-item_bae9035f {
  overflow: hidden;
  width: 100%
}
@media (min-width: 1600px) {
.NewsItem-item_bae9035f {
    display: inline-block;
    width: calc(50% - 1.31rem)
}
  }
.NewsItem-item_bae9035f > a {
    /*
      2 column layout styles. See Home.pcss
    */

    display: block;
    height: 100%
  }
@media (min-width: 1600px) {

  .NewsItem-item_bae9035f > a {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column-reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
      -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
              justify-content: flex-end
  }
    }
.NewsItem-header_c262dd41 {
}
.NewsItem-fullBleed_4e8026e6 .NewsItem-header_c262dd41 {

    /*
    This adds a little bit of extra width to the gradient background so it doesn't
    cut off a few pixels in a few different breakpoints.
    */
    position: absolute;
    top: 0;
  }
[dir] .NewsItem-fullBleed_4e8026e6 .NewsItem-header_c262dd41 {
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0));
    background-size: 105%;
  }
[dir=ltr] .NewsItem-fullBleed_4e8026e6 .NewsItem-header_c262dd41 {
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
 background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0));
 left: 0;
  }
[dir=rtl] .NewsItem-fullBleed_4e8026e6 .NewsItem-header_c262dd41 {
    background-image: -webkit-gradient(linear, right top, right bottom, color-stop(40%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0));
    right: 0;
  }
.NewsItem-heading_010ebc22 {
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  line-height: 1.25;

  color: #f4f4f4;
  width: 100%
}
[dir] .NewsItem-heading_010ebc22 {
  padding-bottom: 0.31rem
}
@media (min-width: 768px) {
.NewsItem-heading_010ebc22 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
[dir] .NewsItem-heading_010ebc22 {

    padding-bottom: 0.5rem
}
  }
.NewsItem-image_14a49f25 {
  position: relative;
}
[dir] .NewsItem-image_14a49f25 {
  padding-bottom: calc(9 / 16 * 100%);
}
.NewsItem-image_14a49f25 .NewsItem-inner_ba51aa6d {
    position: absolute;
    width: 100%;
  }
.NewsItem-image_14a49f25 .NewsItem-inner_ba51aa6d {
    height: 100%;
    width: auto;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@font-face {
  font-family: 'Fortnite';
  src: url(https://static-assets-prod.epicgames.com/fortnite/static/webpack/c5d323c99493dd76432d4f531b8cc329.woff) format('woff');
}
@media (min-width: 576px) {
  .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      position: absolute;
      bottom: 1.25rem
  }
  [dir=ltr] .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
  left: 1.25rem
  }
  [dir=rtl] .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      right: 1.25rem
  }
    }
@media (min-width: 1280px) {
  .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      bottom: 1.25rem
  }
  [dir=ltr] .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
  left: 1.25rem
  }
  [dir=rtl] .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      right: 1.25rem
  }
    }
@media (min-width: 1024px) {

  [dir=ltr] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
  left: calc(16vw + 1.25rem)
  }

  [dir=rtl] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      right: calc(16vw + 1.25rem)
  }
    }
@media (min-width: 1280px) {

  [dir=ltr] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
  left: calc(16vw + 1.25rem)
  }

  [dir=rtl] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      right: calc(16vw + 1.25rem)
  }
    }
@media (min-width: 1600px) {

  [dir=ltr] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
  left: calc(16vw + 1.25rem)
  }

  [dir=rtl] .Hero-fullBleed_51d1e869 .Hero-notCentered_85c6e931 .Hero-bottomLeft_6dd530af {
      right: calc(16vw + 1.25rem)
  }
    }
.Hero-wrapper_07023d5a {
  width: 100%;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .Hero-wrapper_07023d5a {
  background: #202020;
}
.Hero-wrapper_07023d5a picture {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;

    /*
     * vendor prefix so align-items is only applied in IE,
     * breaks object-fit in modern browsers otherwise
     */
    -ms-flex-align: center;
  }
.Hero-wrapper_07023d5a picture img {
    -o-object-fit: cover;
       object-fit: cover;
    height: auto;
    width: 100%;
  }
.Hero-notFeed_7a4325fc {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 25;
  grid-column: 1 / span 25
}
@media (min-width: 768px) {
.Hero-notFeed_7a4325fc {
    -ms-grid-column: 1;
    -ms-grid-column-span: 48;
    grid-column: 1 / span 48
}
  }
@media (min-width: 1024px) {
.Hero-notFeed_7a4325fc {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 64;
    grid-column: 1 / span 64
}
  }
@media (min-width: 1280px) {
.Hero-notFeed_7a4325fc {
    -ms-grid-column: 1;
    -ms-grid-column-span: 64;
    grid-column: 1 / span 64
}
  }
@media (min-width: 1440px) {
.Hero-notFeed_7a4325fc {
    -ms-grid-column: 1;
    -ms-grid-column-span: 72;
    grid-column: 1 / span 72
}
  }
.Hero-inFeed_584cf5dd {
  position: relative;

  min-height: 26.56rem;
}
[dir] .Hero-inFeed_584cf5dd {
  padding-bottom: calc(9 / 16 * 100%);
}
.Hero-inFeed_584cf5dd .Hero-inner_e3b0d041 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.Hero-inner_e3b0d041 {
  top: 0;
}
[dir=ltr] .Hero-inner_e3b0d041 {
 left: 0;
}
[dir=rtl] .Hero-inner_e3b0d041 {
  right: 0;
}
[dir=ltr] .Hero-fullBleed_51d1e869.Hero-web_85fc96c1 .Hero-content_2f996e57 {
 padding-left: 0;
  }
[dir=rtl] .Hero-fullBleed_51d1e869.Hero-web_85fc96c1 .Hero-content_2f996e57 {
    padding-right: 0;
  }
@media (min-width: 1024px) {
.Hero-fullBleed_51d1e869 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 6;
    grid-column: 1 / 7;
}

    [dir=ltr] .Hero-fullBleed_51d1e869 .Hero-content_2f996e57 {
  padding-left: 16vw;
    }

    [dir=rtl] .Hero-fullBleed_51d1e869 .Hero-content_2f996e57 {
      padding-right: 16vw;
    }
  }
@media (min-width: 1280px) {
    [dir=ltr] .Hero-fullBleed_51d1e869 .Hero-content_2f996e57 {
  padding-left: 16vw;
    }
    [dir=rtl] .Hero-fullBleed_51d1e869 .Hero-content_2f996e57 {
      padding-right: 16vw;
    }
  }
.Hero-fullSize_d108f119 {
  width: 100%;
  height: 100%;
}
.Hero-imageFallback_da888317 {
  display: block;
}
[dir] .Hero-imageFallback_da888317 {
  background-size: cover;
}
.Hero-content_2f996e57 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 3;
}
[dir=ltr] .Hero-content_2f996e57 {
 left: 0;
}
[dir=rtl] .Hero-content_2f996e57 {
  right: 0;
}
.Hero-titles_f9da9edd {
  font-weight: 700;
  text-transform: uppercase;
  color: #f4f4f4;
}
.Hero-fortnite_ed5d7694 .Hero-titles_f9da9edd {
    font-family: 'Fortnite', sans-serif;
    letter-spacing: unset;
  }
.Hero-title_8fcb2b15,
.Hero-subtitle_5312e74f {
  display: block;
  line-height: normal;
}
[dir] .Hero-title_8fcb2b15, [dir] .Hero-subtitle_5312e74f {
  text-align: center;
}
.Hero-title_8fcb2b15 {
  font-size: 3.13rem;
  letter-spacing: -0.19rem
}
[dir] .Hero-title_8fcb2b15 {
  padding: 0 0.63rem
}
@media (min-width: 768px) {
.Hero-title_8fcb2b15 {
    font-size: 4.38rem
}
  }
@media (min-width: 1024px) {
.Hero-title_8fcb2b15 {
    font-size: 5rem
}
  }
.Hero-subtitle_5312e74f {
  font-size: 0.88rem
}
[dir] .Hero-subtitle_5312e74f {
  margin-bottom: 0.31rem
}
@media (min-width: 768px) {
.Hero-subtitle_5312e74f {
    font-size: 1rem
}
  }
@media (min-width: 1024px) {
.Hero-subtitle_5312e74f {
    font-size: 1.25rem
}
  }
.Hero-logo_fa3ab665 {
  width: 100%;
  display: block;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
[dir] .Hero-logo_fa3ab665 > * {
  margin: 0 auto;
}
[dir] .Hero-button_5355d0a0 {
  margin-top: 1.88rem;
}
.Hero-videoContainer_edd5abab {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 2;
}
[dir=ltr] .Hero-videoContainer_edd5abab {
 left: 0;
}
[dir=rtl] .Hero-videoContainer_edd5abab {
  right: 0;
}
.Hero-video_18f68afd {
  position: absolute;
  top: 50%;
  min-width: 101%; /* account for rounding errors */
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
}
[dir=ltr] .Hero-video_18f68afd {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .Hero-video_18f68afd {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.Hero-notCentered_85c6e931 .Hero-titles_f9da9edd {
    text-transform: none;
    max-width: 17.19rem;
  }
.Hero-notCentered_85c6e931 .Hero-title_8fcb2b15,
  .Hero-notCentered_85c6e931 .Hero-subtitle_5312e74f {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25;
  }
[dir] .Hero-notCentered_85c6e931 .Hero-title_8fcb2b15, [dir] .Hero-notCentered_85c6e931 .Hero-subtitle_5312e74f {

    padding: 0;
  }
@media (min-width: 576px) {
    .Hero-notCentered_85c6e931.Hero-content_2f996e57 {
      -webkit-flex-direction: unset;
          -ms-flex-direction: unset;
              flex-direction: unset;
      -webkit-align-items: flex-end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-justify-content: unset;
          -ms-flex-pack: unset;
              justify-content: unset;
    }

    .Hero-notCentered_85c6e931 .Hero-titles_f9da9edd {
      max-width: 45%;
    }

    [dir=ltr] .Hero-notCentered_85c6e931 .Hero-title_8fcb2b15, [dir=ltr] .Hero-notCentered_85c6e931 .Hero-subtitle_5312e74f {
  text-align: left;
    }

    [dir=rtl] .Hero-notCentered_85c6e931 .Hero-title_8fcb2b15, [dir=rtl] .Hero-notCentered_85c6e931 .Hero-subtitle_5312e74f {
      text-align: right;
    }

    .Hero-notCentered_85c6e931 .Hero-logo_fa3ab665 {
      max-width: 11.25rem;
    }

    .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
      position: absolute;
      bottom: 1.25rem;
    }

    [dir=ltr] .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
  right: 1.25rem;
    }

    [dir=rtl] .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
      left: 1.25rem;
    }
  }
@media (min-width: 1024px) {
    .Hero-notCentered_85c6e931 .Hero-subtitle_5312e74f {
      font-size: 1rem;
    }
  }
@media (min-width: 1280px) {
    .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
      bottom: 1.88rem;
    }
    [dir=ltr] .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
  right: 1.88rem;
    }
    [dir=rtl] .Hero-notCentered_85c6e931 .Hero-button_5355d0a0 {
      left: 1.88rem;
    }
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.TwoFactorAuthFeedItem-wrapper_f2827dd3 {
  position: relative
}
.TwoFactorAuthFeedItem-wrapper_f2827dd3::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .TwoFactorAuthFeedItem-wrapper_f2827dd3::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .TwoFactorAuthFeedItem-wrapper_f2827dd3::after {
 left: 0;
  }
[dir=rtl] .TwoFactorAuthFeedItem-wrapper_f2827dd3::after {
    right: 0;
  }
.TwoFactorAuthFeedItem-wrapper_f2827dd3:hover::after {
    opacity: 0.1;
  }
[dir] .TwoFactorAuthFeedItem-wrapper_f2827dd3 {

  background-color: #202020
}
.TwoFactorAuthFeedItem-wrapper_f2827dd3::after {
    z-index: 2;
  }
.TwoFactorAuthFeedItem-button_b2cb66bd {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 1
}
[dir] .TwoFactorAuthFeedItem-button_b2cb66bd {
  padding: 1.5rem 0.94rem
}
@media (min-width: 768px) {
[dir] .TwoFactorAuthFeedItem-button_b2cb66bd {
    padding: 2.5rem
}
  }
.TwoFactorAuthFeedItem-heading_d0b0ae1a {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  text-transform: uppercase;
}
.TwoFactorAuthFeedItem-body_b618b084 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  opacity: 0.6;
}
[dir] .TwoFactorAuthFeedItem-body_b618b084 {
  margin: 0.13rem 0 0;
}
.TwoFactorAuthFeedItem-primaryCta_b46f86a4 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;
}
[dir] .TwoFactorAuthFeedItem-primaryCta_b46f86a4 {

  margin: 1.25rem 0 0;
}
.TwoFactorAuthFeedItem-iconsWrapper_cc3d1d31 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir=ltr] .TwoFactorAuthFeedItem-iconsWrapper_cc3d1d31 {
 padding-left: 0.94rem;
}
[dir=rtl] .TwoFactorAuthFeedItem-iconsWrapper_cc3d1d31 {
  padding-right: 0.94rem;
}
.TwoFactorAuthFeedItem-icon_38071c91 {
  position: relative;
  z-index: 2
}
[dir=ltr] .TwoFactorAuthFeedItem-icon_38071c91 {
 margin-left: 0.63rem
}
[dir=rtl] .TwoFactorAuthFeedItem-icon_38071c91 {
  margin-right: 0.63rem
}
.TwoFactorAuthFeedItem-icon_38071c91:first-child {
    z-index: 3;
  }
[dir=ltr] .TwoFactorAuthFeedItem-icon_38071c91:first-child {
 margin-left: 0;
  }
[dir=rtl] .TwoFactorAuthFeedItem-icon_38071c91:first-child {
    margin-right: 0;
  }
.TwoFactorAuthFeedItem-icon_38071c91:nth-child(3) {
    z-index: 1;
  }
.TwoFactorAuthFeedItem-icon_38071c91 {

  /* cluster 2nd and 3rd avatars in set of 3 */
}
[dir=ltr] .TwoFactorAuthFeedItem-icon_38071c91:first-child:nth-last-child(3) ~ span {
 margin-left: -1.13rem;
  }
[dir=rtl] .TwoFactorAuthFeedItem-icon_38071c91:first-child:nth-last-child(3) ~ span {
    margin-right: -1.13rem;
  }
@media (min-width: 1024px) {
.TwoFactorAuthFeedItem-icon_38071c91 {
    height: 3.75rem;
    width: 3.75rem
}
  }
@media (min-width: 1600px) {
.TwoFactorAuthFeedItem-feed_bf099994 {
    width: 100%
}
  }
.TwoFactorAuthFeedItem-feed_bf099994 .TwoFactorAuthFeedItem-heading_d0b0ae1a {
    max-width: 50%;
    min-width: 10.63rem
  }
@media (min-width: 768px) {

  .TwoFactorAuthFeedItem-feed_bf099994 .TwoFactorAuthFeedItem-heading_d0b0ae1a {
      font-size: 1.25rem;
      letter-spacing: -0.01rem;
      line-height: 1.25;

      max-width: 70%
  }
    }
@media (min-width: 768px) {

  .TwoFactorAuthFeedItem-feed_bf099994 .TwoFactorAuthFeedItem-icon_38071c91 {
      height: 3.75rem;
      width: 3.75rem
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NavItem-link_ba862818 {
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: currentColor;
  width: 100%;
  opacity: 0.5
}
[dir] .NavItem-link_ba862818 {
  -webkit-transition: all 200ms ease;
  padding: 0.5rem 1rem
}
.NavItem-link_ba862818:focus {
    /* TODO implement alternative focus state */
    outline: 0;
  }
.NavItem-link_ba862818:hover,
  .NavItem-link_ba862818.NavItem-active_755b6cd2 {
    opacity: 1;
  }
.NavItem-link_ba862818:hover .NavItem-assetWrapper_eab7a7d8, .NavItem-link_ba862818.NavItem-active_755b6cd2 .NavItem-assetWrapper_eab7a7d8 {
      opacity: 1;
    }
@media (min-width: 768px) {
[dir] .NavItem-link_ba862818 {
    padding: 0.5rem 1.88rem
}

    [dir] .NavItem-link_ba862818:last-child {
      margin-bottom: 1.25rem;
    }
  }
@media (max-width: 1023px) {
    [dir] .NavItem-link_ba862818:hover, [dir] .NavItem-link_ba862818:focus {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
@media (min-width: 1024px) {
[dir=ltr] .NavItem-link_ba862818 {
  padding: 0.5rem 2rem 0.5rem 1rem
}
[dir=rtl] .NavItem-link_ba862818 {
    padding: 0.5rem 1rem 0.5rem 2rem
}

    [dir] .NavItem-link_ba862818:last-child {
      margin-bottom: 0.75rem;
    }
  }
@media (min-width: 1280px) {
[dir] .NavItem-link_ba862818 {
    padding: 0.5rem 1.88rem
}
  }
.NavItem-disabled_598bf912 {
  opacity: 0.5
}
[dir] .NavItem-disabled_598bf912 {
  cursor: default
}
.NavItem-disabled_598bf912:hover,
  .NavItem-disabled_598bf912.NavItem-active_755b6cd2 {
    opacity: 0.5;
  }
.NavItem-assetWrapper_eab7a7d8 {
  position: relative;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch
}
[dir=ltr] .NavItem-assetWrapper_eab7a7d8 {
 margin-right: 0.63rem
}
[dir=rtl] .NavItem-assetWrapper_eab7a7d8 {
  margin-left: 0.63rem
}
@media (min-width: 768px) {
[dir=ltr] .NavItem-assetWrapper_eab7a7d8 {
  margin-right: 1.25rem
}
[dir=rtl] .NavItem-assetWrapper_eab7a7d8 {
    margin-left: 1.25rem
}
  }
@media (min-width: 1024px) {
[dir=ltr] .NavItem-assetWrapper_eab7a7d8 {
  margin-right: 0.63rem
}
[dir=rtl] .NavItem-assetWrapper_eab7a7d8 {
    margin-left: 0.63rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .NavItem-assetWrapper_eab7a7d8 {
  margin-right: 1.25rem
}
[dir=rtl] .NavItem-assetWrapper_eab7a7d8 {
    margin-left: 1.25rem
}
  }
.NavItem-downloadWrapper_d4f4e0a8 {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.NavItem-download_20e72402 {
  width: 1rem;
  height: 1rem;
}
.NavItem-progressWrapper_511fcc73 {
  width: 1rem;
  height: 0.13rem;
  display: block;
}
[dir] .NavItem-progressWrapper_511fcc73 {
  margin-top: 0.13rem;
  background-color: currentColor;
}
.NavItem-progress_d82df11f {
  width: 100%;
  height: 100%;
  display: block;
}
[dir] .NavItem-progress_d82df11f {
  background-color: #0078f2;
}
.NavItem-title_03b71c74 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: block
}
[dir] .NavItem-title_03b71c74 {

  padding-top: 0.13rem
}
@media (min-width: 1024px) {
.NavItem-title_03b71c74 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.NavItem-title_03b71c74 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.NavItem-navHeader_5fd4ccdf {
  opacity: 1;
}
[dir=ltr] .NavItem-navHeader_5fd4ccdf {
 padding: 1.25rem 1.25rem 2.06rem 1rem;
}
[dir=rtl] .NavItem-navHeader_5fd4ccdf {
  padding: 1.25rem 1rem 2.06rem 1.25rem;
}
.NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
    height: 2.5rem;
  }
[dir=ltr] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
 margin-right: 1.13rem;
  }
[dir=rtl] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
    margin-left: 1.13rem;
  }
[dir] .NavItem-navHeader_5fd4ccdf .NavItem-title_03b71c74 {
    padding-top: 0;
  }
@media (min-width: 768px) {
[dir] .NavItem-navHeader_5fd4ccdf {
    padding: 1.88rem 1.88rem 1.5rem;
}

    .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
      height: 2.69rem;
    }
  }
@media (min-width: 1024px) {
[dir] .NavItem-navHeader_5fd4ccdf {
    padding: 1rem 1rem 1.38rem;
}

    [dir=ltr] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
  margin-right: 0.63rem;
    }

    [dir=rtl] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
      margin-left: 0.63rem;
    }
  }
@media (min-width: 1280px) {
[dir] .NavItem-navHeader_5fd4ccdf {
    padding: 1.88rem 1.88rem 1.5rem;
}

    [dir=ltr] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
  margin-right: 1.13rem;
    }

    [dir=rtl] .NavItem-navHeader_5fd4ccdf .NavItem-assetWrapper_eab7a7d8 {
      margin-left: 1.13rem;
    }
  }
.NavItem-pip_6d39e47c {
  position: absolute;
  top: 19%;
}
[dir=ltr] .NavItem-pip_6d39e47c {
 right: 19%;
}
[dir=rtl] .NavItem-pip_6d39e47c {
  left: 19%;
}
[dir] .NavItem-navButton_3c62fc7e {
  cursor: pointer;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NavAccount-button_0627e0db {
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: currentColor;
  text-decoration: none;
  opacity: 0.5
}
[dir] .NavAccount-button_0627e0db {
  -webkit-transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0)
}
[dir=ltr] .NavAccount-button_0627e0db {
 padding: 1.25rem 1.25rem 2.06rem 1rem
}
[dir=rtl] .NavAccount-button_0627e0db {
  padding: 1.25rem 1rem 2.06rem 1.25rem
}
.NavAccount-button_0627e0db:focus {
    /* TODO implement alternative focus state */
    outline: 0;
  }
.NavAccount-button_0627e0db:hover,
  .NavAccount-button_0627e0db.NavAccount-menuOpen_3f415984 {
    opacity: 1;
  }
.NavAccount-button_0627e0db:hover .NavAccount-assetWrapper_b9688525, .NavAccount-button_0627e0db.NavAccount-menuOpen_3f415984 .NavAccount-assetWrapper_b9688525 {
      opacity: 1;
    }
@media (min-width: 768px) {
[dir] .NavAccount-button_0627e0db {
    padding: 0.5rem 1.88rem;
    margin-bottom: 1.25rem
}
  }
@media (max-width: 1023px) {
    [dir] .NavAccount-button_0627e0db:hover {
      background-color: var(--theme-ui-tertiary-bg);
    }
  }
@media (min-width: 1024px) {
[dir] .NavAccount-button_0627e0db {
    margin-bottom: 0.75rem
}
[dir=ltr] .NavAccount-button_0627e0db {
  padding: 0.5rem 2rem 0.5rem 1rem
}
[dir=rtl] .NavAccount-button_0627e0db {
    padding: 0.5rem 1rem 0.5rem 2rem
}
  }
@media (min-width: 1280px) {
[dir] .NavAccount-button_0627e0db {
    padding: 0.5rem 1.88rem
}
  }
.NavAccount-menuOpen_3f415984 {
  pointer-events: none;
}
.NavAccount-assetWrapper_b9688525 {
  position: relative;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch
}
[dir=ltr] .NavAccount-assetWrapper_b9688525 {
 margin-right: 0.63rem
}
[dir=rtl] .NavAccount-assetWrapper_b9688525 {
  margin-left: 0.63rem
}
@media (min-width: 768px) {
[dir=ltr] .NavAccount-assetWrapper_b9688525 {
  margin-right: 1.25rem
}
[dir=rtl] .NavAccount-assetWrapper_b9688525 {
    margin-left: 1.25rem
}
  }
@media (min-width: 1024px) {
[dir=ltr] .NavAccount-assetWrapper_b9688525 {
  margin-right: 0.63rem
}
[dir=rtl] .NavAccount-assetWrapper_b9688525 {
    margin-left: 0.63rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .NavAccount-assetWrapper_b9688525 {
  margin-right: 1.25rem
}
[dir=rtl] .NavAccount-assetWrapper_b9688525 {
    margin-left: 1.25rem
}
  }
.NavAccount-titles_bc142b0e {
  overflow: hidden;
}
.NavAccount-primary_bb7b8d8d {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
}
.NavAccount-primary_bb7b8d8d,
.NavAccount-secondary_48c019d2 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: block;
  white-space: nowrap
}
@media (min-width: 1024px) {
.NavAccount-primary_bb7b8d8d,
.NavAccount-secondary_48c019d2 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.NavAccount-primary_bb7b8d8d,
.NavAccount-secondary_48c019d2 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.NavAccount-secondary_48c019d2 {
  opacity: 0.7;
}
.NavAccount-pip_f1426717 {
  position: absolute;
  top: 19%;
}
[dir=ltr] .NavAccount-pip_f1426717 {
 right: 19%;
}
[dir=rtl] .NavAccount-pip_f1426717 {
  left: 19%;
}

.FileOperationChart-bar_f1701beb {
  stroke: none;
}

.SpeedChart-speedline_4fdf8ce9 {
  opacity: 1;
  stroke-width: 0.13rem; /* force px here */
}

.SpeedChart-speedlinetext_02a1b3e7 {
  font-weight: lighter;
  font-size: 0.75rem;
  fill: white;
  color: white;
}

.SpeedChart-line_ff85a7ca {
  fill: none;
  stroke-width: 0.19rem; /* force px here */
}

.SpeedChart-area_073dbdbd {
  stroke-width: 0;
}

.SpeedChart-focus_85952d7c circle {
  fill: none;
  stroke: white;
  stroke-width: 0.13rem; /* force px here */
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.InstallStats-chartTitle_56a4ff26 {
  opacity: 0.5;
}
[dir] .InstallStats-chartTitle_56a4ff26 {
  margin-top: 1.88rem;
}
[dir=ltr] .InstallStats-downloadedMessage_4f2c6198 {
 float: right;
}
[dir=rtl] .InstallStats-downloadedMessage_4f2c6198 {
  float: left;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryStoreCard-wrapper_14f7d8d8 {
  color: #fff;
  display: block;
  position: relative;
  height: 4.38rem;
}
[dir] .LibraryStoreCard-wrapper_14f7d8d8 {
  background-color: #202020;
}
.LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-wrapper_14f7d8d8 {
    position: relative;

    height: auto;
  }
[dir] .LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-wrapper_14f7d8d8 {
    padding-bottom: calc(4 / 3 * 100%);
  }
.LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-wrapper_14f7d8d8 .LibraryStoreCard-inner_f3458c09 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.LibraryStoreCard-wrapper_14f7d8d8::after {
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    position: absolute;
    top: 0;
    bottom: 0;

    content: '';
    opacity: 0;
  }
[dir] .LibraryStoreCard-wrapper_14f7d8d8::after {
    -webkit-transition: opacity 200ms ease;
    background-color: #fff;
  }
[dir=ltr] .LibraryStoreCard-wrapper_14f7d8d8::after {
 left: 0;
 right: 0;
  }
[dir=rtl] .LibraryStoreCard-wrapper_14f7d8d8::after {
    right: 0;
    left: 0;
  }
.LibraryStoreCard-wrapper_14f7d8d8:hover::after {
    opacity: 0.15;
  }
.LibraryStoreCard-inner_f3458c09 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 100%;
}
.LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-inner_f3458c09 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
[dir] .LibraryStoreCard-icon_466ff240 {
  background: none;
}
[dir] .LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-icon_466ff240 {
    background-color: rgba(255, 255, 255, 0.1);
  }
.LibraryStoreCard-text_326abffe {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  opacity: 0.5;
}
[dir] .LibraryStoreCard-text_326abffe {

  margin-top: 0;
}
[dir=ltr] .LibraryStoreCard-text_326abffe {
 margin-left: 0.31rem;
}
[dir=rtl] .LibraryStoreCard-text_326abffe {
  margin-right: 0.31rem;
}
[dir] .LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-text_326abffe {
    margin-top: 0.63rem;
  }
[dir=ltr] .LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-text_326abffe {
 margin-left: 0;
  }
[dir=rtl] .LibraryStoreCard-gridLayout_bf70c61b .LibraryStoreCard-text_326abffe {
    margin-right: 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LibraryDLC-container_3ba3bc6d {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 6.88rem

  /* TODO use theme color variables */
}
[dir] .LibraryDLC-container_3ba3bc6d {
  margin-bottom: 0.63rem;
  background-color: rgba(255, 255, 255, 0.05)
}
[dir] .LibraryDLC-container_3ba3bc6d.LibraryDLC-disabled_10fe78ba {
    background-color: rgba(255, 255, 255, 0.05);
  }
@media (min-width: 768px) {
.LibraryDLC-container_3ba3bc6d {
    height: 8.63rem
}
  }
@media (min-width: 1024px) {
.LibraryDLC-container_3ba3bc6d {
    height: 7.88rem
}
  }
.LibraryDLC-image_46c0c3df {
  height: 6.88rem;
  width: calc(16 / 9 * 6.88rem)
}
[dir] .LibraryDLC-image_46c0c3df {
  background-position: center;
  background-size: cover
}
@media (min-width: 768px) {
.LibraryDLC-image_46c0c3df {
    height: 8.63rem;
    width: calc(16 / 9 * 8.63rem)
}
  }
@media (min-width: 1024px) {
.LibraryDLC-image_46c0c3df {
    height: 7.88rem;
    width: calc(16 / 9 * 7.88rem)
}
  }
.LibraryDLC-disabled_10fe78ba .LibraryDLC-image_46c0c3df {
    transition: -webkit-filter 200ms ease;
    -o-transition: filter 200ms ease;
    transition: filter 200ms ease;
    transition: filter 200ms ease, -webkit-filter 200ms ease;

    -webkit-filter: grayscale(100%);

            filter: grayscale(100%);

    /* The grayscale filter doesn't work in IE,
    so we also add opacity */
    opacity: 0.5;
  }
[dir] .LibraryDLC-disabled_10fe78ba .LibraryDLC-image_46c0c3df {
    -webkit-transition: -webkit-filter 200ms ease;
  }
[dir] .LibraryDLC-bgMissing_f0924d12 {
  background: #121212 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAD9JREFUGBlj9Pf3n3T48OF3DDgAE0jS1tZWCIc8AxNIAp8isAJ8iuAKcClCUYBNEYYCdEWMQkJCDSBBbADkOwCQ9x5EdD1AMAAAAABJRU5ErkJggg==) repeat;
  background-size: auto;
}
.LibraryDLC-details_b69c452f,
.LibraryDLC-detailsRight_6a5999ef {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
[dir] .LibraryDLC-details_b69c452f, [dir] .LibraryDLC-detailsRight_6a5999ef {
  padding: 1.25rem
}
@media (min-width: 768px) {
[dir] .LibraryDLC-details_b69c452f, [dir] .LibraryDLC-detailsRight_6a5999ef {
    cursor: default;
    padding: 1.88rem
}
  }
.LibraryDLC-detailsRight_6a5999ef {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.LibraryDLC-title_e55b1804,
.LibraryDLC-link_e791d44b,
.LibraryDLC-size_5f0d32b5 {
  /* TODO use theme color variables */
  color: #f4f4f4;
}
.LibraryDLC-link_e791d44b {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;

  opacity: 0.5
}
[dir] .LibraryDLC-link_e791d44b {
  padding: 0.5rem 0
}
.LibraryDLC-link_e791d44b:hover {
    opacity: 1;
  }
[dir] .LibraryDLC-link_e791d44b:hover {
    cursor: pointer;
  }
@media (min-width: 768px) {
.LibraryDLC-link_e791d44b {
    font-size: 0.75rem;
    letter-spacing: 0.03rem;
    line-height: 1.3333;
    text-transform: uppercase;
    font-weight: 500
}
  }
.LibraryDLC-title_e55b1804 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5
}
@media (min-width: 768px) {
.LibraryDLC-title_e55b1804 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1024px) {
.LibraryDLC-title_e55b1804 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
@media (min-width: 1280px) {
.LibraryDLC-title_e55b1804 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.LibraryDLC-size_5f0d32b5 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;

  opacity: 0.5
}
[dir=ltr] .LibraryDLC-size_5f0d32b5 {
 padding-right: 0.63rem
}
[dir=rtl] .LibraryDLC-size_5f0d32b5 {
  padding-left: 0.63rem
}
@media (min-width: 768px) {
.LibraryDLC-size_5f0d32b5 {
    font-size: 0.75rem;
    letter-spacing: 0.03rem;
    line-height: 1.3333;
    text-transform: uppercase;
    font-weight: 500
}
  }
.LibraryDLC-toggle_9c69d4b6 {
  pointer-events: none;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ApplyChangesBanner-wrapper_2840f9d3 {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  color: var(--theme-custom-color-accent-text)
}
[dir] .ApplyChangesBanner-wrapper_2840f9d3 {
  padding: 2.5rem 1.56rem;
  background-color: var(--theme-custom-color-accent)
}
@media (min-width: 768px) {
.ApplyChangesBanner-wrapper_2840f9d3 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
}
  }
@media (min-width: 1024px) {
[dir] .ApplyChangesBanner-wrapper_2840f9d3 {
    padding: 3.13rem 2.5rem
}
  }
.ApplyChangesBanner-title_a0a8dca1,
.ApplyChangesBanner-description_902212b0 {
  display: block;
}
.ApplyChangesBanner-title_a0a8dca1 {
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  line-height: 1.25;

  -webkit-flex: 0 0 100%;

      -ms-flex: 0 0 100%;

          flex: 0 0 100%
}
[dir] .ApplyChangesBanner-title_a0a8dca1 {
  padding-bottom: 0.63rem
}
@media (min-width: 768px) {
.ApplyChangesBanner-title_a0a8dca1 {
    -webkit-flex: 0 0 35%;
        -ms-flex: 0 0 35%;
            flex: 0 0 35%
}
[dir] .ApplyChangesBanner-title_a0a8dca1 {
    padding-bottom: 0
}
[dir=ltr] .ApplyChangesBanner-title_a0a8dca1 {
  padding-right: 1.25rem
}
[dir=rtl] .ApplyChangesBanner-title_a0a8dca1 {
    padding-left: 1.25rem
}
  }
.ApplyChangesBanner-description_902212b0 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;

  max-width: 65%
}
[dir] .ApplyChangesBanner-description_902212b0 {
  text-align: center
}
@media (min-width: 768px) {
[dir] .ApplyChangesBanner-description_902212b0 {
    margin: 0
}
[dir=ltr] .ApplyChangesBanner-description_902212b0 {
  text-align: left
}
[dir=rtl] .ApplyChangesBanner-description_902212b0 {
    text-align: right
}
  }
.ApplyChangesBanner-cta_f323f5bf {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: auto;
      -ms-flex-item-align: auto;
          align-self: auto;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly
}
@media (min-width: 768px) {
.ApplyChangesBanner-cta_f323f5bf {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}
[dir=ltr] .ApplyChangesBanner-cta_f323f5bf {
  margin-left: auto;
}
[dir=rtl] .ApplyChangesBanner-cta_f323f5bf {
    margin-right: auto;
}
      [dir=ltr] .ApplyChangesBanner-cta_f323f5bf button:first-child {
  margin-right: 2.25rem;
      }
      [dir=rtl] .ApplyChangesBanner-cta_f323f5bf button:first-child {
        margin-left: 2.25rem;
      }
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ManageDLC-sectionWrapper_5d687ae2 {
  margin: -0.19rem 0 1.88rem;
}
.ManageDLC-icon_83f9d10f {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;
}
[dir] .ManageDLC-icon_83f9d10f {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
}
[dir=ltr] .ManageDLC-icon_83f9d10f {
 -webkit-transform: rotateZ(180deg) scale(0.9) translateX(0);
 -ms-transform: rotate(180deg) scale(0.9) translateX(0);
 transform: rotateZ(180deg) scale(0.9) translateX(0);
 margin-right: 0.31rem;
}
[dir=rtl] .ManageDLC-icon_83f9d10f {

  -webkit-transform: rotateZ(-180deg) scale(0.9) translateX(0);

      -ms-transform: rotate(-180deg) scale(0.9) translateX(0);

          transform: rotateZ(-180deg) scale(0.9) translateX(0);
  margin-left: 0.31rem;
}
.ManageDLC-item_b223d739:not(.ManageDLC-active_d19d74d8) {
  opacity: 0.4;
}
.ManageDLC-item_b223d739:hover {
  opacity: 1;
}
.ManageDLC-active_d19d74d8 {
  pointer-events: none;
}
.ManageDLC-item_b223d739,
.ManageDLC-label_d3eb6bc6 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  color: currentColor;
}
[dir] .ManageDLC-item_b223d739, [dir] .ManageDLC-label_d3eb6bc6 {
  -webkit-transition: opacity 125ms ease-in-out;
}
[dir] .ManageDLC-label_d3eb6bc6 {
  cursor: default;
}
.ManageDLC-itemWithIcon_5ad27391 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir=ltr] .ManageDLC-itemWithIcon_5ad27391:hover .ManageDLC-icon_83f9d10f {
 -webkit-transform: rotateZ(180deg) scale(0.9) translateX(5Px);
 -ms-transform: rotate(180deg) scale(0.9) translateX(5Px);
 transform: rotateZ(180deg) scale(0.9) translateX(5Px);
  }
[dir=rtl] .ManageDLC-itemWithIcon_5ad27391:hover .ManageDLC-icon_83f9d10f {
    -webkit-transform: rotateZ(-180deg) scale(0.9) translateX(-5Px);
        -ms-transform: rotate(-180deg) scale(0.9) translateX(-5Px);
            transform: rotateZ(-180deg) scale(0.9) translateX(-5Px);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.GameSettings-toggle_70f46c66 {
  pointer-events: none;
}
.GameSettings-detail_d5d40095 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  color: #121212;
  max-width: 60%;
  opacity: 0.6;
  word-wrap: break-word;
}
[dir=ltr] .GameSettings-detail_d5d40095 {
 text-align: right;
}
[dir=rtl] .GameSettings-detail_d5d40095 {
  text-align: left;
}
.GameSettings-separator_346e748a {
  display: block;
  width: 100%;
  height: calc(calc(1.25rem / 2) * 0.5);
}
[dir] .GameSettings-separator_346e748a {
  border-top: 0.06rem solid rgba(0, 0, 0, 0.1);
  margin-top: calc(calc(1.25rem / 2) * 0.5);
}
.GameSettings-large_b8d392d0 .GameSettings-separator_346e748a {
    height: calc(calc(1.5rem / 2) * 0.5);
  }
[dir] .GameSettings-large_b8d392d0 .GameSettings-separator_346e748a {
    margin-top: calc(calc(1.5rem / 2) * 0.5);
  }
@media (max-width: 575px) {
.GameSettings-separator_346e748a {
    height: calc(calc(3.13rem / 2) * 0.5)
}
[dir] .GameSettings-separator_346e748a {
    margin-top: calc(calc(3.13rem / 2) * 0.5)
}
  }
.GameSettings-version_5232d29d {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  color: #121212;
  opacity: 0.6;
}
[dir] .GameSettings-version_5232d29d {
  cursor: default;
  padding-top: 1.25rem;
}
[dir] .GameSettings-large_b8d392d0 .GameSettings-version_5232d29d {
    padding-top: 1.5rem;
  }
@media (max-width: 575px) {
[dir] .GameSettings-version_5232d29d {
    padding-top: 3.13rem
}
  }
.GameSettings-version_5232d29d .GameSettings-title_af3b772c {
    text-transform: none;
    opacity: 0.6;
  }
[dir] .GameSettings-version_5232d29d .GameSettings-detail_d5d40095 {
    margin: calc(1.25rem * -1) 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.GameListItem-leftContent_d4668ddc,
.GameListItem-rightContent_6af16800 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.GameListItem-leftContent_d4668ddc {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}
.GameListItem-leftContent_d4668ddc.GameListItem-gridLayout_e55c4a66 {
    display: block;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
  }
.GameListItem-rightContent_6af16800 {
  /* TODO Fix resetList style order issue:
     https://jira.it.epicgames.net/browse/OPP-10129
     https://jira.it.epicgames.net/browse/OPP-10515
     composes: resetList from global; */
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
[dir] .GameListItem-rightContent_6af16800 {
  padding: 0;
  margin: 0 calc(1.25rem / -2);
}
@media (min-width: 1280px) {
[dir] .GameListItem-rightContent_6af16800 {
    margin: 0 calc(1.25rem / -2);
}
  }
.GameListItem-rightContent_6af16800 {

  width: 40%;
}
.GameListItem-gameBox_21d2c807 {
  width: calc((16 / 9) * 3.44rem);
  height: 3.44rem;
}
.GameListItem-gridLayout_e55c4a66 .GameListItem-gameBox_21d2c807 {
    width: auto;
    height: auto;
  }
.GameListItem-gameBox_21d2c807::after {
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    position: absolute;
    top: 0;
    bottom: 0;

    content: '';
    opacity: 0;
  }
[dir] .GameListItem-gameBox_21d2c807::after {
    -webkit-transition: opacity 200ms ease;
    background-color: #fff;
  }
[dir=ltr] .GameListItem-gameBox_21d2c807::after {
 left: 0;
 right: 0;
  }
[dir=rtl] .GameListItem-gameBox_21d2c807::after {
    right: 0;
    left: 0;
  }
.GameListItem-hasHover_68aedff7:hover .GameListItem-gameBox_21d2c807::after,
    .GameListItem-active_5b070912 .GameListItem-gameBox_21d2c807::after {
      opacity: 0.15;
    }
[dir] .GameListItem-rightContentListItem_9ce76bbf {
  padding: calc(1.25rem / 2);
}
@media (min-width: 1280px) {
[dir] .GameListItem-rightContentListItem_9ce76bbf {
    padding: calc(1.25rem / 2);
}
  }
.GameListItem-rightContentListItem_9ce76bbf {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(100% / 2);
}
@media (min-width: 768px) {
.GameListItem-rightContentListItem_9ce76bbf {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
@media (min-width: 1024px) {
.GameListItem-rightContentListItem_9ce76bbf {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
@media (min-width: 1280px) {
.GameListItem-rightContentListItem_9ce76bbf {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
.GameListItem-rightContentListItem_9ce76bbf {

  display: block;
}
.GameListItem-playtime_da7beee1 {
  text-transform: lowercase;
}
[dir=ltr] .GameListItem-textWrapper_f1a120ff {
 margin-left: 1.31rem;
}
[dir=rtl] .GameListItem-textWrapper_f1a120ff {
  margin-right: 1.31rem;
}
[dir] .GameListItem-gridLayout_e55c4a66 .GameListItem-textWrapper_f1a120ff {
    margin-top: 0.5rem;
  }
[dir=ltr] .GameListItem-gridLayout_e55c4a66 .GameListItem-textWrapper_f1a120ff {
 margin-left: 0;
  }
[dir=rtl] .GameListItem-gridLayout_e55c4a66 .GameListItem-textWrapper_f1a120ff {
    margin-right: 0;
  }
.GameListItem-content_a604e69c.GameListItem-hasHover_68aedff7:hover .GameListItem-text_7362a06e, .GameListItem-content_a604e69c.GameListItem-hasHover_68aedff7:hover .GameListItem-name_872b4279 {
    opacity: 1;
  }
.GameListItem-name_872b4279 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  height: 1.19rem;
  opacity: 1;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis
}
[dir] .GameListItem-name_872b4279 {
  -webkit-transition: opacity 125ms ease-in-out
}
[dir=ltr] .GameListItem-name_872b4279 {
 text-align: left
}
[dir=rtl] .GameListItem-name_872b4279 {
  text-align: right
}
@media (min-width: 1024px) {
.GameListItem-name_872b4279 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.GameListItem-name_872b4279 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.GameListItem-gridLayout_e55c4a66 .GameListItem-name_872b4279 {
    width: 85%;
  }
.GameListItem-text_7362a06e {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  -webkit-align-content: baseline;

      -ms-flex-line-pack: baseline;

          align-content: baseline;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-weight: var(--font-regular);
  line-height: normal;
  color: #f4f4f4;
  opacity: 0.6;
  text-transform: none;
}
[dir] .GameListItem-text_7362a06e {
  -webkit-transition: opacity 125ms ease-in-out;
  margin: 0.13rem 0 0;
}
[dir=ltr] .GameListItem-text_7362a06e {
 text-align: left;
}
[dir=rtl] .GameListItem-text_7362a06e {
  text-align: right;
}
.GameListItem-icon_a841d14c {
  width: 0.75rem;
  height: 0.63rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir=ltr] .GameListItem-icon_a841d14c {
 margin: 0.13rem 0.25rem 0 0;
}
[dir=rtl] .GameListItem-icon_a841d14c {
  margin: 0.13rem 0 0 0.25rem;
}
.GameListItem-icon_a841d14c svg {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
  position: absolute;
  top: 4.38rem;
  z-index: 1005;
  width: 14rem
}
[dir] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
  padding: 1.13rem 0.63rem 1.25rem
}
[dir=ltr] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
 left: 0;
 right: 0
}
[dir=rtl] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
  right: 0;
  left: 0
}
@media (min-width: 1024px) {
.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
    width: 17.5rem
}
[dir=ltr] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
  left: auto;
  right: 0
}
[dir=rtl] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0 {
    right: auto;
    left: 0
}
  }
.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-gridLayout_e55c4a66 {
    top: 100%;
  }
[dir] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-gridLayout_e55c4a66 {
    margin-top: -1.13rem;
  }
[dir=ltr] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-gridLayout_e55c4a66 {
 left: auto;
 right: 0;
  }
[dir=rtl] .GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-settings_a52b7ff0.GameListItem-gridLayout_e55c4a66 {
    right: auto;
    left: 0;
  }
[dir] .GameListItem-badge_aa3d5173 {
  padding: 0.63rem;
}
.GameListItem-gridLayout_e55c4a66 .GameListItem-badge_aa3d5173 {
    position: absolute;
    top: 0;
  }
[dir=ltr] .GameListItem-gridLayout_e55c4a66 .GameListItem-badge_aa3d5173 {
 right: 0;
  }
[dir=rtl] .GameListItem-gridLayout_e55c4a66 .GameListItem-badge_aa3d5173 {
    left: 0;
  }
@media (min-width: 1024px) {
[dir] .GameListItem-badge_aa3d5173 {
    padding: 0.94rem
}
  }
.GameListItem-tag_6c415049 {
  font-size: 0.56rem;
  letter-spacing: 0.09
}
[dir] .GameListItem-tag_6c415049 {

  background-color: rgba(32, 32, 32, 0.5);
  padding: 0.38rem 0.44rem;
  border-radius: 0.13rem
}
[dir] .GameListItem-tag_6c415049.GameListItem-light_a464b982 {
    background-color: rgba(255, 255, 255, 0.1);
  }
.GameListItem-settingsSpacer_5187691a {
  width: 4.38rem;
  height: 100%;
}
[dir] .GameListItem-settingsSpacer_5187691a {
  background-color: transparent;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ManageGames-container_70bfe4e1 {
  padding-top: 1.25rem
}
@media (min-width: 1280px) {
[dir] .ManageGames-container_70bfe4e1 {
    padding-top: 1.88rem
}
  }
.ManageGames-listHeaderWrapper_3dbde64a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
}
[dir] .ManageGames-listHeaderWrapper_3dbde64a {
  margin-bottom: 0.5rem;
}
[dir=ltr] .ManageGames-listHeaderWrapper_3dbde64a {
 padding-right: 4.38rem;
}
[dir=rtl] .ManageGames-listHeaderWrapper_3dbde64a {
  padding-left: 4.38rem;
}
.ManageGames-listHeader_7f27ca5e {
  /* TODO Fix resetList style order issue:
     https://jira.it.epicgames.net/browse/OPP-10129
     https://jira.it.epicgames.net/browse/OPP-10515
     composes: resetList from global; */
  list-style-type: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
[dir] .ManageGames-listHeader_7f27ca5e {
  padding: 0;
  margin: 0 calc(1.25rem / -2);
}
@media (min-width: 1280px) {
[dir] .ManageGames-listHeader_7f27ca5e {
    margin: 0 calc(1.25rem / -2);
}
  }
.ManageGames-listHeader_7f27ca5e {

  width: 40%;
}
[dir] .ManageGames-listHeaderItem_67523cd9 {
  padding: calc(1.25rem / 2);
}
@media (min-width: 1280px) {
[dir] .ManageGames-listHeaderItem_67523cd9 {
    padding: calc(1.25rem / 2);
}
  }
.ManageGames-listHeaderItem_67523cd9 {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(100% / 2);
}
@media (min-width: 768px) {
.ManageGames-listHeaderItem_67523cd9 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
@media (min-width: 1024px) {
.ManageGames-listHeaderItem_67523cd9 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
@media (min-width: 1280px) {
.ManageGames-listHeaderItem_67523cd9 {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 2);
}
  }
.ManageGames-listHeaderItem_67523cd9 {
  font-size: 0.56rem;
  letter-spacing: 0.09;

  color: #f4f4f4;
  opacity: 0.6;
  text-transform: uppercase;
}
[dir] .ManageGames-listHeaderItem_67523cd9 {
  padding: 0;
  text-align: center;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@media (min-width: 576px) {
.ProductButton-wrapper_e4c660fa {
    position: relative
}
  }
.ProductButton-button_28233e26 {
  width: 100%;
}
.ProductButton-button_28233e26 .ProductButton-secondLine_43003c55,
  .ProductButton-button_28233e26 .ProductButton-secondaryText_ba6e89dd {
    opacity: 0.5;
  }
.ProductButton-button_28233e26 .ProductButton-secondLine_43003c55 {
    display: block;
    font-size: 0.75rem;
    text-transform: none;
  }
.ProductButton-settings_ef3d3873 {
  position: absolute;
  width: 100%
}
.ProductButton-settings_ef3d3873.ProductButton-reverse_087d6aff {
    bottom: 100%;
  }
@media (min-width: 576px) {
.ProductButton-settings_ef3d3873 {
    z-index: 3
}
  }
/* Even when disabled, only dim text so settings still appear active */
.ProductButton-disabledText_f50b01ec {
  opacity: 0.5;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.UpdaterDrawer-wrapper_a45f7de5 {
  -o-transition: width 125ms ease-in-out;
  transition: width 125ms ease-in-out;
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: #f4f4f4;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 1003;
}
[dir] .UpdaterDrawer-wrapper_a45f7de5 {
  -webkit-transition: width 125ms ease-in-out;
}
[dir=ltr] .UpdaterDrawer-wrapper_a45f7de5 {
 left: 16vw;
}
[dir=rtl] .UpdaterDrawer-wrapper_a45f7de5 {
  right: 16vw;
}
.disableHeavyTransitions .UpdaterDrawer-wrapper_a45f7de5 {
    -o-transition: none;
    transition: none;
  }
[dir] .disableHeavyTransitions .UpdaterDrawer-wrapper_a45f7de5 {
    -webkit-transition: none;
  }
[dir=ltr] .disableHeavyTransitions .UpdaterDrawer-wrapper_a45f7de5 {
 -webkit-animation: unset !important;
 animation: unset !important;
  }
[dir=rtl] .disableHeavyTransitions .UpdaterDrawer-wrapper_a45f7de5 {
    -webkit-animation: unset !important;
            animation: unset !important;
  }
@media (min-width: 1280px) {
[dir=ltr] .UpdaterDrawer-wrapper_a45f7de5 {
  left: 16vw
}
[dir=rtl] .UpdaterDrawer-wrapper_a45f7de5 {
    right: 16vw
}
  }
@media (min-width: 1440px) {
[dir=ltr] .UpdaterDrawer-wrapper_a45f7de5 {
  left: 16vw
}
[dir=rtl] .UpdaterDrawer-wrapper_a45f7de5 {
    right: 16vw
}
  }
@media (min-width: 1600px) {
[dir=ltr] .UpdaterDrawer-wrapper_a45f7de5 {
  left: 16vw
}
[dir=rtl] .UpdaterDrawer-wrapper_a45f7de5 {
    right: 16vw
}
  }
.UpdaterDrawer-wrapper_a45f7de5 {

  /* TODO mobile/tablet styles */
}
@media (max-width: 1023px) {
.UpdaterDrawer-wrapper_a45f7de5 {
    display: none !important
}
  }
.UpdaterDrawer-inner_fa425991 {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;
  min-height: 100%;
  width: 31rem;
  position: relative;
}
[dir] .UpdaterDrawer-inner_fa425991 {
  -webkit-transition: -webkit-transform 125ms ease-in-out;

  background: #202020;
  padding-bottom: 1.25rem;
}
[dir=ltr] .UpdaterDrawer-inner_fa425991 {
 padding-right: 1.25rem;
 padding-left: 1.25rem;
 -webkit-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 transform: translateX(-100%);
}
[dir=rtl] .UpdaterDrawer-inner_fa425991 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.disableHeavyTransitions .UpdaterDrawer-inner_fa425991 {
    -o-transition: none;
    transition: none;
  }
[dir] .disableHeavyTransitions .UpdaterDrawer-inner_fa425991 {
    -webkit-transition: none;
  }
[dir=ltr] .disableHeavyTransitions .UpdaterDrawer-inner_fa425991 {
 -webkit-animation: unset !important;
 animation: unset !important;
  }
[dir=rtl] .disableHeavyTransitions .UpdaterDrawer-inner_fa425991 {
    -webkit-animation: unset !important;
            animation: unset !important;
  }
@media (min-width: 1024px) {
[dir] .UpdaterDrawer-inner_fa425991 {
    padding-top: 1.94rem
}
  }
@media (min-width: 1280px) {
[dir] .UpdaterDrawer-inner_fa425991 {
    padding-top: 2.81rem
}
  }
.UpdaterDrawer-open_f96596a1 {
  width: 31rem;
}
.UpdaterDrawer-open_f96596a1 .UpdaterDrawer-inner_fa425991 {
    -webkit-transform: none;
        -ms-transform: none;
  }
[dir] .UpdaterDrawer-open_f96596a1 .UpdaterDrawer-inner_fa425991 {
            transform: none;
  }
[dir] .UpdaterDrawer-title_f87dbce5 {
  padding-bottom: 2.81rem;
  border-bottom: 0.06rem solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.25rem;
}
.UpdaterDrawer-iconText_0d1c0a97 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: none;
}
[dir] .UpdaterDrawer-iconText_0d1c0a97 {
  border: 0;
  margin-top: 0.63rem;
}
[dir=ltr] .UpdaterDrawer-iconText_0d1c0a97 {
 text-align: left;
}
[dir=rtl] .UpdaterDrawer-iconText_0d1c0a97 {
  text-align: right;
}
.UpdaterDrawer-iconSvg_3622500b {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
[dir=ltr] .UpdaterDrawer-iconSvg_3622500b {
 margin-right: 0.63rem;
}
[dir=rtl] .UpdaterDrawer-iconSvg_3622500b {
  margin-left: 0.63rem;
}
.UpdaterDrawer-warningIcon_f258039b {
  color: #e08220;
}
.UpdaterDrawer-infoIcon_fd54a2f6 {
  color: #0078f2;
}
[dir] .UpdaterDrawer-activeUpdatingButton_5bdcc773 {
  margin-top: 0.94rem;
  margin-bottom: 1.25rem;
}
.UpdaterDrawer-activeUpdatingButton_5bdcc773 > div {
    width: 100%;
  }
.UpdaterDrawer-build_aaa87178 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  position: absolute;
  bottom: 0.63rem;
  opacity: 0.1;
}
[dir] .UpdaterDrawer-build_aaa87178 {
  text-align: center;
}
[dir=ltr] .UpdaterDrawer-build_aaa87178 {
 left: 0;
 right: 0;
}
[dir=rtl] .UpdaterDrawer-build_aaa87178 {
  right: 0;
  left: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.NavAccountMenu-menuWrapper_6a7cea01 {
  position: fixed;
  display: none;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: 0;
  width: 100%;
  height: 100%;
  grid-column: none;
  grid-row: none;
  z-index: 1005
}
[dir] .NavAccountMenu-menuWrapper_6a7cea01 {
  background: rgba(0, 0, 0, 0.5)
}
[dir=ltr] .NavAccountMenu-menuWrapper_6a7cea01 {
 left: 0
}
[dir=rtl] .NavAccountMenu-menuWrapper_6a7cea01 {
  right: 0
}
.NavAccountMenu-menuWrapper_6a7cea01.NavAccountMenu-isOpen_6a6023d2 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
@media (min-width: 1024px) {
.NavAccountMenu-menuWrapper_6a7cea01 {
    width: 16.38rem;
    height: auto;
    position: fixed;
    bottom: 4.69rem
}
[dir] .NavAccountMenu-menuWrapper_6a7cea01 {
    background: rgba(0, 0, 0, 0)
}
[dir=ltr] .NavAccountMenu-menuWrapper_6a7cea01 {
  left: 1.88rem
}
[dir=rtl] .NavAccountMenu-menuWrapper_6a7cea01 {
    right: 1.88rem
}

    .NavAccountMenu-menuWrapper_6a7cea01.NavAccountMenu-isOpen_6a6023d2 {
      display: block;
    }
  }
.NavAccountMenu-menu_ba9908e0 {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  line-height: normal
}
[dir] .NavAccountMenu-menu_ba9908e0 {
  background: var(--theme-ui-tertiary-bg)
}
[dir=ltr] .NavAccountMenu-menu_ba9908e0 {
 left: 0
}
[dir=rtl] .NavAccountMenu-menu_ba9908e0 {
  right: 0
}
@media (min-width: 768px) {
.NavAccountMenu-menu_ba9908e0 {
    position: relative;
    width: 20.63rem;
    height: auto;
    bottom: unset;
    -webkit-box-shadow: 0 0 2.19rem 0 rgba(0, 0, 0, 0.5)
}
[dir] .NavAccountMenu-menu_ba9908e0 {
            box-shadow: 0 0 2.19rem 0 rgba(0, 0, 0, 0.5)
}
[dir=ltr] .NavAccountMenu-menu_ba9908e0 {
  left: unset
}
[dir=rtl] .NavAccountMenu-menu_ba9908e0 {
    right: unset
}
  }
@media (min-width: 1024px) {
.NavAccountMenu-menu_ba9908e0 {
    width: 100%;
    height: 100%
}
[dir] .NavAccountMenu-menu_ba9908e0 {
    background: var(--theme-ui-secondary-bg)
}
  }
[dir] .NavAccountMenu-section_772a846b {
  padding: 2.5rem 1.88rem
}
[dir] .NavAccountMenu-section_772a846b:first-child {
    border-bottom: 0.06rem solid rgba(255, 255, 255, 0.1);
  }
[dir] .NavAccountMenu-section_772a846b:only-child {
    border-bottom: 0;
  }
[dir] .NavAccountMenu-itemWrapper_5d4e1f17 {
  margin-bottom: 1.25rem
}
[dir] .NavAccountMenu-itemWrapper_5d4e1f17:last-child {
    margin-bottom: 0;
  }
[dir] .NavAccountMenu-signIn_9827ad02 {
  margin-bottom: 2.5rem;
}
.NavAccountMenu-menuItem_d7d6d644 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  text-transform: capitalize;
  color: var(--theme-ui-primary-text);
}
[dir=ltr] .NavAccountMenu-menuItem_d7d6d644 {
 text-align: left;
}
[dir=rtl] .NavAccountMenu-menuItem_d7d6d644 {

  text-align: right;
}
.NavAccountMenu-status_5e0c8a68 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 0;
}
.NavAccountMenu-statusItem_957bd085 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  opacity: 0.3;
  color: var(--theme-ui-primary-text)
}
[dir] .NavAccountMenu-statusItem_957bd085 {
  -webkit-transition: opacity 125ms ease-in-out
}
.NavAccountMenu-statusItem_957bd085:hover {
    opacity: 1;
  }
[dir=ltr] .NavAccountMenu-statusItem_957bd085:first-child {
 margin-right: 1.88rem;
  }
[dir=rtl] .NavAccountMenu-statusItem_957bd085:first-child {
    margin-left: 1.88rem;
  }
.NavAccountMenu-active_6590fd32 {
  opacity: 1;
  pointer-events: none;
}
.NavAccountMenu-menuItemFlex_ae627c32 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
[dir] .NavAccountMenu-menuItemPip_067a5995 {
  background-color: #e63c3c;
}
[dir=ltr] .NavAccountMenu-menuItemPip_067a5995 {
 margin-left: 1em;
}
[dir=rtl] .NavAccountMenu-menuItemPip_067a5995 {
  margin-right: 1em;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .CouponNavAccountMenuItem-menuItem_a3f372b6 > span {
    background-color: #e08220;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Nav-overlay_c4515ed1 {
  grid-row: none;
  grid-column: none;
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  z-index: 1002
}
[dir=ltr] .Nav-overlay_c4515ed1 {
 left: 0
}
[dir=rtl] .Nav-overlay_c4515ed1 {
  right: 0
}
.Nav-overlay_c4515ed1.Nav-overlayOpen_3bfcb56a {
    width: 100%;
  }
.Nav-overlayBg_c6cabd31 {
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  display: block;
  height: 100%;
  opacity: 0;
}
[dir] .Nav-overlayBg_c6cabd31 {
  -webkit-transition: opacity 200ms ease;

  background-color: var(--theme-ui-primary-bg);
}
.Nav-overlayOpen_3bfcb56a .Nav-overlayBg_c6cabd31 {
    opacity: 0.7;
  }
/* should be aligned with side nav button in TopNav */
.Nav-close_36878673 {
  color: var(--theme-ui-primary-text);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  height: 2.5rem
}
[dir] .Nav-close_36878673 {
  margin: 1.25rem
}
[dir=ltr] .Nav-close_36878673 {
 right: 0.63rem
}
[dir=rtl] .Nav-close_36878673 {
  left: 0.63rem
}
.Nav-close_36878673::before {
    content: '';
    display: block;
    width: 3.13rem;
    height: 3.13rem;
    position: absolute;
    top: 50%;
    z-index: -1;
  }
[dir] .Nav-close_36878673::before {
    background-color: var(--theme-custom-color-primary-bg);
  }
[dir=ltr] .Nav-close_36878673::before {
 right: 50%;
 -webkit-transform: translate(50%, -50%);
 -ms-transform: translate(50%, -50%);
 transform: translate(50%, -50%);
  }
[dir=rtl] .Nav-close_36878673::before {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
@media (min-width: 1024px) {
.Nav-close_36878673 {
    display: none
}
  }
.Nav-closeText_0d03e40d {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  display: none;
  color: var(--theme-ui-primary-text)
}
[dir=ltr] .Nav-closeText_0d03e40d {
 margin-right: 0.63rem
}
[dir=rtl] .Nav-closeText_0d03e40d {
  margin-left: 0.63rem
}
@media (min-width: 768px) {
.Nav-closeText_0d03e40d {
    display: inline-block
}
  }
@media (min-width: 1024px) {
.Nav-closeText_0d03e40d {
    display: none
}
  }
.Nav-closeIcon_e2ffd5e6 {
  width: 12Px;
  height: 12Px;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DefaultToastItem-content_ec74976d {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
[dir] .DefaultToastItem-content_ec74976d {
  background-color: #202020;
  padding: 1.63rem 1.25rem;
}
.DefaultToastItem-asset_be1d46c8 {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
[dir=ltr] .DefaultToastItem-asset_be1d46c8 {
 margin-right: 1.25rem;
}
[dir=rtl] .DefaultToastItem-asset_be1d46c8 {
  margin-left: 1.25rem;
}
[dir] .DefaultToastItem-assetError_d5679387 {
  background-color: #e63c3c;
}
.DefaultToastItem-closeButton_f00f28d8 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 1.88rem;
  width: 1.88rem;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0.5;
  position: absolute;
  top: 0
}
[dir=ltr] .DefaultToastItem-closeButton_f00f28d8 {
 right: 0
}
[dir=rtl] .DefaultToastItem-closeButton_f00f28d8 {
  left: 0
}
@media (min-width: 576px) {
.DefaultToastItem-closeButton_f00f28d8 {
    height: 2.5rem;
    width: 2.5rem
}
  }
.DefaultToastItem-messages_07d82415 a {
    color: #fff;
    text-decoration: underline;
  }
.DefaultToastItem-messages_07d82415 > span {
    display: inline;
  }
[dir=ltr] .DefaultToastItem-messages_07d82415 > span {
 margin-right: 0.19rem;
  }
[dir=rtl] .DefaultToastItem-messages_07d82415 > span {
    margin-left: 0.19rem;
  }
.DefaultToastItem-messageWrapper_83decf7d {
  white-space: pre-wrap;

  font-size: 0.88rem;

  letter-spacing: 0.01rem;

  line-height: 1.4;
}
[dir] .DefaultToastItem-messageWrapper_83decf7d {
  margin: 0;
  padding: 0;
}
.DefaultToastItem-content_ec74976d,
.DefaultToastItem-closeButton_f00f28d8 {
  color: #fff;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.MessageToastItem-alert_ecec351d {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  color: var(--theme-ui-primary-text);
  width: 100%;
  height: 7.5rem;
  max-width: 20.94rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
[dir] .MessageToastItem-alert_ecec351d {
  background: var(--theme-ui-secondary-bg)
}
@media (min-width: 768px) {
.MessageToastItem-alert_ecec351d {
    max-width: 100%;
    width: 26.69rem;
    height: 8.63rem
}
  }
@media (min-width: 1280px) {
.MessageToastItem-alert_ecec351d {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4;

    width: 32.44rem;
    height: 10.56rem
}
  }
.MessageToastItem-alert_ecec351d.MessageToastItem-alert_ecec351d { /* Override default toast padding */
  }
[dir] .MessageToastItem-alert_ecec351d.MessageToastItem-alert_ecec351d {
    padding-bottom: 0;
  }
.MessageToastItem-image_004b8b22 {
  width: calc(3 / 4 * 7.5rem);
  height: 100%
}
[dir] .MessageToastItem-image_004b8b22 {
  background-color: #2b2b2b
}
@media (min-width: 768px) {
.MessageToastItem-image_004b8b22 {
    width: calc(8.63rem * 3 / 4)
}
  }
@media (min-width: 1280px) {
.MessageToastItem-image_004b8b22 {
    width: calc(10.56rem * 3 / 4)
}
  }
.MessageToastItem-image_004b8b22 > div {
    height: 100%;
  }
.MessageToastItem-image_004b8b22 .MessageToastItem-inner_3e9b0aa5 {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
  }
.MessageToastItem-icon_8cfdb514 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.MessageToastItem-content_12c6ad00 {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  position: relative
}
[dir] .MessageToastItem-content_12c6ad00 {
  padding: 0.94rem 1.25rem
}
@media (min-width: 768px) {
[dir] .MessageToastItem-content_12c6ad00 {
    padding: 1.25rem 1.25rem
}
  }
@media (min-width: 1280px) {
[dir] .MessageToastItem-content_12c6ad00 {
    padding: 1.56rem 1.56rem
}
  }
.MessageToastItem-title_8628c0d4,
.MessageToastItem-description_895e78f9 {
  display: block;
}
.MessageToastItem-description_895e78f9 {
  opacity: 0.6;
  line-height: 1
}
[dir] .MessageToastItem-description_895e78f9 {
  margin-top: 0.13rem
}
@media (min-width: 768px) {
.MessageToastItem-description_895e78f9 {
    line-height: 1.5
}
  }
.MessageToastItem-closeButton_f31351d5 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  position: absolute; /* mystery numbers to account for click area */
  top: 0.81rem;
  color: var(--theme-ui-primary-text);
  opacity: 0.6;
  width: 1.25rem;
  height: 1.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
[dir] .MessageToastItem-closeButton_f31351d5 {
  -webkit-transition: opacity 125ms ease-in-out
}
[dir=ltr] .MessageToastItem-closeButton_f31351d5 {
 right: 0.5rem
}
[dir=rtl] .MessageToastItem-closeButton_f31351d5 {
  left: 0.5rem
}
@media (min-width: 768px) {
[dir=ltr] .MessageToastItem-closeButton_f31351d5 {
  right: 0.88rem
}
[dir=rtl] .MessageToastItem-closeButton_f31351d5 {
    left: 0.88rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .MessageToastItem-closeButton_f31351d5 {
  right: 1.13rem
}
[dir=rtl] .MessageToastItem-closeButton_f31351d5 {
    left: 1.13rem
}
  }
.MessageToastItem-closeButton_f31351d5:hover {
    opacity: 1;
  }
.MessageToastItem-closeIcon_4ade3166 {
  width: 0.56rem;
}
.MessageToastItem-ctas_2c82c949 {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
[dir=ltr] .MessageToastItem-ctas_2c82c949 {
 right: 0;
}
[dir=rtl] .MessageToastItem-ctas_2c82c949 {
  left: 0;
}
.MessageToastItem-primaryCta_66fc7db2,
.MessageToastItem-secondaryCta_b6cb0031 {
  font-size: 0.56rem;
  letter-spacing: 0.09;
  text-transform: uppercase;
  font-weight: 500;

  color: var(--theme-ui-primary-text);
  min-width: 0;
  height: auto;
  position: relative;
  max-width: 10.94rem;
  white-space: normal
}
[dir] .MessageToastItem-primaryCta_66fc7db2, [dir] .MessageToastItem-secondaryCta_b6cb0031 {
  padding: 0.94rem 1.25rem;
  background: none
}
@media (min-width: 768px) {
[dir] .MessageToastItem-primaryCta_66fc7db2, [dir] .MessageToastItem-secondaryCta_b6cb0031 {
    padding: 1.25rem
}
  }
@media (min-width: 1280px) {
.MessageToastItem-primaryCta_66fc7db2,
.MessageToastItem-secondaryCta_b6cb0031 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;
    font-size: 0.69rem;
    letter-spacing: 0.03rem
}
[dir] .MessageToastItem-primaryCta_66fc7db2, [dir] .MessageToastItem-secondaryCta_b6cb0031 {

    padding: 1.56rem
}
  }
[dir=ltr] .MessageToastItem-primaryCta_66fc7db2:not(.MessageToastItem-primaryCtaOnly_207fc381) {
 padding-right: 0.63rem;
}
[dir=rtl] .MessageToastItem-primaryCta_66fc7db2:not(.MessageToastItem-primaryCtaOnly_207fc381) {
  padding-left: 0.63rem;
}
.MessageToastItem-primaryCtaOnly_207fc381 {
  max-width: 100%;
}
.MessageToastItem-secondaryCta_b6cb0031 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  opacity: 0.6
}
[dir] .MessageToastItem-secondaryCta_b6cb0031 {
  -webkit-transition: opacity 125ms ease-in-out
}
[dir=ltr] .MessageToastItem-secondaryCta_b6cb0031 {
 padding-left: 0.63rem
}
[dir=rtl] .MessageToastItem-secondaryCta_b6cb0031 {
  padding-right: 0.63rem
}
.MessageToastItem-secondaryCta_b6cb0031:hover {
    opacity: 1;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.PostPurchaseToastItem-alert_5d0c30c5 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  color: var(--theme-ui-primary-text);
  width: 100%;
  height: 7.5rem;
  max-width: 20.94rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
[dir] .PostPurchaseToastItem-alert_5d0c30c5 {
  background: var(--theme-ui-secondary-bg)
}
@media (min-width: 768px) {
.PostPurchaseToastItem-alert_5d0c30c5 {
    max-width: 100%;
    width: 26.69rem;
    height: 8.63rem
}
  }
@media (min-width: 1280px) {
.PostPurchaseToastItem-alert_5d0c30c5 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4;

    width: 32.44rem;
    height: 10.56rem
}
  }
.PostPurchaseToastItem-alert_5d0c30c5.PostPurchaseToastItem-alert_5d0c30c5 { /* Override default toast padding */
  }
[dir] .PostPurchaseToastItem-alert_5d0c30c5.PostPurchaseToastItem-alert_5d0c30c5 {
    padding-bottom: 0;
  }
.PostPurchaseToastItem-image_5b799466 {
  width: calc(3 / 4 * 7.5rem);
  height: 100%
}
[dir] .PostPurchaseToastItem-image_5b799466 {
  background-color: #2b2b2b
}
@media (min-width: 768px) {
.PostPurchaseToastItem-image_5b799466 {
    width: calc(8.63rem * 3 / 4)
}
  }
@media (min-width: 1280px) {
.PostPurchaseToastItem-image_5b799466 {
    width: calc(10.56rem * 3 / 4)
}
  }
.PostPurchaseToastItem-image_5b799466 > div {
    height: 100%;
  }
.PostPurchaseToastItem-image_5b799466 .PostPurchaseToastItem-inner_55c45db3 {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    width: 100%;
  }
.PostPurchaseToastItem-content_984a70ea {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  position: relative
}
[dir] .PostPurchaseToastItem-content_984a70ea {
  padding: 0.94rem 1.25rem
}
@media (min-width: 768px) {
[dir] .PostPurchaseToastItem-content_984a70ea {
    padding: 1.25rem 1.25rem
}
  }
@media (min-width: 1280px) {
[dir] .PostPurchaseToastItem-content_984a70ea {
    padding: 1.56rem 1.56rem
}
  }
.PostPurchaseToastItem-title_24f94a8a,
.PostPurchaseToastItem-description_ae036113 {
  display: block;
}
.PostPurchaseToastItem-description_ae036113 {
  opacity: 0.6;
  line-height: 1
}
[dir] .PostPurchaseToastItem-description_ae036113 {
  margin-top: 0.13rem
}
@media (min-width: 768px) {
.PostPurchaseToastItem-description_ae036113 {
    line-height: 1.5
}
  }
.PostPurchaseToastItem-closeButton_689364ff {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  position: absolute; /* mystery numbers to account for click area */
  top: 0.81rem;
  color: var(--theme-ui-primary-text);
  opacity: 0.6;
  width: 1.25rem;
  height: 1.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
[dir] .PostPurchaseToastItem-closeButton_689364ff {
  -webkit-transition: opacity 125ms ease-in-out
}
[dir=ltr] .PostPurchaseToastItem-closeButton_689364ff {
 right: 0.5rem
}
[dir=rtl] .PostPurchaseToastItem-closeButton_689364ff {
  left: 0.5rem
}
@media (min-width: 768px) {
[dir=ltr] .PostPurchaseToastItem-closeButton_689364ff {
  right: 0.88rem
}
[dir=rtl] .PostPurchaseToastItem-closeButton_689364ff {
    left: 0.88rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .PostPurchaseToastItem-closeButton_689364ff {
  right: 1.13rem
}
[dir=rtl] .PostPurchaseToastItem-closeButton_689364ff {
    left: 1.13rem
}
  }
.PostPurchaseToastItem-closeButton_689364ff:hover {
    opacity: 1;
  }
.PostPurchaseToastItem-closeIcon_761edf45 {
  width: 0.56rem;
}
.PostPurchaseToastItem-ctas_59baab4b {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
[dir=ltr] .PostPurchaseToastItem-ctas_59baab4b {
 right: 0;
}
[dir=rtl] .PostPurchaseToastItem-ctas_59baab4b {
  left: 0;
}
.PostPurchaseToastItem-primaryCta_ead881a1,
.PostPurchaseToastItem-secondaryCta_8d471f67 {
  font-size: 0.56rem;
  letter-spacing: 0.09;
  text-transform: uppercase;
  font-weight: 500;

  color: var(--theme-ui-primary-text);
  min-width: 0;
  height: auto;
  position: relative;
  max-width: 10.94rem
}
[dir] .PostPurchaseToastItem-primaryCta_ead881a1, [dir] .PostPurchaseToastItem-secondaryCta_8d471f67 {
  padding: 0.94rem 1.25rem;
  background: none
}
@media (min-width: 768px) {
[dir] .PostPurchaseToastItem-primaryCta_ead881a1, [dir] .PostPurchaseToastItem-secondaryCta_8d471f67 {
    padding: 1.25rem
}
  }
@media (min-width: 1280px) {
.PostPurchaseToastItem-primaryCta_ead881a1,
.PostPurchaseToastItem-secondaryCta_8d471f67 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;
    font-size: 0.69rem;
    letter-spacing: 0.03rem
}
[dir] .PostPurchaseToastItem-primaryCta_ead881a1, [dir] .PostPurchaseToastItem-secondaryCta_8d471f67 {

    padding: 1.56rem
}
  }
.PostPurchaseToastItem-primaryCta_ead881a1 .PostPurchaseToastItem-ctaText_39a88f55, .PostPurchaseToastItem-secondaryCta_8d471f67 .PostPurchaseToastItem-ctaText_39a88f55 {
    max-width: 100%;
    white-space: normal;
  }
[dir=ltr] .PostPurchaseToastItem-primaryCta_ead881a1 {
 padding-right: 0.63rem;
}
[dir=rtl] .PostPurchaseToastItem-primaryCta_ead881a1 {
  padding-left: 0.63rem;
}
.PostPurchaseToastItem-secondaryCta_8d471f67 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  opacity: 0.6
}
[dir] .PostPurchaseToastItem-secondaryCta_8d471f67 {
  -webkit-transition: opacity 125ms ease-in-out
}
[dir=ltr] .PostPurchaseToastItem-secondaryCta_8d471f67 {
 padding-left: 0.63rem
}
[dir=rtl] .PostPurchaseToastItem-secondaryCta_8d471f67 {
  padding-right: 0.63rem
}
.PostPurchaseToastItem-secondaryCta_8d471f67:hover {
    opacity: 1;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Toast-wrapper_f89bca16 {
  position: fixed;
  bottom: 0;
  z-index: 100000
}
[dir=ltr] .Toast-wrapper_f89bca16 {
 left: 0;
 right: 0
}
[dir=rtl] .Toast-wrapper_f89bca16 {
  right: 0;
  left: 0
}
@media (min-width: 576px) {
.Toast-wrapper_f89bca16 {
    width: 100%
}
[dir=ltr] .Toast-wrapper_f89bca16 {
  left: 5%;
  right: 0.94rem
}
[dir=rtl] .Toast-wrapper_f89bca16 {
    right: 5%;
    left: 0.94rem
}
  }
@media (min-width: 768px) {
.Toast-wrapper_f89bca16 {
    width: 24.75rem
}
[dir=ltr] .Toast-wrapper_f89bca16 {
  left: auto
}
[dir=rtl] .Toast-wrapper_f89bca16 {
    right: auto
}
  }
.Toast-toast_97fad2e4 {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;

  position: absolute;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%)
}
[dir] .Toast-toast_97fad2e4 {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
          transform: translateY(100%)
}
@media (min-width: 576px) {
[dir] .Toast-toast_97fad2e4 {
    padding-bottom: 0.94rem
}
  }
.Toast-toastEnterDone_a71a235d {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;

  position: relative;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
  -webkit-transition-property: margin-top, -webkit-transform;
  -o-transition-property: margin-top, transform;
}
[dir] .Toast-toastEnterDone_a71a235d {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
          transform: translateY(0);
  transition-property: margin-top, -webkit-transform;
  transition-property: margin-top, transform;
  transition-property: margin-top, transform, -webkit-transform;
}
.Toast-toastExit_956fc492 {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;

  opacity: 0;
  position: relative;
  -webkit-transition-property: margin-top, opacity, -webkit-transform;
  -o-transition-property: margin-top, opacity, transform;
}
[dir] .Toast-toastExit_956fc492 {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
  transition-property: margin-top, opacity, -webkit-transform;
  transition-property: margin-top, opacity, transform;
  transition-property: margin-top, opacity, transform, -webkit-transform;
}
[dir=ltr] .Toast-toastExit_956fc492 {
 -webkit-transform: translateX(200%);
 -ms-transform: translateX(200%);
 transform: translateX(200%);
}
[dir=rtl] .Toast-toastExit_956fc492 {
  -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
          transform: translateX(-200%);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.WishlistHeader-controls_8d2d599f {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap
}
[dir] .WishlistHeader-controls_8d2d599f {
  margin: 0 0 0.5rem
}
@media (max-width: 1023px) {
[dir] .WishlistHeader-controls_8d2d599f {
    margin-bottom: 1rem;
    margin-bottom: 0.94rem
}
  }
.WishlistHeader-sortWrapper_9d9381ee {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.WishlistHeader-sortTitle_cd735b4c {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  opacity: 0.6;
  display: block;
}
[dir] .WishlistHeader-sortTitle_cd735b4c {
  padding: 0.31rem 0;
  margin-bottom: 0.31rem;
}
.WishlistHeader-dropDownWrapper_a7e00d48 {
  width: 10rem;
}
.WishlistHeader-searchWrapper_81391534 {
  width: 12.75rem
}
[dir=ltr] .WishlistHeader-searchWrapper_81391534 {
 margin-left: 0.94rem
}
[dir=rtl] .WishlistHeader-searchWrapper_81391534 {
  margin-right: 0.94rem
}
@media (min-width: 1280px) {
.WishlistHeader-searchWrapper_81391534 {
    width: 13.75rem
}
[dir=ltr] .WishlistHeader-searchWrapper_81391534 {
  margin-left: 1.25rem
}
[dir=rtl] .WishlistHeader-searchWrapper_81391534 {
    margin-right: 1.25rem
}
  }
@media (max-width: 1023px) {
.WishlistHeader-searchWrapper_81391534 {
    width: 100%
}
[dir] .WishlistHeader-searchWrapper_81391534 {
    margin-top: 0.94rem
}
[dir=ltr] .WishlistHeader-searchWrapper_81391534 {
  margin-left: 0
}
[dir=rtl] .WishlistHeader-searchWrapper_81391534 {
    margin-right: 0
}
  }
.WishlistHeader-totalWrapper_5608cd10 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5
}
[dir=ltr] .WishlistHeader-totalWrapper_5608cd10 {
 text-align: right
}
[dir=rtl] .WishlistHeader-totalWrapper_5608cd10 {

  text-align: left
}
@media (max-width: 575px) {
.WishlistHeader-totalWrapper_5608cd10 {
    display: none
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Price-original_a6834d25,
.Price-discount_01260a89 {
  font-size: 1rem;
  line-height: normal
}
[dir=ltr] .Price-original_a6834d25.Price-main_18ea0f84, [dir=ltr] .Price-discount_01260a89.Price-main_18ea0f84 {
 margin-left: 0.5rem;
 margin-right: 0;
  }
[dir=rtl] .Price-original_a6834d25.Price-main_18ea0f84, [dir=rtl] .Price-discount_01260a89.Price-main_18ea0f84 {
    margin-right: 0.5rem;
    margin-left: 0;
  }
[dir=ltr] .Price-original_a6834d25:not(.Price-main_18ea0f84), [dir=ltr] .Price-discount_01260a89:not(.Price-main_18ea0f84) {
 margin-right: 0.5rem;
 margin-left: 0
  }
[dir=rtl] .Price-original_a6834d25:not(.Price-main_18ea0f84), [dir=rtl] .Price-discount_01260a89:not(.Price-main_18ea0f84) {
    margin-left: 0.5rem;
    margin-right: 0
  }
[dir=ltr] .Price-original_a6834d25:not(.Price-main_18ea0f84):last-child, [dir=ltr] .Price-discount_01260a89:not(.Price-main_18ea0f84):last-child {
 margin-right: 0;
    }
[dir=rtl] .Price-original_a6834d25:not(.Price-main_18ea0f84):last-child, [dir=rtl] .Price-discount_01260a89:not(.Price-main_18ea0f84):last-child {
      margin-left: 0;
    }
.Price-discount_01260a89 {
  opacity: 0.5;
}
.Price-hiddenScreenReader_4fda01f8 {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}
.Price-strikethrough_d2fe72bf {
  text-decoration: line-through;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.PurchaseTag-tag_452447bf {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500
}
[dir] .PurchaseTag-tag_452447bf {

  padding: 0.19rem 0.38rem;
  background-color: #5a9516;
  text-align: center
}
[dir=ltr] .PurchaseTag-tag_452447bf {
 margin-right: 0.5rem
}
[dir=rtl] .PurchaseTag-tag_452447bf {
  margin-left: 0.5rem
}
[dir=ltr] .PurchaseTag-tag_452447bf.PurchaseTag-main_5bc81ce5 {
 margin-right: 0;
  }
[dir=rtl] .PurchaseTag-tag_452447bf.PurchaseTag-main_5bc81ce5 {
    margin-left: 0;
  }
.PurchaseTag-hiddenScreenReader_32b5648b {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}
.PurchaseTag-shouldUseTheme_d071782d {
  color: var(--theme-custom-color-accent-text);
}
[dir] .PurchaseTag-shouldUseTheme_d071782d {
  background-color: var(--theme-custom-color-accent);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.PurchasePrice-price_ca0dc1d8 {
  color: var(--theme-custom-color-primary-text);

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
[dir=ltr] .PurchasePrice-price_ca0dc1d8 s {
 margin-left: 0.63rem;
  }
[dir=rtl] .PurchasePrice-price_ca0dc1d8 s {
    margin-right: 0.63rem;
  }
.PurchasePrice-priceContainer_f0baeac9 {
  display: inline-block;
}
[dir=ltr] .PurchasePrice-priceContainer_f0baeac9 {
 text-align: right;
}
[dir=rtl] .PurchasePrice-priceContainer_f0baeac9 {
  text-align: left;
}
.PurchasePrice-priceContainer_f0baeac9 s {
    display: inline-block;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.PurchaseButton-wishBtnContainer_bce52aa3 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.PurchaseButton-icon_367d7e8f {
  width: 1rem;
}
.PurchaseButton-icon_367d7e8f svg {
    width: 100%;
  }
.PurchaseButton-icon_367d7e8f svg path {
      stroke: var(--theme-custom-color-accent-text);
    }
.PurchaseButton-icon_367d7e8f.PurchaseButton-filledHeart_3385ec87 path, .PurchaseButton-icon_367d7e8f.PurchaseButton-loading_edfaa7ba path {
      fill: var(--theme-custom-color-accent-text);
    }
.PurchaseButton-tooltip_006dfab3 {
  bottom: 1.75rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.PurchaseButton-tooltip_006dfab3 {
    bottom: 1.25rem
}
  }
[dir] .PurchaseButton-tooltip_006dfab3::after {
    border: none;
  }
.PurchaseButton-wrapper_08b35b7d {
  width: 100%;
  position: relative
}
@media (min-width: 768px) {
.PurchaseButton-wrapper_08b35b7d {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
  }
.PurchaseButton-main_3ea443e2 {
  font-size: 1.13rem;
  letter-spacing: 0;
  line-height: 1.4;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
@media (min-width: 768px) {
.PurchaseButton-main_3ea443e2 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;

    -webkit-flex-direction: column;

        -ms-flex-direction: column;

            flex-direction: column;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end
}
[dir] .PurchaseButton-main_3ea443e2 {
    margin-bottom: 0.75rem
}
[dir=ltr] .PurchaseButton-main_3ea443e2 {
  margin-right: 0
}
[dir=rtl] .PurchaseButton-main_3ea443e2 {
    margin-left: 0
}
  }
@media (min-width: 1024px) {
[dir] .PurchaseButton-main_3ea443e2 {
    margin-bottom: 0
}
  }
@media (min-width: 1280px) {
.PurchaseButton-main_3ea443e2 {
    font-size: 1.13rem;
    letter-spacing: 0;
    line-height: 1.4
}
  }
@media (min-width: 1600px) {
.PurchaseButton-main_3ea443e2 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
.PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1
  }
@media (min-width: 768px) {

  [dir] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb {
      margin-bottom: 0.94rem
  }

  [dir=ltr] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb {
  margin-right: 0
  }

  [dir=rtl] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb {
      margin-left: 0
  }
    }
[dir=ltr] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb .PurchaseButton-price_5e26488c {
 margin-right: 0;
    }
[dir=rtl] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceWrapper_c0fc45cb .PurchaseButton-price_5e26488c {
      margin-left: 0;
    }
.PurchaseButton-main_3ea443e2 .PurchaseButton-button_d3bea90e {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    width: 100%
  }
@media (min-width: 1024px) {

  .PurchaseButton-main_3ea443e2 .PurchaseButton-button_d3bea90e {
      min-width: 10rem;
      max-width: 10rem
  }
    }
@media (min-width: 1440px) {

  .PurchaseButton-main_3ea443e2 .PurchaseButton-button_d3bea90e {
      max-width: 14.38rem
  }
    }
/* priceCaption should appear after the buy button in main */
.PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4
  }
[dir] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
    margin-top: 0.5rem;
    text-align: center
  }
@media (min-width: 768px) {
  .PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
      width: 100%
  }
    }
@media (min-width: 1024px) {
  [dir=ltr] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
  text-align: right
  }
  [dir=rtl] .PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
      text-align: left
  }
    }
@media (min-width: 1440px) {
  .PurchaseButton-main_3ea443e2 .PurchaseButton-priceCaption_ec7252af {
      max-width: 14.38rem
  }
    }
.PurchaseButton-main_3ea443e2 .PurchaseButton-ctaButtonContainer_c531d577 {
    width: 100%;
  }
.PurchaseButton-button_d3bea90e {
  -o-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  transition: color 125ms ease-in-out, background-color 125ms ease-in-out;

  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .PurchaseButton-button_d3bea90e {
  -webkit-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
}
.PurchaseButton-button_d3bea90e span {
    width: 12em;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
  }
[dir] .PurchaseButton-button_d3bea90e span {
    margin: auto;
  }
@media (min-width: 768px) {
.PurchaseButton-button_d3bea90e {
    min-width: 10rem;
    width: auto
}
  }
.PurchaseButton-hiddenScreenReader_d2a69f37 {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}
[dir] .PurchaseButton-priceWrapper_c0fc45cb {
  margin-bottom: 0.94rem;
  text-align: center
}
@media (min-width: 768px) {
[dir] .PurchaseButton-priceWrapper_c0fc45cb {
    margin-bottom: 0
}
[dir=ltr] .PurchaseButton-priceWrapper_c0fc45cb {
  margin-right: 0.94rem
}
[dir=rtl] .PurchaseButton-priceWrapper_c0fc45cb {
    margin-left: 0.94rem
}
  }
@media (min-width: 1024px) {
[dir=ltr] .PurchaseButton-priceWrapper_c0fc45cb {
  text-align: right
}
[dir=rtl] .PurchaseButton-priceWrapper_c0fc45cb {
    text-align: left
}
  }
.PurchaseButton-price_5e26488c {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
@media (min-width: 768px) {
.PurchaseButton-price_5e26488c {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end
}
  }
.PurchaseButton-priceCaption_ec7252af {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;
}
@media (max-width: 767px) {

  [dir] .PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-priceCaption_ec7252af {
      margin-top: 0.5rem
  }
    }
.PurchaseButton-ctaButtonContainer_c531d577 {
  -webkit-order: 3;
      -ms-flex-order: 3;
          order: 3;
}
.PurchaseButton-ctaButtons_3bc5dcc4 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
[dir=ltr] .PurchaseButton-wishButton_8261283c {
 margin-left: 1Px;
}
[dir=rtl] .PurchaseButton-wishButton_8261283c {
  margin-right: 1Px;
}
.PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-wishButton_8261283c {
    min-width: auto;
    /* using padding here to force square button rather then rectangle used in PDP description */
  }
[dir] .PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-wishButton_8261283c {
    padding: 0 1rem;
  }
@media (min-width: 1024px) {

  [dir] .PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-wishButton_8261283c {
    padding: 0 0.75rem;
  }
  }
@media (min-width: 1280px) {

  [dir] .PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-wishButton_8261283c {
    padding: 0 1.06rem;
  }
  }
@media (min-width: 1440px) {

  [dir] .PurchaseButton-wrapper_08b35b7d:not(.PurchaseButton-main_3ea443e2) .PurchaseButton-wishButton_8261283c {
    padding: 0 1.06rem;
  }
  }

[dir=ltr] .OfferTag-offerTag_2eb8aaf2 {
  margin-left: 0.5rem;
}[dir=rtl] .OfferTag-offerTag_2eb8aaf2 {
  margin-right: 0.5rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@media (max-width: 767px) {
.WishlistItem-wishlistItem_06634182 {
    /* to override height from LibraryItemLayout */
    height: auto !important
}

    .WishlistItem-wishlistItem_06634182 > div {
      height: auto;
      -webkit-align-items: stretch;
          -ms-flex-align: stretch;
              align-items: stretch
    }
        .WishlistItem-wishlistItem_06634182 > div > button:first-child {
          height: auto;
        }
        [dir] .WishlistItem-wishlistItem_06634182 > div > button:first-child {
          padding: 0.63rem 0;
        }

        .WishlistItem-wishlistItem_06634182 > div > button > span > div {
          position: relative;
        }
  }
@media (max-width: 575px) {
    [dir=ltr] .WishlistItem-wishlistItem_06634182 > div {
  padding-left: 0;
    }
    [dir=rtl] .WishlistItem-wishlistItem_06634182 > div {
      padding-right: 0;
    }
  }
[dir] .WishlistItem-inactive_2040125e button {
    cursor: default;
  }
.WishlistItem-gameBox_f6150bcc {
  width: calc((16 / 9) * 3.44rem);
  height: 3.44rem;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.WishlistItem-gridLayout_b43c1324 .WishlistItem-gameBox_f6150bcc {
    width: auto;
    height: auto;
  }
.WishlistItem-gameBox_f6150bcc::after {
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    position: absolute;
    top: 0;
    bottom: 0;

    content: '';
    opacity: 0;
  }
[dir] .WishlistItem-gameBox_f6150bcc::after {
    -webkit-transition: opacity 200ms ease;
    background-color: #fff;
  }
[dir=ltr] .WishlistItem-gameBox_f6150bcc::after {
 left: 0;
 right: 0;
  }
[dir=rtl] .WishlistItem-gameBox_f6150bcc::after {
    right: 0;
    left: 0;
  }
.WishlistItem-hasHover_4c2275ba:hover .WishlistItem-gameBox_f6150bcc::after,
    .WishlistItem-active_bf87c81b .WishlistItem-gameBox_f6150bcc::after {
      opacity: 0.15;
    }
@media (max-width: 575px) {
.WishlistItem-gameBox_f6150bcc {
    display: none
}
  }
.WishlistItem-gameBox_f6150bcc {

  /* IE override */
}
.WishlistItem-gameBox_f6150bcc > div:nth-child(2) span {
    height: 3.44rem !important;
  }
[dir] .WishlistItem-gameBox_f6150bcc > div:nth-child(2) span {
    background-size: contain !important;
    background-repeat: no-repeat;
  }
.WishlistItem-itemContainer_205357ea,
.WishlistItem-infoContainer_21874638 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  height: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.WishlistItem-itemContainer_205357ea {
  -webkit-flex: 1 1 0%;
      -ms-flex: 1 1 0%;
          flex: 1 1;
  color: inherit
}
@media (max-width: 767px) {
.WishlistItem-itemContainer_205357ea {
    overflow: hidden
}
  }
.WishlistItem-infoContainer_21874638 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
[dir=ltr] .WishlistItem-infoContainer_21874638 {
 margin-right: 1rem;
}
[dir=rtl] .WishlistItem-infoContainer_21874638 {
  margin-left: 1rem;
}
.WishlistItem-priceContainer_1211e27c {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end
}
@media (max-width: 767px) {
.WishlistItem-priceContainer_1211e27c {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start
}
[dir=ltr] .WishlistItem-priceContainer_1211e27c {
  margin-left: 1.31rem
}
[dir=rtl] .WishlistItem-priceContainer_1211e27c {
    margin-right: 1.31rem
}
  }
.WishlistItem-title_70200d2d {
  text-transform: none;
  white-space: normal
}
[dir=ltr] .WishlistItem-title_70200d2d {
 margin-left: 1.31rem;
 text-align: left
}
[dir=rtl] .WishlistItem-title_70200d2d {
  margin-right: 1.31rem;
  text-align: right
}
@media (max-width: 767px) {
[dir] .WishlistItem-title_70200d2d {
    margin-bottom: 0.38rem
}
  }
.WishlistItem-removeButton_535af459 {
  -o-transition: background-color 125ms ease-in-out;
  transition: background-color 125ms ease-in-out;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  width: 4.38rem;
  height: 100%
}
[dir] .WishlistItem-removeButton_535af459 {
  -webkit-transition: background-color 125ms ease-in-out;
  background-color: transparent
}
[dir] .WishlistItem-removeButton_535af459:hover {
    background-color: #006cdb;
  }
@media (max-width: 767px) {
.WishlistItem-removeButton_535af459 {
    height: auto
}
  }
.WishlistItem-undoItem_86f9f826 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
[dir] .WishlistItem-undoItem_86f9f826 > div {
    background-color: transparent;
  }
@media (max-width: 767px) {
.WishlistItem-undoItem_86f9f826 {
    min-height: 4.38rem
}
  }
.WishlistItem-undoTitle_d632dc3c {
  white-space: normal;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
[dir=ltr] .WishlistItem-undoTitle_d632dc3c {
 text-align: left;
}
[dir=rtl] .WishlistItem-undoTitle_d632dc3c {
  text-align: right;
}
.WishlistItem-undoButton_7b9e92c3 {
  white-space: normal;
  word-break: break-all;
}
[dir] .WishlistItem-undoButton_7b9e92c3 {
  padding: 0 0.13rem;
}
.WishlistItem-icon_77deda26 {
  width: 0.75rem;
  height: 0.63rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir=ltr] .WishlistItem-icon_77deda26 {
 margin: 0.13rem 0.25rem 0 0;
}
[dir=rtl] .WishlistItem-icon_77deda26 {
  margin: 0.13rem 0 0 0.25rem;
}
.WishlistItem-icon_77deda26 svg {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ButtonPopup-messagePopup_71d44ff6 {
  font-size: 0.75rem;
  line-height: normal;
  display: inline-block;
}
[dir] .ButtonPopup-messagePopup_71d44ff6 {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 0.63rem;
}
.ButtonPopup-error_d73bd4e4 {
  color: #e63c3c;
}
.ButtonPopup-success_c36beced {
  color: #f4f4f4;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.WishButtonPopup-WishButtonPopup_bb74f4ab {
  position: absolute;
  bottom: 3.75rem;
  width: 100%
}
[dir=ltr] .WishButtonPopup-WishButtonPopup_bb74f4ab {
 right: 0;
 text-align: right
}
[dir=rtl] .WishButtonPopup-WishButtonPopup_bb74f4ab {
  left: 0;
  text-align: left
}
@media (min-width: 1024px) and (max-width: 1279px) {
.WishButtonPopup-WishButtonPopup_bb74f4ab {
    bottom: 3.13rem
}
  }
.WishButtonPopup-hasEndDate_67ffcde3 {
  bottom: 5rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.WishButtonPopup-hasEndDate_67ffcde3 {
    bottom: 4.38rem
}
  }
.WishButtonPopup-popupLink_92595119 {
  text-decoration: underline;
  color: #f4f4f4
}
[dir] .WishButtonPopup-popupLink_92595119 {
  cursor: pointer
}
[dir=ltr] .WishButtonPopup-popupLink_92595119 {
 padding-left: 0.13rem
}
[dir=rtl] .WishButtonPopup-popupLink_92595119 {
  padding-right: 0.13rem
}
.WishButtonPopup-popupLink_92595119:focus {
    outline: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.WishButton-wishBtnContainer_c7473b59 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.WishButton-icon_3fa44d21 {
  width: 1rem;
}
.WishButton-icon_3fa44d21 svg {
    width: 100%;
  }
.WishButton-icon_3fa44d21 svg path {
      stroke: var(--theme-custom-color-accent-text);
    }
.WishButton-icon_3fa44d21.WishButton-filledHeart_b54ce21a path, .WishButton-icon_3fa44d21.WishButton-loading_189a8e93 path {
      fill: var(--theme-custom-color-accent-text);
    }
.WishButton-tooltip_c92796c8 {
  bottom: 1.75rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.WishButton-tooltip_c92796c8 {
    bottom: 1.25rem
}
  }
[dir] .WishButton-tooltip_c92796c8::after {
    border: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
:root {

  /* Add page spacing on scrollable grid for first and last item */
}
.CardGrid-root_8c6321b2 {
  overflow: hidden;
  height: 100%;
}
.CardGrid-groupWrapper_e669488f {
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.CardGrid-groupWrapper_e669488f::-webkit-scrollbar {
    display: none;
  }
.CardGrid-groupWrapper_e669488f {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  overflow-x: visible;
  overflow-y: hidden;
  height: 100%;
  width: 100%;
}
.CardGrid-group_c5363b6a {
  -webkit-flex-basis: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%
}
@media (max-width: 767px) {
.CardGrid-group_c5363b6a {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap
}
  }
.CardGrid-groupMultipleRows_935c840d {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: calc(300% * (21 / 25))
}
[dir] .CardGrid-groupMultipleRows_935c840d {
  margin-top: calc(1rem / -2)
}
@media (min-width: 768px) {
.CardGrid-groupMultipleRows_935c840d {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: calc(100% + 1rem)
}
  }
.CardGrid-cardWrapperMobile_14ce9355 {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}
.CardGrid-cardWrapperDesktop_2fb062b6 {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%
}
[dir=ltr] .CardGrid-cardWrapperDesktop_2fb062b6 {
  margin-left: 1rem
}
[dir=rtl] .CardGrid-cardWrapperDesktop_2fb062b6 {
  margin-right: 1rem
}
[dir=ltr] .CardGrid-cardWrapperDesktop_2fb062b6:first-child {
  margin-left: 0;
  }
[dir=rtl] .CardGrid-cardWrapperDesktop_2fb062b6:first-child {
    margin-right: 0;
  }
@media (max-width: 767px) {
.CardGrid-cardWrapperDesktop_2fb062b6 {
    -webkit-flex-basis: calc(50% - 1rem);
        -ms-flex-preferred-size: calc(50% - 1rem);
            flex-basis: calc(50% - 1rem)
}

    [dir=ltr] .CardGrid-cardWrapperDesktop_2fb062b6:nth-child(even) {
    margin-left: 1rem;
    }

    [dir=rtl] .CardGrid-cardWrapperDesktop_2fb062b6:nth-child(even) {
      margin-right: 1rem;
    }

    [dir=ltr] .CardGrid-cardWrapperDesktop_2fb062b6:nth-child(odd) {
    margin-left: 0;
    }

    [dir=rtl] .CardGrid-cardWrapperDesktop_2fb062b6:nth-child(odd) {
      margin-right: 0;
    }
  }
@media (max-width: 1023px) {
    .CardGrid-cardWrapperDesktop_2fb062b6:last-child:nth-child(5) {
      display: none;
    }
  }
.CardGrid-card_57b1694f {
  height: 100%;
}
[dir] .CardGrid-card_57b1694f {
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
.CardGrid-cardLandscape_f0ebb161 {
    -webkit-flex-basis: calc((100vw / 25 * 21) + 1rem);
        -ms-flex-preferred-size: calc((100vw / 25 * 21) + 1rem);
            flex-basis: calc((100vw / 25 * 21) + 1rem);
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    min-width: calc((100vw / 25 * 21) + 1rem);
    width: calc((100vw / 25 * 21) + 1rem)
}
  }
.CardGrid-cardMultipleRows_f665931e {
  -webkit-flex-basis: calc(100% / 3);
      -ms-flex-preferred-size: calc(100% / 3);
          flex-basis: calc(100% / 3);
  width: calc(100% / 3);
}
[dir] .CardGrid-cardMultipleRows_f665931e {
  margin-bottom: calc(1rem / 2);
  margin-top: calc(1rem / 2);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.GenreCard-root_bb874baa {
  position: relative;
  width: 100%;
  overflow: hidden
}
.GenreCard-root_bb874baa::after {
    display: block;
    content: '';
  }
[dir] .GenreCard-root_bb874baa::after {
    padding-bottom: calc(100% * 162 / 175);
  }
.GenreCard-svg_42c141f7 {
  color: #f4f4f4;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
}
[dir=ltr] .GenreCard-svg_42c141f7 {
 left: 0;
}
[dir=rtl] .GenreCard-svg_42c141f7 {
  right: 0;
}
.GenreCard-link_f51dabf6 {
  position: relative
}
.GenreCard-link_f51dabf6::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .GenreCard-link_f51dabf6::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .GenreCard-link_f51dabf6::after {
 left: 0;
  }
[dir=rtl] .GenreCard-link_f51dabf6::after {
    right: 0;
  }
.GenreCard-link_f51dabf6:hover::after {
    opacity: 0.1;
  }
.GenreCard-link_f51dabf6 {

  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%
}
[dir=ltr] .GenreCard-link_f51dabf6 {
 left: 0
}
[dir=rtl] .GenreCard-link_f51dabf6 {
  right: 0
}
.GenreCard-link_f51dabf6:hover::after,
  .GenreCard-link_f51dabf6:focus::after {
    opacity: 0.15;
  }
.GenreCard-text_1e92bff4 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  color: #f4f4f4;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
:root {
  /* TODO: Replace with new grid variables when they're merged. */
}
[dir] .BrowseGrid-groupWrapper_927ab7f8 {
  padding-bottom: 0.94rem
}
[dir] .BrowseGrid-groupWrapper_927ab7f8.BrowseGrid-placeholder_c9a79bbd .BrowseGrid-placeholderAsset_df283bc6::after, [dir] .BrowseGrid-groupWrapper_927ab7f8.BrowseGrid-placeholder_c9a79bbd .BrowseGrid-placeholderContent_f0e4b56f {
    background-color: var(--theme-custom-color-primary);
  }
.BrowseGrid-groupWrapper_927ab7f8.BrowseGrid-placeholder_c9a79bbd .BrowseGrid-placeholderAsset_df283bc6::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .BrowseGrid-groupWrapper_927ab7f8.BrowseGrid-placeholder_c9a79bbd .BrowseGrid-placeholderAsset_df283bc6::after {
    border-radius: 50%;
  }
.BrowseGrid-cardsContainer_4f87230c {
  list-style-type: none;

  -webkit-align-content: stretch;

      -ms-flex-line-pack: stretch;

          align-content: stretch;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
}
[dir] .BrowseGrid-cardsContainer_4f87230c {
  margin: 0;
  padding: 0;
}
.BrowseGrid-card_9f6a50fb {
  -o-transition: background-color 125ms ease-in-out;
  transition: background-color 125ms ease-in-out;
  list-style-type: none;
  overflow: hidden
}
[dir] .BrowseGrid-card_9f6a50fb {
  -webkit-transition: background-color 125ms ease-in-out;
  margin: 0;
  padding: 0;

  background-color: transparent;
  margin-bottom: 1rem
}
[dir=ltr] .BrowseGrid-card_9f6a50fb {
  margin-left: 1rem
}
[dir=rtl] .BrowseGrid-card_9f6a50fb {
  margin-right: 1rem
}
@media (max-width: 767px) {
.BrowseGrid-card_9f6a50fb {
    /* 100% total width * (1 / total_elements) - gutter_absolute_space * (1 - 1/elements_per_row) */
    -webkit-flex-basis: calc(50% - calc(1rem / 2) * 0.5);
        -ms-flex-preferred-size: calc(50% - calc(1rem / 2) * 0.5);
            flex-basis: calc(50% - calc(1rem / 2) * 0.5)
}
[dir=ltr] .BrowseGrid-card_9f6a50fb {
    margin-left: calc(1rem / 2)
}
[dir=rtl] .BrowseGrid-card_9f6a50fb {
    margin-right: calc(1rem / 2)
}

    [dir=ltr] .BrowseGrid-card_9f6a50fb:nth-child(odd) {
    margin-left: 0;
    }

    [dir=rtl] .BrowseGrid-card_9f6a50fb:nth-child(odd) {
      margin-right: 0;
    }
  }
@media (min-width: 768px) and (max-width: 1919px) {
.BrowseGrid-card_9f6a50fb {
    -webkit-flex-basis: calc(25% - 1rem * 0.75);
        -ms-flex-preferred-size: calc(25% - 1rem * 0.75);
            flex-basis: calc(25% - 1rem * 0.75)
}
[dir] .BrowseGrid-card_9f6a50fb {
    margin-bottom: 1rem
}
[dir=ltr] .BrowseGrid-card_9f6a50fb {
    margin-left: 1rem
}
[dir=rtl] .BrowseGrid-card_9f6a50fb {
    margin-right: 1rem
}

    [dir=ltr] .BrowseGrid-card_9f6a50fb:nth-child(4n + 1) {
    margin-left: 0;
    }

    [dir=rtl] .BrowseGrid-card_9f6a50fb:nth-child(4n + 1) {
      margin-right: 0;
    }
  }
@media (min-width: 1024px) {
[dir] .BrowseGrid-card_9f6a50fb {
    margin-bottom: 3rem
}
  }
@media (min-width: 1280px) {
[dir] .BrowseGrid-card_9f6a50fb {
    margin-bottom: 3.44rem
}
  }
@media (min-width: 1920px) {
.BrowseGrid-card_9f6a50fb {
    -webkit-flex-basis: calc(20% - 1rem * 0.8);
        -ms-flex-preferred-size: calc(20% - 1rem * 0.8);
            flex-basis: calc(20% - 1rem * 0.8)
}

    [dir=ltr] .BrowseGrid-card_9f6a50fb:nth-child(5n + 1) {
    margin-left: 0;
    }

    [dir=rtl] .BrowseGrid-card_9f6a50fb:nth-child(5n + 1) {
      margin-right: 0;
    }
  }
.BrowseGrid-placeholderCardImage_a97ede1e {
  position: relative;
}
[dir] .BrowseGrid-placeholderCardImage_a97ede1e {
  padding-bottom: calc(4 / 3 * 100%);

  padding-top: 0.06rem;
  margin-bottom: 1.19rem;
}
.BrowseGrid-placeholderCardImage_a97ede1e .BrowseGrid-inner_01fa17c3 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
[dir] .BrowseGrid-placeholderCardImage_a97ede1e {
    margin-bottom: 1rem
}
  }
.BrowseGrid-placeholderCopy_2e6789f6 {
  display: block;
  height: 0.94rem
}
[dir] .BrowseGrid-placeholderCopy_2e6789f6 {
  margin-bottom: 0.25rem
}
[dir] .BrowseGrid-placeholderCopy_2e6789f6:not(:nth-child(2n)) {
    margin-bottom: 0.94rem;
  }
.BrowseGrid-placeholderCopySmall_6f749df4 {
  display: block;
  height: 0.94rem;
}
[dir] .BrowseGrid-placeholderCopySmall_6f749df4 {
  margin-top: 0.94rem;
}
[dir=ltr] .BrowseGrid-placeholderCopySmall_6f749df4 {
  margin-right: 65%;
}
[dir=rtl] .BrowseGrid-placeholderCopySmall_6f749df4 {
  margin-left: 65%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SearchResults-pageWrapper_06c2c44e {
}
@media (max-width: 1023px) {
[dir] .SearchResults-pageWrapper_06c2c44e {
    margin-top: 6.25rem
}
  }
@media (min-width: 1600px) {
.SearchResults-pageWrapper_06c2c44e:not(.SearchResults-isEmpty_c721bb68).SearchResults-isLauncher_1d8ad880 {
        min-height: calc(100vh - 13.44rem - 3.19rem)
    }
      }
.SearchResults-pageWrapper_06c2c44e:not(.SearchResults-isEmpty_c721bb68) {

    /* Maintain footer position at bottom on 4k screens */
  }
@media (min-width: 1600px) {
.SearchResults-pageWrapper_06c2c44e:not(.SearchResults-isEmpty_c721bb68):not(.SearchResults-isLauncher_1d8ad880) {
        min-height: calc(100vh - 3.25rem - 28.13rem - 3.19rem)
    }
      }
.SearchResults-emptyWrapper_512b5cde {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 31.88rem
}
[dir] .SearchResults-emptyWrapper_512b5cde {
  margin: 0 calc(-1 * 1.25rem);
  text-align: center
}
@media (max-width: 767px) {
[dir] .SearchResults-emptyWrapper_512b5cde {
    padding: 0 1.25rem
}
  }
@media (min-width: 768px) {
.SearchResults-emptyWrapper_512b5cde {
    height: 46.88rem
}
[dir] .SearchResults-emptyWrapper_512b5cde {
    margin: 0
}
  }
@media (min-width: 1024px) {
.SearchResults-emptyWrapper_512b5cde {
    height: calc(100vh - 6.25rem - 1.25rem)
}
  }
@media (min-width: 1600px) {

  .SearchResults-pageWrapper_06c2c44e.SearchResults-isLauncher_1d8ad880 .SearchResults-emptyWrapper_512b5cde {
      height: calc(100vh - 6.25rem - 3.25rem - 13.44rem - 3.19rem)
  }
    }
@media (min-width: 1600px) {

  .SearchResults-pageWrapper_06c2c44e:not(.SearchResults-isLauncher_1d8ad880) .SearchResults-emptyWrapper_512b5cde {
      height: calc(100vh - 6.25rem - 3.25rem - 28.13rem - 3.19rem)
  }
    }
.SearchResults-emptyIcon_1ac40315 {
  width: 3.75rem;
}
[dir] .SearchResults-emptyIcon_1ac40315 {
  margin: 0 auto;
}
.SearchResults-emptyTitle_afcb0084 {
  font-size: 1.88rem;
  line-height: 2.25rem
}
[dir] .SearchResults-emptyTitle_afcb0084 {
  margin-top: 1.25rem
}
@media (min-width: 1280px) {
.SearchResults-emptyTitle_afcb0084 {
    font-size: 3.13rem;
    line-height: 3.13rem
}
  }
.SearchResults-emptyDescription_ff1af796 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  line-height: 1.56rem;
  letter-spacing: 0.01rem;
  width: 100%;
}
[dir] .SearchResults-emptyDescription_ff1af796 {
  margin-top: 0.5rem;
  margin-bottom: 3.75rem;
}
.SearchResults-hiddenScreenReader_e446eb02 {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}
@media (min-width: 1024px) {
.SearchResults-searchBarWrapper_03bf0faf {
    display: none
}
  }
.SearchResults-searchBarWrapper_03bf0faf {

  position: absolute;
  width: 100%;
  top: 3.25rem;
  z-index: 11;
}
[dir=ltr] .SearchResults-searchBarWrapper_03bf0faf {
 left: 0;
}
[dir=rtl] .SearchResults-searchBarWrapper_03bf0faf {
  right: 0;
}
.isLauncher .SearchResults-searchBarWrapper_03bf0faf {
    top: 0;
  }
@media (max-width: 1023px) {
.SearchResults-topNavDesktopWrapper_34160bdf {
    display: none;
}
  }
[dir] .SearchResults-topNavDesktopWrapper_34160bdf {

  padding-top: 1.88rem;
  padding-bottom: 1.88rem;
}
@media (min-width: 1024px) {
.SearchResults-backButton_e18e8125 {
    display: none;
}
  }
@media (max-width: 1023px) {
[dir] .SearchResults-marginTopForTopNav_7cc19a2e {
    margin-top: calc(3.25rem + 5rem);
}

    [dir] .isLauncher .SearchResults-marginTopForTopNav_7cc19a2e {
      margin-top: 5rem;
    }
  }
@media (min-width: 1024px) {
[dir] .SearchResults-marginTopForTopNav_7cc19a2e {
    margin-top: 3.25rem;
}

    [dir] .isLauncher .SearchResults-marginTopForTopNav_7cc19a2e {
      margin-top: 0;
    }
  }

.OfferCardImageArt-picture_2bc1f4cf {
  height: 100%;
  width: auto;
  position: absolute;
}

.OfferCardImageLogo-container_2b04e712 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
}[dir] .OfferCardImageLogo-container_2b04e712 {
  padding-bottom: 0.63rem;
}[dir=ltr] .OfferCardImageLogo-container_2b04e712 {
  left: 0;
}[dir=rtl] .OfferCardImageLogo-container_2b04e712 {
  right: 0;
}

.OfferCardImageMissing-container_5247f1a0 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
}[dir] .OfferCardImageMissing-container_5247f1a0 {
  padding-bottom: 0.63rem;
}[dir=ltr] .OfferCardImageMissing-container_5247f1a0 {
  left: 0;
}[dir=rtl] .OfferCardImageMissing-container_5247f1a0 {
  right: 0;
}

.OfferCardImageMissing-icon_f171ac60 {
  fill: var(--color-gray-dark-tint-20);
  width: 1.25rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.OfferTitleInfo-title_abc02a91 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--theme-ui-primary-text);
  display: block;
}
.OfferTitleInfo-subtitle_ad134671 {
  display: block;
  font-weight: 400;
  color: var(--theme-ui-primary-text);
  opacity: 0.5
}
[dir] .OfferTitleInfo-subtitle_ad134671 + * {
    margin-top: 0.94rem;
  }

.OfferCardPurchasePrice-fallback_f42474ce {
  color: var(--theme-custom-color-primary-text);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Browse-contentWrapper_5ddc16f6 {
  height: 100%;
}
.Browse-contentWrapper_5ddc16f6 > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    max-width: none !important;  /* overwrite sectionwrapper max-width */
    width: 100%;
  }
[dir] .Browse-content_09c947d6 {
  border: solid 1Px transparent
}
.Browse-content_09c947d6:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Browse-content_09c947d6:focus {
    border-color: #fff;
  }
.Browse-content_09c947d6 {

  width: 100%
}
[dir] .Browse-content_09c947d6 {
  padding: 0
}
@media (min-width: 1024px) {
.Browse-content_09c947d6 {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
}
[dir] .Browse-content_09c947d6 {
    padding: 0;
}

    .Browse-content_09c947d6 > div {
      height: 100%;
    }
  }
.Browse-content_09c947d6 > div {
    max-width: none !important;
  }
.Browse-sortNav_0742b53f {
  height: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .Browse-sortNav_0742b53f {
  padding-top: 1.25rem
}
@media (min-width: 1024px) {
.Browse-sortNav_0742b53f {
    height: 3.75rem; /* Fixed height of sort nav at this breakpoint */
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
[dir] .Browse-sortNav_0742b53f {
    margin-top: 0;
    padding-top: 0
}
  }
@media (min-width: 1280px) {
.Browse-sortNav_0742b53f {
    height: 3.75rem /* Fixed height of sort nav at this breakpoint */
}
  }
.Browse-sortDropdown_df5ffe2b {
  min-width: 9.38rem;
}
[dir=ltr] .Browse-sortDropdown_df5ffe2b {
 margin-left: -0.31rem;
}
[dir=rtl] .Browse-sortDropdown_df5ffe2b {
  margin-right: -0.31rem;
}
[dir] .Browse-sortDropdown_df5ffe2b button {
    margin-bottom: 0
  }
@media (min-width: 1024px) and (max-width: 1279px) {

  .Browse-sortDropdown_df5ffe2b button {
      font-size: 0.75rem;
      letter-spacing: 0.01rem;
      line-height: 1.5
  }
    }
[dir] .Browse-filterToggle_6b340db6 {
  border: solid 1Px transparent
}
.Browse-filterToggle_6b340db6:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Browse-filterToggle_6b340db6:focus {
    border-color: #fff;
  }
.Browse-filterToggle_6b340db6 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
@media (min-width: 1024px) {
.Browse-filterToggle_6b340db6 {
    display: none
}
  }
.Browse-filterToggle_6b340db6 {
  height: 2.5rem;
  min-width: 2.5rem; /* Cancels out dropdown button padding so text is flush to right side. */
  text-transform: none;
  font-weight: var(--font-regular);
}
[dir] .Browse-filterToggle_6b340db6 {

  background-color: transparent;
  padding: 0 1.25rem;
}
[dir=ltr] .Browse-filterToggle_6b340db6 {
 margin-right: -1.25rem;
}
[dir=rtl] .Browse-filterToggle_6b340db6 {
  margin-left: -1.25rem;
}
.Browse-filterToggle_6b340db6 > span {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
[dir=ltr] .Browse-numFiltersLabel_9cdd8e27 {
 margin-left: 0.19rem;
}
[dir=rtl] .Browse-numFiltersLabel_9cdd8e27 {
  margin-right: 0.19rem;
}
.Browse-filterIcon_98c1d7ff {
  width: 0.88rem;
  display: inline-block;
}
[dir=ltr] .Browse-filterIcon_98c1d7ff {
 margin-left: 0.5rem;
}
[dir=rtl] .Browse-filterIcon_98c1d7ff {
  margin-right: 0.5rem;
}
.Browse-gridContainer_51f3eb07 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  height: 100%;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto
}
@media (min-width: 1024px) and (max-width: 1279px) {
.Browse-gridContainer_51f3eb07 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1024px) {
.Browse-searchEmpty_872949be {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 100%
}
[dir] .Browse-searchEmpty_872949be {
    padding-top: 20%
}
  }
.Browse-sortPlaceholder_f2655c68 {
  height: 1.13rem;
  width: 7.75rem;
}
[dir] .Browse-sortPlaceholder_f2655c68 {
  background-color: #2b2b2b;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BrowsePagination-paginationWrapper_edc18f2e {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BackToStore-container_3bd71f3c {
  position: relative
}
[dir] .BackToStore-container_3bd71f3c {
  padding-bottom: 5rem;
  padding-top: 2.5rem
}
.BackToStore-container_3bd71f3c::before {
    content: '';
    display: block;
    height: 0.06rem;
    position: absolute;
    top: 0;
    width: 0.63rem;
  }
[dir] .BackToStore-container_3bd71f3c::before {
    background-color: #535353;
  }
[dir=ltr] .BackToStore-container_3bd71f3c::before {
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
  }
[dir=rtl] .BackToStore-container_3bd71f3c::before {
    right: 50%;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SubscribeToggler-button_ab2b0e62 {
  height: 100%;
  color: var(--color-white-light);
}
[dir=ltr] .SubscribeToggler-button_ab2b0e62 {
 margin-right: 1.56rem;
}
[dir=rtl] .SubscribeToggler-button_ab2b0e62 {
  margin-left: 1.56rem;
}
.SubscribeToggler-label_663d859f {
  text-transform: none;
}
[dir=ltr] .SubscribeToggler-label_663d859f {
 margin-right: 0.63rem;
}
[dir=rtl] .SubscribeToggler-label_663d859f {
  margin-left: 0.63rem;
}
[dir] .SubscribeToggler-invertColors_16f3086d input:checked + div {
    background-color: #fff;
  }
[dir] .SubscribeToggler-invertColors_16f3086d input:checked + div span {
      background-color: #0078f2;
    }

.ModListItem-subscribeContainer_d628e8eb {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}[dir=ltr] .ModListItem-subscribeContainer_d628e8eb {
  margin-right: 0.75rem;
}[dir=rtl] .ModListItem-subscribeContainer_d628e8eb {
  margin-left: 0.75rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductDetails-wrapper_2d124844 {
  position: relative
}
[dir] .ProductDetails-wrapper_2d124844 {
  padding-bottom: 3.19rem
}
@media (min-width: 1280px) {
[dir] .ProductDetails-wrapper_2d124844 {
    padding-bottom: 3.75rem
}
  }
/* Prevent the margin above from breaking the page layout in the site meta */
.ProductDetails-wrapper_2d124844 [class*=schema],
  .ProductDetails-wrapper_2d124844 [id*=schema] {
    display: none;
  }
[dir=ltr] .ProductDetails-contentContainer_4cf91cc1 {
 margin-left: auto;
 margin-right: auto;
}
[dir=rtl] .ProductDetails-contentContainer_4cf91cc1 {
  margin-right: auto;
  margin-left: auto;
}
[dir] .ProductDetails-productButtonWrapper_bffebfb2 {
  margin-top: 2em;
}
.ProductDetails-ageGateButtonsWrapper_7713c4c9,
.ProductDetails-platformUnsupportedWarningButtonsWrapper_73734865 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
.ProductDetails-ageGateBackButton_16a2f8d8,
.ProductDetails-platformUnsupportedWarningBackButton_cc45a726 {
  color: currentColor;
  opacity: 0.7;
}
[dir] .ProductDetails-ageGateBackButton_16a2f8d8, [dir] .ProductDetails-platformUnsupportedWarningBackButton_cc45a726 {
  margin-top: 2.19rem;
}
[dir] .ProductDetails-group_701758bf {
  margin-top: 3.19rem
}
@media (min-width: 1280px) {
[dir] .ProductDetails-group_701758bf {
    margin-top: 3.75rem
}
  }
.ProductDetails-viewOffers_6f042760 {
  /* give some height to the sticky button background fade on mobile */
}
[dir] .ProductDetails-viewOffers_6f042760 {
  margin-top: 0.94rem
}
@media (min-width: 768px) and (max-width: 1023px) {
[dir] .ProductDetails-viewOffers_6f042760 {
    margin-top: 1.88rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Group-wrapper_47db70e8:nth-child(2) {
    -ms-grid-row: 2;
  }
.Group-wrapper_47db70e8:nth-child(3) {
    -ms-grid-row: 3;
  }
.Group-wrapper_47db70e8:nth-child(4) {
    -ms-grid-row: 4;
  }
.Group-wrapper_47db70e8:nth-child(5) {
    -ms-grid-row: 5;
  }
.Group-wrapper_47db70e8:nth-child(6) {
    -ms-grid-row: 6;
  }
.Group-wrapper_47db70e8:nth-child(7) {
    -ms-grid-row: 7;
  }
.Group-wrapper_47db70e8:nth-child(8) {
    -ms-grid-row: 8;
  }
.Group-wrapper_47db70e8 {

  -ms-grid-column: 2;

  -ms-grid-column-span: 1;

  grid-column: 2 / 3
}
@media (min-width: 1024px) {
.Group-wrapper_47db70e8 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

    .Group-wrapper_47db70e8.Group-sticky_6e8fca08 {
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
    }
  }
@media (min-width: 1280px) {
.Group-wrapper_47db70e8 {
    -ms-grid-column-align: center;
        justify-self: center;
    width: 100%
}
  }
.Group-leftRail_13006e74 {
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
  position: relative
}
.Group-leftRail_13006e74.Group-sticky_6e8fca08 {
    position: -webkit-sticky;
    position: sticky
  }
@media (min-width: 1024px) {
.Group-leftRail_13006e74.Group-sticky_6e8fca08 {
      top: calc(6.25rem + 3.19rem);
  }

      .isLauncher .Group-leftRail_13006e74.Group-sticky_6e8fca08 {
        top: 5rem;
      }
    }
@media (min-width: 1280px) {
.Group-leftRail_13006e74.Group-sticky_6e8fca08 {
      top: calc(6.25rem + 3.75rem);
  }

      .isLauncher .Group-leftRail_13006e74.Group-sticky_6e8fca08 {
        top: 6.88rem;
      }
    }
@media (min-width: 1600px) {
.Group-leftRail_13006e74 {
    width: calc((100rem - 1.88rem) * (4 / 18))
}
  }
@media (min-width: 1024px) {
.Group-leftRail_13006e74 {
    width: calc((100vw - 1.25rem) * (4 / 18));

    -webkit-flex: none;

        -ms-flex: none;

            flex: none
}
  }
@media (min-width: 1280px) {
.Group-leftRail_13006e74 {
    width: calc((100vw - 1.88rem) * (4 / 18))
}
  }
@media (min-width: 1600px) {
.Group-leftRail_13006e74 {
    width: calc((100rem - 1.88rem) * (4 / 18))
}
  }
.Group-header_d7dad8d8 {
  font-size: 1.13rem;
  letter-spacing: 0;
  line-height: 1.4;

  color: var(--theme-custom-color-primary-text)
}
[dir=ltr] .Group-header_d7dad8d8 {
 padding-right: 1.25rem
}
[dir=rtl] .Group-header_d7dad8d8 {
  padding-left: 1.25rem
}
@media (min-width: 768px) {
.Group-header_d7dad8d8 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;

    line-height: 1.63rem
}
  }
@media (min-width: 1024px) {
.Group-header_d7dad8d8 {
    line-height: 1
}
  }
@media (min-width: 1280px) {
.Group-header_d7dad8d8 {
    font-size: 1.13rem;
    letter-spacing: 0;
    line-height: 1.4;

    line-height: 1
}
  }
@media (min-width: 1600px) {
.Group-header_d7dad8d8 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
.Group-header_d7dad8d8.Group-fixed_b4a32986 {
    position: fixed
  }
@media (min-width: 1024px) {
.Group-header_d7dad8d8.Group-fixed_b4a32986 {
      width: calc((100vw - 1.25rem) * (4 / 18));

      top: calc(3.25rem + 6.25rem);
  }

      .isLauncher .Group-header_d7dad8d8.Group-fixed_b4a32986 {
        top: 5rem;
      }
    }
@media (min-width: 1280px) {
.Group-header_d7dad8d8.Group-fixed_b4a32986 {
      width: calc((100vw - 1.88rem) * (4 / 18));

      top: calc(3.25rem + 6.25rem);
  }

      .isLauncher .Group-header_d7dad8d8.Group-fixed_b4a32986 {
        top: 6.88rem;
      }
    }
@media (min-width: 1600px) {
.Group-header_d7dad8d8.Group-fixed_b4a32986 {
      width: calc((100rem - 1.88rem) * (4 / 18))
  }
    }
.Group-header_d7dad8d8.Group-leaving_bf66b8c4 {
    position: absolute;
    top: auto;
    bottom: 0;
  }
.Group-content_30e81331 {
  width: 100%;

  /* bug fix: flex items will not shrink below the minimum content size, so this prevents nowrap and ellipsis items from being broken */
  min-width: 0
}
[dir] .Group-content_30e81331 {
  margin-top: 0.63rem
}
@media (min-width: 1024px) {
.Group-content_30e81331 {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1
}
[dir] .Group-content_30e81331 {
    margin-top: 0
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.MarkdownBox-content_dec2d436 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  color: var(--theme-custom-color-primary-text);
  line-height: 2
}
[dir] .MarkdownBox-content_dec2d436 {

  background-color: var(--theme-custom-color-primary);
  padding: 2.5rem
}
@media (min-width: 1024px) {
.MarkdownBox-content_dec2d436 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
[dir] .MarkdownBox-content_dec2d436 {

    padding: 3.75rem
}
  }
@media (min-width: 1280px) {
.MarkdownBox-content_dec2d436 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
@media (min-width: 1600px) {
.MarkdownBox-content_dec2d436 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
[dir=ltr] .MarkdownBox-content_dec2d436 ul, [dir=ltr] .MarkdownBox-content_dec2d436 ol {
 margin-left: 1.88rem !important;
  }
[dir=rtl] .MarkdownBox-content_dec2d436 ul, [dir=rtl] .MarkdownBox-content_dec2d436 ol {
    margin-right: 1.88rem !important;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.AccordionWrapper-accordion_6764e02b {
  display: block;
  opacity: 0
}
.AccordionWrapper-accordion_6764e02b.AccordionWrapper-loaded_62c5f24c {
    opacity: 1;
  }
.AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451 .AccordionWrapper-wrapper_5069fb8c {
      max-height: 625rem;
      overflow: hidden;
    }
.AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451.AccordionWrapper-expanded_ce1761ec .AccordionWrapper-wrapper_5069fb8c {
        -o-transition: max-height 1s ease;
        transition: max-height 1s ease;
      }
[dir] .AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451.AccordionWrapper-expanded_ce1761ec .AccordionWrapper-wrapper_5069fb8c {
        -webkit-transition: max-height 1s ease;
      }
.AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451:not(.AccordionWrapper-expanded_ce1761ec) .AccordionWrapper-wrapper_5069fb8c {
        max-height: 21.88rem
      }
@media (min-width: 768px) {
      .AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451:not(.AccordionWrapper-expanded_ce1761ec) .AccordionWrapper-wrapper_5069fb8c {
          max-height: 25rem
      }
        }
@media (min-width: 1280px) {
      .AccordionWrapper-accordion_6764e02b.AccordionWrapper-collapsable_7ff19451:not(.AccordionWrapper-expanded_ce1761ec) .AccordionWrapper-wrapper_5069fb8c {
          max-height: 31.25rem
      }
        }
.AccordionWrapper-wrapper_5069fb8c {
  display: block;
  position: relative;
  height: auto;
}
.AccordionWrapper-inner_256f06da {
  height: auto;
}
[dir] .AccordionWrapper-expanded_ce1761ec .AccordionWrapper-footer_595fb629 {
    margin-top: 2.5rem;
  }
.AccordionWrapper-gradient_2322d5a1 {
  position: absolute;
  bottom: 0;
  opacity: 0.8;
  height: 25%
}
[dir] .AccordionWrapper-gradient_2322d5a1 {
  background: -webkit-linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg));
  background: -o-linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg));
  background: linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg))
}
[dir=ltr] .AccordionWrapper-gradient_2322d5a1 {
 left: 0;
 right: 0;
 background: -webkit-gradient(linear, left top, left bottom, from(var(--theme-custom-color-primary-bg-transparent)), to(var(--theme-custom-color-primary-bg)))
}
[dir=rtl] .AccordionWrapper-gradient_2322d5a1 {
  right: 0;
  left: 0;
  background: -webkit-gradient(linear, right top, right bottom, from(var(--theme-custom-color-primary-bg-transparent)), to(var(--theme-custom-color-primary-bg)))
}
@media (min-width: 1024px) {
.AccordionWrapper-gradient_2322d5a1 {
    height: 33%
}
  }
.AccordionWrapper-expandButton_2dc42ca3 {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;
  -o-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  transition: color 125ms ease-in-out, background-color 125ms ease-in-out;

  width: 100%;
  height: 3.75rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--theme-custom-color-primary-text);
  font-weight: 500;
  text-transform: uppercase;
  position: relative
}
[dir] .AccordionWrapper-expandButton_2dc42ca3 {
  -webkit-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  background-color: var(--theme-custom-color-primary-highlight)
}
.AccordionWrapper-expandButton_2dc42ca3:hover,
  .AccordionWrapper-expandButton_2dc42ca3:focus {
    color: var(--theme-custom-color-accent-text);
  }
[dir] .AccordionWrapper-expandButton_2dc42ca3:hover, [dir] .AccordionWrapper-expandButton_2dc42ca3:focus {
    background-color: var(--theme-custom-color-accent-hover);
  }
.AccordionWrapper-expandButton_2dc42ca3 span {
    z-index: 1;
  }
.AccordionWrapper-arrow_c8a48d06 {
  transition: -webkit-transform 125ms ease-in-out;
  -o-transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out;
  transition: transform 125ms ease-in-out, -webkit-transform 125ms ease-in-out;
}
[dir] .AccordionWrapper-arrow_c8a48d06 {
  -webkit-transition: -webkit-transform 125ms ease-in-out;
}
[dir=ltr] .AccordionWrapper-arrow_c8a48d06 {
 margin-right: 0.25rem;
}
[dir=rtl] .AccordionWrapper-arrow_c8a48d06 {

  margin-left: 0.25rem;
}
.AccordionWrapper-arrowIcon_e520bbe2 {
  width: 1rem;
  height: auto;
}
[dir=ltr] .AccordionWrapper-expanded_ce1761ec .AccordionWrapper-arrowIcon_e520bbe2 {
 -webkit-transform: rotate(180deg) translateY(0.19rem);
 -ms-transform: rotate(180deg) translateY(0.19rem);
 transform: rotate(180deg) translateY(0.19rem);
  }
[dir=rtl] .AccordionWrapper-expanded_ce1761ec .AccordionWrapper-arrowIcon_e520bbe2 {
    -webkit-transform: rotate(-180deg) translateY(0.19rem);
        -ms-transform: rotate(-180deg) translateY(0.19rem);
            transform: rotate(-180deg) translateY(0.19rem);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.About-content_ad926d87 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: var(--theme-custom-color-primary-text)
}
@media (min-width: 768px) {
.About-content_ad926d87 {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.About-content_ad926d87 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.About-content_ad926d87 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.About-image_f89779a0 {
  width: 100%;
}
[dir] .About-image_f89779a0 {
  margin-bottom: 2.5rem;
}
[dir] .About-markdown_15ec037a:not(:last-child) {
  margin-bottom: 1.56rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductCard-card_14338e02 {
  color: var(--theme-custom-color-primary-text)
}
[dir] .ProductCard-card_14338e02 {
  background-color: var(--theme-custom-color-primary)
}
[dir] .ProductCard-card_14338e02:not(:last-child) {
    margin-bottom: 1.25rem;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductCard-card_14338e02 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.ProductCard-card_14338e02 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.ProductCard-card_14338e02.ProductCard-hasLink_6c62757e {
    position: relative;
  }
.ProductCard-card_14338e02.ProductCard-hasLink_6c62757e::before {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
[dir] .ProductCard-card_14338e02.ProductCard-hasLink_6c62757e::before {
    -webkit-transition: opacity 125ms ease-in-out;
    background: var(--theme-custom-color-primary-highlight);
  }
[dir=ltr] .ProductCard-card_14338e02.ProductCard-hasLink_6c62757e::before {
 left: 0;
  }
[dir=rtl] .ProductCard-card_14338e02.ProductCard-hasLink_6c62757e::before {
    right: 0;
  }
.ProductCard-card_14338e02.ProductCard-hasLink_6c62757e:hover::before {
    opacity: 0.33;
  }
[dir] .ProductCard-card_14338e02.ProductCard-hasLink_6c62757e {

    cursor: pointer;
  }
.ProductCard-link_72190b5e {
  color: inherit;
  display: block;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductImage-inner_401ff090 {
  position: absolute;
  top: 50%;
  min-width: 100%;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
[dir=ltr] .ProductImage-inner_401ff090 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .ProductImage-inner_401ff090 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.ProductImage-logoContainer_04ceaafb {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
}
[dir=ltr] .ProductImage-logoContainer_04ceaafb {
 right: 0;
 left: 0;
}
[dir=rtl] .ProductImage-logoContainer_04ceaafb {
  left: 0;
  right: 0;
}
.ProductImage-logoContainer_04ceaafb .ProductImage-logo_008afd0b {
    height: 100%;
    width: 75%;
  }
[dir] .ProductImage-logoContainer_04ceaafb .ProductImage-logo_008afd0b {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
  }
.ProductImage-tagIconContainer_412a5f8f {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
.ProductImage-tagIconContainer_412a5f8f::before {
    content: '';
    display: block;
    opacity: 0.1;
    position: absolute;
    top: 0;
    bottom: 0;
  }
[dir] .ProductImage-tagIconContainer_412a5f8f::before {
    background-color: var(--theme-custom-color-primary-text);
  }
[dir=ltr] .ProductImage-tagIconContainer_412a5f8f::before {
 right: 0;
 left: 0;
  }
[dir=rtl] .ProductImage-tagIconContainer_412a5f8f::before {
    left: 0;
    right: 0;
  }
.ProductImage-tagIconContainer_412a5f8f::after {
    content: '';
    opacity: 1;
    position: absolute;
    width: 3.69rem;
    height: 3.69rem
  }
[dir] .ProductImage-tagIconContainer_412a5f8f::after {
    background-color: var(--theme-custom-color-primary-highlight);
    border-radius: 50%
  }
@media (min-width: 1280px) {
.ProductImage-tagIconContainer_412a5f8f::after {
      width: 4.88rem;
      height: 4.88rem
  }
    }
.ProductImage-tagIcon_87b2c832 {
  color: var(--theme-custom-color-primary-text);
  opacity: 0.1;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem
}
@media (min-width: 1280px) {
.ProductImage-tagIcon_87b2c832 {
    width: 1.63rem;
    height: 1.63rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
@media (min-width: 768px) {
.ProductCardTopRow-content_1fce7fc2 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
  }
.ProductCardTopRow-image_fef2369c {
  overflow: hidden;
  z-index: 1;
  position: relative;
  width: 100%
}
[dir] .ProductCardTopRow-image_fef2369c {
  background-color: var(--theme-custom-color-primary-highlight);
  padding-bottom: calc(9 / 16 * 100%)
}
@media (min-width: 768px) {
.ProductCardTopRow-image_fef2369c {
    -webkit-flex-basis: calc(((100vw - -1.25rem) * (3.5 / 10)) - 1.25rem);
        -ms-flex-preferred-size: calc(((100vw - -1.25rem) * (3.5 / 10)) - 1.25rem);
            flex-basis: calc(((100vw - -1.25rem) * (3.5 / 10)) - 1.25rem);
    height: calc((((100vw - -1.25rem) * (3.5 / 10)) - 1.25rem) * 9 / 16);

    -webkit-flex-shrink: 0;

        -ms-flex-negative: 0;

            flex-shrink: 0
}
[dir] .ProductCardTopRow-image_fef2369c {
    padding-bottom: 0
}

    .ProductCardTopRow-image_fef2369c::after {
      display: none;
    }
  }
@media (min-width: 1024px) {
.ProductCardTopRow-image_fef2369c {
    -webkit-flex-basis: calc(((100vw - 1.25rem) * (4.5 / 18)) - 1.25rem);
        -ms-flex-preferred-size: calc(((100vw - 1.25rem) * (4.5 / 18)) - 1.25rem);
            flex-basis: calc(((100vw - 1.25rem) * (4.5 / 18)) - 1.25rem);
    height: calc((((100vw - 1.25rem) * (4.5 / 18)) - 1.25rem) * 9 / 16)
}
  }
@media (min-width: 1280px) {
.ProductCardTopRow-image_fef2369c {
    -webkit-flex-basis: calc(((100vw - 1.88rem) * (4 / 18)) - 1.88rem);
        -ms-flex-preferred-size: calc(((100vw - 1.88rem) * (4 / 18)) - 1.88rem);
            flex-basis: calc(((100vw - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100vw - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
@media (min-width: 1600px) {
.ProductCardTopRow-image_fef2369c {
    -webkit-flex-basis: calc(((100rem - 1.88rem) * (4 / 18)) - 1.88rem);
        -ms-flex-preferred-size: calc(((100rem - 1.88rem) * (4 / 18)) - 1.88rem);
            flex-basis: calc(((100rem - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100rem - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
.ProductCardTopRow-image_fef2369c > div {
    height: 100%;
  }
.ProductCardTopRow-leftContent_8f2a7a0c {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  z-index: 1;
  overflow: visible;
  width: 100%
}
[dir] .ProductCardTopRow-leftContent_8f2a7a0c {
  padding: 1.88rem
}
@media (min-width: 768px) {
[dir] .ProductCardTopRow-leftContent_8f2a7a0c {
    padding: 1.25rem 1rem 1.56rem
}
  }
@media (min-width: 1440px) {
[dir=ltr] .ProductCardTopRow-leftContent_8f2a7a0c {
  padding: 1.91rem 1.25rem 2.19rem 2.5rem
}
[dir=rtl] .ProductCardTopRow-leftContent_8f2a7a0c {
    padding: 1.91rem 2.5rem 2.19rem 1.25rem
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductCardTopRow-leftContent_8f2a7a0c {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
[dir] .ProductCardTopRow-content_1fce7fc2 .ProductCardTopRow-leftContent_8f2a7a0c {
    padding: 0.94rem 1.25rem
  }
@media (min-width: 1280px) {

  [dir] .ProductCardTopRow-content_1fce7fc2 .ProductCardTopRow-leftContent_8f2a7a0c {
      padding: 1.56rem 1.88rem
  }
    }
.ProductCardTopRow-title_cce27b3c {
  display: inline;
  line-height: 1.5rem;
}
.ProductCardTopRow-tag_9423189b {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.56rem;
  font-weight: 500;
  line-height: 0.5rem;
  letter-spacing: 0.41;
  position: relative;
}
[dir] .ProductCardTopRow-tag_9423189b {
  background-color: var(--theme-custom-color-primary-highlight);
  padding: 0.5rem 0.63rem 0.38rem;
}
[dir=ltr] .ProductCardTopRow-tag_9423189b {
 margin-right: 0.63rem;
}
[dir=rtl] .ProductCardTopRow-tag_9423189b {
  margin-left: 0.63rem;
}
.ProductCardTopRow-description_3816b381 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  opacity: 0.6;
  line-height: 1.13rem
}
[dir] .ProductCardTopRow-description_3816b381 {
  margin-top: 0.31rem
}
@media (min-width: 1280px) {
.ProductCardTopRow-description_3816b381 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
@media (min-width: 1600px) {
.ProductCardTopRow-description_3816b381 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.ProductCardTopRow-titleRow_f8c1e869 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.ProductCardTopRow-rating_30f067e1 {
  display: none
}
@media (min-width: 768px) {
.ProductCardTopRow-rating_30f067e1 {
    display: block
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductCardBottomRow-wishBtnContainer_cfdee215 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.ProductCardBottomRow-icon_477eb61d {
  width: 1rem;
}
.ProductCardBottomRow-icon_477eb61d svg {
    width: 100%;
  }
.ProductCardBottomRow-icon_477eb61d svg path {
      stroke: var(--theme-custom-color-accent-text);
    }
.ProductCardBottomRow-icon_477eb61d.ProductCardBottomRow-filledHeart_425f8b41 path, .ProductCardBottomRow-icon_477eb61d.ProductCardBottomRow-loading_54d2de5b path {
      fill: var(--theme-custom-color-accent-text);
    }
.ProductCardBottomRow-tooltip_c8239448 {
  bottom: 1.75rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductCardBottomRow-tooltip_c8239448 {
    bottom: 1.25rem
}
  }
[dir] .ProductCardBottomRow-tooltip_c8239448::after {
    border: none;
  }
.ProductCardBottomRow-wrapper_f4a2a0f7 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between
}
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7 {
  margin-top: -0.06rem;
  padding: 0 1.88rem 1.88rem
}
.ProductCardBottomRow-wrapper_f4a2a0f7::before {
    content: '';
    position: absolute;
    height: 1Px;
    width: 100%;

    top: 0.06rem;
    opacity: 0.1;
    z-index: 0;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
  }
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7::before {
    background: var(--theme-custom-color-primary-text);
            transform: translateY(-100%);
  }
[dir=ltr] .ProductCardBottomRow-wrapper_f4a2a0f7::before {
 left: 0;
 right: 0;
  }
[dir=rtl] .ProductCardBottomRow-wrapper_f4a2a0f7::before {
    right: 0;
    left: 0;
  }
@media (max-width: 767px) {
    .ProductCardBottomRow-wrapper_f4a2a0f7::before {
      opacity: 0;
    }
  }
@media (min-width: 768px) {
.ProductCardBottomRow-wrapper_f4a2a0f7 {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end
}
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7 {
    padding: 0.63rem 1rem
}
  }
@media (min-width: 1024px) {
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7 {
    padding: 0.63rem 1rem
}
  }
@media (min-width: 1440px) {
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7 {
    padding: 0.63rem 1.25rem
}
  }
@media (min-width: 1600px) {
[dir] .ProductCardBottomRow-wrapper_f4a2a0f7 {
    padding: 1rem 2rem
}
  }
@media (min-width: 768px) {
.ProductCardBottomRow-wrapper_f4a2a0f7.ProductCardBottomRow-hasLabel_568a5143 {
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between
  }
    }
.ProductCardBottomRow-rowChildren_25427df4 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%
}
@media (min-width: 768px) {
.ProductCardBottomRow-rowChildren_25427df4 {
    width: auto
}
  }
/* style card purchase buttons to match VDL, wishlist button remains square */
.ProductCardBottomRow-rowChildren_25427df4 button {
    min-width: 6.25rem;
  }
@media (min-width: 768px) {
.ProductCardBottomRow-rowChildren_25427df4,
.ProductCardBottomRow-label_5a003658 {
    min-height: 2.5rem
}
  }
.ProductCardBottomRow-label_5a003658 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.13rem;
  opacity: 0.6;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;

  -o-transition: opacity 125ms ease-in-out;

  transition: opacity 125ms ease-in-out;
}
[dir] .ProductCardBottomRow-label_5a003658 {
  margin-top: 0.63rem;

  -webkit-transition: opacity 125ms ease-in-out;
}
a .ProductCardBottomRow-label_5a003658 {
    opacity: 0;
  }
@media (max-width: 767px) {
.ProductCardBottomRow-label_5a003658 {
    display: none
}
  }
@media (min-width: 768px) {
.ProductCardBottomRow-label_5a003658 {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
[dir] .ProductCardBottomRow-label_5a003658 {
    margin-top: 0;
}

    a .ProductCardBottomRow-label_5a003658 {
      line-height: 1.13rem;
    }

    a:hover .ProductCardBottomRow-label_5a003658 {
      opacity: 0.6;
    }
  }
@media (min-width: 1280px) {
.ProductCardBottomRow-label_5a003658 {
    font-size: 0.88rem;
    line-height: 1.25rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductCardLinkTag-tag_47b25be7 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.13rem;
  opacity: 0.6;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;

  -o-transition: opacity 125ms ease-in-out;

  transition: opacity 125ms ease-in-out;
}
[dir] .ProductCardLinkTag-tag_47b25be7 {
  margin-top: 0.63rem;

  -webkit-transition: opacity 125ms ease-in-out;
}
a .ProductCardLinkTag-tag_47b25be7 {
    opacity: 0;
  }
@media (max-width: 767px) {
.ProductCardLinkTag-tag_47b25be7 {
    display: none
}
  }
@media (min-width: 768px) {
.ProductCardLinkTag-tag_47b25be7 {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
[dir] .ProductCardLinkTag-tag_47b25be7 {
    margin-top: 0;
}

    a .ProductCardLinkTag-tag_47b25be7 {
      line-height: 1.13rem;
    }

    a:hover .ProductCardLinkTag-tag_47b25be7 {
      opacity: 0.6;
    }
  }
@media (min-width: 1280px) {
.ProductCardLinkTag-tag_47b25be7 {
    font-size: 0.88rem;
    line-height: 1.25rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Footer-container_d304a8b2 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;

  color: var(--theme-custom-color-primary-text);
  position: relative
}
[dir] .Footer-container_d304a8b2 {
  background-color: var(--theme-custom-color-primary);
  text-align: center;
  padding: 1.69rem;
  border-top: solid 0.06rem var(--theme-custom-color-primary-highlight);
  border-top: solid 1px var(--theme-custom-color-primary-highlight)
}
@media (min-width: 768px) {
[dir] .Footer-container_d304a8b2 {
    padding: 2.5rem 5.38rem
}
  }
@media (min-width: 1024px) {
[dir] .Footer-container_d304a8b2 {
    padding: 2.5rem 3.13rem
}
  }
@media (min-width: 1280px) {
[dir] .Footer-container_d304a8b2 {
    padding: 2.5rem 3.31rem
}
  }
@media (min-width: 1600px) {
.Footer-container_d304a8b2 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.Footer-text_b2e1810c {
  opacity: 0.7;
}
.Footer-link_c3ce55bc {
  display: block;
  color: var(--theme-custom-color-primary-text)
}
[dir] .Footer-link_c3ce55bc {
  margin-top: 0.63rem
}
.Footer-link_c3ce55bc:hover {
    text-decoration: underline;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.GameMeta-metaFonts_dfcac643 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
@media (min-width: 1024px) {
.GameMeta-metaFonts_dfcac643 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.GameMeta-metaFonts_dfcac643 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
@media (min-width: 1600px) {
.GameMeta-metaFonts_dfcac643 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.GameMeta-meta_78738de5 {

  font-size: 0.88rem;

  letter-spacing: 0.01rem;

  line-height: 1.4;

  line-height: 1.3rem;
  color: var(--theme-custom-color-primary-text);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap
}
[dir] .GameMeta-meta_78738de5 {
  margin: 1.25rem calc(0.94rem * -1) calc(3.19rem - 1.88rem)
}
@media (min-width: 768px) {
.GameMeta-meta_78738de5.GameMeta-incompleteRows_1e865344 {
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start
  }
    }
@media (min-width: 768px) {
.GameMeta-meta_78738de5 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5

    /* using grid here makes it so we can get the same table like layout without having to measure and set items to have the same width */
}
[dir] .GameMeta-meta_78738de5 {

    margin-bottom: calc(3.19rem - 1.25rem)
}
    @supports (grid-gap: 0) {
.GameMeta-meta_78738de5 {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr auto;
          grid-template-columns: 1fr 1fr auto
}
    }
[dir] .GameMeta-meta_78738de5 {

    margin-top: 0
}
  }
@media only screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.GameMeta-meta_78738de5 {
    /* IE11 fallback */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
  }
@media (min-width: 1280px) {
.GameMeta-meta_78738de5 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
[dir] .GameMeta-meta_78738de5 {

    margin-bottom: calc(3.75rem - 1.88rem)
}
  }
@media (min-width: 1600px) {
.GameMeta-meta_78738de5 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.GameMeta-metaItem_62870ec1 {
  -webkit-flex-basis: calc(100% / 2 - 0.94rem * 2);
      -ms-flex-preferred-size: calc(100% / 2 - 0.94rem * 2);
          flex-basis: calc(100% / 2 - 0.94rem * 2)
}
[dir] .GameMeta-metaItem_62870ec1 {
  margin-bottom: 1.88rem
}
[dir=ltr] .GameMeta-metaItem_62870ec1 {
 margin-left: calc(0.94rem);
 margin-right: calc(0.94rem)
}
[dir=rtl] .GameMeta-metaItem_62870ec1 {
  margin-right: calc(0.94rem);
  margin-left: calc(0.94rem)
}
@media (min-width: 768px) and (max-width: 1023px) {
.GameMeta-metaItem_62870ec1 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 768px) and only screen and (-ms-high-contrast: active), (min-width: 768px) and (-ms-high-contrast: none) {
.GameMeta-metaItem_62870ec1 {
      /* IE11 fallback */
      -webkit-flex-basis: calc(100% / 3 - 0.94rem * 3);
          -ms-flex-preferred-size: calc(100% / 3 - 0.94rem * 3);
              flex-basis: calc(100% / 3 - 0.94rem * 3);
      max-width: calc(100% / 3 - 0.94rem * 3)
}
    }
.GameMeta-metaItem_62870ec1 .GameMeta-label_456b57b4 {
    opacity: 0.6;
  }
.GameMeta-metaItem_62870ec1 .GameMeta-placeholder_c00da834 {
    opacity: 0.6;
  }
@media (min-width: 1280px) {

  .GameMeta-metaItem_62870ec1 .GameMeta-data_39556c21:not(.GameMeta-listData_1307a9ef) {
      line-height: 1.25rem
  }

  [dir] .GameMeta-metaItem_62870ec1 .GameMeta-data_39556c21:not(.GameMeta-listData_1307a9ef) {
      margin-top: 0.31rem
  }
    }
.GameMeta-metaList_ac930bcf {
  position: relative;
  overflow: auto;

  -ms-overflow-style: none;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none
}
.GameMeta-metaList_ac930bcf::-webkit-scrollbar {
    display: none;
  }
.GameMeta-metaList_ac930bcf .GameMeta-collapseWrapper_d6d1c02f {
    white-space: normal
  }
.GameMeta-metaList_ac930bcf .GameMeta-collapseWrapper_d6d1c02f.GameMeta-canCollapse_cb4a3e99 {
      max-height: 1.25rem;
      overflow: hidden
    }
@media (min-width: 1280px) {

    .GameMeta-metaList_ac930bcf .GameMeta-collapseWrapper_d6d1c02f.GameMeta-canCollapse_cb4a3e99 {
        max-height: 1.5rem
    }
      }
.GameMeta-isExpanded_b0b01cab .GameMeta-metaList_ac930bcf .GameMeta-collapseWrapper_d6d1c02f.GameMeta-canCollapse_cb4a3e99 {
        max-height: none;
      }
@media (min-width: 1280px) {

  .GameMeta-metaList_ac930bcf .GameMeta-items_e3f972d2 {
      line-height: 1.25rem
  }

  [dir] .GameMeta-metaList_ac930bcf .GameMeta-items_e3f972d2 {
      margin-top: 0.31rem
  }
    }
.GameMeta-metaList_ac930bcf .GameMeta-data_39556c21 {
    display: inline-block
  }
[dir=ltr] .GameMeta-metaList_ac930bcf .GameMeta-data_39556c21:not(:last-child) {
 margin-right: 0.31rem;
    }
[dir=rtl] .GameMeta-metaList_ac930bcf .GameMeta-data_39556c21:not(:last-child) {
      margin-left: 0.31rem;
    }
/* Insert commas for all but the last list item */
.GameMeta-metaList_ac930bcf .GameMeta-listData_1307a9ef:not(:last-child)::after {
    content: ',';
  }
.GameMeta-metaList_ac930bcf .GameMeta-widthPlaceholder_24569ea6 {
    position: absolute;
  }
.GameMeta-moreText_b8a25c98 {
  vertical-align: middle;
}
.GameMeta-ratingButton_c4dcdb3d,
.GameMeta-moreButton_e35b97f3 {
  font-size: inherit;
  color: var(--theme-custom-color-primary-text);
}
.GameMeta-arrow_32114870 {
  display: inline-block;
  vertical-align: text-top;
}
[dir=ltr] .GameMeta-arrow_32114870 {
 margin-left: 0.13rem;
}
[dir=rtl] .GameMeta-arrow_32114870 {
  margin-right: 0.13rem;
}
.GameMeta-arrowIcon_00145277 {
  height: 1rem;
  width: 1rem
}
@media (min-width: 1024px) {
.GameMeta-arrowIcon_00145277 {
    width: 0.75rem
}
  }
@media (min-width: 1280px) {
.GameMeta-arrowIcon_00145277 {
    width: 1rem
}
  }
[dir=ltr] .GameMeta-isExpanded_b0b01cab .GameMeta-arrowIcon_00145277 {
 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
  }
[dir=rtl] .GameMeta-isExpanded_b0b01cab .GameMeta-arrowIcon_00145277 {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
.GameMeta-moreButton_e35b97f3 {
  opacity: 0.6;
  position: absolute;
  white-space: nowrap;
  top: 0;
  height: 100%
}
@media (min-width: 1024px) {
.GameMeta-moreButton_e35b97f3 {
    top: -0.13rem
}
  }
@media (min-width: 1280px) {
.GameMeta-moreButton_e35b97f3 {
    line-height: 1.25rem;
    top: 0.31rem
}
  }
.GameMeta-ratingButton_c4dcdb3d {
  display: block;
  line-height: 1.3rem;
}
.GameMeta-ratingButton_c4dcdb3d .GameMeta-data_39556c21 {
    display: inline-block;
  }
.GameMeta-ratingButton_c4dcdb3d .GameMeta-arrow_32114870 {
    opacity: 0.6;
  }
.GameMeta-ratingDetails_7f633c72 {
  height: 5rem;
}
[dir] .GameMeta-ratingDetails_7f633c72 {
  margin-top: 0.5rem;
  margin-bottom: 0.63rem;
}
.GameMeta-ratingCategories_b89fda66 {
  display: inline-block;
  text-transform: capitalize;
  vertical-align: top;
  line-height: 1.25rem;
}
.GameMeta-platformIcon_22ea63f2 {
  width: 1.06rem;
  height: 1.06rem;
  display: inline-block
}
[dir] .GameMeta-platformIcon_22ea63f2 {
  margin-top: 0.19rem
}
[dir=ltr] .GameMeta-platformIcon_22ea63f2:not(:first-child) {
 margin-left: 0.75rem;
  }
[dir=rtl] .GameMeta-platformIcon_22ea63f2:not(:first-child) {
    margin-right: 0.75rem;
  }
.GameMeta-platformIcon_22ea63f2.GameMeta-windowsPlatformIcon_b757c7a4 {
    width: 1rem;
    height: 1rem;
  }
@media (min-width: 1024px) {
    [dir=ltr] .GameMeta-platformIcon_22ea63f2:not(:first-child) {
  margin-left: 0.94rem;
    }
    [dir=rtl] .GameMeta-platformIcon_22ea63f2:not(:first-child) {
      margin-right: 0.94rem;
    }
  }
@media (min-width: 1280px) {
[dir] .GameMeta-platformIcon_22ea63f2 {
    margin-top: 0
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ImageGridItem-imageWrapper_d502c9f3 {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  overflow: hidden;
  -webkit-flex-basis: 0%;
      -ms-flex-preferred-size: 0%;
          flex-basis: 0%;
  position: relative
}
[dir] .ImageGridItem-imageWrapper_d502c9f3 {
  margin: 1.25rem;
  background: rgba(0, 0, 0, 0.03)
}
[dir] .ImageGridItem-imageWrapper_d502c9f3.ImageGridItem-isDark_6ffe4632 {
    background: rgba(255, 255, 255, 0.04);
  }
.ImageGridItem-imageWrapper_d502c9f3::before {
    content: '';
    display: block; /* IE */
  }
[dir] .ImageGridItem-imageWrapper_d502c9f3::before {
    padding-top: 56%;
    padding-top: calc((14/25) * 100%);
  }
.ImageGridItem-imageWrapper_d502c9f3:only-child {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
@media (min-width: 768px) {
[dir] .ImageGridItem-imageWrapper_d502c9f3 {
    margin: calc(1.25rem / 2)
}
  }
@media (min-width: 1024px) {
[dir] .ImageGridItem-imageWrapper_d502c9f3 {
    margin: calc(1.25rem / 2)
}
  }
@media (min-width: 1280px) {
[dir] .ImageGridItem-imageWrapper_d502c9f3 {
    margin: calc(1.88rem / 2)
}
  }
.ImageGridItem-placeholderIcon_33c10a40 {
  position: absolute;
  top: 50%;
  color: rgba(0, 0, 0, 0.25);
  width: 1.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir=ltr] .ImageGridItem-placeholderIcon_33c10a40 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .ImageGridItem-placeholderIcon_33c10a40 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
.ImageGridItem-isDark_6ffe4632 .ImageGridItem-placeholderIcon_33c10a40 {
    color: rgba(255, 255, 255, 0.3);
  }
.ImageGridItem-placeholderIcon_33c10a40 > svg {
    width: 100%;
  }
.ImageGridItem-image_64522fb6 {
  position: absolute;
  top: 50%;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center
}
[dir] .ImageGridItem-image_64522fb6 {
  border-style: none
}
[dir=ltr] .ImageGridItem-image_64522fb6 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%)
}
[dir=rtl] .ImageGridItem-image_64522fb6 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%)
}
.ImageGridItem-image_64522fb6:not([src]),
  .ImageGridItem-image_64522fb6[src=""] {
    display: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ImageGrid-grid_34817ac6 {
  margin: 2.5rem 0;
  margin: calc(1.25rem / 2 * -1)
}
@media (min-width: 768px) {
[dir] .ImageGrid-grid_34817ac6 {
    margin: calc(1.25rem / 2 * -1)
}
  }
@media (min-width: 1024px) {
[dir] .ImageGrid-grid_34817ac6 {
    margin: calc(1.25rem / 2 * -1)
}
  }
@media (min-width: 1280px) {
[dir] .ImageGrid-grid_34817ac6 {
    margin: calc(1.88rem / 2 * -1)
}
  }
[dir] .ImageGrid-grid_34817ac6:first-child {
    margin-top: 0;
  }
[dir] .ImageGrid-grid_34817ac6:last-child {
    margin-bottom: 0;
  }
.ImageGrid-gridRow_bb3d6e23 {
  list-style-type: none;

  width: 100%
}
[dir] .ImageGrid-gridRow_bb3d6e23 {
  margin: 0;
  padding: 0
}
[dir] .ImageGrid-gridRow_bb3d6e23:last-child {
    padding-bottom: 0;
  }
@media (min-width: 768px) {
.ImageGrid-gridRow_bb3d6e23 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductBanner-promoContainer_1b7bac24 {
  display: none
}
@media (min-width: 768px) {
.ProductBanner-promoContainer_1b7bac24 {
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 5rem
}
[dir] .ProductBanner-promoContainer_1b7bac24 {
    background: var(--theme-custom-color-accent-hover-inverse)
}
  }
@media (min-width: 1280px) {
.ProductBanner-promoContainer_1b7bac24 {
    width: 6.25rem
}
  }
.ProductBanner-promoContainer_1b7bac24 .ProductBanner-promo_808b8c89 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25;

    font-size: 1.5rem
  }
@media (min-width: 1280px) {

  .ProductBanner-promoContainer_1b7bac24 .ProductBanner-promo_808b8c89 {
      font-size: 1.88rem;
      letter-spacing: -0.02rem;
      line-height: 1
  }
    }
.ProductBanner-promoContainer_1b7bac24 .ProductBanner-promo_808b8c89 span {
      font-size: 1rem;
      letter-spacing: 0;
      line-height: 1.625;
    }
.ProductBanner-ctaContainer_71666fec {
  display: none
}
@media (min-width: 768px) {
.ProductBanner-ctaContainer_71666fec {
    display: block
}
[dir] .ProductBanner-ctaContainer_71666fec {
    margin: 0 1.25rem
}
  }
.ProductBanner-ctaContainer_71666fec .ProductBanner-cta_11d16e58 {
    color: var(--theme-custom-color-accent-text);
    min-width: 9.38rem
  }
[dir] .ProductBanner-ctaContainer_71666fec .ProductBanner-cta_11d16e58 {
    border: 0.06rem solid var(--theme-custom-color-accent-text);
    border: 1px solid var(--theme-custom-color-accent-text)
  }
[dir] .ProductBanner-ctaContainer_71666fec .ProductBanner-cta_11d16e58:hover {
      background-color: var(--theme-custom-color-accent-text-hover);
    }
.ProductBanner-ctaContainer_71666fec button.ProductBanner-cta_11d16e58 {
    pointer-events: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SubPageHeader-header_50345a34 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-column: 1 / 4;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  /* removes default margin from pdp grid; */
  color: var(--theme-custom-color-primary-text)
}
[dir] .SubPageHeader-header_50345a34 {
  margin-bottom: 0 !important;
  padding: 1.25rem
}
.SubPageHeader-header_50345a34::before {
    content: '';
    position: absolute;
    height: 1Px;
    width: 100%;
    top: 0;
    opacity: 0.1;
  }
[dir] .SubPageHeader-header_50345a34::before {

    background: currentColor;
    margin: 0 auto;
  }
[dir=ltr] .SubPageHeader-header_50345a34::before {
 left: 0;
 right: 0;
  }
[dir=rtl] .SubPageHeader-header_50345a34::before {
    right: 0;
    left: 0;
  }
@media (min-width: 1024px) {
.SubPageHeader-header_50345a34 {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start
}
[dir] .SubPageHeader-header_50345a34 {
    padding: 1.25rem 0
}

    .SubPageHeader-header_50345a34::before {
      width: calc(((100vw - 1.25rem) * (14 / 18)) - 1.25rem);
    }
  }
@media (min-width: 1280px) {
    .SubPageHeader-header_50345a34::before {
      width: calc(((100vw - 1.88rem) * (14 / 18)) - 1.88rem);

      max-width: 75rem;
    }
  }
.isLauncher .SubPageHeader-header_50345a34::before {
    display: none
  }
@media (min-width: 1024px) {

  .isLauncher .SubPageHeader-header_50345a34::before {
      display: block;
      width: 100%
  }
    }
@media (min-width: 1600px) {

  .isLauncher .SubPageHeader-header_50345a34::before {
      max-width: 75rem
  }

  [dir] .isLauncher .SubPageHeader-header_50345a34::before {
      margin: 0 auto
  }
    }
@media (min-width: 1024px) {
[dir] .SubPageHeader-header_50345a34:nth-child(2n) {
      margin-top: 0
  }
    }
.SubPageHeader-header_50345a34 > h3 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
  }
@media (min-width: 1024px) {

  .SubPageHeader-header_50345a34 > h3 {
      font-size: 0.88rem;
      letter-spacing: 0.01rem;
      line-height: 1.4
  }
    }
@media (min-width: 1600px) {

  .SubPageHeader-header_50345a34 > h3 {
      font-size: 1rem;
      letter-spacing: 0;
      line-height: 1.625
  }
    }
.SubPageHeader-headerTag_7e451ebc {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}
[dir=ltr] .SubPageHeader-headerTag_7e451ebc {
 margin-right: 0.94rem;
}
[dir=rtl] .SubPageHeader-headerTag_7e451ebc {
  margin-left: 0.94rem;
}
.SubPageHeader-headerTag_7e451ebc > span {
    display: block;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductSlider-image_bdfcf4e2 {
  display: block;
  height: 100%;
  width: auto;
}
[dir] .ProductSlider-image_bdfcf4e2 {
  background-color: var(--theme-custom-color-primary);
}
.ProductSlider-carousel_f2b6c254 {
  position: relative
}
@media (min-width: 768px) {
.ProductSlider-carousel_f2b6c254 {
    height: 100%
}
  }
.ProductSlider-epicSlide_d17eb9e5 {
  position: relative;
  height: 100%;
}
.ProductSlider-clone_96c3757c {
  display: none
}
@media (min-width: 1024px) {
.ProductSlider-clone_96c3757c {
    display: block
}
  }
.ProductSlider-slideContents_5563780b {
  position: relative;
  height: 100%;
}
.ProductSlider-slideImage_bbb805a2,
.ProductSlider-slideVideo_649e9a3e {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
[dir] .ProductSlider-slideImage_bbb805a2, [dir] .ProductSlider-slideVideo_649e9a3e {
  background-size: cover;
}
[dir=ltr] .ProductSlider-slideImage_bbb805a2, [dir=ltr] .ProductSlider-slideVideo_649e9a3e {
 left: 0;
 right: 0;
}
[dir=rtl] .ProductSlider-slideImage_bbb805a2, [dir=rtl] .ProductSlider-slideVideo_649e9a3e {
  right: 0;
  left: 0;
}
.ProductSlider-slideImage_bbb805a2 img,
  .ProductSlider-slideImage_bbb805a2 > span,
  .ProductSlider-slideVideo_649e9a3e img,
  .ProductSlider-slideVideo_649e9a3e > span {
    width: 100%;
    height: 100%;
  }
.ProductSlider-slideImage_bbb805a2 div {
  width: 100%;
  height: 100%;
}
.ProductSlider-slideVideoContent_b25cf4d6 {
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
[dir] .ProductSlider-slideVideoContent_b25cf4d6 {
  -webkit-transition: opacity 200ms ease;
}
.ProductSlider-slideVideoPoster_859447c9 {
  position: absolute;
  top: 0.06rem;
  bottom: 0.06rem;
  width: 100%;
  opacity: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .ProductSlider-slideVideoPoster_859447c9 {
  background: var(--theme-custom-color-primary);
}
[dir=ltr] .ProductSlider-slideVideoPoster_859447c9 {
 left: 0.06rem;
 right: 0.06rem;
}
[dir=rtl] .ProductSlider-slideVideoPoster_859447c9 {
  right: 0.06rem;
  left: 0.06rem;
}
@media (min-width: 768px) {
  .ProductSlider-infinite_a1db2dab .ProductSlider-slideVideoPoster_859447c9 {
      opacity: 1
  }
    }
@media (min-width: 768px) {

  .ProductSlider-infinite_a1db2dab .ProductSlider-slideVideoContent_b25cf4d6 {
      opacity: 0
  }
    }
.ProductSlider-infinite_a1db2dab .current .ProductSlider-slideVideoContent_b25cf4d6 {
    opacity: 1;
  }
.ProductSlider-infinite_a1db2dab .current .ProductSlider-slideVideoPoster_859447c9 {
    opacity: 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* slider height based on slide ratios of 16/9 with width of 14 of 18 columns */
.ProductDetailHeader-wrapper_e0846efc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column
}
.ProductDetailHeader-wrapper_e0846efc:nth-child(2) {
    -ms-grid-row: 2;
  }
@media (min-width: 768px) {
.ProductDetailHeader-wrapper_e0846efc {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center
}
  }
@media (min-width: 1024px) {
.ProductDetailHeader-wrapper_e0846efc {
    width: 100%
}
[dir=ltr] .ProductDetailHeader-wrapper_e0846efc {
  margin-left: 0
}
[dir=rtl] .ProductDetailHeader-wrapper_e0846efc {
    margin-right: 0
}
  }
@media (min-width: 768px) {
.ProductDetailHeader-carousel_a62c3631 {
    height: calc(100vw * (9 / 16));
    min-width: 100vw
}
[dir] .ProductDetailHeader-carousel_a62c3631 {
    margin-bottom: 3.13rem
}
  }
@media (min-width: 1024px) {
.ProductDetailHeader-carousel_a62c3631 {
    max-height: calc(((((100vw - 1.25rem) * 14 / 18) - 1.25rem) * 9 / 16) + 1.25rem);

    min-height: 25rem
}
[dir] .ProductDetailHeader-carousel_a62c3631 {
    margin-bottom: 1.31rem
}
  }
@media (min-width: 1024px) {

  .isLauncher .ProductDetailHeader-carousel_a62c3631 {
      min-width: 100%
  }
    }
.ProductDetailHeader-expandButton_6839b6d1 {
  width: 100%;
  color: var(--theme-button-primary-text);
  position: relative
}
[dir] .ProductDetailHeader-expandButton_6839b6d1 {
  background-color: var(--theme-custom-color-primary)
}
@media (min-width: 768px) {
.ProductDetailHeader-expandButton_6839b6d1 {
    display: none
}
  }
.ProductDetailHeader-expandButton_6839b6d1::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.05;
  }
[dir] .ProductDetailHeader-expandButton_6839b6d1::before {
    background-color: var(--theme-custom-color-primary-text);
  }
[dir=ltr] .ProductDetailHeader-expandButton_6839b6d1::before {
 right: 0;
 left: 0;
  }
[dir=rtl] .ProductDetailHeader-expandButton_6839b6d1::before {
    left: 0;
    right: 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DotMenu-dotMenu_a9808c57 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  list-style: none outside none;
}
[dir] .DotMenu-dotMenu_a9808c57 {
  padding: 0;
  margin: 0;
}
.DotMenu-dot_ef1027b8 button {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;

    width: 1.25rem;
    height: 1.25rem;
  }
.DotMenu-indicator_c4d68900 {
  display: block;
  height: 0.38rem;
  width: 0.38rem;
  position: relative;
  opacity: 0.3;
}
[dir] .DotMenu-indicator_c4d68900 {
  background-color: var(--theme-custom-color-primary-text);
  border-radius: 50%;
}
.DotMenu-active_4afb9b9b .DotMenu-indicator_c4d68900 {
    opacity: 1;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.MobileSlider-horizontalScrollWrapper_63f80d00 {
  position: relative;
  width: 100%;
}
[dir] .MobileSlider-horizontalScrollWrapper_63f80d00 {
  margin-bottom: 1.25rem;
}
[dir=ltr] .MobileSlider-horizontalScrollWrapper_63f80d00 {
 padding-left: calc(100vw / 25 * 2);
 padding-right: calc(100vw / 25 * 2);
}
[dir=rtl] .MobileSlider-horizontalScrollWrapper_63f80d00 {
  padding-right: calc(100vw / 25 * 2);
  padding-left: calc(100vw / 25 * 2);
}
.MobileSlider-horizontalScroll_2d097de2 {
  width: calc((100vw * 3));
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ReviewStars-component_23de754a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

  -webkit-justify-content: left;

      -ms-flex-pack: left;

          justify-content: left;
  list-style: none;
}
[dir] .ReviewStars-component_23de754a {
  padding: 0;
  margin: 0;
}
.ReviewStars-star_84c7614c {
  width: 0.81rem;
  height: 0.81rem;
  opacity: 0.2;
}
.ReviewStars-star_84c7614c path {
    fill: var(--theme-custom-color-primary-text);
  }
.ReviewStars-star_84c7614c.ReviewStars-full_7b5b96c6 {
    opacity: 1;
  }
.ReviewStars-star_84c7614c.ReviewStars-half_7d8a5e91 {
    opacity: 1;
  }
.ReviewStars-star_84c7614c.ReviewStars-half_7d8a5e91 path.bg {
      opacity: 0.2;
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ReviewCard-component_b9e6d615 {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 100%;
  font-size: 1rem;
  line-height: normal
}
[dir] .ReviewCard-component_b9e6d615 {
  background-color: var(--theme-custom-color-primary);
  padding: 2rem 1.5rem
}
@media (min-width: 768px) {
.ReviewCard-component_b9e6d615 {
    -webkit-user-select: auto;
       -moz-user-select: auto;
        -ms-user-select: auto;
            user-select: auto
}
  }
.ReviewCard-component_b9e6d615::before {
    -o-transition: background-color 125ms ease-in-out;
    transition: background-color 125ms ease-in-out;
    position: absolute;
    top: 0;
    bottom: 0;

    content: '';
    opacity: 0;
  }
[dir] .ReviewCard-component_b9e6d615::before {
    -webkit-transition: background-color 125ms ease-in-out;
    background-color: #fff;
  }
[dir=ltr] .ReviewCard-component_b9e6d615::before {
 left: 0;
 right: 0;
  }
[dir=rtl] .ReviewCard-component_b9e6d615::before {
    right: 0;
    left: 0;
  }
.ReviewCard-component_b9e6d615:hover::before {
    opacity: 0.05;
  }
.ReviewCard-header_dc26d77a {
  position: relative
}
[dir] .ReviewCard-header_dc26d77a {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem
}
.ReviewCard-header_dc26d77a::after {
    position: absolute;
    top: 0;
    bottom: 0;

    top: auto;
    content: '';
    opacity: 0.1;
  }
[dir] .ReviewCard-header_dc26d77a::after {
    border-bottom: 0.06rem solid var(--theme-custom-color-primary-text);
    border-bottom: 1px solid var(--theme-custom-color-primary-text);
  }
[dir=ltr] .ReviewCard-header_dc26d77a::after {
 left: 0;
 right: 0;
  }
[dir=rtl] .ReviewCard-header_dc26d77a::after {
    right: 0;
    left: 0;
  }
.ReviewCard-title_d8efd5f5,
.ReviewCard-subtitle_6c650c55 {
  white-space: nowrap;
  overflow: hidden;
}
[dir] .ReviewCard-title_d8efd5f5, [dir] .ReviewCard-subtitle_6c650c55 {
  margin: 0;
}
.ReviewCard-subtitle_6c650c55.ReviewCard-hidden_863ed61d {
  visibility: hidden;
}
.ReviewCard-title_d8efd5f5,
.ReviewCard-textScore_b95bdfa4 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  color: var(--theme-custom-color-primary-text);
}
.ReviewCard-subtitle_6c650c55,
.ReviewCard-desc_4e36e89e {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: var(--theme-custom-color-primary-body-text);
}
[dir] .ReviewCard-main_0c660208 {
  padding-bottom: 1.88rem;
}
[dir] .ReviewCard-textScore_b95bdfa4 {
  margin-bottom: 0.5rem;
}
.ReviewCard-desc_4e36e89e {
  word-wrap: break-word;
}
[dir] .ReviewCard-desc_4e36e89e {
  margin: 0 0 0.5rem;
}
.ReviewCard-link_a8b2ef2c {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.625;
  font-size: 0.69rem;
  letter-spacing: 0.03rem;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 2rem;
  top: auto;
  opacity: 0.6;
  text-transform: uppercase;
  color: var(--theme-custom-color-primary-text);
}
[dir] .ReviewCard-link_a8b2ef2c {
  -webkit-transition: opacity 125ms ease-in-out;
}
[dir=ltr] .ReviewCard-link_a8b2ef2c {
 left: 1.5rem;
 right: 1.5rem;
}
[dir=rtl] .ReviewCard-link_a8b2ef2c {
  right: 1.5rem;
  left: 1.5rem;
}
.ReviewCard-component_b9e6d615:hover .ReviewCard-link_a8b2ef2c {
    opacity: 1;
  }
.ReviewCard-component_b9e6d615:hover .ReviewCard-link_a8b2ef2c .ReviewCard-linkIcon_37602acf {
      opacity: 0.6;
    }
.ReviewCard-linkIcon_37602acf {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  display: block;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0;
}
[dir] .ReviewCard-linkIcon_37602acf {
  -webkit-transition: opacity 125ms ease-in-out;
}
[dir=ltr] .ReviewCard-linkIcon_37602acf {
 margin-left: 0.5rem;
}
[dir=rtl] .ReviewCard-linkIcon_37602acf {
  margin-right: 0.5rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Metrics-container_e0833ee1 {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--theme-custom-color-primary-text)
}
.Metrics-container_e0833ee1.Metrics-isMobile_4741894a {
    display: block;
    position: relative;
  }
[dir] .Metrics-container_e0833ee1.Metrics-isMobile_4741894a {
    padding-top: 1.75rem;
  }
[dir] .Metrics-container_e0833ee1.Metrics-isLarge_5aaa4a22 {
    padding-top: 2.69rem;
  }
.Metrics-cardContainer_36078d4d {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 9.38rem;
  min-width: 4.69rem
}
[dir] .Metrics-cardContainer_36078d4d {
  text-align: center;
  margin-bottom: 1.75rem
}
[dir=ltr] .Metrics-cardContainer_36078d4d {
 margin-right: 0.63rem;
 margin-left: 0.63rem
}
[dir=rtl] .Metrics-cardContainer_36078d4d {
  margin-left: 0.63rem;
  margin-right: 0.63rem
}
[dir=ltr] .Metrics-cardContainer_36078d4d:first-child {
 margin-left: 0;
  }
[dir=rtl] .Metrics-cardContainer_36078d4d:first-child {
    margin-right: 0;
  }
[dir=ltr] .Metrics-cardContainer_36078d4d:last-child {
 margin-right: 0;
  }
[dir=rtl] .Metrics-cardContainer_36078d4d:last-child {
    margin-left: 0;
  }
.Metrics-cardContainer_36078d4d.Metrics-isMobile_4741894a {
    display: inline-block;
    max-width: calc(33% - 1.25rem);
  }
.Metrics-viewAllLink_cd2ac49b {
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: auto
}
[dir] .Metrics-viewAllLink_cd2ac49b {
  margin-top: auto;
  padding-bottom: 1.75rem
}
.Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
    display: inline-block;
    position: absolute;
    top: -2.06rem
  }
[dir] .Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
    padding-bottom: 0
  }
[dir=ltr] .Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
 right: 0
  }
[dir=rtl] .Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
    left: 0
  }
@media (max-width: 767px) {
[dir=ltr] .Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
  padding-right: calc(100vw / 25 * 2) !important;
  padding-left: calc(100vw / 25 * 2) !important
  }
[dir=rtl] .Metrics-viewAllLink_cd2ac49b.Metrics-isMobile_4741894a {
      padding-left: calc(100vw / 25 * 2) !important;
      padding-right: calc(100vw / 25 * 2) !important
  }
    }
.Metrics-viewAllLink_cd2ac49b.Metrics-isLarge_5aaa4a22 {
    top: 0;
  }
.Metrics-metricsWrapper_f5ee1bb9 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0;
          flex: 1 1;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start
}
@media (max-width: 767px) {
.Metrics-metricsWrapper_f5ee1bb9 {

    -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

            justify-content: space-between
}
[dir=ltr] .Metrics-metricsWrapper_f5ee1bb9 {
  padding-right: calc(100vw / 25 * 2) !important;
  padding-left: calc(100vw / 25 * 2) !important
}
[dir=rtl] .Metrics-metricsWrapper_f5ee1bb9 {
    padding-left: calc(100vw / 25 * 2) !important;
    padding-right: calc(100vw / 25 * 2) !important
}
  }
.Metrics-metricsWrapper_f5ee1bb9.Metrics-isMobile_4741894a {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

.MetricCard-container_cc6049c5 {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 9.38rem;
  min-width: 4.69rem
}[dir] .MetricCard-container_cc6049c5 {
  text-align: center;
  margin-bottom: 1.75rem
}[dir=ltr] .MetricCard-container_cc6049c5 {
  margin-right: 0.63rem;
  margin-left: 0.63rem
}[dir=rtl] .MetricCard-container_cc6049c5 {
  margin-left: 0.63rem;
  margin-right: 0.63rem
}

.MetricCard-container_cc6049c5.MetricCard-isMobile_3b1eb8be {
    display: inline-block;
    max-width: calc(33% - 1.25rem);
  }

.MetricCard-title_0ac72fc6 {
  font-size: 1rem;
  line-height: normal;
}

[dir] .MetricCard-title_0ac72fc6 {
  margin-top: 0.63rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CircularProgressBar-container_76bd8aae {
  height: 4.69rem;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .CircularProgressBar-container_76bd8aae {
  text-align: center;
}
.CircularProgressBar-svg_e38f4ce3 {
  display: block;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
}
[dir] .CircularProgressBar-svg_e38f4ce3 {
          transform-origin: 50% 50%;
}
[dir=ltr] .CircularProgressBar-svg_e38f4ce3 {
 -webkit-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
[dir=rtl] .CircularProgressBar-svg_e38f4ce3 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.CircularProgressBar-svg_e38f4ce3 .CircularProgressBar-bg_9b2feb27 {
    fill: none;
    stroke: var(--theme-custom-color-primary);
  }
.CircularProgressBar-svg_e38f4ce3 .CircularProgressBar-fg_3504869b {
    fill: none;
    stroke: var(--theme-custom-color-accent);
  }
[dir=rtl] .CircularProgressBar-svg_e38f4ce3 {
    -webkit-transform: rotate(90deg) scaleX(-1);
        -ms-transform: rotate(90deg) scaleX(-1);
            transform: rotate(90deg) scaleX(-1);
  }
.CircularProgressBar-label_3deb2f27 {
  font-size: 1rem;
  line-height: normal;
  position: absolute;
  top: 50%;
}
[dir] .CircularProgressBar-label_3deb2f27 {
  text-align: center;
}
[dir=ltr] .CircularProgressBar-label_3deb2f27 {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}
[dir=rtl] .CircularProgressBar-label_3deb2f27 {
  right: 50%;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductCriticsReviews-component_1242dc93 {
  position: relative
}
[dir] .ProductCriticsReviews-component_1242dc93 {
  padding-bottom: 1.25rem
}
@media (max-width: 767px) {
[dir=ltr] .ProductCriticsReviews-component_1242dc93 {
  margin-right: calc(100vw / 25 * 2 * -1);
  margin-left: calc(100vw / 25 * 2 * -1)
}
[dir=rtl] .ProductCriticsReviews-component_1242dc93 {
    margin-left: calc(100vw / 25 * 2 * -1);
    margin-right: calc(100vw / 25 * 2 * -1)
}
  }
@media (min-width: 768px) {
[dir] .ProductCriticsReviews-component_1242dc93 {
    padding-bottom: 0
}
  }
.ProductCriticsReviews-header_7b3bf25e {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .ProductCriticsReviews-header_7b3bf25e {
  margin-bottom: 1.75rem
}
@media (max-width: 767px) {
[dir=ltr] .ProductCriticsReviews-header_7b3bf25e {
  padding-right: calc(100vw / 25 * 2) !important;
  padding-left: calc(100vw / 25 * 2) !important
}
[dir=rtl] .ProductCriticsReviews-header_7b3bf25e {
    padding-left: calc(100vw / 25 * 2) !important;
    padding-right: calc(100vw / 25 * 2) !important
}
  }
.ProductCriticsReviews-headerInner_b233e349 {
  -webkit-flex-grow: 2;
      -ms-flex-positive: 2;
          flex-grow: 2
}
[dir=ltr] .ProductCriticsReviews-headerInner_b233e349 {
 margin-left: 1.25rem
}
[dir=rtl] .ProductCriticsReviews-headerInner_b233e349 {
  margin-right: 1.25rem
}
@media (min-width: 768px) {
.ProductCriticsReviews-headerInner_b233e349 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between
}
  }
[dir=rtl] .ProductCriticsReviews-headerInner_b233e349 {
    margin-left: 0;
  }
.ProductCriticsReviews-title_07a4ac87 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  color: var(--theme-custom-color-primary-text);
}
[dir] .ProductCriticsReviews-title_07a4ac87 {

  margin: 0 0 0.25rem;
}
.ProductCriticsReviews-link_b1c86a9c {
  font-size: 1rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--theme-custom-color-primary-text)
}
.ProductCriticsReviews-link_b1c86a9c:hover {
    opacity: 1;
    text-decoration: underline;
  }
.ProductCriticsReviews-linkIcon_6b8d78c0 {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}
[dir=ltr] .ProductCriticsReviews-linkIcon_6b8d78c0 {
 margin-left: 0.5rem;
}
[dir=rtl] .ProductCriticsReviews-linkIcon_6b8d78c0 {
  margin-right: 0.5rem;
}
.ProductCriticsReviews-footer_50d39846 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
}
@media (max-width: 767px) {
[dir=ltr] .ProductCriticsReviews-footer_50d39846 {
  padding-right: calc(100vw / 25 * 2) !important;
  padding-left: calc(100vw / 25 * 2) !important;
}
[dir=rtl] .ProductCriticsReviews-footer_50d39846 {
    padding-left: calc(100vw / 25 * 2) !important;
    padding-right: calc(100vw / 25 * 2) !important;
}
  }
.ProductCriticsReviews-footer_50d39846 {

  color: var(--theme-custom-color-primary-body-text);
}
.ProductCriticsReviews-reviewCardGrid_1b4177de {
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap
}
@media (max-width: 767px) {
[dir=ltr] .ProductCriticsReviews-reviewCardGrid_1b4177de {
  padding-right: calc(100vw / 25 * 4)
}
[dir=rtl] .ProductCriticsReviews-reviewCardGrid_1b4177de {
    padding-left: calc(100vw / 25 * 4)
}
  }
@media (min-width: 768px) {
[dir] .ProductCriticsReviews-reviewCardGrid_1b4177de {
    margin-bottom: 1.25rem
}
  }
.ProductCriticsReviews-reviewCard_ef17dd80 {
  -webkit-flex-basis: calc(100% / 3.3);
      -ms-flex-preferred-size: calc(100% / 3.3);
          flex-basis: calc(100% / 3.3)
}
[dir] .ProductCriticsReviews-reviewCard_ef17dd80 {
  padding-bottom: 0
}
@media (min-width: 768px) {
.ProductCriticsReviews-reviewCard_ef17dd80 {
    -webkit-flex-basis: calc(100% / 3);
        -ms-flex-preferred-size: calc(100% / 3);
            flex-basis: calc(100% / 3);
    width: calc(100% / 3)
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductCriticsReviews-reviewCard_ef17dd80 {
    -webkit-flex-basis: calc(100% / 2);
        -ms-flex-preferred-size: calc(100% / 2);
            flex-basis: calc(100% / 2);
    width: calc(100% / 2)
}
  }
.ProductCriticsReviews-dotMenu_957d6a27 {
  position: absolute;
  bottom: -1.25rem;
  width: 100%;
}
.ProductCriticsReviews-mobileSliderWrapper_6935aa40 {
  display: block;
  overflow: hidden;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SocialLinks-logos_7a716872 {
  pointer-events: none;

  list-style-type: none
}
[dir] .SocialLinks-logos_7a716872 {
  text-align: center;

  margin: 0;

  padding: 0
}
.SocialLinks-logos_7a716872:not(:hover) .SocialLinks-logo_78bb8dd6 {
    opacity: 1;
  }
@media (max-width: 767px) {
.SocialLinks-logos_7a716872[data-total-items="5"],
.SocialLinks-logos_7a716872[data-total-items="6"] {
    -webkit-flex-basis: calc((2.25rem + (0.63rem * 2)) * 3);
        -ms-flex-preferred-size: calc((2.25rem + (0.63rem * 2)) * 3);
            flex-basis: calc((2.25rem + (0.63rem * 2)) * 3)
}
  }
@media (max-width: 767px) and (min-width: 768px) {
.SocialLinks-logos_7a716872[data-total-items="5"],
.SocialLinks-logos_7a716872[data-total-items="6"] {
    -webkit-flex-basis: calc((2.25rem + (1.25rem * 2)) * 3);
        -ms-flex-preferred-size: calc((2.25rem + (1.25rem * 2)) * 3);
            flex-basis: calc((2.25rem + (1.25rem * 2)) * 3)
}
  }
@media (max-width: 767px) and (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logos_7a716872[data-total-items="5"],
.SocialLinks-logos_7a716872[data-total-items="6"] {
    -webkit-flex-basis: calc((1.88rem + (1.25rem * 2)) * 3);
        -ms-flex-preferred-size: calc((1.88rem + (1.25rem * 2)) * 3);
            flex-basis: calc((1.88rem + (1.25rem * 2)) * 3)
}
  }
.SocialLinks-logos_7a716872[data-total-items="7"],
.SocialLinks-logos_7a716872[data-total-items="8"] {
  -webkit-flex-basis: calc((2.25rem + (0.63rem * 2)) * 4);
      -ms-flex-preferred-size: calc((2.25rem + (0.63rem * 2)) * 4);
          flex-basis: calc((2.25rem + (0.63rem * 2)) * 4);
}
@media (min-width: 768px) {
.SocialLinks-logos_7a716872[data-total-items="7"],
.SocialLinks-logos_7a716872[data-total-items="8"] {
    -webkit-flex-basis: calc((2.25rem + (1.25rem * 2)) * 4);
        -ms-flex-preferred-size: calc((2.25rem + (1.25rem * 2)) * 4);
            flex-basis: calc((2.25rem + (1.25rem * 2)) * 4);
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logos_7a716872[data-total-items="7"],
.SocialLinks-logos_7a716872[data-total-items="8"] {
    -webkit-flex-basis: calc((1.88rem + (1.25rem * 2)) * 4);
        -ms-flex-preferred-size: calc((1.88rem + (1.25rem * 2)) * 4);
            flex-basis: calc((1.88rem + (1.25rem * 2)) * 4);
}
  }
.SocialLinks-logos_7a716872[data-total-items="9"],
.SocialLinks-logos_7a716872[data-total-items="10"] {
  -webkit-flex-basis: calc((2.25rem + (0.63rem * 2)) * 5);
      -ms-flex-preferred-size: calc((2.25rem + (0.63rem * 2)) * 5);
          flex-basis: calc((2.25rem + (0.63rem * 2)) * 5);
}
@media (min-width: 768px) {
.SocialLinks-logos_7a716872[data-total-items="9"],
.SocialLinks-logos_7a716872[data-total-items="10"] {
    -webkit-flex-basis: calc((2.25rem + (1.25rem * 2)) * 5);
        -ms-flex-preferred-size: calc((2.25rem + (1.25rem * 2)) * 5);
            flex-basis: calc((2.25rem + (1.25rem * 2)) * 5);
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logos_7a716872[data-total-items="9"],
.SocialLinks-logos_7a716872[data-total-items="10"] {
    -webkit-flex-basis: calc((1.88rem + (1.25rem * 2)) * 5);
        -ms-flex-preferred-size: calc((1.88rem + (1.25rem * 2)) * 5);
            flex-basis: calc((1.88rem + (1.25rem * 2)) * 5);
}
  }
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
  -webkit-flex-basis: calc((2.25rem + (0.63rem * 2)) * 4);
      -ms-flex-preferred-size: calc((2.25rem + (0.63rem * 2)) * 4);
          flex-basis: calc((2.25rem + (0.63rem * 2)) * 4)
}
@media (min-width: 768px) {
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
    -webkit-flex-basis: calc((2.25rem + (1.25rem * 2)) * 4);
        -ms-flex-preferred-size: calc((2.25rem + (1.25rem * 2)) * 4);
            flex-basis: calc((2.25rem + (1.25rem * 2)) * 4)
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
    -webkit-flex-basis: calc((1.88rem + (1.25rem * 2)) * 4);
        -ms-flex-preferred-size: calc((1.88rem + (1.25rem * 2)) * 4);
            flex-basis: calc((1.88rem + (1.25rem * 2)) * 4)
}
  }
@media (min-width: 1024px) {
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
    -webkit-flex-basis: calc((2.25rem + (0.63rem * 2)) * 6);
        -ms-flex-preferred-size: calc((2.25rem + (0.63rem * 2)) * 6);
            flex-basis: calc((2.25rem + (0.63rem * 2)) * 6)
}
  }
@media (min-width: 1024px) and (min-width: 768px) {
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
    -webkit-flex-basis: calc((2.25rem + (1.25rem * 2)) * 6);
        -ms-flex-preferred-size: calc((2.25rem + (1.25rem * 2)) * 6);
            flex-basis: calc((2.25rem + (1.25rem * 2)) * 6)
}
  }
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logos_7a716872[data-total-items="11"],
.SocialLinks-logos_7a716872[data-total-items="12"] {
    -webkit-flex-basis: calc((1.88rem + (1.25rem * 2)) * 6);
        -ms-flex-preferred-size: calc((1.88rem + (1.25rem * 2)) * 6);
            flex-basis: calc((1.88rem + (1.25rem * 2)) * 6)
}
  }
.SocialLinks-logo_78bb8dd6 {
  -o-transition: all 125ms ease-in-out;
  transition: all 125ms ease-in-out;

  pointer-events: initial;
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem
}
[dir] .SocialLinks-logo_78bb8dd6 {
  -webkit-transition: all 125ms ease-in-out;
  margin: 0.63rem 0.63rem
}
@media (min-width: 768px) {
[dir] .SocialLinks-logo_78bb8dd6 {
    margin: 0.63rem 1.25rem
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.SocialLinks-logo_78bb8dd6 {
    width: 1.88rem;
    height: 1.88rem
}
  }
@media (hover: hover) {
    .SocialLinks-logo_78bb8dd6:hover {
      -webkit-transform: translateY(-0.06rem);
          -ms-transform: translateY(-0.06rem);
    }
    [dir] .SocialLinks-logo_78bb8dd6:hover {
              transform: translateY(-0.06rem);
    }

    .SocialLinks-logo_78bb8dd6:not(:hover) {
      opacity: 0.35;
    }
  }
.SocialLinks-logoLink_ef40a0c4 {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;
  display: inline-block;
  outline: 0;
}
[dir] .SocialLinks-logoLink_ef40a0c4 {
  -webkit-transition: opacity 125ms ease-in-out;
}
.SocialLinks-logoLink_ef40a0c4::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    min-width: 3.75rem;
    min-height: 3.75rem;
    position: absolute;
    top: 50%;
  }
[dir] .SocialLinks-logoLink_ef40a0c4::before {
    border: 1Px solid transparent;
  }
[dir=ltr] .SocialLinks-logoLink_ef40a0c4::before {
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  }
[dir=rtl] .SocialLinks-logoLink_ef40a0c4::before {
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
  }
.SocialLinks-logoLink_ef40a0c4:focus::before {
    /* This media query makes it so the focus state only displays for desktop */
  }
@media (hover: hover) {
.SocialLinks-logoLink_ef40a0c4:focus::before {
      outline: 0;
      opacity: 0.25
  }
[dir] .SocialLinks-logoLink_ef40a0c4:focus::before {
      border-color: var(--theme-custom-color-primary-text)
  }
    }
.SocialLinks-logoLink_ef40a0c4 {

  color: var(--theme-custom-color-primary-text);
  position: relative;
  width: 100%;
  height: 100%;
}
[dir] .SocialLinks-logoLink_ef40a0c4 {
  padding: 0.31rem;
}
.SocialLinks-icon_cd6b6a7a {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.SocialLinks-icon_cd6b6a7a svg {
    width: auto;
    height: 1.25rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ProductCardPrice-price_d392bc0b {
  padding-top: 0.94rem;
  padding-bottom: 0.94rem;
}
.ProductCardPrice-priceWrapper_5db8d362 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
@media (min-width: 768px) {
.ProductCardPrice-priceWrapper_5db8d362 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end
}
  }
.ProductCardPrice-priceCaption_2070b4ee {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5
}
[dir] .ProductCardPrice-priceCaption_2070b4ee {

  margin-top: 0.5rem;
  text-align: center
}
@media (min-width: 768px) {
.ProductCardPrice-priceCaption_2070b4ee {
    width: 100%
}
  }
@media (min-width: 1024px) {
[dir=ltr] .ProductCardPrice-priceCaption_2070b4ee {
  text-align: right
}
[dir=rtl] .ProductCardPrice-priceCaption_2070b4ee {
    text-align: left
}
  }
@media (min-width: 1440px) {
.ProductCardPrice-priceCaption_2070b4ee {
    max-width: 14.38rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BundlesList-card_c3e44015 {
  color: var(--theme-custom-color-primary-text)
}
[dir] .BundlesList-card_c3e44015 {
  background-color: var(--theme-custom-color-primary)
}
[dir] .BundlesList-card_c3e44015:not(:last-child) {
    margin-bottom: 1.25rem;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.BundlesList-card_c3e44015 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.BundlesList-card_c3e44015 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019 {
    position: relative;
  }
.BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019::before {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
[dir] .BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019::before {
    -webkit-transition: opacity 125ms ease-in-out;
    background: var(--theme-custom-color-primary-highlight);
  }
[dir=ltr] .BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019::before {
 left: 0;
  }
[dir=rtl] .BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019::before {
    right: 0;
  }
.BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019:hover::before {
    opacity: 0.33;
  }
[dir] .BundlesList-card_c3e44015.BundlesList-hasLink_dcf27019 {

    cursor: pointer;
  }
.BundlesList-link_1ae6c582 {
  color: inherit;
  display: block;
}
.BundlesList-wishBtnContainer_5ff682bd {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.BundlesList-icon_656026df {
  width: 1rem;
}
.BundlesList-icon_656026df svg {
    width: 100%;
  }
.BundlesList-icon_656026df svg path {
      stroke: var(--theme-custom-color-accent-text);
    }
.BundlesList-icon_656026df.BundlesList-filledHeart_5b7b842c path, .BundlesList-icon_656026df.BundlesList-loading_dc31f609 path {
      fill: var(--theme-custom-color-accent-text);
    }
.BundlesList-tooltip_3ce7bbf3 {
  bottom: 1.75rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.BundlesList-tooltip_3ce7bbf3 {
    bottom: 1.25rem
}
  }
[dir] .BundlesList-tooltip_3ce7bbf3::after {
    border: none;
  }
[dir] .BundlesList-cards_e49d5792 {
  margin-bottom: 1.25rem;
}
[dir] .BundlesList-price_1d23912b {
  padding: 0
}
@media (min-width: 768px) {
[dir=ltr] .BundlesList-price_1d23912b {
  margin-right: 0.94rem
}
[dir=rtl] .BundlesList-price_1d23912b {
    margin-left: 0.94rem
}
  }
.BundlesList-priceSummaryCard_95ddacce {
  color: var(--theme-custom-color-primary-text)
}
[dir] .BundlesList-priceSummaryCard_95ddacce {
  background-color: var(--theme-custom-color-primary)
}
[dir] .BundlesList-priceSummaryCard_95ddacce:not(:last-child) {
    margin-bottom: 1.25rem;
  }
.BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019 {
    position: relative;
  }
.BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019::before {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
[dir] .BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019::before {
    -webkit-transition: opacity 125ms ease-in-out;
    background: var(--theme-custom-color-primary-highlight);
  }
[dir=ltr] .BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019::before {
 left: 0;
  }
[dir=rtl] .BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019::before {
    right: 0;
  }
.BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019:hover::before {
    opacity: 0.33;
  }
[dir] .BundlesList-priceSummaryCard_95ddacce.BundlesList-hasLink_dcf27019 {

    cursor: pointer;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.BundlesList-priceSummaryCard_95ddacce {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.BundlesList-priceSummaryCard_95ddacce {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.BundlesList-priceSummaryCard_95ddacce {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .BundlesList-priceSummaryCard_95ddacce {
  padding: 1.25rem
}
@media (min-width: 768px) {
.BundlesList-priceSummaryCard_95ddacce {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
[dir] .BundlesList-priceSummaryCard_95ddacce {
    padding: 2.5rem
}
  }
@media (min-width: 1024px) {
[dir] .BundlesList-priceSummaryCard_95ddacce {
    padding: 2.94rem
}
  }
.BundlesList-priceSummaryCard_95ddacce > h2 {
    width: 80%
  }
[dir] .BundlesList-priceSummaryCard_95ddacce > h2 {
    text-align: center;
    margin-bottom: 1.5rem
  }
@media (min-width: 768px) {

  .BundlesList-priceSummaryCard_95ddacce > h2 {
      width: 100%
  }

  [dir] .BundlesList-priceSummaryCard_95ddacce > h2 {
      margin-bottom: 0
  }

  [dir=ltr] .BundlesList-priceSummaryCard_95ddacce > h2 {
  text-align: left
  }

  [dir=rtl] .BundlesList-priceSummaryCard_95ddacce > h2 {
      text-align: right
  }
    }
.BundlesList-bottomRowContent_1dcaab54 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
@media (min-width: 768px) {
.BundlesList-bottomRowContent_1dcaab54 {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
.BundlesList-ctaWrapper_35e2e4cc {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
@media (max-width: 575px) {
.BundlesList-ctaWrapper_35e2e4cc {
    width: 100%
}
  }
@media (max-width: 767px) {
.BundlesList-button_41a90873 {
    width: 100%;
}
  }
.BundlesList-button_41a90873 {

  min-width: 6.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.BundlesList-button_41a90873 span {
    width: 12em;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
  }
[dir] .BundlesList-button_41a90873 span {
    margin: auto;
  }
[dir=ltr] .BundlesList-wishButton_859d0c87 {
 margin-left: 1Px;
}
[dir=rtl] .BundlesList-wishButton_859d0c87 {
  margin-right: 1Px;
}
button.BundlesList-wishButton_859d0c87 {
  min-width: auto;
  /* using padding here to force square button rather then rectangle used in PDP description */
}
[dir] button.BundlesList-wishButton_859d0c87 {
  padding: 0 1rem;
}
@media (min-width: 1024px) {
[dir] button.BundlesList-wishButton_859d0c87 {
    padding: 0 0.75rem;
}
  }
@media (min-width: 1280px) {
[dir] button.BundlesList-wishButton_859d0c87 {
    padding: 0 1.06rem;
}
  }
@media (min-width: 1440px) {
[dir] button.BundlesList-wishButton_859d0c87 {
    padding: 0 1.06rem;
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ViewOffersButton-button_1c1f9678 {
  -o-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  transition: color 125ms ease-in-out, background-color 125ms ease-in-out;
  color: var(--theme-custom-color-primary-text)
}
[dir] .ViewOffersButton-button_1c1f9678 {
  -webkit-transition: color 125ms ease-in-out, background-color 125ms ease-in-out;

  background-color: var(--theme-custom-color-primary-bg);
  border: 0.06rem solid var(--theme-custom-color-accent);
  border: 1px solid var(--theme-custom-color-accent)
}
@media (min-width: 576px) {
    .ViewOffersButton-button_1c1f9678:hover {
      color: var(--theme-custom-color-accent-text);
    }
    [dir] .ViewOffersButton-button_1c1f9678:hover {
      border: 0.06rem solid var(--theme-custom-color-accent-hover);
      border: 1px solid var(--theme-custom-color-accent-hover);
      background-color: var(--theme-custom-color-accent-hover);
    }
  }
.ViewOffersButton-button_1c1f9678:focus {
    color: var(--theme-custom-color-accent-text);
  }
[dir] .ViewOffersButton-button_1c1f9678:focus {
    border: 0.06rem solid var(--theme-custom-color-accent-hover);
    border: 1px solid var(--theme-custom-color-accent-hover);
    background-color: var(--theme-custom-color-accent-hover);
  }
@media (max-width: 1023px) {
.ViewOffersButton-button_1c1f9678 {
    width: 100%
}
  }
@media (max-width: 1023px) {
.ViewOffersButton-link_75f96433 {
    display: inline-block;
    width: 100%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.styles-container_d3f6e5d7 {
  color: var(--theme-custom-color-accent-text);
  font-size: 0.75rem;
  line-height: 1.13rem;
}
[dir] .styles-container_d3f6e5d7 {
  padding: 1.06rem 1.25rem;
  background-color: var(--theme-custom-color-accent);
  margin: 0 0 1.25rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Description-container_e209ace2 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
@media (min-width: 1024px) {
.Description-container_e209ace2 {
    width: calc(((100vw - 1.25rem) * (14 / 18)) - 1.25rem);

    -webkit-flex-wrap: no-wrap;

        -ms-flex-wrap: no-wrap;

            flex-wrap: no-wrap
}
  }
@media (min-width: 1280px) {
.Description-container_e209ace2 {
    width: calc(((100vw - 1.88rem) * (14 / 18)) - 1.88rem)
}
  }
.Description-imageContainer_6c6b30d4 {
  -webkit-order: -1;
      -ms-flex-order: -1;
          order: -1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: calc(100vw * 9 / 16)
}
[dir] .Description-imageContainer_6c6b30d4 {
  background-color: var(--theme-custom-color-primary)
}
@media (max-width: 767px) {
[dir] .Description-imageContainer_6c6b30d4 {
    margin-bottom: 0.63rem
}
  }
@media (min-width: 768px) {
.Description-imageContainer_6c6b30d4 {
    width: calc(((100vw - -1.25rem) * (3 / 10)) - 1.25rem);
    height: calc((((100vw - -1.25rem) * (3 / 10)) - 1.25rem) * 9 / 16);

    -webkit-order: 0;

        -ms-flex-order: 0;

            order: 0;
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start
}
  }
@media (min-width: 1024px) {
.Description-imageContainer_6c6b30d4 {
    width: calc(((100vw - 1.25rem) * (4 / 18)) - 1.25rem);
    height: calc((((100vw - 1.25rem) * (4 / 18)) - 1.25rem) * 9 / 16)
}
  }
@media (min-width: 1280px) {
.Description-imageContainer_6c6b30d4 {
    width: calc(((100vw - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100vw - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
@media (min-width: 1600px) {
.Description-imageContainer_6c6b30d4 {
    width: calc(((100rem - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100rem - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
.Description-description_d5e1164a,
.Description-ctaWrapper_e8d00c38 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative
}
.Description-description_d5e1164a::after, .Description-ctaWrapper_e8d00c38::after {
    content: '';
    position: absolute;
    height: 1Px;
    width: 100%;

    bottom: 0
  }
[dir] .Description-description_d5e1164a::after, [dir] .Description-ctaWrapper_e8d00c38::after {
    background: var(--theme-custom-color-primary-text)
  }
[dir=ltr] .Description-description_d5e1164a::after, [dir=ltr] .Description-ctaWrapper_e8d00c38::after {
 left: 0;
 right: 0
  }
[dir=rtl] .Description-description_d5e1164a::after, [dir=rtl] .Description-ctaWrapper_e8d00c38::after {
    right: 0;
    left: 0
  }
@media (max-width: 767px) {
.Description-description_d5e1164a::after, .Description-ctaWrapper_e8d00c38::after {
      z-index: -1
  }
    }
[dir] .Description-description_d5e1164a {
  margin: 0;
  padding: 3.13rem 1.25rem
}
@media (min-width: 576px) {
[dir] .Description-description_d5e1164a {
    padding: 3.13rem calc((100vw - -1.25rem) / 10)
}
  }
@media (min-width: 768px) {
.Description-description_d5e1164a {
    width: calc(100vw / 48 * 24)
}
[dir] .Description-description_d5e1164a {

    padding: 0 1.25rem
}
  }
@media (min-width: 1024px) {
.Description-description_d5e1164a {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1
}
  }
@media (min-width: 1280px) {
[dir] .Description-description_d5e1164a {
    padding: 0 1.88rem
}
  }
.Description-description_d5e1164a::after {
    opacity: 0
  }
@media (min-width: 1024px) {
.Description-description_d5e1164a::after {
      opacity: 0.1;
      width: calc(100% - 1.25rem)
  }
[dir=ltr] .Description-description_d5e1164a::after {
  left: 1.25rem
  }
[dir=rtl] .Description-description_d5e1164a::after {
      right: 1.25rem
  }
    }
@media (min-width: 1280px) {
.Description-description_d5e1164a::after {
      width: calc(100% - 1.88rem)
  }
[dir=ltr] .Description-description_d5e1164a::after {
  left: 1.88rem
  }
[dir=rtl] .Description-description_d5e1164a::after {
      right: 1.88rem
  }
    }
.Description-descriptionCopy_e59444cd {
  font-size: 1.13rem;
  letter-spacing: 0;
  line-height: 1.4;

  display: block;
  color: var(--theme-custom-color-primary-text)
}
@media (max-width: 767px) {
[dir] .Description-descriptionCopy_e59444cd {
    text-align: center
}
  }
@media (min-width: 768px) {
.Description-descriptionCopy_e59444cd {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1024px) {
.Description-descriptionCopy_e59444cd {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
@media (min-width: 1280px) {
.Description-descriptionCopy_e59444cd {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1440px) {
.Description-descriptionCopy_e59444cd {
    font-size: 1.13rem;
    letter-spacing: 0;
    line-height: 1.4
}
  }
@media (min-width: 1600px) {
.Description-descriptionCopy_e59444cd {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
.Description-description_d5e1164a em {
  font-style: normal;
  display: inline-block;
}
.Description-ctaWrapper_e8d00c38 {
  position: -webkit-sticky;
  position: sticky;
  bottom: calc(1.25rem * -1);
  width: 100%;
  z-index: 1
}
@media (min-width: 768px) {
.Description-ctaWrapper_e8d00c38 {
    position: relative;
    bottom: 0
}
[dir] .Description-ctaWrapper_e8d00c38 {
    padding-bottom: 1.88rem;
    margin: 0
}
  }
@media (min-width: 1024px) {
.Description-ctaWrapper_e8d00c38 {
    position: relative;
    width: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}
  }
.Description-ctaWrapper_e8d00c38::after {
    opacity: 0.1;
  }
.Description-ctaInner_aecbfaae {
  position: relative
}
[dir] .Description-ctaInner_aecbfaae {
  padding-top: 0.56rem;
  padding-bottom: calc(1.25rem * 2)
}
@media (min-width: 768px) {
[dir] .Description-ctaInner_aecbfaae {
    padding: 0
}
  }
.Description-overlay_e3e9d3f0 {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: -1;
}
[dir] .Description-overlay_e3e9d3f0 {
  background-image: -webkit-linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg-fade) 10%, var(--theme-custom-color-primary-bg) 30.5%);
  background-image: -o-linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg-fade) 10%, var(--theme-custom-color-primary-bg) 30.5%);
  background-image: linear-gradient(var(--theme-custom-color-primary-bg-transparent), var(--theme-custom-color-primary-bg-fade) 10%, var(--theme-custom-color-primary-bg) 30.5%);
}
[dir=ltr] .Description-overlay_e3e9d3f0 {
 left: 0;
 right: 0;
 background-image: -webkit-gradient(linear, left top, left bottom, from(var(--theme-custom-color-primary-bg-transparent)), color-stop(10%, var(--theme-custom-color-primary-bg-fade)), color-stop(30.5%, var(--theme-custom-color-primary-bg)));
}
[dir=rtl] .Description-overlay_e3e9d3f0 {
  right: 0;
  left: 0;
  background-image: -webkit-gradient(linear, right top, right bottom, from(var(--theme-custom-color-primary-bg-transparent)), color-stop(10%, var(--theme-custom-color-primary-bg-fade)), color-stop(30.5%, var(--theme-custom-color-primary-bg)));
}
/* IE fallback size and position */
.Description-fixed_2a7d3e67 .Description-overlay_e3e9d3f0 {
    display: block;
    width: 100%;
    height: calc(3.13rem + calc(1.25rem * 2) + 2.88rem);
    position: fixed;
    top: auto;
  }
@media (min-width: 768px) {
.Description-overlay_e3e9d3f0 {
    display: none
}
  }
.Description-cta_ffb11312 {
  width: calc(100% - (1.25rem * 2))
}
[dir] .Description-cta_ffb11312 {
  padding: 0 1.25rem;
  margin: 0 auto
}
@media (min-width: 576px) {
.Description-cta_ffb11312 {
    width: calc(((100vw - -1.25rem) * (8 / 10)) - 1.25rem)
}
[dir] .Description-cta_ffb11312 {

    padding: 0
}
  }
@media (min-width: 1024px) {
.Description-cta_ffb11312 {
    width: auto
}
[dir] .Description-cta_ffb11312 {
    margin: 0
}
  }
/* IE fallback size and position */
.Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
    position: fixed;
    bottom: 1.25rem;
    width: calc(100vw - (100vw / 25 * 4) - (1.25rem * 2))
  }
[dir] .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
    padding: 0
  }
[dir=ltr] .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
 left: calc((100vw / 25 * 2) + 1.25rem)
  }
[dir=rtl] .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
    right: calc((100vw / 25 * 2) + 1.25rem)
  }
@media (min-width: 576px) {
  .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {

      width: calc(((100vw - -1.25rem) * (8 / 10)) - 1.25rem)
  }
  [dir=ltr] .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
  left: calc((100vw - -1.25rem) / 10)
  }
  [dir=rtl] .Description-fixed_2a7d3e67 .Description-cta_ffb11312 {
      right: calc((100vw - -1.25rem) / 10)
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ModItem-imageContainer_3bceef49 {
  position: relative;
}
[dir] .ModItem-imageContainer_3bceef49 {
  padding-bottom: calc(4 / 3 * 100%);
}
.ModItem-imageContainer_3bceef49 .ModItem-inner_84283f1a {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.ModItem-imageContainer_3bceef49::after {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
[dir] .ModItem-imageContainer_3bceef49::after {
    -webkit-transition: opacity 125ms ease-in-out;
    background: #fff;
  }
[dir=ltr] .ModItem-imageContainer_3bceef49::after {
 left: 0;
  }
[dir=rtl] .ModItem-imageContainer_3bceef49::after {
    right: 0;
  }
.ModItem-imageContainer_3bceef49:hover::after {
    opacity: 0.1;
  }
[dir] .ModItem-imageContainer_3bceef49 {

  margin-bottom: 1rem;
}
.ModItem-wrapper_e47f38fb:hover .ModItem-imageContainer_3bceef49::after {
    opacity: 0.15;
  }
.ModItem-imageContainer_3bceef49 > div {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.ModItem-link_3e936c7e {
  outline: 0;
}
[dir] .ModItem-link_3e936c7e {
  border: 0 !important;
}
.ModItem-image_66a5327e {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: top;
}
[dir] .ModItem-image_66a5327e {
  background-color: var(--theme-ui-tertiary-bg);
}
.ModItem-title_11c42b46,
.ModItem-secondaryText_428d9f09 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.5;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--theme-custom-color-primary-text);
  text-decoration: none;
}
.ModItem-secondaryText_428d9f09 {
  opacity: 0.5;
}
.ModItem-createdBy_c7f1388f {
  line-height: 1.9;
}
[dir] .ModItem-createdBy_c7f1388f {
  margin: 0;
}
.ModItem-icon_bbad835d {
  width: 0.81rem;
  height: 0.81rem;
  opacity: 0.4;
  color: var(--theme-custom-color-primary-text);
}
[dir=ltr] .ModItem-icon_bbad835d {
 margin-right: 0.5rem;
}
[dir=rtl] .ModItem-icon_bbad835d {
  margin-left: 0.5rem;
}
.ModItem-iconActive_1e259b19 {
  color: var(--theme-custom-color-accent);
}
.ModItem-infoContainer_4798df5a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .ModItem-infoContainer_4798df5a {
  margin-top: 0.31rem;
}
.ModItem-infoItem_26148732 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir=ltr] .ModItem-infoItem_26148732 {
 margin-right: 1.13rem;
}
[dir=rtl] .ModItem-infoItem_26148732 {
  margin-left: 1.13rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ModsPage-container_55a27b34 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.ModsPage-gridWrapper_ef85229a {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
[dir] .ModsPage-gridWrapper_ef85229a {
  padding-bottom: 1.88rem;
  padding-top: 0.88rem;
}
.ModsPage-modPageFilter_e57837ef {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
[dir] .ModsPage-modPageFilter_e57837ef {
  margin: 0;
}
.ModsPage-modPageFilter_e57837ef button {
    color: var(--theme-custom-color-primary-text);
  }
@media (min-width: 1280px) {
[dir] .ModsPage-modPageFilter_e57837ef {
    padding-bottom: 0.94rem
}
  }
@media (min-width: 1024px) {
[dir=ltr] .ModsPage-modPageFilter_e57837ef {
  margin: 0 0 1.88rem 1.88rem
}
[dir=rtl] .ModsPage-modPageFilter_e57837ef {
    margin: 0 1.88rem 1.88rem 0
}
  }
.ModsPage-modPageFilter_e57837ef {

  /* Add theme backgrount to filter on the mod listing page */
}
[dir] .ModsPage-modPageFilter_e57837ef > div > div {
      background-color: var(--theme-custom-color-primary-bg);
    }
.ModsPage-sortNavigation_b56f3424 {
  height: auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .ModsPage-sortNavigation_b56f3424 {
  padding-top: 1.25rem
}
@media (min-width: 1024px) {
.ModsPage-sortNavigation_b56f3424 {
    height: 3.38rem;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
[dir] .ModsPage-sortNavigation_b56f3424 {
    margin-top: 0;
    padding-top: 0
}
  }
@media (min-width: 1280px) {
.ModsPage-sortNavigation_b56f3424 {
    height: 2.13rem
}
  }
[dir] .ModsPage-filterToggle_1af447f3 {
  border: solid 1Px transparent
}
.ModsPage-filterToggle_1af447f3:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .ModsPage-filterToggle_1af447f3:focus {
    border-color: #fff;
  }
.ModsPage-filterToggle_1af447f3 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  height: 2.5rem;
  min-width: 2.5rem;
  text-transform: none;
  font-weight: var(--font-regular);
  color: #fff;
}
[dir] .ModsPage-filterToggle_1af447f3 {

  background-color: transparent;
  padding: 0 1.25rem;
}
.ModsPage-filterToggle_1af447f3 > span {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ModsPage-filterToggle_1af447f3 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
.ModsPage-filterIcon_d1e6ecb7 {
  width: 0.88rem;
  display: inline-block;
}
[dir=ltr] .ModsPage-filterIcon_d1e6ecb7 {
 margin-left: 0.5rem;
}
[dir=rtl] .ModsPage-filterIcon_d1e6ecb7 {
  margin-right: 0.5rem;
}
.ModsPage-separator_dd6d8d77 {
  width: 100%;
  height: 0.06rem;
  opacity: 0.1;
}
[dir] .ModsPage-separator_dd6d8d77 {
  background-color: #fff;
  margin: 1em 0;
}
.ModsPage-label_8eb83551 {
  color: #fff;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 0.81rem;
}
/* TODO: create common Placeholder component to avoid such styles */
.ModsPage-modsPagePlaceholder_77d264cf > div {
    /* TODO Fix resetList style order issue:
     https://jira.it.epicgames.net/browse/OPP-10129
     https://jira.it.epicgames.net/browse/OPP-10515
     composes: resetList from global; */
    list-style-type: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap
  }
[dir] .ModsPage-modsPagePlaceholder_77d264cf > div {
    padding: 0;
    margin: 0 calc(1.25rem / -2)
  }
@media (min-width: 1280px) {
[dir] .ModsPage-modsPagePlaceholder_77d264cf > div {
    margin: 0 calc(1.25rem / -2)
  }
  }
[dir] .ModsPage-modsPagePlaceholder_77d264cf > div {

    margin: 0
  }
.ModsPage-modsPagePlaceholder_77d264cf > div > div {
      max-width: inherit;
    }
[dir] .ModsPage-modsPagePlaceholder_77d264cf > div > div {

      padding: calc(1.25rem / 2);
    }
@media (min-width: 1280px) {
[dir] .ModsPage-modsPagePlaceholder_77d264cf > div > div {
    padding: calc(1.25rem / 2);
    }
  }
.ModsPage-modsPagePlaceholder_77d264cf > div > div {

      -webkit-flex: 0 0 auto;

          -ms-flex: 0 0 auto;

              flex: 0 0 auto;

      width: calc(100% / 2);
    }
@media (min-width: 768px) {
.ModsPage-modsPagePlaceholder_77d264cf > div > div {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 3);
    }
  }
@media (min-width: 1024px) {
.ModsPage-modsPagePlaceholder_77d264cf > div > div {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 4);
    }
  }
@media (min-width: 1280px) {
.ModsPage-modsPagePlaceholder_77d264cf > div > div {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: calc(100% / 5);
    }
  }
.ModsPage-numMods_032404cf {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ModsPage-numMods_032404cf {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1024px) {
.ModsPage-numMods_032404cf {
    width: auto
}
[dir] .ModsPage-numMods_032404cf {
    margin: 0
}
  }
.ModsPage-numModsPlaceholder_17499c00 {
  display: block;
  height: 1.56rem;
  width: 4.38rem
}
[dir] .ModsPage-numModsPlaceholder_17499c00 {
  background-color: var(--theme-custom-color-primary)
}
@media (min-width: 768px) {
.ModsPage-numModsPlaceholder_17499c00 {
    height: 1.25rem
}
  }
.ModsPage-sortDropdown_90b2f90e {
  min-width: 9.38rem;
}
[dir=ltr] .ModsPage-sortDropdown_90b2f90e {
 margin-left: -0.31rem;
}
[dir=rtl] .ModsPage-sortDropdown_90b2f90e {
  margin-right: -0.31rem;
}
[dir] .ModsPage-sortDropdown_90b2f90e button {
    margin-bottom: 0
  }
@media (min-width: 1024px) and (max-width: 1279px) {

  .ModsPage-sortDropdown_90b2f90e button {
      font-size: 0.75rem;
      letter-spacing: 0.01rem;
      line-height: 1.5
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .Filters-focusTest_5ba77385:focus {
    border: solid 0.13rem red;
  }
.Filters-filters_24a3a1c7 {
  color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99999
}
[dir=ltr] .Filters-filters_24a3a1c7 {
 right: 0;
 left: 0
}
[dir=rtl] .Filters-filters_24a3a1c7 {
  left: 0;
  right: 0
}
.Filters-filters_24a3a1c7::before {
    position: fixed;
    top: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.7;
    z-index: 99999;
  }
[dir] .Filters-filters_24a3a1c7::before {
    background: #121212;
  }
[dir=ltr] .Filters-filters_24a3a1c7::before {
 left: 0;
 right: 0;
  }
[dir=rtl] .Filters-filters_24a3a1c7::before {
    right: 0;
    left: 0;
  }
.Filters-filters_24a3a1c7.Filters-expanded_4793c809 {
    overflow-y: scroll;
    pointer-events: auto;
  }
@media (min-width: 768px) and (max-width: 1023px) {
    .Filters-filters_24a3a1c7.Filters-expanded_4793c809::before {
      content: '';
      pointer-events: auto;
    }
  }
@media (min-width: 1024px) {
.Filters-filters_24a3a1c7 {
    position: relative;
    width: calc(100vw / 64 * 12);
    max-width: 15rem;
    pointer-events: auto;
    overflow-y: visible;
    z-index: auto
}

    .Filters-filters_24a3a1c7.Filters-expanded_4793c809 {
      overflow-y: visible;
    }
  }
@media (min-width: 1280px) {
.Filters-filters_24a3a1c7 {
    width: calc(100vw / 64 * 12)
}
  }
@media (min-width: 1440px) {
.Filters-filters_24a3a1c7 {
    width: calc(100vw / 72 * 12)
}
  }
@media (min-width: 1024px) {

  .isLauncher .Filters-filters_24a3a1c7 {
      width: calc(100vw / 64 * 12)
  }
    }
.Filters-filterPanelWrapper_6447c1f7 {
  width: 100%;
  height: 100%;
  position: absolute
}
@media (min-width: 1024px) {
.Filters-filterPanelWrapper_6447c1f7 {
    position: relative;
    height: auto
}
  }
.Filters-filterPanel_3c401b0d {
  position: absolute;
  top: 0;
  bottom: auto;
  min-height: 100vh;
  display: none;
  z-index: 100000;
  font-weight: var(--font-regular);
}
[dir] .Filters-filterPanel_3c401b0d {
  background-color: #121212;
  padding: 0 1.88rem;
}
[dir=ltr] .Filters-filterPanel_3c401b0d {
 right: 0;
 left: 0;
}
[dir=rtl] .Filters-filterPanel_3c401b0d {
  left: 0;
  right: 0;
}
.Filters-filters_24a3a1c7.Filters-expanded_4793c809 .Filters-filterPanel_3c401b0d {
    display: block;
  }
@media (min-width: 768px) {
[dir] .Filters-filterPanel_3c401b0d {
    background-color: #202020
}
[dir=ltr] .Filters-filterPanel_3c401b0d {
  left: calc(100% - 22rem)
}
[dir=rtl] .Filters-filterPanel_3c401b0d {
    right: calc(100% - 22rem)
}
  }
@media (min-width: 1024px) {
.Filters-filterPanel_3c401b0d {
    position: relative;
    display: block;
    width: 100%;
    min-height: auto;
    z-index: auto
}
[dir] .Filters-filterPanel_3c401b0d {
    padding: 0;
    background-color: #121212
}
[dir=ltr] .Filters-filterPanel_3c401b0d {
  left: 0
}
[dir=rtl] .Filters-filterPanel_3c401b0d {
    right: 0
}
  }
@media (min-width: 1024px) {

  [dir] .isLauncher .Filters-filterPanel_3c401b0d {
      padding: 0
  }
    }
.Filters-header_b5122b41 {
  position: relative
}
.Filters-header_b5122b41::after {
    content: '';
    position: absolute;
    height: 1Px;
    bottom: 0;
  }
[dir] .Filters-header_b5122b41::after {
    background-color: rgba(255, 255, 255, 0.1);
  }
[dir=ltr] .Filters-header_b5122b41::after {
 left: calc(-1 * 1.88rem);
 right: calc(-1 * 1.88rem);
  }
[dir=rtl] .Filters-header_b5122b41::after {
    right: calc(-1 * 1.88rem);
    left: calc(-1 * 1.88rem);
  }
@media (min-width: 1024px) {
    [dir=ltr] .Filters-header_b5122b41::after {
  left: 0;
  right: 0;
    }
    [dir=rtl] .Filters-header_b5122b41::after {
      right: 0;
      left: 0;
    }
  }
.Filters-header_b5122b41 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 5rem
}
@media (min-width: 768px) and (max-width: 1023px) {
.Filters-header_b5122b41 {
    height: 6.25rem
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.Filters-header_b5122b41 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.Filters-header_b5122b41 {
    height: 3.75rem
}
  }
[dir] .Filters-resetButton_d49f4e12 {
  border: solid 1Px transparent
}
.Filters-resetButton_d49f4e12:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-resetButton_d49f4e12:focus {
    border-color: #fff;
  }
.Filters-resetButton_d49f4e12 {
  opacity: 0.6;
  font-weight: 500
}
[dir] .Filters-resetButton_d49f4e12 {

  background: transparent
}
[dir=ltr] .Filters-resetButton_d49f4e12 {
 margin-right: -1.25rem
}
[dir=rtl] .Filters-resetButton_d49f4e12 {
  margin-left: -1.25rem
}
.Filters-resetButton_d49f4e12:hover {
    opacity: 1;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.Filters-resetButton_d49f4e12 {
    font-size: 9Px
}
  }
.Filters-filterGroups_29c829c1 {
}
[dir] .Filters-filterGroups_29c829c1 {
  margin-bottom: 6.13rem
}
@media (min-width: 1024px) {
[dir] .Filters-filterGroups_29c829c1 {
    margin: 0
}
  }
.Filters-filterGroup_92f327bb {
  position: relative;
}
.Filters-filterGroup_92f327bb::after {
    content: '';
    position: absolute;
    height: 1Px;
    bottom: 0;
  }
[dir] .Filters-filterGroup_92f327bb::after {
    background-color: rgba(255, 255, 255, 0.1);
  }
[dir=ltr] .Filters-filterGroup_92f327bb::after {
 left: calc(-1 * 1.88rem);
 right: calc(-1 * 1.88rem);
  }
[dir=rtl] .Filters-filterGroup_92f327bb::after {
    right: calc(-1 * 1.88rem);
    left: calc(-1 * 1.88rem);
  }
@media (min-width: 1024px) {
    [dir=ltr] .Filters-filterGroup_92f327bb::after {
  left: 0;
  right: 0;
    }
    [dir=rtl] .Filters-filterGroup_92f327bb::after {
      right: 0;
      left: 0;
    }
  }
.Filters-filterGroup_92f327bb {
}
[dir] .Filters-filterGroup_92f327bb {
  padding: 0.63rem 0;
}
[dir] .Filters-groupHeader_de15d127 {
  border: solid 1Px transparent;
}
.Filters-groupHeader_de15d127:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-groupHeader_de15d127:focus {
    border-color: #fff;
  }
[dir] .Filters-expandButton_ace0e484 {
  border: solid 1Px transparent
}
.Filters-expandButton_ace0e484:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-expandButton_ace0e484:focus {
    border-color: #fff;
  }
.Filters-expandButton_ace0e484 {
  height: auto;
  width: calc(100% + 1.75rem)
}
[dir] .Filters-expandButton_ace0e484 {

  background: transparent;
  padding: 1.25rem 0.88rem
}
[dir=ltr] .Filters-expandButton_ace0e484 {
 margin-left: -0.88rem
}
[dir=rtl] .Filters-expandButton_ace0e484 {
  margin-right: -0.88rem
}
.Filters-expandButton_ace0e484 > span {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
.Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
    width: 8Px;
    height: 20Px; /* IE11 */
    position: relative;
    opacity: 0.6;
    transition: opacity 0.125s ease-in-out, -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.125s ease-in-out;
    transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.125s ease-in-out;
    transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.125s ease-in-out, -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
[dir] .Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
    -webkit-transition: opacity 0.125s ease-in-out, -webkit-transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
[dir=ltr] .Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
 -webkit-transform: rotateZ(90deg);
 -ms-transform: rotate(90deg);
 transform: rotateZ(90deg);
  }
[dir=rtl] .Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
    -webkit-transform: rotateZ(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotateZ(-90deg);
  }
[dir=ltr] .Filters-filterGroup_92f327bb.Filters-expanded_4793c809 .Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
 -webkit-transform: rotateZ(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotateZ(-90deg);
    }
[dir=rtl] .Filters-filterGroup_92f327bb.Filters-expanded_4793c809 .Filters-expandButton_ace0e484 .Filters-icon_f3e639af {
      -webkit-transform: rotateZ(90deg);
          -ms-transform: rotate(90deg);
              transform: rotateZ(90deg);
    }
.Filters-expandButton_ace0e484 .Filters-icon_f3e639af svg {
      width: 8Px; /* IE11 */
      height: 20Px; /* IE11 */
    }
.Filters-expandButton_ace0e484:hover .Filters-icon_f3e639af,
    .Filters-expandButton_ace0e484:hover .Filters-groupTitle_91a87135 {
      opacity: 1;
    }
.Filters-groupTitle_91a87135 {
  font-size: 0.56rem;
  letter-spacing: 0.09;
  text-transform: uppercase;
  font-weight: 500;
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  opacity: 0.6;
  font-size: 11Px;
  letter-spacing: 0.03rem
}
[dir] .Filters-groupTitle_91a87135 {
  -webkit-transition: opacity 125ms ease-in-out
}
@media (min-width: 1024px) and (max-width: 1279px) {
.Filters-groupTitle_91a87135 {
    font-size: 9Px
}
  }
.Filters-filterList_8e239c3d {
  display: none
}
[dir] .Filters-filterList_8e239c3d {
  padding-bottom: 1.25rem
}
[dir] .Filters-filterList_8e239c3d:last-of-type {
    padding-bottom: 0;
  }
.Filters-filterGroup_92f327bb.Filters-expanded_4793c809 .Filters-filterList_8e239c3d {
    display: block;
  }
.Filters-filterListItem_7051a772 {
  height: auto;
  text-transform: none
}
[dir] .Filters-filterListItem_7051a772 {
  background: transparent;
  margin-bottom: 0.31rem
}
[dir] .Filters-filterListItem_7051a772:last-child {
    margin-bottom: 0;
  }
.Filters-filterButton_d9b8d1a7 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
[dir] .Filters-filterButton_d9b8d1a7 {
  border: solid 1Px transparent
}
.Filters-filterButton_d9b8d1a7:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-filterButton_d9b8d1a7:focus {
    border-color: #fff;
  }
.Filters-filterButton_d9b8d1a7 {

  -webkit-align-items: center;

      -ms-flex-align: center;

          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(100% + 1.75rem);
  position: relative;
  text-transform: none;
  font-weight: var(--font-regular);
  opacity: 0.6
}
[dir] .Filters-filterButton_d9b8d1a7 {
  background: transparent;
  border-radius: 0.19rem;
  padding: 0.75rem 0.88rem
}
[dir=ltr] .Filters-filterButton_d9b8d1a7 {
 margin-left: -0.88rem;
 text-align: left
}
[dir=rtl] .Filters-filterButton_d9b8d1a7 {
  margin-right: -0.88rem;
  text-align: right
}
.Filters-filterButton_d9b8d1a7:disabled > span {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
.Filters-filterButton_d9b8d1a7:not(.Filters-filterButtonDisabled_229feafe):hover,
    .Filters-filterListItem_7051a772.Filters-selected_e806805f .Filters-filterButton_d9b8d1a7:not(.Filters-filterButtonDisabled_229feafe) {
      opacity: 1;
    }
.Filters-filterListItem_7051a772.Filters-selected_e806805f .Filters-filterButton_d9b8d1a7 {
    color: #f4f4f4;
  }
[dir] .Filters-filterListItem_7051a772.Filters-selected_e806805f .Filters-filterButton_d9b8d1a7 {
    background-color: rgba(255, 255, 255, 0.1);
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.Filters-filterButton_d9b8d1a7 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
.Filters-filterButtonDisabled_229feafe span {
    opacity: 0.5;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
.Filters-checkbox_afec053f {
  height: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: 0;
  width: 100%
}
[dir] .Filters-checkbox_afec053f {
  cursor: pointer
}
[dir=ltr] .Filters-checkbox_afec053f {
 left: 0
}
[dir=rtl] .Filters-checkbox_afec053f {
  right: 0
}
.Filters-checkbox_afec053f:disabled {
    pointer-events: none;
  }
[dir] .Filters-checkbox_afec053f:disabled {
    cursor: default;
  }
.Filters-checkbox_afec053f:focus {
  outline: 0.06rem solid #fff;
}
.Filters-checkIcon_3cf399f7 {
  display: none;
  color: #fff;
  height: 0.5rem;
  width: 0.63rem;
}
[dir=ltr] .Filters-checkIcon_3cf399f7 {
 margin-left: 0.63rem;
}
[dir=rtl] .Filters-checkIcon_3cf399f7 {
  margin-right: 0.63rem;
}
.Filters-filterListItem_7051a772.Filters-selected_e806805f .Filters-checkIcon_3cf399f7 {
    display: block;
  }
.Filters-footer_7c378f0d {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  height: 6.13rem;
  position: fixed;
  width: 100%;
}
[dir] .Filters-footer_7c378f0d {
  background: #2b2b2b;
  padding: 1.88rem;
}
[dir=ltr] .Filters-footer_7c378f0d {
 left: 0;
}
[dir=rtl] .Filters-footer_7c378f0d {
  right: 0;
}
.Filters-footer_7c378f0d button {
    width: 9.38rem;
  }
@media (min-width: 768px) {
.Filters-footer_7c378f0d {
    width: 22rem
}
[dir=ltr] .Filters-footer_7c378f0d {
  left: calc(100% - 22rem)
}
[dir=rtl] .Filters-footer_7c378f0d {
    right: calc(100% - 22rem)
}
  }
@media (min-width: 1024px) {
.Filters-footer_7c378f0d {
    display: none
}
  }
[dir] .Filters-clearButton_cf639e37 {
  border: solid 1Px transparent;
}
.Filters-clearButton_cf639e37:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-clearButton_cf639e37:focus {
    border-color: #fff;
  }
[dir] .Filters-clearButton_cf639e37 {

  background: transparent;
}
[dir] .Filters-closeButton_853e0e35 {
  border: solid 1Px transparent;
}
.Filters-closeButton_853e0e35:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .Filters-closeButton_853e0e35:focus {
    border-color: #fff;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ColorPicker-picker_6f5d0ff1 {
  padding: 1.88rem 1.88rem 0;
}
.ColorPicker-text_ad9bf96f,
.ColorPicker-title_fbcfc4c8,
.ColorPicker-label_e2537250 {
  white-space: pre;
}
.ColorPicker-text_ad9bf96f,
.ColorPicker-label_e2537250 {
  font-size: 0.75rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  color: #ccc;
}
.ColorPicker-title_fbcfc4c8 {
  font-size: 1.13rem;
  letter-spacing: -0.01rem;
  line-height: 1.25;
  color: #fff;
}
[dir] .ColorPicker-title_fbcfc4c8 {
  margin-bottom: 0.63rem;
}
.ColorPicker-schemeToggle_14d0f6ca {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .ColorPicker-schemeToggle_14d0f6ca {
  margin-bottom: 1.25rem;
}
[dir] .ColorPicker-schemeToggle_14d0f6ca .ColorPicker-title_fbcfc4c8 {
    text-align: center;
    margin-bottom: 0;
  }
.ColorPicker-schemeToggle_14d0f6ca .ColorPicker-radios_0a681cdf {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
.ColorPicker-schemeToggle_14d0f6ca .ColorPicker-radio_22c15503 {
    width: 6.25rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
[dir] .ColorPicker-schemeToggle_14d0f6ca .ColorPicker-radio_22c15503 .ColorPicker-label_e2537250 {
      margin-bottom: 0;
    }
[dir=ltr] .ColorPicker-schemeToggle_14d0f6ca .ColorPicker-label_e2537250 {
 margin-left: 0.38rem;
  }
[dir=rtl] .ColorPicker-schemeToggle_14d0f6ca .ColorPicker-label_e2537250 {
    margin-right: 0.38rem;
  }
[dir] .ColorPicker-label_e2537250 {
  margin-bottom: 0.38rem;
}
[dir] .ColorPicker-group_fc7ef6ad {
  margin-bottom: 1.25rem;
}
.ColorPicker-colorGroup_805d743f {
  width: 100%;
}
.ColorPicker-hexOverride_d02a3af2 {
  height: 1.88rem;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir] .ColorPicker-hexOverride_d02a3af2 {
  margin-bottom: 0.5rem;
}
.ColorPicker-hexInput_7fc0d893 {
  color: #fff;
  font-size: 0.75rem;
  font-weight: medium;
  min-height: 100%; /* IE11 */
  line-height: 2.76;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}
[dir] .ColorPicker-hexInput_7fc0d893 {
  border-bottom: solid 0.02rem #fff;
  padding: 0 0.25rem
}
[dir=ltr] .ColorPicker-hexInput_7fc0d893 {
 margin-right: 1.25rem
}
[dir=rtl] .ColorPicker-hexInput_7fc0d893 {
  margin-left: 1.25rem
}
.ColorPicker-hexInput_7fc0d893:focus {
    outline: 0;
  }
[dir] .ColorPicker-hexInput_7fc0d893:focus {
    border: solid 0.02rem #fff;
  }
.ColorPicker-hexButton_6e797f41 {
  height: 100%;
  min-width: 0;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  color: rgba(32, 32, 32, 1);
}
[dir] .ColorPicker-hexButton_6e797f41 {
  background-color: #ccc;
}
.ColorPicker-preview_61b618c1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ColorPicker-preview_61b618c1 .ColorPicker-color_c9f10c63 {
    width: 3.75rem;
    height: 3.75rem;
  }
.ColorPicker-slider_b07d1fdb {
  width: 22.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
[dir] .ColorPicker-slider_b07d1fdb:not(:first-child) {
    margin-top: 0.75rem;
  }
.ColorPicker-slider_b07d1fdb input {
    width: 100%;
  }
[dir] .ColorPicker-slider_b07d1fdb input {
    margin: 0.38rem 0;
  }
.ColorPicker-track_c1607111 {
  width: 22.5rem;
  height: 1.25rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.ColorPicker-track_c1607111 .ColorPicker-hue_dced5800 {
    height: 100%;
    min-width: 0.06rem;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
  }

[dir] .CopyTextButton-copy_d249dbce {
  margin-top: 1.25rem;
}

  .CopyTextButton-copy_d249dbce button {
    color: rgba(32, 32, 32, 1);
    display: block
  }

  [dir] .CopyTextButton-copy_d249dbce button {
    margin: 0 auto;
    background-color: #ccc
  }

  .CopyTextButton-copy_d249dbce button.CopyTextButton-error_35248c6e {
      color: white;
    }

  [dir] .CopyTextButton-copy_d249dbce button.CopyTextButton-error_35248c6e {
      background: red;
    }

  .CopyTextButton-copy_d249dbce .CopyTextButton-copyText_4f277b35 {
    position: absolute;
    opacity: 0;
  }

  .CopyTextButton-copy_d249dbce .CopyTextButton-errorText_780b3027 {
    font-weight: bold;
    color: red;
    position: absolute;
    width: 100%;
    font-size: 0.75rem;
  }

  [dir] .CopyTextButton-copy_d249dbce .CopyTextButton-errorText_780b3027 {
    text-align: center;
    margin-top: -1.25rem;
  }

.CopyTextButton-copy_d249dbce::after {
    content: 'Copied to clipboard!';
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.4;
    color: #ccc;
    -o-transition: opacity 0.2s ease, top 0.1s ease 0.1s;
    transition: opacity 0.2s ease, top 0.1s ease 0.1s;
  }

[dir] .CopyTextButton-copy_d249dbce::after {
    text-align: center;
    -webkit-transition: opacity 0.2s ease, top 0.1s ease 0.1s;
  }

.CopyTextButton-copy_d249dbce.CopyTextButton-success_b07ecf22::after {
    opacity: 1;
    top: -1.25rem;
    -o-transition: opacity 0.2s ease, top 0.2s ease;
    transition: opacity 0.2s ease, top 0.2s ease;
  }

[dir] .CopyTextButton-copy_d249dbce.CopyTextButton-success_b07ecf22::after {
    -webkit-transition: opacity 0.2s ease, top 0.2s ease;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ColorPreview-wrapper_f15a4429 {
  position: absolute;
  width: 26.25rem;
  height: 100vh;
}
.ColorPreview-panel_2c4041ec {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 26.25rem;
  z-index: 100000;
  -webkit-box-shadow: 0 -0.31rem 0.88rem -0.25rem rgba(0, 0, 0, 0.45);
  overflow-y: auto;
}
[dir] .ColorPreview-panel_2c4041ec {
  background: rgba(32, 32, 32, 0.95);
          box-shadow: 0 -0.31rem 0.88rem -0.25rem rgba(0, 0, 0, 0.45);
}
[dir=ltr] .ColorPreview-panel_2c4041ec {
 left: 0;
 -webkit-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 transform: translateX(-100%);
}
[dir=rtl] .ColorPreview-panel_2c4041ec {
  right: 0;
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.ColorPreview-isOpen_52222614 .ColorPreview-panel_2c4041ec {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
  }
[dir] .ColorPreview-isOpen_52222614 .ColorPreview-panel_2c4041ec {
            transform: translateX(0);
  }
.ColorPreview-errorText_795b6d98 {
  color: red;
  font-size: 0.75rem;
  font-weight: medium;
}
[dir] .ColorPreview-errorText_795b6d98 {
  margin: 0.63rem 1.88rem;
}
.ColorPreview-drawerToggle_bfe19337 {
  position: fixed;
  width: 3.13rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  z-index: 100000;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
}
[dir] .ColorPreview-drawerToggle_bfe19337 {
  background: rgba(32, 32, 32, 0.95);
  cursor: pointer;
  padding: 0.94rem;
          transform: translateY(-50%);
}
[dir=ltr] .ColorPreview-drawerToggle_bfe19337 {
 left: 0;
}
[dir=rtl] .ColorPreview-drawerToggle_bfe19337 {
  right: 0;
}
[dir=ltr] .ColorPreview-isOpen_52222614 .ColorPreview-drawerToggle_bfe19337 {
 left: 26.25rem;
  }
[dir=rtl] .ColorPreview-isOpen_52222614 .ColorPreview-drawerToggle_bfe19337 {
    right: 26.25rem;
  }
.ColorPreview-drawerToggle_bfe19337 span {
    font-size: 1.5rem;
    font-weight: bold;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
[dir=ltr] .ColorPreview-isOpen_52222614 .ColorPreview-drawerToggle_bfe19337 .ColorPreview-icon_dcd66727 {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }
.ColorPreview-drawerToggle_bfe19337:hover {
    color: rgb(32, 32, 32);
  }
[dir] .ColorPreview-drawerToggle_bfe19337:hover {
    background: #fff;
  }
.ColorPreview-wrapper_f15a4429:not(.ColorPreview-isOpen_52222614) .ColorPreview-drawerToggle_bfe19337:hover .ColorPreview-toggleLabel_bc1cccf3 {
        opacity: 1;
      }
.ColorPreview-toggleLabel_bc1cccf3 {
  color: white;
  opacity: 0;
  position: absolute;
  width: 8.13rem;
  font-size: 0.88rem;
}
[dir] .ColorPreview-toggleLabel_bc1cccf3 {
  text-align: center;
  padding: 0.63rem;
}
[dir=ltr] .ColorPreview-toggleLabel_bc1cccf3 {
 -webkit-transform: rotate(-90deg) translateY(2.5rem);
 -ms-transform: rotate(-90deg) translateY(2.5rem);
 transform: rotate(-90deg) translateY(2.5rem);
}
[dir=rtl] .ColorPreview-toggleLabel_bc1cccf3 {
  -webkit-transform: rotate(90deg) translateY(2.5rem);
      -ms-transform: rotate(90deg) translateY(2.5rem);
          transform: rotate(90deg) translateY(2.5rem);
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* placeholder slide max-width in desktop is 14 of 18 columns */
.ProductPlaceholder-wrapper_932ce6f9 {
  height: 100vh;
  overflow: hidden;
  z-index: 999999;
}
[dir] .ProductPlaceholder-wrapper_932ce6f9 {

  background-color: #121212;
}
[dir] .ProductPlaceholder-wrapper_932ce6f9 .ProductPlaceholder-placeholderAsset_fefef753::after, [dir] .ProductPlaceholder-wrapper_932ce6f9 .ProductPlaceholder-placeholderContent_9e6735e5 {
    background-color: var(--theme-custom-color-primary);
  }
.ProductPlaceholder-wrapper_932ce6f9 .ProductPlaceholder-placeholderAsset_fefef753::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .ProductPlaceholder-wrapper_932ce6f9 .ProductPlaceholder-placeholderAsset_fefef753::after {
    border-radius: 50%;
  }
.isLauncher .ProductPlaceholder-wrapper_932ce6f9 {
    width: 100%;
  }
.ProductPlaceholder-slider_647b2ac3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center
}
@media (min-width: 768px) and (max-width: 1023px) {
.ProductPlaceholder-slider_647b2ac3 {
    height: 56.25vw;
}

    .isLauncher .ProductPlaceholder-slider_647b2ac3 {
      -webkit-justify-content: left;
          -ms-flex-pack: left;
              justify-content: left;
    }
  }
@media (min-width: 1024px) {
.ProductPlaceholder-slider_647b2ac3 {
    height: calc((((100vw - 1.25rem) * (14 / 18)) - 1.25rem) * 9 / 16);

    -webkit-flex-direction: row;

        -ms-flex-direction: row;

            flex-direction: row;
}

    .isLauncher .ProductPlaceholder-slider_647b2ac3 {
      -webkit-justify-content: left;
          -ms-flex-pack: left;
              justify-content: left;
    }
  }
@media (min-width: 1600px) {
    .isLauncher .ProductPlaceholder-slider_647b2ac3 {
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
  }
.ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb,
  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {

    -webkit-flex: 1 0 100%;

        -ms-flex: 1 0 100%;

            flex: 1 0 100%;
  }
[dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb .ProductPlaceholder-placeholderAsset_fefef753::after, [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb .ProductPlaceholder-placeholderContent_9e6735e5, [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 .ProductPlaceholder-placeholderAsset_fefef753::after, [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 .ProductPlaceholder-placeholderContent_9e6735e5 {
    background-color: var(--theme-custom-color-primary);
  }
.ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb .ProductPlaceholder-placeholderAsset_fefef753::after, .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 .ProductPlaceholder-placeholderAsset_fefef753::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb .ProductPlaceholder-placeholderAsset_fefef753::after, [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 .ProductPlaceholder-placeholderAsset_fefef753::after {
    border-radius: 50%;
  }
@media (max-width: 767px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb,
  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      -webkit-flex-basis: 56.25vw;
          -ms-flex-preferred-size: 56.25vw;
              flex-basis: 56.25vw
  }

  [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb, [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      margin-bottom: 0.63rem
  }
    }
@media (min-width: 1024px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb,
  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      max-width: calc(((100vw - 1.25rem) * 14 / 18) - 1.25rem)
  }
    }
@media (min-width: 1280px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb,
  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      max-width: calc(((100vw - 1.88rem) * 14 / 18) - 1.88rem)
  }
    }
@media (min-width: 1600px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb,
  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      max-width: calc(((100vw - 1.88rem) * 14 / 18) - 1.88rem)
  }
    }
@media (min-width: 1024px) {

  [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb {
      margin: 0 1.25rem
  }
    }
@media (min-width: 1280px) {

  [dir] .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slideMain_6871bfcb {
      margin: 0 1.88rem
  }
    }
@media (min-width: 768px) and (max-width: 1023px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      display: none
  }
    }
@media (min-width: 1024px) {

  .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33 {
      opacity: 0.05
  }
    }
@media (min-width: 1024px) {

    .isLauncher .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33:first-child {
        display: none
    }
      }
@media (min-width: 1600px) {

    .isLauncher .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33:first-child {
        display: block
    }
      }
@media (max-width: 767px) {

    .ProductPlaceholder-slider_647b2ac3 .ProductPlaceholder-slide_2286ae33:last-child {
        -webkit-flex-basis: 3.13rem;
            -ms-flex-preferred-size: 3.13rem;
                flex-basis: 3.13rem
    }
      }
.ProductPlaceholder-description_a0edee1a {
  display: none
}
@media (min-width: 768px) {
.ProductPlaceholder-description_a0edee1a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap
}
[dir] .ProductPlaceholder-description_a0edee1a {
    margin: calc(1.25rem * 2) calc((100vw - -1.25rem) / 10)
}
  }
@media (min-width: 1024px) {
.ProductPlaceholder-description_a0edee1a {
    max-width: calc(((100vw - 1.25rem) * 14 / 18) - 1.25rem);

    -webkit-flex-wrap: nowrap;

        -ms-flex-wrap: nowrap;

            flex-wrap: nowrap;
    -webkit-box-sizing: content-box;
            box-sizing: content-box
}
[dir] .ProductPlaceholder-description_a0edee1a {
    margin: 0.31rem auto 1.25rem;
    padding: 1.25rem
}
  }
@media (min-width: 1280px) {
.ProductPlaceholder-description_a0edee1a {
    width: calc(((100vw - 1.88rem) * (14 / 18)) - 1.88rem);

    max-width: 75rem
}
[dir] .ProductPlaceholder-description_a0edee1a {
    margin: 0 auto 1.88rem;
    padding: 1.88rem
}
  }
@media (min-width: 1024px) {

  [dir] .isLauncher .ProductPlaceholder-description_a0edee1a {
      margin: 0.31rem 0 1.25rem
  }
    }
@media (min-width: 1280px) {

  [dir=ltr] .isLauncher .ProductPlaceholder-description_a0edee1a {
  margin: 0 auto 1.88rem 0
  }

  [dir=rtl] .isLauncher .ProductPlaceholder-description_a0edee1a {
      margin: 0 0 1.88rem auto
  }
    }
@media (min-width: 1600px) {

  [dir] .isLauncher .ProductPlaceholder-description_a0edee1a {
      margin: 0 auto 1.88rem
  }
    }
@media (min-width: 768px) {
.ProductPlaceholder-logo_dad5ff77 {
    width: calc(((100vw - -1.25rem) * (3 / 10)) - 1.25rem);
    height: calc((((100vw - -1.25rem) * (3 / 10)) - 1.25rem) * 9 / 16);

    -webkit-flex-shrink: 0;

        -ms-flex-negative: 0;

            flex-shrink: 0
}
  }
@media (min-width: 1024px) {
.ProductPlaceholder-logo_dad5ff77 {
    width: calc(((100vw - 1.25rem) * (4 / 18)) - 1.25rem);
    height: calc((((100vw - 1.25rem) * (4 / 18)) - 1.25rem) * 9 / 16)
}
  }
@media (min-width: 1280px) {
.ProductPlaceholder-logo_dad5ff77 {
    width: calc(((100vw - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100vw - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
@media (min-width: 1600px) {
.ProductPlaceholder-logo_dad5ff77 {
    width: calc(((100rem - 1.88rem) * (4 / 18)) - 1.88rem);
    height: calc((((100rem - 1.88rem) * (4 / 18)) - 1.88rem) * 9 / 16)
}
  }
[dir] .ProductPlaceholder-copyWrapper_65a48b4f, [dir] .ProductPlaceholder-cta_498481e4 {
  border-bottom: 0.06rem solid rgba(244, 244, 244, 0.1);
}
@media (min-width: 768px) and (max-width: 1023px) {
.ProductPlaceholder-copyWrapper_65a48b4f {
    width: calc(((100vw - -1.25rem) * (5 / 10)) - 1.25rem);

    -webkit-flex-shrink: 0;

        -ms-flex-negative: 0;

            flex-shrink: 0
}
[dir] .ProductPlaceholder-copyWrapper_65a48b4f {
    border-bottom-width: 0
}
[dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f {
  padding-left: 1.25rem
}
[dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f {
    padding-right: 1.25rem
}
  }
@media (min-width: 1024px) {
.ProductPlaceholder-copyWrapper_65a48b4f {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1
}
[dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f {
  margin-left: 1.25rem;
  padding-right: 1.25rem
}
[dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f {
    margin-right: 1.25rem;
    padding-left: 1.25rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f {
  margin-left: 1.88rem;
  padding-right: 1.88rem
}
[dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f {
    margin-right: 1.88rem;
    padding-left: 1.88rem
}
  }
.ProductPlaceholder-copy_5264e681 {
  display: block;
  height: 0.69rem
}
[dir] .ProductPlaceholder-copy_5264e681 {
  margin-bottom: 0.94rem
}
[dir=ltr] .ProductPlaceholder-copy_5264e681:not(:first-child) {
 margin-right: 10%;
  }
[dir=rtl] .ProductPlaceholder-copy_5264e681:not(:first-child) {
    margin-left: 10%;
  }
@media (min-width: 1280px) {
      [dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:first-child {
  margin-right: 7%;
      }
      [dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:first-child {
        margin-left: 7%;
      }

      [dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:nth-child(2) {
  margin-right: 15%;
      }

      [dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:nth-child(2) {
        margin-left: 15%;
      }

      [dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:nth-child(3) {
  margin-right: 4%;
      }

      [dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:nth-child(3) {
        margin-left: 4%;
      }

      [dir=ltr] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:last-child {
  margin-right: 55%;
      }

      [dir=rtl] .ProductPlaceholder-copyWrapper_65a48b4f .ProductPlaceholder-copy_5264e681:last-child {
        margin-left: 55%;
      }
    }
.ProductPlaceholder-cta_498481e4 {
  -webkit-flex: 100%;
      -ms-flex: 100%;
          flex: 100% 1
}
[dir] .ProductPlaceholder-cta_498481e4 {
  margin-top: 0.94rem;
  padding-bottom: calc(1.25rem * 2)
}
@media (min-width: 1024px) {
.ProductPlaceholder-cta_498481e4 {
    width: calc(((100vw - 1.25rem) * (3 / 18)) - 1.25rem);
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto
}
[dir] .ProductPlaceholder-cta_498481e4 {

    margin-top: 0
}
  }
@media (min-width: 1280px) {
.ProductPlaceholder-cta_498481e4 {
    width: calc(((100vw - 1.88rem) * (3 / 18)) - 1.88rem)
}
  }
@media (min-width: 1600px) {
.ProductPlaceholder-cta_498481e4 {
    width: calc(((100rem - 1.88rem) * (3 / 18)) - 1.88rem)
}
  }
.ProductPlaceholder-cta_498481e4 .ProductPlaceholder-copy_5264e681 {
    width: 4.38rem;
  }
[dir=ltr] .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-copy_5264e681 {
 margin-left: auto;
  }
[dir=rtl] .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-copy_5264e681 {
    margin-right: auto;
  }
.ProductPlaceholder-cta_498481e4 .ProductPlaceholder-button_0865c62b {
    display: block;
    width: 100%;
    height: 3.13rem
  }
@media (min-width: 1024px) and (max-width: 1279px) {

  .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-button_0865c62b {
      height: 2.5rem
  }
    }
@media (min-width: 1280px) {

  .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-button_0865c62b {
      width: 88%
  }

  [dir=ltr] .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-button_0865c62b {
  margin-left: auto
  }

  [dir=rtl] .ProductPlaceholder-cta_498481e4 .ProductPlaceholder-button_0865c62b {
      margin-right: auto
  }
    }
.ProductPlaceholder-content_4fe54e45 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80vh;
}
.ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-copy_5264e681 {
    width: 8.75rem
  }
@media (max-width: 1023px) {

  .ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-copy_5264e681 {
      display: none
  }
    }
@media (min-width: 1600px) {

  [dir] .ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-copy_5264e681 {
      margin: 0 auto
  }
    }
.ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-body_19efeb00 {
    width: 100%;
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
                -ms-grid-row-align: stretch;
            align-self: stretch
  }
@media (min-width: 1024px) {

  .ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-body_19efeb00 {
      width: calc(((100vw - 1.25rem) * (10 / 18)) - 1.25rem)
  }
    }
@media (min-width: 1280px) {

  .ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-body_19efeb00 {
      width: calc(((100vw - 1.88rem) * (10 / 18)) - 1.88rem)
  }
    }
@media (min-width: 1600px) {

  .ProductPlaceholder-content_4fe54e45 .ProductPlaceholder-body_19efeb00 {
      width: calc(((100rem - 1.88rem) * (10 / 18)) - 1.88rem)
  }
    }

.brutal-type--regular,.lead,.body-regular,.caption,.caption-regular,.heading4-regular,.heading5-regular,.heading6-regular,.pin-code-container .form-message .message{font-family:'BrutalType'}.brutal-type--thin,.heading5-thin{font-family:'BrutalTypeThin'}.brutal-type--medium,.lead-medium,.body-medium,.heading3-medium,.heading4-medium,.heading5-medium,.heading6-medium{font-family:'BrutalTypeMedium'}.brutal-type--bold,.lead-bold,.body-bold,.heading1,.heading3,.heading3-bold,.heading4,.heading4-bold,.heading5-bold,.heading6-bold{font-family:'BrutalTypeBold'}.brutal-type--light,.body,.caption-light,.small{font-family:'BrutalTypeLight'}.lead-medium{font-size:1em;color:#2a2a2a}.lead{font-size:1em;color:#2a2a2a}.lead-bold{font-size:1em;color:#2a2a2a}.body-medium{font-size:16px}.body-bold{font-size:16px}.body-regular{font-size:16px}.body{font-size:16px}.caption{font-size:14px}.caption-light{font-size:14px}.caption-regular{font-size:14px}.small{font-size:12px}.heading1{font-size:34px}.heading3{font-size:26px}.heading3-medium{font-size:26px}.heading3-bold{font-size:26px}.heading4{font-size:22px}.heading4-regular{font-size:22px}.heading4-bold{font-size:22px}.heading4-medium{font-size:22px}.heading5-bold{font-size:18px}.heading5-medium{font-size:18px}.heading5-regular{font-size:18px}.heading5-thin{font-size:18px}.heading6-bold{font-size:14px}.heading6-regular{font-size:14px}.heading6-medium{font-size:14px}@-webkit-keyframes autofill{to{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQwOCA3MDRxMCAyNi0xOSA0NWwtNDQ4IDQ0OHEtMTkgMTktNDUgMTl0LTQ1LTE5bC00NDgtNDQ4cS0xOS0xOS0xOS00NXQxOS00NSA0NS0xOWg4OTZxMjYgMCA0NSAxOXQxOSA0NXoiLz48L3N2Zz4=) no-repeat right;background-size:17px;background-position-x:95%}}.pin-code-container{text-align:center}.pin-code-container .pin-code{display:inline-block;margin-right:1.25em;width:50px}@media only screen and (max-width: 767px){.pin-code-container .pin-code{width:40px;margin-right:0.5em}}.pin-code-container .pin-code .input{border-radius:0;padding:0 0 0 20px}@media only screen and (max-width: 767px){.pin-code-container .pin-code .input{padding:0 0 0 14px}}.pin-code-container .form-message .message{font-size:0.7em}.pin-code-container .form-message .message.error{color:#DC5353}.pin-code-container .form-message .message.success{color:#95c990}

.brutal-type--regular,.lead,.body-regular,.caption,.input-container .input-message,.caption-regular,.heading4-regular,.heading5-regular,.heading6-regular,.input-container .input,.input-container .control-label{font-family:'BrutalType'}.brutal-type--thin,.heading5-thin{font-family:'BrutalTypeThin'}.brutal-type--medium,.lead-medium,.body-medium,.heading3-medium,.heading4-medium,.heading5-medium,.heading6-medium{font-family:'BrutalTypeMedium'}.brutal-type--bold,.lead-bold,.body-bold,.heading1,.heading3,.heading3-bold,.heading4,.heading4-bold,.heading5-bold,.heading6-bold{font-family:'BrutalTypeBold'}.brutal-type--light,.body,.caption-light,.small{font-family:'BrutalTypeLight'}.lead-medium{font-size:1em;color:#2a2a2a}.lead{font-size:1em;color:#2a2a2a}.lead-bold{font-size:1em;color:#2a2a2a}.body-medium{font-size:16px}.body-bold{font-size:16px}.body-regular{font-size:16px}.body{font-size:16px}.caption,.input-container .input-message{font-size:14px}.caption-light{font-size:14px}.caption-regular{font-size:14px}.small{font-size:12px}.heading1{font-size:34px}.heading3{font-size:26px}.heading3-medium{font-size:26px}.heading3-bold{font-size:26px}.heading4{font-size:22px}.heading4-regular{font-size:22px}.heading4-bold{font-size:22px}.heading4-medium{font-size:22px}.heading5-bold{font-size:18px}.heading5-medium{font-size:18px}.heading5-regular{font-size:18px}.heading5-thin{font-size:18px}.heading6-bold{font-size:14px}.heading6-regular,.input-container .input{font-size:14px}.heading6-medium{font-size:14px}@-webkit-keyframes autofill{to{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQwOCA3MDRxMCAyNi0xOSA0NWwtNDQ4IDQ0OHEtMTkgMTktNDUgMTl0LTQ1LTE5bC00NDgtNDQ4cS0xOS0xOS0xOS00NXQxOS00NSA0NS0xOWg4OTZxMjYgMCA0NSAxOXQxOSA0NXoiLz48L3N2Zz4=) no-repeat right;background-size:17px;background-position-x:95%}}.input-container .input:focus{border-color:#0aaff1;box-shadow:#000;outline:0 none}.input-container .input:focus ~ .control-label,.input-container .input.filled{top:-68px;left:15px;font-size:0.55em;opacity:1}.input-container .input:focus ~ .control-label:after{content:"";font-size:0.5em}.input-container .input{width:100%;height:45px;border:none;padding:0 0 0 14px;margin-bottom:15px;border-radius:2px;margin-top:20px;background:transparent;color:#555;border:1px solid #7c7c7c;font-size:16px}.input-container .input::-webkit-input-placeholder{text-transform:uppercase;color:#aeaeae;font-size:.8em}.input-container .input:-moz-placeholder{text-transform:uppercase;color:#aeaeae;font-size:.8em}.input-container .input::-moz-placeholder{text-transform:uppercase;color:#aeaeae;font-size:.8em}.input-container .input:-ms-input-placeholder{text-transform:uppercase;color:#aeaeae;font-size:.8em}.input-container .input.useCustomPlaceholder{padding:12px 0 0 14px}.input-container .input[disabled]{cursor:not-allowed;background-color:#eee;opacity:1;color:#999}.input-container .input-message{opacity:0;visibility:hidden;position:relative;top:-20px;text-transform:uppercase;font-size:0.6em}.input-container .control-label{font-weight:100;font-size:.8em;position:relative;display:inline-block;pointer-events:none;left:15px;top:-54px;transition:0.18s ease all;color:#aeaeae}@media only screen and (max-width: 767px){.input-container .control-label{font-size:0.8em}}.input-container.filled .control-label{top:-68px;bottom:10px;left:15px;font-size:0.55em;opacity:1}.custom-tooltip{position:relative;top:-65px;right:-90%}@media only screen and (max-width: 767px){.custom-tooltip{right:-77%}}.custom-tooltip .info-badge{text-align:center;background:none;bottom:3.4em;width:25px;height:25px;font-weight:500;font-size:15px;color:#7a7a7a;border:1px solid #7a7a7a;cursor:pointer;border-radius:50%;font-family:'BrutalType';padding:4px;display:block;text-decoration:none !important}.custom-tooltip .info-badge.disabled{background:#eeeeee;text-decoration:none}.custom-tooltip .display-name-tooltip{width:300px;padding:15px;text-align:center}.custom-tooltip .display-name-tooltip .content{font-family:'BrutalType'}.custom-tooltip .display-name-tooltip .content b{font-family:'BrutalTypeBold'}.input-container.error .custom-tooltip{top:-83px}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] #purchase-app .pin-code-container .pin-code .input {
    border-style: solid;
    border-color: #8f8f8f;
  }
.PinPrompt-container_0562a876 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
[dir] .PinPrompt-container_0562a876 {
  background: #202020;
}
[dir] .PinPrompt-container_0562a876 .pin-code {
    margin: 0 1rem;
  }
.PinPrompt-container_0562a876 .pin-code input {
      width: 1.5rem;
    }
[dir] .PinPrompt-container_0562a876 .pin-code input {
      border-color: #8f8f8f;
      border-style: solid;
      margin: 0;
    }
.PinPrompt-container_0562a876 .input-container {
    width: 1.5rem;
  }
.PinPrompt-container_0562a876 .form-message {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;
    min-height: 1.63rem;
  }
[dir] .PinPrompt-container_0562a876 .form-message {

    margin-top: 1.25rem;
  }
.PinPrompt-container_0562a876 .form-message span {
      font-family: 'Brutal', sans-serif !important;
    }
.PinPrompt-btnContainer_ef3e5075 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .PinPrompt-btnContainer_ef3e5075 {
  margin-top: 1.25rem;
}
.PinPrompt-pinCodeContainer_be9b9884 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
}
.PinPrompt-linkContainer_a2360c25 {

  font-size: 0.75rem;

  letter-spacing: 0.01rem;

  line-height: 1.5;

  color: white;
  opacity: 0.7;
}
[dir] .PinPrompt-linkContainer_a2360c25 {
  margin-top: 1.25rem;
}
.PinPrompt-linkContainer_a2360c25 a {
    text-decoration: none;

    /* color: var(--theme-ui-primary-text); */
    color: white;
    opacity: 0.7;

    /* color: var(--theme-custom-primary-text); */
  }
.PinPrompt-linkContainer_a2360c25 a:hover {
    text-decoration: underline;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Changelog-changelog_e2277c3c {
  color: var(--theme-custom-color-primary-text);
  font-size: 0.88rem;
  line-height: 1.25rem;
}
[dir] .Changelog-changelogItem_eac4fe61 {
  margin-bottom: 1.88rem
}
[dir] .Changelog-changelogItem_eac4fe61:last-child {
    margin-bottom: 0;
  }
.Changelog-info_5996d763 {
  white-space: pre-wrap;
}
[dir] .Changelog-info_5996d763 {
  margin-top: 0.31rem;
}
.Changelog-label_e9d2f72e {
  opacity: 0.6;
}
[dir] .Changelog-wrapper_b555c0fd {
  background-color: var(--theme-custom-color-primary);
  padding: 2.5rem 4.88rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Summary-popupWrapper_f1fb9b85 {
  z-index: 10;
}
[dir=ltr] .Summary-popupContent_1478ec14 {
 margin-left: -1.88rem
}
[dir=rtl] .Summary-popupContent_1478ec14 {
  margin-right: -1.88rem
}
@media (max-width: 1023px) {
[dir] .Summary-popupContent_1478ec14 {
    margin: 0
}
  }
.Summary-iconLabel_cae6c7f3 {
  color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  font-size: 0.88rem;
  line-height: 1.25rem;

  font-size: 14px;

  letter-spacing: 0.01rem;

  line-height: 1.4
}
[dir] .Summary-iconLabel_cae6c7f3 {
  padding-bottom: 0
}
@media (min-width: 768px) and (max-width: 1023px) {
.Summary-iconLabel_cae6c7f3 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1024px) {
.Summary-iconLabel_cae6c7f3 {

    font-size: 0.75rem;

    letter-spacing: 0.01rem;

    line-height: 1.5
}
[dir] .Summary-iconLabel_cae6c7f3 {
    padding-bottom: 0.5rem
}
  }
@media (max-width: 1023px) {
[dir=ltr] .Summary-iconLabel_cae6c7f3 {
  margin-right: 0.88rem
}
[dir=rtl] .Summary-iconLabel_cae6c7f3 {
    margin-left: 0.88rem
}
  }
@media (min-width: 1280px) {
.Summary-iconLabel_cae6c7f3 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.Summary-activeIcon_2fff9504 {
  color: var(--theme-custom-color-accent);
}
.Summary-summary_6957a148 {
  width: 100%;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3
}
[dir] .Summary-summary_6957a148 {
  padding: 1.88rem 0 3.13rem
}
@media (min-width: 768px) {
[dir] .Summary-summary_6957a148 {
    padding: 0.63rem 0 0;
    margin: 0 0 2.88rem
}
  }
@media (min-width: 1024px) {
.Summary-summary_6957a148 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
[dir] .Summary-summary_6957a148 {
    padding-bottom: 1.88rem
}
  }
@media (min-width: 1280px) {
.Summary-summary_6957a148 {
    -ms-grid-column-align: center;
        justify-self: center
}
  }
@media (min-width: 1024px) {

  [dir] .isLauncher .Summary-summary_6957a148 {
      margin-bottom: 3.13rem
  }
    }
.Summary-content_32aa566f {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative
}
@media (min-width: 1024px) {
.Summary-content_32aa566f {
    display: -ms-grid;
    display: grid;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
    -ms-grid-columns: 5fr 13.75rem;
    grid-template-columns: auto 13.75rem
}
[dir] .Summary-content_32aa566f {
    padding-bottom: 1.63rem
}
  }
.Summary-content_32aa566f::after {
    content: '';
    position: absolute;
    height: 1Px;
    width: 100%;

    opacity: 0.1;
    bottom: -1.25rem;
    visibility: hidden
  }
[dir] .Summary-content_32aa566f::after {
    background: var(--theme-custom-color-primary-text)
  }
[dir=ltr] .Summary-content_32aa566f::after {
 left: 0;
 right: 0
  }
[dir=rtl] .Summary-content_32aa566f::after {
    right: 0;
    left: 0
  }
@media (min-width: 1024px) {
.Summary-content_32aa566f::after {
      visibility: visible
  }
    }
.Summary-titleBlock_3a3a1dc3 {
  position: relative;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1
}
@media (min-width: 1600px) {
.Summary-titleBlock_3a3a1dc3 {
    width: calc((100rem - 1.88rem) * (4 / 18))
}
  }
@media (min-width: 768px) {
[dir] .Summary-titleBlock_3a3a1dc3 {
    padding: 0 20% 0.38rem
}
  }
@media (min-width: 1024px) {
.Summary-titleBlock_3a3a1dc3 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    min-height: 9.38rem;

    width: calc((100vw - 1.25rem) * (4 / 18))
}
[dir=ltr] .Summary-titleBlock_3a3a1dc3 {
  padding: 0 1.88rem 0 0
}
[dir=rtl] .Summary-titleBlock_3a3a1dc3 {
    padding: 0 0 0 1.88rem
}
  }
@media (min-width: 1280px) {
.Summary-titleBlock_3a3a1dc3 {
    width: calc((100vw - 1.88rem) * (4 / 18))
}
  }
@media (min-width: 1600px) {
.Summary-titleBlock_3a3a1dc3 {
    width: calc((100rem - 1.88rem) * (4 / 18))
}
  }
.Summary-titleBlock_3a3a1dc3 > div {

  font-size: 1.88rem;

  letter-spacing: -0.02rem;

  line-height: 1
}
[dir] .Summary-titleBlock_3a3a1dc3 > div {
  padding-bottom: 0.63rem;
  text-align: center
}
@media (min-width: 1024px) {
.Summary-titleBlock_3a3a1dc3 > div {

    font-size: 1.25rem;

    letter-spacing: -0.01rem;

    line-height: 1.25
}
[dir=ltr] .Summary-titleBlock_3a3a1dc3 > div {
  text-align: left
}
[dir=rtl] .Summary-titleBlock_3a3a1dc3 > div {
    text-align: right
}
  }
@media (min-width: 1280px) {
.Summary-titleBlock_3a3a1dc3 > div {
    font-size: 2.13rem;
    line-height: 2.5rem
}
  }
.Summary-description_da555ef3 {
  line-height: 1.25rem;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 1;
  grid-row: 1;

  font-size: 0.88rem;

  letter-spacing: 0.01rem;

  line-height: 1.4
}
[dir] .Summary-description_da555ef3 {
  text-align: center;
  margin: 0 0 1.88rem
}
@media (min-width: 768px) {
[dir] .Summary-description_da555ef3 {
    padding: 0 20%
}
  }
@media (min-width: 768px) and (max-width: 1023px) {
.Summary-description_da555ef3 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1024px) {
.Summary-description_da555ef3 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5;
    min-height: 3.75rem
}
[dir] .Summary-description_da555ef3 {
    padding: 0
}
[dir=ltr] .Summary-description_da555ef3 {
  text-align: left;
  margin: 0 2.5rem 1.88rem 0
}
[dir=rtl] .Summary-description_da555ef3 {

    text-align: right;
    margin: 0 0 1.88rem 2.5rem
}
  }
@media (min-width: 1280px) {
.Summary-description_da555ef3 {

    font-size: 0.88rem;

    letter-spacing: 0.01rem;

    line-height: 1.4
}
[dir] .Summary-description_da555ef3 {
    margin-bottom: 2.25rem
}
  }
@media (min-width: 1600px) {
.Summary-description_da555ef3 {

    font-size: 1rem;

    letter-spacing: 0;

    line-height: 1.625
}
[dir] .Summary-description_da555ef3 {
    margin-bottom: 1.88rem
}
  }
.Summary-category_940961ac {
  line-height: 1.25rem;
  height: 1.25rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.56rem;
  color: var(--theme-custom-color-accent-text);
  display: none;
  text-transform: uppercase
}
[dir] .Summary-category_940961ac {
  text-align: center;
  background: var(--theme-custom-color-accent)
}
[dir=ltr] .Summary-category_940961ac {
 padding-left: 0.38rem;
 padding-right: 0.38rem
}
[dir=rtl] .Summary-category_940961ac {
  padding-right: 0.38rem;
  padding-left: 0.38rem
}
@media (min-width: 1024px) {
.Summary-category_940961ac {
    display: block
}
[dir] .Summary-category_940961ac {
    padding-bottom: 0.19rem
}
  }
.Summary-actionIconsWrapper_b0f3fcdc {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-order: 5;
      -ms-flex-order: 5;
          order: 5;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 5;
  grid-row: 5
}
[dir] .Summary-actionIconsWrapper_b0f3fcdc {
  padding: 2.19rem 0;
  border-width: 0.06rem 0
}
.Summary-actionIconsWrapper_b0f3fcdc::after,
  .Summary-actionIconsWrapper_b0f3fcdc::before {
    content: '';
    position: absolute;
    height: 1Px;
    width: 100%;
  }
[dir] .Summary-actionIconsWrapper_b0f3fcdc::after, [dir] .Summary-actionIconsWrapper_b0f3fcdc::before {

    background: rgba(255, 255, 255, 0.1);
  }
[dir=ltr] .Summary-actionIconsWrapper_b0f3fcdc::after, [dir=ltr] .Summary-actionIconsWrapper_b0f3fcdc::before {
 left: 0;
 right: 0;
  }
[dir=rtl] .Summary-actionIconsWrapper_b0f3fcdc::after, [dir=rtl] .Summary-actionIconsWrapper_b0f3fcdc::before {
    right: 0;
    left: 0;
  }
.Summary-actionIconsWrapper_b0f3fcdc::before {
    top: 0;
  }
.Summary-actionIconsWrapper_b0f3fcdc::after {
    bottom: 0;
  }
@media (min-width: 1024px) {
.Summary-actionIconsWrapper_b0f3fcdc {
    -webkit-order: unset;
        -ms-flex-order: unset;
            order: unset;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2
}
[dir] .Summary-actionIconsWrapper_b0f3fcdc {
    padding: 0
}

    .Summary-actionIconsWrapper_b0f3fcdc::after,
    .Summary-actionIconsWrapper_b0f3fcdc::before {
      display: none;
    }
  }
.Summary-actionIconBlock_16b8b4b5 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column
}
[dir=ltr] .Summary-actionIconBlock_16b8b4b5 {
 padding-right: 3rem
}
[dir=rtl] .Summary-actionIconBlock_16b8b4b5 {
  padding-left: 3rem
}
[dir] .Summary-actionIconBlock_16b8b4b5:last-child {
    padding: 0;
  }
@media (max-width: 1023px) {
.Summary-actionIconBlock_16b8b4b5 {
    display: block
}
  }
.Summary-actionBlock_f18516f5 {
  -ms-flex: 1 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 3;
  grid-row: 3;
  width: 13.75rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between
}
[dir] .Summary-actionBlock_f18516f5 {
  margin: 0 auto
}
@media (min-width: 1024px) {
.Summary-actionBlock_f18516f5 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    width: auto;
    -webkit-justify-content: left;
        -ms-flex-pack: left;
            justify-content: left
}
[dir] .Summary-actionBlock_f18516f5 {
    margin: 0
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Popularity-popularity_47506189 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-grid-column: 1;
  grid-column: 1;
  -ms-grid-row: 4;
  grid-row: 4;
  width: 12.5rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between
}
[dir] .Popularity-popularity_47506189 {
  margin: 2.5rem auto
}
@media (min-width: 1024px) {
      [dir=ltr] .Popularity-popularity_47506189 > div:last-child {
  padding-left: 3.25rem;
      }
      [dir=rtl] .Popularity-popularity_47506189 > div:last-child {
        padding-right: 3.25rem;
      }
    }
@media (min-width: 1024px) {
.Popularity-popularity_47506189 {
    width: auto;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2
}
[dir] .Popularity-popularity_47506189 {
    margin: 0
}
  }
.Popularity-iconTitleGroup_f90cf1cf {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .Popularity-iconTitleGroup_f90cf1cf {
  margin-bottom: 0.25rem;
}
.Popularity-icon_c5fb932a {
  width: 0.88rem;
  height: 0.88rem;
  opacity: 0.4;
  color: var(--theme-custom-color-primary-text);
}
[dir=ltr] .Popularity-icon_c5fb932a {
 margin-right: 0.5rem;
}
[dir=rtl] .Popularity-icon_c5fb932a {
  margin-left: 0.5rem;
}
.Popularity-subtitle_a957b334 {
  opacity: 0.6;
  color: var(--theme-custom-color-primary-text);

  font-size: 0.88rem;

  letter-spacing: 0.01rem;

  line-height: 1.4
}
@media (min-width: 768px) and (max-width: 1023px) {
.Popularity-subtitle_a957b334 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
@media (min-width: 1024px) {
.Popularity-subtitle_a957b334 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.Popularity-subtitle_a957b334 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.Popularity-count_4562f44c {
  font-size: 1.13rem;
  line-height: 1.56rem;
  font-weight: 400;
  display: block
}
[dir] .Popularity-count_4562f44c {
  text-align: center
}
@media (min-width: 1024px) {
[dir=ltr] .Popularity-count_4562f44c {
  text-align: left
}
[dir=rtl] .Popularity-count_4562f44c {
    text-align: right
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir=ltr] .LikeButton-likeButton_65f327fb {
 margin-right: 0.94rem;
}
[dir=rtl] .LikeButton-likeButton_65f327fb {
  margin-left: 0.94rem;
}
.LikeButton-icon_36a2b3d8 {
  width: 1.31rem;
  height: 1.31rem;
  color: var(--theme-ui-primary-text)
}
@media (min-width: 1024px) {
.LikeButton-icon_36a2b3d8 {
    width: 0.88rem;
    height: 0.88rem
}
  }
.LikeButton-iconActive_345ab36f {
  color: var(--theme-custom-color-accent);
}
.LikeButton-iconThumbUp_b52cf7c8 {
  height: 3.13rem;
  width: 3.13rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -o-transition: background 0.1s;
  transition: background 0.1s
}
[dir] .LikeButton-iconThumbUp_b52cf7c8 {
  cursor: pointer;
  background: var(--theme-custom-color-primary);
  -webkit-transition: background 0.1s
}
@media (min-width: 1024px) {
.LikeButton-iconThumbUp_b52cf7c8 {
    height: 2.5rem;
    width: 2.5rem
}
  }
@media (min-width: 1280px) {
.LikeButton-iconThumbUp_b52cf7c8 {
    height: 3.13rem;
    width: 3.13rem
}
  }
.LikeButton-iconThumbUp_b52cf7c8:hover .LikeButton-icon_36a2b3d8 {
      color: var(--theme-custom-color-accent);
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Report-container_51429893 {
  min-width: 22.81rem;
  line-height: 1.25rem;
  letter-spacing: 0.01rem;
  font-weight: 400;
  color: #000;

  font-size: 0.88rem;

  letter-spacing: 0.2px;

  line-height: 1.4;

  font-weight: 500
}
[dir] .Report-container_51429893 {
  background-color: #fff
}
[dir=ltr] .Report-container_51429893 {
 text-align: left
}
[dir=rtl] .Report-container_51429893 {
  text-align: right
}
@media (max-width: 767px) {
.Report-container_51429893 {
    min-width: 0
}
[dir] .Report-container_51429893 {
    padding: 1.25rem
}
  }
.Report-title_6a4b59b2 {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.56rem;

  font-size: 1rem;

  letter-spacing: 0;

  line-height: 1.625;
}
.Report-reportListItem_f8c2f61e {
  display: block;
  white-space: nowrap;
}
[dir] .Report-reportListItem_f8c2f61e {
  margin: 2em 0;
}
.Report-reportItemTitle_b0ae84a2 {
  line-height: 1.4;
  display: inline-block;
  vertical-align: middle;
}
[dir] .Report-reportItemTitle_b0ae84a2 {
  cursor: pointer;
}
[dir=ltr] .Report-reportItemTitle_b0ae84a2 {
 padding-left: 1.2em;
}
[dir=rtl] .Report-reportItemTitle_b0ae84a2 {
  padding-right: 1.2em;
}
.Report-reportItemLabel_98c06cf7 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: start;
      -ms-flex-align: start;
          align-items: start;
}
.Report-reportItemInput_e34b5e56 {
  clip: rect(0 0 0 0);
  height: 0.06rem;
  overflow: hidden;
  position: absolute;
  width: 0.06rem;
}
[dir] .Report-reportItemInput_e34b5e56 {
  border: 0;
  margin: -0.06rem;
  padding: 0;
}
.Report-checkMark_d48575a6 {
  color: #dbdbdb;
}
[dir] .Report-checkMark_d48575a6 {
  cursor: pointer;
}
.Report-checkMarkActive_337c4f8d {
    color: #0074e4;
  }
.Report-header_4aa3623c {
  font-weight: 400;
}
[dir] .Report-header_4aa3623c {
  padding: 1.56rem;
  border-bottom: 0.06rem solid rgba(143, 143, 143, 0.3);
}
[dir=ltr] .Report-header_4aa3623c {
 text-align: left;
}
[dir=rtl] .Report-header_4aa3623c {
  text-align: right;
}
[dir] .Report-content_e3120090 {
  padding: 1.56rem 1.56rem 0;
}
[dir] .Report-footer_9d0ac8d2 {
  text-align: center;
  border-top: 0.06rem solid rgba(143, 143, 143, 0.3);
  padding: 1.88rem 0;
}
.Report-learnMore_528dd156 {
  color: #0074e4;
}
.Report-button_635fee3a {
  width: 8.75rem;
  height: 2.5rem;
  font-size: 0.63rem;
  letter-spacing: 0.06rem;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.SubscribeButton-button_8fabba9c {
  width: 10rem;
  white-space: normal;
}
[dir] .SubscribeButton-button_8fabba9c {
  padding: 0 0.63rem;
}
.SubscribeButton-button_8fabba9c .SubscribeButton-hoveredLabel_e1dbb0cb { display: none; }
.SubscribeButton-button_8fabba9c .SubscribeButton-label_a8727ed8 { display: block; }
[dir] .SubscribeButton-button_8fabba9c:hover {
    background: var(--theme-custom-color-accent-hover);
  }
.SubscribeButton-button_8fabba9c:hover .SubscribeButton-hoveredLabel_e1dbb0cb {
      display: block;
    }
.SubscribeButton-button_8fabba9c:hover .SubscribeButton-label_a8727ed8 {
      display: none;
    }
@media (min-width: 1280px) {
.SubscribeButton-button_8fabba9c {
    width: 9.38rem
}
  }
.SubscribeButton-tooltip_7da8ab91 {
  top: -3rem;
  width: 15rem
}
[dir] .SubscribeButton-tooltip_7da8ab91::after {
    border: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ActionIcon-button_6018ca0b {
  color: inherit;
  height: 1.13rem;
  width: 1.06rem;
}
.ActionIcon-icon_ec1c8354 {
  height: 100%
}
.ActionIcon-icon_ec1c8354:hover {
    color: var(--theme-custom-color-accent);
  }
[dir] .ActionIcon-icon_ec1c8354:hover {
    cursor: pointer;
  }
[dir] .ActionIcon-icon_ec1c8354.ActionIcon-disabled_59fc81fc {
    cursor: not-allowed;
  }
@media (min-width: 1024px) {
[dir] .ActionIcon-icon_ec1c8354 {
    margin: 0
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BackToMods-backToMods_d5f68a17 {
  position: relative
}
[dir] .BackToMods-backToMods_d5f68a17 {
  padding-top: 2.5rem;
  padding-bottom: 5rem
}
.BackToMods-backToMods_d5f68a17::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 0.63rem;
    height: 0.06rem;
  }
[dir] .BackToMods-backToMods_d5f68a17::before {
    background-color: #535353;
  }
[dir=ltr] .BackToMods-backToMods_d5f68a17::before {
 left: 50%;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
  }
[dir=rtl] .BackToMods-backToMods_d5f68a17::before {
    right: 50%;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductSummaryCard-wishBtnContainer_eff48bd2 {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.ProductSummaryCard-icon_fb1e6d9d {
  width: 1rem;
}
.ProductSummaryCard-icon_fb1e6d9d svg {
    width: 100%;
  }
.ProductSummaryCard-icon_fb1e6d9d svg path {
      stroke: var(--theme-custom-color-accent-text);
    }
.ProductSummaryCard-icon_fb1e6d9d.ProductSummaryCard-filledHeart_4ab6f5ca path, .ProductSummaryCard-icon_fb1e6d9d.ProductSummaryCard-loading_2e5a576b path {
      fill: var(--theme-custom-color-accent-text);
    }
.ProductSummaryCard-tooltip_2c7a7095 {
  bottom: 1.75rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductSummaryCard-tooltip_2c7a7095 {
    bottom: 1.25rem
}
  }
[dir] .ProductSummaryCard-tooltip_2c7a7095::after {
    border: none;
  }
.ProductSummaryCard-summaryCard_833b2810 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  color: var(--theme-custom-color-primary-text);
}
[dir] .ProductSummaryCard-summaryCard_833b2810 {
  padding: 0;
  background-color: var(--theme-custom-color-primary);
}
@media (min-width: 768px) {
.ProductSummaryCard-summaryCard_833b2810 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
  }
.ProductSummaryCard-summaryCard_833b2810 {

  min-width: auto;

  /* using padding here to force square button rather then rectangle used in PDP description */
}
[dir] .ProductSummaryCard-summaryCard_833b2810 {

  padding: 0 1rem;
}
@media (min-width: 1024px) {
[dir] .ProductSummaryCard-summaryCard_833b2810 {
    padding: 0 0.75rem;
}
  }
@media (min-width: 1280px) {
[dir] .ProductSummaryCard-summaryCard_833b2810 {
    padding: 0 1.06rem;
}
  }
@media (min-width: 1440px) {
[dir] .ProductSummaryCard-summaryCard_833b2810 {
    padding: 0 1.06rem;
}
  }
.ProductSummaryCard-left_97f55e48 {
  width: auto;
  font-size: 1rem
}
@media (max-width: 767px) {
.ProductSummaryCard-left_97f55e48 {
    width: 100%
}
[dir] .ProductSummaryCard-left_97f55e48 {
    text-align: center
}
  }
.ProductSummaryCard-right_fbab4333 {
  width: auto
}
@media (max-width: 767px) {
.ProductSummaryCard-right_fbab4333 {
    width: 100%
}
[dir] .ProductSummaryCard-right_fbab4333 {
    margin-top: 1.88rem;
    text-align: center
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductListLayoutStyles-card_f2811213 {
  color: var(--theme-custom-color-primary-text)
}
[dir] .ProductListLayoutStyles-card_f2811213 {
  background-color: var(--theme-custom-color-primary)
}
[dir] .ProductListLayoutStyles-card_f2811213:not(:last-child) {
    margin-bottom: 1.25rem;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductListLayoutStyles-card_f2811213 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.ProductListLayoutStyles-card_f2811213 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e {
    position: relative;
  }
.ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
[dir] .ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    -webkit-transition: opacity 125ms ease-in-out;
    background: var(--theme-custom-color-primary-highlight);
  }
[dir=ltr] .ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e::before {
 left: 0;
  }
[dir=rtl] .ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    right: 0;
  }
.ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e:hover::before {
    opacity: 0.33;
  }
[dir] .ProductListLayoutStyles-card_f2811213.ProductListLayoutStyles-hasLink_30e0ae9e {

    cursor: pointer;
  }
.ProductListLayoutStyles-link_17027b18 {
  color: inherit;
  display: block;
}
.ProductListLayoutStyles-summary_461d09c9 {
  color: var(--theme-custom-color-primary-text)
}
[dir] .ProductListLayoutStyles-summary_461d09c9 {
  background-color: var(--theme-custom-color-primary)
}
[dir] .ProductListLayoutStyles-summary_461d09c9:not(:last-child) {
    margin-bottom: 1.25rem;
  }
.ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e {
    position: relative;
  }
.ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    -o-transition: opacity 125ms ease-in-out;
    transition: opacity 125ms ease-in-out;

    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
  }
[dir] .ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    -webkit-transition: opacity 125ms ease-in-out;
    background: var(--theme-custom-color-primary-highlight);
  }
[dir=ltr] .ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e::before {
 left: 0;
  }
[dir=rtl] .ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e::before {
    right: 0;
  }
.ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e:hover::before {
    opacity: 0.33;
  }
[dir] .ProductListLayoutStyles-summary_461d09c9.ProductListLayoutStyles-hasLink_30e0ae9e {

    cursor: pointer;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductListLayoutStyles-summary_461d09c9 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.ProductListLayoutStyles-summary_461d09c9 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.ProductListLayoutStyles-summary_461d09c9 {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center
}
[dir] .ProductListLayoutStyles-summary_461d09c9 {
  padding: 1.25rem;
  margin-top: 1.25rem
}
@media (min-width: 768px) {
.ProductListLayoutStyles-summary_461d09c9 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
[dir] .ProductListLayoutStyles-summary_461d09c9 {
    padding: 1.88rem 1rem
}
  }
@media (min-width: 1440px) {
[dir] .ProductListLayoutStyles-summary_461d09c9 {
    padding: 1.88rem 1.25rem
}
  }
@media (min-width: 1600px) {
[dir] .ProductListLayoutStyles-summary_461d09c9 {
    padding: 2.5rem 2rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.ProductCardIncludedTag-tag_9db45638 {
  font-size: 0.88rem;
  line-height: 1.25rem
}
@media (min-width: 1024px) and (max-width: 1279px) {
.ProductCardIncludedTag-tag_9db45638 {
    font-size: 0.75rem;
    line-height: 0.94rem
}
  }
@media (min-width: 1600px) {
.ProductCardIncludedTag-tag_9db45638 {
    font-size: 1rem
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.BundleIncludes-leftIncludedTag_9e03c052 {
  display: inline
}
@media (min-width: 768px) {
.BundleIncludes-leftIncludedTag_9e03c052 {
    display: none
}
  }
.BundleIncludes-leftLinkTag_ade1af00 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1
}
@media (max-width: 575px) {
.BundleIncludes-leftLinkTag_ade1af00 {
    display: none
}
  }
.BundleIncludes-rightIncludedTag_5f0fd7e6 {
  display: none
}
@media (min-width: 768px) {
.BundleIncludes-rightIncludedTag_5f0fd7e6 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
[dir] .BundleIncludes-rightIncludedTag_5f0fd7e6 {
    padding: 0.94rem 0
}
  }
@media (min-width: 1024px) {
[dir] .BundleIncludes-rightIncludedTag_5f0fd7e6 {
    padding: 0.78rem 0
}
  }
@media (min-width: 1280px) {
[dir] .BundleIncludes-rightIncludedTag_5f0fd7e6 {
    padding: 0.94rem 0
}
  }
.BundleIncludes-rightCardRating_3198de67 {
  display: inline;
  font-size: 0.88rem
}
@media (min-width: 768px) {
.BundleIncludes-rightCardRating_3198de67 {
    display: none
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .Collection-contentWrapper_4d5bfa0b {
  padding-top: 3.19rem;
}
[dir] .isLauncher .Collection-contentWrapper_4d5bfa0b {
    padding-top: 1.13rem;
  }
@media (min-width: 1024px) {
[dir] .Collection-contentWrapper_4d5bfa0b {
    padding-top: 0;
}

    [dir] .isLauncher .Collection-contentWrapper_4d5bfa0b {
      padding-top: 1.13rem;
    }
  }
@media (min-width: 1280px) {
[dir] .Collection-contentWrapper_4d5bfa0b {
    padding-top: 0;
}

    [dir] .isLauncher .Collection-contentWrapper_4d5bfa0b {
      padding-top: 1.13rem;
    }
  }
.Collection-section_4da8155c {
  overflow: hidden;
  position: relative;
}
[dir] .Collection-section_4da8155c {
  margin-bottom: 3.13rem;
}
.Collection-section_4da8155c > div {
    max-width: none !important;
  }
@media (min-width: 768px) {
[dir] .Collection-section_4da8155c {
    margin-bottom: 3.75rem
}
  }
@media (min-width: 768px) {
.Collection-bannerWithImage_057f5344 {
    overflow: visible
}
[dir] .Collection-bannerWithImage_057f5344 {
    margin-bottom: 0
}
  }
.Collection-fullbleedSection_f9e05ce1 {
  position: relative
}
@media (max-width: 767px) {
[dir] .Collection-fullbleedSection_f9e05ce1 {
    padding: 0 !important
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CollectionWrapper-section_fcd2d921 {
  position: relative;
  overflow: hidden
}
[dir] .CollectionWrapper-section_fcd2d921 {
  margin-bottom: 3.13rem
}
@media (min-width: 768px) {
[dir] .CollectionWrapper-section_fcd2d921 {
    margin-bottom: 3.75rem
}
  }
.CollectionWrapper-section_fcd2d921 > div {
    max-width: none !important;
  }
.CollectionWrapper-fullbleedSection_a1057c61 {
  position: relative
}
@media (max-width: 767px) {
[dir] .CollectionWrapper-fullbleedSection_a1057c61 {
    padding: 0 !important
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.StorePlaceholder-wrapper_4fef3ccd {
  display: block;
  overflow: hidden;
}
[dir] .StorePlaceholder-wrapper_4fef3ccd span {
    margin-bottom: 1.25rem
  }
@media (min-width: 1280px) {

  [dir] .StorePlaceholder-wrapper_4fef3ccd span {
      margin-bottom: 1.88rem
  }
    }
.StorePlaceholder-fullHeight_e670cb03 {
  height: 100%;
}
[dir] .StorePlaceholder-freeGamesWrapper_d5c799c5 {
  margin-bottom: calc(1.25rem + (1.25rem / 2));
}
.StorePlaceholder-freeGames_be20f38b,
.StorePlaceholder-bannerCard_3bfcfbd5,
.StorePlaceholder-search_a2c0558b {
  display: block;
}
[dir] .StorePlaceholder-freeGames_be20f38b, [dir] .StorePlaceholder-bannerCard_3bfcfbd5, [dir] .StorePlaceholder-search_a2c0558b {
  background-color: #202020;
}
.StorePlaceholder-freeGames_be20f38b {
  height: 21.88rem
}
@media (min-width: 1024px) {
.StorePlaceholder-freeGames_be20f38b {
    height: 13.75rem
}
  }
@media (min-width: 1280px) {
.StorePlaceholder-freeGames_be20f38b {
    height: 15rem
}
  }
.StorePlaceholder-search_a2c0558b {
  height: 3.75rem;
}
.StorePlaceholder-bannerCard_3bfcfbd5 {
}
.StorePlaceholder-smallStoreCardRow_9f664ba7 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between
}
@media (min-width: 768px) {
.StorePlaceholder-smallStoreCardRow_9f664ba7 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
.StorePlaceholder-smallStoreCard_10186855 {
  display: block
}
@media (min-width: 768px) {
.StorePlaceholder-smallStoreCard_10186855 {
    width: calc((100% - 1.25rem) / 2)
}
  }
@media (min-width: 1280px) {
.StorePlaceholder-smallStoreCard_10186855 {
    width: calc((100% - 1.25rem) / 2)
}
  }
.StorePlaceholder-smallStoreCard_10186855::before {
    position: relative;

    content: '';
    display: block;
  }
[dir] .StorePlaceholder-smallStoreCard_10186855::before {
    padding-bottom: calc(9 / 16 * 100%);
    background-color: #202020;
  }
.StorePlaceholder-smallStoreCard_10186855::before .StorePlaceholder-inner_b1cea7be {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.StorePlaceholder-smallStoreCard_10186855::after {
    content: '';
    display: block;
    height: 4.38rem;
  }
[dir] .StorePlaceholder-smallStoreCard_10186855::after {
    background-color: #2b2b2b;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Banner-bannerPlaceholder_b69911b8 {
  position: relative;
}
[dir] .Banner-bannerPlaceholder_b69911b8 {
  padding-bottom: calc(9 / 16 * 100%);

  background-color: #2b2b2b;
}
.Banner-bannerPlaceholder_b69911b8 .Banner-inner_4a3377be {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.Banner-bannerPlaceholder_b69911b8 .Banner-image_658d4940 {
    width: 100%;
    height: 100%;
    position: absolute;
  }
[dir=ltr] .Banner-bannerPlaceholder_b69911b8 .Banner-image_658d4940 {
 left: 50%;
 -webkit-transform: translate(-50%);
 -ms-transform: translate(-50%);
 transform: translate(-50%);
  }
[dir=rtl] .Banner-bannerPlaceholder_b69911b8 .Banner-image_658d4940 {
    right: 50%;
    -webkit-transform: translate(50%);
        -ms-transform: translate(50%);
            transform: translate(50%);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.MarkdownRenderers-contentParagraph_abec2e76 {
  color: #959595;
  font-size: 0.75rem
}
[dir] .MarkdownRenderers-contentParagraph_abec2e76 {
  border-bottom: 0.06rem solid #323232;
  padding: 1.5rem 0
}
[dir] .MarkdownRenderers-contentParagraph_abec2e76:first-child {
    padding-top: 0;
  }
[dir] .MarkdownRenderers-contentParagraph_abec2e76:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
.MarkdownRenderers-contentParagraph_abec2e76 strong {
    text-transform: uppercase;
    color: #fff;
  }
.MarkdownRenderers-contentTable_4c64849d {
  border-collapse: separate;
  border-spacing: 3.13rem 0;
}
[dir] .MarkdownRenderers-contentTable_4c64849d {
  margin-top: 1.5rem;
}
[dir=ltr] .MarkdownRenderers-contentTable_4c64849d {
 text-align: left !important;
 margin-left: -3.13rem;
 margin-right: -3.13rem;
}
[dir=rtl] .MarkdownRenderers-contentTable_4c64849d {
  text-align: right !important;
  margin-right: -3.13rem;
  margin-left: -3.13rem;
}
.MarkdownRenderers-contentTable_4c64849d th {
    vertical-align: top;
    font-weight: normal;
  }
[dir] .MarkdownRenderers-contentTable_4c64849d th {
    padding-bottom: 1rem;
  }
[dir=ltr] .MarkdownRenderers-contentTable_4c64849d th {
 text-align: left !important;
  }
[dir=rtl] .MarkdownRenderers-contentTable_4c64849d th {
    text-align: right !important;
  }
[dir=ltr] .MarkdownRenderers-contentTable_4c64849d td {
 text-align: left !important;
  }
[dir=rtl] .MarkdownRenderers-contentTable_4c64849d td {
    text-align: right !important;
  }
.MarkdownRenderers-contentAbout_bd378797 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
[dir] .MarkdownRenderers-contentAbout_bd378797 {

  margin-bottom: 1rem
}
[dir] .MarkdownRenderers-contentAbout_bd378797:first-child {
    margin-top: 0;
  }
[dir] .MarkdownRenderers-contentAbout_bd378797:last-child {
    margin-bottom: 0;
  }
.MarkdownRenderers-contentAboutHeading_1a85e61f {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #f4f4f4;
  }
[dir] .MarkdownRenderers-contentAboutHeading_1a85e61f {
    margin-bottom: 0.5rem;
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.MarkdownRenderers-contentAbout_bd378797 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1600px) {
.MarkdownRenderers-contentAbout_bd378797 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625
}
  }
.MarkdownRenderers-faqQuestion_a6c96b3c {
  text-transform: uppercase;
  color: #fff;
  font-size: 0.69rem;
}
[dir] .MarkdownRenderers-faqQuestion_a6c96b3c {
  margin-bottom: 1rem;
}
[dir="ltr"] .MarkdownRenderers-faqAnswer_22209602{
  margin-left: 0
}
[dir="rtl"] .MarkdownRenderers-faqAnswer_22209602{
  margin-right: 0
}
.MarkdownRenderers-faqAnswer_22209602 {
  color: #989898;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .Section-groupContainer_9a583eb1 {
  padding: 1.5rem 0;
}
/* group content */
.Section-group_f1031075 > div:nth-child(1) {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
.Section-section_38ed2f39 {
  position: relative
}
[dir] .Section-section_38ed2f39 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}
[dir] .Section-section_38ed2f39:first-child {
    padding-top: 0;
  }
[dir] .Section-section_38ed2f39:last-child {
    padding-bottom: 0;
  }
.Section-markdownContainer_71555f0d {
  -webkit-flex: 1 1 75%;
      -ms-flex: 1 1 75%;
          flex: 1 1 75%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  line-height: 1.44rem;
  word-break: break-word;
}
[dir] .Section-markdownContainer_71555f0d {
  background: #202020;
  padding: 1.25rem;
}
[dir=ltr] .Section-markdownContainer_71555f0d {
 text-align: left;
}
[dir=rtl] .Section-markdownContainer_71555f0d {
  text-align: right;
}
.Section-markdownContainer_71555f0d strong {
    color: #f4f4f4;
  }
@media (min-width: 768px) {
.Section-markdownContainer_71555f0d {
    line-height: 1.5rem
}
  }
.Section-markdownContainer_71555f0d a,
  .Section-markdownContainer_71555f0d a:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
  }
@media (min-width: 768px) {
.Section-markdownContainer_71555f0d {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
[dir] .Section-markdownContainer_71555f0d {
    padding: 1.88rem
}
  }
@media (min-width: 1280px) {
[dir] .Section-markdownContainer_71555f0d {
    padding: 3rem 3.13rem
}
  }
[dir] .Section-markdownContainer_71555f0d.Section-about_8ff56776 {
    background: none;
    padding: 0 0 3rem;
    border-bottom: 0.06rem solid #353535;
  }
[dir] .Section-faqBlock_37505b68 {
  border-bottom: 0.06rem solid #323232;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem
}
[dir] .Section-faqBlock_37505b68:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .Promotion-custom_2cd488b2 {
  background-color: var(--theme-custom-color-primary-bg)
}
.Promotion-custom_2cd488b2 .Promotion-contentContainer_cb9bde62 button {
    color: var(--theme-custom-color-primary);
  }
.Promotion-heading_4d7d5387 {
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  line-height: 1.25;

  line-height: 1.3;
  white-space: normal
}
[dir] .Promotion-heading_4d7d5387 {
  margin-bottom: 0.5rem
}
@media (min-width: 1280px) {
.Promotion-heading_4d7d5387 {
    font-size: 1.88rem;
    letter-spacing: -0.02rem;
    line-height: 1
}
  }
.Promotion-content_56ebd491 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  display: block;
  opacity: 0.6
}
@media (min-width: 768px) {
[dir] .Promotion-content_56ebd491 {
    margin-top: 0
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.Promotion-content_56ebd491 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 768px) {
[dir=ltr] .Promotion-ctaWrapper_70a22494 {
  padding-left: calc(100vw / 48 * 2)
}
[dir=rtl] .Promotion-ctaWrapper_70a22494 {
    padding-right: calc(100vw / 48 * 2)
}
  }
@media (min-width: 1024px) {
[dir=ltr] .Promotion-ctaWrapper_70a22494 {
  padding-left: calc(100vw / 64 * 2)
}
[dir=rtl] .Promotion-ctaWrapper_70a22494 {
    padding-right: calc(100vw / 64 * 2)
}
  }
@media (min-width: 1280px) {
[dir=ltr] .Promotion-ctaWrapper_70a22494 {
  padding-left: calc(100vw / 64 * 2)
}
[dir=rtl] .Promotion-ctaWrapper_70a22494 {
    padding-right: calc(100vw / 64 * 2)
}
  }
@media (min-width: 1440px) {
[dir=ltr] .Promotion-ctaWrapper_70a22494 {
  padding-left: calc(100vw / 64 * 2)
}
[dir=rtl] .Promotion-ctaWrapper_70a22494 {
    padding-right: calc(100vw / 64 * 2)
}
  }
[dir] .Promotion-ctaWrapper_70a22494:empty {
    padding: 0;
  }
[dir] .Promotion-button_6b91172b {
  margin: 1.88rem auto
}
@media (min-width: 768px) {
[dir=ltr] .Promotion-button_6b91172b {
  margin: 1.88rem auto 0 0
}
[dir=rtl] .Promotion-button_6b91172b {
    margin: 1.88rem 0 0 auto
}
  }
[dir] .Promotion-bannerPlaceholder_dca3d01c {
  background: #2b2b2b;
  margin-bottom: 1.5rem;
}
.Promotion-bannerPlaceholder_dca3d01c img {
    width: 100%;
    display: block;
  }
@media (max-width: 767px) {
[dir] .Promotion-title_e8a1fc8c, [dir] .Promotion-heading_4d7d5387, [dir] .Promotion-content_56ebd491 {
    text-align: center
}
  }
.Promotion-splitSection_360f4700 {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column
}
@media (min-width: 768px) {
.Promotion-splitSection_360f4700 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
[dir] .Promotion-splitSection_360f4700 {
    margin-bottom: 0.63rem
}
  }
.Promotion-splitCard_8f5464cb {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%
}
[dir] .Promotion-splitCard_8f5464cb {
  padding: 3.38rem 3.75rem;
  background: #2b2b2b
}
@media (min-width: 768px) {
.Promotion-splitCard_8f5464cb {
    width: 50%
}
[dir] .Promotion-splitCard_8f5464cb {
    padding: 1.25rem
}
  }
@media (min-width: 1024px) {
[dir] .Promotion-splitCard_8f5464cb {
    padding: 1.69rem 1.88rem
}
  }
@media (min-width: 1280px) {
[dir] .Promotion-splitCard_8f5464cb {
    padding: 2.25rem 3.13rem
}
  }
.Promotion-splitCard_8f5464cb > h3 {
    white-space: normal;
    font-size: 1.25rem;
    line-height: 1.56rem
  }
[dir] .Promotion-splitCard_8f5464cb > h3 {
    margin-bottom: 0
  }
@media (min-width: 768px) {

  .Promotion-splitCard_8f5464cb > h3 {
      font-size: 1rem;
      line-height: 1.38rem
  }

  [dir] .Promotion-splitCard_8f5464cb > h3 {
      text-align: center
  }
    }
@media (min-width: 1024px) {

  .Promotion-splitCard_8f5464cb > h3 {
      font-size: 1.25rem;
      line-height: 1.75rem
  }
    }
@media (min-width: 1280px) {

  .Promotion-splitCard_8f5464cb > h3 {
      font-size: 1.44rem
  }
    }
[dir] .Promotion-splitCard_8f5464cb:nth-child(1) {
    background: #331f39;
    margin-bottom: 0.63rem
  }
@media (min-width: 768px) {
[dir] .Promotion-splitCard_8f5464cb:nth-child(1) {
      margin-bottom: 0
  }
[dir=ltr] .Promotion-splitCard_8f5464cb:nth-child(1) {
  margin-right: 0.31rem
  }
[dir=rtl] .Promotion-splitCard_8f5464cb:nth-child(1) {
      margin-left: 0.31rem
  }
    }
[dir] .Promotion-splitCard_8f5464cb:nth-child(3) {
    background: #361f28
  }
@media (min-width: 768px) {
[dir=ltr] .Promotion-splitCard_8f5464cb:nth-child(3) {
  margin-left: 0.31rem
  }
[dir=rtl] .Promotion-splitCard_8f5464cb:nth-child(3) {
      margin-right: 0.31rem
  }
    }
.Promotion-splitDivider_5a02ce0c {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.56rem;
  height: 1.56rem;
  font-size: 1.38rem;
  line-height: 0;
  color: #fff;
  overflow: hidden;
  z-index: 1
}
[dir] .Promotion-splitDivider_5a02ce0c {
  border-radius: 50%;
  margin-bottom: -1.56rem
}
[dir=ltr] .Promotion-splitDivider_5a02ce0c {
 -webkit-transform: translate(-50%, calc(-50% - 0.31rem));
 -ms-transform: translate(-50%, calc(-50% - 0.31rem));
 transform: translate(-50%, calc(-50% - 0.31rem));
 background: -webkit-linear-gradient(315deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
 background: -o-linear-gradient(315deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
 background: linear-gradient(135deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
 margin-left: 50%
}
[dir=rtl] .Promotion-splitDivider_5a02ce0c {
  -webkit-transform: translate(50%, calc(-50% - 0.31rem));
      -ms-transform: translate(50%, calc(-50% - 0.31rem));
          transform: translate(50%, calc(-50% - 0.31rem));
  background: -webkit-linear-gradient(-315deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
  background: -o-linear-gradient(-315deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
  background: linear-gradient(-135deg, rgb(146, 45, 217) 0%, rgb(255, 49, 127) 100%);
  margin-right: 50%
}
@media (min-width: 768px) {
.Promotion-splitDivider_5a02ce0c {
    position: absolute;
    top: 50%
}
[dir=ltr] .Promotion-splitDivider_5a02ce0c {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-left: 0
}
[dir=rtl] .Promotion-splitDivider_5a02ce0c {
    right: 50%;
    -webkit-transform: translate(50%, -50%);
        -ms-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
    margin-right: 0
}
  }
.Promotion-splitCta_4fd88a7c {
  display: block;
  width: 100%;
}
.Promotion-fullWidthButton_f6a81727 {
  width: 100%;
}
[dir] .Promotion-fullWidthButton_f6a81727 {
  margin: 0;
}
[dir] .Promotion-promoNavigation_01d1ba3f {
  padding-top: 1.88rem 0
}
[dir] .Promotion-promoNavigation_01d1ba3f.Promotion-isLauncher_3d9e79e5 {
    margin: 3rem 0 2rem;
  }
.Promotion-image_0f31ec81 {
  width: calc(100% - 3.75rem)
}
[dir] .Promotion-image_0f31ec81 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 1.44rem
}
@media (min-width: 768px) {
.Promotion-image_0f31ec81 {
    width: 30%
}
  }
@media (min-width: 1024px) {
[dir] .Promotion-image_0f31ec81 {
    margin-bottom: 0
}
  }
.Promotion-freeBody_a1128933 {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column /* button height + 20px */
}
[dir] .Promotion-freeBody_a1128933 {
  padding: 0 3.75rem;
  padding-bottom: 4.38rem
}
@media (min-width: 768px) {
.Promotion-freeBody_a1128933 {
    width: 70%;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start
}
[dir=ltr] .Promotion-freeBody_a1128933 {
  padding: 0 0 0 1.88rem
}
[dir=rtl] .Promotion-freeBody_a1128933 {
    padding: 0 1.88rem 0 0
}
  }
@media (min-width: 1024px) {
.Promotion-freeBody_a1128933 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
  }
.Promotion-contentWrapper_aa31f1cb {
  position: relative
}
[dir] .Promotion-contentWrapper_aa31f1cb {
  padding-top: 5rem
}
@media (min-width: 1024px) {
[dir] .Promotion-contentWrapper_aa31f1cb {
    padding-top: 0
}
  }
[dir] .isLauncher .Promotion-contentWrapper_aa31f1cb {
    margin: auto;
  }
@media (max-width: 1023px) {
[dir=ltr] .Promotion-contentContainer_cb9bde62 {
  margin-right: 1.25rem;
  margin-left: 1.25rem
}
[dir=rtl] .Promotion-contentContainer_cb9bde62 {
    margin-left: 1.25rem;
    margin-right: 1.25rem
}
  }
[dir] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {
    margin-bottom: 0.5rem;
  }
[dir=ltr] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {
 float: right;
 margin-left: 5rem;
  }
[dir=rtl] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {

    float: left;
    margin-right: 5rem;
  }
.Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff > button {
      width: 100%;
    }
@media (max-width: 767px) {

  [dir] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {
      float: none;
      margin-bottom: 1.5rem;
      margin-top: 1.5rem
  }

  [dir=ltr] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {
  margin-left: 0
  }

  [dir=rtl] .Promotion-contentContainer_cb9bde62 .Promotion-firstSection_e36d80ff {
      margin-right: 0
  }
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .ClaimButton-error_b93ef6c8 {
  background-color: #e63c3c;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CouponView-contentWrapper_3572c02a > div {
    width: 100%;
  }
.CouponView-couponGridItem_c91834db {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  color: var(--color-white-light);
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 514Px
}
[dir] .CouponView-couponGridItem_c91834db {
  margin: 1.25rem
}
@media (max-width: 1023px) {
.CouponView-couponGridItem_c91834db {
    max-width: unset
}
  }
.CouponView-rowPlaceholder_7e87eae2 {
  display: block;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}
.CouponView-flexGrid_b8eee5d3 {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: 100%;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CouponBanner-container_e4d81243 {
  display: block;
  min-width: 21.88rem;
  width: 100%;
}
.CouponBanner-image_b4c28270 {
  display: block;
  width: inherit;
}
.CouponBanner-image_b4c28270 img {
    width: inherit;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CouponPlaceholder-wrapper_16c3760f {

  display: block;
}
[dir] .CouponPlaceholder-wrapper_16c3760f .CouponPlaceholder-placeholderAsset_2469c26b::after, [dir] .CouponPlaceholder-wrapper_16c3760f .CouponPlaceholder-placeholderContent_f5f0a9bb {
    background-color: var(--theme-custom-color-primary);
  }
.CouponPlaceholder-wrapper_16c3760f .CouponPlaceholder-placeholderAsset_2469c26b::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .CouponPlaceholder-wrapper_16c3760f .CouponPlaceholder-placeholderAsset_2469c26b::after {
    border-radius: 50%;
  }
.CouponPlaceholder-gamePlaceholder_b4f97726 {
  position: relative;

  display: block;
  opacity: 0.3;
}
[dir] .CouponPlaceholder-gamePlaceholder_b4f97726 {
  padding-bottom: calc(9 / 16 * 100%);
  background-color: #2b2b2b;
}
.CouponPlaceholder-gamePlaceholder_b4f97726 .CouponPlaceholder-inner_54d900b3 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.CouponPlaceholder-gameButton_65e4ddd2 {
  height: 4.06rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
[dir] .CouponPlaceholder-gameButton_65e4ddd2 {
  background-color: #202020;
}
[dir=ltr] .CouponPlaceholder-gameButton_65e4ddd2 {

 padding-left: 1.5rem;
}
[dir=rtl] .CouponPlaceholder-gameButton_65e4ddd2 {
  padding-right: 1.5rem;
}
.CouponPlaceholder-buttonInner_885a5f94 {
  display: block;
  height: 0.75rem;
  width: 19%
}
@media (min-width: 1024px) {
.CouponPlaceholder-buttonInner_885a5f94 {
    width: 29%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CouponShowDetails-main_0019886b {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-weight: 500;

  color: #f4f4f4;
  text-transform: uppercase;
}
[dir] .CouponShowDetails-main_0019886b {
  margin-top: 2em;
}
.CouponShowDetails-main_0019886b a,
  .CouponShowDetails-main_0019886b a:visited {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;
    font-size: 0.69rem;
    letter-spacing: 0.03rem;

    color: #f4f4f4;
    text-decoration: none;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.CouponGridItem-couponDetails_f80d67f6 {
  color: rgba(245, 245, 245, 0.6);
}
[dir] .CouponGridItem-couponDetails_f80d67f6 {
  margin-top: 0.5em;
}
[dir] .CouponGridItem-couponName_9a776bba {
  margin-top: 1em;
}
.CouponGridItem-placeholder_0f07b48f {
  min-width: 514Px;
  width: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .DiscoverPlaceholder-wrapper_30b9e6c3 {

  background-color: inherit;
}
[dir] .DiscoverPlaceholder-wrapper_30b9e6c3 .DiscoverPlaceholder-placeholderAsset_0a32951d::after, [dir] .DiscoverPlaceholder-wrapper_30b9e6c3 .DiscoverPlaceholder-placeholderContent_ade79d3e {
    background-color: var(--theme-custom-color-primary);
  }
.DiscoverPlaceholder-wrapper_30b9e6c3 .DiscoverPlaceholder-placeholderAsset_0a32951d::after {
    content: '';
    display: block;
    height: 2.63rem;
    width: 2.63rem;
  }
[dir] .DiscoverPlaceholder-wrapper_30b9e6c3 .DiscoverPlaceholder-placeholderAsset_0a32951d::after {
    border-radius: 50%;
  }
[dir] .DiscoverPlaceholder-featuredCarousel_e72f3a59 {
  background-color: #2b2b2b;
  margin-bottom: 4.38rem
}
@media (min-width: 1024px) {
.DiscoverPlaceholder-featuredCarousel_e72f3a59 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
  }
@media (min-width: 1024px) {

  .DiscoverPlaceholder-featuredCarousel_e72f3a59 .DiscoverPlaceholder-imageWrapper_5ede61c0 {
      -webkit-flex-basis: calc(30 / 49 * 100%);
          -ms-flex-preferred-size: calc(30 / 49 * 100%);
              flex-basis: calc(30 / 49 * 100%);
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0
  }
    }
[dir] .DiscoverPlaceholder-featuredCarousel_e72f3a59 .DiscoverPlaceholder-image_6b6fdf75 {
    padding-bottom: calc(9 / 16 * 100%);
  }
.DiscoverPlaceholder-featuredCarousel_e72f3a59 .DiscoverPlaceholder-text_b3b6199c {
    height: 14.38rem
  }
@media (min-width: 768px) {

  .DiscoverPlaceholder-featuredCarousel_e72f3a59 .DiscoverPlaceholder-text_b3b6199c {
      height: 10.88rem
  }
    }
@media (min-width: 1024px) {

  .DiscoverPlaceholder-featuredCarousel_e72f3a59 .DiscoverPlaceholder-text_b3b6199c {
      height: 100%
  }
    }
.DiscoverPlaceholder-cardGroup_e93a930c {
  overflow: hidden
}
[dir] .DiscoverPlaceholder-cardGroup_e93a930c {
  margin-bottom: 6.56rem
}
@media (min-width: 768px) {
[dir] .DiscoverPlaceholder-cardGroup_e93a930c {
    margin-bottom: 5.63rem
}
  }
.DiscoverPlaceholder-cardHeadingContainer_0b330d3c {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.DiscoverPlaceholder-cardGrid_5a162477 {
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
[dir] .DiscoverPlaceholder-cardGrid_5a162477 {
  margin: 0 -0.5rem;
}
.DiscoverPlaceholder-card_6e205a3b {
  display: block;
  overflow: hidden;
}
[dir] .DiscoverPlaceholder-card_6e205a3b {
  padding-bottom: calc(1rem / 2);
}
[dir=ltr] .DiscoverPlaceholder-card_6e205a3b {

 padding-left: calc(1rem / 2);

 padding-right: calc(1rem / 2);
}
[dir=rtl] .DiscoverPlaceholder-card_6e205a3b {
  padding-right: calc(1rem / 2);
  padding-left: calc(1rem / 2);
}
[dir] .DiscoverPlaceholder-card_6e205a3b .DiscoverPlaceholder-copy_d17802bd:nth-child(2) {
    margin-top: 0.94rem;
  }
@media (min-width: 768px) {
.DiscoverPlaceholder-cardOneOfTwo_3dd7cbc5 {
    -webkit-flex-basis: calc(100% / 2);
        -ms-flex-preferred-size: calc(100% / 2);
            flex-basis: calc(100% / 2);
    min-width: calc(100% / 2);
    width: calc(100% / 2)
}
  }
@media (min-width: 768px) {
.DiscoverPlaceholder-cardOneOfFive_f1b49b62 {
    -webkit-flex-basis: calc(100% / 4);
        -ms-flex-preferred-size: calc(100% / 4);
            flex-basis: calc(100% / 4);
    min-width: calc(100% / 4);
    width: calc(100% / 4)
}
  }
@media (min-width: 1024px) {
.DiscoverPlaceholder-cardOneOfFive_f1b49b62 {
    -webkit-flex-basis: calc(100% / 5);
        -ms-flex-preferred-size: calc(100% / 5);
            flex-basis: calc(100% / 5);
    min-width: calc(100% / 5);
    width: calc(100% / 5)
}
  }
@media (max-width: 767px) {
.DiscoverPlaceholder-cardLandscape_4104e2a5 {
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-flex-basis: calc(19.69rem + 1rem);
        -ms-flex-preferred-size: calc(19.69rem + 1rem);
            flex-basis: calc(19.69rem + 1rem);
    min-width: calc(19.69rem + 1rem);
    width: calc(19.69rem + 1rem)
}
  }
[dir] .DiscoverPlaceholder-cardLandscape_4104e2a5 .DiscoverPlaceholder-placeholderImage_cf9bd23a {
    padding-bottom: calc((9 / 16 * 100%) + 1.69rem);
  }
@media (max-width: 767px) {
.DiscoverPlaceholder-cardPortrait_c6481f9f {
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-flex-basis: calc(13.13rem + 1rem);
        -ms-flex-preferred-size: calc(13.13rem + 1rem);
            flex-basis: calc(13.13rem + 1rem);
    min-width: calc(13.13rem + 1rem);
    width: calc(13.13rem + 1rem)
}
  }
.DiscoverPlaceholder-cardPortrait_c6481f9f .DiscoverPlaceholder-placeholderImage_cf9bd23a {
    position: relative;
  }
[dir] .DiscoverPlaceholder-cardPortrait_c6481f9f .DiscoverPlaceholder-placeholderImage_cf9bd23a {
    padding-bottom: calc(4 / 3 * 100%);
  }
.DiscoverPlaceholder-cardPortrait_c6481f9f .DiscoverPlaceholder-placeholderImage_cf9bd23a .DiscoverPlaceholder-inner_59640a2c {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.DiscoverPlaceholder-title_138074e9 {
  display: block;
  height: 1.25rem;
  width: 50%;
}
[dir] .DiscoverPlaceholder-title_138074e9 {
  margin-bottom: 0.94rem;
}
.DiscoverPlaceholder-button_7c271fd3 {
  height: 1.88rem;
  width: 5rem;
}
.DiscoverPlaceholder-copy_d17802bd {
  display: block;
  height: 0.75rem
}
[dir] .DiscoverPlaceholder-copy_d17802bd {
  margin-bottom: 0.31rem
}
[dir=ltr] .DiscoverPlaceholder-copy_d17802bd {

 margin-right: 35%
}
[dir=rtl] .DiscoverPlaceholder-copy_d17802bd {
  margin-left: 35%
}
[dir] .DiscoverPlaceholder-copy_d17802bd:not(:nth-child(2n)) {
    margin-bottom: 1.56rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Discover-pageWrapper_b7216868 {
}
[dir] .Discover-customTheme_cc609da3 {
  background-color: var(--theme-custom-color-primary-bg);
}
[dir] .Discover-loading_2b213d1e {
  padding-top: 6.5rem;
}
.Discover-section_121fb922 {
  position: relative
}
[dir] .Discover-section_121fb922 {
  margin-bottom: 3.13rem
}
@media (min-width: 768px) {
[dir] .Discover-section_121fb922 {
    margin-bottom: 3.75rem
}
  }
.Discover-section_121fb922 > div {
    max-width: none !important;
  }
.Discover-sectionOverlapped_0564d960 {
  overflow: visible;
}
.Discover-fullbleedSection_9aa7215d {
  position: relative
}
@media (max-width: 767px) {
[dir] .Discover-fullbleedSection_9aa7215d {
    padding: 0 !important
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Slider-container_202a56fa {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-size: 1rem;
  line-height: normal
}
.Slider-container_202a56fa:focus {
    outline: none;
  }
.Slider-track_b07b2c18 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative
}
@media (min-width: 1024px) {
.Slider-track_b07b2c18 {
    height: 100%
}
  }
/**
 * This is counter-intuitive, but by
 * setting touch-action:pan-y, we are
 * telling the browser to ignore x-axis
 * gestures. However, since useDrag still
 * tracks the x-axis gestures, the result
 * is a carousel that doesn't respond on
 * page scroll, and only responds to
 * horizontal gestures
**/
.Slider-trackHorizontalOnly_6eada5a5 {
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.Slider-item_464ce6d5 {
  height: 100%;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FeaturedCarouselArrows-root_a0fe70f1.FeaturedCarouselArrows-darkBackground_869a45e7 {
    color: #fff;
  }
.FeaturedCarouselArrows-root_a0fe70f1:not(.FeaturedCarouselArrows-darkBackground_869a45e7) {
    color: #000;
  }
.FeaturedCarouselArrows-button_a7c6a178 {
  color: inherit;
  -o-transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir] .FeaturedCarouselArrows-button_a7c6a178 {
  padding: 0.94rem;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir] .FeaturedCarouselArrows-root_a0fe70f1.FeaturedCarouselArrows-darkBackground_869a45e7 .FeaturedCarouselArrows-button_a7c6a178:hover, [dir] .FeaturedCarouselArrows-root_a0fe70f1.FeaturedCarouselArrows-darkBackground_869a45e7 .FeaturedCarouselArrows-button_a7c6a178:focus {
    background-color: rgba(255, 255, 255, 0.3);
  }
[dir] .FeaturedCarouselArrows-root_a0fe70f1:not(.FeaturedCarouselArrows-darkBackground_869a45e7) .FeaturedCarouselArrows-button_a7c6a178:hover, [dir] .FeaturedCarouselArrows-root_a0fe70f1:not(.FeaturedCarouselArrows-darkBackground_869a45e7) .FeaturedCarouselArrows-button_a7c6a178:focus {
    background-color: rgba(0, 0, 0, 0.1);
  }
.FeaturedCarouselArrows-icon_e52c863b {
  width: 0.63rem;
  height: 0.63rem;
}
[dir=ltr] .FeaturedCarouselArrows-iconPrevious_1f1dc5b5 {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }
[dir=rtl] .FeaturedCarouselArrows-iconPrevious_1f1dc5b5 {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
[dir=rtl] .FeaturedCarouselArrows-iconNext_d9c03816 {
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FeaturedCarouselPagination-root_736915c1 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.FeaturedCarouselPagination-list_a9e2084b {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}
[dir] .FeaturedCarouselPagination-list_a9e2084b {
  margin: 0;
  padding: 0;
}
.FeaturedCarouselPagination-progressCircle_3604fecb {
  width: 1.25rem;
  height: 1.25rem
}
[dir=ltr] .FeaturedCarouselPagination-progressCircle_3604fecb:not(:first-child) {
 margin-left: 0.5rem;
  }
[dir=rtl] .FeaturedCarouselPagination-progressCircle_3604fecb:not(:first-child) {
    margin-right: 0.5rem;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .PaginationIndicator-button_d975879b {
  padding: 1.06rem;
}
.PaginationIndicator-indicator_81c6b1c2 {
  display: block;
  height: 0.38rem;
  width: 0.38rem;
  position: relative;
  -o-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
[dir] .PaginationIndicator-indicator_81c6b1c2 {
  border-radius: 50%;
  -webkit-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
[dir] .PaginationIndicator-button_d975879b.PaginationIndicator-darkBackground_f45118fd .PaginationIndicator-indicator_81c6b1c2 {
    background-color: rgba(255, 255, 255, 0.3);
  }
[dir] .PaginationIndicator-button_d975879b:not(.PaginationIndicator-darkBackground_f45118fd) .PaginationIndicator-indicator_81c6b1c2 {
    background-color: rgba(0, 0, 0, 0.3);
  }
[dir] .PaginationIndicator-button_d975879b.PaginationIndicator-noTouch_152f05bd.PaginationIndicator-darkBackground_f45118fd:hover .PaginationIndicator-indicator_81c6b1c2, [dir] .PaginationIndicator-button_d975879b.PaginationIndicator-darkBackground_f45118fd:focus .PaginationIndicator-indicator_81c6b1c2 {
    background-color: #fff;
  }
[dir] .PaginationIndicator-button_d975879b.PaginationIndicator-noTouch_152f05bd.:not(.PaginationIndicator-darkBackground_f45118fd):hover .PaginationIndicator-indicator_81c6b1c2, [dir] .PaginationIndicator-button_d975879b:not(.PaginationIndicator-darkBackground_f45118fd):focus .PaginationIndicator-indicator_81c6b1c2 {
    background-color: #000;
  }
[dir] .PaginationIndicator-button_d975879b.PaginationIndicator-darkBackground_f45118fd .PaginationIndicator-indicatorActive_f322f225 {
    background-color: #fff;
  }
[dir] .PaginationIndicator-button_d975879b:not(.PaginationIndicator-darkBackground_f45118fd) .PaginationIndicator-indicatorActive_f322f225 {
    background-color: #000;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir=ltr] .ProgressCircle-svg_cd820ea9 {
 -webkit-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
[dir=rtl] .ProgressCircle-svg_cd820ea9 {
    -webkit-transform: rotate(-90deg) !important;
        -ms-transform: rotate(-90deg) !important;
            transform: rotate(-90deg) !important;
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  }
[dir] .ProgressCircle-button_38d921dd {
  border: solid 1Px transparent
}
.ProgressCircle-button_38d921dd:focus {
    opacity: 1;
    outline: 0;
  }
[dir] .ProgressCircle-button_38d921dd:focus {
    border-color: #fff;
  }
.ProgressCircle-button_38d921dd {

  height: 100%;
  width: 100%;
  position: relative;
  -o-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1)
}
[dir] .ProgressCircle-button_38d921dd {
  -webkit-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1)
}
[dir] .ProgressCircle-button_38d921dd.ProgressCircle-isActive_eadf18aa {
    cursor: default;
  }
[dir] .ProgressCircle-button_38d921dd.ProgressCircle-darkBackground_8c724cd7::before {
    background-color: rgba(255, 255, 255, 0.3);
  }
[dir] .ProgressCircle-button_38d921dd:not(.ProgressCircle-darkBackground_8c724cd7)::before {
    background-color: rgba(0, 0, 0, 0.3);
  }
.ProgressCircle-progressCircle_70f0b2c5 {
  opacity: 0;
  -o-transition: stroke-dashoffset 300ms linear, r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: stroke-dashoffset 300ms linear, r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  stroke: #000;
}
[dir] .ProgressCircle-progressCircle_70f0b2c5 {
  -webkit-transition: stroke-dashoffset 300ms linear, r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ProgressCircle-button_38d921dd.ProgressCircle-darkBackground_8c724cd7 .ProgressCircle-progressCircle_70f0b2c5 {
    stroke: #fff;
  }
.ProgressCircle-button_38d921dd.ProgressCircle-isActive_eadf18aa .ProgressCircle-progressCircle_70f0b2c5 {
    opacity: 1;
  }
.ProgressCircle-circle_e25c2124 {
  -o-transition: r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), stroke 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), stroke 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  stroke: rgba(0, 0, 0, 0.3);
}
[dir] .ProgressCircle-circle_e25c2124 {
  -webkit-transition: r 200ms cubic-bezier(0.215, 0.61, 0.355, 1), stroke 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ProgressCircle-button_38d921dd.ProgressCircle-darkBackground_8c724cd7 .ProgressCircle-circle_e25c2124 {
    stroke: rgba(255, 255, 255, 0.3);
  }
.ProgressCircle-button_38d921dd.ProgressCircle-darkBackground_8c724cd7:not(.ProgressCircle-isActive_eadf18aa):hover .ProgressCircle-circle_e25c2124,
  .ProgressCircle-button_38d921dd.ProgressCircle-darkBackground_8c724cd7:not(.ProgressCircle-isActive_eadf18aa):focus .ProgressCircle-circle_e25c2124 {
    stroke: #fff;
  }
.ProgressCircle-button_38d921dd:not(.ProgressCircle-darkBackground_8c724cd7):not(.ProgressCircle-isActive_eadf18aa):hover .ProgressCircle-circle_e25c2124,
  .ProgressCircle-button_38d921dd:not(.ProgressCircle-darkBackground_8c724cd7):not(.ProgressCircle-isActive_eadf18aa):focus .ProgressCircle-circle_e25c2124 {
    stroke: #000;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FeaturedCarouselDetails-detailsContainer_e83d47b9 {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  color: inherit
}
.FeaturedCarouselDetails-detailsContainer_e83d47b9.FeaturedCarouselDetails-darkBackground_8f872233 {
    color: #fff;
  }
.FeaturedCarouselDetails-detailsContainer_e83d47b9:not(.FeaturedCarouselDetails-darkBackground_8f872233) {
    color: #000;
  }
@media (min-width: 768px) {
.FeaturedCarouselDetails-detailsContainer_e83d47b9 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between
}
  }
@media (min-width: 1024px) {
.FeaturedCarouselDetails-detailsContainer_e83d47b9 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%
}
  }
.FeaturedCarouselDetails-detailWrapper_eb72ce9a {
  width: 100%
}
@media (min-width: 768px) {
.FeaturedCarouselDetails-detailWrapper_eb72ce9a {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
.FeaturedCarouselDetails-detailWrapper_eb72ce9a {
    -webkit-flex: 0;
        -ms-flex: 0;
            flex: 0 1
}
  }
.FeaturedCarouselDetails-eyebrow_faac7b08 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
}
[dir] .FeaturedCarouselDetails-eyebrow_faac7b08 {
  padding-bottom: 0.94rem;
}
.FeaturedCarouselDetails-detailsContainer_e83d47b9.FeaturedCarouselDetails-darkBackground_8f872233 .FeaturedCarouselDetails-eyebrow_faac7b08 {
    color: rgba(255, 255, 255, 0.5);
  }
.FeaturedCarouselDetails-detailsContainer_e83d47b9:not(.FeaturedCarouselDetails-darkBackground_8f872233) .FeaturedCarouselDetails-eyebrow_faac7b08 {
    color: rgba(0, 0, 0, 0.5);
  }
@media (min-width: 1024px) {
.FeaturedCarouselDetails-eyebrow_faac7b08 {
    font-size: 0.56rem;
    letter-spacing: 0.09
}
  }
@media (min-width: 1280px) {
.FeaturedCarouselDetails-eyebrow_faac7b08 {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.625;
    font-size: 0.69rem;
    letter-spacing: 0.03rem
}
  }
@media (min-width: 1440px) {
.FeaturedCarouselDetails-eyebrow_faac7b08 {
    font-size: 0.75rem;
    letter-spacing: 0.03rem;
    line-height: 1.3333;
    text-transform: uppercase;
    font-weight: 500
}
  }
.FeaturedCarouselDetails-title_9afa9f0f {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1
}
[dir] .FeaturedCarouselDetails-title_9afa9f0f {

  padding-bottom: 0.94rem
}
@media (min-width: 1024px) {
.FeaturedCarouselDetails-title_9afa9f0f {
    font-size: 1.13rem;
    letter-spacing: 0;
    line-height: 1.4
}
  }
@media (min-width: 1280px) {
.FeaturedCarouselDetails-title_9afa9f0f {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
@media (min-width: 1440px) {
.FeaturedCarouselDetails-title_9afa9f0f {
    font-size: 1.88rem;
    letter-spacing: -0.02rem;
    line-height: 1
}
  }
.FeaturedCarouselDetails-description_d95d87c0 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
}
.FeaturedCarouselDetails-detailsContainer_e83d47b9.FeaturedCarouselDetails-darkBackground_8f872233 .FeaturedCarouselDetails-description_d95d87c0 {
    color: rgba(255, 255, 255, 0.5);
  }
.FeaturedCarouselDetails-detailsContainer_e83d47b9:not(.FeaturedCarouselDetails-darkBackground_8f872233) .FeaturedCarouselDetails-description_d95d87c0 {
    color: rgba(0, 0, 0, 0.5);
  }
@media (min-width: 1024px) {
.FeaturedCarouselDetails-description_d95d87c0 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.FeaturedCarouselDetails-description_d95d87c0 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
.FeaturedCarouselDetails-description_d95d87c0 {

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;
}
[dir] .FeaturedCarouselDetails-description_d95d87c0 {
  padding-bottom: 0;
}
[dir=ltr] .FeaturedCarouselDetails-description_d95d87c0 {
 padding-right: 3.75rem;
}
[dir=rtl] .FeaturedCarouselDetails-description_d95d87c0 {
    padding-left: 3.75rem;
    padding-right: 0;
  padding-left: 3.75rem;
  }
.FeaturedCarouselDetails-price_e407de9d {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  font-weight: 500;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[dir] .FeaturedCarouselDetails-price_e407de9d {
  padding-top: 0.94rem;
}
.FeaturedCarouselDetails-ctaWrapper_7915dd9d {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%
}
[dir] .FeaturedCarouselDetails-ctaWrapper_7915dd9d {
  padding-top: 0.94rem
}
@media (min-width: 768px) {
.FeaturedCarouselDetails-ctaWrapper_7915dd9d {
    width: auto;
    display: block
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
[dir] .FeaturedCarouselDetails-ctaWrapper_7915dd9d {
    padding-top: 0
}
  }
@media (min-width: 1024px) {
.FeaturedCarouselDetails-ctaWrapper_7915dd9d {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%
}
  }
.FeaturedCarouselDetails-linkWrapper_70c1c587 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.FeaturedCarouselDetails-linkLabel_697a429f {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  font-weight: 500;
  color: inherit;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.FeaturedCarouselDetails-arrowIcon_4466ba66 {
  color: inherit;
  height: 0.94rem;
  width: 0.75rem;
}
[dir=ltr] .FeaturedCarouselDetails-arrowIcon_4466ba66 {
 margin-left: 0.5rem;
 -webkit-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
 -o-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
 transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir=rtl] .FeaturedCarouselDetails-arrowIcon_4466ba66 {
  margin-right: 0.5rem;
  -webkit-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir=ltr] .FeaturedCarouselDetails-arrowIcon_4466ba66 .FeaturedCarouselDetails-animatedText_25f16c7c {
 -webkit-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
 -o-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
 transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
  }
[dir=rtl] .FeaturedCarouselDetails-arrowIcon_4466ba66 .FeaturedCarouselDetails-animatedText_25f16c7c {
    -webkit-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 100ms 0ms cubic-bezier(0.42, 0, 0.58, 1);
  }
[dir=ltr] .FeaturedCarouselDetails-active_34c10305 .FeaturedCarouselDetails-arrowIcon_4466ba66 .FeaturedCarouselDetails-animatedText_25f16c7c {
 -webkit-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
 -o-transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
 transition: margin-left 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
    }
[dir=rtl] .FeaturedCarouselDetails-active_34c10305 .FeaturedCarouselDetails-arrowIcon_4466ba66 .FeaturedCarouselDetails-animatedText_25f16c7c {
      -webkit-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
      -o-transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
      transition: margin-right 200ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 350ms 200ms cubic-bezier(0.42, 0, 0.58, 1);
    }
[dir=ltr] .FeaturedCarouselDetails-link_baa6b581:hover .FeaturedCarouselDetails-arrowIcon_4466ba66 {
 margin-left: 0.75rem;
  }
[dir=rtl] .FeaturedCarouselDetails-link_baa6b581:hover .FeaturedCarouselDetails-arrowIcon_4466ba66 {
    margin-right: 0.75rem;
  }
.FeaturedCarouselDetails-animatedText_25f16c7c {
  -webkit-transform: translate3d(0, 0, 0);
  -o-transition: opacity 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: opacity 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-transition-delay: 0ms;
       -o-transition-delay: 0ms;
  opacity: 0;
}
[dir] .FeaturedCarouselDetails-animatedText_25f16c7c {
          transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 100ms cubic-bezier(0.42, 0, 0.58, 1);
          transition-delay: 0ms;
}
.FeaturedCarouselDetails-active_34c10305 .FeaturedCarouselDetails-animatedText_25f16c7c {
    opacity: 1;
    -webkit-transition-duration: 350ms;
         -o-transition-duration: 350ms;
    -webkit-transition-delay: 200ms;
         -o-transition-delay: 200ms;
  }
[dir] .FeaturedCarouselDetails-active_34c10305 .FeaturedCarouselDetails-animatedText_25f16c7c {
            transition-duration: 350ms;
            transition-delay: 200ms;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.FeaturedCarousel-wrapper_1477d520 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative
}
[dir] .FeaturedCarousel-wrapper_1477d520 {
  background-color: rgba(255, 255, 255, 0.1);
  padding-bottom: 1.88rem
}
.FeaturedCarousel-wrapper_1477d520.FeaturedCarousel-darkBackground_19c00610 {
    color: #fff;
  }
.FeaturedCarousel-wrapper_1477d520:not(.FeaturedCarousel-darkBackground_19c00610) {
    color: #000;
  }
@media (min-width: 768px) {
[dir] .FeaturedCarousel-wrapper_1477d520 {
    padding: 0
}
  }
@media (min-width: 1024px) {
.FeaturedCarousel-wrapper_1477d520 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
@media (min-width: 1024px) {
.FeaturedCarousel-mediaCarousel_dcb9bc62 {
    width: calc(30 / 49 * 100%)
}
  }
.FeaturedCarousel-media_83a7c082 {
  position: relative;

  height: 100%;
}
[dir] .FeaturedCarousel-media_83a7c082 {
  padding-bottom: calc(9 / 16 * 100%);
}
.FeaturedCarousel-media_83a7c082 .FeaturedCarousel-inner_372a7ae3 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.FeaturedCarousel-contentWrapper_c9ac2e12 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -o-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1)
}
[dir] .FeaturedCarousel-contentWrapper_c9ac2e12 {
  padding: 0 1.88rem;
  -webkit-transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1)
}
@media (min-width: 768px) {
.FeaturedCarousel-contentWrapper_c9ac2e12 {
    overflow: hidden
}
[dir] .FeaturedCarousel-contentWrapper_c9ac2e12 {
    padding: 0 calc(100vw / 48 * 2) 2rem
}
  }
@media (min-width: 1024px) and (max-width: 1279px) {
[dir] .FeaturedCarousel-contentWrapper_c9ac2e12 {
    padding: 0.75rem 1.88rem 1rem
}
  }
@media (min-width: 1024px) {
.FeaturedCarousel-contentWrapper_c9ac2e12 {
    -webkit-flex-basis: calc(19 / 49 * 100%);
        -ms-flex-preferred-size: calc(19 / 49 * 100%);
            flex-basis: calc(19 / 49 * 100%);
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
}

    [dir] .isLauncher .FeaturedCarousel-contentWrapper_c9ac2e12 {
      padding: 0.75rem 1.25rem 1.75rem;
    }

    [dir] .FeaturedCarousel-contentWrapper_c9ac2e12:hover, [dir] .FeaturedCarousel-contentWrapper_c9ac2e12:focus {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
@media (min-width: 1280px) {
[dir] .FeaturedCarousel-contentWrapper_c9ac2e12 {
    padding: 2.25rem 2.5rem
}
  }
.FeaturedCarousel-detailsWrapper_3abbe047 {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column
}
@media (min-width: 1024px) {
.FeaturedCarousel-detailsWrapper_3abbe047 {
    height: 100%;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
.FeaturedCarousel-details_c8c2619d {
  pointer-events: none;
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}
[dir] .FeaturedCarousel-details_c8c2619d {
  padding-top: 2.5rem
}
.FeaturedCarousel-details_c8c2619d.FeaturedCarousel-activeDetails_d836e39e {
    pointer-events: auto;
  }
@media (min-width: 768px) {
.FeaturedCarousel-details_c8c2619d {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center
}
  }
@media (min-width: 1024px) {
.FeaturedCarousel-details_c8c2619d {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%
}
[dir] .FeaturedCarousel-details_c8c2619d {
    padding-top: 0
}
  }
[dir=ltr] .FeaturedCarousel-pagination_cda0e8ce.FeaturedCarousel-paginationAutoscroll_3d6c02a1 {
 margin-left: 0
  }
[dir=rtl] .FeaturedCarousel-pagination_cda0e8ce.FeaturedCarousel-paginationAutoscroll_3d6c02a1 {
    margin-right: 0
  }
@media (max-width: 1023px) {
[dir] .FeaturedCarousel-pagination_cda0e8ce.FeaturedCarousel-paginationAutoscroll_3d6c02a1 {
      margin: 0.31rem 0
  }
    }
[dir=ltr] .FeaturedCarousel-pagination_cda0e8ce {
 margin-left: -1.06rem;
}
[dir=rtl] .FeaturedCarousel-pagination_cda0e8ce {

  margin-right: -1.06rem;
}
.FeaturedCarousel-controlsWrapper_fdec8a36 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
[dir] .FeaturedCarousel-controlsWrapper_fdec8a36 {
  padding: 0.31rem 0
}
@media (min-width: 768px) {
[dir] .FeaturedCarousel-controlsWrapper_fdec8a36 {
    padding: 1.06rem 0
}
  }
@media (min-width: 1024px) {
.FeaturedCarousel-controlsWrapper_fdec8a36 {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between
}
[dir] .FeaturedCarousel-controlsWrapper_fdec8a36 {
    padding: 0
}
  }
.FeaturedCarousel-arrowControls_34702947 {
  display: none
}
@media (min-width: 1024px) {
.FeaturedCarousel-arrowControls_34702947 {
    display: block
}
[dir=ltr] .FeaturedCarousel-arrowControls_34702947 {
  margin-left: -0.94rem
}
[dir=rtl] .FeaturedCarousel-arrowControls_34702947 {
    margin-right: -0.94rem
}
  }
[dir] .FeaturedCarousel-contentTopWithControls_160e4c86 {
  padding-top: 0
}
@media (min-width: 768px) {
[dir] .FeaturedCarousel-contentTopWithControls_160e4c86 {
    padding-top: 0.44rem
}
  }
@media (min-width: 1024px) {
[dir] .FeaturedCarousel-contentTopWithControls_160e4c86 {
    padding-top: 1.88rem
}
  }
.FeaturedCarousel-hiddenScreenReader_a7621de9 {
  position: absolute;
  height: 0.06rem;
  width: 0.06rem;
  clip: rect(0.06rem 0.06rem 0.06rem 0.06rem);
  /* IE 6 and 7 */
  clip: rect(0.06rem, 0.06rem, 0.06rem, 0.06rem);
  -webkit-clip-path: polygon(0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  overflow: hidden !important;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.StoreBreakerSingleImage-imageWrapper_77081646 {
  z-index: 1
}
@media (min-width: 768px) {
.StoreBreakerSingleImage-imageWrapper_77081646 {
    bottom: 0;
    height: auto;
    position: absolute;
    width: 60%
}
[dir=ltr] .StoreBreakerSingleImage-imageWrapper_77081646 {
  right: 0
}
[dir=rtl] .StoreBreakerSingleImage-imageWrapper_77081646 {
    left: 0
}
  }
.StoreBreakerSingleImage-imageWrapperRTL_043f7a68 {
  -webkit-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
}
[dir] .StoreBreakerSingleImage-imageWrapperRTL_043f7a68 {
          transform: scale(-1, 1);
}
.StoreBreakerSingleImage-image_c647faa7 {
  position: relative;
}
[dir] .StoreBreakerSingleImage-image_c647faa7 {
  padding-bottom: calc(3 / 4 * 100%);
}
.StoreBreakerSingleImage-image_c647faa7 .StoreBreakerSingleImage-inner_a160b161 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.StoreBreakerSingleImage-patternWrapper_44468e99 {
  display: none
}
@media (min-width: 768px) {
.StoreBreakerSingleImage-patternWrapper_44468e99 {
    bottom: 0;
    display: block;
    height: 100%;
    max-width: 31.31rem;
    position: absolute;
    width: calc(501 / 705 * 100%)
}
[dir=ltr] .StoreBreakerSingleImage-patternWrapper_44468e99 {
  right: 0
}
[dir=rtl] .StoreBreakerSingleImage-patternWrapper_44468e99 {
    left: 0
}
  }
@media (min-width: 1024px) {
.StoreBreakerSingleImage-patternWrapper_44468e99 {
    max-width: 34.88rem;
    width: calc(558 / 785 * 100%)
}
  }
@media (min-width: 1280px) {
.StoreBreakerSingleImage-patternWrapper_44468e99 {
    max-width: 48rem;
    width: calc(768 / 1080 * 100%)
}
  }
.StoreBreakerSingleImage-pattern_5fc7140e {
  position: relative;
}
[dir] .StoreBreakerSingleImage-pattern_5fc7140e {
  padding-bottom: calc(9 / 16 * 100%);
}
.StoreBreakerSingleImage-pattern_5fc7140e .StoreBreakerSingleImage-inner_a160b161 {
    position: absolute;
    width: 100%;
    height: 100%;
  }
.StoreBreakerSingleImage-svg_7fdb5b0c > svg {
  color: #f4f4f4;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.StoreBreakerSingleImageInset-root_0f6292a1 {
  display: none
}
@media (min-width: 768px) {
.StoreBreakerSingleImageInset-root_0f6292a1 {
    display: block;
    width: 60%
}
  }
@media (min-width: 768px) {
.StoreBreakerSingleImageInset-imageWrapper_469030ab {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center
}
  }
.StoreBreakerSingleImageInset-image_a07c12a5 {
  position: relative;
}
[dir] .StoreBreakerSingleImageInset-image_a07c12a5 {
  padding-bottom: calc(3 / 4 * 100%);
}
.StoreBreakerSingleImageInset-image_a07c12a5 .StoreBreakerSingleImageInset-inner_f7457ea7 {
    position: absolute;
    width: 100%;
  }
.StoreBreakerSingleImageInset-image_a07c12a5 .StoreBreakerSingleImageInset-inner_f7457ea7 {
    height: 100%;
    width: auto;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
:root {
  /* 282 = breaker content area height. 706 = breaker content area width */ /* 282h / 706w = 0.39943342776203966 */
}
.StoreBreaker-root_5670ee88 {
  position: relative
}
.StoreBreaker-root_5670ee88.StoreBreaker-darkBackground_10c31bbd {
    color: #fff;
  }
.StoreBreaker-root_5670ee88.StoreBreaker-lightBackground_a9de72d5 {
    color: #000;
  }
.StoreBreaker-header_51798337 {
  min-height: 1.19rem; /* height of font size */
}
[dir] .StoreBreaker-header_51798337 {
  padding-bottom: 0.94rem;
}
.StoreBreaker-titleGroup_8752b320 {
  color: #fff;
}
.StoreBreaker-wrapperContent_469469ef {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative
}
@media (min-width: 768px) {
.StoreBreaker-wrapperContent_469469ef {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;

    /* height calculation: 100vw / (total grid columns * total content columns * aspect ratio) */
    height: calc(100vw / 48 * (48 - (2 * 2)) * 0.39943342776203966);
    max-height: calc(100rem * 0.39943342776203966)
}
  }
@media (min-width: 1024px) {
.StoreBreaker-wrapperContent_469469ef {
    height: calc(100vw / 64 * (64 - (8 * 2)) * 0.39943342776203966)
}
  }
@media (min-width: 1280px) {
.StoreBreaker-wrapperContent_469469ef {
    height: calc(100vw / 64 * (64 - (8 * 2)) * 0.39943342776203966)
}
  }
@media (min-width: 1440px) {
.StoreBreaker-wrapperContent_469469ef {
    height: calc(100vw / 72 * (72 - (9 * 2)) * 0.39943342776203966)
}
  }
@media (min-width: 1024px) {

  .isLauncher .StoreBreaker-wrapperContent_469469ef {
      height: calc(100vw / 64 * (64 - 10 - 2 - 3)) * 0.39943342776203966)
  }
    }
@media (min-width: 1280px) {

  .isLauncher .StoreBreaker-wrapperContent_469469ef {
      height: calc(100vw / 64 * (64 - 12 - 2 - 3) * 0.39943342776203966)
  }
    }
@media (min-width: 1440px) {

  .isLauncher .StoreBreaker-wrapperContent_469469ef {
      height: calc(100vw / 72 * (72 - 12 - 2 - 4) * 0.39943342776203966)
  }
    }
.StoreBreaker-content_38e28d0e {
  width: 100%;
  z-index: 2
}
[dir] .StoreBreaker-content_38e28d0e {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem
}
[dir=ltr] .StoreBreaker-content_38e28d0e {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}
[dir=rtl] .StoreBreaker-content_38e28d0e {
  padding-right: 1.25rem;
  padding-left: 1.25rem
}
@media (min-width: 768px) {
.StoreBreaker-content_38e28d0e {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 40%;
    max-width: calc(320 / 705 * 100%);
    min-height: 100%
}
[dir=ltr] .StoreBreaker-content_38e28d0e {
    padding-left: 2.5rem;
    padding-right: 0
}
[dir=rtl] .StoreBreaker-content_38e28d0e {
    padding-right: 2.5rem;
    padding-left: 0
}
  }
@media (min-width: 1024px) {
[dir] .StoreBreaker-content_38e28d0e {
    padding-top: 4rem;
    padding-bottom: 4rem
}
  }
@media (min-width: 1280px) {
.StoreBreaker-content_38e28d0e {
    max-width: calc(400 / 1080 * 100%)
}
[dir] .StoreBreaker-content_38e28d0e {
    padding-top: 5.63rem;
    padding-bottom: 5.63rem
}
[dir=ltr] .StoreBreaker-content_38e28d0e {
    padding-left: 3.75rem
}
[dir=rtl] .StoreBreaker-content_38e28d0e {
    padding-right: 3.75rem
}
  }
.StoreBreaker-title_9a006e26 {
  font-size: 1.88rem;
  letter-spacing: -0.02rem;
  line-height: 1;

  color: inherit;
  width: 100%
}
[dir] .StoreBreaker-title_9a006e26 {
  padding-bottom: 0.94rem
}
@media (min-width: 1440px) {
.StoreBreaker-title_9a006e26 {
    font-size: 3.13rem;
    letter-spacing: -0.03rem;
    line-height: 1
}
  }
.StoreBreaker-description_11d63403 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;

  color: inherit;
  opacity: 0.5;
  width: 100%
}
[dir] .StoreBreaker-description_11d63403 {
  margin: 0;
  padding-bottom: 1.25rem
}
[dir=ltr] .StoreBreaker-description_11d63403 {
  padding-right: 2.5rem
}
[dir=rtl] .StoreBreaker-description_11d63403 {
  padding-left: 2.5rem
}
@media (min-width: 768px) {
[dir=ltr] .StoreBreaker-description_11d63403 {
    padding-right: 1.25rem
}
[dir=rtl] .StoreBreaker-description_11d63403 {
    padding-left: 1.25rem
}
  }
@media (min-width: 1280px) {
[dir=ltr] .StoreBreaker-description_11d63403 {
    padding-right: 2.5rem
}
[dir=rtl] .StoreBreaker-description_11d63403 {
    padding-left: 2.5rem
}
  }
@media (min-width: 1440px) {
.StoreBreaker-description_11d63403 {
    font-size: 1.25rem;
    letter-spacing: -0.01rem;
    line-height: 1.25
}
  }
.StoreBreaker-cta_9d5360ce {
  -o-transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
[dir] .StoreBreaker-cta_9d5360ce {
  -webkit-transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.StoreBreaker-darkBackground_10c31bbd .StoreBreaker-cta_9d5360ce {
    color: #fff
  }
[dir] .StoreBreaker-darkBackground_10c31bbd .StoreBreaker-cta_9d5360ce {
    background-color: rgba(255, 255, 255, 0.2)
  }
[dir] .StoreBreaker-darkBackground_10c31bbd .StoreBreaker-cta_9d5360ce:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
.StoreBreaker-lightBackground_a9de72d5 .StoreBreaker-cta_9d5360ce {
    color: #000
  }
[dir] .StoreBreaker-lightBackground_a9de72d5 .StoreBreaker-cta_9d5360ce {
    background-color: rgba(0, 0, 0, 0.2)
  }
.StoreBreaker-lightBackground_a9de72d5 .StoreBreaker-cta_9d5360ce:hover {
      color: #000;
    }
[dir] .StoreBreaker-lightBackground_a9de72d5 .StoreBreaker-cta_9d5360ce:hover {
      background-color: rgba(0, 0, 0, 0.3);
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
:root {

  /* Add page spacing on scrollable grid for last item */
}
.GenreGrid-wrapper_418454d8 {
  height: auto;
  width: 100%;
}
.GenreGrid-header_ca490e45 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between
}
[dir] .GenreGrid-header_ca490e45 {
  margin-bottom: 0.94rem
}
@media (min-width: 768px) {
[dir=ltr] .GenreGrid-header_ca490e45 {
    padding-left: 0
}
[dir=rtl] .GenreGrid-header_ca490e45 {
    padding-right: 0
}
  }
.GenreGrid-title_f71c3601 {
  color: #fff;
}
.GenreGrid-groupWrapper_79dac2bf {
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none
}
.GenreGrid-groupWrapper_79dac2bf::-webkit-scrollbar {
    display: none;
  }
[dir=ltr] .GenreGrid-groupWrapper_79dac2bf {
  margin-left: calc(1rem / -2);
  margin-right: calc(1rem / -2)
}
[dir=rtl] .GenreGrid-groupWrapper_79dac2bf {

  margin-right: calc(1rem / -2);
  margin-left: calc(1rem / -2)
}
@media (max-width: 767px) {
.GenreGrid-groupWrapper_79dac2bf {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    overflow-x: auto
}
  }
@media (min-width: 768px) {
.GenreGrid-groupWrapper_79dac2bf {
    overflow: hidden;
    width: calc(100% + 1rem)
}
  }
.GenreGrid-group_1cdf68e6 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none
}
[dir=ltr] .GenreGrid-group_1cdf68e6 {
  padding-left: 0;
  padding-right: 0
}
[dir=rtl] .GenreGrid-group_1cdf68e6 {
  padding-right: 0;
  padding-left: 0
}
@media (max-width: 767px) {
[dir=ltr] .GenreGrid-group_1cdf68e6 {
    padding-left: calc(100vw / 25 * 2);
    padding-right: calc(100vw / 25 * 2)
}
[dir=rtl] .GenreGrid-group_1cdf68e6 {
    padding-right: calc(100vw / 25 * 2);
    padding-left: calc(100vw / 25 * 2)
}
  }
@media (max-width: 767px) {
.GenreGrid-group_1cdf68e6 {
    -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
}
  }
@media (min-width: 768px) {
.GenreGrid-group_1cdf68e6 {
    width: 100%
}
  }
[dir=ltr] .GenreGrid-card_565ea5c9 {
  padding-left: calc(1rem / 2);
  padding-right: calc(1rem / 2)
}
[dir=rtl] .GenreGrid-card_565ea5c9 {
  padding-right: calc(1rem / 2);
  padding-left: calc(1rem / 2)
}
@media (max-width: 767px) {
.GenreGrid-card_565ea5c9 {
    -webkit-flex-basis: 9.38rem;
        -ms-flex-preferred-size: 9.38rem;
            flex-basis: 9.38rem;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 9.38rem
}
  }
@media (min-width: 768px) {
.GenreGrid-card_565ea5c9 {
    -webkit-flex-basis: calc(100% / 5);
        -ms-flex-preferred-size: calc(100% / 5);
            flex-basis: calc(100% / 5);
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    width: calc(100% / 5)
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RightRailContainer-content_a3c8ffca {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 15.94rem
}
[dir] .RightRailContainer-content_a3c8ffca {
  margin-bottom: 0
}
@media (min-width: 768px) {
.RightRailContainer-content_a3c8ffca {
    width: 18.44rem
}
  }
@media (min-width: 1024px) {
.RightRailContainer-content_a3c8ffca {
    height: auto;
    width: 100%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RecentlyPlayed-wrapper_0e9de346 {
  position: relative;
  width: 100%;
}
.RecentlyPlayed-wrapper_0e9de346 + .RecentlyPlayed-wrapper_0e9de346 {
    /* only show one recently played game on mobile */
  }
@media (max-width: 1023px) {

  .RecentlyPlayed-wrapper_0e9de346 + .RecentlyPlayed-wrapper_0e9de346 {
    display: none;
  }
  }
.RecentlyPlayed-gamebox_02b7d5f3 {
  height: 6.25rem
}
[dir] .RecentlyPlayed-gamebox_02b7d5f3 {
  padding-bottom: 45%
}
@media (min-width: 768px) {
.RecentlyPlayed-gamebox_02b7d5f3 {
    height: 7.5rem
}
  }
@media (min-width: 1024px) {
.RecentlyPlayed-gamebox_02b7d5f3 {
    height: 0;
    width: 100%
}
  }
.RecentlyPlayed-running_c913078d .RecentlyPlayed-gamebox_02b7d5f3 {
    opacity: 0;
  }
.RecentlyPlayed-buttonWrapper_00e4befa {
  -o-transition: opacity 125ms ease-in-out;
  transition: opacity 125ms ease-in-out;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
[dir] .RecentlyPlayed-buttonWrapper_00e4befa {
  -webkit-transition: opacity 125ms ease-in-out;
}
[dir=ltr] .RecentlyPlayed-buttonWrapper_00e4befa {
 left: 0;
}
[dir=rtl] .RecentlyPlayed-buttonWrapper_00e4befa {
  right: 0;
}
.RecentlyPlayed-running_c913078d .RecentlyPlayed-buttonWrapper_00e4befa,
  .RecentlyPlayed-wrapper_0e9de346:hover .RecentlyPlayed-buttonWrapper_00e4befa,
  .RecentlyPlayed-wrapper_0e9de346:active .RecentlyPlayed-buttonWrapper_00e4befa {
    opacity: 1;
  }
[dir] .RecentlyPlayed-placeholder_92620243 {
  background: #202020;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RecentlyPlayedButton-button_7096ae7b {
  width: 100%;
  height: 100%;
  position: relative
}
.RecentlyPlayedButton-button_7096ae7b.RecentlyPlayedButton-opaque_1e42bab2 > span {
      opacity: 1;
    }
.RecentlyPlayedButton-button_7096ae7b .RecentlyPlayedButton-secondaryText_293a6d61 {
    display: block;
    text-transform: none;
    opacity: 0.5;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RecentlyPlayedList-container_0d9f8828 {
  position: relative;
  height: 100%;
  width: 100%
}
@media (min-width: 1024px) {
.RecentlyPlayedList-container_0d9f8828 {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1 1
}
  }
.RecentlyPlayedList-wrapper_4d2ce60d {
}
@media (min-width: 1024px) {
.RecentlyPlayedList-wrapper_4d2ce60d {
    width: 100%
}

    .RecentlyPlayedList-wrapper_4d2ce60d.RecentlyPlayedList-dynamicSpacing_be2ed72c {
      width: 100%;
      position: absolute;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  }
[dir] .RecentlyPlayedList-wrapper_4d2ce60d li:not(:first-child) {
    margin-top: 0.63rem
  }
@media (min-width: 1280px) {

  [dir] .RecentlyPlayedList-wrapper_4d2ce60d li:not(:first-child) {
      margin-top: 0.94rem
  }
    }
.RecentlyPlayedList-placeholder_a2cdc983 {
  height: 6.25rem
}
[dir] .RecentlyPlayedList-placeholder_a2cdc983 {
  background: #202020;
  padding-bottom: 0
}
@media (min-width: 768px) {
.RecentlyPlayedList-placeholder_a2cdc983 {
    height: 7.5rem
}
  }
@media (min-width: 1024px) {
.RecentlyPlayedList-placeholder_a2cdc983 {
    height: 0;
    width: 100%
}
[dir] .RecentlyPlayedList-placeholder_a2cdc983 {
    padding-bottom: 45%
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.RightRail-content_22436886 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%
}
@media (max-width: 575px) {
[dir=ltr] .RightRail-content_22436886 {
  padding-left: 0.94rem
}
[dir=rtl] .RightRail-content_22436886 {
    padding-right: 0.94rem
}
  }
@media (min-width: 1024px) {
.RightRail-content_22436886 {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 100%
}
  }
/* Overflow excludes end padding.
 * Problem details and solution can be found here:
 * https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4
 */
@media (max-width: 1023px) {
.RightRail-content_22436886::after {
    content: '';
    display: inline-block;
    width: 0.06rem
}
[dir] .RightRail-content_22436886::after {
    padding: 0 0.44rem
}
  }
.RightRail-innerContainer_24e7ec63 {
  height: auto;
  width: 100%
}
@media (min-width: 1024px) {
.RightRail-innerContainer_24e7ec63 {
    height: 100vh
}
  }
@media (min-width: 1024px) {
.RightRail-recentGamesWrapper_18c928ed {
    overflow: hidden;
}
[dir] .RightRail-recentGamesWrapper_18c928ed {
    margin-top: 2.06rem;
}

    .RightRail-recentGamesWrapper_18c928ed .RightRail-title_eb4b2c45 {
      position: absolute;
      -webkit-transform: translateY(-2.06rem);
          -ms-transform: translateY(-2.06rem);
    }

    [dir] .RightRail-recentGamesWrapper_18c928ed .RightRail-title_eb4b2c45 {
              transform: translateY(-2.06rem);
    }
  }
[dir] .RightRail-friendsWrapper_1720fa8d {
  margin-top: 0.94rem
}
[dir=ltr] .RightRail-friendsWrapper_1720fa8d {
 margin-left: 1.25rem
}
[dir=rtl] .RightRail-friendsWrapper_1720fa8d {
  margin-right: 1.25rem
}
@media (max-width: 1023px) {
.RightRail-friendsWrapper_1720fa8d {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
  }
[dir=ltr] .RightRail-recentGamesWrapper_18c928ed, [dir=ltr] .RightRail-friendsWrapper_1720fa8d {
 margin-left: 1.25rem
}
[dir=rtl] .RightRail-recentGamesWrapper_18c928ed, [dir=rtl] .RightRail-friendsWrapper_1720fa8d {
  margin-right: 1.25rem
}
@media (min-width: 1024px) {
[dir=ltr] .RightRail-recentGamesWrapper_18c928ed, [dir=ltr] .RightRail-friendsWrapper_1720fa8d {
  margin-left: 0
}
[dir=rtl] .RightRail-recentGamesWrapper_18c928ed, [dir=rtl] .RightRail-friendsWrapper_1720fa8d {
    margin-right: 0
}
  }
.RightRail-title_eb4b2c45 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4
}
@media (min-width: 1024px) {
.RightRail-title_eb4b2c45 {
    font-size: 0.75rem;
    letter-spacing: 0.01rem;
    line-height: 1.5
}
  }
@media (min-width: 1280px) {
.RightRail-title_eb4b2c45 {
    font-size: 0.88rem;
    letter-spacing: 0.01rem;
    line-height: 1.4
}
  }
[dir] .RightRail-title_eb4b2c45 {

  margin-bottom: 0.94rem;
}
h1.RightRail-title_eb4b2c45,
  h2.RightRail-title_eb4b2c45 {
    opacity: 0.5;
  }
@media (max-width: 1023px) {
.RightRail-title_eb4b2c45 {
    display: none
}
  }
.RightRail-login_1e34aca1 {
  width: 100%;
  height: 100%
}
@media (min-width: 1024px) {
.RightRail-login_1e34aca1 {
    height: 2.5rem
}
[dir] .RightRail-login_1e34aca1 {
    margin-top: 2.06rem;
    margin-bottom: 2.5rem
}
  }
@media (min-width: 1280px) {
.RightRail-login_1e34aca1 {
    height: 3.13rem
}
[dir] .RightRail-login_1e34aca1 {
    margin-bottom: 3.75rem
}
  }
.RightRail-updater_d9e396f7 {
  visibility: hidden;
  position: absolute;
  bottom: 1.25rem;
  width: 100%
}
@media (min-width: 1024px) {
.RightRail-updater_d9e396f7 {
    visibility: visible
}
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .Updater-title_5a9aa771 {
  padding-bottom: 0.94rem;
}
.Updater-cta_3fc44fc2 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  text-transform: uppercase;
  font-weight: 500;

  position: absolute;
  top: 0;
  color: #f4f4f4;
}
[dir=ltr] .Updater-cta_3fc44fc2 {
 right: 0;
}
[dir=rtl] .Updater-cta_3fc44fc2 {
  left: 0;
}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Home-content_8c12050f {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  position: relative
}
@media (min-width: 1024px) {
.Home-content_8c12050f {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
@media (min-width: 1024px) {

  .isLauncher .Home-content_8c12050f {  /* aligns the feed title to the logo */
  }

  [dir] .isLauncher .Home-content_8c12050f {
      margin-top: 1.88rem
  }
    }
@media (min-width: 1280px) {

  .isLauncher .Home-content_8c12050f {  /* aligns the feed title to the logo */
  }

  [dir] .isLauncher .Home-content_8c12050f {
      margin-top: 2.5rem
  }
    }
.Home-pageContent_4149eda7 {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;

  /* fix sizing issues on IE11 */
  max-width: 100vw;
  overflow: hidden;
}
.Home-news_71f12a73 .Home-title_83034ae5 {
    font-size: 1.5rem;
  }
[dir] .Home-news_71f12a73 .Home-title_83034ae5 {
    margin: 0.63rem 0;
  }
.Home-rightRail_832e7b4b {
  position: relative;
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 100%
}
[dir] .Home-rightRail_832e7b4b {
  margin: 3.19rem 0
}
@media (min-width: 1024px) {
.Home-rightRail_832e7b4b {
    height: auto;
    width: 18.75rem
}
[dir=ltr] .Home-rightRail_832e7b4b {
  margin: 0 2rem 0 0
}
[dir=rtl] .Home-rightRail_832e7b4b {
    margin: 0 0 0 2rem
}
  }
@media (min-width: 1024px) {

  .Home-rightRail_832e7b4b .Home-stickyRail_f071bc3d {
      position: -webkit-sticky;
      position: sticky;
      top: 1.88rem;
      height: calc(100vh - 1.88rem);
      overflow-y: scroll;
      -ms-overflow-style: none  /* Internet Explorer 10+ */
  }
    }
@media (min-width: 1280px) {

  .Home-rightRail_832e7b4b .Home-stickyRail_f071bc3d {
      top: 2.5rem;
      height: calc(100vh - 2.5rem)
  }
    }
.Home-rightRail_832e7b4b .Home-stickyRail_f071bc3d::-webkit-scrollbar {
      display: none;
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Article-storeNews_9a09f1bc {
  min-height: 100vh;
  color: black;
}
[dir] .Article-storeNews_9a09f1bc {
  padding: 0;
  background: white;
}
/* Copied styles from bootstrap and/or the blog detail sass file */
.Article-storeNews_9a09f1bc .blog-content {
      max-width: 52.5rem
    }
[dir] .Article-storeNews_9a09f1bc .blog-content {
      margin: 0 auto;
      padding: 4em 0
    }
@media (max-width: 1023px) {
    [dir] .Article-storeNews_9a09f1bc .blog-content {
        padding: 4em 2em
    }
      }
[dir] .Article-storeNews_9a09f1bc .blog-container .blog-article .cms .embed-responsive {
      margin: 2em 0;
    }
[dir] .Article-storeNews_9a09f1bc .embed-responsive-16by9 {
      padding-bottom: 56.25% !important;
    }
.Article-storeNews_9a09f1bc .embed-responsive {
      position: relative;
      display: block;
      height: 0;
      overflow: hidden;
    }
[dir] .Article-storeNews_9a09f1bc .embed-responsive {
      padding: 0;
    }
.Article-storeNews_9a09f1bc .embed-responsive .embed-responsive-item,
    .Article-storeNews_9a09f1bc .embed-responsive embed,
    .Article-storeNews_9a09f1bc .embed-responsive iframe,
    .Article-storeNews_9a09f1bc .embed-responsive object,
    .Article-storeNews_9a09f1bc .embed-responsive video {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
    }
[dir] .Article-storeNews_9a09f1bc .embed-responsive .embed-responsive-item, [dir] .Article-storeNews_9a09f1bc .embed-responsive embed, [dir] .Article-storeNews_9a09f1bc .embed-responsive iframe, [dir] .Article-storeNews_9a09f1bc .embed-responsive object, [dir] .Article-storeNews_9a09f1bc .embed-responsive video {
      border: 0;
    }
[dir=ltr] .Article-storeNews_9a09f1bc .embed-responsive .embed-responsive-item, [dir=ltr] .Article-storeNews_9a09f1bc .embed-responsive embed, [dir=ltr] .Article-storeNews_9a09f1bc .embed-responsive iframe, [dir=ltr] .Article-storeNews_9a09f1bc .embed-responsive object, [dir=ltr] .Article-storeNews_9a09f1bc .embed-responsive video {
 left: 0;
    }
[dir=rtl] .Article-storeNews_9a09f1bc .embed-responsive .embed-responsive-item, [dir=rtl] .Article-storeNews_9a09f1bc .embed-responsive embed, [dir=rtl] .Article-storeNews_9a09f1bc .embed-responsive iframe, [dir=rtl] .Article-storeNews_9a09f1bc .embed-responsive object, [dir=rtl] .Article-storeNews_9a09f1bc .embed-responsive video {
      right: 0;
    }
[dir] .Article-storeNews_9a09f1bc .blog-container .blog-article .blog-content .blog-header-info {
      margin-bottom: 0.75em;
    }
.Article-storeNews_9a09f1bc .blog-header-date {
      display: block;
    }
[dir] .Article-storeNews_9a09f1bc .blog-header-date {
      margin: 0.5em 0 1.5em;
    }
.Article-storeNews_9a09f1bc .blog-container .blog-article .cms img {
      max-width: 100%;
      height: auto !important;
    }
[dir] .Article-storeNews_9a09f1bc .blog-container .blog-article .cms img {
      margin: 2em 0;
    }
.Article-storeNews_9a09f1bc .blog-container .blog-header img.invisible-image {
      width: 100%;
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }
.Article-storeNews_9a09f1bc .blog-container .blog-header {
      width: 100%;
      height: 25rem;
      position: relative;
      overflow: hidden;
    }
[dir] .Article-storeNews_9a09f1bc .blog-container .blog-header {
      background-size: cover;
      background-repeat: no-repeat;
    }

#storeNews{background-color:white}#storeNews .blog-header-info h1.blog-header-title{font-family:'Brutal';font-weight:700;font-size:2.8em}#storeNews .blog-container .blog-article{padding-top:0}#storeNews .blog-container .blog-article .blog-content .blog-header-info .blog-header-title{text-transform:initial}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .QuestionAnswer-questionGroup_d55711d5 {
  padding: 1em 0;
}
.QuestionAnswer-questionGroup_d55711d5 .QuestionAnswer-question_bf76b2d1 {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
  }
[dir] .QuestionAnswer-questionGroup_d55711d5 .QuestionAnswer-question_bf76b2d1 {
    margin: 0;
  }
[dir] .QuestionAnswer-questionGroup_d55711d5 .QuestionAnswer-answer_e2019fc2 {
    margin-top: 0.19rem;
  }

/* store base styles */
/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* store form base styles */
.Input-input_f867efcd {
  position: relative;
}
[dir] .Input-input_f867efcd .Input-active_f44f08f9 {
    border: solid 0.06rem #e63c3c;
  }
.Input-input_f867efcd input {
    width: 100%;
    color: #7e7f82;
    -webkit-box-sizing: border-box;
            box-sizing: border-box
  }
[dir] .Input-input_f867efcd input {
    padding: 1.25rem;
    border: 0.06rem solid #4b4b4c;
    border-radius: 0.19rem;
    background-color: transparent
  }
.Input-input_f867efcd input ~ label {
      top: 1.31rem;
      font-weight: 400;
      font-size: 0.75rem;
      position: absolute;
      -o-transition: 0.2s ease all;
      transition: 0.2s ease all;
      color: #7e7f82;
      pointer-events: none;
    }
[dir] .Input-input_f867efcd input ~ label {
      -webkit-transition: 0.2s ease all;
    }
[dir=ltr] .Input-input_f867efcd input ~ label {
 left: 1.25rem;
    }
[dir=rtl] .Input-input_f867efcd input ~ label {
      right: 1.25rem;
    }
.Input-input_f867efcd input:focus {
      -webkit-box-shadow: #fff;
      outline: none
    }
[dir] .Input-input_f867efcd input:focus {
      border-color: #000;
              box-shadow: #fff
    }
.Input-input_f867efcd input:focus ~ label {
        top: 0.19rem;
        font-size: 0.75rem;
        color: #606060;
      }
[dir=ltr] .Input-input_f867efcd input:focus ~ label {
 left: 1.25rem;
      }
[dir=rtl] .Input-input_f867efcd input:focus ~ label {
        right: 1.25rem;
      }
[dir] .Input-input_f867efcd input[disabled] {
      cursor: not-allowed;
      background-color: #202020;
    }
.Input-input_f867efcd span {
    width: 100%;
    font-size: 0.9em;
    display: inline-block;
    position: relative;
    color: #fff;
  }
[dir] .Input-input_f867efcd span {
    background: #e63c3c;
    padding: 1rem;
    border-radius: 0.25rem;
    margin: 1em 0 0.5em;
  }
.Input-input_f867efcd span::after {
    bottom: 100%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
[dir] .Input-input_f867efcd span::after {
    border: solid transparent;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #e63c3c;
    border-width: 0.63rem;
  }
[dir=ltr] .Input-input_f867efcd span::after {
 left: 2.5rem;
 margin-left: -0.63rem;
  }
[dir=rtl] .Input-input_f867efcd span::after {
    right: 2.5rem;
    margin-right: -0.63rem;
  }
.Input-input_f867efcd.Input-filled_f4f7b978 label {
      top: 0.19rem;
      font-size: 0.75rem;
      color: #606060;
    }
[dir=ltr] .Input-input_f867efcd.Input-filled_f4f7b978 label {
 left: 1.25rem;
    }
[dir=rtl] .Input-input_f867efcd.Input-filled_f4f7b978 label {
      right: 1.25rem;
    }
[dir=ltr] .Input-input_f867efcd.Input-error_2206c892 {
 margin: 0 1.25rem 1.25rem 0;
  }
[dir=rtl] .Input-input_f867efcd.Input-error_2206c892 {
    margin: 0 0 1.25rem 1.25rem;
  }
[dir] .Input-input_f867efcd.Input-error_2206c892 input {
      border-color: #e63c3c;
    }

/* store base styles */
/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* store form base styles */
.Textarea-textarea_042cb874 {
  position: relative;
}
[dir] .Textarea-textarea_042cb874 .Textarea-active_8e0b0fe3 {
    border: solid 0.06rem #e63c3c;
  }
.Textarea-textarea_042cb874 textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 3.13rem;
    max-height: 15.63rem;
    color: #7e7f82;
    -webkit-box-sizing: border-box;
            box-sizing: border-box
  }
[dir] .Textarea-textarea_042cb874 textarea {
    padding: 1.25rem;
    border: 0.06rem solid #4b4b4c;
    border-radius: 0.19rem;
    background-color: transparent
  }
.Textarea-textarea_042cb874 textarea ~ label {
      top: 1.31rem;
      font-weight: 400;
      font-size: 0.75rem;
      position: absolute;
      -o-transition: 0.2s ease all;
      transition: 0.2s ease all;
      color: #7e7f82;
      pointer-events: none;
    }
[dir] .Textarea-textarea_042cb874 textarea ~ label {
      -webkit-transition: 0.2s ease all;
    }
[dir=ltr] .Textarea-textarea_042cb874 textarea ~ label {
 left: 1.25rem;
    }
[dir=rtl] .Textarea-textarea_042cb874 textarea ~ label {
      right: 1.25rem;
    }
.Textarea-textarea_042cb874 textarea:focus {
      -webkit-box-shadow: #fff;
      outline: none
    }
[dir] .Textarea-textarea_042cb874 textarea:focus {
      border-color: #000;
              box-shadow: #fff
    }
.Textarea-textarea_042cb874 textarea:focus ~ label {
        top: 0.19rem;
        font-size: 0.75rem;
        color: #606060;
      }
[dir=ltr] .Textarea-textarea_042cb874 textarea:focus ~ label {
 left: 1.25rem;
      }
[dir=rtl] .Textarea-textarea_042cb874 textarea:focus ~ label {
        right: 1.25rem;
      }
[dir] .Textarea-textarea_042cb874 textarea[disabled] {
      cursor: not-allowed;
      background-color: #202020;
    }
.Textarea-textarea_042cb874 span {
    width: 100%;
    font-size: 0.9em;
    display: inline-block;
    position: relative;
    color: #fff;
  }
[dir] .Textarea-textarea_042cb874 span {
    background: #e63c3c;
    padding: 1rem;
    border-radius: 0.25rem;
    margin: 1em 0 0.5em;
  }
.Textarea-textarea_042cb874 span::after {
    bottom: 100%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
[dir] .Textarea-textarea_042cb874 span::after {
    border: solid transparent;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #e63c3c;
    border-width: 0.63rem;
  }
[dir=ltr] .Textarea-textarea_042cb874 span::after {
 left: 2.5rem;
 margin-left: -0.63rem;
  }
[dir=rtl] .Textarea-textarea_042cb874 span::after {
    right: 2.5rem;
    margin-right: -0.63rem;
  }
.Textarea-textarea_042cb874.Textarea-filled_bcd56bb3 label {
      top: 0.19rem;
      font-size: 0.75rem;
      color: #606060;
    }
[dir=ltr] .Textarea-textarea_042cb874.Textarea-filled_bcd56bb3 label {
 left: 1.25rem;
    }
[dir=rtl] .Textarea-textarea_042cb874.Textarea-filled_bcd56bb3 label {
      right: 1.25rem;
    }
[dir=ltr] .Textarea-textarea_042cb874.Textarea-error_3c55d3ac {
 margin: 0 1.25rem 1.25rem 0;
  }
[dir=rtl] .Textarea-textarea_042cb874.Textarea-error_3c55d3ac {
    margin: 0 0 1.25rem 1.25rem;
  }
[dir] .Textarea-textarea_042cb874.Textarea-error_3c55d3ac input {
      border-color: #e63c3c;
    }

/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.DropList-dropList_4070fe55 {
  position: relative;
  outline: none;
  z-index: 0
}
[dir] .DropList-dropList_4070fe55 {
  cursor: pointer
}
.DropList-dropList_4070fe55.DropList-active_458f8b8d {
    color: var(--color-white);
    z-index: 9999;
  }
.DropList-dropList_4070fe55.DropList-active_458f8b8d .DropList-list_c021b2ce {
      display: block;
    }
[dir] .DropList-dropList_4070fe55.DropList-disabled_09eed35d {
    cursor: not-allowed;
    background-color: var(--color-gray-dark);
  }
.DropList-dropList_4070fe55 .DropList-input_c8848339 {
    width: 100%;
    color: #7e7f82;
    -webkit-box-sizing: border-box;
            box-sizing: border-box
  }
[dir] .DropList-dropList_4070fe55 .DropList-input_c8848339 {
    border: 0.06rem solid #4b4b4c;
    border-radius: 0.19rem;
    background-color: transparent;
    padding: 1.28rem
  }
[dir] .DropList-dropList_4070fe55 .DropList-input_c8848339::-moz-selection {
      background: transparent;
    }
[dir] .DropList-dropList_4070fe55 .DropList-input_c8848339::selection {
      background: transparent;
    }
[dir] .DropList-dropList_4070fe55 .DropList-input_c8848339:disabled {
    cursor: not-allowed;
  }
.DropList-dropListIcon_62048740 {
  position: absolute;
  top: 40%;
  vertical-align: middle;
}
[dir] .DropList-dropListIcon_62048740 {
  margin-top: -0.25rem;
}
[dir=ltr] .DropList-dropListIcon_62048740 {
  right: 10%;
  float: right;
}
[dir=rtl] .DropList-dropListIcon_62048740 {
  left: 10%;
  float: left;
}
.DropList-list_c021b2ce {
  display: none;
  position: absolute;
  width: auto;
  top: calc(100% + 0.63rem);
  white-space: nowrap;
  max-height: 15.63rem;
  overflow-y: auto;
  min-width: 100%;
  color: #bcbcbc;
  z-index: 10
}
[dir] .DropList-list_c021b2ce {
  background-color: var(--color-gray-dark);
  padding: 0;
  margin: 0
}
[dir=ltr] .DropList-list_c021b2ce {
  left: 0;
  text-align: left
}
[dir=rtl] .DropList-list_c021b2ce {
  right: 0;
  text-align: right
}
.DropList-list_c021b2ce.DropList-light_5f5df53e {
    color: #444;
  }
[dir] .DropList-list_c021b2ce.DropList-light_5f5df53e {
    background-color: #eaeaea;
  }
.DropList-list_c021b2ce.DropList-light_5f5df53e > div:hover {
        color: #000;
      }
.DropList-list_c021b2ce > div {
    z-index: 100
  }
[dir] .DropList-list_c021b2ce > div {
    padding: 0.63rem 1.25rem
  }
.DropList-list_c021b2ce > div:hover {
      color: var(--color-white);
    }

/* store base styles */
/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
/* store form base styles */
.Select-select_073ff976 {
  color: #7e7f82
}
[dir] .Select-select_073ff976 {
  border-radius: 0.19rem
}
[dir] .Select-select_073ff976.Select-error_8b304d52 {
    border-color: #e63c3c;
  }
[dir] .Select-select_073ff976.Select-error_8b304d52 > input {
      border-color: #e63c3c;
    }
[dir] .Select-select_073ff976.Select-active_c21d9c3d {
    border-color: #fff;
  }
[dir] .Select-select_073ff976.Select-disabled_66a53878 {
    background-color: #f5f5f5;
  }
.Select-select_073ff976 > label {
    display: inline-block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    max-width: calc(100% - 1.88rem);
    white-space: nowrap;
  }
.Select-select_073ff976 .Select-icon_6a261225 {
    position: absolute;
    top: 35%;
  }
[dir] .Select-select_073ff976 .Select-icon_6a261225 {
    margin-top: -0.25rem;
  }
[dir=ltr] .Select-select_073ff976 .Select-icon_6a261225 {
 right: 0%;
 float: right;
 margin-right: 0.63rem;
  }
[dir=rtl] .Select-select_073ff976 .Select-icon_6a261225 {
    left: 0%;
    float: left;
    margin-left: 0.63rem;
  }
.Select-select_073ff976 > div {
    top: 100%;
  }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.LoadingIndicator-loading_644f3529 .LoadingIndicator-loadingIcon_b6bd1290 {
    font-size: 1rem;
    height: 6em;
  }
[dir] .LoadingIndicator-loading_644f3529 .LoadingIndicator-loadingIcon_b6bd1290 {
    background: url(e478aef429408f0f0a5779b820559732.gif) center no-repeat;
    background-size: 4em;
  }
[dir=ltr] .LoadingIndicator-loading_644f3529 .LoadingIndicator-loadingIcon_b6bd1290 {
 margin-left: -1.25rem;
  }
[dir=rtl] .LoadingIndicator-loading_644f3529 .LoadingIndicator-loadingIcon_b6bd1290 {
    margin-right: -1.25rem;
  }

/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
[dir] .StoreForm-storeForm_1cdbfc26 {
  margin-top: 3em;
  padding: 0 1em;
}
.StoreForm-storeForm_1cdbfc26 form {
    max-width: 37.5rem;
  }
[dir] .StoreForm-storeForm_1cdbfc26 form {
    margin: 0 auto;
  }
[dir] .StoreForm-storeForm_1cdbfc26 form > div, [dir] .StoreForm-storeForm_1cdbfc26 form > button {
    margin: 1em;
  }
.StoreForm-storeForm_1cdbfc26 form > div.StoreForm-formItemLabelWrapper_044439bc > div > span {
    color: #fff;
    opacity: 1;
  }
[dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-buttonWrapper_f4031a0c {
    text-align: center;
  }
[dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-buttonWrapper_f4031a0c > button[disabled], [dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-buttonWrapper_f4031a0c > button:disabled {
    background: var(--theme-button-primary-bg-disabled);
  }
[dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-submittedSection_d9ce586e {
    margin: 1em;
    text-align: center;
  }
.StoreForm-storeForm_1cdbfc26 .StoreForm-loading_37375938 {
    opacity: 0.5;
    font-size: 0.9em;
    color: black;
  }
.StoreForm-storeForm_1cdbfc26 .StoreForm-success_d9c0e412 {
    width: 100%;
    color: green;
  }
[dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-success_d9c0e412 {
    border: 0.06rem solid green;
    padding: 1em 4em;
  }
.StoreForm-storeForm_1cdbfc26 .StoreForm-failure_5f5264e3 {
    width: 100%;
    color: red;
  }
[dir] .StoreForm-storeForm_1cdbfc26 .StoreForm-failure_5f5264e3 {
    border: 0.06rem solid red;
    padding: 1em 4em;
  }
.StoreForm-storeForm_1cdbfc26 .StoreForm-formItemLabelWrapper_044439bc span {
      color: #000;
      font-size: 0.9em;
      opacity: 0.8;
    }

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.About-about_5fe858cf {
  min-height: 100vh;
}
[dir] .About-about_5fe858cf {
  padding: 0;
  background-color: #f5f5f5;
}
.About-about_5fe858cf table.payment-methods {
      color: black;
      font-size: 0.81rem;
    }
[dir] .About-about_5fe858cf table.payment-methods td, [dir] .About-about_5fe858cf table.payment-methods th {
        padding: 0.19rem;
      }
[dir] .About-about_5fe858cf table.payment-methods th {
        border: none;
      }
[dir] .About-descriptionWrapper_7f70a327 {
  background: #f9f9f9;
}
.About-descriptionWrapper_7f70a327 .About-descImage_f26901c8 {
    width: 100%
  }
[dir] .About-descriptionWrapper_7f70a327 .About-descImage_f26901c8 {
    padding: 1em
  }
@media (min-width: 768px) {

  .About-descriptionWrapper_7f70a327 .About-descImage_f26901c8 {
      width: 80%
  }

  [dir] .About-descriptionWrapper_7f70a327 .About-descImage_f26901c8 {
      padding: 1em 3em
  }
    }
[dir] .About-form_ad9330c2 > p {
  padding: 0 2em;
}
.About-description_843dad87 {
  color: black;
  font-size: 1rem;
}
[dir] .About-description_843dad87 {
  padding: 5em 2em;
  margin-bottom: 2em;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

  .About-description_843dad87 > div {
      min-height: 10rem
  }
    }
.About-description_843dad87 > div:last-child {
    min-height: auto;
  }
.About-description_843dad87 h4,
  .About-description_843dad87 p {
    color: black;
  }
[dir] .About-description_843dad87 h4, [dir] .About-description_843dad87 p {
    text-align: center;
  }
.About-description_843dad87 h4 {
    font-size: 1.4em;
    font-weight: bold;
  }
.About-description_843dad87 p {
    max-width: 25rem;
  }
[dir] .About-description_843dad87 p {
    margin: 0.5em auto 1.5em;
  }
[dir] .About-descImageWrapper_679aed9a {
  margin: 0.5em 0 4em;
  text-align: center;
}
.About-mobile_bddb760a .About-headerSection_7282cba0 {
  height: 13.75rem;
}
[dir=ltr] .About-mobile_bddb760a .About-headerSection_7282cba0 {
 background-position: top right;
}
[dir=rtl] .About-mobile_bddb760a .About-headerSection_7282cba0 {
  background-position: top left;
}
.About-mobile_bddb760a .About-headerSection_7282cba0 h1 {
    font-size: 2em;
  }
.About-tablet_d53515ba .About-headerSection_7282cba0 {
  height: 18.75rem;
}
.About-headerSection_7282cba0 {
  height: 26.88rem;
  position: relative;
}
[dir] .About-headerSection_7282cba0 {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 2em;
}
[dir=ltr] .About-headerSection_7282cba0 {
 background-position: top right;
}
[dir=rtl] .About-headerSection_7282cba0 {
  background-position: top left;
}
.About-headerSection_7282cba0 h1,
  .About-headerSection_7282cba0 h4 {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    font-size: 3em
  }
[dir] .About-headerSection_7282cba0 h1, [dir] .About-headerSection_7282cba0 h4 {
            transform: translateY(-50%);
    text-align: center;
    padding: 0 1em
  }
[dir=ltr] .About-headerSection_7282cba0 h1, [dir=ltr] .About-headerSection_7282cba0 h4 {
 left: 0;
 right: 0
  }
[dir=rtl] .About-headerSection_7282cba0 h1, [dir=rtl] .About-headerSection_7282cba0 h4 {
    right: 0;
    left: 0
  }
@media (min-width: 768px) {

  .About-headerSection_7282cba0 h1,
  .About-headerSection_7282cba0 h4 {
      font-size: 4em
  }
    }
.About-headerSection_7282cba0 h4 {
    font-size: 0.8em;
    -webkit-transform: translateY(6em);
        -ms-transform: translateY(6em);
    opacity: 0.8
  }
[dir] .About-headerSection_7282cba0 h4 {
            transform: translateY(6em)
  }
@media (min-width: 768px) {

  .About-headerSection_7282cba0 h4 {
      font-size: 1em;
      -webkit-transform: translateY(5em);
          -ms-transform: translateY(5em)
  }

  [dir] .About-headerSection_7282cba0 h4 {
              transform: translateY(5em)
  }
    }
@media (min-width: 1024px) {
[dir] .About-headerSection_7282cba0 {
    background-position: top center
}
  }
.About-lowerContent_7fc56a6f {
  width: 100%;
}
[dir] .About-lowerContent_7fc56a6f {
  padding-bottom: 4em;
}
.About-about_5fe858cf a {
  display: block;
}
.About-about_5fe858cf p {
  color: black;
}
.About-about_5fe858cf h3 {
  color: black;
  font-size: 2.38rem;
}
[dir] .About-about_5fe858cf h3 {
  margin: 1.88rem 0;
  text-align: center;
}
[dir] .About-devFaq_25a64c7a {
  padding: 0 2em;
}
[dir] .About-privacyPolicyLink_3b161b49 {
  text-align: center;
}
[dir] .About-form_ad9330c2 h3 {
    margin-top: 2em;
  }
[dir] .About-form_ad9330c2 p {
    text-align: center;
  }

.download-view{background-color:#565656;position:relative;height:100%}@media only screen and (max-width: 1199px){.download-view.install .download-box{max-width:380px}.download-view.install .download-box .product-name{margin-bottom:1.5em}}@media only screen and (max-width: 991px){.download-view.install .download-box{min-height:30vh;max-width:initial}}.download-view.product-image{width:100%;background-color:black}.download-view .product-name{opacity:0.8;text-transform:uppercase;margin-bottom:3em}.download-view .product-name a{font-size:1.2em !important}.download-view .container{position:relative}.download-view .download-box{background:#121212;max-width:600px;margin:1.75em auto;padding:3em;min-height:40vh;text-align:center}@media only screen and (max-width: 991px){.download-view .download-box{width:100%;max-width:initial}}.download-view .download-box .logo-wrapper{margin-bottom:2em;text-align:center}.download-view .download-box .logo-wrapper a{display:inline-block}.download-view .download-box .logo-wrapper img{width:45px}.download-view .download-box h1{text-transform:uppercase;color:white;font-size:2.5em;font-family:'Brutal', sans-serif;font-weight:700;margin-bottom:1em}.download-view .download-box h1.has-product-name{margin-bottom:0.5em}.download-view .download-box .open-launcher{margin-bottom:2em}.download-view .download-box p{opacity:0.9;color:#ccc;font-size:0.78em;margin-bottom:2em}@media only screen and (max-width: 991px){.download-view .download-box p{padding:0 2em}}.download-view .download-header{padding:3em 3em 0}.download-view .download-footer{background:#1e1e1e;padding:3em;text-align:left}@media only screen and (max-width: 991px){.download-view .download-footer p{padding:0}}.download-view .download-footer-btns{display:flex;text-align:center;flex-wrap:wrap;margin:-10px}.download-view .download-footer-btns div{flex-grow:1;margin:10px;flex-basis:0}.download-view .download-footer-btns button,.download-view .download-footer-btns a{width:100%}.download-view .background-wrapper{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0.6;overflow:hidden;display:flex;justify-content:flex-start;align-items:flex-start}@media only screen and (max-width: 991px){.download-view .background-wrapper{justify-content:center}}.download-view .background-image{background-size:cover;background-position:center center;height:100%;width:100%;display:block}

/*
https://css-tricks.com/thing-know-gradients-transparent-black/
Safari doesn't correctly handle transparent color in gradients,
to solve this, we need the same gradient color with the alpha 0.
All the colors below with alpha 0 might be in use on a gradient.
*/
/*
Do not calc() with variables that already contain calc().
PostCSS will simply nest them and IE will not recognize the calculation.
https://codepen.io/zachhanding/post/nested-calc-functions-and-ie11
*/
:root { /* to be synced with our max breakpoint */ /* must be above epic-nav header - 99998 */

  /* Legacy Layout Grid Variables */

  /* new grid */

  /* mobile */

  /* 768 */

  /* 1024 */ /* This var might be a little misleading since its not the actual width but the grid column it ends on */

  /* 1280 */

  /* 1440 */

  /* Easing curves */
}
/* Apply flex properties for elements with inner padding
   Without this, IE11 will ignore border-box sizing
   https://github.com/philipwalton/flexbugs#workaround-6 */
/*
  Applies a given ratio.
  Ex: @mixin aspect-ratio 100% will create a square.
  Assumes that inner content will live in an with class `inner`
  (or another absolutely positioned element).
*/
/*
  GRID MIXINS
  Apply to grid lists and list items to create a grid with standard spacing.
  Flex-basis values can be overwritten for different columns widths.
*/
/*
  COLUMN GRID MIXIN
  Creates a local css variable to use for width or spacing.
  Use for md, lg, and xl breakpoints.
*/
.Redemption-pageWrapper_9e6e4564 {
}
.Redemption-outer_aeb343e0 {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-basis: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto
}
[dir] .Redemption-outer_aeb343e0 {
  padding-top: 5rem
}
[dir=ltr] .Redemption-outer_aeb343e0 {
 padding-left: 2.13rem;
 padding-right: 2.13rem
}
[dir=rtl] .Redemption-outer_aeb343e0 {
  padding-right: 2.13rem;
  padding-left: 2.13rem
}
@media (min-width: 576px) {
.Redemption-outer_aeb343e0 {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100vh
}
  }
@media (min-width: 768px) {
[dir] .Redemption-outer_aeb343e0 {
    padding: 0 3.75rem
}
  }
@media (min-width: 768px) {
[dir] .Redemption-outerWeb_e8f4431a {
    padding: 0 5rem
}
  }
.Redemption-inner_c450fef3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-basis: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto
}
@media (min-width: 768px) {
.Redemption-inner_c450fef3 {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
@media (min-width: 768px) and (max-width: 1023px) {
.Redemption-inner_c450fef3 {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start
}
  }
.Redemption-card_a97667e0 {
  width: 11.06rem;
  min-width: 11.06rem;
  height: calc(11.06rem * 1.3);
  font-size: 0
}
[dir] .Redemption-card_a97667e0 {
  margin-bottom: 2.13rem
}
@media (min-width: 768px) {
[dir=ltr] .Redemption-card_a97667e0 {
  margin-right: 2.13rem
}
[dir=rtl] .Redemption-card_a97667e0 {
    margin-left: 2.13rem
}
  }
@media (min-width: 1024px) {
.Redemption-card_a97667e0 {
    width: 19.69rem;
    min-width: 19.69rem;
    height: calc(19.69rem * 1.3)
}
[dir=ltr] .Redemption-card_a97667e0 {
  margin-right: 3.75rem
}
[dir=rtl] .Redemption-card_a97667e0 {
    margin-left: 3.75rem
}
  }
.Redemption-cardPlaceholder_4d557b5b,
.Redemption-cardImage_844c49e0 {
  display: block;
  height: 100%;
  width: 100%;
}
[dir] .Redemption-cardPlaceholder_4d557b5b, [dir] .Redemption-cardImage_844c49e0 {
  background-color: #202020;
  background-position: center;
  margin-bottom: 0.75rem;
}
.Redemption-cardPlaceholder_4d557b5b {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
[dir] .Redemption-cardImage_844c49e0 {
  background-size: contain;
  background-repeat: no-repeat;
}
.Redemption-cardAside_6aa19a27 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
  font-size: 0.63rem;

  color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  visibility: hidden
}
@media (min-width: 768px) {
.Redemption-cardAside_6aa19a27 {
    visibility: visible
}
  }
[dir] .Redemption-aside_ce56fdde, [dir] .Redemption-aside_ce56fdde input {
  text-align: center
}
@media (min-width: 768px) {
[dir=ltr] .Redemption-aside_ce56fdde, [dir=ltr] .Redemption-aside_ce56fdde input {
  text-align: left
}
[dir=rtl] .Redemption-aside_ce56fdde, [dir=rtl] .Redemption-aside_ce56fdde input {
    text-align: right
}
  }
@media (min-width: 1024px) {
[dir] .Redemption-aside_ce56fdde {
    padding: 10% 0
}
  }
.Redemption-paragraph_ed04355c,
.Redemption-error_f7b51a53 {
  font-size: 0.88rem;
  letter-spacing: 0.01rem;
  line-height: 1.4;
}
.Redemption-title_7650b080 {
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  line-height: 1.25
}
[dir] .Redemption-title_7650b080 {

  padding-bottom: 0.75rem
}
@media (min-width: 768px) {
.Redemption-title_7650b080 {
    font-size: 1.88rem;
    letter-spacing: -0.02rem;
    line-height: 1
}
  }
.Redemption-paragraph_ed04355c {
  color: rgba(255, 255, 255, 0.5);
}
[dir] .Redemption-paragraph_ed04355c:first-of-type {
  margin-top: 0;
}
@media (min-width: 1024px) {
[dir] .Redemption-paragraph_ed04355c:last-of-type {
    margin-bottom: 1.63rem
}
  }
.Redemption-title_7650b080,
.Redemption-paragraph_ed04355c {
  white-space: pre-wrap; /* So we can use `\n` for line breaks */
}
.Redemption-form_5f150237 {
  width: 100%;
  position: relative;
}
[dir] .Redemption-form_5f150237 {
  padding-top: 1.25rem;
}
.Redemption-form_5f150237 .Redemption-label_a8795ded {
    width: 100%;
  }
[dir] .Redemption-label_a8795ded + .Redemption-buttonGroup_364c1197 {
  margin-top: 1.63rem;
}
.Redemption-input_7517de2b {
  font-size: 1.25rem;
  letter-spacing: -0.01rem;
  line-height: 1.25;

  color: #fff;
  outline: 0;
  width: 100%
}
[dir] .Redemption-input_7517de2b {
  background-color: transparent;
  border: 0
}
@media (min-width: 1280px) {
.Redemption-input_7517de2b {
    font-size: 1.88rem;
    letter-spacing: -0.02rem;
    line-height: 1
}
  }
@media (min-width: 768px) {
.Redemption-inputWeb_0287f432 {
    font-size: 1.88rem;
    letter-spacing: -0.02rem;
    line-height: 1
}
  }
.Redemption-input_7517de2b::-ms-clear {
  display: none;
}
.Redemption-input_7517de2b::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.1);
}
.Redemption-input_7517de2b::-moz-placeholder {
  color: rgba(255, 255, 255, 0.1);
}
.Redemption-input_7517de2b::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.1);
}
.Redemption-input_7517de2b::placeholder {
  color: rgba(255, 255, 255, 0.1);
}
.Redemption-visuallyHidden_03ed77d0 {
  clip: rect(0 0 0 0);
  height: 0.06rem;
  overflow: hidden;
  position: absolute;
  width: 0.06rem;
}
[dir] .Redemption-visuallyHidden_03ed77d0 {
  border: 0;
  margin: -0.06rem;
  padding: 0;
}
.Redemption-error_f7b51a53 {
  display: inline-block;
  color: #e63c3c;
  width: 100%
}
[dir] .Redemption-error_f7b51a53 {
  margin-bottom: 2.63rem
}
@media (min-width: 768px) {
[dir] .Redemption-error_f7b51a53 {
    margin-bottom: 1.63rem
}
  }
.Redemption-buttonGroup_364c1197 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}
@media (max-width: 575px) {
[dir] .Redemption-buttonGroup_364c1197 {
    margin-bottom: 5rem;
}

    .Redemption-buttonGroup_364c1197,
    .Redemption-buttonGroup_364c1197 .Redemption-buttonPrimary_b0ca4ab9 {
      width: 100%;
    }
  }
.Redemption-buttonPrimary_b0ca4ab9 {
  font-size: 0.75rem;
  letter-spacing: 0.03rem;
  line-height: 1.3333;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase
}
[dir] .Redemption-buttonPrimary_b0ca4ab9 {

  text-align: center;
  background-color: #0078f2
}
@media (min-width: 768px) {
[dir=ltr] .Redemption-buttonPrimary_b0ca4ab9 {
  padding-left: 3.75rem;
  padding-right: 3.75rem
}
[dir=rtl] .Redemption-buttonPrimary_b0ca4ab9 {
    padding-right: 3.75rem;
    padding-left: 3.75rem
}
  }
.Redemption-buttonPrimary_b0ca4ab9:disabled {
  color: rgba(255, 255, 255, 0.5);
}
[dir] .Redemption-buttonPrimary_b0ca4ab9:disabled {
  background-color: #202020;
}
[dir=ltr] .Redemption-buttonRight_be364ab2 {
 margin-left: 1.25rem;
}
[dir=rtl] .Redemption-buttonRight_be364ab2 {
  margin-right: 1.25rem;
}

#dieselReactWrapper #egh #cta.cta.eg-store a{font-size:18px}#dieselReactWrapper #egh #cta.cta.eg-store.sale a>span{display:table;font-family:Brutal-Medium, sans-serif;font-weight:400}#dieselReactWrapper #egh #cta.cta.eg-store.sale a>span s{font-size:13px;opacity:0.8;display:table-cell;margin:0;position:relative;top:-4px}#dieselReactWrapper #egh #cta.cta.eg-store.sale a>span span{font-size:15px;float:left;display:table-cell;top:2px;min-width:initial;transform:initial}#dieselReactWrapper #egh #cta.cta.eg-store.free span{font-size:15px;top:7px;line-height:24px;transform:initial;font-family:Brutal-Medium, sans-serif;font-weight:400}#dieselReactWrapper #egh #cta.cta.eg-store.disabled{background:#b28f2b}#dieselReactWrapper #egh #cta.cta.eg-store.disabled a{pointer-events:none;cursor:not-allowed}#dieselReactWrapper #egh #cta.cta.eg-store.disabled a:hover{background:#b28f2b}


/*# sourceMappingURL=main.diesel-site.a80fd3502b1c70f48f67.css.map*/