#bannerContSpacer {
    height: 0;
}
.isNotExternal#html #bannerContSpacer {
    height: 0 !important;
}
.bannerCont {
    color: #fff;
    background-color: #4083a9;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1;
    word-break: normal;
    word-break: break-word; /* webkit */
    padding: 0 0 0 .5rem;
    box-sizing: border-box;
    left: 0; 
    right: 1rem;
    z-index: 9997;
    display: none;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 .2rem .3rem rgba( 0, 0, 0, .06 );
}
.isExternal .bannerCont {
    position: fixed;
}
.isUsingSBApp .bannerCont {
    top: 0 !important;
}
.bannerCont.bottom {
    position: fixed;
    bottom: 0 !important;
    top: initial !important;
    margin: 0;
}
.bannerCont.blue,
.bannerCont.blue:before {
    background-color: #339fba;
}
.bannerCont.blue2,
.bannerCont.blue2:before {
    color: #333;
    background-color: #c8e0e4;
}
.bannerCont.gray,
.bannerCont.gray:before {
    background-color: #b8b7bc;
}
.bannerCont.yellow,
.bannerCont.yellow:before {
    color: #333;
    background-color: #f7ba55;
}
.bannerCont.green,
.bannerCont.green:before {
    background-color: #38ad60;
}
.bannerCont.red,
.bannerCont.red:before {
    background-color: #e61b2b;
}
.bannerCont.red2,
.bannerCont.red2:before {
    color: #94181b;
    background-color: #ea8781;
}
.bannerCont.black,
.bannerCont.black:before {
    color: #fff;
    background-color: rgba( 0, 0, 0, .85 );
}
.isExternal .bannerCont.touPpBanner {
    position: absolute !important;
}

.bannerText {
    line-height: 1.4;
    padding: 1.8rem 10.5rem 1.8rem 0;
    box-sizing: border-box;
    max-width: 136rem;
    margin: 0 auto;
    position: relative;
}
.bannerTextLink {
    color: #4083a9;
}
.bannerTextLink:hover {
    color: #00597b;
}
.bannerClose {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.bannerClose::before,
.bannerClose::after {
    content: '';
    position: absolute;
    left: .5rem;
    width: 2rem;
    height: .2rem;
    background-color: #fff;
}

.bannerClose::before {
    transform: rotate( 45deg );
}

.bannerClose::after {
    transform: rotate( -45deg );
}

.bannerClose.yellow::before,
.bannerClose.yellow::after {
    background-color: #333;
}

.bannerClose:focus {
    outline: #fff auto .1rem;
}
.bannerClose.bannerCloseCustom {
    background: none;
    width: auto;
    height: 4rem;
    line-height: 4rem;
    font-size: 1.6em;
}

.bannerClose.bannerCloseCustom::before,
.bannerClose.bannerCloseCustom::after {
    content: none;
}

.bannerCont.blue a {
    color: #555;
}
.bannerCont.blue a:hover {
    color: #333;
}
.bannerText {
    width: calc(100% - 3rem) !important;
}

.bannerCont .bannerInitialCta,
.bannerCont .bannerInitialCta:hover,
.bannerCont .bannerInitialCta:active {
    padding: 0;
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
}

/* 1400px */
@media ( max-width: 87.5em ) {
    .bannerCont {
        padding: 0 2rem;
    }
}
/* Tiny & Narrow - 300-1023px */
@media ( max-width: 63.9375em ) { /* 1023px */
    #swagButtonBannerWrapper {
        display: none !important;
    }
}

/* Tiny - 300-767px */

@media ( max-width: 47.9375em ) { /* 767px */

    /* Don't show banners over menus... */
    .isMenuActive .bannerCont {
        visibility: hidden;
        pointer-events: none;
    }
    /* ... But exclude Swag Code, as the banner will be on the bottom of the page. */
    .isSwagCodeMenuActive#html .bannerCont {
        visibility: visible; /* IE 11 */
        visibility: initial;
        pointer-events: auto; /* IE 11 */
        pointer-events: initial;
    }
    
    /* 550px */
    @media ( max-width: 34.375em ) {
        .bannerText {
            padding-right: 2.8rem;
            line-height: 1.3;
        }
    }
}