/* ======== Page Hero section ======== */
.pageHero .c-heading-1L, .pageHero .c-subheading-2  {
    text-shadow: 0 4px 25px #000, 4px 4px 80px #000;
}

.pageHero .c-heading-1L .heroCopyBiggest {
  color: #9bf00b;
}

.pageHero .m-hero-item.f-x-center>div>div {
  min-width: 60%;
}

@media screen and (min-width: 1084px) and (max-width: 1779px) {
    .pageHero .m-hero-item .c-heading-1L {
        font-size: 86px;
        line-height: 82px;
    }
}

@media only screen and (min-width: 1084px) {
.pageHero .high-contrast {
width: 1000px;
max-width: 1000px;
}
.pageHero .high-contrast .c-subheading-2 {
  max-width: 60%;
  margin: auto;
}
}

.pageHero .c-heading-1L .heroCopyPrepareFor {
  font-size: 62px;
  line-height: 62px;
}
@media only screen and (min-width: 946px) and (max-width: 1083px) {
.pageHero .high-contrast .c-heading-1L {
  font-size: 66px;
  line-height: 66px;
}
.pageHero .c-heading-1L .heroCopyPrepareFor {
  font-size: 46px;
  line-height: 46px;
}
}
@media only screen and (max-width: 945px) {
.pageHero .high-contrast .c-heading-1L {
  font-size: 46px;
  line-height: 46px;
}
.pageHero .c-heading-1L .heroCopyPrepareFor {
  font-size: 34px;
  line-height: 34px;
}
}

/*************************
COUNTDOWN TIMER
*************************/

#countdown-timer1, #countdown-timer2, #countdown-timer3 {
    display: flex;
    width: 350px;
    max-width: 100%;
    margin: 0 auto;
}

.countdown-timer_item {
    flex: 1;
    color: #9bf00b;
    font-size: 36px;
    font-weight: 700;
    text-shadow: 0 0 0px #9bf00b, 0 0 30px #9bf00b;
}
@media only screen and (min-width: 1084px) and (max-width: 1399px) {
.countdown-timer_item {
    font-size: 28px;
    font-weight: 600;
}
.ribbonBanner .m-content-placement-item .m-area-heading > div {
  padding: 0 12px;
}
}

.countdown-timer_item span.c-heading-1 {
    padding: 0;
font-size: 56px !important;
line-height: 96px !important;
font-weight: 700 !important;
}

.ribbonBanner .countdown-timer_item.countdown-timer_separators {
    padding-top: 24px !important;
    font-size: 56px !important;
    font-weight:1000 !important;
}

.countdown-timer_item .countdown-timer_item__caption {
line-height: 1px;
    color: white;
    text-shadow: 2px 2px 15px white;
}

.countdown-timer_item .countdown-timer_item__caption .c-paragraph-4 {
    font-weight: 700;
}

.f-hidden {
    opacity: 0;
}

@keyframes fadeInOut {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

.timer_flash {
  animation: fadeInOut 3s infinite;
}

#timer-announcement {
    visibility: hidden;
    height: 0;
    width: 0;
}

/* ======== Countdown Content Placement 3up Content section======== */
.ribbonBanner .m-content-placement-item > picture {
overflow: visible;
padding-bottom: 100%;
}
.ribbonBanner .m-content-placement-item > div {
  margin-top:24px;
}
.ribbonBanner .m-area-heading {
  padding: 0 !important;
}

.ribbonBanner .countdownCopyCard {
  position: relative;
  top: 50px;
  padding-bottom: 48px;
}
@media screen and (max-width: 539px) {
.ribbonBanner .countdownCopyCard {
  top: 25px;
}
}

/* ======== Countdown Content Placement 3up Content section stacking at 1084 instead of 768======== */
@media screen and (max-width: 1083px) {
    .ribbonBanner [data-grid~=stack-2]>[data-grid] {
        display: block;
        float: none;
        padding-bottom: inherit;
        padding-left: 0;
        padding-right: 0;
        padding-top: inherit;
        width: 100%;
    }
}

