/* Overrides */
.featured-games .availability {
    display: none !important;
}
/* Hero */
.specLogo {
    height: 60px;
}

.xgp-hero .m-hero-item>div {
    position: absolute;
    height: 100%;
}

.xgp-hero h1 strong {
    font-weight: 700;
}

.xgp-hero .m-hero-item.f-transparent:before {
    padding-bottom: 177.3142% !important;
    /* aspect ratio percentage adjusted for padding: mobile, no adjustment */
}

.xgp-hero a.c-action-trigger {
    margin-top: 0 !important;
}

@media screen and (min-width: 768px) and (max-width: 920px) {
    .xgp-hero h1 {
        line-height: 1em;
        font-size: 40px;
    }

    .xgp-hero .adjust {
        padding-top: 12px;
        margin-top: 0 !important;
    }

    .xgp-hero .c-paragraph-2 {
        font-size: 16px;
        line-height: 1.4em;
    }

    .xgp-hero .c-paragraph-3 {
        font-size: 13px;
        line-height: 1.4em;
    }
}

.xgp-hero.garrison,
.made-for-pc {
    margin-bottom: -1px;
}

@media screen and (min-width: 1084px) and (max-width: 1199px) {
    .xgp-hero h1 {
        line-height: 1em;
        font-size: 40px;
    }

    .xgp-hero .adjust {
        padding-top: 12px;
        margin-top: 0 !important;
    }

    .xgp-hero .c-group.adjust .c-call-to-action {
        margin-right: 8px;
        margin-top: 0 !important;
    }


    .xgp-hero .c-paragraph-2 {
        font-size: 16px;
        line-height: 1.4em;
    }

    .xgp-hero.garrison .c-paragraph-2 {
        font-size: 14px;
        line-height: 1.4em;
    }

    .xgp-hero .c-paragraph-3.hero-legal {
        padding-top: 10px;
    }

    .xgp-hero .c-paragraph-3 {
        font-size: 13px;
        line-height: 1.4em;
        max-width: 82%;
        padding-top: 10px;
    }

    .xgp-hero.garrison .c-paragraph-3 {
        width: 67%;
    }
}

.xgp-hero .c-paragraph-3.hero-legal {
    max-width: 82% !important;
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .xgp-hero h1 {
        line-height: 1em;
        font-size: 46px;
    }

    .xgp-hero .adjust {
        padding-top: 14px;
        margin-top: 0 !important;
    }

}

@media screen and (max-width: 1350px) {
  .xgp-hero .c-heading-2 {
    padding-top: 0;}
  }

@media screen and (max-width: 460px) {
    .xgp-hero [class^="c-paragraph"] {
        padding-top: 12px;
    }
}

@media screen and (max-width: 539px) {
    .xgp-hero h1 {
        font-size: 32px;
        line-height: 1.2em;
    }



    .xgp-hero .m-hero-item.f-transparent:before {
        padding-bottom: 226.2% !important;
        /* aspect ratio percentage adjusted for padding: height divided by 90% of width (5% padding) */
    }

}

@media screen and (min-width: 768px) {
    .xgp-hero .m-hero-item.f-transparent:before {
        padding-bottom: 140.4535% !important;
        /* aspect ratio percentage adjusted for padding: height divided by 90% of width (5% padding) */
    }

}

@media screen and (min-width: 1084px) {
    .xgp-hero .m-hero-item.f-transparent:before {
        padding-bottom: 62.5% !important;
        /* aspect ratio percentage adjusted for padding: height divided by 90% of width (5% padding) */
    }
}

@media only screen and (max-width: 1083px) {

    .xgp-hero .m-hero-item,
    .c-hero {
        text-align: center;
    }

    .xgp-hero .m-hero-item>div>div,
    .c-hero>div>div {
        width: 100%;
        max-width: 100%;
    }

    .xgp-hero .m-hero-item>div>div>*,
    .c-hero>div>div>* {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 767px) {

    .xgp-hero:not(.garrison) .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 17%;
    }
}

@media only screen and (max-width: 539px) {

    .xgp-hero:not(.garrison) .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 19.5%;
    }

    .xgp-hero .c-paragraph-3.hero-legal {
        max-width: 100% !important;
        padding-top: 12px;
    }
}

@media only screen and (min-width: 440px) and (max-width: 539px) {
    .xgp-hero .c-paragraph-3.hero-legal {
        padding-top: 20px;
    }
}


