@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&family=Teko:wght@400;700&display=swap");
article, aside, details, dl, dt, dd, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

svg:not(:root) {
  overflow: hidden;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

button, html input[type=button], input[type=reset], input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

*,
*::after,
*::before {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  padding: 0;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  position: relative;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

a {
  background-color: transparent;
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

button {
  background: none;
  color: inherit;
  line-height: 1em;
  padding: 0.5em;
}

img {
  border: 0;
  border-style: none;
}

input[type=checkbox] {
  cursor: pointer;
}

.position__absolute, .modes-shelf-image::after, .news-link,
.social-link,
.modes-link, li[mhb-type]::after, .modes-cards a, .modes-cards figcaption, #index-story figure > *, #membership-home-video figure > *,
#campaign-story figure > *, .slick-fs-body, .blocker::after, .slick-fs-ui .slick-dots li > button, .modesGrid-slick-ui .slick-dots li > button, .newsGrid-slick-ui .slick-dots li > button, .btngrd .btngrd-cover, .btngrd .btngrd-desktop, #page-hero .frame__content, .nav__content::before, .news-image > img, .sns::before, .sns::after {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

:root:lang(en),
:root:lang(fr),
:root:lang(de),
:root:lang(es),
:root:lang(pt),
:root:lang(it) {
  font-family: "Barlow", "Segoe UI", "SegoeUI", sans-serif;
}

.headline-font:lang(en), #news-filter-modal h3:lang(en), button.button-super:lang(en), .header-cta button:lang(en),
button.button-prime:lang(en),
input[type=submit].button-prime:lang(en), [id*=cfx-modal] h2:lang(en), .xbl-rewards figcaption:lang(en), .xbl-textbox h1:lang(en), #consent-modal div > div:not(:first-of-type) h1:lang(en), .creators-faq dl dt:lang(en)::before, .partner-modal .partner-language:lang(en), .partner-name:lang(en), .featured-title:lang(en), #cip-logos h1:lang(en), .mhb-card h2:lang(en),
.mhb-table-header h2:lang(en), #mhd-tiers h2:lang(en),
#mhd-steps h2:lang(en), #mhh-calendar .mhh-calendar-box h3:lang(en), #mhh-logos h1:lang(en),
#mhh-logos h2:lang(en), .msp-forms h2:lang(en), .cpn-forms h2:lang(en), #g-container article h1:lang(en),
#g-container article h2:lang(en),
#g-container article h3:lang(en),
#g-container article h4:lang(en),
#g-container article h5:lang(en),
#g-container article h6:lang(en), #news-list .news-copy p span:lang(en), #g-container header h1:lang(en), #g-container header h2:lang(en), .modes-cards-desc p:lang(en), .modes-cards figcaption h2:lang(en), #campaign-promo-2 h2:lang(en),
.slick-fs-body h2:lang(en), .s-container h1:lang(en), .container__fixed h1:lang(en),
.container__fluid h1:lang(en),
.slick-fs-body h1:lang(en), .header-cta h1:lang(en),
.header-headline h1:lang(en), .headline-font:lang(fr), #news-filter-modal h3:lang(fr), button.button-super:lang(fr), .header-cta button:lang(fr),
button.button-prime:lang(fr),
input[type=submit].button-prime:lang(fr), [id*=cfx-modal] h2:lang(fr), .xbl-rewards figcaption:lang(fr), .xbl-textbox h1:lang(fr), #consent-modal div > div:not(:first-of-type) h1:lang(fr), .creators-faq dl dt:lang(fr)::before, .partner-modal .partner-language:lang(fr), .partner-name:lang(fr), .featured-title:lang(fr), #cip-logos h1:lang(fr), .mhb-card h2:lang(fr),
.mhb-table-header h2:lang(fr), #mhd-tiers h2:lang(fr),
#mhd-steps h2:lang(fr), #mhh-calendar .mhh-calendar-box h3:lang(fr), #mhh-logos h1:lang(fr),
#mhh-logos h2:lang(fr), .msp-forms h2:lang(fr), .cpn-forms h2:lang(fr), #g-container article h1:lang(fr),
#g-container article h2:lang(fr),
#g-container article h3:lang(fr),
#g-container article h4:lang(fr),
#g-container article h5:lang(fr),
#g-container article h6:lang(fr), #news-list .news-copy p span:lang(fr), #g-container header h1:lang(fr), #g-container header h2:lang(fr), .modes-cards-desc p:lang(fr), .modes-cards figcaption h2:lang(fr), #campaign-promo-2 h2:lang(fr),
.slick-fs-body h2:lang(fr), .s-container h1:lang(fr), .container__fixed h1:lang(fr),
.container__fluid h1:lang(fr),
.slick-fs-body h1:lang(fr), .header-cta h1:lang(fr),
.header-headline h1:lang(fr), .headline-font:lang(de), #news-filter-modal h3:lang(de), button.button-super:lang(de), .header-cta button:lang(de),
button.button-prime:lang(de),
input[type=submit].button-prime:lang(de), [id*=cfx-modal] h2:lang(de), .xbl-rewards figcaption:lang(de), .xbl-textbox h1:lang(de), #consent-modal div > div:not(:first-of-type) h1:lang(de), .creators-faq dl dt:lang(de)::before, .partner-modal .partner-language:lang(de), .partner-name:lang(de), .featured-title:lang(de), #cip-logos h1:lang(de), .mhb-card h2:lang(de),
.mhb-table-header h2:lang(de), #mhd-tiers h2:lang(de),
#mhd-steps h2:lang(de), #mhh-calendar .mhh-calendar-box h3:lang(de), #mhh-logos h1:lang(de),
#mhh-logos h2:lang(de), .msp-forms h2:lang(de), .cpn-forms h2:lang(de), #g-container article h1:lang(de),
#g-container article h2:lang(de),
#g-container article h3:lang(de),
#g-container article h4:lang(de),
#g-container article h5:lang(de),
#g-container article h6:lang(de), #news-list .news-copy p span:lang(de), #g-container header h1:lang(de), #g-container header h2:lang(de), .modes-cards-desc p:lang(de), .modes-cards figcaption h2:lang(de), #campaign-promo-2 h2:lang(de),
.slick-fs-body h2:lang(de), .s-container h1:lang(de), .container__fixed h1:lang(de),
.container__fluid h1:lang(de),
.slick-fs-body h1:lang(de), .header-cta h1:lang(de),
.header-headline h1:lang(de), .headline-font:lang(es), #news-filter-modal h3:lang(es), button.button-super:lang(es), .header-cta button:lang(es),
button.button-prime:lang(es),
input[type=submit].button-prime:lang(es), [id*=cfx-modal] h2:lang(es), .xbl-rewards figcaption:lang(es), .xbl-textbox h1:lang(es), #consent-modal div > div:not(:first-of-type) h1:lang(es), .creators-faq dl dt:lang(es)::before, .partner-modal .partner-language:lang(es), .partner-name:lang(es), .featured-title:lang(es), #cip-logos h1:lang(es), .mhb-card h2:lang(es),
.mhb-table-header h2:lang(es), #mhd-tiers h2:lang(es),
#mhd-steps h2:lang(es), #mhh-calendar .mhh-calendar-box h3:lang(es), #mhh-logos h1:lang(es),
#mhh-logos h2:lang(es), .msp-forms h2:lang(es), .cpn-forms h2:lang(es), #g-container article h1:lang(es),
#g-container article h2:lang(es),
#g-container article h3:lang(es),
#g-container article h4:lang(es),
#g-container article h5:lang(es),
#g-container article h6:lang(es), #news-list .news-copy p span:lang(es), #g-container header h1:lang(es), #g-container header h2:lang(es), .modes-cards-desc p:lang(es), .modes-cards figcaption h2:lang(es), #campaign-promo-2 h2:lang(es),
.slick-fs-body h2:lang(es), .s-container h1:lang(es), .container__fixed h1:lang(es),
.container__fluid h1:lang(es),
.slick-fs-body h1:lang(es), .header-cta h1:lang(es),
.header-headline h1:lang(es), .headline-font:lang(pt), #news-filter-modal h3:lang(pt), button.button-super:lang(pt), .header-cta button:lang(pt),
button.button-prime:lang(pt),
input[type=submit].button-prime:lang(pt), [id*=cfx-modal] h2:lang(pt), .xbl-rewards figcaption:lang(pt), .xbl-textbox h1:lang(pt), #consent-modal div > div:not(:first-of-type) h1:lang(pt), .creators-faq dl dt:lang(pt)::before, .partner-modal .partner-language:lang(pt), .partner-name:lang(pt), .featured-title:lang(pt), #cip-logos h1:lang(pt), .mhb-card h2:lang(pt),
.mhb-table-header h2:lang(pt), #mhd-tiers h2:lang(pt),
#mhd-steps h2:lang(pt), #mhh-calendar .mhh-calendar-box h3:lang(pt), #mhh-logos h1:lang(pt),
#mhh-logos h2:lang(pt), .msp-forms h2:lang(pt), .cpn-forms h2:lang(pt), #g-container article h1:lang(pt),
#g-container article h2:lang(pt),
#g-container article h3:lang(pt),
#g-container article h4:lang(pt),
#g-container article h5:lang(pt),
#g-container article h6:lang(pt), #news-list .news-copy p span:lang(pt), #g-container header h1:lang(pt), #g-container header h2:lang(pt), .modes-cards-desc p:lang(pt), .modes-cards figcaption h2:lang(pt), #campaign-promo-2 h2:lang(pt),
.slick-fs-body h2:lang(pt), .s-container h1:lang(pt), .container__fixed h1:lang(pt),
.container__fluid h1:lang(pt),
.slick-fs-body h1:lang(pt), .header-cta h1:lang(pt),
.header-headline h1:lang(pt), .headline-font:lang(it), #news-filter-modal h3:lang(it), button.button-super:lang(it), .header-cta button:lang(it),
button.button-prime:lang(it),
input[type=submit].button-prime:lang(it), [id*=cfx-modal] h2:lang(it), .xbl-rewards figcaption:lang(it), .xbl-textbox h1:lang(it), #consent-modal div > div:not(:first-of-type) h1:lang(it), .creators-faq dl dt:lang(it)::before, .partner-modal .partner-language:lang(it), .partner-name:lang(it), .featured-title:lang(it), #cip-logos h1:lang(it), .mhb-card h2:lang(it),
.mhb-table-header h2:lang(it), #mhd-tiers h2:lang(it),
#mhd-steps h2:lang(it), #mhh-calendar .mhh-calendar-box h3:lang(it), #mhh-logos h1:lang(it),
#mhh-logos h2:lang(it), .msp-forms h2:lang(it), .cpn-forms h2:lang(it), #g-container article h1:lang(it),
#g-container article h2:lang(it),
#g-container article h3:lang(it),
#g-container article h4:lang(it),
#g-container article h5:lang(it),
#g-container article h6:lang(it), #news-list .news-copy p span:lang(it), #g-container header h1:lang(it), #g-container header h2:lang(it), .modes-cards-desc p:lang(it), .modes-cards figcaption h2:lang(it), #campaign-promo-2 h2:lang(it),
.slick-fs-body h2:lang(it), .s-container h1:lang(it), .container__fixed h1:lang(it),
.container__fluid h1:lang(it),
.slick-fs-body h1:lang(it), .header-cta h1:lang(it),
.header-headline h1:lang(it) {
  font-family: "Teko", "Impact", sans-serif;
  font-weight: 400;
}

html {
  font-size: 1em;
  line-height: 1.5;
}
@media (max-width: 37.5em) {
  html {
    font-size: 5vw;
  }
}
@media (min-width: 37.5625em) {
  html {
    font-size: 1em;
  }
}
@media (min-width: 160em) {
  html {
    font-size: 0.8vw;
  }
}

.container {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

section.container,
footer.container {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 37.5em) {
  section.container,
footer.container {
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
}

nav.container {
  margin-bottom: 0;
  position: fixed;
}
@media (max-width: 60em) {
  nav.container {
    position: sticky;
  }
}

.container__fixed,
.container__fluid,
.slick-fs-body {
  margin: 0 auto;
  width: 100%;
}

.container__fixed {
  max-width: 88.75rem;
  padding: 1.25rem;
}
@media (max-width: 90em) {
  .container__fixed {
    padding: 1.25rem 5vw;
  }
}

.container__fluid, .slick-fs-body {
  margin: 0 auto;
  width: 100%;
  padding: 1.25rem 5vw;
}

.row, .agt-check, .cpn-nav__search form, [id*=cfx-modal] div:first-of-type, [id*=xbl-state], [id*=coupon-page__], #mhb-cards, #mhd-body aside, #membership-home-details > div, #mhh-calendar, .msp-platform-info, .msp-emails, .cpn-codes,
.msp-platforms, #patchnotes-container, .modes-nav, #battlepass-pagi-mobile, #battlepass-ui .battlepass-ui-thumbs, #battlepass-ui, #news-more, .btngrd .btngrd-desktop {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.row-no-gap, #cpn-nav, #news-filter-modal div, [id*=cfx-modal] form, .cla-form_checkbox div, .cla-form_checkbox, #legal_header,
#legal_form, #xbl-page__top, [class*=cpn-table__], .mhb-table-header li,
.mhb-table-body li, #msp-policy-group, .msp-platform-ui, #news-list .news-content, .news-filter-desktop,
.news-filter-mobile, #g-container nav, #battlepass-viewer .bp-viewer-content, .slick-fs-ui, .modesGrid-slick-ui, .newsGrid-slick-ui, .footer__cibi-rating figure, #xbox-promo > div, .promo-sections article, .header-cta div, #page-hero .scene-wrapper, .nav__content, .news-stamp {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6 {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

@media (min-width: 37.5625em) {
  .col-2 {
    flex-basis: calc(50% - 1.25rem);
  }

  .col-4 {
    flex-basis: calc(50% - 1.25rem);
  }

  .col-6 {
    flex-basis: calc(50% - 1.25rem);
  }
}
@media (min-width: 48em) {
  .col-3 {
    flex-basis: calc(33% - 1.25rem);
  }

  .col-6 {
    flex-basis: calc(33% - 1.25rem);
  }
}
@media (min-width: 85.375em) {
  .col-4 {
    flex-basis: calc(25% - 1.25rem);
  }

  .col-5 {
    flex-basis: calc(20% - 1.25rem);
  }

  .col-6 {
    flex-basis: calc(16.6666667% - 1.25rem);
  }
}
@media (max-width: 56.25em) {
  .col-2,
.col-3 {
    flex-basis: calc(50% - 1.25rem);
  }
}
@media (max-width: 37.5em) {
  .col-2,
.col-3 {
    flex-basis: 100%;
  }
}
.col-3b {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

@media (min-width: 48em) {
  .col-3b {
    flex-basis: calc(33% - 1.25rem);
  }
}
button {
  border: 0.0625rem solid #666666;
  border-radius: 0.1875rem;
  color: #666666;
  font-size: 1.125rem;
}
@media (max-width: 37.5em) {
  button {
    width: 99%;
  }
}
@media (min-width: 37.5625em) {
  button {
    cursor: pointer;
  }
  button:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}
@media (max-width: 37.5em) {
  button {
    font-size: 0.875rem;
    text-transform: uppercase;
  }
}

@keyframes cta-arrow-slide {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}
@keyframes slide-right-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-20vw);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-left-fade-in {
  0% {
    opacity: 0;
    transform: translateX(20vw);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-up-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-down-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anim__modal-lightbox {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim__shelf-left {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes anim__shelf-right {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes anim__shelf-center {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(0);
  }
}
.cfx-nav-main {
  z-index: 1020;
}

.modal {
  z-index: 1050;
}

.blocker {
  z-index: 1040;
}

#stoveGnb {
  z-index: 1030;
}

.sns {
  position: relative;
}
.sns::before, .sns::after {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/sns-sprite-2020.png");
  background-size: 1000%;
  content: "";
  transition: opacity 150ms ease-in-out;
}
.sns::after {
  z-index: 1;
}
.sns::before {
  opacity: 0;
  z-index: 2;
}
.sns:hover::after {
  opacity: 0;
}
.sns:hover::before {
  opacity: 1;
}

.sns-facebook::before {
  background-position: 1000% 1000%;
}
.sns-facebook::after {
  background-position: 1000% 700%;
}

.sns-twitter::before {
  background-position: 900% 1000%;
}
.sns-twitter::after {
  background-position: 900% 700%;
}

.sns-youtube::before {
  background-position: 800% 1000%;
}
.sns-youtube::after {
  background-position: 800% 700%;
}

.sns-twitch::before {
  background-position: 700% 1000%;
}
.sns-twitch::after {
  background-position: 700% 700%;
}

.sns-instagram::before {
  background-position: 600% 1000%;
}
.sns-instagram::after {
  background-position: 600% 700%;
}

.sns-discord::before {
  background-position: 500% 1000%;
}
.sns-discord::after {
  background-position: 500% 700%;
}

.sns-mixer-light::before {
  background-position: 400% 1000%;
}
.sns-mixer-light::after {
  background-position: 400% 700%;
}

.sns-mixer::before {
  background-position: 300% 1000%;
}
.sns-mixer::after {
  background-position: 400% 700%;
}

.sns-reddit::before {
  background-position: 200% 1000%;
}
.sns-reddit::after {
  background-position: 200% 700%;
}

.ui-faq, .creators-faq dl dt::after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAWCAYAAAB0S0oJAAAJvGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcFJpZ2h0cz0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3JpZ2h0cy8iCiAgICB4bWxuczpJcHRjNHhtcENvcmU9Imh0dHA6Ly9pcHRjLm9yZy9zdGQvSXB0YzR4bXBDb3JlLzEuMC94bWxucy8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIGV4aWY6RXhpZlZlcnNpb249IjAyMzEiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSI2NiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjIyIgogICBleGlmOkNvbG9yU3BhY2U9IjY1NTM1IgogICB0aWZmOk9yaWVudGF0aW9uPSIxIgogICB0aWZmOkltYWdlV2lkdGg9IjY2IgogICB0aWZmOkltYWdlTGVuZ3RoPSIyMiIKICAgdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPSIyIgogICB0aWZmOlNhbXBsZXNQZXJQaXhlbD0iMyIKICAgdGlmZjpYUmVzb2x1dGlvbj0iNzIvMSIKICAgdGlmZjpZUmVzb2x1dGlvbj0iNzIvMSIKICAgdGlmZjpSZXNvbHV0aW9uVW5pdD0iMiIKICAgeG1wTU06RG9jdW1lbnRJRD0iNDhCMUQwRDI3OTE5NjMzN0EwNEQ5QThEMjQ4NEZFRkYiCiAgIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0iNDhCMUQwRDI3OTE5NjMzN0EwNEQ5QThEMjQ4NEZFRkYiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzI1MTdmOTAtNzMwNy0xZDQ1LWJlM2ItOWVjNWNhZDk5NGRhIgogICBkYzpmb3JtYXQ9ImltYWdlL3BuZyIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IiIKICAgcGhvdG9zaG9wOkhlYWRsaW5lPSJUaGUgQmlnZ2VzdCBGUFMgaW4gdGhlIFdvcmxkIgogICB4bXBSaWdodHM6TWFya2VkPSJUcnVlIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA1LTE1VDA4OjQ2OjMyLTA0OjAwIj4KICAgPHRpZmY6Qml0c1BlclNhbXBsZT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgIDxyZGY6bGk+ODwvcmRmOmxpPgogICAgPC9yZGY6U2VxPgogICA8L3RpZmY6Qml0c1BlclNhbXBsZT4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MzI1MTdmOTAtNzMwNy0xZDQ1LWJlM2ItOWVjNWNhZDk5NGRhIgogICAgICBzdEV2dDp3aGVuPSIyMDIwLTA1LTE1VDA4OjQ2OjMyLTA0OjAwIgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBCcmlkZ2UgMjAyMCAoV2luZG93cykiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii9tZXRhZGF0YSIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgIDxkYzpjcmVhdG9yPgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaT5TbWlsZWdhdGUgV2VzdDwvcmRmOmxpPgogICAgPC9yZGY6U2VxPgogICA8L2RjOmNyZWF0b3I+CiAgIDxkYzpkZXNjcmlwdGlvbj4KICAgIDxyZGY6QWx0PgogICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Q3Jvc3NmaXJlPC9yZGY6bGk+CiAgICA8L3JkZjpBbHQ+CiAgIDwvZGM6ZGVzY3JpcHRpb24+CiAgIDxkYzpzdWJqZWN0PgogICAgPHJkZjpCYWc+CiAgICAgPHJkZjpsaT5Dcm9zc2ZpcmU8L3JkZjpsaT4KICAgIDwvcmRmOkJhZz4KICAgPC9kYzpzdWJqZWN0PgogICA8SXB0YzR4bXBDb3JlOkNyZWF0b3JDb250YWN0SW5mbwogICAgSXB0YzR4bXBDb3JlOkNpQWRyQ2l0eT0iVG9yb250byIKICAgIElwdGM0eG1wQ29yZTpDaUFkclJlZ2lvbj0iT250YXJpbyIKICAgIElwdGM0eG1wQ29yZTpDaUFkckN0cnk9IkNhbmFkYSIvPgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/Psb5z6wAAAG0SURBVFiF7Zi/SgNBEIc/jbsPEBsbH0EhpdaCIFhYBSwi+ATqE4idja2tf4hPYKelgl0kr2AlYipt7hJPVudgc96ZC2H2UPKD4W6X2725j9mZ4ZjqWzNJkqihsNb6w0XgaZL9oiia2KcizartPKwT4BFojLGmBlwAzRAO4iJCy4wxzo6MMYnYqzGmIfO/Wc0Y05Y1fWNM08WtprmjsabE+MFa+yZRcAPMy3wPcO/sFKxLI2Hbm7uM4rgFLAB7Gs46EIcaGwOn1tpnuXcwboG6jItg5EG4AlpRHA+AJaCr4WyoHNGRD+/JuC5g/JxRCAEYaDsY4mj4KoqM7igIURyjfTQ09v1SpnymyoNxD2x6z/yIBAGhpipAkAPDV+5x0AYRKkdk5XLGOvCRmb8OlROyqgqES4z7Oe9fBZarcKgKEHnVoS/XvGoSRKFBFJXIlRGlVV0hy2cehDawIznh16YrRPkM0VmOgpCqEIaA+NOdZVkIlOxAVTQH3Cnt/S7Xs5IQUqUw0shwtiXzL8CxhrMhGqqmfHytBARf6TE5Bw7+S2fpYGwAu2M2S0N/tTT/UE01lSfgEyZX/4mZip3tAAAAAElFTkSuQmCC);
}

.ui-arrows-left, #battlepass-ui .bpui-btn.bpui-btn-prev::after, .slick-fs-ui .slick-prev, .modesGrid-slick-ui .slick-prev, .newsGrid-slick-ui .slick-prev,
.ui-arrows-right,
#battlepass-ui .bpui-btn.bpui-btn-next::after,
.slick-fs-ui .slick-next,
.modesGrid-slick-ui .slick-next,
.newsGrid-slick-ui .slick-next {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ui-arrows-left, #battlepass-ui .bpui-btn.bpui-btn-prev::after, .slick-fs-ui .slick-prev, .modesGrid-slick-ui .slick-prev, .newsGrid-slick-ui .slick-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='arrow-left' class='cls-1' d='M0,30V0H30V30H0ZM13,7L7,14.628,13,23l9.985-.134-6.516-8.238L23,7H13Z'/%3E%3C/svg%3E%0A");
}

.ui-arrows-right, #battlepass-ui .bpui-btn.bpui-btn-next::after, .slick-fs-ui .slick-next, .modesGrid-slick-ui .slick-next, .newsGrid-slick-ui .slick-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath id='arrow-right' class='cls-1' d='M0,30V0H30V30H0ZM17,7l-9.985.134,6.516,8.238L7,23H17l6-7.628Z'/%3E%3C/svg%3E%0A");
}

.ui-launch, .news-link.external-link::after,
.social-link.external-link::after,
.modes-link.external-link::after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACt0lEQVR4nO3d3VHbQBTF8XMzeYd0QjrAnSQV0AJUkFCBQwfpgKSCuINQAlRwM5osQ0LsSLvSSmf3nv8LD2C80s8rS/KHoJRSSimllFJKKaVUI9kSw3T3cwCXAC4AnKWfq2Zmu5ExftpgXHdm9iXnBm/n3qO7XwO4AnA+939V7iI9aNbse+59FYOkWXG/xWzouTczlk0YFSoCSZspYVQoGyRtqq5aWLgWK5khlw08gTdbCYg2VRUrATlrZukarGS3d3SGmNkiB5xLNnbgeCp33wP4sNY45+z2dt/aGBDI6bbAgECOtxUGBPJvW2JAIH+3NQYE8lIBRtZp9akJpBDDzD7WGEt4ECYMRAdhw0BkEEYMRAVhxUBEEGYMRANhx0AkkBYwEAWkFQxEAGkJA72DtIaBnkFaxECvIK1iYIn39rK1Msa3kd8/VF897n7vI1UfxOmx7cfG9qr9VmNdLFaQkBggBQmLAUKQ0BggAwmPASIQYaQYQHrGaO44hOmgz93HPrP4YGZ1j0W2nCFsM2PC/V/n/s9mTp20fDokpyZAomCgBZBIGGAHiYYBZpCIGGAFiYoBRpDIGGADiY4BJhBh/I4CRBgvbQ6SvlhMGCmGGXIH4HHi33aNAQYQMzsA2E1A6R4DLM8hE1BCYIBpL+s/KGEwwHYccgQlFAYYj9T/QPkcDQOsL+EmlAPBUFYv/OfU2RIIWQIhSyBkCYQsgZAlELIEQpZAyBIIWSWnTg5jV6qp+Ybr3iuZIU/RV1rNSkBCnvQrLHtdZX9pfrqgy09dQ2S0RzN7l3uj7BliZsOLR7eLDLnvitZR8WUl3P2HLu5ysoOZvS+54Zzd3p2eT472/IpnUcUgw6YrPQpuMt5X1XPDOrgZ1knarJet1yVW0KtLr0Zs2ER9DbrsSimllFJKKaWUUipiAH4BrHvMHRACxYkAAAAASUVORK5CYII=);
  background-size: contain;
}

.bg-gradient-bottom, .modes-cards figcaption, .slick-fs-body {
  background: black;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 42%);
}

.bg-gradient-top, .cfx-nav-main {
  background: black;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.33) 100%);
}

