/* 
===================
BOOTH IMAGE AND DRAWER
===================
*/

.booth-drawer {
    padding-bottom: 48px;
}

.c-drawer {
    text-align: center;
    /* to align drawer toggle center */
}

.booth-drawer .c-drawer>div {
    text-align: left;
    /* to realign content left */
}

.theme-black .c-drawer .c-drawer-toggle.c-action-trigger,
.theme-dark .c-drawer .c-drawer-toggle.c-action-trigger {
    padding: 5px 20px 5px 0px;
    font-size: 15px;
    line-height: 18.5px;
    font-weight: 900;
    background: transparent;
    color: #9bf00b;
    border-color: #9bf00b;
    outline: 1px solid transparent;
    display: inline-block;
    width: auto;
    margin: 0 auto 16px auto;
}

.theme-black .c-drawer .c-drawer-toggle.c-action-trigger:focus,
.theme-dark .c-drawer .c-drawer-toggle.c-action-trigger:focus {
    color: #9bf00b;
    border: 2px solid #9bf00b;
    outline: 1px dashed #fff;
}

.theme-black .c-drawer .c-drawer-toggle:before,
.theme-dark .c-drawer .c-drawer-toggle:before {
    position: relative;
    top: 0;
    transform: none;
    left: 0;
}

.theme-black .c-drawer,
.theme-black .c-drawer .c-drawer-toggle,
.theme-dark .c-drawer,
.theme-dark .c-drawer .c-drawer-toggle {
    background: transparent;
    padding: 0;
}

.m-image .c-image img {
    margin: 0 auto;
}

.booth .m-banner.legend p {
    display: inline-block;
    padding-bottom: .333em;
    font-size: 24px;
    line-height: 1.2;
}

@media screen and (max-width: 1083px) {
    .booth .m-banner.legend p {
        font-size: 20px;
    }
}

.booth .m-banner.legend p span {
    display: inline-block;
    padding: 0 .875em .75em .875em
}

.booth .m-banner.legend p span:before {
    font-family: MWFMDL2-Xbox;
    display: inline-block;
    padding: 2px 12px 0 0;
    vertical-align: middle;
}

.booth .m-banner.legend .helpdesk:before {
    content: "";
}

.booth .m-banner.legend .photo:before {
    content: "";
}

.booth .m-banner.legend .theater:before {
    content: "";
}

.booth .m-banner.legend .handson:before {
    content: "";
}

.booth .m-banner.legend .gamepasshub:before {
    content: "";
}

.booth .m-banner.legend .gearshop:before {
    content: "";
}

.booth .m-banner.legend .community:before {
    content: "";
}

.booth .m-banner.legend .experience:before {
    content: url("https://assets.xboxservices.com/assets/d2/a1/d2a1d82a-dad9-4b74-8a94-898fbe13c080.svg?n=6785999_Icon-0_Experience_300x300.svg");
    width: 1.5em;
}

@media (forced-colors: active) and (prefers-color-scheme:light) {
    .booth .m-banner.legend .experience:before {
        filter: invert(1);
    }
}

.high-contrast-mode.black-on-white .booth .m-banner.legend .experience:before {
    filter: invert(1);
}

.booth-drawer .m-rich-content-block:first-of-type {
    padding-top: 0;
}

@media screen and (max-width: 1083px) {
    .booth-drawer .m-rich-content-block {
        padding-top: 0;
    }
}

.booth-drawer .c-list {
    margin-left: 6px;
    padding-right: 24px;
}

.booth-drawer .m-rich-content-block [class^="c-heading"] {
    padding-right: 24px;
    /* to match c-list spacing above */
}

.booth-drawer .c-list li {
    padding-bottom: 0;
}

