/* uhf fix */
div[data-module-id] {
  min-height: 0px !important;
}

.big-background {
background-repeat: repeat-y;
background-size: contain;
background-image: url(https://compass-ssl.xbox.com/assets/c1/19/c1192181-5991-4e99-83da-275ed657a123.png?n=19866892_Background-0_1083x4000.png);
  }
  
  @media screen and (min-width: 1084px) {
.big-background {
background-repeat: repeat-y;
background-size: 100% auto;
background-position: initial;
background-image: url(https://compass-ssl.xbox.com/assets/4c/ec/4cec8ed9-657b-4191-8386-593a66782103.png?n=19866892_Background-1084_1920x8116.png);
}
  }
  
  .streaming-hub.big-background {
background-repeat: repeat-y;
background-size: contain;
background-image: url(https://compass-ssl.xbox.com/assets/c0/f3/c0f358a9-d578-4f12-9ea4-8301af79c555.png?n=19866891_Background-0_1083x4006.png);
  }
  
  @media screen and (min-width: 1084px) {
.streaming-hub.big-background {
 background-repeat: repeat-y;
 background-size: 100% auto;
 background-position: initial;
 background-image: url(https://compass-ssl.xbox.com/assets/94/ec/94ecd62c-a1e6-4178-8675-b8cbcc919b06.png?n=19866891_Background-1084_1920x3121.png);
}
  }
  /*
  @media screen and (min-width: 1084px) {
.big-background {
 background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(255,0,0,1) 100%), url(https://compass-ssl.xbox.com/assets/4c/ec/4cec8ed9-657b-4191-8386-593a66782103.png?n=19866892_Background-1084_1920x8116.png);
 background-repeat: no-repeat, repeat-y;
 background-size: 100% 200px, contain;
 background-position: center bottom, 50%;
  
}
  }
  */
  #BodyContent {
background-color: #171717;
color: #fff !important;
  }
  section.body {
background-color: #171717;
color: #fff !important;
  }
  
  .theme-dark {
/*background-color: #171717 !important;*/
  }
  
  .xcloud div.c-glyph {
   font-family: "MWF-MDL2";
  }
  
  .xcloud.requirements section,
  .xcloud .requirements section {
text-align: center;
  }
  
  .xcloud .requirements section a.f-lightweight:hover span {
text-decoration: underline;
  }

/*    .xcloud.requirements section a.f-lightweight */
  
  .xcloud.requirements section > div > p:not(:first-of-type),
  .xcloud .requirements section > div > p:not(:first-of-type) {
padding-bottom: 5px;
  }
  
  
  .xcloud.requirements section > div,
  .xcloud .requirements section > div {
padding-top: 0;
  }
  .xcloud.requirements .c-badge,
  .xcloud .requirements .c-badge {
color: #000;
font-family: "MWF-MDL2";
display: inline-block;
width: 34px; 
height: 34px;
overflow: visible;
border-radius: 17px;
background-color: #00fe81;
font-weight: bold;
font-size: 28px;
padding: 4px 2px 0px 2px;
vertical-align: middle;
font-weight: 700;
margin: 15px 0 10px 0;
  }
  
  .xcloud .faq-mwf .c-paragraph-2:not(:first-of-type) {
   padding-top: 0px;
  }
  .custom-hero strong.c-badge {
    font-weight: 700;
  }
  .custom-hero .c-subheading-2 {
padding-top: 16px;
  }
  
  @media only screen and (max-width: 860px) {
.custom-hero {
 padding-top: 87px;
}
  }
  /* override to make hero flow at mobile */
  @media only screen and (max-width: 767px) {
.custom-hero {
 padding-bottom: 48px;
}
.custom-hero .m-hero-item:before {/* This is what defines the aspect ratio of the hero */
 display: none;
}
.custom-hero .m-hero-item>div,
.custom-hero .m-hero-item.f-y-center>div>div,
.custom-hero .m-hero-item.f-y-center>div>div,
.custom-hero .m-hero-item.f-y-bottom>div>div,
.custom-hero .m-hero-item.f-y-bottom>div>div,
.custom-hero .m-hero-item>picture img,
.custom-hero .m-hero-item>img,
.custom-hero .m-hero-item>picture {/* Some of these styles are redundant for some of these elements, but it doesn't hurt to pile them up in one place */
 position: relative;
 top: 0 !important;
 left: 0 !important;
 transform: none !important;
 overflow: visible;
 height: auto;
}
  }
  
  #participate {
opacity: 0;
transition: opacity 760ms linear;
transition-delay: 50ms;
  }
  #participate.visible {
opacity: 1;
  }
  
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#participate {
 opacity: 1;
 transition: none;
 transition-delay: none;
}
  }
  #participate .c-glyph {
