@charset "UTF-8";

.tracecontent table{
background-color:#FFFFFF;
}

@font-face {
    font-family: 'ABCRom Regular';
    src: url('/templates/assets/fonts/ABCRom-Regular.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ABCRom Medium';
    src: url('/templates/assets/fonts/ABCRom-Medium.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Medium.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'ABCROM Book';
    src: url('/templates/assets/fonts/ABCRom-Book.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ABCRom Extended Black';
    src: url('/templates/assets/fonts/ABCRom-Extended-Black.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Extended-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'ABCRom Compressed Black';
    src: url('/templates/assets/fonts/ABCRom-Compressed-Black.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Compressed-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'ABCRom Mono Book';
    src: url('/templates/assets/fonts/ABCRom-Mono-Book.woff2') format('woff2'), url('/templates/assets/fonts/ABCRom-Mono-Book.woff') format('woff');
    font-style: normal;
}
/*
@font-face {
    font-family: "Aspira";
    src: url("/templates/assets/fonts/Aspira_Regular.otf") format("opentype");
}

@font-face {
    font-family: "Aspira Light";
    src: url("/templates/assets/fonts/Aspira_Light.otf") format("opentype");
}

@font-face {
    font-family: "Aspira Demi";
    src: url("/templates/assets/fonts/Aspira_Demi.otf") format("opentype");
}

@font-face {
    
    src: url("/templates/assets/fonts/Aspira_Bold.otf") format("opentype");
}



@font-face {
    font-family: "Aspira Black";
    src: url("/templates/assets/fonts/Aspira Black.otf") format("opentype");
}
@font-face {
    font-family: "Chronicle Light";
    src: url("/templates/assets/fonts/ChronicleDisp-Light.otf") format("opentype");
}
@font-face {
    font-family: "Chronicle";
    src: url("/templates/assets/fonts/ChronicleDisp-Roman.otf") format("opentype");
}
    */
/*
	Intensify by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/* Reset */
html {
    scroll-behavior: smooth;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}
    /*this code makes it so the trace wraps. Otherwise it makes the page super wide and screws up the top navigation on dev pages*/
    span.tracecontent {
        width:100%;
        line-break:anywhere;
    }
    /* Works on Firefox */
    nav {
        scrollbar-width: thin;
        scrollbar-color: #333333;
    }

    /* Works on Chrome, Edge, and Safari */

    nav::-webkit-scrollbar {
        width: 12px;
    }

    nav::-webkit-scrollbar-track {
        background: #333333;
    }

    nav::-webkit-scrollbar-thumb {
        background-color: #818284;
        border-radius: 20px;
        border: 1px solid #333333;
    }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/* UPDATED FEB 2026 for NEW DESIGN */
body {
    color: #000000;
    font-size: 19px;
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    letter-spacing: -0.5px;
    -webkit-text-size-adjust: none;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}



p {
    margin-bottom: 1em;
}

.mobShow {
    display: none;
}
/* Box Model */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Containers */

.container {
    margin-left: auto;
    margin-right: auto;
    width: 65em;
}




.lightbg {
    background-color: #eeeeee;
}




/* Basic */

@-ms-viewport {
    width: device-width;
}

body {
    -ms-overflow-style: scrollbar;
    background: #fff;
}

.inner {
    margin: 0 auto;
    max-width: 65em;
}
/*Below adjusts anchor links to show lower to account for the fixed header height*/

:target {
    scroll-margin-top: 150px;
    scroll-behavior: smooth;
}
/* Type Removed font 'ABCROM Regular', for testing */
input, select, textarea {
    color: #333333;
    font-size: 12pt;
   font-family: Arial, Helvetica, sans-serif; 
    line-height: 1.5;
}

td, p {
}

    td[valign=top] {
        vertical-align: top;
    }

strong, b, .strong, .AspiraBold {
    font-family: 'ABCRom Medium';
}
.AspiraDemi {
   
    font-weight: normal;
}
.AspiraHeavy {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
}
.chronicle {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
}
em, i {
    font-style: italic;
}
.popupSection1USA a.noUnderline:hover, .popupSection2USA a.noUnderline:hover, .popupSection3USA a.noUnderline:hover, .popupSection4USA a.noUnderline:hover, .popupSection5USA a.noUnderline:hover, .popupSection6USA a.noUnderline:hover, .popupSection7USA a.noUnderline:hover, .popupSection8USA a.noUnderline:hover {
    text-decoration: none;
}

.popupSection1CAN a.noUnderline:hover, .popupSection2CAN a.noUnderline:hover, .popupSection3CAN a.noUnderline:hover, .popupSection4CAN a.noUnderline:hover, .popupSection5CAN a.noUnderline:hover, .popupSection6CAN a.noUnderline:hover, .popupSection7CAN a.noUnderline:hover, .popupSection8CAN a.noUnderline:hover {
    text-decoration: none;
}

/*p {
    margin: 0 0 2em 0;
    
}*/


/*Titles*/


h1 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    font-weight: 500;
    margin-top: 1em;
    font-size: 2em;
    line-height: 1.3;
}

h2 {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-size: 48px;
    line-height: initial;
    margin: 0;
}

h3 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    margin: 0 0 1em 0;
    font-weight: normal;
    color: #000;
    font-size: 1.8em;
    text-transform: uppercase;
}


h4 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    margin: 0 0 1em 0;
    text-decoration: none;
    color: #000;
    font-size: 1em;
    line-height: initial;
}




h5 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    color: #727a82;
    line-height: 1.5;
    margin: 0 0 1em 0;
    font-size: 0.9em;
}

h6 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    color: #727a82;
    line-height: 1.5;
    margin: 0 0 1em 0;
    font-size: 0.7em;
}

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: inherit;
        text-decoration: none;
    }

.mainHeadlineH1 {
    text-align: center;
    margin: 0 auto;
    font-size: 103px;
    line-height: 1; 
    clear: both;
    color: #000;
    padding: 10px 0px 40px 0px;
    width: 100%;
    margin: 0 auto;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    margin-top:30px;
}
.mainText {
    max-width: 839px;
    font-size:19px;
    margin: 0 auto;
    text-align: center;
}
.divHeroImg {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.divHeroImg img{
    width: 100%;
}

.divHeroImgCentered {
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

    .divHeroImgCentered img {
        width: 100%;
    }

.divMainTextTitle {
    font-size: 103px;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    text-align:center;
    line-height:1;
}
.divUnderTextTitle {
    font-size: 19px;
    text-align: center;
    margin: 0 auto 55px auto;
}
.redTextTitle {
    color: #FF2000;
}
.slick-dotted.slick-slider {
    margin-bottom: 15px !important;
}
.heroText {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 19px;
    margin-left: 104px;
    max-width: 840px;
}

.heroText h1 {
    font-size: 103px;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    color: #FF2000;
    margin-top: 81px;
    line-height: 87px;
}
.lang-fr .heroText h1 {
    font-size:60px;
    line-height:1;
}
.heroDesc {
    margin-top: 40px;
}
.heroButton {
    margin-top: 34px;
}
.heroBanner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.divHeroImgCentered img {
    width: 100%;
    height: auto;
    display: block;
}

/* FULL overlay over image */
.heroTextCenteredWrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    text-align: center;
/*    padding-left: 30px;
    padding-right: 30px;*/
    box-sizing: border-box;
}
    .heroTextCenteredWrapper em {
        font-style: normal;
        color: #FF2000;
    }

    .heroTextCenteredWrapper .heroDesc {
        color: #fff;
    }

.heroTextCentered {
    width: 970px;
    max-width: 100%;
}

    .heroTextCentered h1 {
        font-size: 103px;
        line-height: 0.9em;
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        color: #fff;
        margin: 0;
    }

.heroText .heroDesc {
    max-width: 700px;
}
/* Optional description */
.heroDescCentered {
    margin: 40px auto 0 auto;
    max-width: 700px;
    font-size: 19px;
    line-height: 1.5em;
    color: #fff;
}

.heroButtonCentered {
    margin-top: 34px;
}


@media (max-width: 1024px) {
   
    .heroTextCentered h1 {
        font-size: 80px;
    }
}
@media (max-width: 768px) {
    .heroTextCenteredWrapper {
        position:relative;
        display:initial;
        text-align:left;
        padding:0;
    }
    .heroTextCentered h1 {
        color: #000;
        text-align: left;
    }
    .heroTextCenteredWrapper .heroDesc {
        color:#000;
    }
    .heroTextCentered {
        max-width: 100%;
        margin: 20px;
        width: initial;
    }
}

    



/*grid with 5 tiles on home page*/
    .divImgGrid5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        width: 1358px;
        max-width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .divImgGrid5Container {
        position: relative;
        overflow: hidden;
    }
        /* default image sits in the flow; hover image layers on top */
        .divImgGrid5Container img.img-default {
            display: block;
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;
        }

        /* hover image is positioned absolute and hidden by opacity */
        .divImgGrid5Container img.img-hover {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        /* On hover, reveal the -over image */
        .divImgGrid5Container:hover img.img-hover {
            opacity: 1;
        }

/*grid with 4 tiles on journeylanding */
.divImgGrid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 1358px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.divImgGrid4Container {
    position: relative;
    overflow: hidden;
}
    /* default image sits in the flow; hover image layers on top */
    .divImgGrid4Container img.img-default {
        display: block;
        width: 100%;
        height: auto;
        transition: opacity 0.3s ease;
    }

    /* hover image is positioned absolute and hidden by opacity */
    .divImgGrid4Container img.img-hover {
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0; */
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    /* On hover, reveal the -over image */
    .divImgGrid4Container:hover img.img-hover {
        opacity: 1;
    }
/* height of text to make consistent*/
.divImgGrid4Container .divImgGridSubTitle {
    max-width:initial;
    height:83px;
}



/* Position the text wrapper over the image */
.divImgGridTextWrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 20px 20px 25px;
    z-index: 2; 
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    text-align: left;
    color: #fff;
}
/*overwrite for the journeylanding page - no gradient needed*/
.divImgGrid4Container .divImgGridTextWrapper, .divImgGrid5.divJourneyTiles .divImgGridTextWrapper {
    background: initial;
}
.divImgGrid5Container .divImgGridTextWrapper {
    bottom:0;
}

.divImgGridTitle {
    font-size: 42px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'ABCRom Compressed Black';
    line-height: 1.5;
}

.divImgGrid5.divJourneyTiles .divImgGridTitle {
    line-height: 42px;
    padding-bottom: 10px;
}


.divImgGridSubTitle {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.18px;
    max-width: 160px;
}
.divImgGrid5.divJourneyTiles .divImgGridSubTitle {
    max-width: initial;
    height:75px;
}

.divImgGrid5Container .divImgGridSubTitle {
    font-size: 14px;
}
.imgNails .divImgGridSubTitle {
    max-width: 140px;
}
    /* Make sure the image fills the block background */
    .divImgGrid5 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }





    .divFourColumnIconBlock {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 1358px;
        max-width: 100%;
        margin: 42px auto;
        padding: 0 10px;
    }

        .divFourColumnIconBlock div {
            text-align: center;
            max-width: 300px;
        }

        .divFourColumnIconBlock img {
            max-width: 38px;
        }

        .divFourColumnIconBlock h2 {
            font-size: 28px;
            font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        }

        .divFourColumnIconBlock span {
            font-size: 16px;
            margin: 5px auto;
            display: block;
            max-width: 240px;
        }

    .mainHeadlineH1 em {
        color: #FF2000;
        font-style: normal;
    }

    .mainTitleH1 {
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    }
    /*.mainTitleH1 span {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        font-style:initial;
    }*/


    .midTitlesDashboard {
        margin: 0 0 .5em 0;
        font-size: 1.3em;
    }

        .midTitlesDashboard span {
            font-family: 'ABCROM Medium', Arial, Helvetica, sans-serif;
        }

    .smlTitlesDashboard {
        font-weight: 400;
        font-size: 1.2em
    }

    .medTitle {
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        line-height: 1;
        margin: 0;
        font-weight: normal;
        color: #000;
        font-size: 28px;
    }

    .largeTxt {
        font-size: 2.2em;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        display: block;
    }


    #LblMidTextTitle {
        font-size: 32px;
    }

    .divLMSContainer.divUnderRotator {
        margin: 30px auto 60px auto;
    }

    /*Layout and Colors ----------------*/
    .mainContentSection {
        flex: 1 0 auto;
    }

    .clearB {
        clear: both;
    }

    .clearR {
        clear: right;
    }

    .clearL {
        clear: left;
    }



    .redIcon {
        color: #BB0C2F
    }

    .lightGrey {
        color: #bbbbbb;
    }

    .divLMSContainer {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }

    .divLMSContainerFull {
        width: 100%;
        margin: 0 auto;
    }

    .bgTanHalf {
        background-color: #e2e3e4;
        max-width: 50%;
    }

    .bgGrey {
        background-color: #e2e3e4;
        max-width: 40%;
    }

    .bgTanFull {
        background-color: #000000;
    }


    .bgLightFullRounded {
        background-color: #f2f3f4;
        border-radius: 8px;
        /*background-color: #f2f3f4;*/
    }

    .bgDarkFull {
        background-color: #e2e3e4;
        color: #000;
    }

    .bgBlackFull {
        background-color: #000;
    }

    .bgGreenFull {
        background-color: #e0efe1;
    }

    .bgRedFull {
        background-color: #f3b0b0;
    }

    .bgWellaRedFull {
        background-color: #FF2000;
    }


    .bgGrid {
    }

    .pad1em {
        padding: 1em;
    }

    .pad3px {
        padding: 3px;
    }

    div.padTop {
        padding-top: 1em;
    }

    .orange {
        color: #ff692a;
    }

    .redTitleSML {
        color: #000;
        line-height: 1.2;
        text-transform: uppercase;
        font-size: .9em;
        padding: 5px 3px 0 3px;
        display: block;
    }

    /* ClearFix */
    .clearFix:before,
    .clearFix:after {
        content: "";
        display: table;
    }

    .clearFix:after {
        clear: both;
    }

    .clearFix {
        zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    }
.upperCase {
    text-transform: uppercase;
}
sub {
    font-size: 0.8em;
    position: relative;
    top: 0.5em;
}

    sup {
        font-size: 0.8em;
        position: relative;
        top: -0.5em;
    }

    blockquote {
        font-style: italic;
        margin: 0 0 2em 0;
    }

    cite {
        display: block;
    }

        cite.author {
            font-weight: 400;
        }

        cite.company {
            font-size: .8em;
        }

    figure {
        margin: 0 0 2em 0;
    }

    code {
        background: rgba(144, 144, 144, 0.075);
        border-radius: 8px;
        border: solid 1px #dee1e3;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0.25em;
        padding: 0.25em 0.65em;
    }

    pre {
        -webkit-overflow-scrolling: touch;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0 2em 0;
    }

        pre code {
            display: block;
            line-height: 1.75;
            padding: 1em 1.5em;
            overflow-x: auto;
        }

    hr {
        border: 0;
        border-bottom: 3px double #dee1e3;
        margin: 2em 0;
    }

        hr.major {
            margin: 3em 0;
        }

    /*Alignment*/

    .align-left {
        text-align: left;
    }

    .align-center {
        text-align: center;
    }

    .align-right {
        text-align: right;
    }

    .floatR {
        float: right;
    }

    .floatL {
        float: left;
    }

    .inlineB {
        display: inline-block;
    }

    .uCase {
        text-transform: uppercase;
    }
    /*Links*/
    a {
        color: #3c3f40;
        text-decoration: none;
    }

        a:hover {
            text-decoration: none;
        }


    /* Section/Article */

    section.special, article.special {
        text-align: center;
    }

    header p {
        color: #bbb;
        position: relative;
        margin: 0 0 1.5em 0;
    }

    header h1 + p {
        font-size: 1.25em;
        margin-top: -1em;
    }

    header h2 + p {
        font-size: 1.25em;
        margin-top: -1em;
    }

    header h3 + p {
        font-size: 1.1em;
        margin-top: -0.8em;
    }

    header h4 + p,
    header h5 + p,
    header h6 + p {
        font-size: 0.9em;
        margin-top: -0.6em;
    }

    .headerSpacer {
        height: 125px;
    }

    .headerSpacerExt {
        margin-top: 125px;
    }
    /*FORM*/
    ::-webkit-input-placeholder {
        color: #bbb !important;
        opacity: 1.0;
    }

    :-moz-placeholder {
        color: #bbb !important;
        opacity: 1.0;
    }

    ::-moz-placeholder {
        color: #bbb !important;
        opacity: 1.0;
    }

    :-ms-input-placeholder {
        color: #bbb !important;
        opacity: 1.0;
    }

    .formerize-placeholder {
        color: #bbb !important;
        opacity: 1.0;
    }

    /* Box */

    .box {
        border-radius: 0;
        border: none;
        margin-bottom: 2em;
        overflow: hidden;
    }

        .box > :last-child,
        .box > :last-child > :last-child,
        .box > :last-child > :last-child > :last-child {
            margin-bottom: 0;
        }

        .box .image.fit {
            margin: 0;
        }

        .box .content {
            padding: 1.5em;
        }

        .box.alt {
            border: 0;
            border-radius: 0;
            padding: 0;
        }

        .box .content p {
            text-align: center;
            font-size: .9em;
        }

        .box H3 {
            font-weight: normal;
            text-transform: uppercase;
            color: #BB0C2F;
            margin: 0;
            font-weight: 500;
            text-align: center;
        }

        .box a {
            display: block;
        }





    /* Icon */

    .icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }

        .icon::before {
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
        }

        .icon > .label {
            display: none;
        }

    /* Image */
    img {
        max-width: 100%;
    }

    .image {
        border: 0;
        display: inline-block;
        position: relative;
    }

        .image img {
            display: block;
        }

        .image.left, .image.right {
            max-width: 40%;
        }

            .image.left img, .image.right img {
                width: 100%;
            }

        .image.left {
            float: left;
            padding: 0 1.5em 1em 0;
            top: 0.25em;
        }

        .image.right {
            float: right;
            padding: 0 0 1em 1.5em;
            top: 0.25em;
        }

        .image.fit {
            display: block;
            margin: 0 0 2em 0;
            width: 100%;
        }

            .image.fit img {
                width: 100%;
            }

        .image.round img {
            border-radius: 100%;
        }

    #hairPage .image.round img {
        border-radius: 100%;
        max-width: 350px;
        float: left;
        padding: 2em;
    }

    .image.main {
        display: block;
        margin: 0 0 3em 0;
        width: 100%;
    }

        .image.main img {
            width: 100%;
        }

    .noImgIcon {
        font-size: 4em;
        color: lightgray;
    }

    /* List */
    ol {
        list-style: decimal;
        margin: 0 0 2em 0;
        padding-left: 1.25em;
    }

        ol li {
            padding-left: 0.25em;
        }

    ul {
        list-style: disc;
        margin: 0 0 2em 0;
        padding-left: 1em;
    }

        ul li {
            padding-left: 0.5em;
        }

        ul.icons {
            cursor: default;
            list-style: none;
            padding-left: 0;
        }

            ul.icons li {
                display: inline-block;
                padding: 0 1em 0 0;
            }

                ul.icons li:last-child {
                    padding-right: 0;
                }

                ul.icons li .icon:before {
                    font-size: 2em;
                }

    /*li.redLi {
    list-style: none;
    margin: 1em 0;
}

    li.redLi::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-top:4px;
        vertical-align: top;
        background-image: url('/shop/images/logos/li-red.png');
    }

    li.redLi span {
        display: inline-block;
        width: 90%;
        padding-left: 1em;
    }*/

    /* Table */

    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    table td {
        padding: 0;
    }

    table tbody tr {
        border-left: 0;
        border-right: 0;
    }


    td[colspan], td[valign], td[width] {
        padding: 0;
    }

    table th {
        color: #727a82;
        font-size: 0.9em;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        font-weight: bold;
        padding: 0 0.75em 0.75em 0.75em;
        text-align: left;
    }

    table thead {
        border-bottom: solid 2px #dee1e3;
    }

    table tfoot {
        border-top: solid 2px #dee1e3;
    }

    table.alt {
        border-collapse: separate;
    }

        table.alt tbody tr td {
            border: solid 1px #dee1e3;
            border-left-width: 0;
            border-top-width: 0;
        }

            table.alt tbody tr td:first-child {
                border-left-width: 1px;
            }

        table.alt tbody tr:first-child td {
            border-top-width: 1px;
        }

        table.alt thead {
            border-bottom: 0;
        }

        table.alt tfoot {
            border-top: 0;
        }


    /*BUTTONS*/

input[type="submit"], input[type="reset"], input[type="button"], button, .button, .buttonNew, #PnlClickThroughSlideButtons .slideButton, #PnlClickThroughSlideButtons2 .slideButtonCustom {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: #FF2000;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
    /* padding: 20px 32px;*/
    padding: 14px 22px;
    /*  min-width: 111px; - removed to fix the elfsight navigation arrows being stretched */
    text-transform: uppercase;
    font-size: 14px;
    line-height: 15.96px;
    text-transform: uppercase;
    letter-spacing: 0.42px;
}

        .button.topNavButton {
            font-size: .7em;
            padding: 8px 30px 7px 30px;
            margin-top: 15px
        }
.eventListResults .button {
    padding: 14px 22px;
}
#_ctl13_LblAdmin .button {
    background-color: #000;
}

    .journeyTierMain .button {
        text-wrap: auto;
    }

    input[type="buttonClear"], .buttonClear {
        background-color: transparent;
        border: 1px solid #fff;
    }

    input[type="buttonBlack"], .buttonBlack {
        background-color: #000;
        color: #fff;
    }

    input[type="buttonWhite"], .buttonWhite {
        background-color: #fff !important;
        color: #FF2000 !important;
    }

    #btnRegister, #btnLogin {
        white-space: break-spaces;
    }

    .buttonTan {
        background-color: #e2e3e4;
        color: #000;
        font-weight: bold;
    }

    .divBthCheckout {
        float: right;
    }

    .greyOut {
        background-color: #9e9e9e;
        cursor: initial;
    }

    .bigGreyButton {
        cursor: pointer;
        display: inline-block;
        padding: 3px;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        text-align: center;
        text-decoration: none;
        padding: 10px 22px 7px 22px;
        border-radius: 20px;
        background-color: #f3f3f3;
        color: #000;
        vertical-align: top;
        line-height: 1;
    }

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button:hover {
    }

    .button.greyOut:hover {
    }

    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    button:active,
    .button:active {
    }

    input[type="submit"].icon,
    input[type="reset"].icon,
    input[type="button"].icon,
    button.icon,
    .button.icon {
        padding-left: 1.35em;
    }

        input[type="submit"].icon:before,
        input[type="reset"].icon:before,
        input[type="button"].icon:before,
        button.icon:before,
        .button.icon:before {
            margin-right: 0.5em;
        }

    input[type="submit"].fit,
    input[type="reset"].fit,
    input[type="button"].fit,
    button.fit,
    .button.fit {
        display: block;
        margin: 0 0 1em 0;
        width: 100%;
    }

    input[type="submit"].small,
    input[type="reset"].small,
    input[type="button"].small,
    button.small,
    .button.small {
        font-size: 0.8em;
    }

    input[type="submit"].big,
    input[type="reset"].big,
    input[type="button"].big,
    button.big,
    .button.big {
        font-size: 1.35em;
    }

    input[type="submit"].alt,
    input[type="reset"].alt,
    input[type="button"].alt,
    button.alt,
    .button.alt {
        background-color: rgba(144, 144, 144, 0.075);
        box-shadow: inset 0 0 0 1px #dee1e3;
        color: #727a82 !important;
    }

        input[type="submit"].alt:hover,
        input[type="reset"].alt:hover,
        input[type="button"].alt:hover,
        button.alt:hover,
        .button.alt:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        input[type="submit"].alt:active,
        input[type="reset"].alt:active,
        input[type="button"].alt:active,
        button.alt:active,
        .button.alt:active {
            background-color: rgba(144, 144, 144, 0.2);
        }

        input[type="submit"].alt.icon:before,
        input[type="reset"].alt.icon:before,
        input[type="button"].alt.icon:before,
        button.alt.icon:before,
        .button.alt.icon:before {
            color: #bbb;
        }

    input[type="submit"].special,
    input[type="reset"].special,
    input[type="button"].special,
    button.special,
    .button.special,
    .buttonNew.specialNew {
        background-color: transparent;
        border: 1px solid #000;
        color: #000;
    }

    input[type="submit"].tab,
    input[type="reset"].tab,
    input[type="button"].tab,
    button.tab,
    .button.tab {
        background: linear-gradient(0deg, rgb(193 193 193) 0%, rgba(221,221,221,1) 100%);
        color: #222;
    }

        input[type="submit"].tab:hover,
        input[type="reset"].tab:hover,
        input[type="button"].tab:hover,
        button.tab:hover,
        .button.tab:hover {
            background: linear-gradient(0deg, rgb(169 169 169) 0%, rgba(169,169,169,1) 100%);
            color: #222;
        }

        input[type="submit"].tab.active,
        input[type="reset"].tab.active,
        input[type="button"].tab.active,
        button.tab.active,
        .button.tab.active {
            background: linear-gradient(0deg, rgb(169 169 169) 0%, rgba(169,169,169,1) 100%);
            color: #222;
        }

    input[type="submit"].special:hover,
    input[type="reset"].special:hover,
    input[type="button"].special:hover,
    button.special:hover,
    .button.special:hover,
    .butonNew.specialNew:hover {
        background-color: transparent;
        border: 1px solid #BB0C2F;
    }

    input[type="submit"].special:active,
    input[type="reset"].special:active,
    input[type="button"].special:active,
    button.special:active,
    .button.special:active,
    .butonNew.specialNew:active {
        background-color: transparent;
        border: 1px solid #BB0C2F;
    }

    input[type="submit"].disabled, input[type="submit"]:disabled,
    input[type="reset"].disabled,
    input[type="reset"]:disabled,
    input[type="button"].disabled,
    input[type="button"]:disabled,
    button.disabled,
    button:disabled,
    .button.disabled,
    .button:disabled {
        background-color: #767d85 !important;
        box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15);
        color: #fff !important;
        cursor: default;
        opacity: 0.25;
    }



    /* Flex */

    .flex {
        display: -ms-flexbox;
        -ms-flex-wrap: nowrap;
        -ms-flex-pack: justify;
        -ms-flex-align: stretch;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        -moz-align-items: stretch;
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        align-items: stretch;
    }

        .flex.flex-3 .flex-item {
            -ms-flex: 0 1 auto;
            -ms-flex-preferred-size: 30%;
            -moz-flex-basis: 30%;
            -webkit-flex-basis: 30%;
            -ms-flex-basis: 30%;
            flex-basis: 30%;
        }

            .flex.flex-3 .flex-item.left {
                text-align: right;
            }




    /*Wrapper*/
    .wrapper {
        padding: 6em 0 4em 0;
    }

    .wrapperSml {
        padding: 3em 0;
    }

    .wrapper.style1 {
        background: #67bee3;
        color: #000;
    }

    .wrapper h3, .wrapper h4, .wrapper h5 {
        color: #3c3f40;
    }

    #LMSLandingPage .wrapper.style1, #LMSCalendarNew .wrapper.style1, #LMSDetailPage .wrapper.style1 {
        background-color: #e2e3e4
    }

    .wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5 {
        color: #fff;
    }

    .wrapper.style1 cite.author {
        color: #fff;
    }

    .wrapper.style2 {
        background: #000;
        color: #000;
        padding: 2em 0;
    }

        .wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5 {
            color: #BB0C2F;
        }

        .wrapper.style2 cite.author {
            color: #BB0C2F;
        }



    /* Header */


    #header {
        background: #fff;
        cursor: default;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        height: 125px;
        z-index: 10001;
        box-shadow: #cccccc 1px 1px 3px;
    }

    a.linkWellaMall {
        /*    float: left;*/
        padding-left: 50px;
        margin-right: auto;
    }

    .divSignin {
        display: flex;
        flex-wrap: nowrap;
        justify-self: right;
        margin-right: 50px;
    }

    .cartBut {
        margin: 0 50px 0 10px;
    }

    .linkPhone {
        display: inline-block;
    }

.signinBut, .acctBut, .sideSigninBut, .sideAcctBut {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    padding: 12px 24px;
    border: 1px solid black;
    text-transform: uppercase;
    font-family: 'ABCRom Mono Book';
    letter-spacing: 0.42px;
    font-size: 14px;
}

    .acctBut {
        min-width: 125px;
    }

        .acctBut:hover {
            cursor: pointer;
        }

    .signOutIcon {
        margin-right: 20px;
    }
}
.divUserLink {
}
.headerGrid {
    align-items: center;
    max-width: 1440px;
    position: relative;
    z-index: 100;
}
.divLogo {
    height: 24px;
    align-self: center;
    justify-self: left;
    padding-left: 50px;
}
    .divLogo a {
        height: 25px;
        display: inline-block;
    }

.headerCANADA .divLogo {
    height: 34px;
}
.headerCANADA .signinBut {
    width:160px;
}
.linkLanguageSwitch {
    margin-right: 30px;
}
.rewards .divLogo {
    height: 60px;
}
.newNav {
    font-weight: bold;    
    color: #d51348;
    font-size: .9em;
    padding-left:5px;
}
.divBlockNavLinks.mainNav {
    padding: 15px 0 30px 0;
    float: left;
    text-align:left;
}
.divBlockNavLinks.light {
    padding: 15px 0 15px 0;
}

@supports (display: grid) {
    .headerGrid {
        height: 75px;
        display: grid;
        grid-template-columns: 272px auto 210px;
        align-items: center;
        grid-gap: 20px;
        margin: 0 auto;
    }
    /*.headerGrid {
       display: grid;
        grid-template-columns: 28% auto;
        margin: 20px;
        align-items: center;
        grid-gap: 20px;
    }*/

    .headerGridRewards {
        display: grid;
        grid-template-columns: 22% 40% 35%;
        margin: 20px;
        align-items: center;
        grid-gap: 20px;
    }

    .headerCANADA .headerGrid {
        grid-template-columns: 315px auto 210px;
    }

    .divBlockNavLinks.mainNav {
        padding: 0;
    }



    .divBlockNavLink.mainNav {
        padding: initial;
        float: initial;
    }

    .divBlockNavLink.mainNav {
        padding: initial;
    }
}
.butNavSignIn {
    text-align: right
}
#header .logo {
    color: #3c3f40;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: -5px;
    text-decoration: none;
    vertical-align: top;
}