@media only screen and (max-width: 380px) {

    .xgp-hero .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 150px;
    }

    .xgp-hero .c-paragraph-2.adjust {
        width: 100%;
        max-width: 100%;
    }

    .xgp-hero .c-group.adjust {
        padding-top: 8px;

    }

    .xgp-hero .m-hero-item>div {
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {

    .xgp-hero .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 168px;
    }
}

@media screen and (min-width: 1084px) {

    .xgp-hero .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        top: calc(46%);
        max-width: 410px;
    }
}

@media screen and (min-width: 540px) and (max-width: 666px) {
    .xgp-hero .c-paragraph-2.adjust {
        padding-top: 12px;
    }
}


@media only screen and (max-width: 380px) {

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 150px;
    }

    .xgp-hero .c-paragraph-2.adjust {
        width: 100%;
        max-width: 100%;
    }

    .xgp-hero .c-group.adjust {
        padding-top: 8px;

    }

    .xgp-hero .m-hero-item>div {
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        transform: none;
        top: 168px;
    }
}

@media screen and (min-width: 1084px) {

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div,
    .c-hero.f-y-center.f-transparent>div>div {
        top: calc(46%);
        max-width: 550px;
    }
}
@media screen and (min-width: 1084px) and (max-width: 1199px){
    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div{max-width: 500px;}
}

@media screen and (min-width: 1084px) and (max-width: 1550px) {

    .c-paragraph-3.adjust {
        width: 75%;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1260px) {
    .c-paragraph-2.adjust {
        width: 85%;
    }

}

@media screen and (max-width: 1200px) {
.featured-games .m-area-heading .c-heading {
  font-size: 24px;
  line-height: 28px;}
}

@media screen and (max-width: 1083px) {
    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div {
        transform: none;
        top: 128px;
    }

    .xgp-hero.garrison .c-heading-1 {
        font-size: 48px;
        line-height: 1.2em;
    }
}

@media screen and (max-width: 859px) {
    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div {
        transform: none;
        top: 154px;
    }

    .xgp-hero.garrison .c-heading-1 {
        font-size: 36px;
        line-height: 1.2em;
    }
}

@media screen and (max-width: 640px) {
    .xgp-hero.garrison section {
        margin-top: 88px
    }

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div {
        transform: none;
        top: 60px;
    }

    .xgp-hero.garrison .c-heading-1 {
        font-size: 36px;
        line-height: 1.2em;
    }

    .xgp-hero.garrison .c-paragraph-3.adjust {
        padding-top: 8px;
    }
}


@media screen and (max-width: 539px) {
    .trouble-desktop{display: none;}
    .xgp-hero.garrison section {
        margin-top: 10%;
    }

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div {
        transform: none;
        top: 160px;
    }

}


@media screen and (max-width: 400px) {
    .xgp-hero.garrison section {
        margin-top: 167px
    }

    .xgp-hero.garrison .m-hero-item.f-y-center.f-transparent>div>div {
        top: 8px;
    }
}

@media screen and (max-width: 355px) {
    .xgp-hero.garrison section {
        margin-top: 228px
    }

}

@media screen and (max-width: 375px) {
    .xgp-hero.garrison .c-heading-1 {
        font-size: 32px;
        line-height: 1.2em;
    }
}


@media screen and (min-width: 1400px) {
  .xgp-hero .m-hero-item.f-y-center.f-transparent>div>div,
  .c-hero.f-y-center.f-transparent>div>div {
    top: calc(46%);
    max-width: 650px;}
  .xgp-hero .m-hero-item.f-y-center.f-transparent>div>div p {
    max-width: 640px;}
}

/* BOX SHOT PRODUCT PLACEMENT CUSTOM OVERRIDES */
.featured-games .c-carousel .c-flipper+div {
    padding-bottom: 6px;
}

.featured-games {
  position: relative;
  transform: translateY(-25%);
  z-index: 100;
  width: 100%;
}

@media screen and (max-width: 1200px) and (min-width: 1085px) {
.featured-games {
  transform: translateY(-23%);
}
}

.featured-games .m-area-heading {
  color: #fff;
  padding-top: 0 !important;
  padding-bottom: 18px;
}

@media screen and (max-width: 539px){
.featured-games .m-area-heading {
  padding-bottom: 9px;}
}

.featured-games .m-product-placement {
  max-width: calc(1350px);
  margin: 0 auto;
  float:none;
}

.featured-games * {
  border: 0;
}

.featured-games .c-carousel::before {
  content: "";
  position: absolute;
  bottom: -50px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-color: rgba(103, 114, 128, .5);/* Done this way because of a small gap than can exist inside an element.*/
  -webkit-filter:blur(50px);
  filter:blur(50px);
}

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.featured-games .m-product-placement-item::before {
  box-shadow: 0px 50px 5px 0px rgba(103, 114, 128, .5);/* The above method doesn't work in IE */
}

.featured-games .c-carousel::before {
  background-color: rgba(103, 114, 128, .3);
  box-shadow: 0px 0px 50px 0px rgba(103,114,128,0.5);
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
 }
      

   /* These containers don't scale, so setting fixed width/height */
.m-product-placement-item>a,
.m-product-placement-item.f-size-large picture, 
.c-product-placement.f-size-large picture,
.m-product-placement-item.f-size-large, 
.c-product-placement.f-size-large {
  box-sizing: content-box;
  width: 263px !important;
  height: 440px !important;
  padding: 0 !important;
}
   
   @media screen and (min-width: 768px) and  (max-width: 1083px){
 .m-product-placement-item>a,
 .m-product-placement-item.f-size-large picture, 
 .c-product-placement.f-size-large picture,
 .m-product-placement-item.f-size-large, 
 .c-product-placement.f-size-large {
  width: 295px !important;
  height: 494px !important;
 }
   

 .featured-games {
  transform: translateY(-32%);
 }
   }
   @media screen and (max-width: 767px){
   .m-product-placement-item>a,
   .m-product-placement-item.f-size-large picture, 
   .c-product-placement.f-size-large picture,
   .m-product-placement-item.f-size-large, 
   .c-product-placement.f-size-large {
   width: 185px !important;
   height: 310px !important;
   }
   .featured-games {
   transform: translateY(-42%);
   }

   
   }
   @media screen and (max-width: 539px){
   .xgp-hero h1  {
    font-size: 32px;
    line-height: 1.2em;
   }
   .xgp-hero .c-paragraph-2 {
    padding-top: 2px;
   }
   .featured-games {
    transform: translateY(-35%);
   }
 
   }
   
   .m-product-placement-item {
 margin: 0 8px 0 0 !important;
   }
   
   .m-product-placement-item > a::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 68%;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 86%, rgba(0, 0, 0, 1) 100%);
   }
   
   .m-product-placement-item > a:hover *, 
   .c-product-placement > a:hover * {
 border: 0;
 text-decoration: inherit;
   }
   