font-weight: 700;
margin-top: 12px;
padding-top: 0;
  }
  
  @media  only screen and (min-width: 768px) and (max-width: 1700px){
.custom-hero.f-x-right .m-hero-item > div > div {
 max-width: 40%;
}
  }
  @media  only screen and (max-width: 767px) {
.streaming-hub.big-background .m-hero-item.f-transparent:first-of-type::before {
 padding-bottom: 56.25% !important;
}
  }
  .register {
background-image: url(https://compass-ssl.xbox.com/assets/30/b0/30b0c88f-da4a-4fde-83b5-5cc36015aa3f.png?n=19866892_Image-0_70x384.png), linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(23,23,23,1) 100%);
background-repeat: no-repeat, no-repeat;
background-size: auto, 100% 200px;
background-position: center top, center bottom;
min-height: 384px;
padding-top: 100px;
  }

  .xcloud.developer {
    padding-top: 82px;
  }
  .xcloud.developer .m-banner a.c-call-to-action,
  .xcloud.register .m-banner a.c-call-to-action,
  .xcloud .register .m-banner a.c-call-to-action {
margin-top: 24px;
padding-left: 22px;
padding-right: 22px;
  }
   
  a.c-call-to-action.green-brdrLime:hover {
   border: 2px solid #107c10;
   color: #fff !important;
   background: none !important;
  }
  
  
  a.c-call-to-action.green-brdrLime {
border: 2px solid #9bf00b !important;
   color: #9bf00b !important;
   background: none !important;
  }
  /*
  .xcloud.social,
  .xcloud .social {
position: relative;
background: url(https://compass-ssl.xbox.com/assets/08/23/0823a486-3a4d-4828-bdb4-880227dca6d3.jpg?n=19866892_Image-0_Bookend_1920x995.jpg) center bottom no-repeat;
background-size: contain;
  }*/
  .xcloud.social::before,
  .xcloud .social::before {
display: none;
content: "";
width: 100%;
padding-bottom: 51.822%;
  }
  @media only screen and (max-width: 767px) {
.xcloud.social::before,
.xcloud .social::before {
 padding-bottom: 90%;
}
  }
  /* old version 
  .xcloud.social [data-grid~=col-12],
  .xcloud .social [data-grid~=col-12] {
position: absolute;
text-align: center;
max-width: 540px;
float: none;
top: 80px;
left: 50%;
transform: translate(-50%, 0%);
  }
  */
  
  .xcloud.social [data-grid~=col-12], 
  .xcloud .social [data-grid~=col-12] {
   text-align: center;
   max-width: 540px;
   float: none;
   margin: 0 auto;
  }
  @media only screen and (max-width: 639px) {
.xcloud.social [data-grid~=col-12],
.xcloud .social [data-grid~=col-12] {
 max-width: 360px;
}
  }
  
  @media only screen and (max-width: 539px) {
.xcloud.social:not(.antisocial), 
.xcloud .social:not(.antisocial) {
 padding-top: 120px;
}
.xcloud.social [data-grid~=col-6] ,
.xcloud .social [data-grid~=col-6] {
 float: left;
 width: 50%;
}
  }
  
  .xcloud.social [data-grid~=col-12] picture,
  .xcloud .social [data-grid~=col-12] picture {
display: block;
margin-bottom: 54px;
  }
  
  .xcloud.social a.c-call-to-action ,
  .xcloud .social a.c-call-to-action {
color: #9bf00b;
  }
  
  .xcloud.social a.c-call-to-action:hover,
  .xcloud .social a.c-call-to-action:hover {
color: #fff;
  }
  .social .m-image-intro>.c-image:after {
   display: none;
  }
  .xcloud .c-drawer,
  .xcloud .c-drawer button {
background: transparent;
  }
  
  .xcloud .c-drawer button,
  .xcloud .c-drawer button p {
color: #9bf00b;
  }
  
  .xcloud .faq-mwf .c-divider {
border-color: #454545 !important;
  }
  
  .xcloud .c-drawer.f-divider>button {
border-bottom: 1px solid #454545;
  }
  
  .xcloud .c-drawer>button:hover, 
  .xcloud .c-drawer>button:focus {
background: #2f2f2f; 
color: #9bf00b;
  }
  .xcloud .c-hyperlink{
color: #9bf00b;
  }
  
  .xcloud .lime-green-c {color: #9bf00b !important;}
  
  .xcloud .c-hyperlink:hover,
  .xcloud .c-hyperlink:focus,
  .xcloud .c-hyperlink:active {
color: #fff !important;
  }
  
  
  
  #controllerReadiness .m-panes {
padding: 20px 0 48px 0;
  }
  #controllerReadiness .m-panes section {
   padding-top: 0;
  }
  
  div.c-dialog.f-lightbox>[role="presentation"] {
   background: rgba(0,0,0,.7);
  }
  .c-dialog.f-lightbox [role="dialog"] {
background: #000 !important;
border-top: 1px solid #454545;
border-bottom: 1px solid #454545;
max-width: 1400px !important;
  }
  @media only screen and (max-width: 1399px) {
#controllerReadiness .m-panes {
 -ms-flex-direction: row;
 flex-direction: row;
}
#controllerReadiness .m-panes section {
 border-left: 1px solid rgba(0,0,0,.2);
 border-bottom: 0;
}
  }
  @media only screen and (max-width: 767px) {
#controllerReadiness .m-panes {
 -ms-flex-direction: column;
 flex-direction: column;
}
#controllerReadiness .m-panes section {
 border-bottom: 1px solid rgba(0,0,0,.2);
 border-left: 0;
}
  
