.center-1 {
    margin: 0px;
}

.titleBannerImage {
    max-width: 1400px;
    width: 100%;
    height: 160px;
    text-align: center;
    background: url("/Themes/Cokesbury/Content/images/headers/Checkout.jpg") no-repeat left top;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


/* CATEGORY BANNER STYLES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

/* SECTION HEADER */
.BannerSectionHeaderSmall {width: 100%;height: auto;min-height: 75px;position: relative;justify-content: space-around;}
.BannerSectionHeaderSmallText {
    position: absolute;
    z-index: 40;
    width: 100%;
    text-align: center;
    top:50%;
    transform: translateY(-50%)}
.BannerSectionHeaderSmall img {
    position: relative;
    max-width: 1400px;
    max-height: 160px;
    width: 100%;
    height: 100%;
    min-height: 75px;
    border: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display:block;
}

/* SECONDARY BANNERS */
.BannerSecondaryPromoWrapper {width: 100%;height: auto;display: flex;position: relative;margin-top: 40px;}
.SecondaryPromoImageWrapper {width: 50%;position: relative;flex: 1 1 0;}
    .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper { display: block; position: absolute; z-index: 100; margin: 20px auto; width: 100%; text-align: center; top: 50%; transform: translateY(-50%) }
        .SecondaryPromoImageWrapper .SecondaryPromoProductWrapper img {position: relative; border: 4px solid white; margin: 20px auto; max-height: 300px; width: auto; height: auto; }
    .SecondaryPromoImageWrapper img {position: relative;max-width: 700px;max-height: 500px;width: 100%;height: 100%;border: none;top: 0;bottom: 0;left: 0;right: 0;}
.SecondaryPromoTextWrapper {width: 50%;background-color:var(--main-color);flex: 1 1 0;display: flex;align-items: center;max-height: 500px;}
.SecondaryPromoTextAlign {display: inline-block;vertical-align: middle;padding:50px;}
.SecondaryPromoTextCategory, .SecondaryPromoTextContent, .SecondaryPromoButton {text-align: left;}
.BannerSecondaryPromoWrapper input[type='button'],
.BannerSecondaryPromoWrapper input[type='submit'],
.BannerSecondaryPromoWrapper a.button,
.BannerSecondaryPromoWrapper button {
    background-color: var(--surface-color) !important;
    border-color: var(--surface-color) !important;
    min-width: 24rem;
    color: var(--btn-color);
}


/* TERTIARY BANNERS */
.TertiaryPromoWrapper { width: 100%; height: auto; display: flex; position: relative; justify-content: space-around; margin-top: 40px; pointer-events: all; }
.TertiaryBanner { width: 44%; max-width: 600px; position: relative; }
    .TertiaryBanner .TertiaryBannerContentWrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; }
    .TertiaryBanner .TertiaryPhotoWrapper { z-index: 100; width: 40%; padding-left: 15px; }
        .TertiaryBanner .TertiaryPhotoWrapper img { display: block; max-height: 240px; max-width: 100%; margin: 20px auto; border: 4px solid white;}

        .TertiaryBanner .TertiaryPhotoWrapper.NoBorder img {border: none !important;}

    .TertiaryBanner .TertiaryPromoTextWrapper { z-index: 100; pointer-events: none; padding: 0 15px;}
        .TertiaryBanner .TertiaryPromoTextWrapper span { display: block; text-align: center; pointer-events: none; }
        .TertiaryBanner .TertiaryPromoTextWrapper .TertiaryPromoIcon { display: block; text-align: center; margin: auto; }
    .TertiaryBanner .BackgroundImage { position: relative; max-width: 600px; max-height: 340px; width: 100%; height: 100%; border: none; top: 0; bottom: 0; left: 0; right: 0 }


/* HEADER ADJUSTABLE BANNERS */

.HeaderAdjustable {position: relative;}
    .HeaderAdjustable .HeaderAdjustableTextWrapper {position: absolute;z-index: 40;width: 100%;text-align: center;top: 50%; padding: 0 2rem;transform: translateY(-50%)}
        .HeaderAdjustable .HeaderAdjustableTextWrapper h4 {position: relative;width: 100%;z-index: 40;text-align: center;color: var(--light-text-color);}
        .HeaderAdjustable .HeaderAdjustableTextWrapper .s4 {position: relative;width: 100%;text-align: center;color: var(--light-text-color);}
    .HeaderAdjustable img {position: relative;max-width: 1400px;width: 100%;height: 100%;min-height: 125px;border: none;top: 0;bottom: 0;left: 0;right: 0;}
    .HeaderAdjustable .HeaderAdjustableTextWrapper .SlideFeatureLink {position: relative;width: 100%;text-align: center;margin: auto;margin-top: 20px;color:var(--main-color) !important;line-height: 30px;}

