/***** en-us CSS ***/

div.custom-hero-banner.theme-white {
    background-color: #e6e6e6;
}

div.custom-hero-banner .c-group {
    padding-top: 48px;
}

div.custom-hero-banner img.c-image {
    width: 90px;
    max-width: 90px;
    height: 90px;
    max-height: 90px;
}

@media screen and (min-width: 768px) {
    div.custom-hero-banner img.c-image {
        width: 120px;
        max-width: 120px;
        height: 120px;
        max-height: 120px;
    }
}

@media screen and (max-width: 1083px) {
    .video-hero .m-ambient-video {
        display: none;
    }
    .video-hero .c-heading-2 {
        font-size: 34px !important;
        line-height: 40px !important;
    }
}

@media screen and (min-width: 1084px) {
    /* transition fade from hero top to bg color above it */
    .video-hero .m-hero-item:after {
        content: "";
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 10%;
        background: linear-gradient(0deg, rgba(230,230,230,0) 0%, rgba(230,230,230,1) 100%);
        z-index: 1;
    }
    .video-hero .m-hero-item .m-ambient-video video {
        width: 100% !important;
    }
    .video-hero .m-hero-item picture {
        display: none;
    }
    .video-hero .m-ambient-video div button {
        margin-left: 18px;
    }
    .m-banner.spBanner .c-paragraph-1 {
        margin: 0 100px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1399px) {
    .video-hero .m-hero-item>div>div:not(.m-ambient-video > div) {
        width: 72%;
        max-width: 520px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1083px) {
    .video-hero .m-hero-item>div>div:not(.m-ambient-video > div) {
        bottom: calc(15% - 30px);
    }
}

@media only screen and (min-width: 1400px) {
    .video-hero .m-hero-item>div>div:not(.m-ambient-video > div) {
        width: 53%;
        max-width: 768px;
    }
}

.video-hero .m-hero-item div.m-ambient-video>div {
    width: 36px;
    height: 36px;
}

@media screen and (min-width: 768px) {
    .discover .m-hero-item.f-transparent>div>div {
        top: calc(45%);
        width: 70%;
        max-width: 725px;
    }
}

@media screen and (min-width: 1084px) {
    .discover .m-hero-item.f-transparent>div>div {
        width: 58%;
    }
}

.high-contrast-mode.black-on-white .discover .c-group {
    background-color: white;
}
.high-contrast-mode.white-on-black-on .discover .c-group {
    background-color: black;
}

html.high-contrast-mode .discover.custom-hero .m-hero-item div.c-group a.c-call-to-action:focus {
    border-style: dashed !important;
    outline-style: dashed !important;
}

.discover .m-hero-item.f-transparent>div>div .c-group a:last-of-type {
    padding-right: 8px;
}

.gamesSection {
    background-color: #e6e6e6;
}

.gamesList .m-product-placement-item.f-size-large picture {
    height: 408px;
    overflow: hidden;
}

.gamesList .m-product-placement-item.f-size-large {
    margin: 0 14px 0 4px;
}

.gamesList.c-carousel .c-flipper+div {
    font-size: 1px;
    /* less whitespace with MWF ul being inline-block; children are all sized explicitly */
}

.gamesList .c-flipper {
    background: #000 !important;
    color: #FFF !important;
}

.gamesList .m-product-placement-item>a:focus {
    border: 2px dashed #000;
    outline: 2px dashed #fff;
}

.custContPlacement {
    background-color: #e6e6e6;
}

.custContPlacement .m-content-placement-item>picture {
    padding-bottom: 36.55%;
}

.accessories-triptych {
    background-color: #e6e6e6;
}

.bookend-image {
    padding-bottom: 48px;
}

.bookend-banner {
    position: relative;
    margin-top: -.72em;
}

.bookend-banner .m-banner {
    width: 100%;
    max-width: 825px !important;
}

hr.c-divider {
    width: 100%;
}


/* override to make hero flow at mobile */

@media only screen and (max-width: 767px) {
    .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;
    }
    .custom-hero .m-hero-item>div>div {
        padding-bottom: 48px;
    }
}

@media only screen and (max-width: 767px) {
    .video-hero.custom-hero .m-hero-item {
        background-color: #000;
    }
    .discover.custom-hero .m-hero-item {
        background-color: #e6e6e6;
        color: #000;
    }
    .discover.custom-hero .m-hero-item a.lime-green-c {
        color: #054b16 !important;
    }
    .discover.custom-hero .m-hero-item a.lime-green-c:hover {
        color: #054b16 !important;
    }
    .discover.custom-hero .m-hero-item>div>div {
        padding-top: 48px;
    }
}

.faq-mwf .c-group {
    display: block !important;
}

.faq-mwf .c-group a.c-call-to-action {
    display: table !important;
}

.theme-light .m-panes-product-placement-item :not(.f-primary):not(.f-secondary).c-call-to-action,
.theme-white button.c-action-trigger,
.theme-white .m-banner a.c-call-to-action,
.theme-white a.c-call-to-action {
    color: #054b16
}

.custom-hero-banner .c-badge {
 margin: 48px 0 -36px 0;
}

.devices .m-content-placement h3[class^="c-heading"] {
    font-weight: 700 !important;
    margin-top: 0;
    padding-top: 8px;
}

@media screen and (max-width: 1083px){
    .devices {
        padding-bottom: 76px;
    }
}
@media screen and (max-width: 540px){
    .devices {
        padding-bottom: 96px;
    }
}

    .devices .m-banner {
        padding-bottom: 0;
    }

.m-content-placement-item .c-hyperlink {
padding: 0px 0 !important;
}

.hero-logo {
   width: 75px;
}

.m-feature-group {
    background: rgba(0, 0, 0, -0.9) ;
}

/*******************************************************/
/**  Gaming accessories Hero **/
/*******************************************************/
.accessoriesHero .m-hero-item>div>div {
    max-width: 520px;
}

@media screen and (min-width: 1084px) {
    .accessoriesHero .m-hero-item.f-y-bottom>div>div {
        bottom: 200px;
    }

    .accessoriesHero .m-hero-item.f-x-left>div>div {
        left: 100px;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1920px) {
    .accessoriesHero .m-hero-item.f-y-bottom>div>div {
        bottom: 6vw;
    }

    .accessoriesHero .m-hero-item.f-x-left>div>div {
        left: 6vw;
    }
}

@media screen and (min-width: 1083px) and (max-width: 1399px) {
    .accessoriesHero .m-hero-item>div>div {
        max-width: 400px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .accessoriesHero .m-hero-item.f-y-bottom>div>div {
        bottom: 6vw;
    }

    .accessoriesHero .m-hero-item.f-x-left>div>div {
        left: 6vw;
    }

    .accessoriesHero .m-hero-item>div>div {
        max-width: 320px;
    }
    .accessoriesHero .m-hero-item .c-subheading {
        font-size: 14px;
    }
    .accessoriesHero .m-hero-item .c-heading {
        font-size: 24px;
    }

}

@media screen and (max-width: 767px) {
    .accessoriesHero .m-hero-item>div {
        height: 300px;
    }

    .accessoriesHero [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(45%);
    }

    .accessoriesHero .m-hero-item>div .c-heading {
        font-size: 26px;
        line-height: 32px;
    }
    .accessoriesHero .m-hero-item>div>div>div {
    margin-top: 24px !important;
}
}