/* ======== XGP section======== */
.XGPbgIMG {
  background-image: url('https://cms-assets.xboxservices.com/assets/d6/c8/d6c8329b-970d-4614-b689-140b44773eb9.jpg?n=Biggest-Games_XGP-Background_1084_1920x1150.jpg');
  background-repeat: no-repeat;
background-position: center;
  background-size: auto;
}
@media only screen and (max-width: 1084px) {
.XGPbgIMG {
 background-image: url('https://cms-assets.xboxservices.com/assets/cf/62/cf62f692-e7d1-4368-b64e-63c1cb922a4e.jpg?n=Biggest-Games_XGP-Background_768_1083x980.jpg');
  background-size: cover;
}
}
@media only screen and (max-width: 768px) {
.XGPbgIMG {
 background-image: url('https://cms-assets.xboxservices.com/assets/7a/ad/7aadba33-ea6a-405b-8737-0c4c6433a2ae.jpg?n=Biggest-Games_XGP-Background_0_767x980.jpg');
  background-size: cover;
}
}

.XGPbgIMG .m-banner .c-image {
  max-height: 50px;
}

.XGPbgIMG .m-banner .c-call-to-action {
  margin-top: 24px;
}
.XGPbgIMG  .m-banner .c-call-to-action:focus:not(.x-hidden-focus) {
    background: #9bf00b;
    color: #054b16;
}
@media only screen and (min-width: 1800px) {
.XGPbgIMG .c-flipper {
visibility: hidden;
}
}


/* ======== Badges ======== */
.cardFlip .c-badge {
  background-color: #e6e6e6 !important;
  color: #505050 !important;
}
.availableNowBadge, .cardFlip .availableNowBadge {
  background-color: #107c10 !important;
  color: white !important;
}


/* ======== Card Grid ======== */
.cardFlip {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

/* Card flip styles */
.cardFlip .card {
  perspective: 5000px;
  cursor: pointer;
}

/* Screen reader and keyboard navigation */
.cardFlip .card span.card-flip-focus {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cardFlip .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transform-style: preserve-3d;
  /* Safari fix */
  -webkit-transform-style: preserve-3d;
}

@media (min-width: 769px) {
  /* Card flip effect only for screens wider than 768px */
  .cardFlip .card:hover .card-inner,
  .cardFlip .card:has(.card-flip-focus:focus) .card-inner,
  .cardFlip .card:has(.c-call-to-action:focus) .card-inner {
    transform: rotateY(180deg);
  }

  /* Disable pointer events on the front when the card is flipped */
  .cardFlip .card:hover .card-front,
  .cardFlip .card:has(.card-flip-focus:focus) .card-front,
  .cardFlip .card:has(.c-call-to-action:focus) .card-front {
    pointer-events: none;
  }

  /* VFI */
  .cardFlip .card:has(.card-flip-focus:focus) .card-inner {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
  }
}

/* On mobile only show card back */
@media (max-width: 768px) {
  .cardFlip .card-inner {
    transform: rotateY(180deg) !important;
  }

  .cardFlip .card-front {
    display: none !important;
  }

  .cardFlip .card-back {
    display: block !important;
  }

  .cardFlip .card-flip-focus {
    display: none !important;
  }
}

.cardFlip .card-front,
.cardFlip .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
  background: #111;
  /* Force stacking context for Safari */
  will-change: transform;
}

.cardFlip .card-back {
  transform: rotateY(180deg);
  z-index: 3;
}

/* Remove flip-specific styles for the static card */
.cardFlip .card-static .card-inner,
.cardFlip .card-static .card-front,
.cardFlip .card-static .card-back {
  all: unset;
}

.cardFlip .card-static .card-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.cardFlip .m-content-placement-item.f-size-large {
  width: 100%;
  aspect-ratio: 693 / 800;
  position: relative;
  margin: 0;
}

.cardFlip .m-content-placement-item.f-size-large img.c-image {
  width: 100%;
  object-fit: cover;
}

.cardFlip .m-content-placement-item .slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 100;
  padding: 32px 27px 30px 30px;
  white-space: normal;
  /* Opacity for the slide content background */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 0.75) 72px, rgba(0, 0, 0, 1) 100%); */
}

.cardFlip .m-content-placement-item .slide-content h2 {
  font-weight: 700 !important;
}

@media screen and (max-width: 767px) {
  .cardFlip .m-content-placement-item .slide-content {
    padding: 32px 12px 12px 16px;
  }
}

.cardFlip .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 25px;
}

@media (max-width: 1084px) {
  .cardFlip .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cardFlip .card-grid {
    grid-template-columns: 1fr;
  }
}