/* HEADER ADJUSTABLE BANNERS IN SLIDER */
.slick-slide {display: none;float: left;height: 100%;min-height: 1px;}
    .slick-slide > .row {
        position: relative;
        max-height:600px;
    }
    /* Equal-height slider panels: flex the track so every slide stretches to the
       tallest one. Slides become flex columns and the row grows to fill (NOT
       height:100% - that resolves circularly during flex intrinsic sizing and
       compressed tall slides on the first attempt). The banner background images
       inside a stretched row fill it with object-fit: cover so they crop instead
       of distort. max-height is lifted inside the slider so the tallest slide's
       real content sets the track. Scoped to #categoryBanners; single banners
       and non-slider pages are untouched. */
    #categoryBanners .slick-track { display: flex; }
    #categoryBanners .slick-slide { height: auto; display: flex; flex-direction: column; }
    #categoryBanners .slick-slide > .row { flex: 1 1 auto; max-height: none; }
    #categoryBanners .slick-slide .DynamicContentHeaderWithVideoBackgroundImage,
    #categoryBanners .slick-slide .HeaderAdjustable > img,
    #categoryBanners .slick-slide .HeaderBannerRow > img,
    #categoryBanners .slick-slide .AuthorBannerRow > img.AuthorBannerRowBackground { width: 100%; height: 100%; object-fit: cover; }
    /* Adjustable banners in sliders convert to the content-driven model: text in
       flow defines the slide height, the image covers behind it. The absolute-
       centered overlay clipped top/bottom whenever it outgrew the image
       (advent2025 "Save Big", vbs "VBS 2026" - 2026-09-16). Mirrors the <=767
       tier, which has always run this pattern (ported from production mobile
       CSS). Standalone full-width Adjustable heroes keep their natural
       image-driven height. */
    #categoryBanners .slick-slide .HeaderAdjustable {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        min-height: 125px;
        padding: 40px 0;
    }
    #categoryBanners .slick-slide .HeaderAdjustable > img {
        position: absolute;
        top: 0;
        left: 0;
        max-width: none;
        min-height: 0;
    }
    #categoryBanners .slick-slide .HeaderAdjustable .HeaderAdjustableTextWrapper {
        position: relative;
        top: unset;
        transform: none;
    }
    /* an Adjustable slide with NO text (empty h4 and s4) is a full-bleed designed
       image whose copy is baked into the artwork (e.g. the VBS logo banner) -
       cover-cropping cuts that copy mid-word, so fit the whole image instead;
       such art is authored on solid grounds, so the letterbox reads as background */
    #categoryBanners .slick-slide .HeaderAdjustable:has(.HeaderAdjustableTextWrapper h4:empty):has(.HeaderAdjustableTextWrapper .s4:empty) > img {
        object-fit: contain;
    }
/*.slick-dotted.slick-slider {margin-bottom: 120px;}*/
.slick-prev, .slick-next {display: none !important;}
.slick-dots {display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;background-color:var(--main-color);}
    .slick-dots li {position: relative;display: inline-block;height: 40px;margin: 10px 0px;padding: 5px 30px;cursor: pointer;font-size: 2rem;text-transform: uppercase;color: rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.5);font-weight: 600;}
        .slick-dots li:last-child {border-right: none;}
        .slick-dots li.slick-active {color: var(--light-text-color);}

/* FAVORITE AUTHOR HEART */
.favorite-link {
    cursor: pointer;
}

.favorite-link::before {
    content: url('/Themes/Cokesbury/Content/images/favorite_author_heart_default_removed.svg');
}

.favorite-link.isFavorited::before {
    content: url('/Themes/Cokesbury/Content/images/favorite_author_heart_added.svg');
}

.favoriteAuthorsWrapper .favorite-link {
    width: 3.5rem;
    vertical-align: middle;
}

/* AUTHOR BANNERS */
.html-category-page .center-2 #categoryBanners,
.html-category-page .center-2 .categoryBanner {
    max-width: none;
    width: 100%;
}