.featured-games .m-product-placement-item > a:focus, 
.featured-games .c-product-placement > a:focus {
   outline: 2px dashed #9bf00b !Important;
   border: 2px dashed #FFF !important;
}


.featured-games .m-product-placement-item > a:hover {
   text-decoration: underline;
} 

   
   .m-product-placement-item>a:focus>picture, 
   .m-product-placement-item>a:focus>.f-default-image>picture, 
   .m-product-placement-item>a:hover>picture, 
   .m-product-placement-item>a:hover>.f-default-image>picture, 
   .c-product-placement>a:focus>picture, 
   .c-product-placement>a:focus>.f-default-image>picture, 
   .c-product-placement>a:hover>picture, 
   .c-product-placement>a:hover>.f-default-image>picture {
 border: 0;
   }
   
   .m-product-placement-item > a:hover .c-heading, 
   .m-product-placement-item > a:hover .c-subheading, 
   .c-product-placement > a:hover .c-heading, 
   .c-product-placement > a:hover .c-subheading, 
   .m-product-placement-item > a:hover .c-paragraph, 
   .m-product-placement-item > a:focus .c-heading, 
   .m-product-placement-item > a:focus .c-subheading, 
   .c-product-placement > a:focus .c-heading, 
   .c-product-placement > a:focus .c-subheading, 
   .m-product-placement-item > a:focus .c-paragraph {
  text-decoration: none;
   }
   
   .m-product-placement-item.f-size-large div.slide-content {
 position: absolute;
 bottom:0;
 left: 0;
 right: 0;
 color: white;
 z-index: 100;
 padding: 0 27px 50px 30px;
 white-space: normal;
   }
   
   .m-product-placement-item.f-size-large div.slide-content .c-badge.f-small {
 font-size: 11px;
 height: 16px;
 color: #fff;
 background-color: #107c10;
   }
   
   .m-product-placement-item .slide-content .availability {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
   }