#header .siteLogo {
    max-width: 240px;
    max-height:50px;
}
.rewards #header .siteLogo {
    max-width: 225px;
    max-height: initial;
}
#header .logoDiv {
    height: 78px;
    padding-top: 10px;
}


#header nav {
    display:none;
}

#header nav a {
    text-decoration: none;
    display: inline-block;
}

.menubutton {
    margin-top:17px;
}


.topBlackBar {
    background-color: #000000;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-align: right;
    font-size: 14px;
    line-height: 19.88px;
    letter-spacing: .42px;
    padding: 16px 0;
    height: 48px;
}
.topBlackBarContainer {
    max-width: 1440px;
    margin: 0 auto;
    display:flex;
    justify-content:flex-end
}

    .topBlackBar a {
        color: #FFFFFF;
        text-decoration: none;

    }
    .topBlackBar .container1440 {
        display:grid;
        grid-template-columns:272px auto;
       
    }
.topBlackBarLinksLeft {
    justify-self:right;
    padding-right:24px;
}
.topBlackBarLinksRight {
    justify-self: right;
    padding-right: 30px;
}
.WRLogin {
    text-align: left;
    color: #fff;
    float: left;
    padding-left: 50px;
    text-transform: uppercase;
    margin-right: auto;
}
.shopTitleMobHide {
    display: inline-block;
}

.shopTitleMobShow {
    display: none;
}


.userNameHead a {
    margin:0;
}
/*.signOutBut a {
    margin: 0 5px 0 0;
}*/
.closeSearch {
    cursor:pointer;
}
.popupArea1USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 362px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size:14px;
}
.popupArea2USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 262px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}
.popupArea3USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 262px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}
.popupArea4USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 262px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}
.popupArea5USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 262px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}
.popupArea6USA {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 262px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}
.popupSection1USA a.learnButton, .navbar-menu-inner .learnButton {
    background: #BA0C2F;
    color: #fff;
    padding: 20px 32px;
    margin-top: 47px;
    margin-left: 70px;
    position: relative;
    text-decoration: none;
    border: 1px solid #BA0C2F;
}
    .popupSection1USA a.learnButton:hover, .navbar-menu-inner .learnButton:hover {
        color: #BA0C2F;
        background: #fff;
        text-decoration: none;
    }




.popupArea1CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 152px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupArea2CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 152px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupArea3CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 152px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupArea4CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupArea5CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupArea6CAN {
    display: none;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    background-color: #EFEFEF;
    padding: 20px;
    box-shadow: #adadad 0 0 15px;
    text-align: left;
    font-size: 14px;
}

.popupSection1CAN a.learnButton, .navbar-menu-inner .learnButton {
    background: #BA0C2F;
    color: #fff;
    padding: 20px 32px;
    margin-top: 77px;
    position: relative;
    left: -32px;
    text-decoration: none;
    border: 1px solid #BA0C2F;
}

.navbar-menu-inner .learnButtonSide {
    background: #BA0C2F;
    color: #fff;
    padding: 20px 32px;
    margin-top: 20px;
    position: relative;
    text-decoration: none;
    border: 1px solid #BA0C2F;
}

    .popupSection1CAN a.learnButton:hover, .navbar-menu-inner .learnButton:hover {
        color: #BA0C2F;
        background: #fff;
        text-decoration: none;
    }


.linkUnderline:hover {
    border-bottom: 1px solid #f2f2f2;
    text-decoration: none !important;
}
.container1440 {
    max-width: 1440px;
    margin: 0 auto;
}
.navbar-menu-inner ul, .navbar-menu-inner li {
    padding-left: 0;
}




.rewards .popupArea {
    left: 100px;
    width: 740px;
}
.rewards .popupArea4 {
    width: 175px;
    height: initial;
    position: fixed;
    right: 3px;
    top: 113px;
}
.rewards .popupDiv5 {
    
}
.popupBox {
    top:125px;
    position: fixed;
    width: 100%;
    z-index: 10000; /*THIS SHOULD BE 1 LESS THAN THE HEADER, which is currently 10001*/
}

.popupSection {
    display: none;
}
    .popupSection a {
        text-decoration: none;
    }

.popupSection1USA {
    display: grid;
    grid-template-columns: repeat(5, 210px);
    padding: 16px;
    justify-content: center;
    margin: 0 auto;
    justify-items: center;
}

.popupSection2USA, .popupSection3USA, .popupSection4USA, .popupSection5USA, .popupSection6USA {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    padding: 16px;
    justify-content: center;
    margin: 0 auto;
    justify-items: left;
}
    .popupSection1USA > div, .popupSection2USA > div, .popupSection3USA > div, .popupSection4USA > div, .popupSection5USA > div, .popupSection6USA > div, {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .popupSection1USA a,
    .popupSection1USA b,
    .popupSection2USA a,
    .popupSection2USA b,
    .popupSection3USA a,
    .popupSection3USA b,
    .popupSection4USA a,
    .popupSection4USA b,
    .popupSection5USA a,
    .popupSection5USA b, 
    .popupSection6USA a,
    .popupSection6USA b {
        text-decoration: none;
        color: #000;
        display: block;
        margin-bottom: 4px; /* Vertical spacing between list items */
}




.popupSection1CAN {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    padding: 16px;
    /*justify-content: left;
    margin: 0 0 0 19.25%;*/
    justify-content: space-evenly;
    margin: 0 auto;
    max-width: 1000px;
}

.popupSection2CAN, .popupSection3CAN, .popupSection4CAN, .popupSection5CAN, .popupSection6CAN {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    padding: 16px;
    /*justify-content: left;
    margin: 0 0 0 19.25%;*/
    justify-content: space-evenly;
    margin: 0 auto;
    max-width: 1000px;
    gap:16px;
}

    .popupSection1CAN > div, .popupSection2CAN > div, .popupSection3CAN > div, .popupSection4CAN > div, .popupSection5CAN > div, .popupSection6CAN > div, {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .popupSection1CAN a,
    .popupSection1CAN b,
    .popupSection2CAN a,
    .popupSection2CAN b,
    .popupSection3CAN a,
    .popupSection3CAN b,
    .popupSection4CAN a,
    .popupSection4CAN b,
    .popupSection5CAN a,
    .popupSection5CAN b,
    .popupSection6CAN a,
    .popupSection6CAN b {
        text-decoration: none;
        color: #000;
        display: block;
        margin-bottom: 4px; /* Vertical spacing between list items */
    }




.menuColumn5, .menuColumn6, .menuColumn7, .menuColumn8 {
    margin-top: 20px;
}
.popupSection1USA .menuColumn5 {
    margin-top: 0;
}

.popupSection1CAN .menuColumn5 {
    margin-top: 0;
}

    .menuColumn1 b, .menuColumn2 b, .menuColumn3 b, .menuColumn4 b, .menuColumn5 b, .menuColumn6 b, .menuColumn7 b, .menuColumn8 b {
        letter-spacing: .08px;
    }
.menuColumn1 a, .menuColumn2 a, .menuColumn3 a, .menuColumn4 a, .menuColumn5 a, .menuColumn6 a, .menuColumn7 a, .menuColumn8 a {
    letter-spacing: -.5px;
}

.popupSection1USA a, .popupSection2USA a, .popupSection3USA a, .popupSection4USA a, .popupSection5USA a, .popupSection6USA a, .popupSection7USA a, .popupSection8USA a {
    text-decoration: none;
    padding-top: 9px;
}
    .popupSection1USA a:hover, .popupSection2USA a:hover, .popupSection3USA a:hover, .popupSection4USA a:hover, .popupSection5USA a:hover, .popupSection6USA a:hover, .popupSection7USA a:hover, .popupSection8USA a:hover {
        text-decoration: underline;
        text-underline-offset: 6px;
    }





.popupSection1CAN a, .popupSection2CAN a, .popupSection3CAN a, .popupSection4CAN a, .popupSection5CAN a, .popupSection6CAN a, .popupSection7CAN a, .popupSection8CAN a {
    text-decoration: none;
    padding-top: 9px;
}

    .popupSection1CAN a:hover, .popupSection2CAN a:hover, .popupSection3CAN a:hover, .popupSection4CAN a:hover, .popupSection5CAN a:hover, .popupSection6CAN a:hover, .popupSection7CAN a:hover, .popupSection8CAN a:hover {
        text-decoration: underline;
        text-underline-offset: 6px;
    }



    .linkUnderline {
        border-bottom: 1px solid black;
        display:inline-block !important;
    }

.popupDiv1 {
    display: inline-block;
    vertical-align: top;
}
    .popupDiv1 a:hover {
    }
.popupDiv2 {
    display: inline-block;
    vertical-align: top;
    padding-left:30px;
    font-size:.85em;
}
.popupDiv3, .popupDiv4, .popupDiv5, .popupDiv6 {
    padding: 15px;
    display: inline-block;
    vertical-align: top;
    padding-left: 30px;
    font-size: .82em;
    max-width: 209px;
}
    .popupDiv3 .navTitle, .popupDiv4 .navTitle, .popupDiv5 .navTitle, .popupDiv6 .navTitle {
        padding-bottom: 10px;
    }
    .popupDiv3 div, .popupDiv4 div, .popupDiv5 div, .popupDiv6 div {
        font-size: 12px;
        min-height: 170px;
    }
    .popupDiv5 {
    padding:19px;
}
.popupDiv3 img, .popupDiv4 img {
    border-radius:15px;
}
.smlLink {
    font-size:.82em;
}
    .smlLink:hover {
        color: #FF2000;
    }

    .popupDiv5 hr {
        border-bottom: 2px solid #7d7d7d;
    }
.popupDiv5 a {
    text-decoration: none;
    line-height: 2;
    font-size: .85em;
}
.navTitle {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    display: block;
    color: #000;
    font-size: 1em;
}
    .navTitle .chronicle {
        font-style: normal;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    }
    .popupDiv2 .navTitle {
        padding-top: 16px;
    }
.classLink {
    padding-top: 20px;
    filter: grayscale(1);
    transition: filter .5s;
}
.classImage {
    display: inline-block;
    vertical-align: top;
    
}

.classTitle {
    color: #000;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-size: 1.1em;
}
.classText {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    padding: 0 10px;
    text-transform: initial;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
}

    .classText a {
        text-decoration: none;
    }

.divBlockNavLink {
    display:inline-block;
    vertical-align:top;
}
.divBlockNavLinks {
    color: #000000;
    
    
}


    .divBlockNavLinks a {
        text-decoration: none;
        color: #000000;
        padding: 10px 20px;
        letter-spacing: .42%;
    }
.rewards .divBlockNavLinks a {
    font-size: 14px;
    padding-top: 10px;
    display: inline-block;
 
}
.divBlockNavLinks.light {
    text-align: right;
}

    .divBlockNavLinks.light a {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        color: #000;
        text-transform: uppercase;
        font-size:14px;
    }
        .divBlockNavLinks.light a:hover {
            border-bottom: 1px solid #BA0C2F;
            cursor:pointer;
        }


        .downChev {
            font-size: 10px;
            vertical-align: top;
            padding-top: 7px;
        }

/*Hamburger Menu ----------*/
.menuBar {
    cursor:pointer;
    display:none;
}
.navbar-menu {
    position: absolute;
    background: #f2f2f2;
    height: 0;
    top: 26px;
    right: 0;
    padding: 0;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    opacity: 0;
    transition: visibility .5s, opacity 0.5s, right .5s;
    box-shadow: #adadad 0 0 15px;
    z-index: -1;
    text-align: left;
}
.navbar-down {
    cursor: pointer;
    display: inline-block;
    background-color: #DDDDDD;
    width: 50%;
    height: 30px;
    visibility: hidden;
    text-align: center;
    position: relative;
    top: -30px;
    right: -145px;
}
.navbar-up {
    cursor:pointer;
    display: inline-block;
    background-color: #DDDDDD;
    width: 50%;
    height: 30px;
    visibility: hidden;
    text-align: center;
}
    .navbar-up i, .navbar-down i {
        padding:3px 0 0;
    }
    .navbar-menu-inner {
        overflow: hidden;
    }
.navbar-menu-inner-content {
   position: relative;
}

.activeMenu {
    visibility: visible;
    opacity: 1;
    right: 0;
    z-index: 100000;
}
.closeMenu {
    cursor:pointer;
    text-align: right;
    padding: 20px 20px 15px 20px;
    float:right;
}
.divCloseMenu {
    width: 100%;
    height: 55px;
    background: white;
}

.navbar-menu a {
    text-decoration: none;
}

    .navbar-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0 20px 20px;
        font-size:14px;
    }

    .navbar-menu .fa-angle-up {
        display: none;
    }
.activeText .fa-angle-up {
    display: block;
}
.activeText .fa-angle-down {
    display: none;
}
.menuTitle, .menuTitleLight {
    display: grid;
    grid-template-columns: 85% 15%;
    min-width: 250px;
    cursor:pointer;
    padding-left:10px !important;
    align-items: center;
}

    .menuTitle:hover, .menuTitleLight:hover {
        color: #FF2000;
    }


.menuTitle {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    font-size: 1.3em;
}

.menuTitleLight {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    font-size: 1.3em;
}

.subTitle {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 0 0 0;
    display: block;
    letter-spacing: .08px;
    margin-top: 10px;
}


.navbar-menu .classText {
    width:220px;
}

.subMenuList {
    visibility: hidden;
    height: 0;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear, height 1.5s linear;
    text-align: left;
    font-size: 14px;
    padding-left:10px !important;
    max-width:250px;
}
.navbar-menu-inner .sideMenuTitle {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: .42%;
}
.activeNav {
    visibility: visible;
    height: auto;
    opacity: 1;
}
.activeText {
    /*color: #BB0C2F;*/
    color:#000;
}
.menu-listing .activeText {
    color: #FF2000;
}
.subMenuList.subLinks li {
    padding-top: 10px;
}
/*Footer ---------------------------*/
#footer {
    padding: 6em 0 4em 0;
    background: #e2e2e2;
    text-align: center;
    color: #3c3f40;
}

    #footer h2 {
        color: #3c3f40;
    }

    #footer .icon {
        color: #BB0C2F;
    }

    #footer a {
        color: #3c3f40;
        text-decoration: none;
    }
.site-footer ul li {
    padding-left:0;
}
#footer ul li {
    padding: 0 2em;
}

    #footer .copyright {
        display: inline-block;
        color: #3c3f40;
        font-size: 0.75em;
        margin: 0 0 2em 0;
        padding: 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        padding: 2em 10em;
    }

        #footer .copyright img {
            max-width: 100%;
        }
.mainFooterDiv {
    text-align: left;
    line-height: 2;
    font-size: .85em;
    color: #e6e6e6;
}

.footerTableMobile {
    padding: 0 0 50px 0;
    margin-top: 80px;
    clear: both;
    background-color: #000;
}
.WRExt .footerTableMobile {
   
    margin-top: 0;
}
    .footerTableMobile a {
        color: #e6e6e6;
        text-decoration: none;
    }
/*.footerGridMain {
    display: grid;
    grid-template-columns: 33% 77%;
    color:#fff;
    max-width: 1200px;
    margin: 0 auto;
}
.footerGridMain h2 {
    color: #fff;
    font-family:Aspira;
    font-weight:normal;
}*/

#cookieBtn {
    padding-left: 10px;
    cursor: pointer;
    vertical-align: top;
    padding-top: 7px;
}
.txtSubscribe {
    font-size: 1.6em;
    text-transform: uppercase;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    padding-bottom: 7px;
    display: block;
}
.footer-subscribe-button {
    background-color: #BA0C2F;
    font-size: 14px;
    font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
    letter-spacing: -0.08px;
    padding: 14px 28px;
    margin-left: 14px;
    border: 1px solid #BA0C2F;
}
/* Footer email input styling */
.footer-subscribe-input,
input[type="email"].footer-subscribe-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 210px;
    height: 46px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.2;
    background-color: #0f0f0f; /* dark field */
    color: #ADAEBC;
    border: 1px solid #333333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
}

    /* Placeholder */
    .footer-subscribe-input::placeholder {
        color: #7f7f7f;
        opacity: 1;
    }

    /* Hover state */
    input[type="email"].footer-subscribe-input:hover {
        border-color: rgba(255,255,255);
    }

    /* Focus/keyboard state (highly visible but tasteful) */
    input[type="email"].footer-subscribe-input:focus {
        outline: none;
        border-color: rgba(255,255,255);
    }

    /* Disabled state */
    .footer-subscribe-input:disabled,
    .footer-subscribe-input[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Remove IE/Edge clear 'x' */
    .footer-subscribe-input::-ms-clear,
    .footer-subscribe-input::-ms-reveal {
        display: none;
    }

/* Footer logos rollover: fade from 100% -> 60% on hover/focus */
.footer-logos img,
.footer-logos .smlLogo,
.footer-logos .sml35Logo {
    opacity: 1;
    transition: opacity 180ms ease-in-out, transform 180ms ease;
    will-change: opacity, transform;
    display: inline-block;
}

    /* Hover (and when wrapped in an anchor) */
    .footer-logos img:hover,
    .footer-logos a:hover img,
    .footer-logos a:focus img,
    .footer-logos img:focus-visible {
        opacity: 0.6;
    }

/* Optional subtle lift on hover for polish 
    .footer-logos img:hover,
    .footer-logos a:hover img {
        transform: translateY(-2px);
    }*/

/* Ensure keyboard users can see focus and get same effect */
.footer-logos a:focus {
    outline: none;
}

    .footer-logos a:focus img {
        opacity: 0.6;
    }
.footer-social {
    display: flex;
    gap: 12px; /* Adjust spacing between buttons based on your design */
    align-items: center;
    justify-content: flex-start;
    margin-top: 30px;
}
/* Small-screen adjustments */
@media (max-width: 640px) {
    .footer-subscribe-input {
        height: 46px;
        font-size: 15px;
        padding: 12px 14px;
    }
    /* Make the whole footer a single column */
    .footer-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;
        gap: 18px !important;
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Subscribe block spans full width at top */
    .footer-subscribe {
        grid-column: 1 / -1;
        grid-row: auto;
        padding-right: 0;
        padding-left: 0;
    }

    /* Reduce subscribe title and left-align text block */
    .footer-subscribe-title {
        font-size: 20px;
        line-height: 1.05;
        margin-bottom: 8px;
        text-align: left;
    }

    .footer-subscribe-desc {
        font-size: 13px;
        margin-bottom: 12px;
        text-align: left;
    }

    /* Stack the form vertically and make each element full-width */
    .footer-subscribe-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        width: 100%;
        margin: 0 0 6px 0;
    }

    .footer-subscribe-input {
        width: 100% !important;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
    }

    .footer-subscribe-button {
        width: 100% !important;
        padding: 12px 16px;
        font-size: 14px;
        margin:16px 0 0 0;
    }

    /* Social icons: center and increase size, add spacing below */
    .footer-social {
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
        margin-bottom: 12px;
    }

        .footer-social .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 16px;
        }
    .footer-subscribe-input, input[type="email"].footer-subscribe-input {
        max-width: initial;
    }
    /* Nav columns: stack vertically below subscribe; ensure left-aligned links */
    .footer-col {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }

    .footer-col-title {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .footer-links-list a,
    .footer-col a.navFooter {
        font-size: 14px;
        line-height: 1.6;
        color: #d0d0d0;
        display: block;
    }

    /* Tighten bottom spacing */
    .footer-divider {
        margin: 18px 0;
    }

    .footer-bottom {
        padding: 14px 0 22px;
    }

    /* Logos: keep centered and smaller */
    .footer-logos {
        margin-top: 14px;
        gap: 14px;
        justify-content: center;
    }

    .smlLogo {
        max-height: 24px;
    }

    .sml35Logo {
        max-height: 28px;
    }
}

.smlLogo {
    max-height: 20px;
    padding: 0 1.2em 0 0;
}

.sml35Logo, .smlLogo35 {
    max-height: 35px;
    padding: 0 1.2em 0 0;
}

.fGTitles {
    font-weight: bold;
    color: #BB0C2F;
    text-transform: uppercase;
}

.footerCopy {
    font-size: .8em;
    color: #e6e6e6;
    padding-top: 4em;
}

.elabFooter {
    display: inline-block;
    text-align: left;
    line-height: 1;
    text-transform: uppercase;
    font-size: .8em;
    font-weight: Bold;
    padding: 2px 0 0 .5em;
    vertical-align: top;
}

.botFoot {
    margin-top: 125px;
}

.divNavPos0, .divNavPos1 {
    display: block;
}



.navPos0, .navPos1, .navPos2 {
    text-decoration: none;
   font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: .9em;
}

.navPos0, .navPos1 {
    display: block;
}


.navPos2 {
    padding: .3em;
    /*This hides the social media links in footer since we cant turn them off until in DB the new site is launched. */
    display:none;
}
.divFooterInfo {
    display: inline-block;
    vertical-align: top;
    margin: 0 40px 0 0;
}
.divFooterNav {
    max-width: 232px;
    display: inline-block;
    vertical-align: top;
    margin: 0 40px 40px 0;
}
    .divFooterNav .hide {
        display: none;
    }



    .divFooterNav .show {
        padding: .9em .5em 0;
        font-size: .5em;
       font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        display: inline-block;
        padding: .9em .5em 0;
        vertical-align: top;
    }
.divFooterLeft h2 {
    color: #e6e6e6;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 16pt;
    letter-spacing: .03em;
    margin-bottom: 20px;
}
.divFooterRight, .divFooterLeft {
    vertical-align: top;
    display: inline-block;
    margin-left: 40px;
}
.WellaRewards .divFooterLeft {
    display: inline-block;
    margin-left: 71px;
    vertical-align: top;
}
.WellaRewards .botFoot {
    margin-top:30px;
}
.WellaRewards .footerLogos {
   margin-left:0;
}
.WellaRewards .footerCopy {
    font-size:initial;
}
.WellaRewards .footerCopy {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin-left: 120px;
}
.divFooterRight {
    margin-left: 80px;
    max-width:400px;
}
.footerLogos {
    margin-left: 40px;
}
.subscribeLink {
    float: right;
}
.fGBoxes {
    display: inline-block;
    max-width: 1000px;
    vertical-align: top;
    line-height: 1.2;
}
.divNavPos2 {
    font-size: 2em;
}

/* Footer — Figma-style grid layout 2026 UPDATES */
.site-footer {
    background: #000;
    color: #fff;
    padding: 48px 0 32px;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
}

.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer — fixed grid columns, left aligned nav & typography */

/* Layout: 1 large left column + 6 smaller columns (total 7 columns) */
.footer-grid {
    display: grid;
    grid-template-columns: 360px repeat(3, minmax(160px, 1fr)); /* left col + 3 cols */
    grid-auto-rows: auto;
    column-gap: 90px;
    row-gap: 20px;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid #333;
}

/* Ensure each column is left-aligned */
.footer-col {
    text-align: left;
    align-self: start;
}

/* Make subscribe column occupy both rows */
.footer-subscribe {
    grid-row: 1 / span 2;
    text-align: left;
}

/* Ensure subsequent children auto-place into the 3-column right area:
   items 2..4 => top row, items 5..7 => bottom row */
.footer-grid > .footer-col {
    text-align: left;
}

/* Typography adjustments */
.footer-subscribe-title {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 42px;
    line-height: 1.02;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: #fff;
}
.footer-subscribe-button:hover {
    background-color: #000;
    border: 1px solid #BA0C2F;
    color: #BA0C2F;
}
.footer-col-title {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: #fff;
    letter-spacing: 0.6px;
}
.footer-subscribe-desc {
    color: #fff;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.6;
}

/* Lists & links - left aligned and stacked */
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li {
    margin: 12px 0;
}
    .footer-links-list a,
    .footer-col a.navFooter {
        color: #CCCCCC;
        text-decoration: none;
        font-size: 14px;
        display: block; /* ensure each link occupies full width & left aligns */
        line-height: 1.45;
        text-transform: uppercase;
    }
.footer-links-list a:hover,
.footer-col a.navFooter:hover {
    color: #fff;
    text-decoration: none;
}
.footer-privacy-link {
    font-size: 14px;
}
/* Contact column smaller text */
.footer-contact-info {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 1.6;
}

/* Tighter spacing for dense columns to avoid wrapping into extra rows */
.footer-grid .footer-links { padding-top: 6px; }

/* Divider spacing */
.footer-divider { margin: 40px 0; }

/* Bottom area adjustments */
.footer-bottom {
    padding: 18px 0 32px;
    margin0top: 40px;
}
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-copy {
    color: #bdbdbd;
    font-size: 12px;
}
.footer-bottom {
    margin-top: 40px;
}
/* Logos: center and allow wrap */
.footer-logos {
    display: flex;
    gap: 66px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    flex-wrap: wrap;
}
.smlLogo { max-height: 28px; opacity: 0.95; }
.sml35Logo { max-height: 36px; opacity: 0.95; }


.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dimensions from Figma */
    width: 40px;
    height: 40px;
    /* Styling */
    background-color: #333333; /* 20% brightness white/dark gray */
    border-radius: 50%; /* Makes it a circle */
    color: #ffffff; /* Icon color */
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .social-btn:hover {
        background-color: #616161; /* Slight lighten on hover */
    }

    /* Font Awesome Icon Size */
    .social-btn i {
        font-size: 18px; /* Adjust based on visual preference */
    }


/* Responsive: collapse / stack columns */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 390px repeat(6, minmax(140px, 1fr));
        gap: 24px;
    }
}

/* Mid breakpoint: make subscribe full width and navs layout 3 columns below */
@media (min-width: 981px) and (max-width: 1199px) {
    .footer-grid {
        grid-template-columns: 390px repeat(3, minmax(140px, 1fr));
        column-gap: 24px;
    }
}
@media (max-width: 980px) {
    /* Make subscribe span full width and stack nav columns below */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .footer-subscribe {
        grid-row: auto;
    }
    /* keep nav columns left aligned */
    .footer-col { text-align: left; }
}

@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; gap: 18px; }
    .footer-subscribe-form { flex-direction: column; gap: 10px; }
    .footer-subscribe-button { width: 100%; }
    .footer-bottom-row { flex-direction: column; align-items: flex-start; }
    .footer-col-title { font-size: 14px; }
    .footer-links-list a { font-size: 14px; }
}


/*END NEW Footer*/

/* Menu */
    /*#menu {
    -moz-transform: translateX(-20em);
    -webkit-transform: translateX(-20em);
    -ms-transform: translateX(-20em);
    transform: translateX(-20em);
    -moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, visibility 0.5s;
    -webkit-overflow-scrolling: touch;
    background: #717171;
    color: #ffffff;
    height: 100%;
    max-width: 80%;
    overflow-y: auto;
    padding: 3em 2em;
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    width: 20em;
    z-index: 10002;
    background-color: #292b2b;
}

    #menu .links a {
        line-height: 2em;
       font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        text-decoration: none;
    }

    #menu > ul {
        margin: 0 0 1em 0;
    }

        #menu > ul.links {
            list-style: none;
            padding: 0;
        }


    #menu li {
        padding: 0;
        margin-left: 3px;
    }

    #menu > ul.links > li > a:not(.button) {
        border: 0;
        border-top: solid 1px rgba(255, 255, 255, 0.25);
        color: inherit;
        display: block;
        text-decoration: none;
    }

    #menu > ul.links > li > .button {
        display: block;
        margin: 0.5em 0 0 0;
    }

    #menu > ul.links > li:first-child > a:not(.button) {
        border-top: 0 !important;
    }

    #menu > ul.actions {
        display: none;
    }

    #menu .close {
        text-decoration: none;
        -moz-transition: color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out;
        -webkit-tap-highlight-color: transparent;
        border: 0;
        color: #c1c1c1;
        cursor: pointer;
        display: block;
        height: 3.25em;
        line-height: 3.25em;
        padding-right: 1.25em;
        position: absolute;
        right: 0;
        text-align: right;
        top: 0;
        vertical-align: middle;
        width: 3em;
    }

        #menu .close:before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f2ee";
        }

        #menu .close:before {
            font-size: 1.25em;
        }

        #menu .close:hover {
            color: #ffffff;
        }



    #menu.visible {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        visibility: visible;
    }

    #menu li.navLinkCategory {
        color: #BB0C2F;
        text-align: left;
        font-size: 1.4em;
        
        font-weight: bold;
        position: relative;
        left: -10px;
    }*/
    /* Banner */
    #banner {
    padding: 0;
    color: #000;
    background-size: cover;
    text-align: center;
    margin: 0 auto;
    position: relative;
    /*top: 30px;*/
}

    #banner picture {
        display: block;
    }

    #banner a {
       
        font-weight: Bold;
        text-decoration: none;
        font-size: 1em;
        text-transform: uppercase;
        color: #000;
    }

    #banner img {
        margin-top: 0;
    }

    #banner .content {
        -moz-transition: opacity 1s ease-in-out, -moz-transform 0.75s ease-in-out;
        -webkit-transition: opacity 1s ease-in-out, -webkit-transform 0.75s ease-in-out;
        -ms-transition: opacity 1s ease-in-out, -ms-transform 0.75s ease-in-out;
        transition: opacity 1s ease-in-out, transform 0.75s ease-in-out;
        opacity: 1;
        text-align: left;
        width: 100%;
        margin: 0 auto;
        max-width: 1000px;
    }

        #banner h1 {
            font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
            font-weight: normal;
            text-transform: uppercase;
            color: #000;
            margin: 0;
            font-weight: 500;
            margin-top: 1em;
            font-size: 2.5em;
            line-height: 1.3;
        }

    #banner h2 {
        font-size: 2em;
        color: #fff;
        line-height: 1.5;
        margin: 0 auto 2em auto;
        padding: 0;
    }

        #banner h2 span {
            font-size: 1em;
            display: block;
            font-weight: normal;
            text-shadow: 1px 1px 3px #000;
        }


    #banner p {
        font-size: 1.25em;
        font-weight: bold;
        margin-bottom: 1.75em;
        color: #3c3f40;
    }

.sectionText {
    padding: 0;
    color: #3c3f40;
    background-size: cover;
    margin: 0 auto;
    -moz-transition: opacity 1s ease-in-out, -moz-transform 0.75s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out, -webkit-transform 0.75s ease-in-out;
    -ms-transition: opacity 1s ease-in-out, -ms-transform 0.75s ease-in-out;
    transition: opacity 1s ease-in-out, transform 0.75s ease-in-out;
    opacity: 1;
    text-align: left;
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    padding-bottom: 2em;
}