.social-frame-angle, #g-container nav::after, #social-contents .social-contents::after {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAKCAYAAAAjBNk8AAAAT0lEQVRIie3QMQ6AMAzAQMPL6cuDyoCEgLbJbO9ebouIwKq1XbpyDTgErHXh9VPAfDceAqZ74CFgqhceAi73iYeAS/3iIeC0IR4CDpviAZwo9Q2aJM0RogAAAABJRU5ErkJggg==");
  background-position: left center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  width: calc( 100% + 0.125rem );
  width: 100%;
}

.formfield-frame-angle, #battlepass-viewer {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAAKCAYAAABmKbb7AAAAbklEQVRYhe3SQQ6AIAxE0dF41l5DvLkxQYMIpVvD/+sumsxbzEyBdkkpcki/7dr3GD2/goVyKW/tNgIDlrkaovHAgGXOXDQ9MGCZuy6aFhiwkHpoajBgobIPmhIMWKjVC80NBizk9aDZwELBkiSdgU4Ut0Ld+F4AAAAASUVORK5CYII=");
  background-position: bottom center;
  background-repeat: no-repeat;
}

.battlepass-thumb-angle, .bp-thumb-name {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAASklEQVRIieXPsQ3AIBAEwcWVQ8Ffg9ETIFmAye822nRKRLz41B4nLFBdwAOb4wCeWAzAHyzi4AWLMHiLRRR8xCII/sVmSuArFqAD33ENZCWlog0AAAAASUVORK5CYII=");
  background-position: top left;
  background-repeat: no-repeat;
}

.deco-triangles-red, .promo-sections .promo-img::after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABACAYAAAATffeWAAACxElEQVRYhaWXPWhUQRSFPx9L0GARg00Q0sRCQgoDIhYKNmKqiM2CFkGECAarpImENCFYBJVt1GptxIAWgpV2lgsWsUqhwSIpIhrEQhA1rEdm904Yn/t2500G7rJcds/83HPO3EHwSjAqICXchwS/BHcFA2VBMtrjCPAb2ABmgAqxw1bgEccEDwTvBOdjVpAH8FEVvBG8EBxPAfAxK/gpWBYcTgFwMShYEWwLrguysgA+TgnqgreCMykAPqYEfwSrguEUABfzgh+Chfh6t0cVuAl8Ak4AW7Er8Ptfy/Hjci+AfsGdDhU4aTxRN4DZDho5akzdFdwoArgkeJ1jYZ9gTvBNsCSoWP4fAK+DdcHFAHDCcjXBSG6yPQBH1R3BTIA+al7hYrJgmy2AXZt50JIDtm+3/1s9qtMC8G5UsRXs2Mn3R5S3BYDVds1WMlaCkS2AmtW0mkDpFsAhx2nBd8Gi4EBZAG8UQ4InprSpMgBbgivBzE7rDcFTwdkYAJm2G4FROLCrpoGVoMSFAARG8di247e3bNqf7wXgZ160A12wA3b5YcHzDtUqVOMxwT3BR6f5IO/5UjeP6CpnFxdMlW7mcctl5g1fYgB8TAuagofmCXuaiQXwMy+ZJ8yZR7QPoiR9R4z+751XZBFOXDSalFxBZT9bmA6Mp9Qhdivjdi8i3RdslCVSlqPywYDKq6aVQipfM7LUu4gpbzb/yfl0ICrnEZsxct4sMBQHei7GULxkh2z5zbKWljfVLPLPewAr+7V1X9/11Iul6GrriwXoxPGa5aMuV5nKvqZe750ajIngR+77h14NRpictFlfdmlxsm4APoqarEdGtukYV/Zt3udcmzce0+aFkdxo5sM/RJ6ZR7QPIoHCvtm+nQKQ3O77c2iUfXDs68kza3st/ehKfvZ5PeTr3RPAMy7fcEcDJD++3Uf68x/4C3iIvb8y8yOuAAAAAElFTkSuQmCC");
  content: "";
  height: 64px;
  position: absolute;
  width: 16px;
}

.modes-white-angle, .modes-shelf-image::after {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAXUlEQVQ4ja3MOQ4AIBDDQHg5Tw+iAHHvFUtuJwNIxEpqIOkCNsYCB8YAFywKHlgEvGJe8Il5wC9mBUXMAqowLajGNKAJk0Az9gNd2At0YzcwhO1gGJtBCtZBGgYAFXCaOgRUD1XDAAAAAElFTkSuQmCC");
  background-position: bottom right;
  background-repeat: no-repeat;
}

.modes-ed-angle, .modes-cards figcaption {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAKCAYAAAB/jpoYAAAAV0lEQVRYhe3RQQ6AIBBD0a/h3uLJMWxMDOCsp/SfoOk7GjRcxipwR7tP06atA1/ReAPnLkQ2cP5+kQ2s0RLZwDpNkQ2s1YBsYL0+yAbW7EUuuz8hXAV4AGpkC41qBrXuAAAAAElFTkSuQmCC");
  background-position: bottom left;
  background-repeat: no-repeat;
}

.cmp-angle-right, .mhh-calendar-box:nth-of-type(3)::after,
#mhd-tiers > div:nth-of-type(3)::after {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAFCAYAAACzSkmrAAAAO0lEQVQ4je3RwQkAIBTD0NjF1Qn/SiJ4EBewh74JAmlVNYBOWBCwh8zs8KBTkSkmdGVkigE9CZnyE7AAfPAHetDBB0sAAAAASUVORK5CYII=");
  background-position: bottom right;
  background-repeat: no-repeat;
}

.cmp-angle-left, .mhh-calendar-box:nth-of-type(1)::after,
#mhd-tiers > div:nth-of-type(1)::after {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAFCAYAAACzSkmrAAAAOklEQVQ4jWM8f/78f4ZRMFhAI9NoVAwa0MjAwNAwGiGDA4AjA+SS0QgZeACPDIbRCBlwgBIZDAwMDACxpAf7ONPbhAAAAABJRU5ErkJggg==");
  background-position: bottom left;
  background-repeat: no-repeat;
}

.cmp-angle-center, .mhb-card::before,
.mhb-card::after, .mhh-calendar-box:nth-of-type(2)::after,
#mhd-tiers > div:nth-of-type(2)::after {
  background-color: transparent;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAFCAYAAACzSkmrAAAARElEQVQ4je3R0QkAIAzE0NjFtRN2JRFE1AGsH5cJAq9ERAMq6ofcgAHi4khvGDSbF0LJzacBtm0IJaeFwQWCUJ53YAB0OgoL/wGlENwAAAAASUVORK5CYII=");
  background-position: bottom center;
  background-repeat: no-repeat;
}

.icon-xboxlink, .xbox-linking span::before, .cpn-xboxlink span::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 0.1875rem;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/icon-xboxmini.png");
}

.news-content {
  position: relative;
}
.news-content .news-image > img {
  transition: transform 250ms ease-in-out;
}
.news-content .news-copy {
  transition: color 100ms, border-color 100ms, background-color 100ms;
}
@media (min-width: 37.5625em) {
  .news-content {
    cursor: pointer;
  }
  .news-content:hover .news-image > img {
    transform: scale(1.1);
  }
  .news-content:hover .news-copy {
    color: red !important;
  }
}

.news-image {
  height: auto;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.news-image > img {
  object-fit: cover;
}

.news-stamp {
  justify-content: flex-start;
  position: absolute;
  top: 0;
  z-index: 1;
}
.news-stamp * {
  color: #ededed;
  padding: 0.125em 0.25em;
}
.news-stamp span {
  background-color: #c20000;
  text-transform: uppercase;
}
.news-stamp time {
  background-color: #000000a8;
}

.cfx-nav-main {
  transition: transform 250ms ease-in-out;
  top: 68px;
}
.cfx-nav-main img {
  display: block;
  height: auto;
  width: 100%;
}
@media (max-width: 60em) {
  .cfx-nav-main {
    background: black;
    padding: 0.1875rem 0;
    top: 41px;
  }
}

#stoveGnb {
  transition: transform 250ms ease-in-out;
  position: sticky;
  top: 0;
  height: 68px;
}
@media (max-width: 60em) {
  #stoveGnb {
    height: 41px;
  }
}

.nav__content {
  align-items: center;
  height: 100%;
  justify-content: space-between;
  padding: 0 5vw;
  position: relative;
  width: 100%;
}
@media (min-width: 60.0625em) {
  .nav__content {
    justify-content: flex-start;
    padding: 0 1.25rem;
  }
}
.nav__content::before {
  transition: opacity 250ms;
  background-color: black;
  content: "";
  z-index: -1;
  opacity: 0;
}
.nav__content:hover::before {
  opacity: 1;
}

.nav__content.is-scrolled::before {
  opacity: 1;
}

.menu-home,
.menu-anchors,
.menu-bar,
.menu-account {
  flex-basis: auto;
  flex-shrink: 0;
}

.menu-home {
  max-height: 2.5rem;
  max-width: 2.5rem;
}
@media (max-width: 60em) {
  .menu-home {
    max-height: 1.875rem;
    max-width: 1.875rem;
  }
}

.menu-anchors {
  flex-grow: 0;
}
@media (min-width: 60.0625em) {
  .menu-anchors {
    display: none;
  }
}

.menu-bar {
  flex-grow: 1;
  flex-shrink: 1;
  padding-left: 1.25rem;
}
.menu-bar a {
  color: #cfcfcf;
}

.menu-account {
  flex-grow: 0;
}
.menu-account a {
  color: #cfcfcf;
}

@media (max-width: 60em) {
  .menu-bar,
.menu-account {
    display: none;
    visibility: hidden;
  }
}

.menu-bar > a,
.menu-bar > div,
.menu-account > a,
.menu-account > div {
  margin: 0 0.375rem;
}

.menu-bar-dropdown {
  display: inline-block;
  position: relative;
}

.menu-bar-dropdown ul {
  transition: opacity 250ms;
  background-color: #161718;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0.25em;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.menu-bar .menu-bar-dropdown ul {
  left: calc( -1 * 0.625rem);
}

.menu-account .menu-bar-dropdown ul {
  right: calc( -1 * 0.625rem);
}

.menu-bar .menu-bar-dropdown li {
  text-align: left;
}

.menu-account .menu-bar-dropdown li {
  text-align: right;
}

.menu-bar-dropdown {
  position: relative;
}
@media (min-width: 37.5625em) {
  .menu-bar-dropdown {
    cursor: pointer;
  }
  .menu-bar-dropdown:hover button {
    border-color: #161718 !important;
  }
  .menu-bar-dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
  }
}

.menu-bar-dropdown li {
  color: #ededed;
  padding: 0.25em calc( 1.25rem - 0.25em );
  white-space: nowrap;
}
.menu-bar-dropdown li a {
  text-decoration: none;
}
.menu-bar-dropdown li a:link,
.menu-bar-dropdown li a:visited,
.menu-bar-dropdown li a:focus {
  color: currentColor;
}
.menu-bar-dropdown li a:hover {
  color: red;
}
.menu-bar-dropdown li:last-of-type {
  border-bottom: 0.1875rem solid red;
  padding-bottom: 0.5em;
}

#cfx-nav-modal .cfx-nav-modal-logo,
#cfx-account-modal .cfx-nav-modal-logo {
  padding: 5vw;
}
#cfx-nav-modal .cfx-nav-modal-links-container,
#cfx-account-modal .cfx-nav-modal-links-container {
  margin-bottom: 1.25rem;
}
#cfx-nav-modal > * + *,
#cfx-account-modal > * + * {
  margin: 0.625rem 0;
}
#cfx-nav-modal img,
#cfx-account-modal img {
  display: block;
  height: auto;
  width: 100%;
}

#cfx-nav-modal-sub {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

#cfx-nav-modal-sub ul,
#cfx-nav-modal-sub li,
#cfx-nav-modal-language ul,
#cfx-nav-modal-language li {
  list-style: none;
}

#cfx-nav-modal-sub,
#cfx-nav-modal-sub a,
#cfx-nav-modal-language,
#cfx-nav-modal-language a {
  color: white;
  text-align: center;
}

#cfx-nav-modal-sub dt.dt-active,
#cfx-nav-modal-language dt.dt-active {
  border-top: 0.0625rem solid #333333;
  color: #666666;
  margin-top: 0.3125rem;
  padding-top: 0.3125rem;
}

#cfx-nav-modal-language dt.dt-active {
  color: white;
}

#cfx-nav-modal-sub dd,
#cfx-nav-modal-language dd {
  border-bottom: 0.0625rem solid #333333;
  margin-bottom: 0.3125rem;
  padding-bottom: 0.625rem;
}

#page-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#page-hero > .frame__content {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 37.5625em) {
  .page-hero-home {
    max-height: calc(25em + 20vmin);
  }
}
@media (min-width: 85.375em) {
  .page-hero-home {
    max-height: calc(37.5em + 20vmin);
  }
}

@media (min-width: 37.5625em) {
  .page-hero-sub {
    max-height: calc(18.75em + 5vmax);
  }
}
@media (min-width: 85.375em) {
  .page-hero-sub {
    max-height: calc(31.25em + 5vmax);
  }
}

#page-hero .scene-wrapper {
  height: 100%;
  justify-content: center;
  width: 100%;
}

#page-hero .frame__content {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 1vw;
  text-align: center;
  z-index: 2;
}
#page-hero .frame__content > * {
  align-self: center;
  justify-self: center;
  pointer-events: auto;
  position: relative;
}
@media (max-width: 37.5em) {
  #page-hero .frame__content {
    justify-content: flex-end;
    padding: 5vmax;
  }
}

picture.header-logo {
  width: 36%;
}

picture.header-logo-small {
  width: 25%;
}

picture.header-logo img, picture.header-logo source,
picture.header-logo-small img,
picture.header-logo-small source {
  height: auto;
  width: 100%;
}
@media (max-width: 37.5em) {
  picture.header-logo,
picture.header-logo-small {
    width: 100%;
  }
}

.header-cta,
.header-headline {
  color: white;
  filter: drop-shadow(0 2px 2px #000000c0);
  margin-top: 1.25rem;
  text-align: center;
}
.header-cta h1,
.header-headline h1 {
  line-height: 0.8em;
  margin: 0;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .header-cta,
.header-headline {
    padding-bottom: 5vmax;
  }
}

.header-cta h1 {
  font-size: 2.25rem;
}
@media (min-width: 37.5625em) {
  .header-cta h1 {
    font-size: 3.75rem;
  }
}
@media (min-width: 85.375em) {
  .header-cta h1 {
    font-size: 5rem;
  }
}
@media (min-width: 120em) {
  .header-cta h1 {
    font-size: 6.25rem;
  }
}
.header-cta div {
  justify-content: center;
  margin-top: 1.25rem;
  /*@media (min-width: 37.5625em) { margin-top: calc( -1 * 1.25rem ); }*/
}
.header-cta p {
  line-height: 0.8em;
}
@media (min-width: 37.5625em) {
  .header-cta p {
    font-size: 1.5rem;
    padding: 1.25rem;
  }
}
.header-cta img {
  display: block;
  height: auto;
  margin-top: calc( -1 * 0.625rem );
  max-width: 75%;
  width: auto;
}
@media (min-width: 37.5625em) {
  .header-cta img {
    margin-top: 0;
    max-width: 22.25em;
  }
}

.header-headline h1 {
  font-size: 2.25rem;
}
@media (min-width: 37.5625em) {
  .header-headline h1 {
    font-size: 3.75rem;
  }
}
@media (min-width: 85.375em) {
  .header-headline h1 {
    font-size: 5rem;
  }
}
@media (min-width: 120em) {
  .header-headline h1 {
    font-size: 6.25rem;
  }
}
.header-headline p {
  font-size: 1.125rem;
  line-height: 1.2;
}
@media (min-width: 37.5625em) {
  .header-headline p {
    font-size: 2.25rem;
  }
}

.scene-bg {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#hero-video,
#hero-mobile {
  overflow: hidden;
  width: 100%;
  /*
  @media (min-aspect-ratio: 48/25) {
    width: 100vmax;
    height: auto;
  }
  @media (max-aspect-ratio: 48/25) {
    width: auto;
    height: 100%;
  }
  */
}

#hero-mobile img {
  display: block;
  height: auto;
  width: 100%;
}
@media (min-width: 37.5625em) {
  #hero-mobile {
    display: none;
  }
}