.cardFlip .card {
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.cardFlip .m-content-placement-item.f-size-large.card.card-hero {
  grid-column: 1/-1;
  aspect-ratio: 693 / 800;
}

@media screen and (min-width: 768px) {
  .cardFlip .m-content-placement-item.f-size-large.card.card-hero {
    aspect-ratio: 1083 / 609;
  }

  .cardFlip .m-content-placement-item.f-size-large.card.card-hero .slide-content {
    width: 100%;
    height: fit-content;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
  }

  .cardFlip .m-content-placement-item.f-size-large.card.card-hero .slide-content .c-heading-3 {
    font-size: 46px;
    line-height: 56px;
  }
}

@media screen and (min-width: 1084px) {
  .cardFlip .m-content-placement-item.f-size-large.card.card-hero {
    aspect-ratio: 1920 / 720;
  }

  .cardFlip .m-content-placement-item.f-size-large.card.card-hero .slide-content .c-subheading-4 {
    font-size: 24px;
    line-height: 28px;
    padding: 4px 0 2.3632px;
  }
}

.cardFlip .m-content-placement-item.f-size-large.card.card-hero img {
  max-width: 100%;
}

/* ======== Cardflip background image: ======== */
.cardFlip {
  background-image: url('https://cms-assets.xboxservices.com/assets/91/61/9161db0b-ad23-467b-98b0-6c4c2f1c9f7e.jpg?n=Biggest-Games_Cards-Background_1084_1920x1635.jpg');
  background-repeat: no-repeat;
background-position: center;
  background-size: auto;
}

.cardFlip .m-content-placement-item .slide-content h3 {
    font-weight: 700 !important;
}

@media only screen and (max-width: 1084px) {
.cardFlip {
 background-image: url('https://cms-assets.xboxservices.com/assets/68/24/68246997-bb53-4157-90f0-917374403669.jpg?n=Biggest-Games_Cards-Background_768_1083x1890.jpg');
  background-size: cover;
}
}
@media only screen and (max-width: 768px) {
.cardFlip {
 background-image: url('https://cms-assets.xboxservices.com/assets/b7/c9/b7c9eca9-6b83-432f-954a-f48343092633.jpg?n=Biggest-Games_Cards-Background_0_767x2484.jpg');
  background-size: cover;
}
}

@media only screen and (min-width: 1084px) {
    .cardFlip .m-banner {
        max-width: 1200px !important;
        padding-bottom: 48px;
    }
    .cardFlip .m-banner .c-subheading-2 {
        padding-top: 24px;
    }
}

/* ======== CSS for stroke at the bottom of the background image: ======== */
.cardFlipStroke {
max-width: 1920px;
margin: auto;
    height: 5px;    
    background-image: linear-gradient(
        90deg,
        rgba(155, 240, 11, 0) 0%,
        rgba(155, 240, 11, 0.15) 30%,
        rgba(155, 240, 11, 0.6) 45%,
        rgb(155, 240, 11) 50%,
        rgba(155, 240, 11, 0.6) 55%,
        rgba(155, 240, 11, 0.15) 70%,
        rgba(155, 240, 11, 0) 100%
    );
box-shadow: 0 0 16px 2px rgba(155, 240, 11, 0.30);
}

/* ======== Tall Superhero ======== */
@media only screen and (min-width: 768px) {
.tallSuperhero .m-hero-item.f-transparent:before {
padding-bottom: 80% !important;
}
}

.tallSuperhero .m-hero-item.f-y-top.f-transparent>div>div {
    top: 100px;
}
@media only screen and (max-width: 1400px) {
    .tallSuperhero .m-hero-item.f-y-top.f-transparent>div>div {
        top: 60px;
    }
}
@media only screen and (max-width: 1083px) {
    .tallSuperhero .m-hero-item.f-y-top.f-transparent>div>div {
        top: 0px;
    }
}
@media only screen and (max-width: 767px) {
    .tallSuperhero .m-hero-item.f-y-top.f-transparent>div>div {
        top: 140px;
    }
}


/* superhero fix */
@media only screen and (max-width: 767px) {
    .superheroFix .m-hero-item>div {
        height: 250px;
    }
    .superheroFix.tallSuperhero .m-hero-item.f-y-top.f-transparent>div>div {
        top: calc(35%);
    }
}

/* ======== Controller Superhero Slider ======== */
@media only screen and (max-width: 767px) {
    .superheroFix .m-hero .c-carousel .sliderControls {
        bottom: 35px;
    }
}

@media only screen and (min-width: 1084px) {
html.text-spacing .pageHero .c-heading-1L {
    font-size: 56px;
}
html.text-spacing .superheroFix .high-contrast h3.c-heading{
    /*font-size: 38px;*/
}
}

@media (min-width: 768px) and (max-width: 1083px) {
    html.text-spacing .pageHero .c-heading-1L {
    font-size: 46px;
}
    html.text-spacing .pageHero .c-subheading-2 {
    font-size: 18px;
}
}