#controllerReadiness .m-panes section:not(:first-of-type) {
 padding-top: 48px;
}
  
#controllerReadiness .controller h3 {
 padding-left: 10px;
 padding-right: 10px;
}
.c-dialog.f-lightbox [role="dialog"] {
 border-top: 1px solid #454545 !important;
 border-bottom: 1px solid #454545 !important;
}
  }
  @media only screen and (max-width: 539px) {
#controllerReadiness .m-panes {
 padding-left: 5%;
 padding-right: 5%;
}
  }
  
  #controllerReadiness .m-panes section:first-child {
   border-left: 0;
  }
  #controllerReadiness .m-panes section:last-child {
   border-bottom: 0;
  }
  #controllerReadiness [role=dialog] [role=document] {
text-align: center;
background-color: #000;
color: #fff;
  }
  
  @media only screen and (min-width: 0) {
#controllerReadiness.c-dialog.f-lightbox [role="dialog"] {
 overflow-y: auto !important;
 max-height: 100%;
}
  }
  #controllerReadiness .m-panes,
  #controllerReadiness .m-panes section {
border-color: #454545;
  }
  
  .xboxSocial {
background-color: #fff;
  }
  
  /* xCloud MODULE SPACING */

  .banner1.m-banner {
padding-top: 156px;
padding-bottom: 80px;
  }
  #participate.m-banner {/* Padding affects intersection observer script. */
  margin-top: 64px;
  margin-bottom: 160px;
  max-width: 100% !important;
  }
  .streaming-hub #participate.m-banner {/* Padding affects intersection observer script. */