#hero-video {
  display: block;
}
#hero-video source {
  height: auto;
  width: 100%;
}
@media (max-width: 37.5em) {
  #hero-video {
    display: none;
  }
}

.container__fixed h1,
.container__fluid h1,
.slick-fs-body h1 {
  color: #161718;
  font-size: 5vmax;
  line-height: 0.8em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .container__fixed h1,
.container__fluid h1,
.slick-fs-body h1 {
    font-size: 5.55vmax;
    text-align: center;
  }
}

.container__fixed article > p,
.container__fluid article > p,
.slick-fs-body article > p,
.container__fixed article > div > p,
.container__fluid article > div > p,
.slick-fs-body article > div > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
}
.container__fixed article > p:first-of-type,
.container__fluid article > p:first-of-type,
.slick-fs-body article > p:first-of-type,
.container__fixed article > div > p:first-of-type,
.container__fluid article > div > p:first-of-type,
.slick-fs-body article > div > p:first-of-type {
  margin-top: 0;
}
@media (min-width: 37.5625em) {
  .container__fixed article > p,
.container__fluid article > p,
.slick-fs-body article > p,
.container__fixed article > div > p,
.container__fluid article > div > p,
.slick-fs-body article > div > p {
    font-size: 1.125rem;
  }
}
@media (min-width: 85.375em) {
  .container__fixed article > p,
.container__fluid article > p,
.slick-fs-body article > p,
.container__fixed article > div > p,
.container__fluid article > div > p,
.slick-fs-body article > div > p {
    font-size: 1.25rem;
  }
}

.container__fixed article > * + *,
.container__fluid article > * + *,
.slick-fs-body article > * + * {
  margin: 1.25rem 0;
}

.container__fixed article > *:last-child,
.container__fluid article > *:last-child,
.slick-fs-body article > *:last-child {
  margin-bottom: 0;
}

section.intro-sections p,
article.intro-sections p,
div.intro-sections p,
#customization-promo > div > p {
  text-align: center;
}
@media (min-width: 37.5625em) {
  section.intro-sections p,
article.intro-sections p,
div.intro-sections p,
#customization-promo > div > p {
    font-size: 1.25rem;
  }
}
@media (min-width: 85.375em) {
  section.intro-sections p,
article.intro-sections p,
div.intro-sections p,
#customization-promo > div > p {
    font-size: 1.875rem;
  }
}

.promo-sections h1,
.promo-sections h1:nth-of-type(even),
.promo-sections h2,
.promo-sections p {
  text-align: center;
}
.promo-sections article {
  justify-content: space-between;
  margin-bottom: 2.5rem;
  width: 100%;
}
@media (min-width: 37.5625em) {
  .promo-sections article {
    margin-bottom: 3.75rem;
  }
}
.promo-sections article:nth-of-type(even) {
  flex-direction: row-reverse;
}
.promo-sections article .promo-img,
.promo-sections article .promo-text {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
}
.promo-sections article .promo-img img {
  display: block;
  height: auto;
  width: 100%;
}
.promo-sections article .promo-text,
.promo-sections article .promo-text p,
.promo-sections article .promo-text h2 {
  margin-top: 0.625rem;
}
@media (min-width: 85.375em) {
  .promo-sections article .promo-text,
.promo-sections article .promo-text p,
.promo-sections article .promo-text h2 {
    margin-top: 0;
  }
}
.promo-sections article .promo-text h1,
.promo-sections article .promo-text h2 {
  line-height: 1;
}
@media (min-width: 48em) {
  .promo-sections h1, .promo-sections h2, .promo-sections p {
    text-align: left;
  }
  .promo-sections h1:nth-of-type(even) {
    text-align: right;
  }
  .promo-sections article .promo-img {
    flex-basis: 40%;
  }
  .promo-sections article .promo-text {
    flex-basis: 50%;
    margin-top: 0;
  }
}
@media (min-width: 85.375em) {
  .promo-sections article .promo-img {
    flex-basis: 52%;
  }
  .promo-sections article .promo-text {
    flex-basis: 38%;
  }
}

.anchor {
  left: 0;
  position: absolute;
  top: calc( -1 * 7.5rem);
}

.btngrd {
  position: relative;
}
.btngrd *[class*=image] {
  position: relative;
}
.btngrd *[class*=image] img {
  transition: transform 250ms ease-in-out;
}
.btngrd .btngrd-mobile {
  margin: 0 auto;
}
@media (min-width: 37.5625em) {
  .btngrd .btngrd-mobile {
    display: none;
  }
}
.btngrd .btngrd-desktop {
  transition: opacity 250ms;
}
@media (max-width: 37.5em) {
  .btngrd .btngrd-desktop {
    display: none;
  }
}
@media (min-width: 37.5625em) {
  .btngrd .btngrd-desktop {
    justify-content: center;
    opacity: 0;
    visibility: hidden;
  }
}
.btngrd .btngrd-desktop button {
  background-color: white;
  border: 0.0625rem solid white;
  border-radius: 0.1875rem;
  color: red;
}
@media (max-width: 37.5em) {
  .btngrd .btngrd-cover {
    display: none;
  }
}
@media (min-width: 37.5625em) {
  .btngrd {
    cursor: pointer;
  }
  .btngrd:hover {
    background-color: rgba(207, 207, 207, 0.25) !important;
  }
  .btngrd:hover .btngrd-desktop {
    background-color: rgba(255, 0, 0, 0.33);
    opacity: 1;
    visibility: visible;
  }
  .btngrd:hover *[class*=image] img {
    transform: scale(1.1);
  }
}

#trailer-floating-btn {
  left: 0;
  padding: 0 5vmax;
  position: absolute;
  text-align: center;
  top: calc( -1 * 1.875rem);
  width: 100%;
  z-index: 2;
}
#trailer-floating-btn button {
  font-size: 1.875rem;
}
@media (max-width: 37.5em) {
  #trailer-floating-btn button {
    font-size: 1.25rem;
  }
}

#xbox-promo {
  background-color: #107c10;
  color: white;
  font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 1rem 0;
}
#xbox-promo > div {
  justify-content: center;
}
#xbox-promo > div > * {
  flex: 0 1 auto;
}
#xbox-promo h4 {
  font-size: 1.25rem;
}
@media (min-width: 37.5625em) {
  #xbox-promo h4 {
    font-size: 1.5rem;
  }
}
@media (min-width: 85.375em) {
  #xbox-promo h4 {
    font-size: 1.875rem;
  }
}
#xbox-promo img {
  height: auto;
  width: 90%;
}
@media (min-width: 37.5625em) {
  #xbox-promo img {
    width: auto;
  }
}

.cfx-disclaimer {
  color: #666666;
  font-size: 0.875rem;
  opacity: 0.6;
  text-align: center;
}

#cookies {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 100;
}
#cookies * {
  pointer-events: auto;
}
#cookies div {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
#cookies aside {
  text-align: center;
  padding: 0.5em;
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#cookies p {
  color: white;
}
@media (max-width: 37.5em) {
  #cookies p {
    font-size: 0.8em;
  }
}
#cookies p > a {
  color: currentColor;
  text-decoration: underline;
}
#cookies aside > a {
  cursor: pointer;
  width: 25px;
  height: 25px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}
#cookies aside > a::before {
  content: "+";
  font-size: 36px;
  transform: rotate(45deg);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #c20000 #ffffff00;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  margin-right: -10px;
}

*::-webkit-scrollbar-track-piece {
  background-color: #ffffff00;
}

*::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #c20000;
}

.cfx-footer-main > div {
  color: #ededed;
}
.cfx-footer-main #rating-esrb {
  display: none;
}

.footer__social,
.footer__cibi,
.footer__copyrights {
  margin: 0 auto;
  width: 100%;
}

.footer__social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 40px;
  padding: 0;
}
@media (max-width: 37.5em) {
  .footer__social {
    flex-wrap: wrap;
    margin-bottom: 5vw;
  }
}
@media (max-width: 20em) {
  .footer__social {
    margin-bottom: 3vh;
  }
}

.footer__cibi {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.footer__cibi img {
  margin: 0 8px;
}
.footer__cibi-local, .footer__cibi-partner, .footer__cibi-rating {
  align-items: center;
  display: flex;
  font-size: 1.5rem;
  justify-content: center;
  padding: 20px 8px;
}
.footer__cibi-local img {
  height: 70px;
  width: auto;
}
.footer__cibi-partner img {
  height: 49px;
  width: auto;
}
.footer__cibi-partner > *, .footer__cibi-rating > * {
  margin: 0 1em;
}
.footer__cibi-rating > img, .footer__cibi-rating img {
  height: auto;
  margin: 0;
  max-height: 200px;
  width: auto;
}
@media (max-width: 37.5em) {
  .footer__cibi-local, .footer__cibi-partner, .footer__cibi-rating {
    font-size: 1rem;
    padding: 0 0 3vh;
  }
  .footer__cibi-local img {
    height: auto;
    width: 40vw;
  }
  .footer__cibi-partner img {
    height: auto;
    width: 40vw;
  }
  .footer__cibi-partner > * {
    margin: 0;
  }
}
@media (max-width: 20em) {
  .footer__cibi-rating > img, .footer__cibi-rating img {
    height: 60px;
  }
}

.footer__cibi-rating figure ul {
  margin: 0;
  padding: 0.5rem;
}
.footer__cibi-rating figure ul, .footer__cibi-rating figure li {
  font-size: 0.8rem;
  list-style: none;
  text-align: left;
}

.footer__copyrights {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  text-align: center;
}
@media (max-width: 37.5em) {
  .footer__copyrights {
    margin-top: 0;
  }
}
.footer__copyrights p {
  color: #666666;
  font-size: 0.8125rem;
  padding: 0;
  margin: 0.8rem 0;
}
.footer__copyrights ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 37.5em) {
  .footer__copyrights ul {
    flex-direction: column;
  }
}
.footer__copyrights ul a {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  margin: 0 20px;
  text-transform: uppercase;
}
.footer__copyrights ul a:link, .footer__copyrights ul a:visited, .footer__copyrights ul a:hover, .footer__copyrights ul a:focus {
  color: #ffffff;
  text-decoration: none;
}

.footer__sns {
  width: 40px;
  height: 40px;
  margin: 5px 10px;
}

.s-container {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(25em + 20vmin);
}
@media (min-width: 48em) {
  .s-container {
    align-items: flex-start;
  }
}
@media (min-width: 85.375em) {
  .s-container {
    min-height: calc(37.5em + 20vmin);
  }
}

.s-container h1 {
  color: white;
}

.s-container p {
  color: #cfcfcf;
}
@media (max-width: 37.5em) {
  .s-container p {
    text-align: center;
  }
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-fs-ui .slick-arrow, .modesGrid-slick-ui .slick-arrow, .newsGrid-slick-ui .slick-arrow {
  background-color: black;
  border: none;
  border-radius: 0.1875rem;
  height: 1.875rem;
  outline: none;
  width: 1.875rem;
  cursor: pointer;
}
@media (min-width: 37.5625em) {
  .slick-fs-ui .slick-arrow, .modesGrid-slick-ui .slick-arrow, .newsGrid-slick-ui .slick-arrow {
    cursor: pointer;
  }
  .slick-fs-ui .slick-arrow:hover, .modesGrid-slick-ui .slick-arrow:hover, .newsGrid-slick-ui .slick-arrow:hover {
    background-color: red !important;
  }
}
.slick-fs-ui .slick-arrow + .slick-arrow, .modesGrid-slick-ui .slick-arrow + .slick-arrow, .newsGrid-slick-ui .slick-arrow + .slick-arrow {
  margin-left: 0.25rem;
}
.slick-fs-ui .slick-dots, .modesGrid-slick-ui .slick-dots, .newsGrid-slick-ui .slick-dots {
  list-style: none;
  margin: 0 0.625rem;
}
.slick-fs-ui .slick-dots li, .modesGrid-slick-ui .slick-dots li, .newsGrid-slick-ui .slick-dots li {
  display: inline-block;
  height: 0.625rem;
  position: relative;
  width: 1.25rem;
}
.slick-fs-ui .slick-dots li:not(:last-of-type), .modesGrid-slick-ui .slick-dots li:not(:last-of-type), .newsGrid-slick-ui .slick-dots li:not(:last-of-type) {
  margin-right: 0.25rem;
}
.slick-fs-ui .slick-dots li > button, .modesGrid-slick-ui .slick-dots li > button, .newsGrid-slick-ui .slick-dots li > button {
  background-color: black;
  border: 0.0625rem solid white;
  box-sizing: border-box;
  font-size: 0;
}
.slick-fs-ui .slick-dots li > button:hover, .modesGrid-slick-ui .slick-dots li > button:hover, .newsGrid-slick-ui .slick-dots li > button:hover,
.slick-fs-ui .slick-dots .slick-active > button,
.modesGrid-slick-ui .slick-dots .slick-active > button,
.newsGrid-slick-ui .slick-dots .slick-active > button {
  background-color: red;
  border: 0.0625rem solid red;
}
@media (max-width: 37.5em) {
  .slick-fs-ui, .modesGrid-slick-ui, .newsGrid-slick-ui {
    justify-content: center;
    margin: 0;
    pointer-events: auto;
  }
  .slick-fs-ui .slick-arrow, .modesGrid-slick-ui .slick-arrow, .newsGrid-slick-ui .slick-arrow {
    display: none !important;
  }
  .slick-fs-ui .slick-dots, .modesGrid-slick-ui .slick-dots, .newsGrid-slick-ui .slick-dots {
    pointer-events: none;
    margin: 0;
  }
}

.slick-list {
  cursor: grab;
}

.slick-track {
  display: flex;
  align-items: flex-start;
}

.slick-slide {
  height: auto;
}

.modal {
  background-color: #161718;
  padding: 6vmin;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

.blocker {
  animation: anim__modal-lightbox 100ms forwards;
}
.blocker::after {
  background-color: black;
  content: "";
  opacity: 0.5;
  position: fixed;
}

.shelf-left,
.shelf-right {
  max-width: 37.5em;
  min-height: 100%;
  width: 90%;
}
@media (max-width: 37.5em) {
  .shelf-left .a__button-close,
.shelf-right .a__button-close {
    bottom: 5vw;
    left: 5vw;
    position: absolute;
    width: 89%;
  }
}

.shelf-left {
  float: left;
}

.shelf-right {
  float: right;
}

.shelf-center {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
}
@media (min-width: 48em) {
  .shelf-center {
    float: right;
    max-width: 30em;
    min-height: 100%;
    width: 90%;
    left: auto;
  }
}

.shelf-middle {
  max-width: 37.5em;
  width: 90%;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.shelf-item {
  max-width: 20.625em;
  width: 100%;
}
@media (max-width: 37.5em) {
  .shelf-item {
    min-height: 100%;
    float: right;
    width: 90%;
  }
}

.blocker > .shelf-left {
  animation: anim__shelf-left 250ms forwards;
}
.blocker > .shelf-right {
  animation: anim__shelf-right 250ms forwards;
}
.blocker > .shelf-item {
  animation: anim__shelf-center 250ms forwards;
}
@media (max-width: 37.5em) {
  .blocker > .shelf-item {
    animation: anim__shelf-right 250ms forwards;
  }
}
.blocker > .shelf-center,
.blocker > .shelf-middle {
  animation: anim__shelf-center 250ms forwards;
}
@media (min-width: 48em) {
  .blocker > .shelf-center {
    animation: anim__shelf-right 250ms forwards;
  }
}

.a__button-close button {
  width: 100%;
}

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 100000;
  box-sizing: border-box;
  text-align: center;
}

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em;
}

.blocker.behind {
  background-color: transparent;
}

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  text-align: left;
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: none !important;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==");
}

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px;
}

.modal-spinner > div {
  border-radius: 100px;
  background-color: #fff;
  height: 20px;
  width: 2px;
  margin: 0 1px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.modal-spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.modal-spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.5);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
#news-content.grid-mode {
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  display: grid;
  grid-template-columns: calc( 50% - 1.25rem * 2 ) 25% 25%;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "prime sub1 sub2" "prime sub3 sub4";
}
#news-content.grid-mode figure {
  width: 100%;
}
#news-content.grid-mode figure:nth-of-type(1) {
  grid-area: prime;
}
#news-content.grid-mode figure:nth-of-type(2) {
  grid-area: sub1;
}
#news-content.grid-mode figure:nth-of-type(3) {
  grid-area: sub2;
}
#news-content.grid-mode figure:nth-of-type(4) {
  grid-area: sub3;
}
#news-content.grid-mode figure:nth-of-type(5) {
  grid-area: sub4;
}
#news-content.grid-mode figure:nth-of-type(1) p {
  font-size: 1.5rem;
  line-height: 1.5em;
  padding: 2rem;
}
#news-content.grid-mode figure:nth-of-type(1) p:first-of-type {
  padding-bottom: 0.875rem;
}
#news-content.grid-mode figure:nth-of-type(1) p:not(:first-of-type) {
  font-size: 1em;
  padding-top: 0;
}
#news-content.grid-mode figure:nth-of-type(2) p,
#news-content.grid-mode figure:nth-of-type(3) p,
#news-content.grid-mode figure:nth-of-type(4) p,
#news-content.grid-mode figure:nth-of-type(5) p {
  padding: 0.5em 1em;
}

#news-content.slick-mode {
  align-items: center;
  overflow: hidden;
  position: relative;
}
#news-content.slick-mode figure {
  display: inline-block;
}
#news-content.slick-mode figure p:not(:first-of-type) {
  display: none;
}
#news-content.slick-mode .news-image {
  height: auto;
  padding-top: 56.25%;
}
#news-content.slick-mode .news-copy {
  height: auto;
  position: relative;
}
#news-content.slick-mode p {
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
}
@media (max-width: 37.5em) {
  #news-content.slick-mode p {
    padding: 0.625rem 0;
    white-space: normal;
  }
}
#news-content.slick-mode .slick-slide {
  margin: 0 1vmin;
}
#news-content.slick-mode .slick-list {
  margin: 0 -1vmin;
}

.news-content {
  background-color: #161718;
  transition: color 100ms, border-color 100ms, background-color 100ms;
}
.news-content p {
  transition: color 100ms, border-color 100ms, background-color 100ms;
}
.news-content p::before, .news-content::after {
  transition: filter 250ms;
}
@media (min-width: 37.5625em) {
  .news-content {
    cursor: pointer;
  }
  .news-content:hover {
    background-color: #ededed;
  }
  .news-content:hover p::before, .news-content:hover::after {
    filter: invert(100%);
  }
}
@media (max-width: 37.5em) {
  .news-content {
    background: none;
  }
}

.news-copy {
  display: flex;
  flex-direction: column;
  color: #ededed;
  justify-content: flex-end;
  overflow: hidden;
  text-align: left;
  width: 100%;
}
.news-copy p {
  display: block;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}
@media (max-width: 37.5em) {
  .news-copy {
    color: #161718;
  }
  .news-copy p {
    background: none;
  }
}

.newsGrid-slick-ui {
  padding: 0;
  position: relative;
  width: auto;
  height: auto;
}

#news-more {
  justify-content: center;
  margin-top: 0;
  text-align: center;
}
#news-more > * {
  flex: 1 1 100%;
}
@media (min-width: 37.5625em) {
  #news-more {
    justify-content: space-between;
    margin-top: 1.25rem;
  }
  #news-more > * {
    flex: 0 1 auto;
  }
}
@media (min-width: 85.375em) {
  #news-more {
    justify-content: center;
    margin-top: 2.5rem;
  }
}

#modes-content.grid-mode.row, #modes-content.grid-mode.agt-check, .cpn-nav__search form#modes-content.grid-mode, [id*=cfx-modal] div#modes-content.grid-mode:first-of-type, #modes-content.grid-mode[id*=xbl-state], #modes-content.grid-mode[id*=coupon-page__], #mhd-body aside#modes-content.grid-mode, #membership-home-details > div#modes-content.grid-mode, #modes-content.grid-mode.msp-platform-info, #modes-content.grid-mode.msp-emails, #modes-content.grid-mode.cpn-codes,
#modes-content.grid-mode.msp-platforms, #modes-content.grid-mode.modes-nav, #battlepass-ui #modes-content.grid-mode.battlepass-ui-thumbs, .btngrd #modes-content.grid-mode.btngrd-desktop {
  align-items: stretch;
}
#modes-content.grid-mode figcaption.modes-copy {
  padding: 1.25rem;
}

#modes-content.slick-mode {
  display: block;
}
#modes-content.slick-mode figure {
  margin-bottom: 0;
  margin-right: 0;
  width: 100%;
}
#modes-content.slick-mode figcaption.modes-copy {
  padding: 0.625rem 0;
}
@media (min-width: 37.5625em) {
  #modes-content.slick-mode figcaption.modes-copy {
    padding: 1.25rem;
  }
}
#modes-content.slick-mode .slick-slide {
  margin: 0 1vmin;
}
#modes-content.slick-mode .slick-list {
  margin: 0 -1vmin;
}

.modesGrid-slick-ui {
  padding: 0;
  position: relative;
  width: auto;
  height: auto;
}

