:root {

    --color_01: #8ebf34;
    --color_02: #1D1D1B;
    --color_03: #Fff;
	--color_04: #201d3b;

    --max_width: 100%;
    --inner_padding: 1rem;

    --nav_height: 150px;
}

.NodeLevel0 > a.active {
    color: #8ebf34 !important;
}

/* CTAS */

@media screen and (min-width: 1025px) {
    .CNCCTA {
        margin-top: 75px;
    }

    .masthead .fixed {
        padding-inline: 0;
    }

    .masthead .fixed .container {
        padding-inline: 0;
    }

    .logoContainer,
    .logo {
        width: 100%;
        max-width: 209px;
        padding: 0;
        height: 100%;
        grid-row: 1;
        padding-left: 1em;
    }

    .navIcons {
        border-bottom: none;
        height: var(--nav_height);
    }

    .top-bar {
        padding-inline: var(--inner_padding);
        background: var(--color_03);
    }

    .top-bar>div {
        -webkit-flex-flow: row nowrap;
        -moz-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        -o-flex-flow: row nowrap;
        flex-flow: row nowrap;
        margin-block: 0 1rem;
        overflow: auto;
    }

    .top-bar a {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        white-space: nowrap;
        padding: 0.75rem 1rem;
        grid-gap: 1rem;
        color: #333;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.05rem;
        font-weight: 700;
        text-align: left;
        justify-content: center;
        flex: 1;
        border-right: 2px solid #fff;
    }

    .top-bar a:hover {
        background: var(--color_01);
        color: #fff;
    }

    .top-bar a:last-child {
        border-right: none;
    }

    .top-bar a * {
        margin: 0;
        line-height: initial;
    }

    .top-bar a div>p {
        margin-top: 0.1rem;
        font-size: 0.9rem;
    }

    .top-bar a span {
        color: var(--color_01);
        transition: all .33s ease-in-out;
        font-size: 1.3rem;
    }

    .top-bar a:hover span {
        color: #fff;
    }

    .NodeLevel0 {
        margin: 0;
    }

    .CSSFacetNavModules .NodeLevel0>a {
        text-transform: uppercase;
        font-size: 1rem;
    }

    .navIcons :is(.icon-head, .icon-bag, .icon-search) {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
    }

    .navIcons .menu-icons-header {
        grid-gap: 4rem;
        height: 100%;
    }

    .navIcons .icon-search {
        order: 1;
        flex: 0 1 40% !important;
        margin-inline: auto;
    }

    .navIcons .icon-head {
        order: 2;
    }

    .navIcons .icon-bag {
        align-items: center;
        grid-gap: 0.75rem;
        justify-content: flex-end;
        order: 3;
    }

    .srchCtr.tbcnt.tbcntOpen {
        padding-block: 1rem;
    }

    .srchCtr.tbcnt .searchBoxForm,
    .srchCtr.tbcnt .searchBoxForm:focus {
        background: transparent;
        border: 2px solid var(--color_03);
    }

    .ctrNavigation.tbcntOpen {
        top: var(--nav_height);
        width: calc(100% + 2rem);
        left: -1rem;
    }

    .navIcons {
        align-items: center;
        display: grid;
        grid-template-columns: 209px 2fr;
    }

    .navIcons :is(.icon-head, .icon-bag, .icon-search) {
        height: auto;
        line-height: normal;
        grid-gap: 0.3rem;
        width: auto;
        align-items: center;
    }

    .ctrNavigation {
        grid-column: 1/3;
        grid-row: 2;
        align-items: center;
        height: 100%;
        padding-block: 1rem;
        display: flex;
        background: var(--color_04);
    }

    .CSSFacetNavModules .NodeLevel0>a {
        padding: 0;
        letter-spacing: 1px;
        color: var(--color_03);
    }

    .navIcons .menu-icons-header {
        justify-content: end;
        padding-right: 1em;
        align-content: center;
    }

    .navIcons :is(.icon-head, .icon-bag, .icon-search):before {
        font-size: 1.25rem;
        order: 1;
    }

    .ctrNavigation>.CSSFacetNavModules {
        grid-gap: 1rem;
        justify-content: center;
    }

    .NodeLevel0>.CSSFacetNavModules.active {
        position: absolute;
        padding: 2rem var(--inner_padding);
        top: var(--nav_height);
        grid-gap: 4rem;
        justify-content: center;
        border-top: 2px solid var(--color_01);
    }

    .NodeLevel0>.CSSFacetNavModules.active .NodeLevel1 {
        padding: 0;
        width: auto;
    }

    .NodeLevel0>a:before,
    .NodeLevel0>a:after {
        display: none;
    }

    .open-slide-menu .NodeLevel0>a:not(.active) {
        opacity: .3;
    }

    .open-slide-menu .NodeLevel0>a:not(.active):hover {
        opacity: 1;
    }

    .NodeLevel0>.CSSFacetNavModules .NodeLevel1>a {
        font-size: 1rem;
        line-height: initial;
        letter-spacing: normal;
        font-weight: 700;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        text-transform: none;
    }

    .NodeLevel1>.CSSFacetNavModules {
        columns: auto;
        width: auto;
    }


    .NodeLevel1>.CSSFacetNavModules a {
        font-size: 0.9rem;
    }

    .NodeLevel1>.CSSFacetNavModules a:hover {
        color: var(--color_01);
    }

    .NodeLevel1>.CSSFacetNavModules>div {
        padding: 0;
    }

    div[data-nodename="Brands"] .CSSFacetNavModules .NodeLevel1:first-child>a {
        font-size: 1.25rem;
        color: var(--color_01);
        border-color: var(--color_01);
    }

    div[data-nodename="Brands"] .CSSFacetNavModules .NodeLevel1:first-child div a {
        font-size: 1rem;
    }

    .masthead input {
        background: #ffffff;
        border: 1px solid #b5b5b5 !important;
    }

    .srchCtr {
        transition: opacity 0.3s;
        opacity: 0;
        display: inline-block !important;
        width: 100%;
        min-width: 225px;
    }

    .srchCtr.tbcnt .searchBoxForm,
    .srchCtr.tbcnt .searchBoxForm:focus {
        padding: 0 0 0 21px;
        height: 51px;
        line-height: 51px;
        border-radius: 8px;
        width: 100%;
        margin-left: 2em;
    }

    .searchActive .srchCtr {
        opacity: 1;
        align-self: center;
    }

    .srchCtr.tbcnt.tbcntOpen,
    .loginCtr.tbcnt.tbcntOpen,
    .basketCtr.tbcnt.tbcntOpen,
    .NodeLevel0>.CSSFacetNavModules.active {
        border-top: 1px solid #efefef;
    }

    .menu-icons-header>.icon-search {
        display: none !important;
    }
    .srchCtr.tbcnt .icon-search {
        right: 0;
        left: auto;
        width: auto;
        height: auto;
    }
}

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

    .masthead .fixed .container {
        padding-inline: 1rem 0.5rem;
    }

}

.navIcons{
    padding: 0 !important;
}