/*EVENT*/
.doneDiv {
    margin-right: 3px;
    display: inline-block;
    width: 70px;
    height: 20px;
    background-color: #009900;
    border-radius: 6px;
}

.openDiv {
    margin-right: 3px;
    display: inline-block;
    width: 70px;
    height: 20px;
    border-radius: 6px;
    background-color: #999999;
}

.scoreDiv {
    height: 20px;
    border-radius: 6px;
    background-color: #000099;
}

.scoreDivBg {
    border-radius: 6px;
    background-color: #999999;
    padding: 1px;
}

.divEventImg {
    margin: .8em;
}

.divContainerEventList {
    display: block;
}

/*.eventDate {
    display: inline-block;
    width: 70px;
    height: 71px;
    vertical-align: top;
    background-color: #FFFF00;
    text-align: center;
}*/
.rewards .eventDate {
    max-width: 85px;
}
.rightTile {
    padding: .8em .8em 0 0;
}

/*.eventText {
    margin-left: 5px;
    display: inline-block;
    max-width: 300px;
    width: 100%;
    height: 71px;
    vertical-align: top;
    line-height: 1.5;
}*/

.eventSmlTxt {
    font-size: .8em;
}

/*.eventBuy {
    margin-left: 5px;
    margin-top: 5px;
    display: inline-block;
    width: 130px;
    height: 71px;
    vertical-align: top;
}*/
.eventBuy {
    justify-self: center;
    text-align: center;
}
/*SPLIT PAGE*/

#splitPage #banner .content {
    text-align: center;
    position: absolute;
    top: 100px;
    max-width: 100%;
    padding-bottom: initial;
    z-index: 1000;
}

#splitPage .splitLowerTxt {
    width: 100%;
    text-align: center;
    background: #ccc;
    font-size: 1.5em;
    padding: 1em;
}

    #splitPage .splitLowerTxt h1, #splitPage .splitLowerTxt h4 {
        padding: 0;
        margin: 0;
    }

#splitPage #LblDesc1 i {
    font-style: normal;
    font-size: .7em;
    display: block;
}

#splitPage #banner {
    background-color: #e2e2e2;
    max-height: 730px;
}

#splitPage #logos {
    text-align: center;
}

    #splitPage #logos img {
        padding: .5em;
    }




#splitPage .quotes h2 {
    text-transform: capitalize;
}

#splitPage #banner {
    top: 0;
    position: relative;
    z-index: 99;
}

    #splitPage #banner picture {
        margin: 0;
    }

    #splitPage #banner p {
        margin: .5em auto;
        color: #fff;
        font-weight: normal;
    }

.divSplitLeft ul, .divSplitRight ul {
    margin-bottom: 1em;
    list-style: none;
    padding: 0;
}

#splitPage .SplitPageOverlay {
    text-align: center;
    position: absolute;
    z-index: 100;
    top: 350px;
    width: 100%;
}

.divSplitLeft {
    margin-left: 20%;
    float: left;
}

.divSplitRight {
    margin-right: 20%;
    float: right;
}

.divSplitLeft, .divSplitRight {
    max-width: 40%;
    display: inline-block;
    background-color: rgba(0,0,0,0.4);
    padding: 1.2em;
    min-width: 280px;
    text-align: center;
}






/* ----------- BX Slider ----------- */
.bx-wrapper {
    margin: 0 auto;
    margin-bottom: 0;
}

.bxOverlay {
    background: url("images/overlay.png") center;
}

ul.bxslider, .bxslider li {
    padding: 0;
    margin: 0;
}

.bxSliderContainer {
    z-index: 1;
    max-width: 1024px;
    margin: 0 auto;
}

.bx-wrapper .bx-pager {
    position: relative;
    top: -130px
}

.bx-controls, .bx-has-pager, .bx-has-controls-direction {
    display: none;
}

.bxslider img {
    -webkit-animation: zoomin 5s 1;
}

.bx-wrapper .bx-viewport {
    background: #575a53;
}

/* Main */

#one .inner {
    margin-bottom: 2em;
}

#one .flex-item {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
}

    #one .flex-item.left div:first-child, #one .flex-item.right div:first-child {
        padding-top: 1em;
    }

    #one .flex-item.left div:last-child, #one .flex-item.right div:last-child {
        -moz-align-self: -moz-flex-end;
        -webkit-align-self: -webkit-flex-end;
        -ms-align-self: -ms-flex-end;
        align-self: flex-end;
    }

    #one .flex-item.left div p, #one .flex-item.right div p {
        margin-bottom: 1em;
    }

#one h2 {
    text-align: center;
}








/*Custom --------------------------------------------*/

#divMainContent {
    padding-top: 2em;
}



.ltGryTxt, .ltGryTxt a {
    color: #999999;
}



.userNameHead {
    text-transform: capitalize;
}




/*Split Page ------------------*/

#splitPage h1.mainTitleH1 {
    font-weight: 400;
    font-size: 20pt;
    line-height: 1.5;
    /*padding: 1em 0;*/
    clear: both;
}

#splitPage .headers {
    text-align: center;
    font-size: 24pt;
}

    #splitPage .headers h4 {
        text-transform: initial;
    }

#LblDesc4 div:first-of-type, #LblDesc3 div:first-of-type {
    margin-bottom: 3em;
}

.divInfoHair {
    padding-top: 2em;
}

.infoDivBlock {
    display: inline-block;
    width: 45%;
    vertical-align: top;
}

    .infoDivBlock:first-of-type {
        margin-right: 5%;
    }

/*Map Page ------------------*/

.leaflet-control-mapquest-navigation button {
    line-height: 1;
}

.learnBut {
    float: right;
    margin-right: .5em;
}

#mapPage header h1 {
    margin-top: 3em;
}
/*Spotlight Page ------------------*/

#spotlightPage #LblCategory {
    display: none;
}

#spotlightPage .divLblName1, #spotlightPage .divLblName1 {
    background-color: #eee;
}

#spotlightPage .divLblName1, #spotlightPage .divLblName1 {
    background-color: transparent;
}

/*Home Page ------------------*/


/*Login Page ------------------*/

.divloginPage {
    max-width: 600px;
}

#passReminderPage {
    margin: 1em;
}

    #passReminderPage .divhdr {
        padding: .5em
    }

    #passReminderPage #PnlReset {
        padding-top: 1em;
    }

    #passReminderPage div {
        padding-left: 1em;
    }
/*map Page ------------------*/
.mapListLI {
    max-width: 60%;
    float: left;
    list-style: none;
}

.mapListH3 {
    clear: both;
    margin-top: 5em;
}

/*Dashboard Page ------------------*/
/*
    --these are the new styles for WCE changes--

    .divProgressBarContainer {
    color: #000 !important;
    background-color: #fcfcfc !important;
    margin-right: 30px;
    border-radius: 10px;
}
#divProgressBar {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(201,219,117,1) 0%, rgba(106,135,36,1) 100%);
    height: 16px;
    border-radius: 10px;
}*/
.divProgressBarContainer {
    color: #000 !important;
    background-color: #fcfcfc !important;
    margin-right: 30px;
}

#divProgressBar {
    color: #fff !important;
    background-color: #4CAF50 !important;
    height: 16px;
}
/*.w3-light-grey {
    border-radius: 10px;
}*/
.divProfile {
    margin-top: 20px;
    max-width: 600px;
    background-color: white;
    border-radius: 6px;
    background-color: #eeeeee;
    clear: both;
}

    .divProfile h3 {
        font-size: 1.5em;
    }

.imgProfile {
    float: left;
    padding-right: 1em;
}

.divCard {
    float: right;
    background-color: #ffffff;
    margin: 3px;
    padding: 3px;
    border-radius: 6px;
    font-style: italic;
    margin-top: 2em;
}

#LblDashboard {
    margin-top: 2em;
}

#dashPage .wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 1em 0;
}

#dashPage .hideBut, #dashPage .hideSpan {
    display: none;
}

.noHand {
    cursor: auto;
}

#dashPage .button.alt.smallBut {
    padding: .5em;
    height: auto;
    line-height: initial;
    margin-bottom: .5em;
}

.divDashSubNav {
    text-align: right;
    float: right
}

.dashMidTitles {
    margin: 0 0 .5em 0;
    font-size: 1.3em;
}
    .dashMidTitles i {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        font-style: initial;
    }
.LblProfile {
    clear: both;
}

.msgComplete {
    color: red;
    display: block;
    clear: both;
}

#LblNextBut .button {
    margin: 1em 0;
}

.StudentH1 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    font-size: 2em;
    line-height: 1.3;
}
.StudentH1 span{
   
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
}
.badgesDiv {
    width: 100%;
    max-width: 840px;
    margin: 1em 0;
    display: inline-flex;
    flex-wrap: wrap;
}

.badge {
    border:1px solid black;
    display: block;
    text-align: center;
    width: 160px;
    height: 110px;
    line-height: 1.2;
    display: grid;
    grid-gap: .5em;
    grid-template-rows: 20% 48% 20%;
    max-width: initial;
    margin: .5em .5em 0 0;
    background-color: white;
}

.badgesDiv a {
    text-decoration: none;
}

.badgeIcon {
    color: #BB0C2F;
    font-size: 14pt;
    text-align: right;
    padding-right: 5px;
}

.badgeName {
    text-transform: uppercase;
    color: #000;
    font-size: 14pt;
    display: block;
    clear: both;
   font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
}

.badgeDate {
    
    font-weight: Bold;
    display: block;
    font-size: .8em;
}

.inboxItem {
    border-left: 1px solid #000;
    margin-bottom: 20px;
    padding: 5px 10px;
}

.paymentPlanDiv {
    background-color: #e2e3e4;
    padding: .1em 1em 1em;
    max-width: 50%;
    color: #000;
}

.paymentsDiv {
    display: grid;
    grid-gap: .5em;
    grid-template-columns: 33% 33% 33%;
    max-width: initial;
    margin: 1em .5em;
    align-items: center;
}

.dashSuggestedEventDiv {
    display: inline-block;
    max-width: 200px;
    vertical-align: top;
    text-align: center;
    padding: 5px;
}

.dashSuggestedEventImg {
    height: 160px;
    object-fit: contain;
}

.divDashButtons {
    padding: 0 1em 0 0
}
/*Update Page*/
.tdSettings {
    width: 25%;
}

.tdSocial {
    width: 20%;
}

.repeaterRow {
    clear:both;
}
.repeaterImgDiv {
    width: 49%;
}

.repeaterTextDiv {
    width: 49%;
    position:relative;  
}
.brandLogoRight {
    position: absolute;
    top: 5px;
    right: 0;
}
    .brandLogoRight img {
        max-height:45px;
        max-width:150px;
    }
    /*Order History Page*/
    .divComsContainer, .divComsContainerInfo {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 15% 15% 10% 15% 20% 5%;
        margin-top: 2em;
    }

.divComsContainerInfo {
}

.divComsTitle {
    color: #777777;
    display: inline-block;
}

.divComs {
    display: inline-block;
}

.total {
    text-align: right;
}
/*Education Package Pages*/

.eduPackageChapterTitle {
    text-transform: uppercase;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
}
    
.packageSubHead {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size:1.3em;
    color:#000;
}
.forumContainer1 h1 {
    text-transform: uppercase;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    color:#000 !important;
}
.forumContainer1 .button {
    border-radius: 0 !important;
    background-color: #FF2000 !important;
}
/*Journey Detail Page*/
/* 1. The Main Row Container */
.divTestInsider, .divTestSpecialist, .divTestExpert, .journeyPathwayTierClasses {
    display: grid;
    /* Automatically wraps from 3 columns to 2 to 1 as the screen shrinks */
    grid-template-columns: repeat(auto-fit, 432px);
    gap: 20px;
    padding: 15px 0;
    align-items: stretch;
}

/* 2. The Card Structure */
.reqClass {
    display: flex;
    flex-direction: column;
    width: 432px; /* Hard limit for the width */
    background: #fff;
    overflow: hidden;
    height: 100%;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
}

/* 3. Handling the Inner Elements */
/* Hide the square checkmark icon from the original layout */
.reqClassCheck {
    display: none !important;
}

/* Force the text wrapper to fill the vertical space */
.reqClassText.gridReqClassText {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
    float: none !important; /* Clears any legacy floats */
    width: 100% !important;
}

/* 4. Image Styling */
.reqClassImg {
    width: 100%;
    margin: 0;
}

    .reqClassImg img {
        width: calc(100% + 4px);
        height: 220px; /* Adjust height to match your preference */
        object-fit: cover;
        display: block;
        margin-left: -2px;    
        max-width: none;
    }

/* 5. Content & Description Area */
.reqClassTextDesc {
    padding: 20px;
    flex-grow: 1; /* Pushes everything below it to the bottom */
    line-height: 20px;
    font-size: 14px;
}

.medTitle {
    display: block;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.reqClass .medTitle {

    margin-bottom: 0;
}

/* 6. Footer & Button Area */
/* The container holding both Duration and the Button */
.reqClassButton {
    padding: 0 24px 24px 24px;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align both items to the left */
    gap: 12px; /* Space between duration and button */
    margin-top: auto; /* Ensures this whole block stays at the bottom */
}

/* Styling the Duration text and icon */
.reqClassButton {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

    /* The Clock Icon spacing */
    .reqClassButton i.fa-clock {
        margin-right: 8px;
        color: #333;
    }

    /* The Button itself */
    .reqClassButton a.button {
        display: inline-block;
        width: auto;
        background-color: #FF2D00 !important;
        color: #fff !important;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        padding: 12px 24px;
        border-radius: 2px;
    }



/*IN SALON EDUCATION PAGE*/

#PnlShop h1, #LblSelectedEvent h1 {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 48px;
    color: #000;
    text-transform: uppercase;
}
.classTileBox .classTitle b{
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    color: #000;
}
/* Voucher Pack Details Page*/
.voucherPackDetailsTitle {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 48px;
    color: #000;
    text-transform: uppercase;
    float: left;
}
.DivVoucherPackageSalePriceDetailsX {
    margin-top: 50px;
    margin-left:20px;
}
.tableVoucherWCEPackage {
    clear:left;
}
/*Landing Page Widgets ------------------*/
#_ctl6_LblTitle {
    display: block;
}

.midTextBlock {
    text-align: center;
}
.topTextBlock {
    text-align: center;
    max-width: 850px;
    margin: 30px auto;
}
    .topTxtHeader, .midTxtHeader {
        text-align: center;
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        font-size: 48px;
        text-transform: capitalize;
        display: block;
        color: #000;
        text-transform: uppercase;
    }
        .topTxtHeader em, .repeaterTextDiv h2 em, .midTxtHeader em {
            color: #FF2000;
            font-style: normal;
        }

.midTextBlock {
    margin-top: 30px;
}
#PnlBioLibrary #ui-id-1 {
    display: none;
    /* this hides the signature artists accordion header - danielle's request */
}

/* ==========================================================================
   Wella Education - Custom FAQ Accordion Styles (#AccordionSection258)
   ========================================================================== */

/* Main Container Layout */
#AccordionSection258 {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px;
}

 

    /* Strips outer structural borders and background colors from the container */
    #AccordionSection258 > .accordion > .subAccordion.ui-accordion-content {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-left: 0 !important; /* Overrides old 2em margin to align with grid */
    }



    /* 2. INNER FAQ ITEM BARS (HEADERS) */
    #AccordionSection258 .subAccordion h1.ui-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #F3F3F3 !important;
        border: none !important;
        border-radius: 8px !important; /* Smoothly rounded card corners */
        color: #000000 !important;
        font-family: 'ABCROM Medium', Arial, Helvetica, sans-serif;
        font-size: 16px !important;
        font-weight: bold !important;
        padding: 18px 24px !important;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
        text-transform: initial;
        margin: 12px auto 0 auto !important; /* Centers the header and overrides old left margin */
        width:640px;
    }

        /* Interactive Hover Feedback */
        /*#AccordionSection258 .subAccordion h1.ui-accordion-header:hover {
            background: #d4d5d6 !important;*/ /* Subtle darker gray contrast shift on hover */
        /*}*/

    /* Active Open Bar Styling */
    #AccordionSection258 .subAccordion h1.ui-accordion-header-active {
        background: #ffffff !important; /* Pops open to a crisp white frame */
        border: 1px solid #eaeaea !important;
        border-bottom: none !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    /* 1. Base Font Awesome Icon State (Closed Accordion Bar) */
    #AccordionSection258 .subAccordion h1.ui-accordion-header::after {
        content: '\f107' !important; /* Font Awesome angle-down unicode */
        font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important; /* Support for multiple FA versions */
        font-weight: 400 !important; /* 'fa-regular' maps to a 400 weight */
        background-image: none !important; /* STOPS the default jQuery UI icon sprite from showing up */
        font-size: 20px !important;
        color: #000000 !important;
        line-height: 1 !important;
        transition: transform 0.2s ease-in-out;
    }

    /* 2. Active State (Open Accordion Bar) */
    #AccordionSection258 .subAccordion h1.ui-accordion-header-active::after {
        content: '\f106' !important; /* Font Awesome angle-up unicode */
        font-weight: 400 !important;
    }
.ui-state-active .ui-icon, .ui-button:active .ui-icon, .ui-icon, .ui-widget-content .ui-icon {
    display: none !important;
}
#AccordionSection258 .accordion .ui-accordion-header {
    background: none;
    border: none;
    color: #000;
    text-align: center;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 48px !important;
}
/* Active open state upward chevron indicator */
#AccordionSection258 .subAccordion h1.ui-accordion-header-active::after {
    content: '\2303';
    font-size: 22px;
}

    /* 4. COLLAPSIBLE INNER CONTENT PANELS */
    #AccordionSection258 .subAccordion .ui-accordion-content {
        background: #ffffff !important; /* Clean white card container to match active header */
        border: 1px solid #eaeaea !important;
        border-top: none !important;
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        padding: 0 24px 24px 24px !important; /* Perfectly drops down flush with header bounds */
        overflow: hidden;
        width:640px;
        margin: 0 auto 12px auto !important
    }



        /* FAQ Answer Paragraph Formatting */
        #AccordionSection258 .subAccordion .ui-accordion-content p {
            color: #333333 !important;
            font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
            font-size: 15px !important;
            padding-left: 0 !important; /* Zeroes out old padding to stay perfectly aligned */
            line-height: 1.6 !important;
            margin: 0 !important;
        }
        #AccordionSection258 .subAccordion .ui-accordion-content ul, #AccordionSection258 .subAccordion .ui-accordion-content li {
            color: #333333 !important;
            font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
            font-size: 15px !important;
            line-height: 1.6 !important;           
            margin: 0 !important;
        }

        /* Rich-Text Links inside Answers */
        #AccordionSection258 .subAccordion .ui-accordion-content a {
            color: #000000 !important;
            text-decoration: underline !important;
            font-weight: 500 !important;
        }





/*old CSS for accordion
#AccordionSection258 .ui-state-default, #AccordionSection258 .ui-widget-content .ui-state-default, #AccordionSection258 .ui-widget-header .ui-state-default, #AccordionSection258 .ui-button, html #AccordionSection258 .ui-button.ui-state-disabled:hover, html #AccordionSection258 .ui-button.ui-state-disabled:active {
    background: #e2e3e4;
}

#AccordionSection258 .ui-accordion .ui-accordion-header {
    padding-left: 0;
}

#AccordionSection258 .ui-widget-content {
    background: #e2e3e4;
    padding-left: 0;
}

#AccordionSection258 .ui-accordion .ui-accordion-content {
    padding-top: 0;
}

    #AccordionSection258 .ui-accordion .ui-accordion-content p {
        padding-left: 1em;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    }

#AccordionSection258 h1 {
    cursor: pointer;
}

#AccordionSection258 .subAccordion h1 {
    color: #000;
}

#AccordionSection258 .subAccordion {
    margin-left: 2em;
}*/
#LblEventDateTop h2 {
    font-size:1.1em;
    text-transform:capitalize;
}

.bizaccordion .ui-state-default {
    background: #ffffff;
    border: none;
    font-size: 2em;
}
.bizaccordion .ui-state-hover {
    background: #f0f0f0;
    border: none;
    font-size: 2em;
}
.bizaccordion.ui-accordion .ui-accordion-header {
    padding: 0;
    left:-27px;
    height:0;
}
.repeaterTriCol {
    display: inline-block;
    vertical-align: top;
    width: 30%;
    text-align: left;
    line-height: 1.3;
    padding: 1em 1.5em 3em 1.5em;
    text-align:center;
}
/*.repeaterTriCol img{
    max-height:70px;
}*/
.repeaterTriColImgDiv {
   margin-bottom: 20px;
}
    #PnlTriColumn section {
    text-align: center;
}
#PnlTriColumn {
    margin:0 0 60px 0;
}
.repeaterOneCol {
    vertical-align: top;
    width: 100%;
}

.logo-grid {
    display: grid;
    /* Adjust the 150px value to control the minimum width of each logo */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center; /* Vertical alignment */
    justify-items: center; /* Horizontal alignment */
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px 0;
}

.logo-item img {
    width: 100%;
    height: auto;
    max-width: 140px; /* Limits the size of larger logos */
    display: block;
    filter: grayscale(100%); /* Optional: ensures uniform gray tone */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

    .logo-item img:hover {
        opacity: 1;
    }

    #PnlTopText .bgTanFull {
        padding: 3em 0;
        text-align: center;
    }


    #PnlTopText .mainText {
        line-height: 1.5;
        color: #000;
        text-align: center;
        padding: .5em 0;
        font-size: 1.1em;
        display: block;
       font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;

    }

#PnlMidText {
    margin-top: 2em;
}

    #PnlMidText .mainText {
        padding: 1em 0;
        display: block;
    }
#PnlOneColumn .repeaterOneCol {
    padding: 60px 0; 
}
    #PnlLeftImageRightText .repeaterRow, #PnlLeftTextRightImage .repeaterRow, #PnlAlternatingTextImage .repeaterRow {
   
    display: grid;
    grid-template-columns: 48% 48%;
    align-items: center;
    justify-content:center;
    grid-gap: 40px;
    clear: both;
    margin:40px 0;
}
        #PnlLeftImageRightText .repeaterRow:first-of-type, #PnlLeftTextRightImage .repeaterRow:first-of-type, #PnlAlternatingTextImage .repeaterRow:first-of-type {
  
            margin: 0 0 40px 0;
        }


            #PnlOneColumn .repeaterOneCol.bgTanFull {
                padding: 3em 0;
            }

#RptGridTopImage .jobTitle {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;,serif;
    text-align: left;
    display: block;
    text-transform: uppercase;
    margin-bottom: .5em;
    font-size: 1.1em;
}

#PnlLeftImageRightText .repeaterRow, #PnlAlternatingTextImage .repeaterRow {
    text-align: center;
    display: grid;
    grid-template-columns: 48% 48%;
    align-items: center;
    grid-gap: 40px;
    border: 1px solid #ccc;
    padding: 40px;
}

    #PnlAlternatingTextImage .repeaterRow .imgLeft {
        order:1;
    }
    #PnlAlternatingTextImage .repeaterRow .textRight {
        order: 2;
    }
    #PnlAlternatingTextImage .repeaterRow .imgRight {
        order: 2;
    }

    #PnlAlternatingTextImage .repeaterRow .textLeft {
        order: 1;
    }
#PnlLeftTextRightImage .repeaterRow .imgRight {
    order: 2;
}
#PnlLeftTextRightImage .repeaterRow .textLeft {
    order: 1;
}

#PnlLeftImageRightText .repeaterTextDiv, #PnlAlternatingTextImage .repeaterTextDiv {
    text-align: left;
}

#PnlLeftImageRightText h2, #PnlLeftTextRightImage h2, #PnlAlternatingTextImage h2 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-weight: Bold;
    color: #000;
    font-size: 1.1em;
    margin-bottom: .6em;
    text-transform: uppercase;
}

#PnlMidText h2 {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    font-weight: Bold;
    text-transform: uppercase;
    font-size: 18pt;
}

#PnlTriColumn h2 {
    font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
    font-size: 14pt;
    color: #000;
    text-transform: uppercase;
    /*margin:30px 0 10px 0;*/
    height: 40px;
    margin-bottom: 10px;
}
#PnlBusinessEducationGridIcons {
    padding-bottom: 35px;
}

#PnlGridTopImage {
    text-align: center;
}

    #PnlGridTopImage h2 {
        text-align: left;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: Bold;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-size: 1.2em;
    }

    #PnlGridTopImage .repeaterRow {
        display: inline-block;
        width: 320px;
        vertical-align: top;
        margin: 1em 3em;
    }

    #PnlGridTopImage .repeaterP {
        max-width: 320px;
        text-align: left;
        margin-bottom: 0;
    }

.openDesc, .closeDesc {
    padding: 1em;
    cursor: pointer;
}



#PnlLeftImageRightText {
    clear: both;
}

#PnlOneColumn {

    line-height: 2;
}
.onecolImg {
    text-align:center;
}
.imgLeft img {
    max-width: 100%;
}

.imgRight img {
    
    max-width: 100%;
}
.RptLeftImageRightText, .ThreeColumnImageTextBlock {
    margin-top: 60px;
}
.BackgroundImageTextBlock {
    clear: both;
    max-width:100%;
}

/*End Widgets*/
/*Instance Specific Code*/


/*makes the logos on Partners page smaller and not stretch to fill the image area*/
.blockInstance-221 .img3Col, .blockInstance-273 .img3Col, .blockInstance-275 .img3Col, .blockInstance-300 .img3Col {
    object-fit: none;
    width: auto;
    height: auto;
}
.blockInstance-222.RptLeftImageRightText h2 {
    font-size: 36px;
}
.blockInstance-216, .blockInstance-310 {
    background-color: #FF2000;
    padding: 0;
}

.blockInstance-216, .blockInstance-216 h2, .blockInstance-310, .blockInstance-310 h2 {
    color: #fff;
}
    .blockInstance-216 a.blackButton, .blockInstance-310 a.blackButton {
        background-color:#fff !important;
        color:#FF2000 !important;

    }
    .blockInstance-216 .imgLeft img, .blockInstance-310 .imgLeft img {
        padding: 20px;
    }
    .blockInstance-216 .repeaterImgDiv, .blockInstance-310 .repeaterImgDiv {
        width:30%;
    }
    /* Center text vertically for the specific block instance */
    .blockInstance-216 .repeaterRow, .blockInstance-310 .repeaterRow {
        display: flex;
        align-items: center; /* vertical centering of image and text block */
        gap: 24px; /* spacing between image and text */
        flex-wrap: wrap; /* allow stacking when narrow */
    }

    /* Ensure the image/text children behave correctly under flex */
    .blockInstance-216 .repeaterImgDiv,
    .blockInstance-216 .repeaterTextDiv, .blockInstance-310 .repeaterImgDiv, .blockInstance-310 .repeaterTextDiv {
        float: none; /* override any float-based rules */
        box-sizing: border-box;
    }

    /* Keep image a fixed-width column and text take remaining space */
    .blockInstance-216 .repeaterImgDiv, .blockInstance-310 .repeaterImgDiv {
        flex: 0 0 auto; /* size according to its intrinsic width */
        margin: 0;
    }

    /* Let text expand and align content naturally */
    .blockInstance-216 .repeaterTextDiv, .blockInstance-310 .repeaterTextDiv {
        flex: 1 1 0%;
    }
    .blockInstance-216 .RptLeftImageRightText .repeaterRow, .blockInstance-310 .RptLeftImageRightText .repeaterRow {
        padding:0;
    }
.blockInstance-223, .blockInstance-319 {
    background-image: url(/templates/1/images/imgBG-schools.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 329px;
    margin-top:0;
}
/* Center text vertically for the specific block instance */
    .blockInstance-223 .repeaterRow, .blockInstance-319 .repeaterRow {
        display: flex;
        align-items: center; /* vertical centering of image and text block */
        gap: 0; /* spacing between image and text */
        flex-wrap: wrap; /* allow stacking when narrow */
        height: 80%;
    }
    .blockInstance-223 .repeaterTextDiv, .blockInstance-319 .repeaterTextDiv {
        width: 100%;
        text-align: center;
    }
.blockInstance-223, .blockInstance-319, .blockInstance-223 h2, .blockInstance-319 h2 {
    color: #fff;
}

    .blockInstance-223 a.blackButton, .blockInstance-319 a.blackButton {
        background-color: #fff !important;
        color: #FF2000 !important;
    }
.ThreeColumnImageTextBlock.blockInstance-225 {
    margin-top:20px;
}
.ThreeColumnImageTextBlock.blockInstance-225 figure {
    border-top: 1px solid #ebebeb;
}
.blockInstance-225 .img3Col {
    object-fit: contain;
    height: 350px;
    object-position: left;
    margin-left: 25px;
    margin-top: 25px;
}
.blockInstance-226 .midTxtHeader, .blockInstance-237 .midTxtHeader {
    text-align: left;
}
.blockInstance-236 .img2Col, .blockInstance-236 .gridTwoColumnImagesBlock {
    padding: 33px;
}

/* makes the title left aligned on the Ambassadors Page*/
.blockInstance-238 .topTxtHeader, .blockInstance-238 .mainText {
    text-align: left;
}
/* makes the title left aligned on the Ambassadors Page*/
.topTextBlock.blockInstance-238 {
    margin: 40px auto;
    max-width: 1440px;
    text-align: left;
}
/* makes the titles left aligned on the Partners Page*/
.topTextBlock.blockInstance-220, .topTextBlock.blockInstance-272, .topTextBlock.blockInstance-274, .topTextBlock.blockInstance-299 {
    margin: 40px auto;
    max-width: 1440px;
    text-align: left;
}
/* makes the titles left aligned on the Partners Page*/
.blockInstance-220 .topTxtHeader, .blockInstance-220 .mainText, .blockInstance-272 .topTxtHeader, .blockInstance-272 .mainText, .blockInstance-274 .topTxtHeader, .blockInstance-274 .mainText, .blockInstance-299 .topTxtHeader, .blockInstance-299 .mainText {
    text-align: left;
}

/*changes the width of the containing element inside hero block to make sure the text drops down a line on Partners and Studio Alumni pages*/
.blockInstance-235 .heroTextCentered, .blockInstance-232 .heroTextCentered, .blockInstance-311 .heroTextCentered, .blockInstance-301 .heroTextCentered {
    width: 870px;
}
/*all instances with 264, 267, 268 and 269 below are used to stylize the very custom red section on the bottom of the wella rewards page and the CANADA version*/
.blockInstance-264 .midTxtDescription, .blockInstance-290 .midTxtDescription {
    max-width: 840px;
    margin: 0 auto;
}

.divFourColumnIconBlock.blockInstance-267, .divFourColumnIconBlock.blockInstance-291 {
    grid-template-columns: repeat(3, 1fr);
    background-color:#FF2000;
    color:#fff;
    margin: 0 auto;
    padding:30px 0;

}
    .divFourColumnIconBlock.blockInstance-267 div, .divFourColumnIconBlock.blockInstance-291 div {
        max-width: initial;
    }
    .blockInstance-267 h2, .blockInstance-291 h2 {
       color: #fff;
    }

.blockInstance-264, .blockInstance-290 {
    padding-top:50px !important;
    clear:both;
}
.blockInstance-264 .midTxtHeader, .blockInstance-290 .midTxtHeader {
    background-color: #FF2000;
    color:#fff;
    text-align:center;
    padding:50px 0 0;
}
.blockInstance-269, .blockInstance-292 {
    margin: 0 auto;
}
    .blockInstance-269 .midTxtDescription, .blockInstance-292 .midTxtDescription {
        background-color: #FF2000;
        color: #fff;
        text-align: center;
        padding: 10px 0 50px 0;
    }
.blockInstance-268 {
    margin-top:80px;
}
/* adds top padding to the Canada Instagram Widget block*/
.blockInstance-282 {
    margin-top: 80px;
}
/*makes the grid on social media Canada page 2 columns instead of 3*/
.ThreeColumnImageBlock.blockInstance-305 .divImgGrid {
    grid-template-columns: repeat(2, 1fr);
}
/*turns off thead bio buttons for group and section*/
#BioGridContainer324 .showBioTab, #BioGridContainer324 .showBioSection {
    display: none !important;
}