.modes-image {
  overflow: hidden;
}

.modes-image img {
  display: block;
  height: auto;
  width: 100%;
}

figcaption.modes-copy p {
  padding-bottom: 0.625rem;
}

.modes-content {
  position: relative;
}

section.slick-fs-container {
  position: relative;
}

section.slick-fs-container {
  padding: 0;
}

.slick-fs,
.slick-fs article {
  background-color: #161718;
  width: 100%;
}

.slick-fs article {
  position: relative;
}

.slick-fs-bg,
.slick-fs-bg img {
  display: block;
  height: auto;
  width: 100%;
}

.slick-fs-body {
  align-items: flex-start;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5vw;
  padding-bottom: calc( 5vw + 1.5rem * 2 );
}
@media (max-width: 37.5em) {
  .slick-fs-body {
    align-items: stretch;
  }
}

.slick-fs-body h1,
.slick-fs-body h2,
.slick-fs-body p {
  color: #ededed;
  color: white;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.33);
  width: 100%;
}
@media (min-width: 37.5625em) {
  .slick-fs-body h1,
.slick-fs-body h2,
.slick-fs-body p {
    width: 50vw;
  }
}
@media (min-width: 85.375em) {
  .slick-fs-body h1,
.slick-fs-body h2,
.slick-fs-body p {
    width: 40vw;
  }
}

.slick-fs-body h1 {
  font-size: 6vw;
}

.slick-fs-body h2 {
  font-size: 5vw;
}

.slick-fs-body h1,
.slick-fs-body h2 {
  line-height: 0.8em;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .slick-fs-body h1,
.slick-fs-body h2 {
    font-size: 6vh;
  }
}

section.slick-fs-container .slick-fs-ui, section.slick-fs-container .newsGrid-slick-ui, section.slick-fs-container .modesGrid-slick-ui {
  padding: 0.625rem 0;
  justify-content: flex-start;
}
section.slick-fs-container .slick-fs-ui .slick-dots, section.slick-fs-container .newsGrid-slick-ui .slick-dots, section.slick-fs-container .modesGrid-slick-ui .slick-dots {
  margin-left: auto;
}
@media (max-width: 37.5em) {
  section.slick-fs-container .slick-fs-ui .slick-dots, section.slick-fs-container .newsGrid-slick-ui .slick-dots, section.slick-fs-container .modesGrid-slick-ui .slick-dots {
    margin-right: auto;
  }
}

#index-modes-intro h1,
#index-story h1,
#membership-home-video h1,
#index-news h1,
#index-social h1,
#campaign-story h1 {
  text-align: center;
}

#modes-content {
  justify-content: center;
}

#modes-content .modes-content h2 {
  background-color: #c20000;
  color: white;
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  padding: 0.25rem 1.25rem 0.375rem;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 37.5625em) {
  #modes-content .modes-content h2 {
    bottom: 0;
    padding-right: 0.625rem;
    position: absolute;
  }
}
@media (min-width: 48em) {
  #modes-content .modes-content h2 {
    font-size: 1.25rem;
  }
}
@media (min-width: 85.375em) {
  #modes-content .modes-content h2 {
    font-size: 1.5rem;
  }
}

#modes-content .modes-copy {
  border-top: 0.1875rem solid #c20000;
  position: relative;
}

#index-story, #membership-home-video,
#campaign-story {
  text-align: center;
}
#index-story figure, #membership-home-video figure,
#campaign-story figure {
  background-color: black;
  height: auto;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
#index-story figure > iframe, #membership-home-video figure > iframe,
#campaign-story figure > iframe {
  height: 100%;
  width: 100%;
}

.video-container {
  width: 90%;
  margin-inline: auto !important;
}
@media (max-width: 37.5em) {
  .video-container {
    width: 100%;
  }
}

.modes-content.col-3 {
  flex-grow: 0;
  flex-shrink: 1;
}

@media (max-width: 37.5em) {
  .modes-content.col-3 {
    flex-basis: 100%;
  }
}
@media (min-width: 37.5625em) {
  .modes-content.col-3 {
    flex-basis: calc(50% - 1.25rem + 0.625rem );
  }
}
@media (min-width: 64.0625em) {
  .modes-content.col-3 {
    flex-basis: calc(100%/3 - 1.25rem + 0.4166666667rem );
  }
}
#index-social {
  padding-bottom: 5vw;
}
@media (max-width: 37.5em) {
  #index-social {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }
}

#index-social h1 {
  color: #ededed;
}

#index-social p {
  color: #cfcfcf;
  text-align: center;
}

#index-social > div:first-of-type {
  padding-bottom: 0;
}

#index-social > div:not(:first-of-type) {
  padding-top: 0;
}

@media (max-width: 37.5em) {
  #index-social > div:last-of-type {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

#social-contents .social-contents {
  border: 0.0625rem solid white;
  border-radius: 0.1875rem;
  color: white;
  position: relative;
}
#social-contents .social-contents::after {
  bottom: -10px;
  left: calc( -1 * 0.0625rem );
}
@media (min-width: 37.5625em) {
  #social-contents .social-contents {
    cursor: pointer;
  }
  #social-contents .social-contents:hover {
    background-color: white;
    color: #161718;
  }
  #social-contents .social-contents:hover .sns::after {
    opacity: 0;
  }
  #social-contents .social-contents:hover .sns::before {
    opacity: 1;
  }
  #social-contents .social-contents:hover::after {
    background-color: red;
  }
}

#social-contents .social-contents > div {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

#social-contents h2,
#social-contents span {
  color: currentColor;
  height: auto;
  z-index: 1;
}

#social-contents h2 {
  display: none;
  overflow: hidden;
  text-overflow: clip;
  text-transform: uppercase;
}
@media (min-width: 48em) {
  #social-contents h2 {
    font-size: 1em;
  }
}
@media (min-width: 85.375em) {
  #social-contents h2 {
    font-size: 1.5rem;
  }
}

#social-contents span {
  display: none;
  font-size: 0.625rem;
  line-height: normal;
  overflow: hidden;
  padding: 0 1.5rem;
  text-align: center;
  text-overflow: clip;
}
@media (min-width: 85.375em) {
  #social-contents span {
    font-size: 0.875rem;
  }
}

.social__sns {
  width: 5rem;
  height: 5rem;
  pointer-events: none;
}

@media (max-width: 20em) {
  .social__sns {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (max-width: 37.5em) {
  #social-contents .social-contents > div {
    min-height: 6.25rem;
  }

  .social__sns {
    width: 3.75rem;
    height: 3.75rem;
  }
}
@media (min-width: 37.5625em) {
  #social-contents h2 {
    display: block;
  }

  #social-contents .social-contents > div {
    min-height: 7.5rem;
  }

  .social__sns {
    width: 4.375rem;
    height: 4.375rem;
  }
}
@media (min-width: 85.375em) {
  #social-contents .social-contents > div {
    min-height: 12.5rem;
  }

  #social-contents .social-contents:hover h2 {
    display: none;
  }
  #social-contents .social-contents:hover span {
    display: block;
  }
}
@media (max-width: 37.5em) {
  .social-contents.col-6 {
    flex-basis: calc(33% - 1.25rem);
  }
}
@media (min-width: 37.5625em) {
  .social-contents.col-6 {
    flex-basis: calc(33% - 1.25rem);
  }
}
@media (min-width: 48em) {
  .social-contents.col-6 {
    flex-basis: calc(16.6666667% - 1.25rem);
  }
}

#campaign-promo-1 h1,
#battlepass-promo h1,
#battlepass-how-it-works h1 {
  text-align: center;
}

#campaign-promo-1 {
  position: relative;
}

#campaign-promo-2 {
  padding-bottom: 0;
  padding-top: 0;
}
#campaign-promo-2 .promo-text {
  color: #cfcfcf;
}

#campaign-promo-2 h2 {
  font-size: 1.875rem;
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 48em) {
  #campaign-promo-2 h2 {
    font-size: 2.5rem;
  }
}
@media (min-width: 85.375em) {
  #campaign-promo-2 h2 {
    font-size: 3.125rem;
  }
}

#battlepass-viewer,
.bp-viewer-content {
  height: auto;
  position: relative;
}
@media (max-width: 37.5em) {
  #battlepass-viewer,
.bp-viewer-content {
    display: none;
  }
}

#battlepass-viewer .bp-viewer-content {
  justify-content: center;
  position: relative;
}
#battlepass-viewer .bp-viewer-content .bp-viewer-image,
#battlepass-viewer .bp-viewer-content .bp-viewer-name {
  flex: 1 1 100%;
}
#battlepass-viewer .bp-viewer-content .bp-viewer-name {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
}
#battlepass-viewer .bp-viewer-content .bp-viewer-image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
}
#battlepass-viewer .bp-viewer-content .bp-viewer-name h2 {
  text-align: center;
}

#battlepass-ui {
  align-items: flex-start;
  flex-flow: nowrap;
  justify-content: space-between;
}
@media (max-width: 37.5em) {
  #battlepass-ui {
    gap: 0;
    margin: 0;
  }
}

#battlepass-ui .battlepass-ui-nav {
  background-color: #cfcfcf;
  filter: drop-shadow(0 0 5px #cfcfcf);
  flex: 0 0 1.875rem;
  height: 5rem;
}
@media (max-width: 37.5em) {
  #battlepass-ui .battlepass-ui-nav {
    filter: none;
  }
}

#battlepass-ui .battlepass-ui-thumbs {
  flex: 1 1 auto;
  min-height: 6.25rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#battlepass-ui .bp-thumb-content {
  cursor: pointer;
  flex: 0 1 100%;
  transition: transform 250ms ease-in-out;
  /* @devs remove these nth-child selectors if not required */
  /* @devs remove these nth-child selectors if not required */
}
@media (min-width: 37.5625em) {
  #battlepass-ui .bp-thumb-content {
    cursor: pointer;
  }
  #battlepass-ui .bp-thumb-content:hover {
    transform: translateY(calc( -1 * 0.625rem));
  }
}
#battlepass-ui .bp-thumb-content:nth-child(n+2) {
  display: none;
}
@media (min-width: 37.5625em) {
  #battlepass-ui .bp-thumb-content {
    flex: 0 1 50%;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+2) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+3) {
    display: none;
  }
}
@media (min-width: 48em) {
  #battlepass-ui .bp-thumb-content {
    flex: 0 1 33.3334%;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+2) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+3) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+4) {
    display: none;
  }
}
@media (min-width: 85.375em) {
  #battlepass-ui .bp-thumb-content {
    flex: 0 1 20%;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+2) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+3) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+4) {
    display: initial;
  }
  #battlepass-ui .bp-thumb-content:nth-child(n+6) {
    display: none;
  }
}

#battlepass-ui .bp-thumb-image img {
  display: block;
  height: auto;
  width: 100%;
}

#battlepass-ui .bp-thumb-name {
  padding-top: 0.625rem;
}

#battlepass-ui .bpui-btn {
  background-color: white;
  border: none;
  height: 100%;
  padding: 0;
  position: relative;
  width: 100%;
}
#battlepass-ui .bpui-btn::after {
  background-color: black;
  content: "";
  display: block;
  height: 1.875rem;
  height: auto;
  padding-top: 100%;
  width: 1.875rem;
}
@media (min-width: 37.5625em) {
  #battlepass-ui .bpui-btn {
    cursor: pointer;
  }
  #battlepass-ui .bpui-btn:hover {
    background-color: white !important;
  }
  #battlepass-ui .bpui-btn:hover::after {
    background-color: red;
  }
}
.bp-viewer-name > * {
  display: inline;
}

.bp-viewer-name h3,
.bp-viewer-name h4 {
  font-size: 1.875rem;
}

.bp-thumb-name h3,
.bp-thumb-name h4 {
  line-height: 1;
  text-align: center;
}

.bp-thumb-name h3 {
  font-size: 1.5rem;
}

.bp-thumb-name h4 {
  font-size: 1rem;
}
@media (max-width: 37.5em) {
  .bp-thumb-name h4 {
    font-size: 1.125rem;
  }
}

#battlepass-pagi-desktop {
  padding-top: 1.25rem;
  text-align: center;
}
@media (max-width: 37.5em) {
  #battlepass-pagi-desktop {
    display: none;
  }
}

#battlepass-pagi-mobile {
  flex-wrap: nowrap;
  gap: 0.625rem;
  justify-content: space-between;
  text-align: center;
}
#battlepass-pagi-mobile > * {
  flex: 1 1 auto;
}
@media (min-width: 37.5625em) {
  #battlepass-pagi-mobile {
    display: none;
  }
}

#modes-guide h1,
#customization-promo h1 {
  text-align: center;
}

#multiplayer-promo-1 {
  position: relative;
}

.modes-nav {
  gap: 0.625rem;
  justify-content: center;
  align-items: stretch;
  margin: 1.25rem 0;
  text-align: center;
}
@media (max-width: 37.5em) {
  .modes-nav > a {
    flex: 1 1 calc( 50% - 0.625rem);
  }
  .modes-nav > a button {
    width: 100%;
    height: 100%;
  }
}

#modes-guide,
.modes-guide,
.modes-guide figure {
  position: relative;
}

.modes-guide {
  margin: 3.75rem 0;
  padding-bottom: 0.0625rem;
}
@media (max-width: 37.5em) {
  .modes-guide {
    margin: 1.25rem 0;
  }
}
.modes-guide:first-of-type {
  margin-top: 1.25rem;
}
.modes-guide:last-of-type {
  margin-bottom: 0;
}
.modes-guide > * + * {
  padding: 0 1.25rem;
}

.modes-cards {
  border-bottom: 0.1875rem solid red;
}

.modes-cards img {
  display: block;
  height: auto;
  width: 100%;
}

.modes-cards figcaption {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
}

.modes-cards figcaption h2 {
  background: #c20000;
  color: white;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1;
  padding: 0.2334em 0.5em 0.08667em;
  text-transform: uppercase;
}
@media (min-width: 48em) {
  .modes-cards figcaption h2 {
    font-size: 3rem;
  }
}
@media (min-width: 85.375em) {
  .modes-cards figcaption h2 {
    font-size: 4.5rem;
  }
}

.modes-cards a {
  cursor: pointer;
}

.modes-cards-desc,
.modes-shelf,
.modes-shelf-ui {
  margin: 2vmax;
}
@media (min-width: 48em) {
  .modes-cards-desc,
.modes-shelf,
.modes-shelf-ui {
    margin: 1.25rem;
  }
}

.modes-cards-desc p {
  font-size: 2.25rem;
  text-align: center;
}
@media (max-width: 37.5em) {
  .modes-cards-desc p {
    font-size: 1.25rem;
  }
}

.modes-shelf > div.row, .modes-shelf > div.agt-check, [id*=cfx-modal] .modes-shelf > div:first-of-type, .modes-shelf > div[id*=xbl-state], .modes-shelf > div[id*=coupon-page__], .modes-shelf > div#mhb-cards, #membership-home-details.modes-shelf > div, .modes-shelf > div#mhh-calendar, .modes-shelf > div.msp-platform-info, .modes-shelf > div.msp-emails, .modes-shelf > div.cpn-codes,
.modes-shelf > div.msp-platforms, .modes-shelf > div#patchnotes-container, .btngrd .modes-shelf > div.btngrd-desktop, .modes-shelf > div#news-more, .modes-shelf > div#battlepass-ui, #battlepass-ui .modes-shelf > div.battlepass-ui-thumbs, .modes-shelf > div#battlepass-pagi-mobile, .modes-shelf > div.modes-nav {
  align-items: flex-start;
}

.modes-shelf-image {
  position: relative;
}

.modes-shelf-image img {
  display: block;
  height: auto;
  width: 100%;
}

.modes-shelf-copy {
  font-size: 0.75rem;
  padding: 0.625rem 0 1.25rem;
  text-align: center;
}
@media (min-width: 48em) {
  .modes-shelf-copy {
    font-size: 1rem;
    padding: 0.4166666667rem 0.625rem 0;
  }
}
.modes-shelf-copy h3 {
  font-size: 1.2em;
  font-weight: bold;
}
.modes-shelf-copy p {
  font-size: 1em;
}

.modes-shelf-ui {
  text-align: center;
}

#battlepass-how-it-works p {
  text-align: center;
}
@media (min-width: 37.5625em) {
  #battlepass-how-it-works p {
    text-align: left;
  }
}

#mp-video-modal {
  padding: 0;
  max-width: unset;
  width: min(90%, 75em);
}
#mp-video-modal figure {
  padding-top: 56.25%;
  width: 100%;
  height: 0;
  position: relative;
}
#mp-video-modal iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#mp-video-modal div {
  position: absolute;
  top: -40px;
  right: -40px;
}
#mp-video-modal button {
  background-color: transparent;
  font-size: 2em;
  transform: rotate(45deg);
}
#mp-video-modal button:hover {
  color: #c20000;
}

#customization-promo > div > p {
  width: min(90%, 100ch);
  margin: 2rem auto;
}

#customization-promo .slick-fs-container,
#battlepass-promo > div:last-of-type > article {
  width: min(100%, 75rem);
  margin-inline: auto;
}

#g-container nav {
  padding: 0.625rem 1.25rem;
  position: relative;
  background-color: white;
  color: #1f2023;
}

#g-container nav a {
  color: #161718;
  color: currentColor;
  text-decoration: none;
}
#g-container nav a:link, #g-container nav avisited {
  color: currentColor;
}
#g-container nav a:hover, #g-container nav a:active {
  color: red;
}

#g-container .nav__breadcrumbs,
.news-filter {
  font-size: 0.875rem;
  text-transform: uppercase;
}
#g-container .nav__breadcrumbs ul,
.news-filter ul {
  line-height: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
#g-container .nav__breadcrumbs li,
.news-filter li {
  display: inline-block;
}
@media (min-width: 37.5625em) {
  #g-container .nav__breadcrumbs,
.news-filter {
    font-size: 1em;
  }
}

#g-container .nav__breadcrumbs ul {
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 5vw);
}

nav.news-filter {
  justify-content: center;
  padding-bottom: 0;
  padding-top: 0;
}

nav.news-filter li a {
  margin: 0 0.5em;
  padding: 0 0.25em 0.25em;
}
nav.news-filter li a:hover, nav.news-filter li a.nav-active {
  border-color: #ffffff;
  color: red;
}

#g-container .nav__breadcrumbs li:not(:last-child)::after {
  content: " /";
  opacity: 0.6667;
}

nav.news-filter li:not(:last-child)::after {
  content: " |";
}

#g-container .nav__paginations {
  border-top: 1px solid #ededed;
  justify-content: center;
}
#g-container .nav__paginations > * {
  flex: 0 0 auto;
}
@media (max-width: 37.5em) {
  #g-container .nav__paginations > * {
    flex: 1 1 100%;
  }
}

#news-list .news-stamp {
  position: relative;
}
@media (max-width: 37.5em) {
  #news-list .news-stamp {
    background-color: black;
  }
  #news-list .news-stamp time {
    background: none;
  }
}

#g-container .news-stamp {
  font-size: 0.75rem;
}
@media (min-width: 37.5625em) {
  #g-container .news-stamp {
    font-size: 1.25rem;
  }
}

.news-filter-desktop,
.news-filter-mobile {
  justify-content: center;
}
.news-filter-desktop a,
.news-filter-mobile a {
  flex: 0 0 auto;
  margin: 0 0.25rem;
}
.news-filter-desktop a[target=_self],
.news-filter-mobile a[target=_self] {
  border-left: 0.0625rem solid #666666;
  margin-left: 0.625rem;
  padding-left: 0.875rem;
}

@media (max-width: 37.5em) {
  .news-filter-desktop {
    display: none;
  }

  .news-filter-mobile a {
    flex-grow: 1;
    margin: 0;
  }
}
@media (min-width: 37.5625em) {
  .news-filter-mobile {
    display: none;
  }
}
#g-container {
  align-items: center;
  justify-content: flex-start;
  padding: 3.125rem 0 0;
}
@media (min-width: 85.375em) {
  #g-container {
    padding: 6.25rem 0 3.75rem;
  }
}
@media (max-width: 60em) {
  #g-container {
    padding: 0;
  }
}

#g-container header {
  background-color: #161718;
  color: white;
  padding: 5vmin 5vw;
}
#g-container header h1, #g-container header h2 {
  color: inherit;
}
#g-container header h1 {
  font-size: 7.5rem;
  line-height: 0.8em;
  text-align: center;
}
#g-container header h2 {
  font-size: 4.5rem;
  line-height: 1em;
  margin-bottom: 0.625rem;
}
#g-container header h3 {
  font-size: 2.25rem;
  margin-bottom: 0.625rem;
}
#g-container header .news-stamp {
  position: relative;
}
@media (max-width: 37.5em) {
  #g-container header h1 {
    font-size: 3rem;
  }
  #g-container header h2 {
    font-size: 2.25rem;
  }
  #g-container header h3 {
    font-size: 1.5rem;
  }
}
@media (min-width: 37.5625em) {
  #g-container header {
    padding: 5vmin 2vw;
  }
}

#g-container .news-stamp {
  font-size: 0.875rem;
}

#news-list {
  display: flex;
  flex-direction: column;
}