.AuthorBannerRow {
    background-repeat: no-repeat;
    position: relative;
}

/* Product-feature variant, content-driven (same model as the WithVideo banner,
   ruled 2026-09-16): the overlay sits in normal flow and defines the banner
   height while the background image is absolute and covers. The old absolute-
   centered overlay clipped the book cover and the button whenever it was taller
   than the background image's scaled height (/incarnation slider). The cover
   caps at 360px and scales down instead of pinning to 400px wide. */
.AuthorBannerProductBanner {
    display: flex;
    align-items: center;
}
    .AuthorBannerProductBanner > .AuthorBannerRowBackground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .AuthorBannerProductBanner .SlideAuthorBioWrapper {
        position: relative;
        top: unset;
        transform: none;
        align-items: center;
    }
    .AuthorBannerProductBanner .SlideFeaturePhoto {
        min-width: 0;
    }
        /* .AuthorBannerRow. prefix is load-bearing: the base
           .AuthorBannerRow .SlideFeaturePhoto img rule above pins width: 100% at equal
           specificity, so without the bump this override would win only on source order.
           Effective cover size = max-width: 400px (base rule) x max-height: 360px here. */
        .AuthorBannerRow.AuthorBannerProductBanner .SlideFeaturePhoto img {
            max-height: 360px;
            width: auto;
        }
.AuthorRowDefault {
    position: relative;
}


.SlideAuthorBioWrapper {
    position: absolute;
    display: flex;
    z-index: 50;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right:0;
    padding: 5%;
}

.AuthorRowDefault .SlideAuthorBioWrapper {
    position: relative;
    top: 0;
    transform: none;
}
    .AuthorBannerRow .SlideAuthorPhoto img,
    .AuthorBannerRow .SlideFeaturePhoto img {
        display: block;
        width: 100%;
        max-width: 400px;
    }

.AuthorBannerRow .SlideAuthorFeatureWrapper,
.AuthorBannerRow .SildeAuthorBioText {
    margin: auto 0 auto 5%;
    max-width: 63%;
}

    .AuthorBannerRow .SildeAuthorBioText .favorite-link {
        vertical-align:middle;

    }


.SildeAuthorBio,
.SlideFeatureAbout {
    margin-bottom: 2rem;
    font-size: 2.0rem;
    line-height: 1.8;
}


.AuthorBannerRowBackground {
    max-width: 1400px;
    width: 100%;
    height: 100%;
    min-height: 125px;
    border: none;
}


.singleBanner .AuthorBannerRow {
background-repeat: no-repeat;
position: relative;
overflow-y: hidden;
height: auto;

}
.singleBanner .AuthorBannerRow .SlideAuthorBioWrapper {
    position: relative;
    display: flex;
    z-index: 50;
    width: 100%;
    top: auto;
    transform: none;
    left: auto;
    right: auto;
    padding: 5%;
}


.singleBanner .AuthorBannerRow .AuthorBannerRowBackground {
    position: absolute;
    max-width: 1400px;
    width: 100%;
    height: 100%;
    min-height: 125px;
    border: none;
    top: 0;
}