#_ctl3_PnlWelcomeCanada.ThreeColumnImageBlock .divImgGrid {
    grid-template-columns: repeat(4, 1fr);
}
/*Instance Specific Media queries*/
@media (max-width: 768px) {
    /*removes the top padding for blocks that top border a hero element with no button or text and have too much space*/
    .blockInstance-221, .blockInstance-208, .blockInstance-209, .blockInstance-213 .repeaterRow:first-of-type, .blockInstance-224 .repeaterRow:first-of-type, .blockInstance-222, .blockInstance-219, .blockInstance-300 {
        margin-top: 0;
        padding-top: 0;
    }

    .blockInstance-214, .blockInstance-218 {
        margin: 0;
    }
    
    .blockInstance-216 .repeaterRow, .blockInstance-310 .repeaterRow {
        text-align: center;
        padding-bottom: 20px !important;
    }

    .blockInstance-216 .repeaterImgDiv,
    .blockInstance-216 .repeaterTextDiv,
    .blockInstance-310 .repeaterImgDiv,
    .blockInstance-310 .repeaterTextDiv {
        width: 100%;
        margin-top:0 !important;
    }
    .blockInstance-223, .blockInstance-319 {
        height: 200px;
        background-size: cover;
    }
    .topTextBlock.blockInstance-238 {
        margin: 0 auto;
    }

    /* adjusting the position of HERO image on Pros At Heart page for US and CANADA mobile*/
    .blockInstance-235 .divHeroImg img, .blockInstance-311 .divHeroImg img {
        object-position: -350px center;
    }
    /* adjusting the position of HERO image on Community page for mobile*/
    .blockInstance-229 .divHeroImg img {
        object-position: -250px center;
    }
    /* adjusting the position of HERO image on Wella Schools page for mobile*/
    .blockInstance-230 .divHeroImg img, .blockInstance-320 .divHeroImg img {
        object-position: -450px center;
    }
    /* adjusting the position of HERO image on Shows & Events page for mobile*/
    .blockInstance-227 .divHeroImg img {
        object-position: -650px center;
    }
    /* adjusting the position of HERO image on Brands page for mobile*/
    .blockInstance-231 .divHeroImg img, .blockInstance-286 .divHeroImg img {
        object-position: center;
    }
    /* adjusting the position of HERO image on Partners page for mobile*/
    .blockInstance-232 .divHeroImg img, .blockInstance-301 .divHeroImg img {
        object-position: -590px center;
    }
    /* adjusting the position of HERO image on Studios page for mobile*/
    .blockInstance-233 .divHeroImg img {
        object-position: -500px center;
    }
    /* adjusting the position of HERO image on Alumni page for mobile*/
    .blockInstance-234 .divHeroImg img, .blockInstance-306 .divHeroImg img {
        object-position: -340px center;
    }
    /* adjusting the position of HERO image on Become an Educator page for mobile*/
    .blockInstance-249 .divHeroImg img {
        object-position: -350px center;
    }
    /* adjusting the position of HERO image on Social Media page for mobile*/
    .blockInstance-246 .divHeroImg img, .blockInstance-302 .divHeroImg img {
        object-position: -180px center;
    }
    /* adjusting the position of HERO image on Social Media page for mobile*/
    .blockInstance-265 .divHeroImg img, .blockInstance-288 .divHeroImg img {
        object-position: -280px center;
    }
    /* adjusting the position of HERO image on About Us page for mobile*/
    .blockInstance-254 .divHeroImg img, .blockInstance-293 .divHeroImg img {
        object-position: -130px center;
    }
    /* adjusting the position of HERO image on Meet our Artists page for mobile*/
    .blockInstance-251 .divHeroImg img {
        object-position: -200px center;
    }
    #AccordionSection258 .subAccordion .ui-accordion-content, #AccordionSection258 .subAccordion h1.ui-accordion-header {
        width: 100%;
    }
}
/*customizing the width of the date field for WCE events on Calendar page*/
div[xlnk*="WCE"] {
    min-width: 190px;
}
/*Global Elite Info Pannel ----*/
#PnlWellaRewardsInfo h2 {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 18pt;
    margin-bottom: .6em;
    text-transform: uppercase;
}

.GEarrowGrid {
    display: grid;
    grid-template-columns: [first] 100px [line2] 250px [line3] 50px [col4-start] 130px [five] 120px [end];
    grid-template-rows: [row1-start] 300px [row1-end] 160px [third-line] auto [last-line];
    width: 650px;
    min-height:650px;
    margin: 0 auto;
}
.show1, .show2, .show3, .show4, .show5 {
    display: none;
}
.circleNumber1, .circleNumber2, .circleNumber3 {
    vertical-align: top;
    text-align: center;
    padding: 16px;
    color: #fff;
    font-size: 27pt;
    background: #c6003c;
    border-radius: 50% 50%;
    width: 80px;
    height: 80px;
}

.titleHowWorks{
    padding-left:40px;
}
.textNumber1 span, .textNumber2 span, .textNumber3 span {
    font-size:.9em;
    
}
    .circleNumber1 {
    grid-column-start: first;
    grid-column-end: line2;
    grid-row-start: row1-start;
    grid-row-end: row1-end;
    justify-self: center;
    align-self: start;
    margin: 20px 0;
}

.textNumber1 {
    grid-column-start: line2;
    grid-column-end: col4-start;
    grid-row-start: row1-start;
    grid-row-end: row1-end;
    max-width: 80%;
    line-height: 1.2;
}

.arrow1 {
    grid-column-start: line3;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: row1-end;
    justify-self: start;
    align-self: end;
}
.circleNumber2 {
    grid-column-start: col4-start;
    grid-column-end: five;
    grid-row-start: row1-end;
    grid-row-end: third-line;
    align-self: self-start;
    justify-self: center;
    margin: 10px 0;
}

.textNumber2 {
    grid-column-start: five;
    grid-column-end: end;
    grid-row-start: row1-end;
    grid-row-end: third-line;
    line-height: 1.2;
}

.arrow2 {
    grid-column-start: line2;
    grid-column-end: col4-start;
    grid-row-start: row1-end;
    grid-row-end: third-line;
    align-self: end;
}
.circleNumber3 {
    grid-column-start: first;
    grid-column-end: line2;
    grid-row-start: third-line;
    grid-row-end: last-line;
    justify-self: center;
    align-self: start;
    margin: 20px 0;
}
.textNumber3 {
    grid-column-start: line2;
    grid-column-end: col4-start;
    grid-row-start: third-line;
    grid-row-end: last-line;
    line-height: 1.2;
}

/*#PnlAlternatingTextImage .imgLeft img, #PnlAlternatingTextImage .imgRight img {
    max-width: 450px;
}*/
.repeaterRow .button, .repeaterOneCol .button, .mainText .button {
    text-decoration: none;
    white-space: normal;
    background-color: #FF2000;
    font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.repeaterImgDiv {
    vertical-align: top;
}

#RptGridTopImage .repeaterTextDiv {
    padding-bottom: 4em;
    width: 100%;
}

.repeaterImgDiv.imgRight {
    float: right;
    justify-self: center;
    padding-left: 60px;
}

.repeaterImgDiv.imgLeft {
    float: left;
    justify-self: center;
    padding-right: 60px;
}
.repeaterTextDiv p {
    margin-top:20px;
}

.repeaterTextDiv {
    vertical-align: top;
    display: table;
}
.RptLeftImageRightText .repeaterTextDiv {
    padding-left: 20px;
}
.RptLeftImageRightText h2 {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size:48px;
}
.RptLeftImageRightText .repeaterRow {
    clear: both;
}
.RptRightImageLeftText .repeaterRow {
    clear: both;
    padding: 0 20px;
}
.AlternatingTextImageBlock .repeaterRow{
    padding-top: 60px;
}
.LeftTextRightImageBlock {
    margin-top: 60px;
}
.showBioTab {
    background: #fff;
    padding: 12px;
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 16px;
    margin: 0 20px 10px 0;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    cursor:pointer;
}
.showBioTab.activeTab {
    background: #FF2000;
    border:1px solid #ff2000;
    color:#fff;
}

.showBioSection {
    background: #fff;
    padding: 12px;
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 16px;
    margin: 0 20px 10px 0;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    cursor: pointer;
}

    .showBioSection.activeSection {
        background: #F3F3F3;
        border: 1px solid #E0E0E0;
        color: #000;
    }
div[xid="biosection1"] {
    display:none;
}

.bioaccordion .repeaterP {
    text-align: left;
}

    .bioaccordion H2 {
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        font-weight: Bold;
        text-transform: uppercase;
        text-align: left;
        font-size: 36px;
    }
.bioJobTitle {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    min-height: 65px;
}
.bioaccordion .ui-accordion-header {
    text-align: left;
    font-size: 1.5em;
    border: none;
}

 .ui-accordion .ui-accordion-content {
    border: none;
}

.bioaccordion .ui-widget-content a {
    color: #fff;
}



#PnlBioLibrary .rotatorTabs .showBioTab {
    background-color: #000;
    margin: 2em 10px 1em 0;
    
    padding: 8px 16px 4px 16px;
    color: #BA0C2F ;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
}
    #PnlBioLibrary .rotatorTabs .showBioTab.activeTab {
        color: #fff;
    }


.widgetSbsText .button {
    text-transform: lowercase;
    padding: 10px;
}

.wigetImagesGrid {
    margin: 0 auto;
    text-align: center;
}

    .wigetImagesGrid img {
        max-width: 450px;
        max-height: 450px;
        display: inline-block;
    }

        .wigetImagesGrid img:hover {
            opacity: 0.7;
            filter: alpha(opacity=70);
            transition: opacity .25s ease-in-out;
            -moz-transition: opacity .25s ease-in-out;
            -webkit-transition: opacity .25s ease-in-out;
        }

    .wigetImagesGrid span {
        display: inline-block;
        margin: 0 20px;
        text-align: left;
    }

.bgBlackFull .widgetLargeBgBlock {
    color: white;
}

/*.widgetFAQ.ui-widget h3, .widgetFAQ.ui-widget h1 {*/
    /*background: white;*/
    /*border: 0;
    border-bottom: 1px solid black;
    border-radius: initial;
    font-size: 1.3em
}*/

/*
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: #FF2000;
    background: #f6f6f6;
}*/
/*
.ui-slider-handle {
    background-color: #BB0C2F;
}

.widgetFAQ.ui-widget h1 {
    font-size: 1.5em;
    border-bottom: 0;
}

.widgetFAQ.ui-widget .ui-accordion-content {
    border: 0;
}

.widgetFAQ .ui-state-active .ui-icon, .widgetFAQ .ui-button:active .ui-icon {
    background-image: url(/jquery/jquery-ui-1.12.1.custom/images/ui-icons_444444_256x240.png);
}*/




#PnlLogoBar img {
    padding: .5em 1em;
}

#PnlSocialBar {
    margin-top: 2em;
}

    #PnlSocialBar div {
        display: inline-block;
        font-size: 12px;
        text-align: center;
        margin: 0 2em;
    }

    #PnlSocialBar i {
        font-size: 64px;
    }
        #PnlSocialBar i:hover {
            color: #BB0C2F;
        }

        #PnlSocialBar #logos {
            text-align: center;
            padding:20px 0;
        }
            #PnlSocialBar #logos div {
                min-width: 92px;
            }

    #PnlSocialBar a {
        text-decoration: none;
    }
/*Form Styles ------------------*/
.ui-datepicker-calendar {
    width: initial;
    background-color: white;
}

#dashPage td {
    min-width: 150px;
}

tr[bgcolor="#CCCCFF"] {
    background-color: #BB0C2F !important;
    color: #fff;
}

tr[bgcolor="#FFCCCC"] {
    background-color: #FFCCCC !important;
}

/*removed this because it was causing issues with images on site
    
    img[src*="spacer"] {
    display: none;
}*/

#PnlUploadTool td {
    padding: 0.75em;
}

#TxtNotes {
    margin: .25em .75em 0 0;
}


#PnlBottomCarousel .slick-list {
    max-height: initial;
}
.rewards .slick-dotted.slick-slider {
    margin-bottom:0;
}
/*Library Page ------------------*/
#dashPage .imgProfile img {
    float: left;
    height: 120px;
    border-radius: 6px;
    margin-right: 3px;
}



#PnlCatlist {
    padding: 1em;
}

#DtlCategories table {
    background: transparent;
}

#DtlLibraryAvail .button {
    padding: .5em 1em;
}

.divCatPageMenu {
    width: 250px;
    background-color: #e2e3e4;
    margin: 0 1.75em;
}
.divCatPageImg {
    margin-top: 30px;
}

#DdlViewMode {
    margin: 0;
}

#LblLibrary {
    padding: 1em;
    display: block;
}

#BtnDownloadZip {
    margin: 1em;
}
#BtnDownloadLibraryZip {
    margin-top: 1em;
}

#TxtSearchLibrary {
    max-width: 35%;
    display: inline-block;
}
#TxtSearch, #TxtSearchResources {
    padding-left: 40px;
    background-color: #fff;
    border: 1px solid #BDBDBD;
    border-radius: 5px;
    text-align: left;
}
input:focus-visible#TxtSearch, input:focus-visible#TxtSearchResources {
    outline: #ccc;
}
.searchText {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 28px;
    text-decoration: none;
    color: #000;
    display:inline-block;
    text-transform:uppercase;
    margin-bottom:8px;
}
#BtnSearch, #btnSearchResources {
    display: inline-block;
    position: absolute;
    margin: 5px 0 0 15px;
}
#PnlCatSearch .searchIcon {
    display: inline-block;
    position: absolute;
    margin: 17px 0 0 -9px;
    z-index: 10;
}
#DtlLibraryAvail img[src*="spacer"] {
    display: block;
}

.divCatPageMenu {
    float: left;
    vertical-align: top;
}

.divCatPageList {
    text-align: right;
}

#TxtSearchLibrary {
    max-width: 65%;
    line-height: 33px;
    border: 1px solid #dee1e3;
}

#LblLibrary {
    padding: initial;
    display: initial;
}

.gridDtlItems {
    display: grid;
    grid-template-columns: 20% 55% 20%;
    grid-gap: 1em;
    padding: 1em 0;
    align-items: center;
}

    .gridDtlItems h3 {
        text-transform: uppercase;
        color: #BB0C2F;
        margin: 0;
        font-weight: 500;
        font-size: 1.3em;
    }

.DtlItemImg {
    text-align: center;
}

.DtlItemCbx {
    vertical-align: top;
    text-align: right;
}

    .DtlItemCbx input[type="checkbox"] + label, .DtlItemCbx input[type="radio"] + label {
        margin-top: 0;
    }

#DtlCategories table {
    background-color: #f9f7f5;
    margin: 3px 0;
}

#DtlCategories a {
    text-decoration: none;
    text-transform: Capitalize;
    /*margin: 0 .5em;*/
}

/*#DtlCategories td[align] {
    display: none;
}*/

#DtlCategories td {
    padding: 3px 0;
}

.divMoreInfo {
    display: none;
}

.butMoreInfo {
    background: #e2e3e4;
    padding: 2px;
    width: 100px;
    cursor: pointer;
    text-align: center;
}

/*LMS Pages ------------------*/
.search input[type="text"] {
    margin: .2em 0 0 0;
    line-height: 2.5em;
    height: 2.5em;
    border-radius: initial;
    width: 340px;
    padding: 0 2em 0 0.8em;
    border: none;
    border-bottom: 2px solid #bfbfbf;
    padding-left: 0;
    display:inline-block;
}
    .search input[type="text"]:focus {
        outline: none;
    }
    .search input[type="text"]:-internal-autofill-selected {
        background-color: none !important;
    }
#searchButton {
    cursor: pointer;
    margin-right: 24px;
    display: flex;
    flex-wrap:nowrap;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
  
}

nav .search .far.fa-search {
    position: relative;
    top: 3px;
    right: 25px;
    cursor: pointer;
}
.search {
    max-width:400px;
    margin:0 auto;
    text-align:left;
}
    .search .fa-search {
        position: relative;
        left: -15px;
        color: #bfbfbf;
    }
    .tinySearchText {
        font-size: .6em;
        color: #c3c3c5;
    }
#searchOverlayBlack {
    background: rgba(0,0,0,.8);
    height: 100%;
    width: 100%;
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}
    
#searchOverlay {
    background: rgba(255, 255, 255, 1);
    color: #666666;
    position: fixed;
    height: 50%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    z-index: 100000;
    min-height:200px;
}

.fontSpaceMono {
    
    font-weight: Bold;
}


.jumpWE {
    cursor:pointer;
}
#jumpWEOverlay {
    display: none;
    background-color: rgba(0,0,0,.8);
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    z-index: 100000;
}

#jumpWEOverlayInner {
    background-color: #fff;
    width: 50%;
    height: 50%;
    margin: 100px auto;
}





/*.bannerUnderline {
    border-bottom: #000 solid 1.1em;
    max-width: 85%;
    margin-bottom: 0;
}*/


#divBannerWide img {
    margin-top: 2em;
}






/*input[type="submit"].btnOrangeText, .btnOrangeText {
    text-transform: uppercase;
    
    font-weight: Bold;
    font-size: 1.2em;
    text-decoration: none;
    background: none;
    padding: 0;
    margin: 0;
    line-height: initial;
    height: initial;
}*/
/*Lower content section ------------------*/


/*SLICK SLIDER ------------------*/

.slick-slider {
    background-color: white;
}
.rewards .slick-slider {
    background-color: transparent;
}
.rewards .slick-track {
    display: flex;
}

.rewards .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
}
.rewards .slick-prev:before, .rewards .slick-next:before {
    color:#000;
}

.quotes.slick-slider {
    background-color: transparent;
}

#splitPage .quotes.slick-slider {
    background-color: #ccc;
    padding: 3em;
}

#splitPage .slick-slide blockquote {
    font-size: 1.3em;
}

#splitPage .slick-slide h2 {
    font-size: 1.8em;
    color: #BB0C2F;
}

/*.slick-list {
    max-height: 440px;
}*/


.slick-slide figure {
    margin: 2em 1em;
    height: 320px;
    width: 300px;
    overflow: hidden;
}

#splitPage .slick-slide figure {
    width: 90%;
    height: initial;
}
/*.imgRptSlick {
    margin: 0 auto;
    width: 150px;
}*/

.slickShowsEvents {
    margin-top:60px;
}
    .slickShowsEvents .slick-prev {
        font-size: 1px;
        color: transparent;
        left: 6px;
        line-height: 1;
    }
    .slickShowsEvents .slick-next {
        font-size: 1px;
        color: transparent;
        right: 6px;
        line-height:1;
    }
.slick-prev:before, .slick-next:before {
    font-size: 25px;
}


    #PnlLogoBar {
        text-align: center;
        margin: 4em 0;
    }

#PnlMidHeadline .mainText {
    font-weight: 300;
    color: black;
    text-align: center;
    margin: 0 0 2em 0;
}

#PnlMidHeadline {
    padding-top: 2em;
    background: #fff;
}

#PnlRotators .mainText {
    font-family: 'ABCRom Compressed Black';
    font-size: 58px;
    color: black;
    margin: 30px 0 0 0;
    text-transform: uppercase;
    text-align: left;
}
#PnlRotators .subText {
    font-size: 19px;
    text-align: left;
    margin: 0 0 25px 0;
}
.mainText2 {
    font-weight: 300;
    color: black;
    max-width: 1200px;
    margin: 3em auto;
    padding: 0 2em;
    display: block;
}

#PnlMidHeadline .wrapper {
    padding: 3em 0 0 0;
}
.searchFiltersBox {
    text-align: center;
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
}
.gridSearchButs {

}
/*NewCalendar Page "rotator" type event detail display*/
#OnDemandEvtListDiv, .divMonthGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 430px));
    justify-items: center;
    gap: 20px;
    padding: 4px;
    align-items: stretch;
}

.eventListResults figure {
    margin: 0; /* Cleared out the default/uneven auto margins causing alignment drift */
    /* Forces every single visible box to perfectly match the height of the grid row container */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
    /* Optional: If you want a fixed baseline height on desktop, keep a min-height */
    min-height: 504px;
}

.eventListResults .imgRptSlick {
    margin: 0 auto;
    width: 100%;
   /* object-position: 0 -50px;*/
    min-height:240px;
}

.eventListResults blockquote {
    font-size: 16px;
    padding: 0 18px;
    display: inline-block;
    margin-bottom: 10px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    font-style: normal;
    overflow: hidden;
    max-height: 45px;
}

.eventListResults h2 {
    padding: 0 18px 0 18px;
    font-size: 28px;
    font-weight: normal;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    overflow: hidden;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    overflow: hidden;
    height: 30px;
    flex-shrink: 0;
}
.eventlist {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    width: 100%;
}


.searchIcon {
    font-size: 14px;
    color: #bdbdbd;
}



/* Filter dropdown groups for calendar filters */
.filterButton {
    margin: 20px 0 0 0;
    float: right;
}
.filter-group {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.filter-toggle {
    background: #F3F3F3;
    color: #000;
    font-family: 'ABCRom Medium';
    border: 1px solid #e2e3e4;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    min-width: 148px;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .filter-toggle i {
        margin-left: 8px;
        font-size: 0.9em;
    }

.filter-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 8px;
    z-index: 1200;
    box-sizing: border-box;
    text-align: left;
    font-size:14px;
}

/* show when open */
.filter-group.open .filter-dropdown {
    display: block;
    background-color: #F3F3F3;
}

/* filter items inside dropdown use existing markup; make them full width */
.filter-dropdown .filter_format,
.filter-dropdown .filter_location,
.filter-dropdown .filter_language,
.filter-dropdown .filter_topic,
.filter-dropdown .filter_level,
.filter-dropdown .filter_price,
.filter-dropdown .filter_locationgroup,
.filter-dropdown .filter_month,
.filter-dropdown .filter_craft,
.filter-dropdown .filter_brand {
    display: block;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}

    /* hover state */
    .filter-dropdown .filter_format:hover,
    .filter-dropdown .filter_location:hover,
    .filter-dropdown .filter_language:hover,
    .filter-dropdown .filter_topic:hover,
    .filter-dropdown .filter_level:hover,
    .filter-dropdown .filter_price:hover,
    .filter-dropdown .filter_locationgroup:hover,
    .filter-dropdown .filter_month:hover,
    .filter-dropdown .filter_craft:hover,
    .filter-dropdown .filter_brand:hover {
        background: #f6f6f6;
    }

/* 1. Hide the FontAwesome icons (fa-square / fa-check-square) */
.filter-dropdown div i.fal,
.filter-dropdown div i.fas {
    display: none !important;
}

/* 2. Base style for all filter items */
.filter-dropdown .filter_format,
.filter-dropdown .filter_location,
.filter-dropdown .filter_language,
.filter-dropdown .filter_topic,
.filter-dropdown .filter_level,
.filter-dropdown .filter_price,
.filter-dropdown .filter_locationgroup,
.filter-dropdown .filter_month,
.filter-dropdown .filter_craft,
.filter-dropdown .filter_brand {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes text left, X right */
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* 3. SELECTED STATE: When checkstate="1" */
.filter-dropdown div[checkstate="1"] {
    background-color: #E0E0E0 !important; /* The grey background */
    font-weight: 500;
    color: #000;
}

    /* 4. Add the "X" icon to selected items */
    .filter-dropdown div[checkstate="1"]::after {
        content: '✕'; /* Unicode for a clean 'X' */
        font-size: 14px;
        color: #666;
        margin-left: 8px;
    }

/* 5. HOVER STATE: Only for items not currently selected */
.filter-dropdown div[class^="filter_"]:hover:not([checkstate="1"]) {
    background: #f6f6f6;
}
/* Header Positioning */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-main-title {
    font-family: 'ABCRom Regular', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.clear-filters {
    color: #FF3B00; /* Your brand red */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.clear-search {
    position: absolute;
    right: 14px;
    top: 7px;
    cursor: pointer;
}
.fieldBox.searchbox {
    position: relative;
}
.iconSearchMagLens {
    position: absolute;
    left: 13px;
    top: 7px;
    color: #bdbdbd;
}
/* Footer Positioning */
.filter-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.found-count {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

    .found-count span {
        color: #FF3B00; /* Red number */
        margin-left: 4px;
    }

/* Ensure Search Button doesn't have old floats */
.filterButton {
    float: none !important;
    margin: 0 !important;
    background-color: #FF3B00;
    color: #fff;
    padding: 12px 25px;
    text-transform: uppercase;
}

/* small responsive adjustments */
@media (max-width: 740px) {
   

    .filter-dropdown {
        position: static;
        top: auto;
        left: auto;
        box-shadow: none;
        border: 1px solid #eee;
        max-width: 100%;
        margin-top: 6px;
    }

    .filter-toggle {
        width: 100%;
        justify-content: space-between;
    }
}

/* Filter dropdown groups for resource filters */
.filter-toolbar-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Pushes Search LEFT, Dropdowns RIGHT */
    align-items: center; /* Perfectly centers them vertically */
    width: 100%;
    max-width: 1068px; /* Locked custom structural width */
    margin: 0 auto; /* Centers container inside window view */
    box-sizing: border-box;
    padding: 10px 0;
}

/* Left Group Style Container Fix overrides */
.search-panel-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Right Group Inner Elements Wrapper Layout */
.resourceNav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px; /* Internal spacing between custom buttons */
}

/* Clear floating position constraints on dropdown drawers */
#PnlResults .filter-group {
    position: relative;
}

#PnlResults .filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0; /* Aligns open menu cards flush to right edge */
    left: auto; /* Overrides old left constraints */
    background-color: #ffffff;
    min-width: 220px;
    z-index: 999;
}




.wrapCrumbsDiv {
    margin: 30px 0;
    font-size: 14px;
}
/* Bottom Row Layout */
.eventListResults .divSlickFooter {
    margin-top: 12px;
}


/* Grid container: equal-height cells */

.ThreeColumnImageTextBlock, .ThreeColumnImageBlock, .FourColumnImageTextBlock {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: stretch;
    grid-auto-rows: 1fr; /* ensure every cell stretches to same height */
    box-sizing: border-box;
}

    /* Card => vertical flex so we can push CTA to bottom */

    .ThreeColumnImageTextBlock figure, .ThreeColumnImageBlock figure, .FourColumnImageTextBlock figure {
        display: flex;
        flex-direction: column;
        height: 100%; /* fill grid cell */
        margin: 0;
        background: #fff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 6px;
    }

.ThreeColumnImageTextBlock blockquote, .FourColumnImageTextBlock blockquote {
    font-size: 19px;
    font-style: normal;
    line-height: 26px;
}
    /* Image fills wrapper, cover */
.img3Col {
    width: calc(100% + 4px);
    margin-left: -1px;
    height: 100%;
    object-fit: cover; /* cover background */
    display: block;
    border-radius: 0;
    height: 240px; /* never exceed 240px */
    max-width:none;
}
.img4Col {
    width: calc(100% + 4px);
    margin-left: -1px;
    height: 100%;
    object-fit: cover; /* cover background */
    display: block;
    border-radius: 0;
    height: 443px; /* never exceed 443px */
    max-width: none;
}


        /* Content area under image: a column flex so body expands and CTA sits at bottom */
        .gridThreeColumnImagesBlock, .gridFourColumnImagesBlock  {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            padding: 24px;
            box-sizing: border-box;
        }

        /* Title: 48px and allow wrapping */
       .ThreeColumnImageTextBlock figure h2 {
            margin: 0 0 12px 0;
            font-size: 48px;
            line-height: 1.02;
            font-weight: 900;
            letter-spacing: -0.6px;
            word-break: break-word;
        }

.FourColumnImageTextBlock figure h2 {
    margin: 0 0 12px 0;
    font-size: 36px; 
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.6px;
    word-break: break-word;
}
        /* CTA row: pushed to bottom by margin-top:auto */
.threeColumnImagesCTA, .fourColumnImagesCTA {
    margin-top: auto; /* critical: pushes CTA to bottom of cardContent */
    display: flex;
    align-items: center;
    padding-top: 16px;
}

            /* Button style (in-flow) */
    .threeColumnImagesCTA .button, .fourColumnImagesCTA .button {
        margin: 0;
        display: inline-block;
        align-self: flex-start; /* left-aligned, sits at bottom of the CTA area */
    }
/*Three Column Image Block*/

