.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;}
.BannerSectionHeaderSmallTextWrapper {}
.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 { border: 4px solid white; 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: #fff !important;
    border-color: #fff !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%; }
        .TertiaryBanner .TertiaryPhotoWrapper img { display: block; max-height: 240px; margin: 20px auto; border: 4px solid white;}

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

    .TertiaryBanner .TertiaryPromoTextWrapper { z-index: 100; pointer-events: none;}
        .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: #fff;}
        .HeaderAdjustable .HeaderAdjustableTextWrapper .s4 {position: relative;width: 100%;text-align: center;color: #fff;}
    .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;color: #fff;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;
    }
/*.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(256,256,256, 0.5);border-right: 1px solid rgba(256,256,256, 0.5);font-weight: 600;}
        .slick-dots li:last-child {border-right: none;}
        .slick-dots li.slick-active {color: rgba(256,256,256, 1.0);}

/* AUTHOR BANNERS */
.AuthorBannerRow {
    background-repeat: no-repeat;
    position: relative;
}
.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 .SlideAuthorBioWrapper .SildeAuthorBioText {
}

.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: #fff !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 {
    }

        .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: #fff;
    }

    

    .BannerSectionHeaderLargeText {
        position: absolute;
        top: 45%;
        z-index: 100;
        width: 100%;
        text-align: center;
        color: #fff !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;
    }








   



 

        

    .Slidebackground {
    }

    .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: #fff;
        text-align: center;
    }

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

        .SlideVideoText .BannerContent {
            font-family: "Corda-Medium",serif;
            color: #fff;
            font-size: 3.6Rem;
        }









   


    /* VIDEO BANNER STYLES */

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

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

        .primaryPromoVideoWrapper .primaryVideoSubline {
            position: absolute;
            width: 100%;
            top: 50%;
            text-align: center;
            color: #fff;
            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;
        }


.DynamicContentHeaderWithVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .DynamicContentHeaderWithVideo .DynamicContentHeaderWithVideoBackgroundImage {
        width: 100%;

    }

        .DynamicContentHeaderWithVideo h4.BannerSectionHeaderLarge {
            position: relative;
            top: auto;
            z-index: 400;
            width: 100%;
            text-align: left;
            color: #fff;
        }




        

        .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper {
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 100;
            bottom: 0px;
        }


            .DynamicContentHeaderWithVideo .VideoHeaderLargeTextWrapper .BannerSectionHeaderLarge {
                color: #fff !important;
                height: auto !important;
                ;
            }

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



        .DynamicContentHeaderWithVideo .VideoWrapper {
            position: absolute;
            top: 50px;
            right: 50px;
            z-index: 100;
        }


    .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 {
        width: 100%;
        height: 600px;
        position: relative;
        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: #fff !important;
    border-color: var(--main-color) !important;
    color: var(--main-color);
}

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

    .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 .HeaderBannerModalInputWrapper .mPriceQtyWrapper {
    
    }

    .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;
    }




    .HeaderBannerModalWrapper .button {
    }

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

.SecondaryPromoTextWrapper h4 {
    text-shadow: none;
}