.SlideAuthorFeatureWrapper input[type='button'],
.SlideAuthorFeatureWrapper input[type='submit'],
.SlideAuthorFeatureWrapper a.button,
.SlideAuthorFeatureWrapper button {
    background-color: var(--surface-color) !important;
    border-color:var(--main-color) !important;
    color:var(--main-color);
}


    .placeholderforcontentGrid {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }


    .BannerSectionHeaderLarge {
        width: 100%;
        height: 600px;
        position: relative;
        justify-content: space-around;
    }


        .BannerSectionHeaderLargeTextWrapper:before {
            display: block;
            content: " ";
            width: 100%;
            padding-top: 42.8%;
        }

    h4.BannerSectionHeaderLarge {
        position: absolute;
        top: 35%;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: var(--light-text-color);
    }


    .BannerSectionHeaderLargeText {
        position: absolute;
        top: 45%;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: var(--light-text-color) !important;
        padding: 0 2rem;
    }

    .BannerSectionHeaderLargeTextWrapper h4 {
        top: 35%;
    }

    .BannerSectionHeaderLarge img {
        position: absolute;
        max-width: 1600px;
        max-height: 600px;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }


    .BannerVideoWrapper {
        width: 100%;
        display: flex;
    }

    .VideoHeaderLargeTextWrapper {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }

    .SlideVideoWrapper {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;
    }

        .SlideVideoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    .SlideVideoText {
        width: 50%;
        flex-direction: column;
        justify-content: center;
        background-color:var(--main-color);
        color: var(--light-text-color);
        text-align: center;
    }

        .SlideVideoText .BannerTitle {
            text-transform: uppercase;
            font-size: 2.4rem;
            font-weight: 700;
        }

        .SlideVideoText .BannerContent {
            font-family: var(--secondary-font);
            color: var(--light-text-color);
            font-size: 3.6Rem;
        }


    /* VIDEO BANNER STYLES */

    .primaryPromoVideoWrapper {
        width: 100%;
        max-width: 1400px;
        height: 600px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
    }

        .primaryPromoVideoWrapper .primaryVideoHeadline {
            position: absolute;
            width: 100%;
            bottom: 50%;
            text-align: center;
            color: var(--light-text-color);
            font-size: 3.4rem;
            z-index: 3;
        }

        .primaryPromoVideoWrapper .primaryVideoSubline {
            position: absolute;
            width: 100%;
            top: 50%;
            text-align: center;
            color: var(--light-text-color);
            font-size: 3.4rem;
            z-index: 3;
        }

        .primaryPromoVideoWrapper .BannerOverlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            background-color: rgba(0,0,0,.5);
            z-index: 2;
        }

        .primaryPromoVideoWrapper .VideoContainer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            min-width: 100%;
            height: auto;
            min-height: 100%;
            transform: translateX(-50%) translateY(-50%);
            z-index: -1;
        }


/* Content-driven banner (ruled 2026-09-15): the text and video sit in normal flow
   and define the banner height; the background image is absolutely positioned and
   covers whatever height results. The old model (image in flow, text absolute)
   clipped long copy at any width where the scaled image was shorter than the text.
   Phones restore the stacked image-then-text flow in the max-width:767 block. */
.DynamicContentHeaderWithVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 50px;
}

    .DynamicContentHeaderWithVideo .DynamicContentHeaderWithVideoBackgroundImage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

        .DynamicContentHeaderWithVideo h4.BannerSectionHeaderLarge {
            position: relative;
            top: auto;
            z-index: 400;
            width: 100%;
            text-align: left;
            color: var(--light-text-color);
        }


        .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper {
            /* flex child in flow: takes the space the video leaves. width/height/
               padding neutralize the base .VideoHeaderLargeTextWrapper rule, which
               is a 16:9 padding-bottom aspect hack (height: 0; padding-bottom:
               56.25%) - in the content-driven model that synthetic height is just
               dead space above/below the text */
            position: relative;
            flex: 1 1 auto;
            width: auto;
            height: auto;
            padding: 0;
            z-index: 100;
        }


            .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .BannerSectionHeaderLarge {
                color: var(--light-text-color) !important;
                height: auto !important;
                /* the class doubles as the HeaderLarge banner CONTAINER, whose <=991
                   tier sets min-height: 220px - on this h4 that renders as a 180px
                   void under a one-line headline */
                min-height: 0;
            }

            .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .BannerSectionHeaderLargeText {
                position: relative;
                text-align: left;
                top: 0px;
            }


        .DynamicContentHeaderWithVideo .VideoWrapper {
            /* flex child in flow; width (not flex-basis) so the two-column
               33% override in mediaqueries.css still wins. Capped at the
               embed's native 560px so wide one-column pages don't upscale
               the video (and drag the banner taller with it) */
            position: relative;
            flex: 0 0 auto;
            width: 45%;
            max-width: 560px;
            z-index: 100;
        }

        /* the embed arrives from admin ShareHTML with fixed width/height attributes;
           clamp it to its wrapper at 16:9 so it scales with the banner */
        .DynamicContentHeaderWithVideo .VideoWrapper iframe {
            max-width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }


    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        width: 100%; /* You can set this width to whatever suits your needs */
        margin: 0 auto;
    }

        .videoWrapper video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    /* VIDEO BANNER STYLES */


    /* NOP 4.0 BANNER STYLES **************************************************************************************************************************************** */