/* 1. Make the container a positioning anchor and hide overflows */
.ThreeColumnImageBlock figure, .FourColumnImageBlock figure {
    position: relative; /* Allows absolute positioning inside */
    overflow: hidden;
}

    /* 2. Style the anchor link to cover the full space if it doesn't already */
    .ThreeColumnImageBlock figure a, .FourColumnImageBlock figure a {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* 3. Style the images to ensure they span properly */
    .ThreeColumnImageBlock figure img, .FourColumnImageBlock figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Keeps images from distorting */
    }

    /* 4. Overlay the title directly in the center middle */
    .ThreeColumnImageBlock figure h2, .FourColumnImageBlock figure h2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Center text vertically and horizontally */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0;
        color: #ffffff;
        font-weight: bold;
        text-transform: uppercase;
        transition: background 0.3s ease;
        font-size: 42px;

    }

    /* Optional: Subtle hover state to make it feel interactive */
    .ThreeColumnImageBlock figure:hover h2, .FourColumnImageBlock figure:hover h2 {
        background: rgba(0, 0, 0, 0.2);
    }

/* Two column Block */

.TwoColumnImageBlock {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    align-items: stretch;
    grid-auto-rows: 1fr; /* ensure every cell stretches to same height */
    box-sizing: border-box;
    margin-top:50px;
}

    /* Card => vertical flex so we can push CTA to bottom */

    .TwoColumnImageBlock figure {
        display: flex;
        flex-direction: column;
        height: 100%; /* fill grid cell */
        margin: 0;
        background: #fff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        box-sizing: border-box;
        border-radius:6px;
    }

    .TwoColumnImageBlock blockquote {
        font-size: 19px;
        font-style: normal;
        line-height: 26px;
    }




/* Title: 48px and allow wrapping */
.TwoColumnImageBlock figure h2 {
    margin: 0 0 12px 0;
    font-size: 48px; /* requested size */
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.6px;
    word-break: break-word;
}
/* Image fills wrapper, cover */
.img2Col {
    width: calc(100% + 4px);
    margin-left: -1px;
    max-width: none;
    height: 100%;
    object-fit: cover; /* cover background */
    display: block;
    border-radius: 0;
    height: 440px; /* never exceed 440px */
}

/* Content area under image: a column flex so body expands and CTA sits at bottom */
.gridTwoColumnImagesBlock {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px;
    box-sizing: border-box;
}

/* Title: 48px and allow wrapping */
.TwoColumnImageBlock figure h2 {
    margin: 0 0 12px 0;
    font-size: 48px; /* requested size */
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.6px;
    word-break: break-word;
}


/* CTA row: pushed to bottom by margin-top:auto */
.twoColumnImagesCTA {
    margin-top: auto; /* critical: pushes CTA to bottom of cardContent */
    display: flex;
    align-items: center;
    padding-top: 16px;
}

    /* Button style (in-flow) */
    .twoColumnImagesCTA .button {
        margin: 0;
        display: inline-block;
        align-self: flex-start; /* left-aligned, sits at bottom of the CTA area */
    }




/* truncate the text in meet our artists page so they can click to read more */

/* Specific layout overrides only for the team/bio grid variation */
.divImgGrid.grid-bio-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Force the figures to act as flexible columns */
.grid-bio-cards figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100%;
    max-width:100%;
}

/* Ensure the text container fills the remaining vertical space */
.grid-bio-cards .gridFourColumnImagesBlock {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
}

    /* Let the blockquote expand to push the CTA button to the absolute bottom */
    .grid-bio-cards .gridFourColumnImagesBlock blockquote {
        flex-grow: 1;
        margin: 0 0 15px 0;
        font-style: normal;
        font-size:16px;
    }

/* Styled Read More text to match your premium branding */
.grid-bio-cards .read-more-lnk {
    color: #ff3300;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: underline;
    margin-left: 5px;
    display: inline-block;
}

/* Responsive fallback for tablets/mobile without breaking global styles */
@media (max-width: 1024px) {
    .divImgGrid.grid-bio-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .divImgGrid.grid-bio-cards {
        grid-template-columns: 1fr;
    }
}

/*New test Rotator*/
#PnlRotators {
    padding: 20px 0;
    text-align: center;
    max-width: 1375px;
    margin: 0 auto;
}
    #PnlRotators .slick-slider {
        background-color: transparent;
    }
    #PnlRotators .slick-slide figure {
        margin: 20px auto;
        height: 474px;
        width: 443px;
        overflow: hidden;
        text-align: left;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 6px;
    }
.rotateImgDiv {
/*    width: 443px;*/
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
    max-width: 100%;

}
.rotateLink {
    text-align: center;
    display: inline-block;
}
    .rotateLink a {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: #FF2000;
        border-radius: 0;
        border: 0;
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        padding: 3px;
        font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        vertical-align: top;
        padding: 14px 22px;
        min-width: 111px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
    }

    .rotateLink a:hover {
        color: #000000;
    }

#PnlRotators .imgRptSlick {
    margin: 0 auto;
    width: 100%;
    object-position: 0 -40px;
}
#PnlRotators .slick-slide blockquote {
    font-size: 16px;
    padding: 0 20px;
    display: inline-block;
    margin-bottom: 10px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
}

.dotsCont {
    display:inline-block;
}
#LblRotatorTitle {
    text-transform: uppercase;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    color: #000;
    font-size:48px;
}
    #LblRotatorTitle span {
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    }
.divRoundedTags {
    padding: 16px 18px 8px 18px;
    flex-shrink: 0;
}
.pillButton {
    font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 5px 12px 2px 12px;
    font-size: 14px;
    letter-spacing: .42px;
    line-height: 15.96px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 6px;
}







.slick-registration-container {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin-top: auto;
    padding-bottom: 20px;
    box-sizing: border-box;
}

/* Top Row Layout */
.divSlickHeader {
    display: flex;
    gap: 40px; /* Adjust this to control space between Date and Location */
    justify-content: flex-start;
    align-items: center;
}

/* Bottom Row Layout */
.divSlickFooter {
    display: flex;
    justify-content: space-between; /* Pushes button to the far right */
    align-items: flex-end; /* Aligns price bottom with button bottom */
}

/* Individual Item Styling */
.divSlickDate, .divSlickLocation {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
}

.divSlickPrice {
    font-size: 24px;
    color: #FF2000;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    line-height: 1; /* Prevents extra space below the price */
    align-self: center;
}

.rotateLink {
    display: inline-block;
    background-color: #FF2000;
    color: #ffffff;
    padding: 14px 22px;
    text-decoration: none;
    font-family: 'ABCROM Mono Book', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}
.PnlResourceTiles {
    text-align: center;
    background-color: #F3F3F3;
    padding: 78px 0;
}
.resourcesTitle {
    text-transform: uppercase;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 48px;
}
.resourcesDesc {
    padding-top: 11px;
    font-size:19px;
    margin: 0 10px;
}
.resourcesDivContainer {
    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.2);
}
.gridResources {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 940px;
    grid-gap: 10px;
    margin: 30px auto;
    justify-items: center;
}
.resourcesDivContainer {
    background-color: #fff;
    max-width: 299px;
}
    .gridResources h3 {
        font-family: 'ABCRom Compressed Black';
        font-size: 28px;
        text-transform: uppercase;
        margin:10px;
    }
.resourcesLinks {
    padding-top: 15px;
}

.resourcesViewAll {
    margin: 60px 0 0 0;
}
.imgWrapHeight {
    max-height: 460px;
}

@media only screen and (max-width: 950px) {
    .resourcesDivContainer, .gridResources div img {
        max-width: 250px
    }
    .gridResources {
        width: 100vw;
    }
}
@media only screen and (max-width: 780px) {
    .resourcesDivContainer, .gridResources div img {
        max-width: 240px
    }
    .gridResources {
        width: 100vw;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 768px) {
    .gridResources div img {
        max-width: 100%; 
        width: 100%;
        object-fit: cover; 
        object-position: 0 -200px;
    }
    .gridResources .resourcesDivContainer.resources1 img {
        object-position: 0 -170px;
    }
    .gridResources .resourcesDivContainer.resources2 img {
        object-position: 0 -175px;
    }
    .gridResources .resourcesDivContainer.resources3 img {
        object-position: 0 -170px;
    }
        .gridResources {
            width: 100%;
            display: block;
        }
    .imgWrapHeight {
        overflow: hidden;
        height: 204px;
    }
    .gridResources h3 {
        margin:0;
    }
    .resourcesDivContainer {
        margin:20px auto;
        max-width:94%;
    }
}


.certsDivContainer {
    max-width: 1440px;
    margin: 0 auto 100px auto;
    text-align: center;
    font-size:19px;
}
    .certsDivContainer h1 {
        font-size: 103px;
        color: #FF2000;
        font-family: 'ABCRom Compressed Black';
    }
.divImgCertsLevels {
    text-align: center;
    margin: 10px 0 30px;
}
.cert-rollover-container {
    position: relative;
    display: inline-block;
    padding-right:5px;
}

.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cert-rollover-container:hover .img-hover {
    opacity: 1;
}
/*  OSCAR hover effect -----NOT USED ANYMORE WITH 2026 UPDATE */
.gridRC {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    list-style: none;
    text-align: center;
}

        /* Common style */
        .gridRC figure {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin: 1px 3px;
            max-width: 240px;
            max-height: 360px;
            width: 48%;
            background: #3085a3;
            text-align: center;
            cursor: pointer;
        }

            .gridRC figure img {
                position: relative;
                display: block;
                min-height: 100%;
                max-width: 100%;
                opacity: 0.8;
            }

            .gridRC figure figcaption {
                padding: 2em;
                color: #fff;
                text-transform: uppercase;
                font-size: 1.25em;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

                .gridRC figure figcaption::before,
                .gridRC figure figcaption::after {
                    pointer-events: none;
                }

                .gridRC figure figcaption,
                .gridRC figure figcaption > a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                    /* Anchor will cover the whole item by default */
                    .gridRC figure figcaption > a {
                        z-index: 1000;
                        text-indent: 200%;
                        white-space: nowrap;
                        font-size: 0;
                        opacity: 0;
                    }

            .gridRC figure h2 {
                color: #fff;
                text-shadow: 2px 2px 4px #000;
                word-spacing: -0.15em;
                font-weight: 300;
                font-size: 21pt;
                line-height: 1;
            }

            .gridRC figure h2 {
                font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
                font-size: 18pt;
            }

                .gridRC figure h2 span {
                    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
                    font-size: 18pt;
                    display: block;
                }

            .gridRC figure h2,
            .gridRC figure p {
                margin: 0;
            }

            .gridRC figure p {
                letter-spacing: 1px;
                font-size: 68.5%;
                text-shadow: 1px 1px 2px #000;
            }

    figure.effect-oscar {
        background: -webkit-linear-gradient(45deg, #FF2000 0%, #FF2000 40%, #FF2000 100%);
        background: linear-gradient(45deg, #FF2000 0%, #FF2000 40%, #FF2000 100%);
    }

        figure.effect-oscar img {
            opacity: 0.9;
            -webkit-transition: opacity 0.35s;
            transition: opacity 0.35s;
        }

        figure.effect-oscar figcaption {
            padding: 3em 2em;
            background-color: rgba(58,52,42,0);
            -webkit-transition: background-color 0.35s;
            transition: background-color 0.35s;
        }

            figure.effect-oscar figcaption::before {
                position: absolute;
                top: 30px;
                right: 30px;
                bottom: 30px;
                left: 30px;
                border: 1px solid #fff;
                content: '';
            }

        figure.effect-oscar h2 {
            margin: 22% 0 10px 0;
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }

        figure.effect-oscar figcaption::before,
        figure.effect-oscar p {
            opacity: 0;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        figure.effect-oscar:hover h2 {
            /*-webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);*/
        }

        figure.effect-oscar:hover figcaption::before,
        figure.effect-oscar:hover p {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        figure.effect-oscar:hover figcaption {
            background-color: rgba(58,52,42,0);
        }

        figure.effect-oscar:hover img {
            opacity: 0.4;
        }

    @media only screen and (max-width: 805px) {

        .gridRC figure {
            width: 150px;
            height: 225px
        }

            .gridRC figure h2 {
                font-size: 18pt;
            }

                .gridRC figure h2 span {
                    font-size: 12pt;
                }

        figure.effect-oscar figcaption {
            padding: 1em;
        }

            figure.effect-oscar figcaption::before {
                top: 15px;
                right: 15px;
                bottom: 15px;
                left: 15px;
            }
    }

    /* end OSCAR hover effect*/


    #PnlRotators .slick-slide h2 {
        padding: 0 18px 0 18px;
        font-size: 28px;
        font-weight: normal;
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        overflow: hidden;
        text-transform: uppercase;
        margin: 0 0 16px 0;
    }

    .slick-slide footer {
        margin-bottom: 2em;
        vertical-align: bottom;
    }

    .slick-slide img {
        width: 1358px;
        max-width: 100%;
    }

    .slick-slide h2 {
        text-transform: uppercase;
        margin: 10px 0;
        font-size: 1.5em;
        text-transform: uppercase;
        line-height: 1.4;
    }

    .slick-slide blockquote {
        color: #000000;
        font-style: normal;
        height: 45px;
        overflow: hidden;
        font-weight: 400;
        line-height: 1.1em;
    }

    .slick-slide .company a {
        text-transform: uppercase;
        font-weight: bold;
        background-color: #000;
        font-size: 1.5em;
        color: #fff;
        text-decoration: none;
        padding: .8em 1em;
        font-style: normal;
    }

    .slick-dots {
        padding: 20px 0 0 0 !important;
        position: relative !important;
        bottom: 0 !important;
    }





    .wrap {
        position: relative;
        z-index: 100;
        width: 100%;
        height: 100%;
        padding: 0 60px;
        background-color: #230e2c;
        -webkit-background-size: cover;
        background-size: cover;
        overflow: hidden;
    }


    .item.slick-slide.slick-center + .slick-slide {
        transform: "";
        /* z-index: 10; */
    }

    .wrap:after {
        content: '';
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /*.slider {
    position: relative;
    z-index: 200;
    padding: 0 0px;
    margin: 5rem auto;
    max-width: 100%;
    width: 100%;
}*/

    .slick-arrow {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 50px;
        line-height: 50px;
        margin-top: -25px;
        border: none;
        background: transparent;
        color: #fff;
        font-family: monospace;
        font-size: 5rem;
        z-index: 300;
        outline: none;
    }

    .slick-prev {
        left: -50px;
        text-align: left;
    }

    .slick-next {
        right: -50px;
        text-align: right;
    }

    .item.slick-slide {
        width: 400px;
        height: 400px !important;
        transition: transform .4s;
        position: relative;
    }

    .slick-slide {
        padding: 0 20px 0 0;
    }
.slickShowsEvents .slick-slide {
    padding-right: 11px;
}
.carousel {
    margin-top: 113px;
}

        .carousel .slick-slide {
            padding: 0;
        }

    .slick-slide:after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: transform .4s;
    }

    .item.slick-slide {
        transform: scale(0.7) translate(640px);
    }

    .slick-slide.slick-current {
        opacity: 1;
    }

    .item.slick-slide.slick-center + .slick-slide {
        transform: scale(0.8) translate(-250px);
        z-index: 10;
    }

        .item.slick-slide.slick-center + .slick-slide + .item.slick-slide {
            transform: scale(0.7) translate(-640px);
            z-index: 5;
        }

    .item.slick-slide.slick-active {
        transform: scale(0.8) translate(250px);
    }

    .item.slick-slide.slick-center {
        /* margin: 0 -10%; */
        transform: scale(1);
        z-index: 30;
    }

    .slick-slide.slick-center figure {
        background-image: linear-gradient(to bottom, #ffffff, #d9d9d9);
    }





    .slick-center .img {
        display: inline-block;
    }



    p.title {
        position: absolute;
        text-align: center;
        color: #fff;
        left: 37%;
        font-size: 20px;
        top: 50%;
    }

    p.description {
        position: absolute;
        text-align: center;
        color: #fff;
        bottom: 0;
        font-size: 20px;
        display: none;
    }

    /*end new rotator*/


    /*Master Slider Landing Page*/

    .msLanding h1 {
        color: #ffffff;
        font-size: 1.5em;
        text-transform: uppercase;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    }

    .msLanding .topH2 {
        color: #fff;
        text-transform: uppercase;
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        font-size: 48px;
    }

    .msLanding .underText {
        color: #fff;
        line-height: 26px;
        font-size: 19px;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        max-width:430px;
    }

    #masterslider186 {
        background-color: #FF2000;
    }
    .master-slider-mobile {
        display:none;
    }

/*Landing Page Certifications*/
.divBadgeRollover {
    display: inline-block;
    width: 260px;
    height: 350px;
    background-size: cover;
}

    .divWhiteBox {
        background: #fff;
        width: 260px;
        height: 350px;
    }

        .divWhiteBox:hover {
            transition: background 0.5s ease-in-out;
            background: transparent;
        }

    .imgBadgeLanding {
        margin: 100px 0;
        filter: drop-shadow(0 0 20px white);
    }

    .imgBadgeLandingHover {
        filter: drop-shadow(0 0 20px white);
        opacity: .7;
    }


    .resourcesGrid {
        display: grid;
        grid-template-columns: 150px auto;
        grid-gap: 10px;
        align-items: center;
    }

    #functionbar .form {
        margin-top: 13px;
    }


    #PnlBannerBar .divBannerContainer {
        text-align: center;
        padding: 2em 0;
        max-width: 1700px;
        margin: 0 auto;
        background-image: url('/templates/4/images/dots.png');
    }

    .dotsBG {
        background-image: url('/templates/4/images/dots.png');
    }

    .divHeaderLeft {
        max-width: 500px;
        float: left;
        padding: 0 0 40px 0;
    }

    .subHeadTxt {
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        color: #000;
        display: block;
        line-height: .65;
        font-size: 2em;
    }

    .mainHeadTxt {
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        color: #000;
        display: block;
        font-size: 2em;
        text-transform: uppercase;
        line-height: 1;
    }

        .mainHeadTxt i {
            font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
            font-style: normal;
        }

    .bodyTxt {
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
    }

    .linkBut {
        text-align: right;
        display: block;
        padding: 0 50px 0 0;
    }

    .rewards .linkBut {
        padding: 50px 50px 0 0;
    }

    #PnlThreeColumnImageBar {
        padding: 80px 0;
    }


    #PnlClickThroughSlides .slideButton {
        text-align: center;
        margin: 20px;
        cursor: pointer;
        padding: 0 40px 5px 0;
        display: inline-block;
        margin-right: 5px;
        color: #a3a3a3;
        border-bottom: 1px solid #a3a3a3;
    }

    #PnlClickThroughSlides .activeSlideButton {
        text-align: center;
        margin: 20px;
        cursor: pointer;
        padding: 0 40px 5px 0;
        display: inline-block;
        margin-right: 5px;
        color: #BB0C2F;
        border-bottom: 1px solid #BB0C2F;
    }

    .divClickThroughSlide {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    #PnlClickThroughSlides .divStrButtons {
        position: relative;
        top: -80px;
        right: 100px;
        direction: rtl;
    }

    .clickThroughSlide, .clickThroughSlideCustom {
        width: 100%;
        height: 500px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    #PnlClickThroughSlideButtons2 .clickThroughSlideCustom {
        text-align: center;
        height: initial;
        min-height: 500px;
    }

    .clickThroughSlide h3, .clickThroughSlideCustom h3 {
        color: #fff;
        margin: 0;
        text-transform: uppercase;
        font-size: 1.5em;
    }

    #PnlClickThroughSlides .clickThroughText {
        color: #fff;
        float: right;
        padding: 100px 100px 0 0;
        width: 400px;
    }

    #PnlClickThroughSlideButtons .clickThroughText {
        color: #fff;
        float: right;
        margin: 200px 100px 0 0;
        padding: 30px;
        width: 400px;
        font-size: .9em;
        line-height: 1.3;
        position: absolute;
        right: 5%;
        bottom: 10%;
        background-color: rgba(198,0,60,.7)
    }

    #PnlClickThroughSlideButtons2 {
        margin: 0 auto 20px auto;
    }

        #PnlClickThroughSlideButtons2 .clickThroughText {
            color: #fff;
            display: inline-block;
            margin: 20px 10px;
            vertical-align: top;
            padding: 30px;
            width: 260px;
            font-size: .75em;
            line-height: 1.3;
            background-color: rgba(255,32,0,.7);
            text-align: left;
        }

    #PnlClickThroughSlideButtons .divStrButtons {
        text-align: center;
    }

    #PnlClickThroughSlideButtons2 .divStrButtons {
        text-align: center;
        margin: 0 0 20px 0;
    }

    #PnlClickThroughSlideButtons .slideButton {
        margin: 30px 5px 0 5px;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        font-size: .8em;
        background-color: #cbcbcb;
    }

    #PnlClickThroughSlideButtons2 .slideButtonCustom {
        margin: 30px 5px 0 5px;
        font-size: .8em;
        background-color: #cbcbcb;
    }

    #PnlClickThroughSlideButtons .slideButton.activeSlideButton {
        background-color: #FF2000;
    }

    #PnlClickThroughSlideButtons2 .slideButtonCustom.activeSlideButton {
        background-color: #FF2000;
    }

    #PnlClickThroughSlideButtons .clickThroughText .button {
        background-color: #fff;
        color: #FF2000;
    }

    #PnlClickThroughSlideButtons2 .clickThroughText .button {
        background-color: #fff;
        color: #FF2000;
    }

    #PnlCertificates h1 {
        font-size: 2.5em;
    }
.threeColumnImageBarBlock .divImgGrid {
    display: flex;
    gap: 16px;
    justify-self: center;
}

.ThreeColumnImageTextBlock .divImgGrid, .ThreeColumnImageBlock .divImgGrid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    justify-items: center;
    gap: 54px 16px;
    width:100%;
}
.TwoColumnImageBlock .divImgGrid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    justify-items: center;
    gap: 15px;
    width: 100%;
}
.FourColumnImageTextBlock .divImgGrid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    justify-items: center;
    gap: 54px 16px;
    margin-bottom: 54px;
    margin-top: 60px;
    width: 100%;
}
.TwoColumnImageBlock .divImgGrid {
    gap: 54px 16px;
}
.rewards .divImgGrid {
    margin-top: 10px;
}

.divTxtGrid {
    background-repeat: repeat, no-repeat;
    background-position: center;
    width: 443px;
    height: 504px;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    filter: grayscale(1);
    transition: filter .5s, visibility .9s;
}

    .divTxt {
        transition: visibility 0s ease-in-out, opacity 0.5s ease-in-out, height 0.5s ease-in-out;
    }

    .divImgGrid a {
        text-decoration: none;
    }

.divImgGrid h3 {
    color: #fff;
    text-transform: uppercase;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 48px;
}
.divThreeImgColTitle {
    text-align: center;
    font-size: 19px;
    margin: 0 0 70px 0;
}

    .divThreeImgColTitle h1 {
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        font-size: 48px;
    }


/* Breakpoints to match medium and mobile */
@media (max-width: 1400px) {
    .divTxtGrid {
        width: 380px;
        height: 432px;
    }

}
@media (max-width: 1220px) {
    .divTxtGrid {
        width: 330px;
        height: 375px;
    }
}

@media (max-width: 1060px) {
    .divTxtGrid {
        width: 280px;
        height: 319px;
    }
}
@media (max-width: 920px) {
    .divTxtGrid {
        width: 240px;
        height: 273px;
    }
    .divImgGrid h3 {
        font-size: 32px;
    }
}
@media (max-width: 768px) {
    .divTxtGrid {
        width: 100%;
        height: 164px;
        margin: 10px auto;
    }

    .divImgGrid h3 {
        font-size: 48px;
    }
    .divImgContainer {
        width:100%;
    }
 
}

       .divBannerContainer #LtlBannerBlock {
        position: relative;
        z-index: 2;
    }

    .divOfferContainer {
        position: relative;
        z-index: 2;
        padding: 2em;
        background: #BB0C2F; /* Old browsers */
        background: -moz-linear-gradient(left, #BB0C2F 0%, #BB0C2F 42%, #BB0C2F 42%, #BB0C2F 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #BB0C2F 0%,#BB0C2F 42%,#BB0C2F 42%,#BB0C2F 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #BB0C2F 0%,#BB0C2F 42%,#BB0C2F 42%,#BB0C2F 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BB0C2F', endColorstr='#BB0C2F',GradientType=1 ); /* IE6-9 */
        text-align: center;
    }

    #PnlOfferBar .bgRedBox {
        background-color: #BB0C2F;
        width: 40%;
        height: 420px;
        position: absolute;
        left: 0;
        z-index: 1;
        padding: 4em 0;
    }

    #PnlOfferBar {
        z-index: 5;
        position: relative;
        background: white;
    }

    .offerBox {
        width: 23%;
        height: 170px;
        background-color: #FFFFFF;
        display: inline-block;
        margin-right: 2%;
        vertical-align: top;
        padding: 1em;
    }

        .offerBox b {
            font-weight: Bold;
            color: #BB0C2F;
            display: block;
            min-height: 90px;
            font-size: 1.2em;
            text-transform: uppercase;
        }

        .offerBox a {
            font-weight: Bold;
            color: #ff692a;
            text-transform: uppercase;
            vertical-align: bottom;
            text-decoration: none;
        }

    #PnlLogoBar {
        text-align: center;
        margin: 3em 0;
    }

    #LtlBannerBlock img {
        max-width: 500px;
        padding: 1em;
        max-width: 100%;
    }

    #PnlSplashImage {
        z-index: 1;
        position: relative;
        overflow: hidden;
        text-align: center;
    }

    .divSplashImg {
        margin: 0 auto;
        max-width: 1200px;
    }

    #PnlSplashImage a {
        vertical-align: top;
    }

    /*Instagram Section ---------------*/
    #instaSection {
        max-width: 1200px;
        margin: 0 auto 2em auto;
        text-align: center;
    }

    #PnlInstagramBar {
        margin-bottom: 2em;
    }

        #PnlInstagramBar h1 {
            text-align: center;
            font-weight: bold;
            margin-bottom: 1em;
            color: #000;
        }

    #insta a {
        vertical-align: top;
        display: inline-block;
        max-height: 220px;
        overflow: hidden;
    }

    .instaImg {
        width: 220px;
    }

.divInstaTitle {
    padding: 0 0 20px 20px;
    max-width: 1340px;
    margin: 0 auto;
}

        .divInstaTitle a {
            display: inline-block;
            padding-right: 30px;
            margin: 20px 0 20px 0;
        }

        .divInstaTitle h1 {
            font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
            font-size: 48px;
        }

    .divLMSContainer.rotatorTabs {
        text-align: center;
        max-width: 1000px;
    }

    #LMSLandingPage .instaUnderline {
        background: #000000; /* Old browsers */
        background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 14%, #ffffff 14%, #000000 14%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 14%,#ffffff 14%,#000000 14%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #ffffff 0%,#ffffff 14%,#ffffff 14%,#000000 14%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
        min-height: .3em;
    }

    .botSocLinks {
        text-align: right;
        margin: 40px auto;
    }
    /*Email Signup ----------------------*/
    #emailSection {
        text-align: center;
        margin: 4em auto;
        max-width: 70%;
        color: #000000;
    }

        #emailSection h1 {
            font-size: 48px;
            text-transform: uppercase;
            font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        }

        #emailSection .emailFooter {
            font-size: .8em;
        }

    .signupfield {
        max-width: 500px;
        display: inline-block;
        width: 100%;
        padding: 0 .8em;
        border: 1px solid #e3e3e3;
        height: 2.5em;
    }

    .sidewaysR {
        transform: rotate(90deg);
        display: block;
        font-weight: Bold;
        color: #000000;
        font-size: 2.5em;
        text-transform: uppercase;
        position: absolute;
        right: 0;
    }

    .sidewaysL {
        transform: rotate(-90deg);
        display: block;
        font-weight: Bold;
        color: #ffffff;
        font-size: 2.5em;
        text-transform: uppercase;
        position: absolute;
        left: 0;
        bottom: 38%;
        z-index: 10;
        max-width: 450px;
        text-align: center;
    }




    #BtnSubscribe {
        width: 80px;
        /*height: 2.5em;*/
    }


    



/*LMS Cart Page ------------------*/
    .divRedBG {
    background: #FF2000;
    color: #fff;
    padding: .2em 1em;
}

    #PnlTickets .cartTable {
        margin-top: 0;
    }

    .cartTable {
        margin-top: 1em;
    }

        .cartTable tr:first-of-type {
            background-color: #e2e3e4;
            margin: 1em 0;
        }

        .cartTable td {
            padding: .5em;
        }

    #PnlCredit {
        font-size: 2em;
        float: left;
    }

    #DtlTicketCart {
        border-bottom: 1px solid #e3e3e3
    }

    #cartPage #BtnBack, #cartPage #BtnRecalculate, #cartPage #BtnDelete {
        cursor: pointer;
        color: #000;
        text-transform: uppercase;
        font-weight: bold;
        background: none;
        height: initial;
        padding: 0;
    }

    .divButCheckout {
        float: right;
    }

    #PnlPayZip {
        margin-bottom: 20px;
    }

    .payLaterDiv {
        clear: both;
        background-color: #e2e3e4;
        margin: 1em 0;
        padding: 10px;
    } 