#news-list .news-content {
  background: none;
  color: #161718;
  flex: 0 1 auto;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2.5rem;
}
@media (min-width: 64em) {
  #news-list .news-content {
    width: 92%;
  }
  #news-list .news-content:nth-child(even) {
    align-self: flex-end;
  }
}
@media (min-width: 37.5625em) {
  #news-list .news-content {
    margin-bottom: 3.75rem;
  }
  #news-list .news-content:last-of-type {
    margin-bottom: 0;
  }
}

#news-list .news-image,
#news-list .news-copy {
  flex: 1 1 auto;
}

#news-list .news-image {
  height: auto;
  padding-top: 0;
  width: 100%;
}
#news-list .news-image img {
  display: block;
  position: relative;
}

#news-list .news-copy {
  display: block;
  color: inherit;
}

#news-list .news-copy p {
  background: none;
  margin: 0.625rem 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#news-list .news-copy p span {
  color: #161718;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1em;
}
@media (min-width: 37.5625em) {
  #news-list .news-copy p span {
    font-size: 1.5rem;
  }
}
@media (min-width: 85.375em) {
  #news-list .news-copy p span {
    font-size: 1.875rem;
  }
}

@media (min-width: 48em) {
  #news-list .news-image {
    flex: 0 1 40%;
  }

  #news-list .news-copy {
    flex: 0 1 55%;
  }
}
/*

ARTICLE STUFF HERE

*/
#g-container article {
  font-size: 1.25rem;
  padding: 5vw;
  text-align: center;
}
@media (max-width: 37.5em) {
  #g-container article {
    font-size: 1rem;
  }
}

#g-container article p,
#g-container article dt,
#g-container article dd {
  font-size: 1em;
  hyphens: manual;
  line-height: 1.5em;
}

#g-container article p,
#g-container article h1,
#g-container article h2,
#g-container article h3,
#g-container article h4,
#g-container article h5,
#g-container article h6,
#g-container article ul,
#g-container article ol,
#g-container article dl,
#g-container article .article-table {
  max-width: 100%;
  text-align: left;
}

#g-container article h1,
#g-container article h2,
#g-container article h3,
#g-container article h4,
#g-container article h5,
#g-container article h6 {
  color: #161718;
  line-height: 1em;
  text-transform: none;
}

#g-container article h1 {
  font-size: 2em;
}

#g-container article h2 {
  font-size: 1.8em;
}

#g-container article h3 {
  font-size: 1.6em;
}

#g-container article h4 {
  font-size: 1.4em;
}

#g-container article h5 {
  font-size: 1.2em;
}

#g-container article h6 {
  font-size: 1em;
}

#g-container article ul,
#g-container article ol {
  font-size: 1rem;
  line-height: 1.25em;
  margin-left: 1rem;
}

#g-container article dd {
  margin: initial;
}

#g-container article dd p {
  padding: 0.5rem 0;
}

#g-container article dd ul {
  margin-left: 1rem;
}

#g-container article dt {
  font-style: italic;
  margin-bottom: 0.25rem;
  text-decoration: underline;
}

#g-container article > img,
#g-container article p > img {
  height: auto;
  width: 100%;
  max-width: fit-content;
}

#g-container .article-table {
  overflow-x: auto;
}

#g-container article table {
  border-collapse: collapse;
  overflow-y: scroll;
  width: auto;
}

#g-container article td,
#g-container article th {
  border: 1px solid #cfcfcf;
  text-align: left;
  padding: 0.5rem;
}

#g-container article tr:nth-child(even) {
  background-color: #ededed;
}

#g-container article th {
  font-size: 0.8rem;
  text-transform: uppercase;
}

#g-container article a {
  font-weight: 700;
  text-decoration: none;
}
#g-container article a:link, #g-container article a:visited {
  color: #c20000;
}
#g-container article a:hover, #g-container article a:active {
  color: #ff0000;
}

#g-container article .bold {
  font-weight: 700;
}

#g-container article .italic {
  font-style: italic;
}

#g-container article .indent {
  margin-left: 1rem;
}

#g-container article ul.indent {
  margin-left: 2rem;
}

.privacy-section {
  padding: 64px 0 0;
}

#patchnotes-container {
  align-items: stretch;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: 5vw;
}

#patchnotes-contents,
#patchnotes-nav {
  flex-grow: 0;
  flex-shrink: 1;
}

#patchnotes-contents {
  flex-basis: 100%;
}
#patchnotes-contents > * + * {
  margin: 5rem 0;
}
#patchnotes-contents article {
  padding: 0;
}
#patchnotes-contents h1,
#patchnotes-contents .news-stamp {
  margin: 0;
  position: relative;
}
#patchnotes-contents .news-stamp {
  margin-bottom: 2.5rem;
}
@media (min-width: 48em) {
  #patchnotes-contents {
    flex-basis: calc( 70% - 1.25rem );
  }
  #patchnotes-contents .news-stamp {
    margin-bottom: 1.25rem;
  }
}

#patchnotes-nav {
  display: none;
}
@media (min-width: 48em) {
  #patchnotes-nav {
    display: block;
    flex-basis: calc( 25% - 1.25rem );
  }
}

#patchnotes-nav div,
#patchnotes-nav-modal div {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
#patchnotes-nav div h2,
#patchnotes-nav-modal div h2 {
  margin-bottom: 0.625rem;
}
#patchnotes-nav div > * + *,
#patchnotes-nav-modal div > * + * {
  margin: 0.625rem 0;
}

#patchnotes-nav div {
  position: sticky;
  top: calc( 3.25em + 1.25rem + 3.125rem );
  transition: top 150ms ease;
}

#patchnotes-nav-mobile {
  text-align: center;
}
@media (min-width: 48em) {
  #patchnotes-nav-mobile {
    display: none;
  }
}

#msp-header {
  text-align: center;
}
#msp-header img {
  height: auto;
  max-width: 25.75rem;
  width: 80%;
}
#msp-header h1 {
  color: white;
  font-size: 4.5rem;
  font-weight: 700;
}
@media (max-width: 37.5em) {
  #msp-header h1 {
    font-size: 2.5rem;
  }
}

.msp-forms, .cpn-forms {
  margin: 3.125rem auto;
  max-width: 37.5rem;
}
.msp-forms > * + *, .cpn-forms > * + * {
  margin: 10px auto 0;
}

.msp-forms h2, .cpn-forms h2 {
  color: white;
  font-size: 2.25rem;
  line-height: 0.8;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .msp-forms h2, .cpn-forms h2 {
    font-size: 1.5rem;
    text-align: center;
  }
}

.msp-emails, .cpn-codes,
.msp-platforms {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.625rem;
}

@media (max-width: 37.5em) {
  .msp-emails, .cpn-codes {
    flex-direction: column;
  }
}

.msp-forms input[type=text], .cpn-forms input[type=text],
.msp-forms input[type=date],
.cpn-forms input[type=date],
.msp-forms input[type=tel],
.cpn-forms input[type=tel],
.msp-forms input[type=email],
.cpn-forms input[type=email],
.msp-forms input[type=number],
.cpn-forms input[type=number],
.msp-forms input[type=url],
.cpn-forms input[type=url],
.msp-forms select,
.cpn-forms select,
#msp-legal {
  background-color: #161718;
  border: 1px solid #666666;
  border-radius: 3px;
  color: #cfcfcf;
  font-size: 20px;
  flex: 0 1 auto;
  outline: none;
  padding: 0.5em;
  width: 100%;
}
.msp-forms input[type=text]::placeholder, .cpn-forms input[type=text]::placeholder,
.msp-forms input[type=date]::placeholder,
.cpn-forms input[type=date]::placeholder,
.msp-forms input[type=tel]::placeholder,
.cpn-forms input[type=tel]::placeholder,
.msp-forms input[type=email]::placeholder,
.cpn-forms input[type=email]::placeholder,
.msp-forms input[type=number]::placeholder,
.cpn-forms input[type=number]::placeholder,
.msp-forms input[type=url]::placeholder,
.cpn-forms input[type=url]::placeholder,
.msp-forms select::placeholder,
.cpn-forms select::placeholder,
#msp-legal::placeholder {
  color: #cfcfcf;
}
.msp-forms input[type=text]:focus, .cpn-forms input[type=text]:focus,
.msp-forms input[type=date]:focus,
.cpn-forms input[type=date]:focus,
.msp-forms input[type=tel]:focus,
.cpn-forms input[type=tel]:focus,
.msp-forms input[type=email]:focus,
.cpn-forms input[type=email]:focus,
.msp-forms input[type=number]:focus,
.cpn-forms input[type=number]:focus,
.msp-forms input[type=url]:focus,
.cpn-forms input[type=url]:focus,
.msp-forms select:focus,
.cpn-forms select:focus,
#msp-legal:focus {
  color: white !important;
  border-color: white;
}
.msp-forms input[type=text]:valid, .cpn-forms input[type=text]:valid,
.msp-forms input[type=date]:valid,
.cpn-forms input[type=date]:valid,
.msp-forms input[type=tel]:valid,
.cpn-forms input[type=tel]:valid,
.msp-forms input[type=email]:valid,
.cpn-forms input[type=email]:valid,
.msp-forms input[type=number]:valid,
.cpn-forms input[type=number]:valid,
.msp-forms input[type=url]:valid,
.cpn-forms input[type=url]:valid,
.msp-forms select:valid,
.cpn-forms select:valid,
#msp-legal:valid {
  color: white;
}

.msp-forms select.msp-service, .cpn-forms select.msp-service,
.msp-forms input.msp-followers,
.cpn-forms input.msp-followers {
  flex: 1 1 45%;
}

.msp-forms input[type=date]::-webkit-calendar-picker-indicator, .cpn-forms input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.msp-forms input[type=date]::before, .cpn-forms input[type=date]::before {
  content: attr(placeholder) "Birthday:";
  margin-right: 4px;
}
.msp-forms input[type=date]:focus::before, .cpn-forms input[type=date]:focus::before, .msp-forms input[type=date]:valid::before, .cpn-forms input[type=date]:valid::before {
  content: "" !important;
  margin-right: 0;
}

.msp-platform-info {
  align-items: stretch;
  gap: 0.625rem;
}

.msp-platform-ui {
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 50px;
}

.msp-platform-ui button {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.msp-platform-ui button::before {
  content: "+";
  font-size: 36px;
  line-height: 0.46;
}
.msp-platform-ui button.msp-sub {
  transform: rotate(45deg);
}

#msp-platforms > div:not(:last-of-type) {
  border-bottom: 0.0625rem solid #666666;
  padding-bottom: 1.25rem;
}

#msp-platforms > div {
  margin-bottom: 0.625rem;
}

#msp-legal {
  max-height: 13rem;
  overflow-y: scroll;
}

#msp-policies input[type=submit] {
  border-left: none;
  border-right: none;
  border-top: none;
  display: block;
  font-size: 1.5rem;
  line-height: 1em;
  margin: 3.125rem auto;
  padding: 0.5em;
}
@media (max-width: 37.5em) {
  #msp-policies input[type=submit] {
    width: 100%;
  }
}

#msp-policy-group {
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
#msp-policy-group input[type=checkbox] {
  height: 1.125rem;
  width: 1.125rem;
}
#msp-policy-group label {
  color: #ffffff;
  flex: 1 1 80%;
  font-size: 1rem;
  padding: 0 0.6667em;
  text-align: left;
}
#msp-policy-group a {
  color: red;
  font-weight: 700;
}
#msp-policy-group a:visited {
  color: red;
}
#msp-policy-group a:hover {
  color: white;
}
@media (max-width: 37.5em) {
  #msp-policy-group {
    font-size: 0.75rem;
  }
}

.msp-message {
  color: #cfcfcf;
  line-height: 1;
  margin-bottom: calc(-1 * 0.1875rem);
  margin-top: 0.1875rem;
  text-align: center;
}
.msp-message span {
  display: block;
  width: 100%;
}
@media (max-width: 37.5em) {
  .msp-message {
    font-size: 0.75rem;
  }
}
.msp-message[msp-error] {
  color: red;
}

#membership-home-header {
  padding-top: 6.25rem;
  padding-bottom: 10vmax;
  position: relative;
}
@media (min-width: 37.5625em) {
  #membership-home-header {
    padding-top: 15vmax;
  }
}
@media (min-width: 85.375em) {
  #membership-home-header {
    padding-top: 11vmax;
    padding-bottom: 5vmax;
  }
}

#mhh-logos {
  text-align: center;
}
#mhh-logos h1,
#mhh-logos h2 {
  color: white;
  line-height: 0.8;
  text-transform: uppercase;
}
#mhh-logos .header-logo-small {
  display: block;
  margin: 1.25rem auto;
}
@media (max-width: 37.5em) {
  #mhh-logos .header-logo-small {
    width: 80%;
  }
}

#mhh-logos h1 {
  font-size: 3.125rem;
  font-weight: 700 !important;
  margin-bottom: 0;
}
@media (min-width: 37.5625em) {
  #mhh-logos h1 {
    font-size: 6.25rem;
  }
}
@media (min-width: 85.375em) {
  #mhh-logos h1 {
    font-size: 9.375rem;
  }
}

#mhh-logos h2 {
  font-size: 1.875rem;
}
@media (min-width: 37.5625em) {
  #mhh-logos h2 {
    font-size: 3.75rem;
  }
}
@media (min-width: 85.375em) {
  #mhh-logos h2 {
    font-size: 5.625rem;
  }
}

#mhh-calendar {
  align-items: stretch;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  justify-content: center;
}
#mhh-calendar > .mhh-calendar-box:nth-of-type(1),
#mhh-calendar > .mhh-calendar-box:nth-of-type(2),
#mhh-calendar > .mhh-calendar-box:nth-of-type(3) {
  flex: 1 1 100%;
  order: 0;
}
@media (min-width: 48em) {
  #mhh-calendar > .mhh-calendar-box:nth-of-type(1),
#mhh-calendar > .mhh-calendar-box:nth-of-type(3) {
    flex: 1 1 calc( 40% - 1.25rem);
  }
  #mhh-calendar > .mhh-calendar-box:nth-of-type(2) {
    flex: 1 1 100%;
    order: 3;
  }
}
@media (min-width: 85.375em) {
  #mhh-calendar {
    column-gap: 5rem;
  }
  #mhh-calendar > .mhh-calendar-box:nth-of-type(2) {
    order: 0;
  }
  #mhh-calendar > .mhh-calendar-box:nth-of-type(1),
#mhh-calendar > .mhh-calendar-box:nth-of-type(2),
#mhh-calendar > .mhh-calendar-box:nth-of-type(3) {
    flex: 0 0 auto;
  }
}

#mhh-calendar .mhh-calendar-box {
  border-bottom: 0.0625rem solid #666666;
  padding-bottom: 1.25rem;
  position: relative;
  text-align: center;
}
#mhh-calendar .mhh-calendar-box h3 {
  color: white;
  font-size: 1.5rem;
  line-height: 0.8;
  margin-top: 0.375rem;
  text-transform: uppercase;
}
#mhh-calendar .mhh-calendar-box span {
  color: #cfcfcf;
  font-size: 0.75rem;
  line-height: 0.7;
  text-transform: capitalize;
}
@media (max-width: 37.5em) {
  #mhh-calendar .mhh-calendar-box h3 {
    line-height: 0.5;
  }
  #mhh-calendar .mhh-calendar-box span {
    line-height: normal;
  }
}
@media (min-width: 37.5625em) {
  #mhh-calendar .mhh-calendar-box h3 {
    font-size: 2.5rem;
  }
  #mhh-calendar .mhh-calendar-box span {
    font-size: 1.125rem;
  }
}
@media (min-width: 48em) {
  #mhh-calendar .mhh-calendar-box {
    border: 0.0625rem solid #cfcfcf;
    border-radius: 0.1875rem;
    min-width: 18.75rem;
    padding: 1.25rem 1.875rem;
  }
}

#mhh-cta {
  bottom: calc( -1 * 1.25rem);
  left: 0;
  padding: 0 5vmax;
  position: absolute;
  text-align: center;
  width: 100%;
}
@media (min-width: 37.5625em) {
  #mhh-cta {
    bottom: calc( -1 * 3.75rem);
  }
}

#membership-home-video {
  padding-bottom: 8vmax;
  padding-top: 8vmax;
}
@media (min-width: 37.5625em) {
  #membership-home-video {
    padding-top: 11vmax;
  }
}
@media (min-width: 48em) {
  #membership-home-video {
    padding-top: 8vmax;
  }
}
@media (min-width: 85.375em) {
  #membership-home-video {
    padding-bottom: 5vmax;
    padding-top: 5vmax;
  }
}

#membership-home-details > div {
  flex-wrap: nowrap;
  gap: 2.5rem;
  justify-content: space-between;
}

#mhd-image > img,
#mhd-image-small > img {
  width: 100%;
  height: auto;
}

#mhd-image > img {
  margin-bottom: 2.5rem;
}

#mhd-image {
  display: none;
  flex: 0 1 40.3125rem;
}
@media (min-width: 85.375em) {
  #mhd-image {
    display: block;
  }
}

#mhd-image-small {
  display: block;
}
@media (min-width: 85.375em) {
  #mhd-image-small {
    display: none;
  }
}

#mhd-body {
  flex: 1 1 58.75rem;
}

#mhd-body > p {
  color: black;
  text-align: center;
}
#mhd-body > p > span {
  color: red;
  font-weight: 700;
}
@media (min-width: 37.5625em) {
  #mhd-body > p {
    font-size: 1.125rem;
  }
}
@media (min-width: 48em) {
  #mhd-body > p {
    font-size: 1.25rem;
  }
}
@media (min-width: 85.375em) {
  #mhd-body > p {
    font-size: 1.5rem;
  }
}

#mhd-tiers {
  margin-bottom: 3.75rem;
}

#mhd-body aside {
  align-items: stretch;
}
@media (max-width: 37.5em) {
  #mhd-body aside[id=mhd-steps] {
    gap: 0;
  }
}

#mhd-tiers > div,
#mhd-steps > div {
  padding: 1.25rem;
  position: relative;
  text-align: center;
}

#mhd-tiers > div {
  border: 0.0625rem solid #cfcfcf;
  border-radius: 0.1875rem;
}

#mhd-tiers h2,
#mhd-steps h2 {
  color: black;
  font-size: 2.25rem;
}

#mhd-tiers p {
  text-align: left;
}

#mhd-tiers img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 5rem;
}

#membership-home-benefits h1,
#membership-home-benefits p {
  color: white;
  text-align: center;
}

#membership-home-benefits p > span {
  font-weight: 700;
}
@media (min-width: 37.5625em) {
  #membership-home-benefits p {
    font-size: 1.125rem;
  }
}
@media (min-width: 48em) {
  #membership-home-benefits p {
    font-size: 1.25rem;
  }
}
@media (min-width: 85.375em) {
  #membership-home-benefits p {
    font-size: 1.5rem;
  }
}

#mhb-cards,
#mhb-table {
  padding: 2.5em 0;
}

#mhb-cards {
  display: none;
  flex-wrap: nowrap;
}
@media (min-width: 48em) {
  #mhb-cards {
    display: flex;
  }
}
@media (min-width: 85.375em) {
  #mhb-cards {
    gap: 3.75rem;
  }
}

#mhb-table {
  display: block;
}
@media (min-width: 48em) {
  #mhb-table {
    display: none;
  }
}

.mhb-card {
  background-color: #111;
  background-image: linear-gradient(0deg, #111111 0%, #1f2023 100%);
  border-radius: 0.375rem;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.22);
  margin: 0 !important;
  padding: 1.25rem 0.1875rem;
  position: relative;
  border: 0.0625rem solid #cfcfcf;
  border-left: none;
  border-right: none;
}

.mhb-card > img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 13.5rem;
  width: 100%;
}

.mhb-card h2,
.mhb-table-header h2 {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 85.375em) {
  .mhb-card h2,
.mhb-table-header h2 {
    font-size: 3rem;
  }
}

.mhb-card ul,
.mhb-table-header,
.mhb-table-body {
  list-style: none;
}

.mhb-card li {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin: 0.25rem 0;
  padding: 1em 1.5rem;
  padding-right: 4.375rem;
  position: relative;
  text-transform: uppercase;
}
@media (min-width: 85.375em) {
  .mhb-card li {
    font-size: 0.875rem;
  }
}

.mhb-card li[mhb-active] {
  background-color: #222222;
  color: #ededed;
}