.HeaderBannerRow {
    width: 100%;
    height: 400px;
}
    .HeaderBannerRow .HeaderBannerBackgroundWrapper {
        justify-content: space-around;
        position: absolute;
        max-width: 1600px;
        max-height: 600px;
        width: 100%;
        height: 100%;
        border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
        .HeaderBannerRow .HeaderBannerBackgroundWrapper img {
            position: absolute;
            max-width: 1600px;
            max-height: 600px;
            width: 100%;
            height: 100%;
            border: none;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    .HeaderBannerRow .HeaderBannerImageWrapper {
        position: absolute;
        width: 25%;
        height: 100%;
        border: none;
        top: 0;
        left: 0;
        
    }
        .HeaderBannerRow .HeaderBannerImageWrapper img {
            position:absolute;
            top: 50%;
            left: 50%;
            max-width: 300px;
            max-height: 300px;;
            transform: translateX(-50%) translateY(-50%);
        }
    .HeaderBannerRow .HeaderBannerTextWrapper {
        position: absolute;
        width: 75%;
        border: none;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerText {position: relative;
        }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerText li {list-style: disc; margin: 20px;
            position: relative;
        }
        .HeaderBannerRow .HeaderBannerTextWrapper .HeaderBannerButtonWrapper {position: relative; text-align: center;
        }


.HeaderBannerTextWrapper input[type='button'],
.HeaderBannerTextWrapper input[type='submit'],
.HeaderBannerTextWrapper a.button,
.HeaderBannerTextWrapper button {
    background-color: var(--surface-color) !important;
    border-color: var(--main-color) !important;
    color: var(--main-color);
}

.HeaderBannerModalWrapper h4 {
    font-size: 5REM;
}

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader {
        display: flex;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper {
        display: flex;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .labelWrapper {
        flex-basis: 33%
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .labelWrapper {
        flex-basis: 33%;
        text-align: center;
        margin: 5px;
    }


    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .mTextWrapper {
        text-align: right;
    }


    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .mPriceQtyWrapper .qty-input {
        margin: 0px auto;
        display: block;
        text-align: center;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapperHewader .mPriceQtyWrapper label {
        margin: 0px auto;
        display: block;
        text-align: center;
    }
    
    .HeaderBannerModalWrapper .HeaderBannerModalInputWrapper .mPriceQtyWrapper .qty-input {
        margin: 0px auto;
        display: block;
        text-align: center;
    }

    .HeaderBannerModalWrapper .HeaderBannerModalText li {
        list-style: disc;
        margin: 20px;
    }


.SecondaryPromoTextWrapper .s4 {
    text-transform: uppercase;
    text-shadow: none;
}

.SecondaryPromoTextWrapper h4 {
    text-shadow: none;
}

/* AMPLIFY VIDEO LIST (CategoryBanners template) */
.divVideoListWrapper {
    border-top: 1px solid var(--tertiary-color-2);
    padding: 20px;
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 360px 1fr auto;
    column-gap: 20px;
    grid-template-areas: "image text button";
}
.divVideoListWrapper .divVideoImageWrapper { grid-area: image; }
.divVideoListWrapper .divVideoImageWrapper .imgVideoIcon {
    width: 100%;
    height: 100%;
    max-width: 360px;
    max-height: 240px;
    border: 1px solid var(--tertiary-color-2);
    border-radius: 5px;
}
.divVideoListWrapper .divVideoListTextWrapper { grid-area: text; }
.divVideoListTextWrapper .divSliderMainTitle { float: none; }
.divVideoListTextWrapper .divVideoSecondLine { margin-top: 2rem; }
.divVideoListWrapper .divVideoListButtonWrapper { grid-area: button; }
.divVideoListWrapper .divVideoListButtonWrapper .linkStyling { white-space: nowrap; }

    
/* Banner headlines keep their DISPLAY sizes: the global heading scale was reduced
   (h1 64->48, h2 64->44, h3 60->36, h4 54->32, h5 44->28) but full-width banner and
   hero text is meant to be big, so the banner selectors pin the old inherited sizes.
   (Moved from SubPages.css in the banner-CSS consolidation - Banners.css owns banner styling.) */
.HeaderAdjustable .HeaderAdjustableTextWrapper h4,
h4.BannerSectionHeaderLarge,
.BannerSectionHeaderLargeTextWrapper h4,
.SecondaryPromoTextWrapper h4,
.BannerSectionHeaderSmallText {
    font-size: 5.4rem;
}