margin-top: 0px;
margin-bottom: 160px;
  }
  .requirements {
padding-bottom: 245px;
  }
  .requirements .m-content-placement:not(:first-of-type) {
   padding-top: 48px;
  }
  .banner2.m-banner {
padding-bottom: 94px;
  }
  div.features > [data-grid=container]{
padding-bottom: 180px;
  } 
  .register {
margin-top: 80px;
margin-bottom: 120px;
  }
  /* END Cloud MODULE SPACING */

  /* streaming hub MODULE SPACING */
  
  .streaming-hub.custom-hero {
   margin-bottom: 96px;
  }
.streaming-hub.custom-hero .m-hero-item.f-y-center.f-transparent>div>div,
.streaming-hub.custom-hero .m-hero-item.f-y-bottom.f-transparent>div>div {
 /*top: calc(60%);*/
 min-width: 91%;
}
  
@media only screen and (min-width: 768px)  and (max-width: 868px) {
 .streaming-hub.custom-hero .m-hero-item.f-y-center.f-transparent>div>div {
  /*top: calc(64%);*/
 }
}
  
@media only screen and (min-width: 1400px) {
 .streaming-hub.custom-hero .m-hero-item.f-y-center.f-transparent>div>div {
  /*top: calc(68%);*/
 }
}
  @media only screen and (max-width: 1083px) {
.streaming-hub.custom-hero {
 margin-bottom: 144px;
}
  }
  
  /* END streaming hub MODULE SPACING */

  @media only screen and (max-width: 1260px) {
h1.c-heading-1,
h2.c-heading-1 {
 font-size: 46px;
 line-height: 1.167em;
}
p.c-subheading-2 {
 font-size: 22px;
 line-height: 1.167em;
}
  }
  
  @media only screen and (max-width: 1083px) {
h1.c-heading-1,
h2.c-heading-1 {
 font-size: 42px;
}
p.c-subheading-2 {
 font-size: 20px;
}
  }
  
  div.streaming-hub div.m-panes section {
border-color: rgba(0,0,0,0) !important;
  }
  
  