.mhb-table-header li,
.mhb-table-body li {
  align-items: stretch;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.mhb-table-body li {
  align-items: center;
  border-bottom: 0.0625rem solid #666666;
  padding: 0.3em 0;
}

.mhb-table-header h2 {
  flex: 0 1 auto;
  font-size: 1.5rem;
  line-height: 1.2;
  text-align: right;
}
@media (min-width: 37.5625em) {
  .mhb-table-header h2 {
    font-size: 3rem;
  }
}

.mhb-table-body h2 {
  color: #ededed;
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.2;
}
@media (max-width: 20em) {
  .mhb-table-body h2 {
    font-size: 0.75rem;
  }
}
@media (min-width: 37.5625em) {
  .mhb-table-body h2 {
    font-size: 1.125rem;
  }
}

.mhb-table-header div,
.mhb-table-body div {
  display: flex;
  flex: 0 1 48px;
}
@media (min-width: 37.5625em) {
  .mhb-table-header div,
.mhb-table-body div {
    flex: 0 1 64px;
  }
}

.mhb-table-header img {
  display: block;
  height: auto;
  width: 100%;
}
@media (min-width: 37.5625em) {
  .mhb-table-header img {
    width: auto;
  }
}

.mhb-table-header > li > img {
  margin: -4px 2px 7px 0;
  width: 40px;
}
@media (max-width: 20em) {
  .mhb-table-header > li > img {
    width: 35px;
  }
}
@media (min-width: 37.5625em) {
  .mhb-table-header > li > img {
    margin: -5px 5px 0 0;
    width: 48px;
  }
}

.mhb-table-header div[mhb-arrow-top] {
  align-items: flex-end;
}

.mhb-table-header div[mhb-arrow] img {
  height: 100%;
}

li[mhb-type]::after {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  margin-top: calc( -1 * 1.25rem );
  left: auto;
  right: 1.25rem;
  top: 50%;
  opacity: 0.3334;
}

div[mhb-type]::after {
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  opacity: 0.3334;
  margin: 0 auto;
}

*[mhb-active]::after {
  filter: drop-shadow(0 0 5px #cfcfcf);
  opacity: 1 !important;
}

*[mhb-type=advertisements]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_advertisements.svg");
}

*[mhb-type=banner]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_banner.svg");
}

*[mhb-type=coupons]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_coupons.svg");
}

*[mhb-type=incentives]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_incentives.svg");
}

*[mhb-type=invitations]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_invitations.svg");
}

*[mhb-type=merchandise]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_merchandise.svg");
}

*[mhb-type=skins]::after {
  content: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/cfx-icons_skins.svg");
}

#membership-home-faq {
  padding-bottom: 0;
  text-align: center;
}
#membership-home-faq h1 {
  color: white;
}

#mhf-cta {
  margin-top: 3.75rem;
}

#influencers-header {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

#cip-logos {
  padding-top: 4vmax;
  padding-bottom: 2vmax;
  text-align: center;
}
@media (min-width: 37.5625em) {
  #cip-logos {
    padding-top: 7.5vmax;
    padding-bottom: 6vmax;
  }
}
@media (min-width: 85.375em) {
  #cip-logos {
    padding-top: 8.75rem;
    padding-bottom: 4.375rem;
  }
}
#cip-logos h1 {
  color: white;
  line-height: 0.8;
  text-transform: uppercase;
  font-size: 3.125rem;
  font-weight: 700 !important;
  margin-bottom: 0;
}
@media (min-width: 37.5625em) {
  #cip-logos h1 {
    font-size: 6.25rem;
  }
}
@media (min-width: 85.375em) {
  #cip-logos h1 {
    font-size: 9.375rem;
  }
}

#cip-sub {
  min-height: 300px;
  text-align: center;
}

#cip-sub-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  padding-top: 2.5rem;
  padding-bottom: 3.125rem;
}
#cip-sub-nav button {
  border-color: white;
  color: white;
}
@media (min-width: 37.5625em) {
  #cip-sub-nav button {
    cursor: pointer;
  }
  #cip-sub-nav button:hover {
    border-color: red;
  }
}
#cip-sub-nav *[active] button {
  border-color: red;
  background-color: red;
}
@media (min-width: 37.5625em) {
  #cip-sub-nav {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #cip-sub-nav button {
    font-size: 1.5rem;
  }
}

#cip-sub-text h1,
#cip-sub-text p {
  color: white;
  text-align: center;
}
#cip-sub-text h1 > span,
#cip-sub-text p > span {
  color: red;
}

@media (min-width: 37.5625em) {
  #cip-sub-text p {
    font-size: 1.125rem;
  }
}
@media (min-width: 48em) {
  #cip-sub-text p {
    font-size: 1.25rem;
  }
}
@media (min-width: 85.375em) {
  #cip-sub-text p {
    font-size: 1.5rem;
  }
}

#influencers-body {
  min-height: 400px;
}

@media (min-width: 37.5625em) {
  #influencers-body,
#cip-sub .creators-faq {
    padding-bottom: 3.125rem;
  }
}
@media (min-width: 48em) {
  #influencers-body,
#cip-sub .creators-faq {
    padding-bottom: 5rem;
  }
}
@media (min-width: 85.375em) {
  #influencers-body,
#cip-sub .creators-faq {
    padding-bottom: 12.5rem;
  }
}

#cip-sub .creators-faq {
  padding-top: 2.5rem;
}

#cip-filters {
  background-color: #1f2023;
  padding: 0.625rem 1.25rem;
  border-radius: 0.1875rem;
  width: fit-content;
  margin: 2.5rem auto 0;
}

#cip-filters,
#cip-filters ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: white;
}

@media (max-width: 37.5em) {
  #cip-filters {
    flex-direction: column;
  }
}

#cip-filters li {
  list-style: none;
}

#cip-filters li:not(:first-of-type)::before {
  content: "/";
  padding: 0 0.1875rem;
}

#cip-filters a {
  color: inherit;
}
@media (min-width: 37.5625em) {
  #cip-filters a {
    cursor: pointer;
  }
  #cip-filters a:hover {
    color: red;
  }
}

#cip-filters li[active] a {
  color: red;
}

.col-group {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
}
@media (max-width: 37.5em) {
  .col-group {
    gap: 0.625rem;
  }
}

.colz-3,
.colz-4 {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 1;
}

@media (max-width: 37.5em) {
  .colz-3 {
    flex-basis: 100%;
  }

  .colz-4 {
    flex-basis: calc(50% - 1.25rem + 0.625rem );
  }
}
@media (min-width: 37.5625em) {
  .colz-3 {
    flex-basis: calc(50% - 2.5rem + 1.25rem );
  }

  .colz-4 {
    flex-basis: calc(50% - 2.5rem + 1.25rem );
  }
}
@media (min-width: 48em) {
  .colz-3 {
    flex-basis: calc(100%/3 - 2.5rem + 0.8333333333rem );
  }

  .colz-4 {
    flex-basis: calc(100%/3 - 2.5rem + 0.8333333333rem );
  }
}
@media (min-width: 85.375em) {
  .colz-4 {
    flex-basis: calc(25% - 2.5rem + 0.625rem );
  }
}
.btngrd a[rel] {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.partner-modal .btnXClose,
.featured-modal .btnXClose {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  background-color: white;
  border-radius: 0.1875rem;
  position: absolute;
  width: 1em;
  height: 1em;
  right: -0.5em;
  top: -0.5em;
  z-index: 1;
}
.partner-modal .btnXClose svg,
.featured-modal .btnXClose svg {
  width: 1em;
  height: auto;
  fill: #1f2023;
  fill-rule: evenodd;
}
@media (min-width: 37.5625em) {
  .partner-modal .btnXClose,
.featured-modal .btnXClose {
    cursor: pointer;
  }
  .partner-modal .btnXClose:hover svg,
.featured-modal .btnXClose:hover svg {
    fill: red;
  }
}

.partner-modal figcaption h4 + p,
.featured-modal figcaption h4 + p {
  color: #666666;
}
.partner-modal figcaption p,
.featured-modal figcaption p {
  color: #cfcfcf;
}

.featured-content figcaption {
  padding: 0.3125rem;
}

.featured-title {
  font-size: 1.125rem;
  line-height: 1;
  color: white;
}
@media (min-width: 37.5625em) {
  .featured-title {
    font-size: 1.25rem;
  }
}
@media (min-width: 48em) {
  .featured-title {
    font-size: 1.5625rem;
  }
}
@media (min-width: 85.375em) {
  .featured-title {
    font-size: 1.875rem;
  }
}

.featured-content p {
  font-size: 0.75rem;
  color: #cfcfcf;
}
@media (min-width: 48em) {
  .featured-content p {
    font-size: 0.875rem;
  }
}
@media (min-width: 85.375em) {
  .featured-content p {
    font-size: 1rem;
  }
}

.featured-content.btngrd:hover {
  background: none !important;
}

.featured-image {
  overflow: hidden;
}

.featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.featured-modal {
  padding: 0;
}
.featured-modal .featured-video {
  width: 100%;
  position: relative;
}
.featured-modal .featured-video::before {
  content: "";
  display: block;
  padding-top: 56.25%;
  width: 100%;
}
.featured-modal .featured-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.featured-modal figcaption {
  padding: 1.875rem 1.25rem;
}
@media (min-width: 37.5625em) {
  .featured-modal figcaption {
    padding: 2.5rem;
  }
}
.featured-modal p:not(h4 + p) {
  margin-top: 1rem;
}

.partner-name {
  font-size: 1.125rem;
  line-height: 1;
  color: white;
  text-align: center;
}
@media (min-width: 37.5625em) {
  .partner-name {
    font-size: 1.25rem;
  }
}
@media (min-width: 48em) {
  .partner-name {
    font-size: 2.1875rem;
  }
}
@media (min-width: 85.375em) {
  .partner-name {
    font-size: 2.5rem;
  }
}

.partner-content.btngrd:hover {
  background: none !important;
}

.partner-image {
  overflow: hidden;
}

.partner-image img {
  width: 100%;
  height: auto;
  display: block;
}

.partner-sns,
.partner-language {
  background-color: #1f2023;
  border-radius: 0.1875rem;
  width: 100%;
  position: relative;
  padding: 0.3125rem;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.3125rem;
}

.partner-sns,
.partner-sns::before,
.partner-sns::after,
.partner-language {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.partner-sns::before,
.partner-sns::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #666666;
  top: 0;
  left: 0;
  padding: 0.3125rem;
  font-size: 0.75rem;
}
@media (min-width: 37.5625em) {
  .partner-sns::before,
.partner-sns::after {
    font-size: 1.25rem;
    padding: 0.3125rem 0.625rem;
  }
}
@media (min-width: 48em) {
  .partner-sns::before,
.partner-sns::after {
    font-size: 1.375rem;
  }
}
@media (min-width: 85.375em) {
  .partner-sns::before,
.partner-sns::after {
    font-size: 1.5rem;
  }
}

.partner-sns::before {
  content: "|[";
  text-align: left;
}

.partner-sns::after {
  content: "]|";
  text-align: right;
}

.partner-sns .sns {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 37.5625em) {
  .partner-sns .sns {
    width: 1.875rem;
    height: 1.875rem;
  }
}
@media (min-width: 48em) {
  .partner-sns .sns {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.partner-modal {
  max-width: 25rem;
  padding: 1.875rem 1.25rem;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-modal.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.partner-modal figure img {
  max-width: 12.5rem;
  max-height: 12.5rem;
  border-radius: 0.1875rem;
  border: 0.0625rem solid red;
  margin: 0 auto;
}
.partner-modal .partner-name {
  font-size: 2.5rem;
  margin-top: 1.25rem;
}
.partner-modal .partner-language {
  text-transform: uppercase;
  color: white;
  font-size: 1.2rem;
}
.partner-modal li {
  list-style: none;
}
.partner-modal p {
  margin-top: 1rem;
}
@media (min-width: 37.5625em) {
  .partner-modal {
    padding: 2.5rem;
  }
}

.creators-faq dl {
  margin: 0 auto !important;
  max-width: 64rem;
  padding: 0;
}

.creators-faq dl dt,
.creators-faq dl dd {
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
  width: 100%;
}
@media (min-width: 48em) {
  .creators-faq dl dt,
.creators-faq dl dd {
    padding-left: 3rem;
    padding-right: 1rem;
  }
}
@media (min-width: 85.375em) {
  .creators-faq dl dt,
.creators-faq dl dd {
    padding-right: 4rem;
  }
}

.creators-faq dl dt {
  align-items: center;
  background-color: black;
  border-bottom: 1px solid #1f2023;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-weight: 700;
  justify-content: flex-start;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  position: relative;
  line-height: initial;
}
@media (min-width: 48em) {
  .creators-faq dl dt {
    font-size: 1.25rem;
    padding-bottom: 0.8em;
    padding-top: 0.8em;
  }
  .creators-faq dl dt:nth-of-type(1)::before {
    content: "1";
  }
  .creators-faq dl dt:nth-of-type(2)::before {
    content: "2";
  }
  .creators-faq dl dt:nth-of-type(3)::before {
    content: "3";
  }
  .creators-faq dl dt:nth-of-type(4)::before {
    content: "4";
  }
  .creators-faq dl dt:nth-of-type(5)::before {
    content: "5";
  }
  .creators-faq dl dt:nth-of-type(6)::before {
    content: "6";
  }
  .creators-faq dl dt:nth-of-type(7)::before {
    content: "7";
  }
  .creators-faq dl dt:nth-of-type(8)::before {
    content: "8";
  }
  .creators-faq dl dt:nth-of-type(9)::before {
    content: "9";
  }
  .creators-faq dl dt:nth-of-type(10)::before {
    content: "10";
  }
  .creators-faq dl dt:nth-of-type(11)::before {
    content: "11";
  }
  .creators-faq dl dt:nth-of-type(12)::before {
    content: "12";
  }
  .creators-faq dl dt:nth-of-type(13)::before {
    content: "13";
  }
  .creators-faq dl dt:nth-of-type(14)::before {
    content: "14";
  }
  .creators-faq dl dt:nth-of-type(15)::before {
    content: "15";
  }
  .creators-faq dl dt:nth-of-type(16)::before {
    content: "16";
  }
  .creators-faq dl dt:nth-of-type(17)::before {
    content: "17";
  }
  .creators-faq dl dt:nth-of-type(18)::before {
    content: "18";
  }
  .creators-faq dl dt:nth-of-type(19)::before {
    content: "19";
  }
  .creators-faq dl dt:nth-of-type(20)::before {
    content: "20";
  }
  .creators-faq dl dt:nth-of-type(21)::before {
    content: "21";
  }
  .creators-faq dl dt:nth-of-type(22)::before {
    content: "22";
  }
  .creators-faq dl dt:nth-of-type(23)::before {
    content: "23";
  }
  .creators-faq dl dt:nth-of-type(24)::before {
    content: "24";
  }
  .creators-faq dl dt:nth-of-type(25)::before {
    content: "25";
  }
}

.creators-faq dl dt::before {
  left: 0.8em;
  margin-top: 3px;
  position: absolute;
}
@media (min-width: 48em) {
  .creators-faq dl dt::before {
    font-size: 1.3333em;
  }
}

.creators-faq dl dt::after {
  background-position: left center;
  background-repeat: no-repeat;
  position: absolute;
  width: 22px;
  height: 22px;
  right: 0.8em;
}
@media (min-width: 85.375em) {
  .creators-faq dl dt::after {
    content: "";
  }
}

.creators-faq dl dt:hover {
  color: red;
}
.creators-faq dl dt:hover::after {
  background-position: right center;
}

.creators-faq dl dt.dt-active {
  background-color: white;
  border-bottom: none;
  color: black;
}
.creators-faq dl dt.dt-active:hover {
  color: currentColor;
}
.creators-faq dl dt.dt-active::after {
  background-position: center center;
}

.creators-faq dl dd {
  background-color: white;
  font-size: 0.8rem;
  line-height: 1.5em;
  margin: -1 0 0 0;
  padding-bottom: 1.2em;
}
@media (min-width: 48em) {
  .creators-faq dl dd {
    font-size: 1rem;
  }
}

.creators-faq dl dd > a {
  font-weight: 700;
}
.creators-faq dl dd > a:link, .creators-faq dl dd > avisited {
  color: #c20000;
}
.creators-faq dl dd > a:hover, .creators-faq dl dd > a:active {
  color: #c20000;
}

#coupon-page {
  overflow: hidden;
}

[id*=coupon-page__] {
  position: relative;
}

#coupon-page__top {
  align-content: center;
  min-height: 0;
  transition: min-height 300ms ease-in-out;
}
@media (max-width: 37.5em) {
  #coupon-page__top {
    min-height: 0;
    padding-bottom: 7vmax;
  }
}

#coupon-page__bottom {
  align-content: flex-start;
  gap: 0;
}

.cpn-box-closed {
  min-height: calc( 100vh - 6.25rem) !important;
}

#cpn-header {
  text-align: center;
}
#cpn-header img {
  height: auto;
  max-width: 25.75rem;
  width: 80%;
}
#cpn-header h1 {
  color: white;
  font-size: 4.5rem;
  font-weight: 700;
}
@media (max-width: 37.5em) {
  #cpn-header h1 {
    font-size: 2.5rem;
  }
}
#cpn-header h2 {
  color: white;
  display: none;
  padding-bottom: 0.375rem;
}

.cpn-forms {
  margin-bottom: 0;
  margin-top: 0;
}

.cpn-codes {
  position: relative;
}
.cpn-codes > a,
.cpn-codes > button {
  flex: 1 0 auto;
}
.cpn-codes input:disabled {
  opacity: 0.5;
}

.cpn-message {
  bottom: calc( -1 * 1.5rem);
  color: #cfcfcf;
  position: absolute;
  width: 100%;
}

[class*=cpn-controller] {
  padding: 0 5vw;
  text-align: center;
  width: 100%;
}

.cpn-controller-show {
  bottom: 3.125rem;
}
@media (min-height: 700px) {
  .cpn-controller-show {
    position: absolute;
  }
}
@media (max-width: 37.5em) {
  .cpn-controller-show {
    position: static;
  }
}

.cpn-controller-hide {
  position: absolute;
  top: calc( -1 * 1.25rem);
}

[class*=cpn-table__] {
  border-radius: 0.1875rem;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 0.625rem;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
}
@media (max-width: 37.5em) {
  [class*=cpn-table__] {
    justify-content: center;
  }
}

[class*=cpn-table__] li:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 25%;
}
@media (max-width: 37.5em) {
  [class*=cpn-table__] li:nth-child(1) {
    color: #161718;
    font-size: 1rem;
    font-weight: 700;
  }
}

[class*=cpn-table__] li:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 50%;
}
@media (max-width: 37.5em) {
  [class*=cpn-table__] li:nth-child(2) {
    font-size: 0.875rem;
    padding-bottom: 0.5rem;
  }
}

@media (max-width: 37.5em) {
  [class*=cpn-table__] li:nth-child(1),
[class*=cpn-table__] li:nth-child(2) {
    flex-basis: 100%;
    text-align: center;
  }
}
[class*=cpn-table__] li:nth-child(3) {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 10%;
  text-align: center;
}
@media (max-width: 37.5em) {
  [class*=cpn-table__] li:nth-child(3) {
    border-top: 0.0625rem solid #cfcfcf;
    flex-basis: 100%;
    padding-top: 0.5rem;
  }
}

.cpn-table__heading {
  background-color: #161718;
  color: #ededed;
  font-size: 1rem;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .cpn-table__heading {
    display: none;
  }
}

.cpn-table__row {
  background-color: white;
  font-size: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cpn-xboxlink {
  display: none;
  padding-top: 0.625rem;
}

.cpn-unlinked h2,
.cpn-unlinked .cpn-xboxlink {
  display: block !important;
}
.cpn-unlinked .cpn-message,
.cpn-unlinked .cpn-controller-show {
  display: none !important;
}
.cpn-unlinked .cpn-codes input[type=text] {
  opacity: 0.5;
  pointer-events: none;
}
.cpn-unlinked .cpn-codes button {
  background-color: #1f2023;
  border-color: #1f2023 !important;
  color: #666666 !important;
  filter: none;
  pointer-events: none;
}

#xbl-page__top {
  align-items: center;
  justify-content: center;
  min-height: calc( 100vh - 6.25rem);
  padding: 5vmax 0;
}
@media (max-width: 37.5em) {
  #xbl-page__top {
    min-height: 0;
    padding: 0;
  }
}

[id*=xbl-state] {
  background-color: white;
  justify-content: center;
  margin: 2vmax;
  min-height: 10em;
  max-width: 43.75em;
  padding: 2.5rem;
  text-align: center;
  width: 100%;
}
@media (max-width: 37.5em) {
  [id*=xbl-state] {
    gap: 1.875rem;
    padding: 3vmax;
  }
}
@media (min-width: 48em) {
  [id*=xbl-state] {
    margin: 0;
  }
}

[id*=xbl-state] img {
  display: block;
  height: auto;
  width: 100%;
}

.xbl-textbox h1, #consent-modal div > div:not(:first-of-type) h1 {
  color: #161718;
  font-size: 3rem;
  line-height: 1em;
  text-transform: uppercase;
}
.xbl-textbox p, #consent-modal div > div:not(:first-of-type) p {
  font-size: 1.125rem;
}
.xbl-textbox button, #consent-modal div > div:not(:first-of-type) button {
  margin-top: 0.875rem;
}
@media (max-width: 37.5em) {
  .xbl-textbox h1, #consent-modal div > div:not(:first-of-type) h1 {
    font-size: 1.875rem;
  }
  .xbl-textbox p, #consent-modal div > div:not(:first-of-type) p {
    font-size: 0.875rem;
  }
}
@media (min-width: 37.5625em) {
  .xbl-textbox button, #consent-modal div > div:not(:first-of-type) button {
    font-size: 1.25rem;
  }
}

.xbl-rewards {
  overflow: hidden;
}
.xbl-rewards img {
  border: 0.0625rem solid #cfcfcf;
  border-radius: 0.375rem;
  margin-bottom: 0.3125rem;
}
.xbl-rewards figcaption {
  color: #161718;
  font-size: 1.125rem;
  line-height: 1em;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  .xbl-rewards figcaption {
    font-size: 0.875rem;
  }
}