@media screen and (max-width: 1083px) {
    .booth-drawer .c-list {
        padding-right: 0;
    }
    .booth-drawer [data-grid="col-6"],
    .booth-drawer [data-grid="col-4"] {
        width: 100%;
        max-width: 480px;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .booth-drawer .c-list {
        margin-top: 0;
        margin-bottom: 0;
    }
    .booth-drawer .m-rich-content-block>[data-grid="col-6"],
    .booth-drawer .m-rich-content-block>[data-grid="col-4"]:not(:first-of-type) {
        padding-top: 48px;
    }
}

@media screen and (max-width: 1399px) {
    .booth-drawer [data-grid~=stack-4]>[data-grid] {
        padding-bottom: 0;
        padding-top: 0;
    }
}

@media screen and (max-width: 539px) {
    .booth-drawer [data-grid*=col-]:not(.m-banner) {
        padding-top: 0;
    }
}


/*
==================================
EVENTS
==================================
*/

.events {
  padding-bottom: 48px;
}
.events * {
  position: relative;
}

.events__box {
    margin: 0 auto 3% auto;
    /* 3% matches x-margins from width %. only comes into play when stacking */
    width: 97%;
    overflow: hidden;
}

@media screen and (min-width: 1084px) {
    .events__box {
        min-height: 600px;
    }
}

.events__headercontainer .events__header {
    width: 100%;
    /*color: #fff;*/
    padding: 10% 10% 0 0;
    text-align: left;
}

@media screen and (min-width: 1400px) {
    .events__headercontainer .events__header {
        padding-left: 10%;
    }
}

.events__header-cta {
    margin-top: 18px;
}

@media screen and (min-width: 540px) {
    .events__headercontainer .c-call-to-action.green-brdr {
        margin-right: 36px;
    }
}

@media screen and (max-width: 539px) {
    .events__headercontainer .c-call-to-action.green-brdr {
        margin: 0 36px;
    }
}

.events__box {
    position: relative;
    display: flex;
}

.events__box.theme-dark {
    background-color: #4f4f4f;
}

.events__headline {
    font-size: 2.2em;
    padding: 0;
    margin: 0;
    /* top margin for pinpoint pixel-perfect precision */
    line-height: 1em;
    z-index: 40;
}

.events__copy .events__headline {
    font-weight: 700 !important;
}

@media screen and (min-width: 1084px) {
    .events__headline {
        font-size: 3.2em;
        z-index: 48;
        /* to prevent overlap in HC mode */
        margin-bottom: 10%;
    }
}

.events__headline .huge {
    display: block;
    font-size: 2.68em;
    line-height: .9;
    padding: 0;
    margin-bottom: 5%;
    text-indent: -.02em;
    letter-spacing: -.05em;
    z-index: -1;
}

.events__headline .huge[style] {
    font-size: 1em;
}

.events__content {
    width: 100%;
    color: inherit;
    padding: 10% 12.2% 12.2% 12.2%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.events__copy .c-heading {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.18;
}

.events__cta {
    height: 40px;
    bottom: 0;
}

@media screen and (min-width:540px) and (max-width:768px) {
    .events__headline {
        font-size: 1.25em;
    }
    .events__headline .huge {
        font-size: 3em;
    }
}

.events__details .c-heading-3 {
    font-size: 32px;
    line-height: 1.12em;
    padding-bottom: 9px;
    font-weight: 400;
}

.events__details .c-paragraph-4 {
    padding-top: 4px;
    font-weight: 400;
}

.events__details .c-paragraph-4.url {
    word-break: break-all;
    /* URLs can be lengthy and don't always include an obvious break point */
}

.events__details strong {
    font-weight: 700;
}

@media screen and (max-width:1399px) {
    .events>[data-grid~="container"]>section {
        float: none;
        max-width: 793px;
        margin: 0 auto;
    }
}

@media screen and (max-width:1200px) {
    .events>[data-grid~="container"]>section {
        max-width: 80%;
    }
}

@media screen and (max-width:1399px) {
    .events>[data-grid~="container"]>section {
        float: none;
        max-width: 714px;
        margin: 0 auto;
    }
}

@media screen and (max-width:1083px) {
    .events__cta {
        margin-top: 24px;
    }
    .events__headercontainer {
        width: 100% !important;
        max-width: 650px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .events__headercontainer .events__header {
        width: 100%;
        padding: 0 0 48px;
        text-align: center;
    }
    .events__box {
        height: auto;
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }
}

@media screen and (min-width:540px) and (max-width:1083px) {
    .events__content {
        padding: 24px 32px 32px 32px;
        display: block;
    }
    .events__box::after,
    .events__content::after,
    .events__copy::after {
        content: "";
        display: table;
        clear: both;
    }
    .events__headline {
        width: 20.52%;
        float: left;
        margin: 2px 0 0 0;
    }
    .events__cta,
    .events__details {
        width: 79.48%;
        float: right;
    }
}

@media screen and (max-width:767px) {
    .events>[data-grid~="container"]>section {
        max-width: 85.2%;
    }
    .events__box {
        width: 100%;
    }
}

@media screen and (max-width:539px) {
    .events__headline {
        margin-bottom: 10%;
    }
    .events__content,
    .events__headline,
    .events__copy {
        display: block !important;
        float: none !important;
        width: 100%;
    }
}

.events__box a.c-call-to-action.f-lightweight,
.events__box button.c-call-to-action.f-lightweight,
.events__box a.c-call-to-action.f-lightweight:hover,
.events__box button.c-call-to-action.f-lightweight:hover {
    color: inherit;
}