div.streaming-hub div.m-panes p {
 padding-left: 12%;
 padding-right: 12%;
}
  
  @media only screen and (max-width: 767px) {
div.streaming-hub div.m-panes p {
 padding-left: 5%;
 padding-right: 5%;
}
  }
  .bottom-fade {
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(23,23,23,1) 100%);
background-repeat: no-repeat;
background-size: 100% 200px;
background-position: center bottom;
  }
  
  .bookend .c-image img {
   width: 100%;
  }
  
  @media only screen and (max-width: 768px)  and (min-width: 850px){
.streaming-hub .big-background .m-hero-item>div>div {
 max-width: 310px;
}
  }
  
  .xcloud .m-image .c-image img {
   margin-left: auto;
   margin-right: auto;
  }
  
 
  .pregamelist {
 text-align:right;
  } 
  .pregameright {
display:inline-block;
text-align:left;
 }
 
 .pregameright .c-select-menu>button:after,
 .pregameright .c-select-menu>button {
color: #9bf00b;
 }
 
 .pregameright .c-select-menu>button:hover,
 .pregameright .c-select-menu>button:hover:after,
 .pregameright .c-select-menu>button:focus,
 .pregameright .c-select-menu>button:focus:after {
 color: #fff;
 }
 
 .pregameright .c-menu {
color: #000;
 }


 hr.c-divider.m-pagination-group {
  width: 92%;
  margin: 24px auto 0 auto;
 margin-top: 24px;
 border-top: 2px solid #777;

 }
 .m-pagination-group {
display: none;
text-align: center;
 }
 /*
 @media screen and (min-width: 1600px) {
 .m-pagination.m-pagination-group {
  padding-right: 200px;
 }
}*/
.m-pagination-group a:focus,
.m-pagination-group a:hover {
  color: #fff;
   }
 .paginateControl {
text-align: center;

 }
 @media screen and (min-width: 1200px) {
 .paginateControl {

 position: absolute;
 right: 8vw;
  }

 }


 .paginateControl .c-menu {
color: #000;
text-align: left;
width: 205px;
 }
  [class^="ql"],
  .gameMoreInfo,
  .gameList .c-price,
  .gameList .c-badge {
display:none;
  }
 
  .paginateControl .c-select-menu>button {
white-space: nowrap;
  }
  .paginateControl .c-select-menu>button,
  .paginateControl .c-select-menu>button:after,
  .thecatalog .m-pagination li>a, 
  .thecatalog .c-pagination li>a {
 color: #9bf00b;
  }
 
  .paginateControl .c-select-menu>button:hover,
  .paginateControl .c-select-menu>button:hover:after,
  .paginateControl .c-select-menu>button:focus,
  .paginateControl .c-select-menu>button:focus:after,
  .thecatalog .m-pagination li>a:hover, 
  .thecatalog .m-pagination li>a:focus, 
  .thecatalog .c-pagination li>a:hover,
  .thecatalog .c-pagination li>a:focus {
  color: #fff !important;
  }
 
 
  .games-section .c-drawer button.show-all:focus,
  .thecatalog .m-pagination li>a:focus,
 .paginateControl .c-select-menu>button:focus,
 .pregameright .c-select-menu>button:focus {
border: 2px dashed white;
outline: 2px dashed black;
 }
 
 .thecatalog .m-pagination li.f-active {
outline: 1px solid white;
 }
 
 .games-section .c-drawer .button-box {
text-align: center;
 }
 
 
 .games-section .c-drawer button.show-all {
width: auto;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 7px;
font-size: 15px;
 }
 
 
 .games-section .c-drawer button.show-all:before {
 padding-top: 2px;
 }
 .games-section .c-drawer button.show-all:before,
 .games-section .c-drawer button.show-all {
font-weight: 600  !important;;
color: #fff !important;
background: none !important;
 }
 
 .games-section .c-drawer button.show-all:focus,
 .games-section .c-drawer button.show-all:hover,
 .games-section .c-drawer button.show-all:focus:before,
 .games-section .c-drawer button.show-all:hover:before {
color: #9bf00b !important;
  }
 
 .games-section .c-drawer button.show-all:focus,
 .games-section .c-drawer button.show-all:hover{
text-decoration: underline;
  }
 
 .games-section .c-drawer button.show-all.green-brdrLime {
border: 2px solid #9bf00b;
 }
 
 
 .games-section .c-drawer button.show-all:focus,
 .thecatalog .m-pagination li>a:focus,
 .paginateControl .c-select-menu>button:focus,
 .pregameright .c-select-menu>button:focus {
  border: 2px dashed white;
  outline: 2px dashed black;
 }
 
 .m-product-placement-item.gameDiv > a:focus {
outline: 2px dashed #fff;
 }
 
 .games-section {
padding-top: 72px;
transform: translateY(-72px);
 }

 .xcloud .faq {
   padding-top: 80px;
 }


.pag-disabled {
  pointer-events: none;
}
.pag-disabled a {
  /*opacity: .4;*/
  color: #666!important;
  pointer-events: none;
}

/* Hiding? Yes! Hiding!*/
.paginateControl {

  display: none;
}

.games-section .containerIMG {
width: 100% !important;
height: auto !important;
overflow: visible !important;
}

.games-section .containerIMG img {
width: 100% !important;
position: relative !important;
transform: none !important;
left: 0 !important;
top: 0 !important;
}
.xcloud .noClick:hover{
pointer-events:none !important;
}