.xbl-return {
  border-top: 0.0625rem solid #cfcfcf;
  padding-top: 0.875rem;
  width: 100%;
}
.xbl-return a:link,
.xbl-return a:visited,
.xbl-return a {
  color: #c20000;
  font-weight: 700;
}
.xbl-return a:hover {
  color: red;
}

.xbl-state-1 #xbl-state-2 {
  display: none;
}
.xbl-state-1 #xbl-state-3 {
  display: none;
}
.xbl-state-1 #xbl-state-4 {
  display: none;
}

.xbl-state-2 #xbl-state-1 {
  display: none;
}
.xbl-state-2 #xbl-state-3 {
  display: none;
}
.xbl-state-2 #xbl-state-4 {
  display: none;
}

.xbl-state-3 #xbl-state-1 {
  display: none;
}
.xbl-state-3 #xbl-state-2 {
  display: none;
}
.xbl-state-3 #xbl-state-4 {
  display: none;
}

.xbl-state-4 #xbl-state-1 {
  display: none;
}
.xbl-state-4 #xbl-state-2 {
  display: none;
}
.xbl-state-4 #xbl-state-3 {
  display: none;
}

#legal {
  background-color: #ededed;
}
#legal #g-container {
  padding: 4vw 0 3.75rem;
}
@media (max-width: 60em) {
  #legal #g-container {
    padding-top: 5vw;
  }
}
#legal #g-container header,
#legal #legal_statement,
#legal #legal_form {
  background: none;
  padding: 0 5vw;
}
#legal #g-container > article {
  background: none;
}

#legal h1,
#legal #g-container h2,
#legal #g-container h3,
#legal_form form > span {
  font-family: "Barlow", "Segoe UI", "SegoeUI", sans-serif;
}

#legal h1 {
  color: white;
  font-size: 2rem;
  font-style: 2em;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 37.5em) {
  #legal h1 {
    font-size: 1rem;
  }
}

#legal #g-container h2,
#legal #g-container h3 {
  color: black;
  font-weight: normal;
}
#legal #g-container h2 {
  text-transform: uppercase;
}
#legal #g-container h3 {
  text-align: center;
}
#legal #g-container p:not(:first-child) {
  margin-bottom: 0.625rem;
  margin-top: 0.625rem;
}
#legal #g-container p strong,
#legal #g-container b {
  color: #161718;
}
#legal #g-container ol,
#legal #g-container ul {
  margin: 1em 2em;
}
#legal #g-container hr {
  border-bottom: 0.0625rem solid #cfcfcf;
}
#legal #g-container span {
  background: none;
  color: #1f2023;
  display: block;
  font-size: 1rem;
  padding: 0;
  text-transform: none;
}
#legal #g-container p.legal_instructions {
  padding: 1em;
  background-color: #ffffff66;
  border-radius: 0.1875rem;
}

#legal_header,
#legal_form {
  flex-wrap: wrap;
  justify-content: center;
}

#legal_header {
  align-content: center;
  flex-direction: column;
  padding: 5vw;
  text-align: center;
}
@media (min-width: 60.0625em) {
  #legal_header {
    padding: 3.125rem 5vw;
  }
}
#legal_header *:not(img) {
  flex: 1 1 100%;
}
#legal_header img {
  width: 90%;
  max-width: 436px;
}

#legal #g-container #legal_statement {
  margin-top: 1.875rem;
  margin-bottom: 3.75rem;
}
#legal #g-container #legal_statement p,
#legal #g-container #legal_statement ul,
#legal #g-container #legal_statement ol {
  font-size: 1.5rem;
  margin: 0 auto;
  max-width: 60rem;
  width: 100%;
}
@media (max-width: 37.5em) {
  #legal #g-container #legal_statement p,
#legal #g-container #legal_statement ul,
#legal #g-container #legal_statement ol {
    font-size: 1rem;
  }
}
#legal #g-container #legal_statement li {
  margin-left: 1em;
}
#legal #g-container #legal_statement p:not(:first-child),
#legal #g-container #legal_statement ul,
#legal #g-container #legal_statement ol {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
#legal #g-container #legal_statement ul,
#legal #g-container #legal_statement ol {
  margin-bottom: 2rem;
}

#legal_form {
  align-content: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5rem;
  padding: 2.5rem 5vw;
}
#legal_form .cla-form {
  border-bottom: 0.0625rem solid #cfcfcf;
}
@media (max-width: 37.5em) {
  #legal_form .cla-form {
    width: 100%;
  }
}
#legal_form .cla-form > span {
  font-size: 1em !important;
  margin-bottom: 0.625rem;
  margin-top: 1rem;
}
#legal_form .button-prime,
#legal_form input[type=submit] {
  border-left: none;
  border-right: none;
  border-top: none;
  display: block;
  font-size: 1.875rem;
  line-height: 1em;
  margin: 1.875rem auto 1.125rem;
  padding: 0.5em 0.5em 0.3em;
}
@media (max-width: 37.5em) {
  #legal_form .button-prime,
#legal_form input[type=submit] {
    width: 100%;
  }
}
#legal_form a {
  font-weight: bold;
}
#legal_form a:link,
#legal_form a:visited {
  color: #c20000;
}
#legal_form a:hover {
  color: red;
}
#legal_form #cla-cancel {
  font-size: 1.125rem;
  margin-top: 0.625rem;
  text-align: center;
}
@media (max-width: 37.5em) {
  #legal_form {
    font-size: 1rem;
  }
  #legal_form > a {
    width: 100%;
  }
}

.cla-form_checkbox {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.cla-form_checkbox:not(:last-of-type) {
  margin-bottom: 0.625rem;
}
.cla-form_checkbox input[type=checkbox] {
  flex: 0 0 auto;
  height: 1.5rem;
  width: 1.5rem;
}
@media (max-width: 37.5em) {
  .cla-form_checkbox input[type=checkbox] {
    height: 1.25rem;
    width: 1.25rem;
  }
}
.cla-form_checkbox label {
  flex: 0 1 auto;
  padding: 0 0.6667em;
}
.cla-form_checkbox label a svg {
  width: 0.8em;
  height: auto;
  fill: #666666;
  fill-rule: evenodd;
}
@media (min-width: 37.5625em) {
  .cla-form_checkbox label a {
    cursor: pointer;
  }
  .cla-form_checkbox label a:hover svg {
    fill: red;
  }
}
.cla-form_checkbox div {
  align-items: center;
}
.cla-form_checkbox div::before {
  content: "​";
}

.warning_textbox {
  background-color: #c20000;
  border-radius: 0.1875rem;
  padding: 0.625rem 2.5rem;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 37.5em) {
  .warning_textbox {
    font-size: 0.75rem;
  }
}

#consent-modal {
  background-color: #ededed;
  padding: 0;
}
#consent-modal p {
  margin: 1em 0;
}
#consent-modal p:first-of-type {
  margin-top: 0;
}
#consent-modal p:last-of-type {
  margin-bottom: 0;
}
#consent-modal h1 {
  font-size: 1em;
}

#consent-modal .btnXClose {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
}
#consent-modal .btnXClose svg {
  width: 1em;
  height: auto;
  fill: #1f2023;
  fill-rule: evenodd;
}
@media (min-width: 37.5625em) {
  #consent-modal .btnXClose {
    cursor: pointer;
  }
  #consent-modal .btnXClose:hover svg {
    fill: red;
  }
}

#consent-modal div > div {
  flex: 0 0 auto;
}
#consent-modal div > div:first-of-type {
  background-color: white;
  width: 100%;
  padding: 1vmin 3vmin;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 2em;
}
@media (max-width: 37.5em) {
  #consent-modal div > div:first-of-type {
    font-size: 1.125rem;
  }
}
#consent-modal div > div:not(:first-of-type) {
  padding: 3vmin;
}
#consent-modal div > div:last-of-type {
  padding-top: 0;
  padding-bottom: 3vmin;
}
#consent-modal div > div:not(:first-of-type):not(:last-of-type) {
  overflow-y: auto;
  flex: 0 1 auto;
}

#consent-modal button {
  background: none;
  border: 0.0625rem solid #666666;
  border-radius: 0.1875rem;
  color: #666666;
}
@media (min-width: 37.5625em) {
  #consent-modal button {
    cursor: pointer;
  }
  #consent-modal button:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}

@media (min-width: 1100px) {
  #g-container header.legal_article-title h2 {
    text-align: left;
  }
}

#legal #g-container ul.legal_article-toc {
  padding: 3vw 5vw;
  margin: 0;
  border-bottom: 1px solid #cfcfcf;
}
#legal #g-container ul.legal_article-toc li {
  list-style: none;
  font-size: 1.25rem;
  line-height: 1.2em;
}
#legal #g-container ul.legal_article-toc li:not(last-of-type) {
  margin-bottom: 0.35em;
}
#legal #g-container ul.legal_article-toc a {
  color: #161718;
}
@media (min-width: 37.5625em) {
  #legal #g-container ul.legal_article-toc a {
    cursor: pointer;
  }
  #legal #g-container ul.legal_article-toc a:hover {
    color: red;
  }
}

#g-container article.legal_article {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
  padding: 0 5vw;
  margin-bottom: 5ch;
}
#g-container article.legal_article:first-of-type {
  margin-top: 5ch;
}
#g-container article.legal_article.merge {
  margin-top: -5ch;
}
@media (min-width: 1100px) {
  #g-container article.legal_article {
    gap: 1.25rem;
  }
}
@media (min-width: 1400px) {
  #g-container article.legal_article {
    gap: 2.5rem;
  }
}

.legal_article div {
  margin: 0;
}

.legal_article-header {
  flex-shrink: 0;
  flex-basis: 100%;
  font-weight: bold;
  font-size: 1.2em;
  color: #161718;
}
@media (min-width: 1400px) {
  .legal_article-header {
    flex-basis: 15%;
  }
}

.legal_article-subheader {
  flex-shrink: 0;
  flex-basis: 100%;
  font-size: 1.5em;
  font-size: 1.2em;
  color: #161718;
}
@media (min-width: 1100px) {
  .legal_article-subheader {
    flex-basis: 20%;
    order: 3;
  }
}

.legal_article-copy {
  flex-basis: 58%;
  flex-grow: 1;
}

#legal #g-container ul.legal_article-contacts {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 2ch 2em;
}
@media (max-width: 37.5em) {
  #legal #g-container ul.legal_article-contacts {
    flex-direction: column;
  }
}

ul.legal_article-contacts,
ul.legal_article-contacts li {
  list-style: none;
}
@media (max-width: 37.5em) {
  ul.legal_article-contacts,
ul.legal_article-contacts li {
    flex: 0 0 auto !important;
  }
}

ul.legal_article-contacts li:first-of-type {
  flex: 0 0 15ch;
  font-weight: bold;
}

span.legal_article-anchor {
  position: absolute;
  left: 0;
  top: -100px;
}

#legal_lang {
  padding-left: 5vw;
  padding-right: 5vw;
}
#legal_lang a:not(:last-of-type)::after {
  content: " / ";
  opacity: 0.4;
}
#legal_lang a:link,
#legal_lang a:visited {
  color: black;
}
#legal_lang a:hover,
#legal_lang a:active {
  color: red;
}
#legal_lang a[active] {
  color: red !important;
}

/*appended CFX-425 211223 */
#legal #g-container article > div {
  margin: 0;
}

#legal #g-container .legal_article-copy li {
  list-style: disc;
}

#legal #g-container * {
  word-break: break-word;
}

#legal #g-container .legal_article-header h3 {
  all: inherit;
  text-align: left;
}

#legal #g-container .legal_article-subheader i {
  all: inherit;
}

#legal #g-container .legal_article-copy h4 {
  all: inherit;
  font-weight: bold;
  color: #161718;
  text-align: left;
  margin: 0em 0em 1em 0em;
}

#legal #g-container .legal-article-table {
  margin: 1em 2em;
  font-size: 1rem;
}

#legal #g-container .legal-article-table th {
  padding: 0 0 0.8em 0;
  text-transform: unset;
  font-size: unset;
  text-align: left;
  vertical-align: top;
  font-weight: bold;
  color: inherit;
  width: 130px;
  border: 0px solid;
}

#legal #g-container .legal-article-table td {
  padding: 0 0 0.8em 0;
  vertical-align: top;
  border: 0px solid;
}

@media (max-width: 37.5em) {
  #legal #g-container .legal-article-table th {
    display: block;
    width: 100%;
    padding: 0;
  }

  #legal #g-container .legal-article-table td {
    display: block;
  }
}
#legal #tou {
  padding: 3vw 5vw;
}

#legal #tou h3 {
  font-size: 1.2em;
  text-align: left;
  font-weight: bold;
}

#legal #tou ol {
  font-size: 1em;
  margin: 0 0 0 2em;
}

#legal #tou li {
  all: revert;
  margin: 0.5em 0;
}

/*appended CFX-425 220104 */
#legal #g-container ol.legal_article-toc {
  padding: revert;
  padding-bottom: 3vw;
  margin: 0 5vw;
  border-bottom: 1px solid #cfcfcf;
  color: #161718;
}

#legal #g-container ol.legal_article-toc a {
  color: #161718;
}

#legal #g-container ol.legal_article-toc li {
  list-style: unset;
  font-size: 1.25rem;
  margin-bottom: 0.35em;
}

#legal #g-container article.pp-kr {
  padding: 1vw 5vw 1.5vw 5vw;
}

#legal #g-container article.pp-kr h3 {
  margin: revert;
  text-align: left;
  font-weight: bold;
  line-height: 1.5em;
  font-size: 1.2em;
}

#legal #g-container article.pp-kr p {
  margin: 1em 0em;
}

#legal #g-container article.pp-kr ul {
  margin: 0.5em 0em 0.5em 2em;
  font-size: 1em;
}

#legal #g-container article.pp-kr li {
  list-style-type: square;
}

#legal #g-container article.pp-kr .legal_article_anchor {
  padding-bottom: 0.5vw;
  margin: 0;
}

/*appended CFX-435 211230 */
#g-container article.imprint_article {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0;
  margin: 3.75rem 0;
}
#g-container article.imprint_article:first-of-type {
  margin-top: 0;
}
#g-container article.imprint_article:last-of-type {
  margin-bottom: 0;
}
#g-container article.imprint_article h3, #g-container article.imprint_article p {
  text-align: left !important;
  padding: 0;
  margin: 0;
}
@media (max-width: 90em) {
  #g-container article.imprint_article {
    padding: 0 5vmin;
    margin: 5vmin 0;
  }
}

.legal_article-padding {
  padding: 1vw 5vw 0vw 5vw;
}

body {
  background: none;
  color: #666666;
}

#index-promo h1 > span,
#index-modes h1 > span,
#battlepass-promo h1 > span,
#battlepass-how-it-works h1 > span,
#campaign-promo-2 h2 > span,
#modes-guide h1 > span {
  color: red;
}

#index-promo h1::before,
#index-promo h1::after,
#index-modes h1::before,
#index-modes h1::after,
#index-story h1::before,
#membership-home-video h1::before,
#index-story h1::after,
#membership-home-video h1::after,
#index-social h1::before,
#index-social h1::after,
#index-newsletter h1::before,
#index-newsletter h1::after,
#battlepass-promo h1::before,
#battlepass-promo h1::after,
#battlepass-how-it-works h1::before,
#battlepass-how-it-works h1::after,
#modes-guide h1::before,
#modes-guide h1::after,
#customization-promo h1::before,
#customization-promo h1::after,
#membership-home-benefits h1::before,
#membership-home-benefits h1::after,
#membership-home-faq h1::before,
#membership-home-faq h1::after,
#cip-sub-text h1::before,
#cip-sub-text h1::after {
  color: #666666;
  display: inline;
  font-size: 0.25em;
  vertical-align: middle;
}
#index-promo h1::before,
#index-modes h1::before,
#index-story h1::before,
#membership-home-video h1::before,
#index-social h1::before,
#index-newsletter h1::before,
#battlepass-promo h1::before,
#battlepass-how-it-works h1::before,
#modes-guide h1::before,
#customization-promo h1::before,
#membership-home-benefits h1::before,
#membership-home-faq h1::before,
#cip-sub-text h1::before {
  content: "[ ";
}
#index-promo h1::after,
#index-modes h1::after,
#index-story h1::after,
#membership-home-video h1::after,
#index-social h1::after,
#index-newsletter h1::after,
#battlepass-promo h1::after,
#battlepass-how-it-works h1::after,
#modes-guide h1::after,
#customization-promo h1::after,
#membership-home-benefits h1::after,
#membership-home-faq h1::after,
#cip-sub-text h1::after {
  content: " ]";
}

#modes-content .modes-content h2 > span::before, #modes-content .modes-content h2 > span::after,
#campaign-promo-2 h2::before,
#campaign-promo-2 h2::after,
.bp-viewer-name h4::before,
.bp-viewer-name h4::after,
.modes-shelf-copy h3::before,
.modes-shelf-copy h3::after,
#mhd-tiers h2::before,
#mhd-tiers h2::after,
#mhd-steps h2::before,
#mhd-steps h2::after,
.mhb-card h2::before,
.mhb-card h2::after,
.mhb-table-header h2::before,
.mhb-table-header h2::after,
nav.cfx-nav-main button::before,
nav.cfx-nav-main button::after {
  display: inline;
  font-size: 1em;
}
#modes-content .modes-content h2 > span::before,
#campaign-promo-2 h2::before,
.bp-viewer-name h4::before,
.modes-shelf-copy h3::before,
#mhd-tiers h2::before,
#mhd-steps h2::before,
.mhb-card h2::before,
.mhb-table-header h2::before,
nav.cfx-nav-main button::before {
  content: "[ ";
}
#modes-content .modes-content h2 > span::after,
#campaign-promo-2 h2::after,
.bp-viewer-name h4::after,
.modes-shelf-copy h3::after,
#mhd-tiers h2::after,
#mhd-steps h2::after,
.mhb-card h2::after,
.mhb-table-header h2::after,
nav.cfx-nav-main button::after {
  content: " ]";
}

#modes-content .modes-content h2 > span::after, #modes-content .modes-content h2 > span::before {
  color: #161718;
}

#campaign-promo-2 h2::after, #campaign-promo-2 h2::before {
  color: #666666;
}

.modes-shelf-copy h3::after, .modes-shelf-copy h3::before,
#mhd-tiers h2::after,
#mhd-tiers h2::before,
#mhd-steps h2::after,
#mhd-steps h2::before {
  color: #cfcfcf;
}

.bp-viewer-name h3 {
  color: #cfcfcf;
}

.bp-viewer-name h4 {
  color: red;
  text-transform: uppercase;
}
.bp-viewer-name h4::after, .bp-viewer-name h4::before {
  color: #cfcfcf;
}

.bp-viewer-name h3::after,
.bp-thumb-name h3::after {
  content: "_";
}

.cfx-footer-main {
  background: none;
  background-color: black;
}

[id*=cfx-modal] {
  background-color: white;
  color: #1f2023;
}
[id*=cfx-modal] h2 {
  font-size: 3rem;
  line-height: 1em;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
[id*=cfx-modal] div:first-of-type {
  margin-bottom: 0.625rem;
}
[id*=cfx-modal] a:first-child button:not(:hover) {
  background-color: #c20000;
  color: white;
}
[id*=cfx-modal] a:last-child button:not(:hover) {
  background-color: #ededed;
  color: black;
}
[id*=cfx-modal] button {
  margin-top: 0.625rem;
}
@media (min-width: 37.5625em) {
  [id*=cfx-modal] button {
    cursor: pointer;
  }
  [id*=cfx-modal] button:hover {
    background-color: red;
    color: white;
  }
}
[id*=cfx-modal] form {
  flex-wrap: nowrap;
}
[id*=cfx-modal] form input[type=checkbox] {
  height: 1.875rem;
  width: 1.875rem;
}
[id*=cfx-modal] form label {
  flex: 1 1 auto;
  padding-left: 0.625rem;
}
[id*=cfx-modal] ul {
  margin-left: 1.125rem;
}
@media (max-width: 37.5em) {
  [id*=cfx-modal] div:first-of-type {
    gap: 0.625rem;
  }
  [id*=cfx-modal] a:first-child button:not(:hover) {
    background-color: red;
  }
  [id*=cfx-modal] h2 {
    font-size: 1.875rem;
  }
  [id*=cfx-modal] p, [id*=cfx-modal] label, [id*=cfx-modal] ul, [id*=cfx-modal] li {
    font-size: 0.75rem;
  }
}

#page-hero.page-hero-home .frame__content {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-herobottom-home.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #page-hero.page-hero-home .frame__content {
    background-size: auto;
  }
}

#index-promo {
  background-color: white;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #index-promo {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #index-promo {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite-600.jpg");
    background-position: cover;
  }
}

.promo-sections .promo-img {
  position: relative;
}

.promo-sections .promo-img::before {
  border-left: 0.125rem solid red;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 1px;
}
@media (max-width: 37.5em) {
  .promo-sections .promo-img::before {
    display: none;
  }
}

@media (max-width: 37.5em) {
  .promo-sections .promo-img::after {
    display: none;
  }
}

.promo-sections article:nth-of-type(odd) .promo-img::before {
  right: calc( -1 * 1.25rem);
}

.promo-sections article:nth-of-type(even) .promo-img::before {
  left: calc( -1 * 1.25rem);
}

