.float-grade {
    background:  -webkit-linear-gradient(to bottom, rgba(000, 000, 000, .7) 10%, rgba(000, 000, 000, 0) 100%) repeat scroll 0 0 !important;
    background: -moz-linear-gradient(to bottom, rgba(000, 000, 000, .7) 10%, rgba(000, 000, 000, 0) 100%) repeat scroll 0 0 !important;
    background:  -o-linear-gradient(to bottom, rgba(000, 000, 000, .7) 10%, rgba(000, 000, 000, 0) 100%) repeat scroll 0 0 !important;
    background:  linear-gradient(to bottom, rgba(000, 000, 000, .7) 10%, rgba(000, 000, 000, 0) 100%) repeat scroll 0 0 !important;
    content: "";
    width: 100%;
    height: 150px;
    position: absolute;
    top: 0px;
    z-index: 10;
    pointer-events: none;
}
/* hero */
 .mixer-hero .m-hero-item > div > div picture { width: 218px;}
 .vidHero .c-image {position: absolute; bottom: -7.1%;}
 .threeP-hero h1 {font-weight: 700;}
@media screen and (max-width: 1083px) {
 .vidHero .c-image {position: absolute; bottom: -16%;}
}
@media only screen and (max-width:767px) {
 .mixer-hero .m-hero-item > div {  height: 200px;}
}

/* end hero */
.npr {padding-right: 0px !important;}
.gallery picture:focus {outline: 2px dashed #fff;}
.storyBlade .m-hero-item > div > div a {text-decoration: underline;}
.storyBlade .c-hyperlink:focus {border: 2px dashed #fff;}
@media screen and (max-width: 767px) {
.storyBlade .m-hero-item > div {height: 500px !important;}
.storyBlade .m-hero-item > div > div { top: calc(45%) !important;}
}

.threeP-hero .title {
    margin-bottom: 13px;
}

.customFont {
    font-family: 'Knockout 50 Welterweight';
    font-size: 80px !Important;
    line-height: 80px !Important;
}
@media screen and (max-width: 1083px) {
.customFont {
    font-size: 60px !Important;
    line-height: 60px !Important;
}
}
@media screen and (max-width: 768px) {
.customFont {
    font-size: 40px !Important;
    line-height: 40px !Important;
}
}

/* highlight features */

 .fwHL .m-highlight-feature > div h3 {font-weight: 700;}
.fwHL .c-divider {border-top: 1px solid #fff;}
@media only screen and (min-width:768px) {
   .fwHL .m-highlight-feature div {
        background: url('https://compass-ssl.xbox.com/assets/7b/7c/7b7c2790-f53f-489c-96d1-20a11ab18a56.png?n=PUBG_Highlight-Feature-Text-Box-0_408x460_02.png');
        color: #fff !Important;
        background-size: contain;
    }
   .fwHL .m-highlight-feature.f-align-right > div {
    right: 7vw;
    }
   .fwHL .m-highlight-feature.f-align-left > div {
    left: 7vw;
    }
}
@media only screen and (min-width:768px) {
.fwHL .m-highlight-feature > div {
    width: 386px;
    height: 370px;
}
 .fwHL .m-highlight-feature > div {padding-left: 50px; padding-right: 50px;}
}

@media only screen and (min-width:1400px) {
.fwHL .m-highlight-feature > div {
    width: 408px;
    height: 460px;
}
 .fwHL .m-highlight-feature > div {padding-left: 50px; padding-right: 50px;}
}

/* end highlight features */
  .live-gold .m-hero-item > div > div picture {max-width: 170px;}
  .live-gold .m-hero-item > div > div picture img {width: 100%;}
@media screen and (max-width:767px) {
    .live-gold .m-hero-item > div > div {
        color: #000;
    }
  .live-gold .m-hero-item > div > div picture {display: block; margin: 0 auto;}
  .live-gold .m-hero-item > div > div h2 {padding-top: 12px;}
}

@media screen and (min-width:768px) {
    .live-gold .m-hero-item > div > div {
        color: #fff;
    }
   
    .live-gold a.c-call-to-action span, button.c-call-to-action span {
        color: #5DC21E !important;
    }

    .live-gold a.c-call-to-action.f-lightweight, button.c-call-to-action.f-lightweight {
        color: #5DC21E !important;
    }
}
@media screen and (min-width:1084px) {
    .live-gold section {height: 30.7vw;}
}

/* Summer of PubG */
@media screen and (min-width:1084px) {
    .summerHero section {height: 30.7vw;}
}
.summerHero .m-hero-item .c-paragraph, .c-hero .c-paragraph {max-height: 140px !important;}

.threeP-hero .m-cta-module .button-section {
    padding-top: 10px !important;
}

@media (min-width: 768px) and (max-width:802px) {
.purchaseSection .c-heading-3 {padding-bottom: 120px;}
}

.c-feature picture img, .m-feature picture img{min-height: 0 !important;}
.vidHero .m-feature{margin-top:0 !Important;}

@media screen and (max-width:858px){
.vidHero{padding-top:88px !Important;}
}

.mixerLogo{height:63px !important; width:218px !important;} 

@media screen and (max-width:768px){
  .mixerLogo{padding-top:20px !important;}
}