/*
    #PnlEnterCode {
        float: right;
        margin-top: 1em;
    }*/

    .CCDiv {
        text-align: right;
        font-size: 1.5em;
    }

        .CCDiv i {
            padding: 0 2px;
        }
    /*LMS Calendar New ------------------*/
    #LMSCalendarNew .wrapper {
        padding-top: 1em;
    }

    #LMSCalendarNew .eventDate {
        background-color: #BB0C2F;
        color: white;
    }

    #PnlCalendar {
        clear: both;
        margin-top: 50px;
    }

    .rewards #PnlCalendar {
        margin: 0;
        padding: 0;
    }

    #PnlSearchControl {
        margin: 0 0 1em 0;
        text-align:left;
    }

    #LMSCalendarNew .tabHead {
        vertical-align: top;
        width: 100%;
        margin: 1em 0 0 0;
    }

    #LblCalTitle {
        font-size: 26px;
        color: #BB0C2F;
    }

    #LblCalendarCount {
        float: right;
        font-weight: Bold;
        padding: 1em;
    }

    .showBut {
        display: inline-block;
        vertical-align: top;
    }

    /*.rotatorTabs .showBut {
    color: #fff;
    font-size: 18px;
    padding: .1em .5em;
    cursor: pointer;
    background-color: #535353;
}
.rotatorTabs .activeTab {
    background-color: #fff;
    color: #BB0C2F;
}

    .rotatorTabs .hiddenTab {
        background-color: #535353;
        color: #fff;
    }*/

    #PnlRotators .rotatorTabs .showBut {
        background-color: #000;
        font-size: 18px;
        text-transform: uppercase;
        width: 280px;
        text-decoration: none;
        margin: 0 10px;
        padding: 6px;
        color: #fff;
        margin: 0 5px;
        cursor: pointer;
    }

    #PnlRotators .rotatorTabs .activeTab {
        background-color: #000;
        color: #BB0C2F;
    }

    #PnlRotators .rotatorTabs .hiddenTab {
        background-color: #000;
        color: #fff;
    }

    .fieldBox select, .fieldBox input[type="text"] {
        margin: 0;
        height: 2.5em;
        border: 1px solid #e3e3e3;
        padding: 0 .8em;
        width: 100%;
        background: #fff;
        text-align: right;
        border-radius: 20px;
    }

    input[type="submit"], input[type="reset"], input[type="button"], button, .button, .buttonNew, #PnlClickThroughSlideButtons .slideButton, #PnlClickThroughSlideButtons2 .slideButtonCustom .divUnderRotator {
        text-align: center;
        /*margin: 70px auto 50px auto;*/
    }

    .blackButton {
        /*padding: 20px 32px;*/
        padding:14px 22px;
        background: #000;
        color: #fff;
        font-family: 'ABCRom Mono Book', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 1px;
        text-decoration: none;
        display:inline-block;
    }

    .divCenterButton {
        text-align: center;
        margin: 60px 0;
    }
    /*.gridSearchButs {
    display: grid;
    grid-gap: .5em;
    grid-template-areas: 'left center right' 'leftbot leftbot rightbot';
    grid-template-columns: 33%;
}*/
  /*  .gridSearchButs {
        display: grid;
        grid-template-columns: 250px auto;
    }*/

    /*.fieldBox.month {
    grid-area: left
}

.fieldBox.location {
    grid-area: center
}

.fieldBox.type {
    grid-area: right
}

.fieldBox.searchbox {
    grid-area: leftbot
}

.fieldBox.searchbut {
    grid-area: rightbot
}*/

    #PnlClassBar {
        text-align: center;
    }

    .divClassBar2 {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        width: 100%;
    }

        .divClassBar2 .title {
        }

    .tileContainerSmall {
        min-height: 234px;
        padding: 15px;
        color: white;
        display: grid;
        grid-template-rows: 30% 50% 10% 20%;
        align-items: flex-end;
        min-width: 100%
    }

        .tileContainerSmall .fas {
            width: 14px;
            text-align: center;
        }

    .rewards .tileContainerSmall {
        grid-template-rows: 30% 45% 10% 17%;
    }

        .rewards .tileContainerSmall .title {
            align-self: start;
        }

        .rewards .tileContainerSmall .date span {
            display: inline-block;
        }

    .tileContainerSmall .location {
        align-self: start;
    }

    .tileContainerSmall .date span {
        font-size: 2em;
        display: block;
        line-height: 1em;
    }

    .tileContainerSmall .time, .tileContainerSmall .location {
        font-size: .85em
    }

    .gridPageTiles {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 33% 33% 33%;
    }


    .monthCell {
        font-size: .85em;
        border: #e8e8e8 1px solid;
        text-align: center;
        padding-bottom: 1.5em;
        height: 100px;
        width: 14%;
        vertical-align: top;
        text-align: left;
    }

    tr .monthCell:first-of-type {
        border-left: none;
    }

    tr .monthCell:nth-of-type(7) {
        border-right: none;
    }

    .eventOver {
        padding: 1em;
        text-align: left;
        position: absolute;
        z-index: 10000;
        background-color: #FFFFFF;
        border-radius: 10px;
        box-shadow: #dadada 0 0 15px;
        width: 320px;
        font-size: .8em;
    }

    .eventOverTitle {
        color: #000;
    }

    .eventOverText {
        overflow: hidden;
    }

    .eventMulti {
        color: #BB0C2F;
        display: block;
        padding: 2px 0;
    }

    .eventImg {
        max-width: 120px;
        float: left;
        padding-right: 10px;
    }

    .eventTitle {
        color: #000;
        font-weight: 500;
        display: inline-block;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        line-height: 1;
        padding: 10px 8px 7px 8px;
        background: #f3f3f3;
        border-radius: 15px;
        width: 100%;
        transition: background-color .3s, color .3s;
        text-decoration: none;
    }

    .rewards .eventTitle:hover {
        background-color: #BB0C2F;
        color: #fff;
    }


    .eventlink, .eventInPast, .eventSoldOut {
        margin: 3px;
    }

        .eventSoldOut .eventTitle, .eventInPast .eventTitle {
            color: #c3c3c3;
        }

    .nextMonth, .prevMonth {
        text-align: left;
        padding: 5px;
        font-weight: bold;
        font-size: 14px;
    }

    .calPrice {
        color: #000;
        font-size: 11px;
    }

    input[type="submit"].clearBut {
        color: #666666;
        background-color: #CCCCCC;
        border: 0px;
        border-radius: 0px;
        min-height: 40px;
        min-width: 80px;
        min-width: 111px;
        margin-left: 4px;
    }

    .event0.eventlist {
        padding: .5em 0;
        border: none;
    }

    .cbxHideSoldOut {
        width: 100px;
        display: inline-block;
        line-height: 1.2;
    }
    /*Fix for browsers who do not support grid*/

    .divEventListImg {
        display: inline-block;
        padding-right: 10px;
    }

    .divEventListDetails {
        display: inline-block;
        max-width: 60%;
    }

    .divEventListCost {
        display: inline-block;
        float: right;
        text-align: center;
        padding-top: 10px;
    }





.evtCost {
    font-size: 24px;
    color: #FF2000;
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    margin: 0px 0px 0px 0px;
}


    /*@supports (display: grid) {
        .eventlist {
            display: grid;
            grid-gap: .5em;
            grid-template-columns: repeat(3, 1fr);
            align-items: center;
            height: 650px;
        }

        .eventlist2 {
            display: grid;
            grid-gap: 0.5em;
            grid-template-columns: 150px 60px auto 160px;
            align-items: center;
        }

        .eventlist3 {
            display: grid;
            grid-gap: 0.5em;
            grid-template-columns: 150px auto 160px;
            align-items: center;
        }

        .eventlist4 {
            display: grid;
            grid-gap: 0.5em;
            grid-template-columns: 85px auto 160px;
            align-items: center;
        }

        .divEventListDetails {
            max-width: initial;
        }
    }*/
    /*end grid fix*/
    .eventlist, .eventlist2 {
       /* color: #808080;
        border-radius: 12px;*/
        /*padding: 10px 0;*/
      /*  background: rgb(245,245,245);
        background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);*/
    }

    .eventlist3 {
        color: #808080;
        border-radius: 12px;
        padding: 10px 0;
        text-align: left;
        /*background: rgb(245,245,245);
    background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);*/
    }

    .eventlist4 {
        color: #808080;
        border-radius: 12px;
        padding: 10px 0;
        background: rgb(245,245,245);
        background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
    }

    .eventlist a, .eventlist3 a {
        text-decoration: none;
    }

    a.noUnd {
        text-decoration: none;
    }

    .divEventListImg {
        margin: 0 auto;
        max-height: 100px;
        overflow: hidden;
        border-radius: 10px;
    }

        .divEventListImg img {
            width: 100px;
            border-radius: 10px;
        }

    .divEventListDate {
        margin: 0 auto;
        background-color: #e2e3e4;
        color: #000;
        text-align: center;
        width: 70px;
        height: 70px;
        margin-right: 10px;
        font-weight: 700;
        padding: 7px;
    }

    .eventListMonth {
        font-size: 14px
    }

    .eventListDay {
        font-size: 24px
    }

    .butMonth {
        display: inline-block;
        background-color: #EEEEEE;
        padding: 8px 16px 6px 16px;
        margin-right: 15px;
        margin-top: 8px;
        cursor: pointer;
    }

        .butMonth:hover {
            background-color: #e2e3e4;
        }

        .butMonth a {
            text-decoration: none;
        }

    .butYear {
        display: inline-block;
        margin-right: 10px;
    }

    .EvtConstrain {
        max-height: 525px;
        overflow: hidden;
    }

.EvtListShow {
    margin-bottom: 20px;
    max-width: 350px;
    margin: 0 auto;
    cursor: pointer;
    margin-left:4px !important;
    
}

.EvtListHide {
    margin: 20px 0;
    max-width: 350px;
    margin: 20px 0 20px 4px;
    cursor: pointer;

   
}

    .divEventListDetails {
        line-height: 1.2;
    }

    .eventlist a, .eventlist2 a, .eventlist3 a, .eventlist4 a {
        text-decoration: none;
    }
/*
    #PnlEventList {
        margin-top: 50px;
        display: grid;
        grid-template-columns: 20% auto;
    }*/

/* Center calendar filter row */
.evtListNav, .resourceNav {
    display: flex;
    flex-wrap: wrap; /* allow multiple rows on small screens */
    justify-content: space-between;
    align-items: center;   
    margin: 0 auto; /* center within its parent */
    box-sizing: border-box;
    width: 100%;
   
}
.evtListNav {
    gap: 15px;
}
    /* small tweak so individual filter groups behave as compact inline blocks */
    .evtListNav .filter-group,
    .evtListNav > div,
    .evtListNav > .filter-group,
    .resourceNav .filter-group,
    .resourceNav > div,
    .resourceNav > .filter-group {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    /* ensure drop-down variants don't force full-width */
    .evtListNav .filter-dropdown,
    .resourceNav .filter-dropdown {
        min-width: 180px;
        max-width: 340px;
        box-sizing: border-box;
    }

/* responsive: stack full width on very small screens */
@media (max-width: 560px) {
    .evtListNav, .resourceNav   {
        justify-content: flex-start; /* or center — choose per design */
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

        .evtListNav .filter-group,
        .resourceNav .filter-group {
            width: 100%;
            display: block;
        }

        .evtListNav .filter-toggle,
        .resourceNav .filter-toggle {
            width: 100%;
            box-sizing: border-box;
        }
}

        .evtListNav div[class^=filter],
        .resourceNav div[class^=filter] {
            cursor: pointer;
        }

    .evtListMainTitle {
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase;
    }

    .evtListTitle {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
    }

.evtListResultTitle {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 40px;
    text-transform: uppercase;
}

.evtListClassHeaderTitle {
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: #000;
    text-transform: uppercase;
}
.divEvtListHeader {
    width: 100%;
    text-align: left;
    margin: 24px 0;
    
}
    .eventListResults {
        width: 100%;
        vertical-align: top;
    }

    /*#LMSCalendarNew .eventListResults .eventlist:first-of-type {
        display: none;
    }*/

    .eventListTitle {
        color: #000;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-size: .9em;
        display: block;
    }

    .divEventListCost {
    }

    .eventlist2 .divEventListCost, .eventlist3 .divEventListCost, .eventlist4 .divEventListCost {
        padding-right: 10px;
    }


    .eventListDate {
        font-weight: 500;
        font-size: 12px;
        width: 100%;
        display: block;
        color: #808080;
        margin-top: 5px;
    }

    .eventListLbl {
        display: inline-block;
        vertical-align: top;
        width: 100%;       
        font-size: 40px;       
        padding: 0 3px 0 0;
        font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
        text-transform: uppercase;
    }

    .classrow {
        display: none;
    }

    .divEventImg {
        width: 200px;
        text-align: center;
        display: inline-block;
        padding: 3px;
        vertical-align: top;
        cursor: pointer;
        background: #fff;
        height: 230px;
        color: #BB0C2F;
        text-transform: uppercase;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: bold;
    }

    .facetsTop {
        background: #e2e3e4;
        text-align: center;
    }

    .facetEventImg {
        width: 175px;
        height: 175px;
        object-fit: contain;
    }

    .eventImgFull {
        width: 300px;
        height: 300px;
        object-fit: contain;
    }

    .backBut {
        cursor: pointer;
        color: #ff692a;
        text-transform: uppercase;
        font-weight: bold;
    }

    .leftTile {
        width: 300px;
        margin-right: 1em;
        vertical-align: top;
        display: inline-block;
    }

    .rightTile {
        padding: 0;
        vertical-align: top;
        display: inline-block;
        /*width: 100%;*/
    }

    .divContainerEventList {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 15% 60% 20%;
        padding: .5em 0;
        align-items: center;
        min-width: 600px;
        height: 100px;
    }

    .divContainerEventList2 {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 15% 5% 55% 20%;
        padding: .5em 0;
        align-items: center;
        min-width: 600px;
        height: 100px;
    }

    .eventText {
        margin-left: 5px;
        vertical-align: top;
        text-align: left;
        /*display: initial;
        max-width: initial;
        width: initial;
        height: initial;
        line-height: initial;*/
    }

    .rewards .eventText {
        width: 250px;
    }

    #PnlFacets {
        margin-top: 2em;
    }

    A.sessionPop {
        font-size: 18px;
        font-weight: bold;
    }

    .divCalendarMain {
        border: 1px solid #e8e8e8;
        border-radius: 10px 10px 0 0;
    }

    .divCalHeader {
        display: grid;
        grid-template-columns: 30% 40% 30%;
    }

    .divNextPrevButtons {
        justify-self: right;
        font-size: 1.3em;
        line-height: 1em;
    }

    .monthHeader {
        display: inline-block;
        font-size: 24pt;
        text-decoration: none;
        color: #BB0C2F;
        justify-self: center;
    }

    .mthHeader {
        font-size: 20pt;
        text-decoration: none;
        color: #000;
        float: left;
        width: 30%;
    }

    .weekHeader {
        color: #fff;
        text-align: center;
        background-color: #999999;
        padding: 9px 6px 6px;
        border-right: 1px solid #ababab;
    }

        .weekHeader:last-of-type {
            border-right: none;
            border-radius: 0 10px 0 0;
        }

        .weekHeader:first-of-type {
            border-radius: 10px 0 0 0;
        }

        .weekHeader a {
            color: #fff;
            background-color: #d51348;
            text-transform: lowercase;
            text-align: center
        }

    .dayHeader {
        color: #EEEEEE;
        background-color: #999999;
        font-weight: bold;
        font-size: 16px;
        height: 16px
    }

        .dayHeader a {
            color: #EEEEEE;
            background-color: #999999;
            font-weight: bold;
            font-size: 16px;
            height: 16px
        }

    .toolsHeader {
        color: #333333;
        background-color: #DDDDDD;
        font-weight: bold;
        font-size: 12px
    }

        .toolsHeader a {
            color: #333333;
            background-color: #DDDDDD;
            font-weight: bold;
            font-size: 12px
        }

    .dayTimeHeader {
        color: #333333;
        background-color: #DDDDDD;
        font-weight: bold;
        font-size: 13px
    }

    .hoursHeader {
        color: #333333;
        background-color: #CCCCCC;
        font-weight: bold;
        font-size: 12px;
        align: center;
        height: 16px
    }

    .hoursHeaderC {
        background-color: #ffcccc;
        font-weight: bold;
        font-size: 10px;
        height: 40px
    }

    .hoursHeaderO {
        background-color: #ccffcc;
        font-weight: bold;
        font-size: 10px;
        height: 40px
    }

    .staffHeader {
        color: #333333;
        background-color: #DDDDDD;
        font-weight: bold;
        font-size: 12px;
        height: 60px
    }

    .staffHeaderVert {
        color: #333333;
        background-color: #DDDDDD;
        font-weight: bold;
        font-size: 12px;
        height: 20px
    }

    .staffFooter {
        color: #333333;
        background-color: #DDDDDD;
        font-weight: bold;
        font-size: 12px
    }

    .staffColumn {
        width: 200px
    }

    .monthCellSmall {
        height: 30px;
        width: 14%;
        vertical-align: top
    }

    SELECT.formDD {
        color: #333333;
        background-color: #FFFFFF;
        font-size: 9px
    }

    .currDay {
        color: #333333;
        background-color: #FFFFFF;
        font-size: 1em
    }

    .currDayBusy {
        color: #333333;
        background-color: #EDEDED;
        font-size: 1em
    }

    .dayTimeCell {
        height: 30px;
        vertical-align: top
    }

    .prevMonth {
        color: #fff;
        background-color: #fff;
        font-size: 1em
    }

    .currMonth {
        color: #333333;
        background-color: #fff;
        padding: .1em
    }

    .nextMonth {
        color: #fff;
        background-color: #fff;
        font-size: 1em
    }

    .monthDayData {
        border: 1px #AAAAAA solid
    }

    .monthCalendar {
    }

    .dayCalendar {
        background-color: #999999;
    }

    .highlightDate {
        background-color: #f8f3cd;
    }

    .todayDate {
        background: rgb(125,125,125);
        background: linear-gradient(0deg, rgba(125,125,125,1) 0%, rgba(191,191,191,1) 100%);
    }

    .dayNumber {
        font-size: 14px;
        font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
        padding: 5px;
        display: block;
    }

    .eventDesc {
        font-size: 1em;
        vertical-align: top
    }

    .active {
        background-color: #FFFFCC
    }

    .hidden {
        display: none;
    }

    .companyEvent {
        font-size: 10px;
    }

    .divViewDate {
        z-index: 99999;
    }

    .showList {
        cursor: pointer;
    }

    .showCal {
        cursor: pointer;
    }



    .sideways {
        writing-mode: tb-rl;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        font-size: 10px;
    }

    .vertTime {
        font-size: 9px;
    }

    .offTime {
        background-color: #AAA;
        background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        -webkit-background-size: 50px 50px;
        -moz-background-size: 20px 20px;
        background-size: 20px 20px;
    }


    .vertTimeHour {
        font-size: 13px;
    }

    .warn {
        color: #cc0000;
    }

    .ghost {
        width: 200px;
        position: absolute;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
        background-color: #CCF;
        border-color: #AAD;
        color: #AAD;
        z-index: 10000;
    }

    .outline {
        width: 200px;
        background-color: #FCC;
        border-color: #DAA;
        border-style: dashed;
        color: #DAA;
    }

    .showText {
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
    }

    .hideText {
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        opacity: 0.5;
    }

    .loadbox {
        text-align: center;
        background-color: #FFFFFF;
        border: solid 1px #999999;
        width: 100%;
        height: 300px;
        font-size: 16px
    }

    .nodisp {
        display: none;
    }

    .handle {
        cursor: move;
    }

    A.addLink {
        border: 1px #666666 solid;
        color: #666666;
        background-color: #eeeeff;
        font-size: 12px
    }



    .imageText {
        position: absolute;
        bottom: 0px;
        left: 0px;
        font-size: 1em;
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 1px 1px 1px #000;
        padding: 10px;
        width: 100%;
    }

    .viewArea {
        width: 100%;
        display: inline-block;
    }

    .viewList {
        display: none;
    }

    .tabShoulder {
        display: inline-block;
        vertical-align: top;
        width: 40px;
        height: 40px;
        margin: 0px;
    }

    .tileContainerWide {
        position: relative;
        display: inline-block;
        vertical-align: top;
        max-height: 200px;
        overflow: hidden;
    }

        .tileContainerWide img {
            object-fit: cover;
            height: 200px;
        }
    /*.tileContainerSmall {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 165px;
    height: 220px;
}*/
    .linkTile {
        cursor: pointer;
    }


    .tileContainer img {
        object-fit: contain;
        height: 120px;
        width: 100%;
        border: 2px solid black;
        max-width: 220px;
        max-height: 160px;
    }

    .tileContainer {
        display: inline-block;
        vertical-align: top;
        width: 230px;
        margin: 1em 0;
    }

    .tileTopText {
        font-weight: Bold;
        color: #000;
        text-align: center;
        text-transform: lowercase;
        line-height: 1.5;
        padding-top: .8em;
    }

    .tileBotText {
        font-weight: Bold;
        color: #BB0C2F;
        font-size: 18pt;
        text-align: center;
        text-transform: uppercase;
    }

    .tileTopTextSmall {
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: 11pt;
        font-weight: bold;
        color: #333333;
        text-shadow: 1px 1px 1px #FFFFFF;
        padding: 10px;
        width: 100%;
        text-align: left;
        z-index: 200
    }

    .tileArrowSmall {
        position: absolute;
        top: 90px;
        left: -30px;
        font-size: 40pt;
        font-weight: bold;
        color: #d51348;
        text-shadow: 1px 1px 1px #FFFFFF;
        padding: 10px;
        width: 100%;
        text-align: left;
        z-index: 200
    }

    .tileBotImageSmall {
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 199
    }

    .tileBotTextSmall {
        position: absolute;
        bottom: 0px;
        left: 60px;
        font-size: 18pt;
        font-weight: bold;
        color: #d51348;
        text-shadow: 1px 1px 1px #FFFFFF;
        padding: 10px;
        width: 100%;
        text-align: left;
        z-index: 200
    }

    #footerTable {
        width: 1000px;
    }

    .eventbut {
        cursor: pointer;
    }
    /*LMS Details Page ------------------*/
    #PnlDiscount {
        padding: 2em 0 0 0;
        margin: 0 0 2em 0;
    }

        #PnlDiscount input[type="text"], #PnlDiscount select {
            margin: 0 .75em .75em 0;
        }

        #PnlDiscount #BtnDiscount {
            margin-top: 1.5em;
        }

        #PnlDiscount input[type="checkbox"] + label {
            color: #000;
        }

            #PnlDiscount input[type="checkbox"] + label:before {
                background: #fff;
            }

    #LMSDetailPage .imgEventDetail {
        float: right;
        max-width: 300px;
        padding: 0 0 0 1em;
    }

    #LMSDetailPage .divEventDetails {
        overflow: hidden;
    }

        #LMSDetailPage .divEventDetails ul {
            padding-left: 1.3em;
        }

    #LMSDetailPage .eventDetailDate {
        font-weight: Bold;
        text-decoration: none;
        text-transform: lowercase;
        color: #000;
    }

    #LMSDetailPage .gridEventDetail {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        margin-top: 2em;
        align-items: center;
    }

    #LMSDetailPage #secTickets {
        margin: 1em auto;
    }

    #LMSDetailPage #PnlPromoCode {
        margin: 1.5em 0;
    }

    #LMSDetailPage #LblPromoInstruct {
        display: block;
    }

    #LMSDetailPage #TxtPromoCode {
        padding: 0 .5em;
    }

    #LMSDetailPage #PnlTickets {
        padding: 1em;
    }

        #LMSDetailPage #PnlTickets h3 {
            margin: 0;
        }

    #LMSDetailPage #DtlTickets {
        width: 70%;
        float: left;
    }

    input[type="submit"].greyOutButton {
        background-color: #9e9e9e;
        cursor: default;
        pointer-events: none;
    }

    #DtlTickets .cartTable {
        margin: 0;
    }

        #DtlTickets .cartTable td {
            padding: 0;
        }

    #PnlTickets input[type="text"], #PnlTickets select {
        margin: 0;
        line-height: 2.5em;
        height: 2.5em;
        border-radius: initial;
        width: 240px;
        padding: 0 0 0 .8em;
        border: 1px solid #e3e3e3;
    }



    #LMSDetailPage .tixName {
        text-transform: uppercase;
        color: #BB0C2F;
        margin: 0;
        font-weight: 500;
    }

    #LMSDetailPage .divBtnPurchase {
        text-align: left;
    }

    .spanRedTitle {
        color: #000;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em;
    }

    .spanWhtTitle {
        color: #fff;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em;
    }

    .spanWhtTxt {
        color: #fff;
    }

    .spanLblEventName {
        color: #000;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em;
    }

    .divSeriesClass {
        width: 150px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        border: 2px solid black;
        height: 130px;
        margin: .5em;
        background: #fff;
        padding: .2em 0 0 0;
    }

        .divSeriesClass a {
            text-decoration: none;
        }

        .divSeriesClass img {
            object-fit: contain;
            height: 45px;
            width: 100%;
        }

    #secPreReqs {
        padding: 1em 0 2em 0;
    }
    /*LMS Gallery Page ------------------*/
    .galleryPhoto {
        text-align: center;
        margin: 0 1em 2em 1em;
    }

        .galleryPhoto a {
            min-height: 90px;
            display: block;
        }

    #DtlTop9 td {
        vertical-align: top;
    }
    /*LMS Survey ------------------*/


    #cartPage input[type="text"], #cartPage select {
        height: 2.5em;
        border: 1px solid #e3e3e3;
    }

    #LMSSurveyPage #PnlSurveyTable input[type="text"], #LMSSurveyPage #PnlSurveyTable select {
        height: 2.5em;
        border: 1px solid #e3e3e3;
        margin: .5em 0;
    }

    #LMSSurveyPage textarea {
        border: 1px solid #e3e3e3;
        margin: .5em 0;
    }

    #LMSSurveyPage tr[bgcolor="#EEEEEE"], #LMSSurveyPage tr[bgcolor="#EDEDED"] {
        background-color: #e2e3e4;
    }

        #LMSSurveyPage tr[bgcolor="#EEEEEE"] span {
            padding: .2em .5em;
        }

    #LMSSurveyPage tr[bgcolor="#CCCCCC"] {
        background-color: #fff;
    }

    #LMSSurveyPage tr[bgcolor="#DDDDDD"] {
        background-color: #fff;
    }

    #LMSSurveyPage tr[bgcolor="#CCCCCC"] span {
        color: #BB0C2F !important;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em !important;
        padding-top: 2em;
        display: block;
    }

    .attendeeheader {
        color: #BB0C2F !important;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em;
        padding-top: 2em;
        display: block;
    }

    .attendeesubheader {
        color: #BB0C2F !important;
        font-weight: Bold;
        text-transform: uppercase;
        font-size: 1.3em;
        padding-top: 2em;
        display: block;
    }

    #SurveyForm h3 {
        font-size: 1.2em;
    }
    /*LMS Dashboard ------------------*/
    #dashPage .imgProfile img {
        height: 250px;
        width: 179px;
    }

    .divProfile {
        background-color: #fff;
    }

    .divCard {
        float: initial;
        display: inline;
    }

    .divCard {
        float: right;
        background-color: initial;
        margin: initial;
        padding: initial;
        border-radius: initial;
        font-style: normal;
    }

    .dashUpcomingEventsDiv {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 10% 35% 34% 15%;
        align-items: center;
    }

    .dashUpcomingBlendedDiv {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 10% 25% 23% 20% 20%;
        align-items: center;
    }

    .dashCouponVouchersDiv {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 40% 30% 15% 15%;
        align-items: center;
        padding: 5px 0;
    }


    .dashEventHistoryDiv {
        display: grid;
        grid-gap: .5em;
        grid-row-gap: 1em;
        grid-template-columns: 20% 35% 35%;
        align-items: center;
    }

    #dashPage .divProfile {
        display: grid;
        grid-gap: .5em;
        grid-template-columns: 200px 48% 30%;
        max-width: initial;
    }

    .dashPageDivSection {
        margin-top: 3em;
    }
    /*Profile Page ------------------*/
    #LMSProfilePage .divRedBG {
        max-width: 260px;
        float: left;
        margin: 0 2em 2em 0;
    }

    .achievementsDiv {
        width: 100%;
    }

    #LMSProfilePage .divProfileName {
        margin-left: 2em;
    }

    #LMSProfilePage .divProfileNameMobile {
        display: none;
    }

    .titleSmlWhite {
        font-weight: bold;
        font-size: 1.4em;
    }

    #LMSProfilePage #LblImg img {
        padding: 1.5em;
    }
    /*.slick-slide figure {
    width: 300px;
}*/
    .slick-prev, .slick-next {
        display: none;
    }



    .instabox {
        min-height: 305px;
    }
    /*Journey Pages ------------------------*/
    .journeyDetails {
    }

    .journeyPaths {
    }

    .bizJourneyPaths2 {
        margin-top: 50px;
    }

        .bizJourneyPaths .ui-icon.custom-plus, .bizJourneyPaths2 .ui-icon.custom-plus, .divRegionalEvents .ui-icon.custom-plus {
            background-image: none !important;
            width: 20px;
            height: 20px;
            left: 350px;
        }

        .bizJourneyPaths .ui-icon.custom-minus, .bizJourneyPaths2 .ui-icon.custom-minus, .divRegionalEvents .ui-icon.custom-minus {
            background-image: none !important;
            width: 20px;
            height: 20px;
            left: 350px;
        }

        .bizJourneyPaths .ui-widget-content a, .bizJourneyPaths2 .ui-widget-content a, .divRegionalEvents .ui-widget-content a {
            color: #ffffff;
        }

.journeyTierTitle {
    text-transform: uppercase;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 48px;
    line-height:40px;
}
    .journeyTierTitle em {
        color: #FF2000;
        font-style: normal;
    }

.badge-divider {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 50px 0 20px 0;
}

    .badge-divider::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: #000;
        transform: translateY(-50%);
        z-index: 1;
    }