.m-product-placement-item .slide-content .availability > div {
  bottom: 0;
  right: 0;
  background-color: #fff;
  display: inline-block;
  transform: translateX(-15px) skewX(32deg); /* counter this in child element */
}
   
.m-product-placement-item .slide-content .availability p {
  height: 32px;
  line-height: 30px;
  padding: 0 22px 0 47px; /* padding compensated for skew and parent margin to maintain 32px */ 
  color: #000;
  display: inline-block;
  text-align: top;
  transform: skewX(-32deg);/* counters parent element */
}

.m-product-placement-item .slide-content .availability p span {
  font-family: "MWF-MDL2";
  display:inline-block;
  font-weight: 400;
  font-size: 1.2em;
  vertical-align: middle;
}

.m-product-placement-item .slide-content .availability p span.false {
  display:none;
}
   
.m-product-placement-item .slide-content .availability p span:first-of-type {
  padding-left: 8px;
}

.m-product-placement-item .slide-content .availability p span:nth-child(2) {
  padding-left: 12px;
}
   
  @media screen and (max-width: 767px){
   .m-product-placement-item .slide-content .availability p span:nth-child(2) {
  padding-left: 11px;
   }
  }

.m-product-placement-item .c-paragraph, .c-product-placement .c-paragraph {
  color: #fff;
}
   
.m-product-placement-item .slide-content .availability
.m-product-placement-item .c-paragraph, .c-product-placement .c-paragraph {
  color: #fff;
}

.m-product-placement-item .f-default-image, 
.c-product-placement .f-default-image {
  padding-right: 0 !important;
   
}

.m-product-placement-item picture .c-image, .c-product-placement picture .c-image {
  top:0 !important;
  left: 0 !important;
  transform: translate(0,0) !important;
}
   
.m-product-placement-item>a>picture, 
.m-product-placement-item>a>.f-default-image>picture, 
.c-product-placement>a>picture, 
.c-product-placement>a>.f-default-image>picture {
  border: 0;
}

/* Table */
.upgradeTable .c-image {
    width: 50px;
    height: 50px;
    display: inline;
}

.upgradeTable tbody tr {
    border-bottom: 1px solid;
}

.upgradeTable tbody tr.spRow {
    border-bottom: none;
}

.upgradeTable td {
text-align: center;
}

.upgradeTable tbody .btRow {
border-bottom: none;
}

.upgradeTable thead #ultimate .c-heading, .upgradeTable thead #gold .c-heading { 
text-align: center;
}

.upgradeTable thead th {
padding-bottom: 24px;
}

.upgradeTable .c-table {
background-color: black;
color: white;
margin-top: 0;
padding-bottom: 48px;
}

.upgradeTable thead #features {
width: 1000px;
}

.upgradeTable thead #ultimate {
width: 150px;
}

.upgradeTable td .c-call-to-action {
margin-top: 24px;
}

.upgradeTable .c-glyph.onlyglyph {
    font-size: 38px;
    font-family: "MWF-MDL2";
}

@media screen and (max-width: 600px) {
.upgradeTable .c-table th, .upgradeTable .c-table td {
padding: 10px 0;}
}

@media screen and (max-width: 500px) {
.upgradeTable .c-table {
    overflow-x: scroll;}
}
/* End Table */

/* Black Banner */
.cstmBanner .c-group {
  margin: 25px 0 50px 0;
}

/* Terms */
@media screen and (max-width: 1084px) {
.terms {
    padding-left: 5%;
    padding-right: 5%;}
}

/* Header/Nav CSS */
#headerUniversalHeader header {
  z-index: 3200;
}

.js-global-head.global-head-cont,
.global-head-cont,
.js-global-head {
  background-color: rgba(0,0,0,.8) !important;
}

.c-uhfh.context-uhf,
.c-uhfh,
.context-uhf {
  margin-top: 0px;
}

#BodyContent:focus {
  outline: none;
}

[class^="c-heading"] strong {
  font-weight: 700 !important;
}

.upgradeTable a.c-call-to-action.green-brdr:focus {
   outline: 2px dashed #000 !Important;
   border: 2px dashed #FFF !important;
}
.c-glyph.lime-green-c.onlyglyph{
    line-height:1.15 !important;
}


.gbXgpBillingImg { width:80% !important; margin-left:9% !important;}



@media only screen and (max-width: 767px) {
.m-hero-item>div picture, .c-hero>div picture {
    display: inline-block;
  }
}