.promo-sections article:nth-of-type(odd) .promo-img::after {
  left: calc( -1 * 1.25rem);
  bottom: calc( -1 * 1.25rem);
}

.promo-sections article:nth-of-type(even) .promo-img::after {
  right: calc( -1 * 1.25rem);
  top: calc( -1 * 1.25rem);
}

#index-modes {
  background-color: #cfcfcf;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexgrey.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #index-modes {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #index-modes {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexgrey-600.jpg");
    background-size: cover;
  }
}
#index-modes p {
  color: #161718;
}
@media (min-width: 37.5625em) {
  #index-modes .modes-content {
    cursor: pointer;
  }
  #index-modes .modes-content:hover {
    background-color: rgba(255, 255, 255, 0.33) !important;
  }
}
@media (min-width: 37.5625em) {
  #index-modes .modes-content h2::after {
    background-color: #c20000;
    content: "";
    clip-path: polygon(0 0, 10% 0, 100% 100%, 0% 100%);
    display: block;
    height: 102%;
    position: absolute;
    right: calc( -1 * 1.25rem + 0.0625rem );
    top: 0;
    width: 1.25rem;
  }
}

#index-modes .modes-image::after {
  bottom: 0;
  color: red;
  content: "////";
  font-size: 1.25rem;
  line-height: 1;
  position: absolute;
  right: 0;
}

@media (max-width: 37.5em) {
  #index-modes .modes-image::after,
#index-modes .modes-copy::after {
    display: none;
  }
}

#index-news {
  background-color: white;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-pagenews-top.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #index-news {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #index-news {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-pagenews-top.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite-600.jpg");
    background-size: auto, cover;
  }
}

#index-story, #membership-home-video {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-campdark.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #index-story, #membership-home-video {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #index-story, #membership-home-video {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-campdark-600.jpg");
    background-size: cover;
  }
}
#index-story h1, #membership-home-video h1 {
  color: white;
}
#index-story p, #membership-home-video p {
  color: #ededed;
}

#index-social {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-social-top.jpg"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-newsletter-bottom.jpg");
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #index-social {
    background-size: auto;
  }
}

.header-cta button,
button.button-prime,
input[type=submit].button-prime {
  transition: color 100ms, border-color 100ms, background-color 100ms;
  background-color: red;
  border-color: red;
  color: white;
  padding-bottom: 0.3em;
  text-transform: uppercase;
  filter: drop-shadow(0 3px 0 white);
  font-size: 1.5rem;
}
@media (min-width: 37.5625em) {
  .header-cta button,
button.button-prime,
input[type=submit].button-prime {
    cursor: pointer;
  }
  .header-cta button:hover,
button.button-prime:hover,
input[type=submit].button-prime:hover {
    background-color: white;
    border-color: white;
    color: red;
    filter: drop-shadow(0 0 25px rgba(255, 0, 0, 0.658824));
  }
}

button.button-super {
  transition: color 100ms, border-color 100ms, background-color 100ms;
  background-color: red;
  border: none;
  color: white;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 3.75rem;
  line-height: 0.8;
  max-width: 43.75rem;
  padding-bottom: 0.4em;
  width: 100%;
}
@media (min-width: 37.5625em) {
  button.button-super {
    cursor: pointer;
  }
  button.button-super:hover {
    background-color: white !important;
    color: red;
  }
}
@media (max-width: 37.5em) {
  button.button-super {
    font-size: 1.5rem;
  }
}

nav.cfx-nav-main button {
  transition: color 100ms, border-color 100ms, background-color 100ms;
  background: none;
  border: none;
  color: #ededed;
  font-size: 1rem;
  font-weight: 700;
  height: 3.125rem;
  outline: none;
  padding: 0.1875rem;
  text-transform: uppercase;
}
nav.cfx-nav-main button::after, nav.cfx-nav-main button::before {
  color: #666666;
}
nav.cfx-nav-main button:hover::after, nav.cfx-nav-main button:hover::before, nav.cfx-nav-main button.nav-active::after, nav.cfx-nav-main button.nav-active::before {
  color: red;
}

.nav__button,
.menu-bar-dropdown button {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
}
.nav__button::after,
.menu-bar-dropdown button::after {
  margin-left: 0.1875rem;
}
.nav__button::before,
.menu-bar-dropdown button::before {
  margin-right: 0.1875rem;
}

.xbox-linking::after, .cpn-xboxlink::after, .xbox-linking::before, .cpn-xboxlink::before {
  vertical-align: inherit;
}

.xbox-linking span, .cpn-xboxlink span {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
}
.modal button {
  background-color: #1f2023;
  border: none;
  color: #ededed;
  width: 100%;
}

.news-link,
.social-link,
.modes-link {
  z-index: 1;
}
.news-link.external-link::after,
.social-link.external-link::after,
.modes-link.external-link::after {
  content: "";
  filter: drop-shadow(0 0 15px #00000083);
  height: 22px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
}

.modes-shelf-ui a button {
  transition: width 250ms, height 250ms;
}

#index-story button:not(:hover), #membership-home-video button:not(:hover),
.news-filter-desktop button:not(:hover),
.news-filter-mobile button:not(:hover),
.msp-emails button:not(:hover),
.cpn-codes button:not(:hover),
.msp-platform-ui button:not(:hover) {
  border-color: #cfcfcf;
  color: #cfcfcf;
}

.news-filter-desktop button,
.news-filter-mobile button {
  text-transform: uppercase;
}

.nav-active button:not(:hover) {
  border-color: red;
  color: red;
}

@media (min-width: 85.375em) {
  #index-story-learnmore button,
#button-more-news button {
    font-size: 1.5rem;
  }
}

#patchnotes-nav button:not(:hover),
#patchnotes-nav select,
#patchnotes-nav-modal select {
  border: 0.0625rem solid #666666;
  border-radius: 0.1875rem;
  color: #666666;
  border: 0.0625rem solid #cfcfcf;
  margin: 0;
  padding: 0.5em;
  width: 100%;
}
@media (max-width: 37.5em) {
  #patchnotes-nav button:not(:hover),
#patchnotes-nav select,
#patchnotes-nav-modal select {
    width: 99%;
  }
}
@media (min-width: 37.5625em) {
  #patchnotes-nav button:not(:hover),
#patchnotes-nav select,
#patchnotes-nav-modal select {
    cursor: pointer;
  }
  #patchnotes-nav button:not(:hover):hover,
#patchnotes-nav select:hover,
#patchnotes-nav-modal select:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}

#patchnotes-nav option,
#patchnotes-nav-modal option {
  background-color: white;
  color: #1f2023;
}

#patchnotes-nav button {
  width: 100%;
}

#patchnotes-nav-modal button {
  background-color: #ededed;
  color: #161718;
}

#patchnotes-nav-mobile button {
  border-color: #cfcfcf;
  color: #cfcfcf;
  text-transform: uppercase;
}
@media (min-width: 37.5625em) {
  #patchnotes-nav-mobile button {
    cursor: pointer;
  }
  #patchnotes-nav-mobile button:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}

.s-container button:not(:hover) {
  border-color: #ededed;
  color: white;
}

#page-hero.page-campaign .frame__content {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-herobottom-campaign.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #page-hero.page-campaign .frame__content {
    background-size: auto;
  }
}

#campaign-promo-1 {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-campaign-promo1.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #ededed;
}
@media (max-width: 120em) {
  #campaign-promo-1 {
    background-size: auto;
  }
}

#campaign-promo-2 {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexdark.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #campaign-promo-2 {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #campaign-promo-2 {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexdark-600.jpg");
    background-size: cover;
  }
}

#campaign-story {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-xboxpromo.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-campother.jpg");
  background-position: bottom center, top center;
  background-repeat: no-repeat;
  background-size: 100%, cover;
  color: #ededed;
}
@media (max-width: 120em) {
  #campaign-story {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #campaign-story {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-xboxpromo.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-campother-600.png");
    background-size: auto, cover;
  }
}
#campaign-story h1 {
  color: white;
}
#campaign-story p {
  color: #ededed;
}

#page-hero.page-multiplayer .frame__content {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-herobottom-multiplayer.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #page-hero.page-multiplayer .frame__content {
    background-size: auto;
  }
}

#multiplayer-promo-1 {
  background-color: white;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-multiplayer-promo1.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #multiplayer-promo-1 {
    background-size: auto;
  }
}

#modes-guide {
  background-color: #ededed;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-tiled-grey.png");
  background-position: top center;
  background-repeat: repeat;
  background-size: auto;
}

.modes-guide {
  background-color: white;
}

.modes-shelf-image::after {
  content: "";
}

#customization-promo {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-herobottom-home.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-customization.jpg");
  background-position: bottom center, top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #customization-promo {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #customization-promo {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-herobottom-home.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-customization-600.jpg");
    background-size: auto, cover;
  }
}
#customization-promo h1 {
  color: white;
}
#customization-promo p {
  color: #ededed;
}

#customization-promo .slick-fs-container p {
  margin: 1.25rem 0;
}

#battlepass-promo {
  background-color: #cfcfcf;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite.jpg");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100%;
}
@media (max-width: 120em) {
  #battlepass-promo {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #battlepass-promo {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-hexwhite-600.jpg");
    background-size: cover;
  }
}

#battlepass-how-it-works {
  background-color: #ededed;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-xboxpromo.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-howitworks.png");
  background-position: bottom center, top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #battlepass-how-it-works {
    background-size: auto;
  }
}

#battlepass-viewer {
  background-color: rgba(237, 237, 237, 0.25);
  background-position: bottom right;
  border: 0.0625rem solid #cfcfcf;
  border-bottom: 0.1875rem solid #666666;
}

.bp-thumb-image {
  background-color: #ededed;
  border-radius: 0.1875rem;
}

@media (max-width: 37.5em) {
  .bp-thumb-image,
.bp-thumb-name {
    background: none;
  }
}

#g-container > header {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-newsheader.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #g-container > header {
    background-size: auto;
  }
}

#g-container nav::after {
  border-left: 40px solid white;
  bottom: -10px;
  left: 0;
}

#g-container > article,
#patchnotes-container {
  background-color: white;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-bg-tiled-white.png");
  background-position: top center;
  background-repeat: repeat;
  background-size: auto;
}

#patchnotes-nav {
  background-color: white;
}

#patchnotes-contents {
  background-color: rgba(255, 255, 255, 0.6);
}

#news-filter-modal h3 {
  color: white;
  font-size: 2.25rem;
  text-align: center;
  text-transform: uppercase;
}
#news-filter-modal div {
  margin-top: 0.625rem;
}
#news-filter-modal a {
  flex: 1 1 100%;
  margin-bottom: 0.625rem;
}
#news-filter-modal a[target=_self] {
  border-top: 0.0625rem solid #666666;
  padding-top: 0.625rem;
}

#patchnotes-nav-modal {
  background-color: white;
}

#patchnotes-nav-modal div {
  margin-bottom: 1.25rem;
}

#patchnotes-nav-modal h2 {
  font-size: 1em;
}

#patchnotes-nav-modal a,
#patchnotes-nav-modal select {
  margin-top: 0;
}

#email-verification {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-email-verification.jpg");
  background-size: 100%;
}

#email-successful {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-email-successful.jpg");
  background-size: 100%;
}

#error-page {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-error.jpg");
  background-size: 100%;
}

#xbl-page {
  background-color: #161718;
}

#xbl-page__top {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-xbl.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #xbl-page__top {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #xbl-page__top {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-xbl-600.jpg");
    background-size: cover;
  }
}

#legal_header {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-legal-header.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #legal_header {
    background-size: auto;
  }
}

#membership-signup-page {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup.jpg"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup-tile.jpg");
  background-position: top center;
  background-repeat: no-repeat, repeat-y;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-signup-page {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #membership-signup-page {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup-600.jpg"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup-tile-600.jpg");
    background-size: contain;
  }
}

#membership-home-header {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-intro.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-home-header {
    background-size: contain;
  }
}
@media (max-width: 37.5em) {
  #membership-home-header {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-intro-600.jpg");
  }
}

#membership-home-video {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-top.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-video-bottom.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-video.jpg");
  background-position: top center, bottom center, top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-home-video {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #membership-home-video {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-video-bottom.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-video-600.jpg");
    background-position: bottom center, top center;
    background-size: auto, cover;
  }
}

.mhh-calendar-box::after,
#mhd-tiers > div::after {
  bottom: -5px;
  height: 5px;
  left: 0;
  position: absolute;
  width: 100%;
}
@media (min-width: 48em) {
  .mhh-calendar-box::after,
#mhd-tiers > div::after {
    content: "";
    display: block;
  }
}

#membership-home-details {
  background-color: white;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-bottom.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-home-details {
    background-size: auto;
  }
}

#membership-home-benefits {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-bottom.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-benefits.jpg");
  background-position: bottom center, top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-home-benefits {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #membership-home-benefits {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-benefits-600.jpg");
    background-position: top center;
    background-size: cover;
  }
}

.mhb-card::before,
.mhb-card::after {
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  left: 0;
  width: 100%;
}

.mhb-card::before {
  top: 0;
}

.mhb-card::after {
  bottom: 0;
  transform: rotate(180deg);
}

*[mhb-rookie] img[mhb-icon] {
  filter: drop-shadow(0 0 10px #ff0000);
}
*[mhb-rookie] h2::after, *[mhb-rookie] h2::before {
  color: #ff0000;
}

*[mhb-expert] img[mhb-icon] {
  filter: drop-shadow(0 0 10px #00aeff);
}
*[mhb-expert] h2::after, *[mhb-expert] h2::before {
  color: #00aeff;
}

*[mhb-master] img[mhb-icon] {
  filter: drop-shadow(0 0 10px #ffc000);
}
*[mhb-master] h2::after, *[mhb-master] h2::before {
  color: #ffc000;
}

#membership-home-faq {
  background-color: #161718;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-top.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-faq.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #membership-home-faq {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #membership-home-faq {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-top.png"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-faq-600.jpg");
    background-size: auto cover;
  }
}

#mhf-cta {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-edge-faq-bottom.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #mhf-cta {
    background-size: auto;
  }
}

#influencers-bg {
  background-color: #161718;
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-header-600.jpg"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-bottom.jpg");
  background-size: cover auto;
}
@media (min-width: 37.5625em) {
  #influencers-bg {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-header.jpg"), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-bottom.jpg");
    background-size: auto;
  }
}

#influencers-bg-sub {
  background-color: transparent;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-sub-600.png");
  background-size: cover;
}
@media (min-width: 37.5625em) {
  #influencers-bg-sub {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-sub.png");
    background-size: auto;
  }
}

#influencers-body {
  background-color: transparent;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cip-sub-ext.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 37.5625em) {
  #influencers-body {
    background-size: auto;
  }
}

#coupon-page {
  background-color: #ededed;
}

#coupon-page__top {
  background-color: #161718;
  background-image: linear-gradient(0deg, #161718 0%, rgba(22, 23, 24, 0) 100%), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cpn.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #coupon-page__top {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #coupon-page__top {
    background-image: linear-gradient(0deg, #161718 0%, rgba(22, 23, 24, 0) 100%), url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cpn-600.jpg");
    background-size: auto, cover;
  }
}

#coupon-page__bottom {
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/deco-pagenews-top.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}
@media (max-width: 120em) {
  #coupon-page__bottom {
    background-size: auto;
  }
}

.cpn-codes button:not(:hover) {
  border-color: red;
  color: white;
}

[class*=cpn-controller] button {
  text-transform: uppercase;
}

[class*=cpn-controller] button:not(:hover) {
  background-color: white;
  border-color: white;
  color: #161718;
}
@media (min-width: 37.5625em) {
  [class*=cpn-controller] button:not(:hover) {
    cursor: pointer;
  }
  [class*=cpn-controller] button:not(:hover):hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}

#cpn-nav {
  justify-content: center;
}

.cpn-nav__search form {
  gap: 0.5em;
}
.cpn-nav__search form select,
.cpn-nav__search form option {
  color: #666666;
  width: 7.5rem;
}
@media (max-width: 37.5em) {
  .cpn-nav__search form select,
.cpn-nav__search form option {
    flex-grow: 1;
    flex-shrink: 1;
  }
}
.cpn-nav__search form select {
  border: 0.0625rem solid #666666;
  border-radius: 0.1875rem;
  color: #666666;
  background: none;
  padding: 0.5em;
}
@media (max-width: 37.5em) {
  .cpn-nav__search form select {
    width: 99%;
  }
}
@media (min-width: 37.5625em) {
  .cpn-nav__search form select {
    cursor: pointer;
  }
  .cpn-nav__search form select:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}
.cpn-nav__search form option {
  background-color: white;
}

.cpn-nav__search input[type=submit] {
  border: 0.0625rem solid #666666;
  border-radius: 0.1875rem;
  color: #666666;
  text-transform: uppercase;
  padding: 0.5em;
}
@media (max-width: 37.5em) {
  .cpn-nav__search input[type=submit] {
    width: 99%;
  }
}
@media (min-width: 37.5625em) {
  .cpn-nav__search input[type=submit] {
    cursor: pointer;
  }
  .cpn-nav__search input[type=submit]:hover {
    background-color: red;
    border: 0.0625rem solid red;
    color: white;
  }
}

.modal a {
  display: block;
  width: 100%;
}

nav.cfx-nav-main button .button-tag,
.modal .button-tag {
  background-color: #c20000;
  padding: 0.2em 0.375em;
  border-radius: 0.1875rem;
  margin-left: 0.8ch;
}

.modal .button-tag {
  padding: 0.1em 0.275em;
}

@media (min-width: 37.5625em) {
  nav.cfx-nav-main button,
.modal {
    cursor: pointer;
  }
  nav.cfx-nav-main button:hover .button-tag,
.modal:hover .button-tag {
    background-color: white;
    color: red;
  }
}

/*appended (no jira) 211229 */
#agegate-page {
  background-color: #1f2023;
  background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup-tile.jpg");
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100%;
  min-height: 100vh;
}
@media (max-width: 120em) {
  #agegate-page {
    background-size: auto;
  }
}
@media (max-width: 37.5em) {
  #agegate-page {
    background-image: url("https://crossfirex.akamaized.net/cfx/templates/assets/images/core/bg-cmp-signup-tile-600.jpg");
    background-size: contain;
  }
}
#agegate-page section {
  height: 90vh;
  width: 90vw;
  margin: 5vh auto;
  background-color: #00000080;
  border: 1px solid #c20000;
  border-radius: 3px;
  position: relative;
}

#agegate-page section::after {
  bottom: 0;
  color: red;
  content: "////";
  font-size: 1.25rem;
  line-height: 1;
  position: absolute;
  right: 0;
}

#agegate-page,
#agegate-page section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#agt-header {
  text-align: center;
}
#agt-header img {
  height: auto;
  max-width: 25.75rem;
  width: 80%;
}
@media (max-width: 37.5em) {
  #agt-header img {
    width: 100%;
  }
  #agt-header h2 {
    font-size: 1.125rem;
  }
}

.agt-forms {
  margin: 1.25rem auto;
  max-width: 37.5rem;
}
.agt-forms > * + * {
  margin: 10px auto 0;
}
.agt-forms p {
  text-align: center;
}
.agt-forms p.agt-error {
  color: red;
  font-weight: bold;
}
@media (max-width: 37.5em) {
  .agt-forms p {
    font-size: 0.6875rem;
  }
}

.agt-check {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.625rem;
}

.agt-forms select.agt-month,
.agt-forms input.agt-day,
.agt-forms input.agt-year {
  flex: 1 1 33%;
  background-color: #161718;
  border: 1px solid #666666;
  border-radius: 3px;
  color: #cfcfcf;
  font-size: 20px;
  flex: 0 1 auto;
  outline: none;
  padding: 0.5em;
  width: 100%;
  text-align: center;
}
.agt-forms select.agt-month::placeholder,
.agt-forms input.agt-day::placeholder,
.agt-forms input.agt-year::placeholder {
  color: #cfcfcf;
}
.agt-forms select.agt-month:focus,
.agt-forms input.agt-day:focus,
.agt-forms input.agt-year:focus {
  color: white !important;
  border-color: white;
}
.agt-forms select.agt-month:valid,
.agt-forms input.agt-day:valid,
.agt-forms input.agt-year:valid {
  color: white;
}

.agt-forms input::-webkit-outer-spin-button,
.agt-forms input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.agt-forms input[type=number] {
  -moz-appearance: textfield;
}

#agt-submit {
  border-left: none;
  border-right: none;
  border-top: none;
  display: block;
  font-size: 1.5rem;
  line-height: 1em;
  margin: 1.25rem auto;
  padding: 0.5em;
}
@media (max-width: 37.5em) {
  #agt-submit {
    width: 100%;
  }
}

@media (min-width: 37.5625em) {
  #stove-m-gnb {
    display: none;
  }

  .stoveGnb-spacer {
    display: inherit;
    height: 68px;
  }

  #stoveGnb {
    display: inherit;
  }

  .stoveGnb-spacer {
    display: none;
  }
}
@media (max-width: 37.5em) {
  #stove-m-gnb {
    display: inherit;
    position: sticky;
    top: 0px;
    transition: transform 250ms ease-in-out;
    z-index: 9999;
  }

  .cfx-nav-main {
    top: 41px;
  }

  #stoveGnb {
    display: none;
  }
}

/*# sourceMappingURL=core_output.css.map */