.badge-divider-img {
    position: relative;
    z-index: 2;
    width: 200px; /* adjust as needed */
    height: auto;
    background: #fff;
    padding: 0 40px; /* white space left/right of badge */
}




    .BusinessEducationIcons {
    }

    .SBSBullets3 h4 {
        text-transform: uppercase;
        margin-bottom: .2em;
        margin-top: 20px;
        font-size: 1.2em;
        color: #000;
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    }

    .SBSBullets3 {
        display: inline-block;
        padding: 0 50px;
        margin: 50px 0;
    }

    .leftSection, .rightSection {
        clear: both;
        padding-top: 20px;
    }

        .leftSection img {
            float: left;
            padding-right: 10px;
        }

        .rightSection img {
            float: right;
            padding-left: 10px;
        }

    .SBSBulletImage {
        display: inline-block;
    }

    .threeColumns {
        background: url("/templates/1/images/bg-blackbar-sml.jpg");
        background-repeat: repeat-x;
        text-align: center;
    }

        .threeColumns .Jcolumn {
            display: inline-block;
            max-width: 270px;
            vertical-align: top;
            margin: 40px 0 15px 0;
        }


    .timelineMarker {
        position: relative;
        top: 20px;
    }

    .threeColumns hr {
        position: relative;
        top: -44px;
        z-index: -1;
        background: black;
        border-bottom: 3px double #000;
        max-width: 800px;
        margin: 32px auto;
        max-width: 560px;
    }

    .Jcolumn em {
        /*color: #BB0C2F;*/
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        font-style: initial;
    }

    .BusinessEducationIcons, .divRegionalEvents {
        padding-bottom: 50px;
        text-align: center;
    }

    .journeyPaths, .bizJourneyPaths, .bizJourneyPaths2 {
        text-align: center;
    }

    .BusinessEducationIcons h3 {
        padding-top: 60px;
        margin: 0;
        color: #BB0C2F;
    }

    .journeyPaths .fiveColumns {
        /*padding-top: 50px;*/
    }

    .bizJourneyPaths h1, .bizJourneyPaths2 h1 {
        padding: 0;
        margin: 0;
    }

    .BusinessEducationIcons .fiveColumns {
        padding-top: 20px;
    }

    .journeyPaths .fiveColumns h4, .bizJourneyPaths .fiveColumns h4, .bizJourneyPaths2 .fiveColumns h4, .divRegionalEvents .fiveColumns h4 {
        text-transform: uppercase;
    }

    .divRegionalEvents .fiveColumns h4 {
        height: 30px;
    }

    .BusinessEducationIcons .fiveColumns h4 {
        text-transform: capitalize;
        font-size: 1em;
    }

    .journeyPaths .fiveColumns .Jcolumn {
        display: inline-block;
        max-width: 178px;
        vertical-align: top;
        margin: 40px 22px 15px 22px;
        text-align: center;
        font-size: .8em;
        width: 150px;
    }

    .bizJourneyPaths .fiveColumns .Jcolumn, .bizJourneyPaths2 .fiveColumns .Jcolumn, .divRegionalEvents .fiveColumns .Jcolumn {
        display: inline-block;
        width: 240px;
        vertical-align: top;
        margin: 40px 22px 15px 22px;
        text-align: center;
        font-size: .8em
    }

    .bizJourneyPaths .Jcolumn div, .bizJourneyPaths2 .Jcolumn div {
        max-width: 215px;
        margin: 0 auto;
        height: 115px;
        line-height: 1.3;
    }

    .divRegionalEvents .Jcolumn div {
        max-width: 215px;
        margin: 0 auto;
        height: 240px;
        line-height: 1.3;
    }

    .BusinessEducationIcons .fiveColumns .Jcolumn {
        display: inline-block;
        width: 120px;
        vertical-align: top;
        margin: 40px 22px 15px 22px;
        text-align: center;
    }

    .subTextArea {
        margin: 30px auto;
        text-align: center;
    }

    .Jcolumn div {
        min-height: 80px;
        padding: 5px 0;
    }

    .subHeadGrey {
        color: #76777a;
        text-transform: uppercase;
        font-size: 1.2em;
    }

    .subHeadLtGrey {
        color: #a3a3a3;
        text-transform: uppercase;
        font-size: .9em;
    }

    .changeFontLarge {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        color: #BB0C2F;
        font-size: 3.5em;
    }

    .jDetailTitle {
        font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        color: #000;
        text-transform: uppercase;
    }

    .titleLargeRed {
        font-size: 28px;
        color: #BB0C2F;
    }

    .titleMedBlack {
        font-size: 20pt;
        color: #000;
    }

#journeyDetailPage #mainContent {
    /*background-color: #e2e2e2;*/
    background-color: #ffffff;
    padding: 50px 0;
}

    .tblVouchPackAbout2 {
        width: 100%
    }

    .tdVouchPackAbout2 {
        width: 25%;
        vertical-align: top;
        text-align: center;
        padding: 20px;
    }

    .journeyDescText {
        display: inline-block;
        max-width: 45%;
        vertical-align: top;
        padding-top: 10px;
    }

        .journeyDescText .changeFontLarge {
            line-height: 1.2;
        }

    .tierDescText {
        /*display: inline-block;
            max-width: 55%;
            vertical-align: top;
            padding-top: 50px;*/
        font-size: .9em;
        padding-right: 10px;
    }

    .journeyDescImg {
        display: inline-block;
    }

    .tierPackPassDiv {
        float: right;
        text-align: center;
    }

    .tierDescTitle {
        /*float: left;*/
    }

    .tierDescImg {
        display: inline-block;
        padding: 30px 30px 30px 60px;
    }

    .textDiv {
        clear: both;
    }

    .tierBadge {
        width: 250px;
        /*margin: 50px;*/
    }

    .journeyTierNav {
        margin: 50px auto 20px auto;
        text-align: center;
    }


    a.tierAnchor {
        display: inline-block;
        background-color: #000;
        width: 280px;
        text-decoration: none;
        color: #fff;
        margin: 0 10px;
        padding: 6px;
        text-transform: uppercase;
        cursor: pointer;
        font-size: 1.2em;
    }

        a.tierAnchor.activeTab {
            color: #BB0C2F;
        }
    /*.journeyTierNav .selected {
        background-color: #fff;
        color: #d51348;
    }*/
    .journeyTierNav div:hover {
        background-color: #f4f4f4;
    }

    #journeySpecialistPanel, #journeyExpertPanel, #journeyMasterPanel, #mainContent {
        scroll-margin-top: 150px;
        scroll-behavior: smooth;
    }

    .journeyTierSection {
        background-color: #fff;
    }
/*
    .boxGridBG {
        background-repeat: repeat-y, repeat-x, repeat-y, repeat-x, repeat;
        background-position: top left, bottom left, top right, top left, top left;
        display: grid;
        grid-template-columns: 270px auto;
        justify-content: center;
        align-items: center;
        margin: 31px 0;
        padding: 51px;
        justify-items: center;
        grid-gap: 10px;
    }*/

  /*  .rptBGGrid {
        background-repeat: repeat-x, repeat-x, repeat;
        background-position: top left, bottom right, top left;
    }

    .rptBGLinesLeft {
        background-repeat: no-repeat;
        background-position: 40px 15px;
        padding: 20px 0;
    }

    .rptBGLinesRight {
        background-repeat: no-repeat;
        background-position: 93% 15px;
        padding: 20px 0;
    }*/

/*    .rptBGDots {
    }*/

    /*.tierReqClasses {
        padding: 0 40px 40px 40px;
        clear: both;
    }

        .tierReqClasses h1 {
            text-transform: initial;
            float: left;
            text-transform: uppercase;
            font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
        }

    .journeyTierSection .tierReqClasses h1 {
        margin: 0 0 10px 0;
    }

    #journeyExpertPanel .tierReqClasses {*/
        /*padding:0;*/
    /*}

    .OldVersion #journeyExpertPanel .tierReqClasses {
        padding: 0 40px 40px 40px;
        clear: both;
    }

    .OldVersion .footerTableMobile {
        margin-top: 0;
    }*/

    .progressArea {
        float: right;
        color: #b5b5b5;
        text-transform: uppercase;
        margin-right: 10px;
    }

    .progressBar {
        width: 102px;
        border: 1px solid #b5b5b5;
        border-radius: 8px;
        height: 15px;
        display: inline-block;
    }

    .progressBlock {
        background-color: #e2e2e2;
        height: 13px;
        border-radius: 8px;
    }

.tierReqClasses .tierReqGrid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    justify-items: center;
    gap: 15px;
}
.tierReqClasses .reqWCE {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 6px;
}
.tierReqClasses .reqClassText {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    box-sizing: border-box;
}
.tierReqClasses .reqWCEImg {
    width: calc(100% + 4px);
    margin-left: -1px;
    max-width: none;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    height: 240px;
}
.wce-package {
    padding:20px;
}
/* .reqWCE {
        clear: both;
        background: rgb(245,245,245);
        background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
        border-radius: 12px;
        border: 1px solid rgb(245,245,245);
        padding: 10px;
        display: grid;
        grid-template-columns: 1px 72% 200px;
        grid-gap: 5px;
        align-items: center;
        justify-content: center;
        margin: 5px;
    }*/
.lblPathwayHeader {
    font-family: 'ABCRom Medium', Arial, Helvetica, sans-serif;
    color: #000000;
    text-transform: uppercase;
    font-size: 25pt;
}

    #pathcontainer {
        text-transform: uppercase;
    }

    .lblPathwayHeader i {
        font-family: 'ABCRom Regular', Arial, Helvetica, sans-serif;
        font-style: normal;
    }

.journeyPathwayHeader {
    clear: both;
    background: #fff;
    padding: 0;
    margin: 40px 0 0 0;
    border: 0;
    font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
    font-size:38px;
    text-transform:uppercase;   
}

        .journeyPathwayHeader.ui-accordion-header {
            text-transform: uppercase;
            color: #000;
        }

        .journeyPathwayHeader.ui-accordion-header-active {
            border-radius: 12px 12px 0px 0px;
        }

    .journeyPathwayTierContainer .journeyPathwayTierClasses.ui-accordion-content {
        padding: 0 0 20px 0;
        overflow: initial;
    }

    .journeyPathwayTierContainer .ui-widget-content a {
        color: white;
    }



   /* .reqClass {
        clear: both;
        background: rgb(245,245,245);
        background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
        border-radius: 12px;
        border: 1px solid rgb(245,245,245);
        padding: 10px;
        display: grid;
        grid-template-columns: 44px 72% 200px;
        grid-gap: 5px;
        align-items: center;
        justify-content: center;
        margin: 5px;
    }

    .reqClassCheck {
        font-size: 2em;
        vertical-align: middle;
        color: #BB0C2F;
        margin-left: 8px;
    }

        .reqClassCheck.complete {
            font-size: 2em;
            vertical-align: middle;
            color: limegreen;
        }

    .reqClassText {
        vertical-align: top;
        padding-top: 5px;
    }

        .reqClassText h3 {
            margin: 0;
            font-size: 13pt;
            text-transform: uppercase;
        }

    .reqClassTextDesc {
        overflow: hidden;
        font-size: .85em;
    }

    .gridReqClassText {
        display: grid;
        grid-template-columns: 80px auto;
        grid-gap: 5px;
        align-items: center;
    }

    .reqClassImg {
        max-width: 80px;
        float: left;
        padding-right: 10px;
    }

    .reqClassButton {
        text-align: center;
    }

    .gridRecClasses {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
    }

    .recClass {
        width: 242px;
        height: 242px;
        padding: 15px;
        color: white;
        display: grid;
        grid-template-rows: 30% 50% 10% 20%;
        align-items: flex-end;
    }

        .recClass .location {
            align-self: start;
        }

        .recClass .date span {
            font-size: 2em;
            display: block;
            line-height: 1em;
        }
*/
    .colorize {
        filter: grayscale(0);
    }

        .colorize .classTitle {
            color: #FF2000;
        }

    .agenda {
        cursor: pointer;
    }

    .chosenslot {
        background-color: #EEEEEE;
        border-radius: 5px;
        margin-top: 5px;
    }
    /*Various Pages*/

    .cssInlineVideoLeft {
        width: 560px;
        max-width: 100%;
        height: 375px;
        float: left;
        padding: 70px 20px 20px 0;
    }

    .cssInlineTextRight {
        text-align: left;
        overflow: hidden;
    }

    .form2 {
        height: 2.5em;
        border: 1px solid #e3e3e3;
        margin: .5em 0;
    }

    input[disabled="disabled"] {
        color: #b3b3b3;
        cursor: default;
        pointer-events: none;
    }

    .lockInsideBox {
        left: -25px
    }
    /* Tooltip container */
    .tooltip {
        position: relative;
        display: inline-block;
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
    }

        /* Tooltip text */
        .tooltip .tooltiptext {
            FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
            visibility: hidden;
            position: absolute;
            width: 100px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px;
            border-radius: 6px;
            z-index: 1;
            opacity: .1;
            transition: opacity .3s;
            bottom: 125%;
            left: 50%;
            margin-left: -50px;
            margin-bottom: 5px;
            font-size: 14px;
            font-weight: normal;
        }

    .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip .tooltiptextMedium {
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
        visibility: hidden;
        position: absolute;
        width: 200px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        z-index: 1;
        opacity: .1;
        transition: opacity .3s;
        bottom: 125%;
        left: 25%;
        margin-left: -90px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .tooltiptextMedium::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip .tooltiptextlong {
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
        visibility: hidden;
        position: absolute;
        width: 400px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        z-index: 1;
        opacity: .1;
        transition: opacity .3s;
        bottom: 125%;
        left: 2%;
        margin-left: -9px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .tooltiptextlong::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 4%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip .tooltiptextlongRight {
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
        visibility: hidden;
        position: absolute;
        width: 400px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        z-index: 1;
        opacity: .1;
        transition: opacity .3s;
        bottom: 125%;
        left: -372px;
        margin-left: -9px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .tooltiptextlongRight::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 2%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip .tooltiptextshortRight {
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
        visibility: hidden;
        position: absolute;
        width: 100px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        z-index: 1;
        opacity: .1;
        transition: opacity .3s;
        bottom: 125%;
        left: 50%;
        margin-left: -81px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .tooltiptextshortRight::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: 26px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip .tooltiptextshortLeft {
        FONT-FAMILY: 'ABCRom Regular',Arial,sans-serif;
        visibility: hidden;
        position: absolute;
        width: 100px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        z-index: 1;
        opacity: .1;
        transition: opacity .3s;
        bottom: 125%;
        left: -2%;
        margin-right: -81px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: normal;
    }

    .tooltiptextshortLeft::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 4%;
        margin-right: 26px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextlong, .tooltip:hover .tooltiptextlongRight, .tooltip:hover .tooltiptextshortRight, .tooltip:hover .tooltiptextshortLeft, .tooltip:hover .tooltiptextMedium {
        visibility: visible;
        opacity: 1;
    }

    /*---NEW WELLA REWARDS---------------------*/
    .google-visualization-table-table td {
        padding: 2px .35em !important;
    }

    .google-visualization-table-table th {
        font-size: 1em;
        width: 50px;
        text-align: right;
    }

    #PnlNormalMessage strong {
        text-transform: uppercase;
    }



@media only screen and (max-width: 880px) {
    .EvtConstrain {
        max-height: 1570px;
        overflow: hidden;
    }
}

    @media only screen and (max-width: 768px) {

*/
        #PnlRotators .slick-slide figure {
            width: 443px;
            margin: 20px auto;
        }

        .eventListResults h2 {
            font-size: 28px;
        }



        .slick-slide {
            padding: 0;
        }
    }

    @media only screen and (max-width: 500px) {
        #PnlRotators .slick-slide figure {
            width: 400px;
        }
    }

    @media only screen and (max-width: 450px) {
        #PnlRotators .slick-slide figure {
            width: 350px;
        }
    }

    @media only screen and (max-width: 400px) {
        #PnlRotators .slick-slide figure {
            width: 300px;
        }
    }



    /* -------ALL MEDIA QUERIES--------------------------------*/
    @media only screen and (max-width: 5000px) {
        #PnlTopCarousel .carouselBanner {
            width: 100%;
            max-width: 1920px;
        }

        .slickShowsEvents .slick-prev, .slickShowsEvents .slick-next {
            top: 60%
        }

        .viewCal {
            display: none;
        }

        .tabShoulder {
            display: none;
        }

        .tabHead {
            width: 100%;
            max-width: none;
        }

        .viewList {
            display: inline-block;
        }

        .divLMSContainer {
            padding: 0 50px;
        }

        #BtnDownloadZip {
            max-width: 100%;
            padding: 0 1em;
            margin: 1em 0;
        }

        #BtnDownloadZip {
            padding: 1em;
            margin: 1em 0;
        }

        /*.form {
        margin: 5px;
        padding: 5px;
        font-size: 24px;
    }*/
        #banner .content {
            top: initial;
        }

        .learnBut {
            clear: right;
            margin-top: .5em;
            margin-right: 0;
        }

        #dashPage .button.alt.smallBut {
            float: initial;
        }

        .sidewaysL {
            font-size: 1.75em;
            bottom: 45%;
        }

        .sidewaysR {
            display: none;
        }

        #StudioInfo {
            padding: 6px;
        }

        #PnlCalendar {
            padding: 6px;
        }

        #topLocationBar {
            text-align: center;
        }



        .slick-slide figure {
            /*width: 200px;*/
            margin: 2em auto;
        }

        /*.divLMSContainer.rotatorTabs {
        max-width: 800px;
        padding: 0;
    }*/
        /*.divLMSContainer.rotatorTabs {
            max-width: 1000px;
            padding: 0;
        }*/


        .slick-slide h2 {
            font-size: 1.2em;
        }

        .slick-slide blockquote {
            font-size: .9em;
        }

        .slick-slide .company a {
            font-size: 1.3em;
        }
    }


    @media only screen and (max-width: 4110px) {
        #PnlRotators .mainText {
            padding-left: 20px;
        }

        #PnlRotators .subText {
            margin: 0 0 25px 20px;
        }
    }

    @media only screen and (max-width: 1411px) {

        .divImgGrid4Container .divImgGridSubTitle {
            font-size: 14px;
        }
    }

    @media only screen and (max-width: 1350px) {


        .popupSection1USA, .popupSection2USA, .popupSection3USA, .popupSection4USA, .popupSection5USA {
            justify-content: center;
            margin: 0 auto;
        }


        .popupSection1CAN, .popupSection2CAN, .popupSection3CAN, .popupSection4CAN, .popupSection5CAN {
            justify-content: center;
            margin: 0 auto;
        }

        repeaterTextDiv h2 {
            font-size: 40px;
        }
      
        .heroText {
            max-width: 750px;
        }

            .heroText h1 {
                font-size: 90px;
                margin-top: 60px;
                line-height: 75px;
            }

        .heroDesc {
            margin-top: 20px;
        }

        .heroButton {
            margin-top: 34px;
        }
    }


    @media only screen and (max-width: 1300px) {

      

        .slickShowsEvents .slick-prev, .slickShowsEvents .slick-next {
            top: 65%
        }
    }



    @media only screen and (max-width: 1255px) {
        .divImgGrid5.divJourneyTiles .divImgGridSubTitle {
            font-size: 14px;
        }
        .evtListNav, .resourceNav {
           
            justify-content: flex-start;
        }
    }

    @media only screen and (max-width: 1200px) {

        .heroText {
            max-width: 600px;
        }

            .heroText h1 {
                font-size: 75px;
                margin-top: 50px;
                line-height: 65px;
            }

            .heroText .heroDesc {
                font-size: 16px;
                max-width: 550px;
            }

        .repeaterImgDiv.imgLeft {
            padding-right: 30px
        }

        .repeaterImgDiv.imgRight {
            padding-left: 30px
        }
        .blockInstance-213 h2 {     
            font-size: 36px;
        }
    }








    @media only screen and (max-width: 1124px) {


        .instabox {
            min-height: 200px;
        }


        .divImgGrid4Container .divImgGridSubTitle {
            font-size: 13px;
        }
        .divImgGrid5Container .divImgGridSubTitle {
            font-size: 13px;
        }
        .imgNails .divImgGridSubTitle {
            max-width: 130px;
        }
    }

    @media only screen and (max-width: 1024px) {

        .heroText {
            max-width: 500px;
            margin-left: 80px;
        }

            .heroText h1 {
                font-size: 60px;
                margin-top: 50px;
                line-height: 48px;
            }
      
        .heroDesc {
            font-size: 14px;
        }

        .heroButton {
            margin-top: 34px;
        }

        .msLanding .underText {
            font-size: 14px;
        }

        .ms-layer .buttonBlack {
            margin-top: 20px;
        }

        .viewCal {
            display: none;
        }

        .tabShoulder {
            display: none;
        }

        .tabHead {
            width: 100%;
            max-width: none;
        }

        .viewList {
            display: inline-block;
        }

        .divLMSContainer {
            padding: 0 1em;
        }

        #BtnDownloadZip {
            max-width: 100%;
            padding: 0 1em;
            margin: 1em 0;
        }
        /*.form {
        margin: 5px;
        padding: 5px;
        font-size: 24px;
    }*/

        #banner .content {
            top: initial;
        }

        .learnBut {
            clear: right;
            margin-top: .5em;
            margin-right: 0;
        }

        #dashPage .button.alt.smallBut {
            float: initial;
        }

        .sidewaysL {
            font-size: 1.75em;
            bottom: 45%;
        }

        .sidewaysR {
            display: none;
        }

        #StudioInfo {
            padding: 6px;
        }

        #PnlCalendar {
            padding: 6px;
        }

        #topLocationBar {
            text-align: center;
        }

        #header nav.search {
            display: none;
        }


        .slick-slide figure {
            /*width: 200px;*/
            margin: 2em auto;
        }


        .slick-slide h2 {
            font-size: 1.2em;
        }

        .slick-slide blockquote {
            font-size: .9em;
        }

        .slick-slide .company a {
            font-size: 1.3em;
        }

        .badgesDiv {
            max-width: 530px;
            justify-content: initial;
        }

        .divSplitLeft {
            margin-left: 15%;
            float: left;
        }

        .divSplitRight {
            margin-right: 15%;
            float: right;
        }

        .popupArea {
            left: 10px;
            width: 1005px;
            height: 320px;
            padding: 30px;
        }

        .rewards .popupArea {
            left: 10px;
            width: 1005px;
            height: 320px;
            padding: 30px;
        }

        .classText {
            width: 200px;
        }

        .repeaterTextDiv {
            font-size: 16px;
        }

            .repeaterTextDiv h2 {
                font-size: 38px;
            }



        .instabox {
            min-height: 490px;
        }

        .divImgGridTextWrapper {
            padding: 10px;
        }

        .FourColumnImageTextBlock .divImgGrid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media only screen and (max-width: 1160px) {
        #header nav {
            display: block;
        }

        .divImgGridTitle {
            font-size: 37px;
        }

        .divSignin {
            justify-self: right;
            margin-right: 0;
        }

        #searchButton {
            margin-right: 10px;
        }

        .divLogo {
            justify-self: left;
            padding-left: 20px;
        }

        a.linkWellaMall {
            padding-left: 20px;
        }

        .cartBut {
            margin-right: 20px;
        }

        .signinBut, .acctBut {
            display: none;
        }

        .headerGrid, .headerCANADA .headerGrid {
            grid-template-columns: auto auto 46px;
        }

        .rewards .headerGrid {
            grid-template-columns: 30% 65% 10%;
        }

        .popupArea {
            width: 830px;
            max-width: 98%;
        }

        .popupDiv3, .popupDiv4 {
            display: none;
        }

        .rewards .popupDiv3, .rewards .popupDiv4 {
            display: inline-block;
        }

        .divBlockNavLinks.light, .butNavSignIn {
            display: none;
        }

        .menuBar {
            cursor: pointer;
            display: block;
            text-align: left;
            margin-right: 20px;
        }


        /*#PnlTopCarousel .carouselBanner {
        width: 760px;
    }*/

        /*body {
        padding-top: 44px;
    }*/

        #passReminderPage {
            padding-top: 0;
        }

        .wrapper {
            padding: 1em 0 1em 0;
        }

        #dashPage .wrapper {
            padding: 3em 1em 1em 1em;
        }

        .inner {
            max-width: 70%;
        }

        .rewards .inner {
            max-width: 95%;
        }

        #one .flex-item {
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            text-align: center;
        }

            #one .flex-item.left br, #one .flex-item.right br {
                display: none;
            }

            #one .flex-item.left div:first-child, #one .flex-item.right div:first-child {
                padding-top: 0;
            }

            #one .flex-item.left div:last-child, #one .flex-item.right div:last-child {
                -moz-align-self: center;
                -webkit-align-self: center;
                -ms-align-self: center;
                align-self: center;
            }

            #one .flex-item.left div p, #one .flex-item.right div p {
                margin-bottom: 2em;
            }

        #one .image.fit {
            margin: 0;
        }

        #one .image.fit {
            margin: 0 auto 2em auto;
            max-width: 60%;
        }

        #two blockquote br {
            display: none;
        }

        #three {
            text-align: center;
        }

        #footer {
            padding: 3em 0 1em 0;
        }

            #footer ul li {
                display: block;
                padding: .25em 0;
            }

        .flex {
            -ms-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            .flex.flex-3 .flex-item {
                -ms-flex-preferred-size: 100%;
                -moz-flex-basis: 100%;
                -webkit-flex-basis: 100%;
                -ms-flex-basis: 100%;
                flex-basis: 100%;
            }

                .flex.flex-3 .flex-item.left {
                    text-align: right;
                }


        #menu ul.actions {
            display: block;
            margin: 0;
            list-style: none;
            padding-left: 0;
        }

            #menu ul.actions li {
                margin-bottom: 1em;
            }

        /*#banner {
		padding: 8em 6em 6em 6em;
	}*/

        #splitPage #banner br {
            display: none;
        }

        #banner h1 {
            font-size: 2.25em;
        }

        #splitPage #banner .content, #LMSSplitPage #banner .content {
            top: 80px;
        }

        #splitPage .SplitPageOverlay {
            top: 320px;
        }

        .divSplitLeft, .divSplitRight {
            padding: 20px 30px;
            min-width: initial;
        }

        #LMSSplitPage .sectionText {
            text-align: center;
            padding: 0 2em;
        }

        #homePage #banner h2 {
            margin: .5em auto 1em auto;
        }

        .divNail, .divSplitRight {
            margin-right: 10%;
        }

        .divHair, .divSplitLeft {
            margin-left: 10%;
        }



        .divDashSubNav {
            float: initial;
        }

        /*.slick-slider, #LMSLandingPage .fade.slick-slider {
        margin-top: 5.5em;
    }*/

        #PnlRotator1 .slick-slider {
            margin-top: 0;
        }

        #banner a {
            font-size: 1.2em;
        }

        #banner h2 span {
            font-size: .9em;
        }

        #banner h1 {
            font-size: 2em;
        }

        #LMSCalendarNew .leftTile {
            width: 250px;
        }

        #LMSCalendarNew .eventImgFull {
            width: 250px;
            height: 250px;
        }

        /*#banner .bannerUnderline {
        margin-bottom: 1em;
        max-width: 90%;
    }*/

        .rotatorTabs .showBut {
            font-size: 14px;
        }

        /* #PnlCatSearch {
        width: 69%;
    }*/
        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 650px;
        }*/

        /*.slick-slide figure {
        width: 150px;
    }*/

        .slick-slide h2 {
            font-size: 1em;
        }

        .slick-slide blockquote {
            font-size: .8em;
        }

        /*.divLMSContainer.rotatorTabs {
        max-width: 600px;
        padding: 0;
    }*/
        /*.divLMSContainer.rotatorTabs {
            max-width: 800px;
            padding: 0;
        }*/


        .slick-slide .company a {
            font-size: 1em;
        }

        .journeyDetails {
            text-align: center;
        }

        .SBSBullets3 {
            max-width: 100%;
            display: block;
            text-align: left;
        }

        /*section#moveBanner {
        margin-top: 85px;
    }*/
        #PnlRotators .rotatorTabs .showBut {
            margin: 3px auto;
        }

        a.tierAnchor {
            margin: 3px;
        }

        .rewards #PnlCalendar {
            margin-top: 50px;
        }

        .cssInlineVideoLeft {
            height: 315px;
            float: initial;
            padding: 0px 20px 20px 0;
            margin: 0 auto;
        }

        .cssInlineTextRight {
            overflow: initial;
            text-align: center;
            padding: 20px
        }

        #PnlMidText .mainText {
            text-align: center;
        }

        #PnlMidText {
            margin-top: 0;
        }
    }

@media only screen and (max-width: 1000px) {
    .divFooterNav {
        margin: 0 10px 40px 0;
    }

    .divFooterRight {
        margin-left: 10px;
    }

    .divImgGrid5.divJourneyTiles .divImgGridSubTitle {
        font-size: 13px;
    }

    .blockInstance-213 h2 {
        max-width: 250px;
        font-size: 32px;
    }

    .brandLogoRight img{
        max-width:100px;
    }
}

    @media only screen and (max-width: 905px) {

        .slickShowsEvents .slick-prev, .slickShowsEvents .slick-next {
            top: 70%
        }

        .footerTableMobile {
            padding-top: 30px;
        }

        .divFooterNav {
            max-width: 300px;
            display: block;
            vertical-align: top;
            margin: 0 auto 40px auto;
            width: 100%;
            text-align: center;
        }

        .divFooterLeft, .divFooterRight {
            display: block;
            max-width: 300px;
            margin: 40px auto;
        }

        .rewards .mainFooterDiv {
            text-align: center;
        }

        .WellaRewards .divFooterLeft {
            margin: 0;
        }

        .rewards .footerLogos {
            margin-top: 20px;
        }

        .divFooterRight {
            padding: 0;
        }


        #footer .copyright {
            padding: 2em 5em;
        }

        .footerLogos {
            text-align: center;
        }

        .fGBoxes {
            text-align: center;
            display: initial;
        }

        .subscribeLink {
            float: initial;
        }

        .botFoot {
            margin-top: 30px;
        }

        .divImgGrid5, .divImgGrid4 {
            /* Change from 5 columns to 1 column */
            grid-template-columns: 1fr;
            /* Optional: adjust gap for mobile spacing */
            gap: 15px;
            /* Ensure it takes up full width */
            width: 100%;
            padding: 0 15px; /* Adds a little breathing room on the sides */
        }

            /* Ensure images stretch to fill the new 1-column width */
            .divImgGrid5 img, .divImgGrid4 img {
                width: 100%;
                height: auto;
                display: block;
                max-height: 200px;
                object-fit: cover; /* This prevents the image from looking squished */
            }
            /* The container for each individual grid square */
            .divImgGrid5 > div, .divImgGrid4 > div {
                position: relative; /* This stays here so the text knows where to sit */
                overflow: hidden;
            }

            .divImgGrid5 .imgColor img {
                object-position: 0 50%;
            }

            .divImgGrid5 .imgCut img {
                object-position: 0 50%;
            }

            .divImgGrid5 .imgCareStyle img {
                object-position: 0 50%;
            }

            .divImgGrid5 .imgBusiness img {
                object-position: 0 25%;
            }

            .divImgGrid5 .imgNails img {
                object-position: 0 50%;
            }

            .divImgGrid4Container .divImgGridSubTitle, .divImgGrid5.divJourneyTiles .divImgGridSubTitle {
                font-size: 16px;
                height: 45px;
            }

        .divImgGrid4Container.imgBusiness .divImgGridSubTitle {
            height: 65px;
        }

        .divImgGrid4 .imgColor img {
            object-position: 0 1%;
        }

        .divImgGrid4 .imgStyle img {
            object-position: 0 75%;
        }

        .divImgGrid4 .imgBusiness img {
            object-position: 0 15%;
        }

        .divImgGrid5.divJourneyTiles .imgSocial img {
            object-position: 0 35%;
        }

        .divImgGrid5.divJourneyTiles .imgLeadership img {
            object-position: 0 25%;
        }

        .divImgGrid5.divJourneyTiles .imgBusinessBuilder img {
            object-position: 0 25%;
        }
        .voucherPackDetailsTitle, .voucherPackDetailsTitle {
            float: initial;
        }

         .DivVoucherPackageSalePriceDetailsX {
            float: initial;
            margin:0 0 30px 0;
            width:initial;
        }
    }

    @media only screen and (max-width: 950px) {
        .heroText h1 {
            font-size: 50px;
            line-height: 42px;
        }

        .heroText {
            max-width: 420px;
            margin-left: 60px;
        }

        .heroButton {
            margin-top: 15px;
        }
    }
@media only screen and (max-width: 915px) {
    .heroText h1 {
        margin-top: 20px;
    }
    /*.brandLogoRight {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom:15px;
    }*/
   
}

    @media only screen and (max-width: 768px) {

        .blockInstance-209 ul, .blockInstance-209 ol, .blockInstance-209 li {
            list-style-position: inside;
            padding-left: 0;
            margin-left: 0;
        }
     
        #OnDemandEvtListDiv, .divMonthGrid {
            grid-template-columns: initial;
        }
        .heroText {
            position: relative;
            top: 0;
            left: 0;
            max-width: 100%;
            margin: 0;
            font-size: 18px;
            margin: 18px;
        }

            .heroText h1 {
                font-size: 40px;
                line-height: 44px;
                text-align: left;
                padding: 0;
                margin: 0;
            }
        .shopTitleMobHide {
            display: none;
        }
        .divTestInsider, .divTestSpecialist, .divTestExpert, .journeyPathwayTierClasses {
            grid-template-columns: repeat(auto-fit, 100%);
        }
        .reqClass {
            width:100%;
        }
        
        
        .shopTitleMobShow {
            display: inline-block;
        }
        .WRLogin {
            padding-left: 20px;
        }
        .wrapCrumbsDiv {
            padding: 0 20px;
        }

        .heroDesc {
            font-size: 18px;
        }

        .divImgGridTitle {
            font-size: 42px;
        }

        .repeaterTextDiv {
            font-size: 19px;
        }
        #_ctl3_PnlWelcomeCanada.ThreeColumnImageBlock .divImgGrid {
            grid-template-columns: repeat(1, 1fr);
        
        }
        .repeaterTextDiv h2 {
            font-size: 48px;
        }
        .brandLogoRight img {
            max-height:50px;
            max-width:initial;
        }

            .acctBut {
            min-width:initial;
        }
        .signinBut, .acctBut {
            padding: 10px;
        }
        .carousel {
            margin-top: 34px;
        }

        .RptLeftImageRightText, .ThreeColumnImageTextBlock {
            margin-top: 30px;
        }
        #PnlShop {
            text-align:center;
        }
        .divHeroImg {
            width: 100%;
            height: 450px; /* Forces the specific height you want */
            overflow: hidden;
            position: relative;
        }

            .divHeroImg img {
                width: 100%;
                height: 100%;
                /* 'cover' ensures the image fills the 450px height without distorting */
                object-fit: cover;
                /* This keeps the right 400px+ of the image in view */
                object-position: right center;
                display: block;
            }

        .divHeroImgCentered {
            width: 100%;
            height: 450px; /* Forces the specific height you want */
            overflow: hidden;
            position: relative;
        }

            .divHeroImgCentered img {
                width: 100%;
                height: 100%;
                /* 'cover' ensures the image fills the 450px height without distorting */
                object-fit: cover;
                /* This keeps the right 400px+ of the image in view */
                object-position: center;
                display: block;
            }

        .ThreeColumnImageTextBlock .divImgGrid, .ThreeColumnImageBlock .divImgGrid, .TwoColumnImageBlock .divImgGrid, .FourColumnImageTextBlock .divImgGrid, .tierReqClasses .tierReqGrid {
            grid-template-columns: repeat(1, 1fr);
            gap: 20px
        }

        .threeColumnImageBarBlock .divImgGrid {
            display: initial;
        }

        .FourColumnImageTextBlock .img4Col {
            height: initial;
        }

        .RptLeftImageRightText .divImgGrid {
            display: block;
            gap: 16px;
        }

        .img2Col {
            height: 340px;
        }

        .mainText {
            font-size: 18px;
        }

       /* .heroButton {
            margin-bottom: 50px;
        }*/

        .RptLeftImageRightText .repeaterRow, .RptRightImageLeftText .repeaterRow {
            padding: 0;
        }


        #PnlRotators .mainText {
            margin: 0;
        }

        #PnlRotators {
            padding: 50px 16px 20px 16px;
        }

            #PnlRotators .mainText {
                padding-left: 0;
            }

            #PnlRotators .subText {
                margin: 0 0 25px 0;
            }


        PnlResourceTiles {
            padding: 0;
        }

        .resourcesViewAll {
            margin: 40px 0 0 0;
        }

        .repeaterTextDiv h2 {
            margin-bottom: 15px;
        }

        .gridResources {
            margin-bottom: 0;
        }

            .gridResources h3 {
                padding: 5px 0 7px 16px;
                text-align: left;
            }

        .divInstaTitle, .divInstaTitle h1 {
            /*added 20px padding top for home page spacing*/
            padding-top: 20px;
            margin-top: 0;
        }

        .divUnderTextTitle {
            margin: 10px auto 30px auto;
        }

        .divThreeImgColTitle {
            margin-bottom: 30px;
        }

        .divLMSContainer.divUnderRotator {
            /*margin: 20px 0 0 0;*/
            padding: 0;
            text-align: left;
        }

        .PnlResourceTiles {
            background-color: #fff;
            padding-top: 0;
        }

        .resourcesLinks {
            max-width: 300px;
            margin: 0 auto;
        }

            .resourcesLinks .pillButton {
                margin-top: 14px;
            }

        .certsDivContainer {
            margin: 0 16px 100px 16px;
        }

        .repeaterImgDiv, .repeaterTextDiv {
            width: 100%;
        }

        .RptLeftImageRightText .repeaterTextDiv {
            padding-left: 0;
            margin-top: 20px
        }

        .divCenterButton {
            text-align: left;
        }

        .boxGridBG {
      /*      padding: 15px; removed to fix journeydetail pages*/
            padding: 0;
        }

        .divFourColumnIconBlock {
            display: block;
        }

            .divFourColumnIconBlock div {
                margin: 40px auto;
            }

        .divMainTextTitle, #PnlRotators .mainText, .resourcesTitle, .certsDivContainer h1, .RptLeftImageRightText h2 {
            font-size: 40px;
        }

        .PnlRotators .mainText {
            margin-bottom: 25px;
        }

        .divInstaTitle h1 {
            font-size: 40px;
            text-align: left;
        }

        #divMainContent {
            padding-top: 1em;
        }

        .divInstaTitle a {
            padding-right: 13px;
        }

        .divFourColumnIconBlock {
            display: block;
            text-align: center;
        }

        .ThreeColumnImageTextBlock figure, .ThreeColumnImageBlock figure {
            height: initial;
        }

        .journeyTierMain .changeFontLarge {
            font-size: 2em;
        }

        .rewards .eventText {
            max-width: 250px;
        }

        .search input[type="text"] {
            width: 90%;
        }

        .divImgGrid {
            display: block;
            margin: 5px auto;
        }



        .divBthCheckout {
            float: initial;
        }

        .linkBut {
            text-align: initial;
            width: 100%;
            padding-bottom: 40px
        }

        .divHeaderLeft {
            padding-bottom: 10px;
        }

        .search {
            max-width: 95%;
            padding-left: 30px;
        }

        .divBlockNavLinks {
            display: none;
        }

        /*  .reqWCE {
            display: block;
        }*/

        #cartPage h1, #LMSSurveyPage h1 {
            margin-top: 0;
            clear: both;
        }

        .divButCheckout, #PnlCredit, #PnlEnterCode {
            float: initial;
        }

        #PnlPayZip {
            margin-bottom: 0;
        }

        /*   #journeyDetailPage .reqClassText td {
            display: block;
        }*/
        /*#journeyDetailPage .tableVoucherWCEPackage tr:nth-child(n+4) {
            border-top: 1px solid rgb(230, 230, 230);
        }
            #journeyDetailPage .tableVoucherWCEPackage tr:nth-child(n+4) td:nth-child(1) {
                padding-top: 8px;
            }
            #journeyDetailPage .tableVoucherWCEPackage tr:nth-child(n+4) td:nth-child(3) {
                padding-bottom: 8px;
            }
        #journeyDetailPage .tableVoucherWCEPackage tr:nth-child(9) td:nth-child(1) {
            padding-top: initial;
            height: 1px;
        }*/
        .DivVoucherPackageSalePriceDetails {
            float: initial;
            width: initial;
        }

        /*.tdVouchPackAboutList {
            display: block;
        }*/
        .tableVoucherWCEPackage td {
            display: block;
        }

        .trVouchPackAboutList {
            border-top: 1px solid rgb(230, 230, 230);
        }

            .trVouchPackAboutList td:nth-child(1) {
                padding-top: 8px;
            }

            .trVouchPackAboutList td:nth-child(3) {
                padding-bottom: 8px;
            }

        .tdVouchPackAbout.tdSpacer {
            display: none;
        }

        .tblVouchPackAbout2 {
            width: initial;
        }

        .tdVouchPackAbout2 {
            width: initial;
            text-align: left;
            display: block;
            padding: 10px;
            border-top: 1px solid rgb(230, 230, 230);
        }



        #header .siteLogo {
            /*  height: 55px;*/
        }

        .menuBar {
            /* cursor: pointer;
            float: right;
            padding: 25px 10px 0 0;*/
        }

        .divLogo {
            /*  padding-left: 10px;
            padding: 15px 0 0 10px;*/
        }

        .socLinks {
            display: none;
        }

        #header nav {
            float: right;
        }

        .mobHide {
            display: none;
        }

        .mobShow {
            display: block;
        }

        .divComsContainerInfo .mobShow {
            display: inline-block;
        }

        .imgLeft img, .imgRight img, #PnlAlternatingTextImage .imgLeft img, #PnlAlternatingTextImage .imgRight img {
            max-width: 100%;
            margin: 0;
        }

        .wrapper {
            padding: initial;
        }


        #header .logoDiv {
            height: initial;
        }



        .container {
            width: 90% !important;
        }

        .rewards .container {
            margin: 0 auto;
        }


        .imgRptSlick {
            width: 100px;
        }


        #menu {
            padding: 2.5em 1.75em;
        }

        .inner {
            max-width: 85%;
        }


        #menu .close {
            height: 4em;
            line-height: 4em;
        }

        .journeyDescText .changeFontLarge {
            font-size: 2em;
        }

        .divloginPage #Button1, .divloginPage #forgotButton {
            margin-bottom: 1em;
            width: 100%;
        }

        #loginPage .wrapper {
            padding-top: 4em;
        }

        #dashPage .wrapper {
            padding-top: 0;
        }

        #splitPage .SplitPageOverlay {
            position: initial;
        }

        #splitPage .slick-slider {
            margin-top: initial;
        }

        .divSplitLeft, .divSplitRight {
            padding: 1em;
            margin: 1em;
            float: initial;
            min-width: 180px;
        }

            .divSplitLeft h1, .divSplitRight h1 {
                padding: 0;
            }

        #banner .content {
            top: initial;
            padding: .5em;
        }

        #banner h2 {
            margin: 0 0 1em 0;
        }

        #banner .button {
            padding: 0 1.5em;
        }

        .GEarrowGrid {
            display: initial;
            width: 100%;
        }

        .arrow1, .arrow2 {
            display: none !important;
        }

        .show1, .show2, .show3, .show4, .show5 {
            display: none;
        }

        .circleNumber1, .circleNumber2, .circleNumber3 {
            float: left;
            clear: both;
            margin-right: 20px;
        }

        .textNumber1 {
            max-width: 100%;
        }

        .textNumber2 {
            margin-top: 30px;
            max-width: 100%;
        }

        .textNumber3 {
            margin-top: 35px;
            max-width: 100%;
        }

        .titleHowWorks {
            padding-left: 0;
        }

        #PnlLeftImageRightText .repeaterRow, #PnlLeftTextRightImage .repeaterRow, #PnlAlternatingTextImage .repeaterRow {
            display: block;
            margin: 40px 0;
        }

        #PnlTopText .mainText {
            max-width: 100%;
        }

        .bgGrey {
            max-width: initial;
        }

        /*Master slider Mobile*/
        #masterslider186, #masterslider281 {
            display: none;
        }

        .master-slider-mobile {
            display: block;
            text-align: center;
            background-color: #FF2000;
        }

        .ms-mobile-title {
            color: #fff;
            text-transform: uppercase;
            font-family: 'ABCRom Compressed Black', Arial, Helvetica, sans-serif;
            font-size: 48px;
            margin-bottom: 32px;
            padding-top: 64px;
        }

        .ms-mobile-desc {
            color: #fff;
            line-height: 26px;
            font-size: 19px;
            font-family: 'ABCROM Regular', Arial, Helvetica, sans-serif;
            margin-bottom: 40px;
        }

        .ms-mobile-images {
            margin-bottom: 32px;
        }

        .ms-mobile-button {
            padding-bottom: 64px;
        }
        /*map Page ------*/
        .mapListLI {
            max-width: 100%;
            float: initial;
            list-style: none;
        }

        .butLearnMore {
            width: 100%;
            margin: 1em 0;
        }

        /*LMS Pages ------*/


        .divLMSContainer {
            padding: 0 20px;
        }


        .slick-slide h2 {
            font-size: 1em;
        }

        .slick-slide blockquote {
            font-size: .8em;
        }

        .slick-slide .company a {
            font-size: 1.2em;
            padding: .5em;
        }

        #BtnSubscribe {
            margin: .5em;
        }

        .slick-slide h2 {
            word-break: break-word;
            max-height: 100px;
            overflow: hidden;
        }

        .sidewaysL {
            font-size: 1.2em;
            bottom: 45%;
        }

        .offerBox {
            min-width: 150px;
            margin-top: 2%;
        }

        .mainHeadlineH1 {
            font-size: 40px;
        }

        #PnlMidHeadline .mainHeadlineH1 {
            font-size: 1.2em;
            padding: 0px 10px 10px 10px;
        }

        .navPos0, .navPos1 {
            display: block;
            padding: 0;
        }

        .navPos2 {
            padding: .1em;
        }

            .navPos2 br {
                display: none;
            }



        #banner a {
            font-size: 1em;
        }


        /*#banner .bannerUnderline {
        margin-bottom: 1em;
        max-width: 95%;
    }*/

        #insta a {
            max-height: 150px;
        }

        .instaImg {
            width: 150px;
        }

        .gridSearchButs {
            display: grid;
            grid-gap: .5em;
            grid-template-areas: 'left' 'center' 'right' 'leftbot' 'rightbot';
            grid-template-columns: 100%;
        }

        #LMSCalendarNew .divEventListDate {
            display: none;
        }

        #LMSCalendarNew .showCal {
            display: none;
        }

        #LMSCalendarNew .eventlist {
            display: block;
            height: initial;
        }

        #LMSCalendarNew .divEventListImg img {
            float: initial;
        }

        .divEventListImg {
            margin-top: 10px;
        }

        .divEventListDetails {
            padding-top: 20px;
            display: block;
        }

        .divEventListCost {
            padding: 10px 0 15px 0;
            display: block;
        }

        .grid-bio-cards figure {
            width: 100%;
        }

        @supports (display: grid) {
            .eventlist {
                display: grid;
                grid-template-columns: 120px auto 130px;
                font-size: 1em;
            }

            .eventlist2 {
                display: grid;
                grid-template-columns: 120px 30px auto 160px;
                font-size: 1em;
            }

            .eventlist3 {
                display: grid;
                grid-template-columns: 120px auto 160px;
                font-size: 1em;
            }

            .eventlist4 {
                display: grid;
                grid-template-columns: 120px auto 160px;
                font-size: 1em;
            }
        }

        .rewards .eventlist4, .rewards .eventlist2 {
            display: block;
        }

            .rewards .eventlist4 .eventText, .rewards .eventlist2 .eventText {
                text-align: center;
                width: 100%;
                margin: 0 auto;
            }

            .rewards .eventlist4 .eventDate, .rewards .eventlist2 .eventDate {
                width: 100%;
                margin: 0 auto;
            }

            .rewards .eventlist4 .eventBuy, .rewards .eventlist2 .eventBuy {
                width: 100%;
                margin: 0 auto;
            }

        .divEventListCost {
            float: initial;
        }

        .eventlist {
            font-size: 1em;
        }

        .eventListTixBut {
            font-size: .7em;
        }

        .eventlist {
            height: 170px;
        }


        .eventDescText {
            max-height: 190px;
            display: inline-block;
            overflow: hidden;
        }

        #LMSCalendarNew .divEventListDate {
            width: 45px;
            height: 45px;
        }

        #LMSCalendarNew .eventListMonth {
            font-size: 10px
        }

        #LMSCalendarNew .eventListDay {
            font-size: 16px;
            font-weight: bold;
        }

        #LMSCalendarNew .divEventListImg img {
            max-width: 100%;
        }

        #LMSCalendarNew .rightTile {
            width: 100%;
        }

        #LMSCalendarNew .leftTile {
            text-align: center;
            width: 100%;
        }

        #LMSCalendarNew .divContainerEventList {
            font-size: .8em;
            grid-template-columns: 10% 65% 20%;
            margin-left: .5em;
            grid-gap: .8em;
        }

        #LMSCalendarNew .eventImgFull {
            width: 300px;
            height: 300px;
        }

        #LMSCalendarNew .divEventImg {
            width: 40%;
        }

        #LMSCalendarNew .facetEventImg {
            width: 125px;
            height: 125px;
        }

        #LMSCalendarNew .backBut {
            margin-left: 1em;
        }

        #LMSDetailPage .gridEventDetail {
            display: block;
            text-align: center;
        }

        #LMSDetailPage .imgEventDetail {
            float: initial;
            max-width: 100%;
            padding: 1em 0;
        }

        #LMSDetailPage h1, #LMSDetailPage #LblEventDateTop, #LMSDetailPage #PnlEvent, #LMSDetailPage #divEventLoc, #LMSDetailPage #divLblPreReqs {
            text-align: center;
        }

        #LMSDetailPage .divEventDetails ul {
            list-style-position: inside;
            padding-left: 0;
        }

        #LMSDetailPage .bgTanHalf {
            max-width: 100%;
        }

        #LMSDetailPage #PnlTickets input[type="submit"] {
            width: 100%;
        }

        .divClassBar2 {
            display: initial;
        }

        .divNavPos2 {
            font-size: 1.6em;
        }

        #PnlCatSearch {
            display: block;
        }

        #BtnDownloadZip {
            max-width: initial;
            padding: 0 3.5em;
            margin: 0 0 1em 0;
        }

        #TxtSearchLibrary {
            max-width: 60%;
        }

        #PnlCatSearch {
            width: 100%;
            text-align: center;
        }

        .gridDtlItems {
            display: block;
            text-align: center;
        }

        /*.divPnlRotator, .divPnlRotator .inner {
        max-width: 400px;
    }*/
        /*.slick-slide figure {
        width: 100px;
    }*/
        /*.divLMSContainer.rotatorTabs {
        max-width: 375px;
        padding: 0;
    }*/



        #LMSProfilePage .divRedBG {
            max-width: initial;
            width: 100%;
            float: initial;
            text-align: center;
            margin: 0 auto;
        }

        .imgProfile {
            float: initial;
        }

        .badgesDiv {
            justify-content: center;
        }

        .achievementsDiv {
            text-align: center;
        }

        #LblGalleryImages h3 {
            text-align: center;
            padding-top: 1em;
        }

        #LMSProfilePage .divProfileName {
            margin-left: 0;
            text-align: center;
        }

        #LMSProfilePage .divProfileNameMobile {
            display: block;
            text-align: center;
            margin-bottom: 1em;
        }

            #LMSProfilePage .divProfileNameMobile h1 {
                color: black;
            }

        .lineBreaks {
            display: none;
        }

        #dashPage .divProfile {
            display: initial;
            text-align: center;
        }

        #dashPage .imgProfile img {
            float: initial;
        }

        H1 {
            text-align: center;
            padding: 10px 0;
        }

        #LblClassCompletions {
            text-align: center;
            display: block;
        }

        .dashUpcomingEventsDiv {
            display: block;
            padding: 2em 0;
            text-align: center;
        }

        .dashUpcomingBlendedDiv {
            display: block;
            padding: 2em 0;
            text-align: center;
        }

        .dashCouponVouchersDiv {
            display: block;
            padding: 2em 0;
            text-align: center;
        }


        .dashEventHistoryDiv {
            padding: 1em 0;
        }

        .dashSuggestedEventDiv {
            max-width: 180px;
        }

        .divDashButtons {
            padding: 2em 0 0 0;
            max-width: 80%;
            margin: 0 auto;
        }

        #BtnClear {
            margin: 1em 0 0 0;
        }

        .cbxHideSoldOut {
            padding-top: 1.5em;
            display: inline-block;
        }

        .instabox {
            min-height: 360px;
        }

        .repeaterImgDiv.imgRight {
            float: initial;
        }

        .repeaterImgDiv.imgLeft {
            float: initial;
        }

        .repeaterTriCol {
            width: 100%;
            display: block;
        }

        #PnlBioLibrary .rotatorTabs .showBioTab {
            margin: 1em 0 0 0;
            font-size: initial;
        }


        .ui-accordion .ui-accordion-content {
            padding: 1em;
        }

        #PnlLeftImageRightText .repeaterRow, #PnlAlternatingTextImage .repeaterRow {
            padding: 10px;
            display: block;
        }

        .textRight, .textLeft, .repeaterImgDiv.imgRight, .repeaterImgDiv.imgLeft {
            padding: 0;
        }

        .repeaterRow .button, .repeaterOneCol .button, .mainText .button {
            width: 100%;
        }

        .showList {
            color: #000;
            background-color: #fff;
        }


        #LMSSurveyPage #PnlSurveyTable {
            margin-top: 1em;
        }

        .tdSettings {
            width: 60%;
        }

        .tdDetails {
            min-width: 150px;
        }

        .tdSocial {
            width: 35%;
        }

        .divComsContainer, .divComsContainerInfo {
            display: block;
        }

        .divComsContainerInfo {
            margin-top: 2em;
        }

        .divComsTitle {
            display: none;
        }

        .divComs {
            display: block;
        }

        .total {
            text-align: left;
        }

        #PnlCommunicationTable {
            margin-top: 1em;
        }

        .SBSBullets3 {
            padding: 0;
        }

        .journeyDescText {
            max-width: 100%;
        }

        a.tierAnchor {
            width: 100%;
            margin: 10px 0 0 0;
        }

        .tierReqClasses {
            padding: 10px;
        }

        .tierDescText {
            max-width: 100%;
           /* padding: 20px; removed to fix journeydetail pages*/
           padding:0;
        }

        .tierDescTitle {
            max-width: 100%;
            float: initial;
        }

        .tierBadge {
            margin: 20px auto 0 auto;
            display: block;
        }

        .tierPackPassDiv {
            float: initial;
        }

        .boxGridBG {
            display: block;
        }

        .reqClass {
            display: block;
        }

        .reqClassCheck {
            float: left;
            padding: 5px;
        }

        .reqClassText {
            overflow: hidden;
            /* margin: 10px 0 10px 0;*/
        }

        .gridRecClasses {
            display: block;
        }

        .recClass {
            margin: 0 auto;
            width: 300px;
            height: 300px;
        }

        .fiveColumns .Jcolumn {
            margin: 40px 15px 15px 0;
        }

        #PnlClickThroughSlideButtons .clickThroughText {
            position: initial;
            margin: 60px 30px;
            width: initial;
            max-width: 100%;
        }

        #PnlClickThroughSlideButtons .slideButton {
            margin: 30px 3px 0 2px;
        }

        .divClassBar2 {
            grid-template-columns: 50% 50%;
            grid-template-rows: 300px 300px;
        }

        .toggleFilter {
            margin-bottom: 20px;
        }

        #PnlEventList {
            grid-template-columns: 100%;
        }

        .journeyPaths .fiveColumns .Jcolumn {
            margin: 40px 10px 15px 0;
        }

        .bizJourneyPaths .fiveColumns .Jcolumn, .bizJourneyPaths2 .fiveColumns .Jcolumn, .divRegionalEvents .fiveColumns .Jcolumn. {
            margin: 40px 10px 15px 0;
        }

        .divRegionalEvents .fiveColumns .Jcolumn {
            width: 100%;
            margin: 40px auto;
        }

        .footerTableMobile {
            padding: 20px 0 50px 0;
        }

        .boxGridBG {
            padding-top: 20px;
            display: block;
        }

        .divTxt {
            visibility: hidden !important;
            opacity: initial !important;
            height: 0px !important;
        }

        #AccordionSection258 .ui-accordion .ui-accordion-header {
            text-align: left;
        }

        .leftTile {
            width: 100%;
        }

        .divRewardEventImg {
            float: initial;
            margin: 0 auto;
            text-align: center;
        }
        /*#PnlFavorites .fliptiles a {
        display: inline-block;
        max-width: 49%;
    }*/
        .eventlist3 {
            display: block;
            text-align: center;
        }

        .topTextBlock {
            text-align: left;
        }
    }

    @media only screen and (max-width: 650px) {


        .popupDiv2 {
            display: none;
        }
        .EvtConstrain {
            max-height: 1590px;
        }
    }

    @media only screen and (max-width: 600px) {
        /*#PnlTopCarousel .carouselBanner {
            width: 420px;
        }*/

        .fieldBox {
            display: block;
        }

        /*.tileContainer {
        width: 150px;
        height: 100px;
    }

        .tileContainer img {
            max-width: 150px;
        }*/
        .imgRptSlick {
            width: 90px;
        }
        /*.tileTopText {
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: 1em;
        
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 1px 1px 1px #000;
        padding: 5px;
        width: 100%;
        text-align: left;
    }

    .tileBotText {
        position: absolute;
        bottom: 10px;
        left: 60px;
        font-size: 1.5em;
        
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 1px 1px 1px #000;
        padding: 5px;
        width: 100%;
        text-align: left;
    }*/

    }


    @media only screen and (max-width: 550px) {


        .offerBox {
            min-width: 150px;
            margin-top: 2%;
            width: 100%;
        }
        .divImgGridTextWrapper {
            bottom: 20px;
        }
    }


    @media only screen and (max-width: 420px) {
        body, html {
            overflow-x: hidden
        }

        #searchOverlay {
            height: 30%;
        }

        .imgRptSlick {
            width: 80px;
        }

        /*html, body {
        min-width: 320px;
    }*/

        /*.wrapper {
        padding: 2em 0 0.1em 0;
    }*/

        .container {
            width: 90% !important;
        }

        #footer {
            padding: 2em 0 0.1em 0;
        }

            #footer ul li {
                font-size: .9em;
            }

                #footer ul li .icon:before {
                    margin-left: -1em;
                }

            #footer .copyright {
                padding: 2em 0;
            }


        #one .image.fit {
            margin: 0 auto 2em auto;
            max-width: 90%;
        }
        /*#banner {
		padding: 4em 2em 2em 2em;
	}*/
        #banner h1 {
            font-size: 2em;
        }

        #banner h2 {
            font-size: 1.7em;
        }

        #banner p {
            font-size: 1em;
        }

        #banner .button {
            font-size: .9em;
        }

        #banner .mainTitleH1 {
            font-size: 1.2em;
        }

        /*#header {
        min-width: 320px;
    }*/
        #header .siteLogo {
            max-width: 200px;
        }

        .slick-slide .image {
            left: -50%;
        }

        .slick-slide .image {
            left: initial;
        }

        #banner h2 span {
            font-size: .8em;
            margin: 1em 0 3em 0;
        }





        ul.actions {
            margin: 0 0 2em 0;
        }

            ul.actions li {
                padding: 1em 0 0 0;
                display: block;
                text-align: center;
                width: 100%;
            }

                ul.actions li:first-child {
                    padding-top: 0;
                }

                ul.actions li > * {
                    width: 100%;
                    margin: 0 !important;
                }

                    ul.actions li > *.icon:before {
                        margin-left: -2em;
                    }

            ul.actions.small li {
                padding: 0.5em 0 0 0;
            }

                ul.actions.small li:first-child {
                    padding-top: 0;
                }

        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 420px;
        }*/

        /*.slick-slide figure {
        width: 75px;
    }*/

        /*.divLMSContainer.rotatorTabs {
            max-width: 300px;
            padding: 0;
        }*/


        .slick-slide .company a {
            font-size: .9em;
        }

        .slick-slide h2 {
            font-size: .8em;
        }

        .rotatorTabs .showBut {
            font-size: 11px;
            min-height: 25px;
        }

        .slick-slide blockquote {
            font-size: .8em;
            line-height: 1.5;
            font-weight: normal;
        }

        #PnlClickThroughSlides .clickThroughText {
            padding: 100px 50px;
            width: 100%;
        }
    }

    @media only screen and (max-width: 393px) {
        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 390px;
        }*/

        #PnlMidHeadline .mainHeadlineH1 {
            font-size: 1.2em;
            padding: 0px 10px 10px 10px;
        }

        .navbar-menu {
            max-width: 100%;
        }

        .subMenuList {
            padding-left: 15px;
        }
        .divImgGridTextWrapper {
            bottom: 30px;
        }
        
    }

    @media only screen and (max-width: 375px) {
        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 375px;
        }*/

        .navbar-menu .classText {
            width: 70%;
        }
    }

    @media only screen and (max-width: 360px) {
        /*#PnlTopCarousel .carouselBanner {
            width: 320px;
        }*/
        .imgRptSlick {
            width: 50px;
        }

        .sidewaysL {
            font-size: 1em;
        }
        .EvtConstrain {
            max-height: 1630px;
        }
        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 360px;
        }*/

        #header .siteLogo {
            max-width: 150px;
            height: initial;
        }

     /*   .menuTitle, .menuTitleLight {
            grid-template-columns: 75% 15%;
        }*/

       /* .navbar-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0 20px 20px 5px;
            font-size: 14px;
        }*/
    }

    @media only screen and (max-width: 280px) {
        /*.divPnlRotator, .divPnlRotator .inner {
            max-width: 280px;
        }*/

        #header {
            min-width: 280px;
        }
    }

    #Que_4895, #Ans_4895 {
        display: block;
        padding-top: 20px;
    }

    #TblSurvey1 #BtnSubmitForm, #PnlSurveyTable #LblNameForm {
        margin-top: 20px;
        display: block;
    }