@charset "UTF-8";

.navigation {
    background: transparent;
}

.magic-box .magic-box-clear {
    background-color: #F6f6f6 !important;
}

@media (max-width: 992px) {
    .container {
        width: 100% !important;
    }
}

.navigation .level1 > .navigation-title > a, .navigation .level0 > .navigation-title > a {
    font-size: 18px;
    border-color: #89C6CC;
    border-style: solid;
    border-width: 0 0 2px 0;
    padding-right: 3px;
    margin-right: 5px;
}

div#navbarSupportedContent ul li.level1.item1 ul li.level2 div.color-swatch a img {
    border: 3px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

div#navbarSupportedContent ul li.level1.first ul li.level2.item5 {
    display: flex;
    flex-direction: column;
    height: 300px;
}

.navigation .level1 > .navigation-title > a:hover, .navigation .level0 > .navigation-title > a:hover {
    text-decoration: none;
}

.navigation a {
    color: #747474;
}

.lt-ie9 .navigation a, .lt-ie9 .navigation a span {
    color: #747474;
}

.navigation a:focus, .navigation a:hover {
    color: #747474;
}

.navigation li.submenu {
    margin-bottom: 0;
}

.navigation li > .navigation-title > a {
    padding: 3px 5px 3px 0;
    display: block;
    color: #747474;
    text-decoration: none;
}

.navigation li > ul a {
    font-size: 14px;
}

.navigation .submenu > ul {
    padding-left: 10px;
}

.navigation.navigation-fat {
    background: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: #d2d2d2;
}

    .navigation.navigation-fat a {
        text-decoration: none;
    }

    .navigation.navigation-fat nav > ul {
        list-style: none;
        padding: 10px 0;
        overflow: hidden;
    }

    .navigation.navigation-fat .rel-level1 {
        margin: 10px;
        padding: 0;
        display: inline-block;
        vertical-align: top;
    }

        .navigation.navigation-fat .rel-level1.submenu ul a {
            position: relative;
        }

            .navigation.navigation-fat .rel-level1.submenu ul a:before {
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                position: absolute;
                content: "";
                top: 50%;
                left: -9px;
                font-size: 10px;
            }

        .navigation.navigation-fat .rel-level1 > .navigation-title > a {
            border-top-width: 2px;
            border-top-style: solid;
            border-top-color: #89C6CC;
            border-bottom: 0;
            background: #f6f6f6;
            padding: 5px 10px;
            display: block;
            width: auto;
        }

            .navigation.navigation-fat .rel-level1 > .navigation-title > a:hover {
                border-color: #1b809e;
            }

        .navigation.navigation-fat .rel-level1 > ul {
            padding: 0;
        }

    .navigation.navigation-fat .rel-level2 {
        padding-left: 10px;
        display: block;
    }

.navigation.navigation-main .component-content > nav {
    position: relative;
}

    .navigation.navigation-main .component-content > nav ul:after {
        content: "";
        display: table;
        clear: both;
    }

.navigation.navigation-main .rel-level1 {
    float: left;
}

    .navigation.navigation-main .rel-level1 > .navigation-title > a {
        border-width: 2px 0 0 0;
        border-color: transparent;
    }

        .navigation.navigation-main .rel-level1 > .navigation-title > a:hover {
            border-color: #89C6CC;
        }

    .navigation.navigation-main .rel-level1.submenu > .navigation-title a {
        position: relative;
        padding-right: 15px;
    }

        .navigation.navigation-main .rel-level1.submenu > .navigation-title a:after {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 10px;
            content: "";
            position: absolute;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            top: 50%;
            right: 0;
        }

    .navigation.navigation-main .rel-level1 > ul {
        overflow: hidden;
        display: none;
        z-index: 10;
        position: absolute;
        top: 100%;
        background: #f6f6f6;
        margin-left: 0;
        margin-top: -2px;
        border-top: 2px solid #89C6CC;
        border-left: 1px solid #d2d2d2;
        border-bottom: 1px solid #d2d2d2;
    }

    .navigation.navigation-main .rel-level1.show > a + ul {
        display: block !important;
    }

    .navigation.navigation-main .rel-level1.show > ul {
        display: flex !important;
        min-width: 60px;
    }

    .navigation.navigation-main .rel-level1.active > .navigation-title > a:link, .navigation.navigation-main .rel-level1.active > .navigation-title > a:visited {
        color: #878787;
    }

    .navigation.navigation-main .rel-level1.active > span {
        display: flex !important;
        padding: 10px 20px;
        color: #fff;
    }

.navigation.navigation-main .rel-level2:hover, .navigation.navigation-main .rel-level2:focus {
    -webkit-transition: background .2s ease-in;
    transition: background .2s ease-in;
    background: #f6f6f6;
}

.navigation.navigation-main .rel-level2 div > a {
    display: block;
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}

    .navigation.navigation-main .rel-level2 div > a:hover, .navigation.navigation-main .rel-level2 div > a:focus {
        color: #c8102e;
    }

.navigation.navigation-main .rel-level2.submenu {
    box-sizing: border-box;
}

    .navigation.navigation-main .rel-level2.submenu.navigation-image {
        text-align: center;
    }

        .navigation.navigation-main .rel-level2.submenu.navigation-image > a, .navigation.navigation-main .rel-level2.submenu.navigation-image .field-navigationtext {
            text-align: left;
        }

.navigation.navigation-main.navigation-main-horizontal .submenu > ul {
    padding-left: 0;
}

.navigation.navigation-main.navigation-main-horizontal .rel-level1.show > a + ul {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.navigation.navigation-main.navigation-main-horizontal .rel-level1.show > ul {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.navigation.navigation-main.navigation-main-horizontal .rel-level1 > ul {
    width: 100%;
    clear: both;
    left: 0;
}

.navigation.navigation-main.navigation-main-horizontal .rel-level2 {
    float: left;
    padding: 10px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #d2d2d2;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 23%;
    flex-basis: 23%;
}

.navigation.navigation-main.navigation-main-vertical .rel-level1 > ul {
    padding-left: 0;
    width: auto;
    left: auto;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #d2d2d2;
}

    .navigation.navigation-main.navigation-main-vertical .rel-level1 > ul > li {
        padding: 5px 25px;
    }

.navigation.navigation-mobile .rel-level1 {
    cursor: pointer;
    margin: 0;
    background: #FFFFFF;
}

    .navigation.navigation-mobile .rel-level1 > ul {
        padding-left: 25px;
        display: none;
        background: #f6f6f6;
    }

        .navigation.navigation-mobile .rel-level1 > ul li {
            position: relative;
        }

    .navigation.navigation-mobile .rel-level1.submenu.active > .navigation-title:before {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: 0.25s;
        transition: 0.25s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        content: '\f068';
    }

    .navigation.navigation-mobile .rel-level1.submenu.active > ul {
        display: flex !important;
    }

    .navigation.navigation-mobile .rel-level1.submenu > .navigation-title {
        position: relative;
    }

        .navigation.navigation-mobile .rel-level1.submenu > .navigation-title:before {
            display: inline-block;
            font: normal normal normal 18px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\f067";
            float: right;
            font-size: 20px;
            top: 20px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
            -webkit-transition: 0.25s;
            transition: 0.25s;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }



.navigation.navigation-mobile .rel-level1 > .navigation-title {
    margin: 0;
}

        .navigation.navigation-mobile .rel-level1 > .navigation-title:last-child {
            border-bottom: none;
        }

    .navigation.navigation-mobile .rel-level1 .navigation-title {
        padding: 10px;
    }

        .navigation.navigation-mobile .rel-level1 .navigation-title > a {
            text-decoration: none;
            color: #747474;
            display: inline;
        }

.navigation.navigation-mobile .rel-level2 {
    display: list-item;
}

    .navigation.navigation-mobile .rel-level2 .navigation-title > a {
        font-weight: 500;
    }

    .navigation.navigation-mobile .rel-level2 ul {
        display: flex !important;
    }

.navigation.navigation-sidebar a {
    text-decoration: none;
}

.navigation.navigation-sidebar nav > ul .rel-level1 > .navigation-title {
    margin-bottom: 0;
}

    .navigation.navigation-sidebar nav > ul .rel-level1 > .navigation-title > a {
        padding: 5px 10px;
        display: block;
        position: relative;
        z-index: 1;
        margin-right: 0;
    }

.navigation.navigation-sidebar nav > ul .rel-level1 > ul {
    margin-left: 10px;
    margin-top: 5px;
}

.navigation.navigation-sidebar nav > ul .rel-level2 {
    display: block;
}

.navigation.sitemap-navigation .level2 a {
    position: relative;
    padding-left: 10px;
}

    .navigation.sitemap-navigation .level2 a:before {
        font-size: 14px;
        font-size: 1.4rem;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-transform: translateY(-50%) scale(1, -1);
        -ms-transform: translateY(-50%) scale(1, -1);
        transform: translateY(-50%) scale(1, -1);
        position: absolute;
        content: "";
        top: 50%;
        left: -8px;
    }

/* ---- Daltile Custom Styling ---- */
header {
    position: fixed;
    width: 100%;
    top: 0;
    background: white;
    z-index: 101;
    box-shadow: rgba(0,0,0,.5) 0 0 10px 0px;
    font-family: Geometria, Arial, Helvetica, sans-serif;

}

    header:before {
        border-top: 1px solid #000;
        width: 100%;
        content: "";
        margin-top: 75px;
        position: absolute;
    }

    header.off-top {
        transition: top 0.5s cubic-bezier(0, 0, 0, 1);
    }

main {
    margin-top: 142px;
}

nav {
    display: block;
}

.mobile-nav-toggle {
    display: none;
}

    .mobile-nav-toggle button {
        width: 35px;
        height: 25px;
        position: relative;
        margin: 10px auto;
        cursor: pointer;
    }

        .mobile-nav-toggle button span::before {
            content: '\f0c9';
            font: normal normal normal 30px/1 FontAwesome;
            position: absolute;
            top: -3px;
            left: 5px;
        }

        .mobile-nav-toggle button.open span::before {
            content: '\f00d';
        }

.mobile-nav-open {
    display: block;
    height: 100%;
    max-height: 65vh;
    overflow-x: hidden !important;
    margin-top: 55px !important;
   
}

/* Logo */
.navbar-brand {
    height: auto;
    padding: 21px 15px;
}

    .navbar-brand span.image-caption {
        display: none;
    }

    .navbar-brand a {
        display: flex;
    }

.mobile-navbar-brand {
    display: none;
}
/* Secondary Nav */
.secondary-nav-bar {
    text-align: right;
    padding-right: 15px;
}

    .secondary-nav-bar > .component-content {
        float: right;
        width: 100%;
    }

ul.userLoginSection {
    padding: 0;
    float: right;
    width: 100%;
    margin-bottom: 0;
}

    ul.userLoginSection li {
        display: inline-block;
        list-style: none;
        cursor: pointer;
        padding: 27px 11px 27px 36px;
        margin-left: -4px;
    }

        ul.userLoginSection li a:before {
            content: ' ';
            padding-left: 0;
            font: normal normal normal 20px/1 FontAwesome;
            padding-right: 10px;
            cursor: pointer;
            height: 20px;
            width: 20px;
            margin-left: -27px;
        }

.ProExchange::before {
    content: ' ';
    background-image: url("../images/icon_nav_proEx_black_20.svg");
    padding-left: 0;
    padding-right: 10px;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin-left: -27px;
    position: absolute;
}

.ProExchange:hover::before, ul.userLoginSection li.item4:hover a.ProExchange::before {
    background-image: url("../images/icon_nav_proEx_white_20.svg");
}

ul.userLoginSection li a.header-contact-us::before {
    position: absolute;
    background-image: url("../images/icon_nav_mail_black_20.svg");
}

ul.userLoginSection li a.header-contact-us:hover::before, ul.userLoginSection li.item0:hover a.header-contact-us::before {
    background-image: url("../images/icon_nav_mail_white_20.svg");
}

ul.userLoginSection li a.header-cart::before {
    position: absolute;
    background-image: url("../images/icon_nav_shopping_black_20.svg");
}

ul.userLoginSection li a.header-cart:hover::before, ul.userLoginSection li.item2:hover a.header-cart::before {
    background-image: url("../images/icon_nav_shopping_white_20.svg");
}

ul.userLoginSection li a.header-store-locator::before {
    position: absolute;
    background-image: url("../images/icon_nav_location_black_20.svg");
}

ul.userLoginSection li a.header-store-locator:hover::before, ul.userLoginSection li.item1:hover a.header-store-locator::before {
    background-image: url("../images/icon_nav_location_white_white_20.svg");
}

ul.userLoginSection li a.header-samples::before {
    position: absolute;
    background-image: url("../images/icon_nav_shopping_black_20.svg");
}

ul.userLoginSection li a.header-samples:hover::before, ul.userLoginSection li.item2:hover a.header-samples::before {
    background-image: url("../images/icon_nav_shopping_white_20.svg");
}

ul.userLoginSection li a.header-sign-in::before {
    position: absolute;
    background-image: url("../images/icon_nav_userProfile_black_20.svg");
}

ul.userLoginSection li a.header-sign-in:hover::before, ul.userLoginSection li.item3:hover a.header-sign-in::before {
    background-image: url("../images/icon_nav_userProfilewhite_white_20.svg");
}

ul.userLoginSection li a {
    padding: 0;
    color: #000000;
  
}

    ul.userLoginSection li a:hover {
        border-bottom: none;
        text-decoration: none;
    }


div#navbarSupportedContent ul li.level1.first ul li.item4 ul.clearfix {
    border-bottom: none;
}

.secondary-nav-image {
    margin-top: 18px;
    width: 20%;
    padding-left: 0px;
    padding-right: 25px;
}

    .secondary-nav-image .component-content {
        display: flex;
        margin-left: 15px;
    }

.secondary-nav-bar ul.userLoginSection li.last {
    border-right: none;
}
/* Hover of Secondary Nav List -.hover-expand */
ul.userLoginSection li.hover-expand {
    background-color: #000;
    position: relative;
}

    ul.userLoginSection li.hover-expand a:before {
        -webkit-text-stroke-width: 0;
        -webkit-text-stroke-color: white;
        color: #fff;
    }

    ul.userLoginSection li.hover-expand a {
        color: #fff;
    }

.secondary-nav-dropdown-box {
    display: none;
    position: absolute;
    right: 0;
    top: 75px;
    background-color: #000;
    padding: 20px;
    z-index: 400;
    width: 510px;
    max-width: 100vw;
}

    .secondary-nav-dropdown-box.active {
        display: flex;
    }

.unauthenticated-box {
    display: flex;
    width: 470px;
}

.new-user {
    display: inline-flex;
    max-width: 170px;
    text-align: center;
    padding: 42px 30px 42px 15px;
}

    .new-user a {
        text-align: left;
    }

ul li .secondary-nav-dropdown-box .unauthenticated-box .new-user a img {
    margin: 0 24px;
}

ul li .secondary-nav-dropdown-box .unauthenticated-box .new-user a:before {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
}

.new-user a span {
    font-size: 20px;
    font-weight: bold;
}

.login-box {
    display: inline-flex;
    max-width: 300px;
    border-left: solid 1px #fff;
    padding-left: 20px;
}

form.header-login {
    width: 100%;
    margin-bottom: 0;
}

.unauthenticated-box .login-box label[for="RememberMe"] {
    margin-top: 0px !important;
}

.unauthenticated-box .login-box form.header-login > label.control-label {
    color: white;
    float: left;
    margin: 0 0 15px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2.5px;
    line-height: 20px;
    padding: 0;
}

.unauthenticated-box .login-box form.header-login > input[type=text] {
    margin-bottom: 15px;
}

form.header-login input[type="email"], .header-login-form input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
}

form.header-login input[type="email"] {
    margin-top: 0;
}

form.header-login div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    form.header-login div input[type="checkbox"] {
        margin: 15px 0;
        height: 24px;
        width: 24px;
        border: 1px solid #FFFFFF;
        border-radius: 3px;
        box-shadow: inset 1px 1px 2px 0 #000000;
    }

        form.header-login div input[type="checkbox"]:checked {
            color: #fff;
            background-color: #AA0000;
        }

    form.header-login div label {
        display: inline;
        vertical-align: super;
        color: #fff;
        font-size: 12px;
        margin-left: 7px;
    }

    form.header-login div a {
        vertical-align: super;
        font-size: 13px;
        color: #fff;
        font-weight: bold;
    }

        form.header-login div a:before {
            display: none !important;
        }

form.header-login button {
    width: 100%;
    height: 45px;
    background: #fff;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
}

    form.header-login button:hover {
        color: #fff !important;
        background-color: #000;
    }

.authenticated-box {
    display: flex;
    width: 470px;
    flex-direction: column;
}

.user-info {
    width: 100%;
    text-align: center;
    border-bottom: solid 1px #fff;
    padding-bottom: 30px;
}

    .user-info img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 50%;
    }

    .user-info p {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }

        .user-info p span {
            font-size: 16px;
            font-weight: normal;
        }

.user-tools {
    width: 100%;
}

    .user-tools ul {
        text-align: center;
        display: flex;
        justify-content: center;
    }

        .user-tools ul li {
            width: 150px;
            padding: 50px 0 0 0 !important;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            border: none !important;
        }

            /*Hide accounts icons not ready*/
            .user-tools ul li:nth-child(-n+4) {
                display: none
            }

            .user-tools ul li a.user-tools-icons {
                padding-left: 0 !important;
                font-size: 20px;
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
            }

            .user-tools ul li a::before {
                margin: 0;
                padding: 0;
            }

.secondary-nav-language {
    display: none;
    border: none;
    margin-top: 18px;
}

    .secondary-nav-language div div a {
        width: auto;
    }

.secondary-nav-search-button {
    padding: 0px !Important;
    width: 10%;
}

    .secondary-nav-search-button div button.search-box-button {
        content: none;
        width: 75px;
        height: 74px;
        background: #E9E9E9 url("/-/media/Project/DalTile Sites/Daltile/Common/Header/search-glass") no-repeat center !important;
        border: none;
        text-indent: -99999px;
    }

        .secondary-nav-search-button div button.search-box-button:active {
            background-color: #AA0000;
        }

.hide-site {
    opacity: .5;
    transition: opacity 300ms ease-in-out;
    background-color: #000;
}

/* Primary Nav */
.nav-bar-styling a {
    color: #000000;
}

    .nav-bar-styling a:hover {
        color: #c8102e;
    }

.nav-bar-styling div.navigation-subtitle, .nav-bar-styling span.navigation-subtitle {
    color: #000000;
}

.nav-bar-styling.navigation-main .rel-level1.submenu > .navigation-title a {
    padding: 0 0 15px 0;
    color: #000000;
}

    .nav-bar-styling.navigation-main .rel-level1.submenu > .navigation-title a:after {
        content: '\f067';
        font: normal normal normal 20px/1 FontAwesome;
        display: none;
    }

.nav-bar-styling.navigation-main .rel-level1.submenu.show .navigation-title > a:after {
    content: '\f068';
}

.nav-bar-styling.navigation-main .rel-level1 > .navigation-title > a {
    border-bottom: solid 2px #ffffff;
    border-top: none;
}

    .nav-bar-styling.navigation-main .rel-level1 > .navigation-title > a:hover {
        border-bottom: solid 2px #c8102e;
        border-top: none;
    }

.nav-bar-styling.navigation-main .rel-level1.show .navigation-title > a {
    border-bottom: #c8102e;
    border-top: none;
    color: #c8102e;
    border-bottom-width: thick;
    border-bottom-style: solid;
}

.nav-bar-styling div nav ul li.level1 div.navigation-title {
    padding: 20px 40px 2px 0;
}

.nav-bar-styling div nav ul li.level1 ul a {
    text-align: left;
}

.navigation.navigation-main .rel-level1 > ul {
    border-top: none;
    background: none;
}

div#navbarSupportedContent {
    position: relative;
}

    div#navbarSupportedContent ul li.level1 > ul {
        width: 100%;
        left: 0;
        height: 550px;
        border: none;
        background: #ffffff;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    div#navbarSupportedContent ul li.level1.first ul li.level2.last {
        max-height: 170px;
        min-width: 317px;
        height: 300px;
    }

    div#navbarSupportedContent ul li.level1.item3 ul {
        max-height: 300px;
        /*width: 1170px;*/
        border-top: 1px solid black;
    }

  

    div#navbarSupportedContent ul li.level1.item2 ul {
        max-height: 300px;
        border-top: 1px solid black;
    }

    div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
        padding: 6px 8px 6px 3px;
    }

    div#navbarSupportedContent li.level2.item6 ul li.level3 div {
        border: 1px solid #979797;
        height: 30px;
        width: 58px;
        border-radius: 13.5px;
        display: flex;
        justify-content: center;
    }

    div#navbarSupportedContent ul li.level2.item5 ul li.level3 {
        border-left: none;
        width: 55px;
        padding-bottom: 10px;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        div#navbarSupportedContent ul li.level2.item5 ul li.level3 div div a img {
            border: 3px solid #fff;
            border-radius: 50%;
            width: 32px;
            height: 32px;
        }

        div#navbarSupportedContent ul li.level2.item5 ul li.level3 div {
            display: flex;
            align-items: center;
        }

    div #navbarSupportedContent ul li.level2 > ul.clearfix {
        height: 100%;
    }

    div#navbarSupportedContent ul li.level3 > ul.clearfix, div#navbarSupportedContent ul li.level4 > ul.clearfix {
        height: auto;
    }

    div#navbarSupportedContent ul li.level1.item1 ul {
        flex-wrap: wrap;
        /*padding-right: 47%;*/
        max-width: 1170px;
    }

    div#navbarSupportedContent ul li.level1 ul li.level2 {
        display: inline-block;
       
    }

        div#navbarSupportedContent ul li.level1 ul li.level2 ul {
            width: 100%;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2 div {
            display: block;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 .item2 {
            margin-left: 3px;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 ul li.level4 div a:before {
            content: "- ";
            margin-left: 10px;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 ul li.level4 div a {
            font-size: 12px;
        }

    div#navbarSupportedContent ul li.item0 ul, div#navbarSupportedContent ul li.item1 ul {
        flex-direction: column;
        flex-wrap: wrap;
    }

    div#navbarSupportedContent ul li.item0.show ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 1170px;
        border-top: 1px solid black;
    }

    div#navbarSupportedContent ul li.item1.show ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: 300px;
        border-top: 1px solid black;
    }

    /* Image Space in Nav */
    div#navbarSupportedContent ul li.level1.item0 ul::after {
        width: 230px;
        height: 400px;
    }

    div#navbarSupportedContent ul li.level1.item0 ul li.level2 ul::after {
        display: none;
    }

    div#navbarSupportedContent ul li.level1.item1 ul::after {
        width: 530px;
    }
/* Images in Nav */
.nav-bar-styling div nav ul li.level1 div.field-topimage, .nav-bar-styling div nav ul li.level1 div.field-bottomimage {
    position: absolute;
    right: 30px;
    top: 1028px;
    z-index: 11;
    display: none;
}

.nav-bar-styling div nav ul li.level1.show div.field-topimage, .nav-bar-styling div nav ul li.level1.show div.field-bottomimage {
    display: inline;
    top: 90px;
    right: 30px;
}

.nav-bar-styling div nav ul li.level1.show div.field-bottomimage {
    top: 290px;
}
/* Images in Nav per item*/


div.field-topimage:empty, div.field-bottomimage:empty {
    display: none;
}

/* Color Swatches */
div.color-swatch {
    width: 34px;
    height: 34px;
    border: 1px solid #696969;
    border-radius: 50%;
}

.navigation.navigation-main .rel-level1.last div#navbarSupportedContent ul li.level1 ul li.level2 {
    width: 19% !important;
    max-width: unset !important;
    min-width: unset !important;
}

    .navigation.navigation-main .rel-level1.last div#navbarSupportedContent ul li.level1 ul li.level2.first {
        max-width: unset !important;
        min-width: unset !important;
    }

div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2.first {
    width: 205px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  
}

    div#navbarSupportedContent ul li.level1.item1 ul li.level2 div {
        text-align: left;
        width: 100%;
    }

        div#navbarSupportedContent ul li.level1.item1 ul li.level2 div.color-swatch a img {
            border: 3px solid #fff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
        }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2 .field-navigationtitle a {
        width: 100%;
    }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2 div.field-colorroom {
        position: absolute;
        z-index: 12;
        display: none;
    }
    /*Hover action for Color block */
    div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.color-swatch {
        border: 2px solid #000000;
        border-radius: 50%;
    }

        div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.color-swatch a img {
            width: 38px;
            height: 38px;
        }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.field-colorroom {
        display: none;
        right: 20px;
        top: 31px;
        width: 461px;
        height: 335px;
        border: 2px solid #2E636C;
        background-color: #5DC7D8;
    }

        div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.field-colorroom img {
            width: 100%;
            height: auto;
        }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover .nav-bar-styling div nav ul li.level1 div.field-topimage {
        display: none;
    }

div#navbarSupportedContent ul li.level1 ul li.level2 div.last {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #D8D8D8;
}

.navigation.navigation-main .rel-level2:hover {
    background: #ffffff;
}

div#navbarSupportedContent ul li.level1 ul li.level2 span.navigation-subtitle, div#navbarSupportedContent ul li.level1 ul li.level2 div a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    text-align: left;
}


div#navbarSupportedContent ul li.level1.first ul li.level2 {
    padding-left: 30px;
    border-left: 1px solid #D8D8D8;
    max-width: 250px;
    min-width: 250px;
}

div#navbarSupportedContent ul li.level1.item0 ul li.level2.first {
    border-left: none;
    width: auto;
    max-width: 45%;
    min-width: 20%;
    height: 100%;
    padding-left: 35px;
}



div#navbarSupportedContent ul li.level1 ul li.level2 ul {
    display: block;
    padding: 0;
    border-top: none;
}

div#navbarSupportedContent ul li.level1.item0 li.level2 {
    padding-left: 69px;
}

div#navbarSupportedContent ul li.level1.first ul li.level2 ul.clearfix {
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 20px;
    margin-bottom: 10px;
    min-height: unset;
    display: flex;
}

div#navbarSupportedContent ul li.level1.first ul li.level2.item1 ul.clearfix, div#navbarSupportedContent ul li.level1.first ul li.level2.item2 ul.clearfix,
div#navbarSupportedContent ul li.level1.first ul li.level2.item3 ul.clearfix, div#navbarSupportedContent ul li.level1.first ul li.level2.item4 ul.clearfix {
    height: inherit;
}

div#navbarSupportedContent ul li.level1 ul li.level2.first ul.clearfix {
    padding-bottom: 0;
    border-bottom: none;
}

div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 div a {
    font-weight: normal;
    text-transform: none;
    font-size: 14px;
    padding-top: 5px;
}

div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 ul.clearfix {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

div#navbarSupportedContent ul li.level1 ul li.level2 ul li.level3 span.navigation-subtitle {
    font-weight: normal;
    text-transform: none;
    font-size: 14px;
    padding-top: 5px;
    display: block;
}

div#navbarSupportedContent ul li.level1.item5 ul li.level2 {
    width: 250px;
    padding-right: 50px;
}


.header-content div nav {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    height: 45px;
    width: calc(100% - 193px - 4.96552%);
    padding: 20px 0;
}

    .header-content div nav a {
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        max-width: inherit;
        text-decoration: none;
        margin-right: 20px;
        font-size: 14px;
    }

        .header-content div nav a svg {
            width: 34px;
            height: 20px;
        }

    .header-content div nav .component-content, .header-content div nav ul {
        display: inline-flex;
    }

@media screen and (min-width: 769px) {
    .header-content div nav .js-nav__main-open, .header-content div nav .js-nav__main-close {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    .nav-bar-styling div nav ul li.level1 div.navigation-title {
        padding: 20px 15px 2px 0;
    }

   
    .secondary-nav-image {
        margin-top: 18px;
        width: 17%;
        padding-left: 0px;
        padding-right: 0;
    }
   



    div#navbarSupportedContent ul li.level1.first ul li.level2 {
        padding: 0 15px;
        border-left: 1px solid #D8D8D8;
        max-width: 250px;
        min-width: 230px;
    }

    .nav-bar-styling div nav ul li.level1.item0 div.field-topimage, .nav-bar-styling div nav ul li.level1.item0 div.field-bottomimage {
        display: none;
    }

    .nav-bar-styling div nav ul li.level1 div.field-topimage, .nav-bar-styling div nav ul li.level1 div.field-bottomimage {
        position: absolute;
        right: 15px;
        z-index: 11;
        display: none;
    }

        .nav-bar-styling div nav ul li.level1 div.field-topimage img, .nav-bar-styling div nav ul li.level1 div.field-bottomimage img {
            height: auto !important;
        }

    .nav-bar-styling div nav ul li.level1.item1 div.field-topimage img {
        height: auto !important;
    }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2.first {
        /*width: 100px;*/
    }

    .nav-bar-styling div nav ul li.level1.item1.show div.field-topimage {
        top: 85px;
        right: -20px;
    }
}

@media only screen and (max-width: 992px) {
    main {
        margin-top: 117px;
    }

    header:before {
        margin-top: 55px;
    }

    .navbar-brand {
        padding: 11px 15px;
    }

    ul.userLoginSection li {
        padding: 17px 9px 17px 35px;
    }

    .secondary-nav-dropdown-box {
        top: 55px;
    }

    .navigation .level1 > .navigation-title > a, .navigation .level0 > .navigation-title > a {
        font-size: 15px;
    }

    .nav-bar-styling div nav ul li.level1 div.navigation-title {
        padding: 20px 0px 2px 0;
    }

    .search-container input[type=text] {
        font-size: 16px !important;
        padding: 6px 9px 6px 9px;
        margin: 12px 0;
        width: 75px;
    }

    .searching {
        width: 275px !important;
    }

    .search-container .clear-button {
        font-size: 29px !important;
        margin: 8.5px 12px;
    }

    .search-container button[type=submit] {
        font-size: 38px !important;
        margin: 0 0;
    }

    .secondary-nav-image {
        margin-top: 12px;
        width: 15%;
        padding-left: 0px;
        padding-right: 1px;
    }

        .secondary-nav-image div a img {
            max-width: 95%;
        }

    div#navbarSupportedContent ul li.level1.item0 ul li.level2.first {
        min-width: 300px;
    }

    .nav-bar-styling div nav ul li.level1.item0 div.field-topimage, .nav-bar-styling div nav ul li.level1.item0 div.field-bottomimage {
        display: none;
    }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.field-colorroom {
        right: 20px;
        top: 45px;
        width: 361px;
        height: 300px;
    }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2.first {
        width: 97px;
        padding-bottom: 0;
    }

  

    .navigation.navigation-main.navigation-main-vertical .rel-level1 > ul > li {
        padding: 0 7px;
    }

    div#navbarSupportedContent ul li.level1.item0 ul li.level2.first {
        min-width: 285px;
    }

    div#navbarSupportedContent ul li.level1.first ul li.level2 {
        padding: 0 7px;
        border-left: 1px solid #D8D8D8;
        max-width: 235px;
        min-width: 230px;
    }

    .nav-bar-styling div nav ul li.level1.item1.show div.field-topimage {
        top: 105px;
        right: -100px;
    }

    .nav-bar-styling div nav ul li.level1.item1 div.field-topimage img {
        height: auto !important;
        width: 335px !important;
    }

    .nav-bar-styling div nav ul li.level1.item4 div.field-topimage img {
        height: auto !important;
        width: 210px !important;
    }

    .nav-bar-styling div nav ul li.level1 div.field-topimage img, .nav-bar-styling div nav ul li.level1 div.field-bottomimage img {
        height: auto !important;
        width: 250px !important;
    }

    .nav-bar-styling div nav ul li.level1.show div.field-topimage {
        top: 90px;
        right: 15px;
    }

    .nav-bar-styling div nav ul li.level1.show div.field-bottomimage {
        top: 290px;
        right: 15px;
    }
}

@media screen and (max-width: 1024px) {
    main {
        margin-top: 103px;
    }

    header {
        position: fixed;
    }

        header:before {
            border-color: #e5e5e5;
        }

    .mobile-nav-toggle {
        display: inline-block;
        float: left;
        padding: 5px 5px;
    }

        .mobile-nav-toggle button {
            background: transparent;
            border: none;
        }

            .mobile-nav-toggle button span {
                color: black;
                font-size: 28px;
            }

    .navigation-mobile {
        margin-top: 1px;
    }

    nav {
        display: none;
    }


    .navbar-brand {
        display: none;
    }

    .mobile-navbar-brand {
        display: none;
        padding: 4px 0px;
        float: left;
        display: inline-block;
    }

        .mobile-navbar-brand a {
            display: flex;
        }

        .mobile-navbar-brand img {
            width: 45px;
            height: 45px;
        }

    .mobile-nav-open {
        display: block;
        height: 100%;
        max-height: 65vh;
        overflow: hidden;
        margin-top: 70px !important;
    }

    .mobile-nav-toggle {
        display: inline-block;
        float: left;
        padding: 5px 5px;
    }

        .mobile-nav-toggle button {
            background: transparent;
            border: none;
        }

            .mobile-nav-toggle button span {
                color: black;
                font-size: 28px;
            }

    .navigation-mobile {
        margin-top: 1px;
    }

    .navigation.navigation-main .rel-level1 {
        float: left;
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        cursor: pointer;
    }

  

    .nav-bar-styling a:hover {
        color: #747474;
    }

    .nav-bar-styling.navigation-main .rel-level1 > .navigation-title > a:hover {
        border: none;
        color: #747474;
    }

    .nav-bar-styling.navigation-main .rel-level1.submenu > .navigation-title a {
        padding: 0px 0px 4px 0px;
        color: #747474;
        border: none;
    }

    .nav-bar-styling.navigation-main .rel-level1 > .navigation-title > a {
        border: none;
        color: #747474;
    }

    div#navbarSupportedContent ul li.item0 ul, div#navbarSupportedContent ul li.item1 ul {
        flex-direction: column;
        flex-wrap: nowrap;
        display: flex;
        position: relative;
        z-index: 20;
        padding: 15px 15px;
        border: none;
        background: #ddd;
        max-height: 100%;
        /*max-width: 100% !important;
        width: 100%;*/
    }

 

    .nav-bar-styling .level1 {
        margin-left: 0;
    }

    ul li.level1.first ul li.level2 {
        padding: 0 10px;
        border-left: none;
        max-width: 100% !important;
        min-width: unset;
    }

    div#navbarSupportedContent ul li.level1.first ul li.level2 ul.clearfix {
        border: none;
        padding-bottom: 0;
        margin-bottom: 10px;
        min-height: 100%;
        background: transparent;
    }

    div#navbarSupportedContent ul li.level1.item0 ul::after {
        display: none;
    }

    .navigation.navigation-main .rel-level2:hover {
        background: transparent;
    }

    /* Colors mobile nav */
    div#navbarSupportedContent ul li.level1.item1 ul li.level2:hover div.field-colorroom {
        display: none;
    }

    div#navbarSupportedContent ul li.item1.rel-level1 ul, div#navbarSupportedContent ul li.item1 ul {
        max-height: unset;
        /*max-width: 100% !important;
        width: 100%;*/
        position: relative;
        padding: 10px 0;
        border: none;
        background: #f5f5f5;
        flex-direction:column;
        flex-wrap: wrap;
        justify-content: center;
        line-height:2;
    }

    div#navbarSupportedContent ul li.level1.first ul li.level2.last {
        display: flex;
        flex-direction: column;
        
    }

        div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
            padding: 6px 8px 0px 3px;
        }

    div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2.first {
        width: 25%;
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100% !important;
    }

    div#navbarSupportedContent ul li.level1 ul {
        flex-direction: column;
        flex-wrap: nowrap;
        display: none;
        position: relative;
        z-index: 20;
        
        border: none;
        background: #f9f9f9;
        max-height: 100%;
    }

        div#navbarSupportedContent ul li.level1 ul li.level2 ul {
            display: block;
            padding: 0;
            border-top: none;
            min-height: 100%;
            margin-bottom: 10px;
            background: transparent;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2.first {
            max-width: 100% !important;
        }

        div#navbarSupportedContent ul li.level1 ul li.level2 {
            max-width: 100% !important;
            border-left: none;
        }

    div#navbarSupportedContent ul li.level1.item3 ul {
        overflow-y: scroll;
    }

    div#navbarSupportedContent ul li.level1.item2 ul {
       overflow-y:scroll;

    }

    div#navbarSupportedContent ul li.level1.item5 ul li.level2 {
        width: auto;
        padding-right: 0;
    }

  
 

    div#navbarSupportedContent ul li.level1.first ul li.level2 {
        border-left: none;
    }

    ul.userLoginSection li {
        border-right: 1px solid #e5e5e5;
        padding: 20px 10px 35px 44px;
        font-size: 0;
    }

    .authenticated-box {
        width: 400px;
    }

    .unauthenticated-box {
        flex-direction: column;
    }

    .new-user {
        display: inline-flex;
        text-align: center;
        justify-content: center;
        padding: 0 0 10px;
        border-bottom: 1px solid #fff;
        max-width: 100%;
    }

    ul li .secondary-nav-dropdown-box .unauthenticated-box .new-user a {
        font-size: 12px;
    }

        ul li .secondary-nav-dropdown-box .unauthenticated-box .new-user a:before {
            font-size: 62px;
            padding-left: 15px;
        }

        ul li .secondary-nav-dropdown-box .unauthenticated-box .new-user a img {
            margin: 0 55px;
        }

    .new-user a span {
        font-size: 15px;
        margin: 0 45px;
    }

    .login-box {
        display: inline-flex;
        max-width: 100%;
        padding-left: 5px;
        padding: 10px 10px 0;
        border: none;
    }

    form.header-login button {
        height: 40px;
        border-radius: 8px;
        font-size: 17px;
    }

    .secondary-nav-dropdown-box {
        right: -55px;
        width: 390px;
    }

    form.header-login div label {
        display: inline;
        color: #fff;
        vertical-align: unset;
        font-size: 12px;
        margin-left: 5px;
    }

    form.header-login div a {
        vertical-align: unset;
        font-size: 12px;
    }

    .navigation.navigation-main .rel-level2 div > a:hover, .navigation.navigation-main .rel-level2 div > a:focus {
        color: #000;
    }

    .navigation .level1 > .navigation-title > a {
        margin-right: 0;
    }

    .nav-bar-styling.navigation-main .rel-level1.submenu > .navigation-title a:after {
        display: block;
    }

    .nav-bar-styling div nav ul li.level1.item1 div.field-topimage {
        display: none;
    }

    .nav-bar-styling div nav ul li.level1.show div.field-topimage {
        display: none;
    }

    div#navbarSupportedContent ul li.level1 > ul {
        height: 100%;
    }
}

@media only screen and (max-width: 500px) {
    header:before {
        margin-top: 45px;
    }

    .mobile-nav-toggle button {
        width: 25px;
        height: 20px;
        margin: 8px auto 0;
    }

    div#navbarSupportedContent ul li.level1 > ul{
        height:100%;
    
        }
    .mobile-navbar-brand {
        padding: 5px 0px 0;
    }

        .mobile-navbar-brand img {
            width: 35px;
            height: 35px;
        }

    ul.userLoginSection li {
        padding: 15px 4px 30px 40px;
    }

    .mobile-nav-toggle button span::before {
        font: normal normal normal 25px/1 FontAwesome;
        top: -2px;
        left: 2px;
    }

    main {
        margin-top: 93px;
    }

    .secondary-nav-dropdown-box {
        position: fixed;
        top: 44px;
        padding: 20px 5px;
        right: 0;
        width: 100vw;
    }

    .unauthenticated-box {
        width: 100%;
    }

    .user-tools ul li {
        padding: 20px 0 0 0 !important;
    }
}

/* Language-selector */
.language-selector {
    float: right;
    margin: 18px 55px 18px 0;
    color: #000;
    border-left: 1px solid #000;
    display: none;
}

    .language-selector .language-selector-select-item > a {
        padding-right: 15px;
        color: #000;
    }



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

    .language-selector {
        padding: 12px 0px;
        width: 29px;
    }
    div#navbarSupportedContent ul li.level1 > ul{
        width:113%;
    }
}

@media only screen and (max-width: 768px) {
    .language-selector {
        display: none;
    }
}

@media (max-width:429px) {
    ul.userLoginSection {
        display: flex;
        justify-content: center;
        padding-left: 60px;
    }
}

@media screen and (max-width: 768px) {
    div#navbarSupportedContent ul li.level1.item2 ul {
        height: 100%;
        padding-left: 19px;
        background-color: #f5f5f5;
    }

    .mobile-nav-open {
        margin-top: 0px;
    }
}

@media (max-width: 415px) {
    ul.userLoginSection {
        display: flex;
        justify-content: center;
        padding-left: 100px;
    }
}

@media screen and (max-width: 768px) {
    div#navbarSupportedContent ul li.level1.item3 ul {
        height: 100%;
        padding-left: 19px;
        background-color: #f5f5f5;
    }
}



@media screen and (max-width:320px) {
    ul.userLoginSection {
        padding-left: 8px;
    }
}

@media (max-width:415px and 713px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2.last {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

        div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
            padding: 6px 8px 6px 3px;
        }
}

@media (max-width:375px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2 {
        padding-left: 34px;
    }

    div#navbarSupportedContent ul li.level1.first ul li.item5 ul.clearfix {
        padding-left: 33px;
    }

    div#navbarSupportedContent ul li.level1.first ul li.item6 ul.clearfix {
        padding-left: 15px;
    }

    div#navbarSupportedContent ul li.level1 ul li.level2 span.navigation-subtitle, div#navbarSupportedContent ul li.level1 ul li.level2 div a {
        font-size: 16px;
    }
}

@media screen and (device-width: 360px) {
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 {
        width: 100px !important;
        margin-left: -47px;
    }
}

@media screen and (device-width: 375px) {
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 {
        width: 100px !important;
        margin-left: -29px;
    }
}

@media screen and (device-width: 360px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
        padding: 5px 9px 10px 16px !important;
        margin-left: -32px;
        width: 96px;
    }
}

@media screen and (device-width: 375px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
        padding: 5px 9px 10px 16px !important;
        margin-left: -32px;
        width: 96px;
    }
}


/*Navigation Ipadpro*/

@media screen and (max-width: 1024px) {
    div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2.first {
        /*padding: 0px 0px 0px 4px;*/
        /*padding-left:4px !important;*/
        margin-left:-26px;
    }
        div#navbarSupportedContent ul li.level1.item1 ul li.level2.item0{
            /*padding-left:4px !important;*/
        }
    div#navbarSupportedContent ul li.level1.item3 ul{
        border-top:none;
    }
    div#navbarSupportedContent ul li.level1.item2 ul{
        border-top:none;
    }
    div#navbarSupportedContent ul li.item0.show ul{
        border-top:none;
    }

}

@media screen and (max-width:768px){
    .mobile-nav-open{
        width: 109%;
    }
   
}

 






/*Color swatches mobile Iphone*/

@media (max-width:415px){
    div#navbarSupportedContent ul li.level2.item5 ul li.level3{
        width:47px;
        padding-top:22px;
        height:95px;
    }
    div.color-swatch{
        width:47px;
        height:48px;
    }
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 div{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    div#navbarSupportedContent ul li.level1.first ul li.level2.last{
        margin-top:43px;
    }
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 div div a img{
        width:45px;
        height:45px;
    }
}
@media screen and (device-width: 375px) {
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 {
        width: 100px !important;
        /*margin-left: -45px;*/
    }
}

@media screen and (device-width: 360px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
        padding: 5px 9px 10px 16px !important;
        margin-left: -32px;
        width: 96px;
    }
}

@media screen and (device-width: 375px) {
    div#navbarSupportedContent ul li.level1.first ul li.level2.last ul li {
        padding: 5px 9px 10px 16px !important;
        margin-left: -32px;
        width: 96px;
    }
}


div#navbarSupportedContent ul li.level1 ul li.level2{
    border-left:1px solid #d8d8d8;
    width:100%;
}
/*Adding Overlay Class*/
.navoverlay {
    position: absolute;
    z-index: 4;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.70);
    -webkit-transition: width 2s;
    transition: width 2s;
    display: none;
    top: 100px;
}

navigation-title field-navigationtitle:hover + navoverlay {
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-transition: width 2s;
    transition: width 2s;
}

/*Adding border to the navigation*/


div#navbarSupportedContent ul li.level1.first ul li.level2.item2 ul.clearfix {
    border: none;
}
div#navbarSupportedContent ul li.level1.first ul li.level2.item4 ul.clearfix{
    border:none;
}
div#navbarSupportedContent ul li.level1.first ul li.level2.item6 ul.clearfix{
    border:none;
   
}
div#navbarSupportedContent ul li.level1.first ul li.level2.item5 ul.clearfix{
    padding-top:0px;
    margin-left:-12px;
    margin-bottom:27px;
}



/*Navopen*/
@media (max-width:1024px){
    .mobile-nav-open {
        width: 100%;
    }
    div#navbarSupportedContent ul li.level1.item0 ul li.level2 {
        padding-left:0px !important;
        line-height:2;
    }
    div#navbarSupportedContent ul li.level1.item2 ul{
        width:100%;
        padding-left:0px;
    }
    div#navbarSupportedContent ul li.level1.item3 ul{
        width:100%;
        height:100%;
        padding-left:0px;
    }
   
    .navigation-title{
        padding:0px;
    }
    div#navbarSupportedContent ul li.level1.item1 ul li.level2, div#navbarSupportedContent ul li.level1.item1 ul li.level2{
        margin-left: 0px !important;
        width:100%;
    }
    div#navbarSupportedContent ul li.level1 ul li.level2 {
        margin-left: 0px !important;
        width: 100%;
        line-height: 2;
           }
    div#navbarSupportedContent ul li.level1 ul li.level2 {
        border-left: none;
    }
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 div div a img {
        border: 1px solid #000;
        border-radius: 50%;
        width: 51px;
        height: 52px;
        /* text-align: center; */
        /* line-height: 0; */
    }
    div#navbarSupportedContent ul li.level1.first ul li.level2.item5 ul.clearfix {
        padding-top: 0px;
        margin-left: -12px;
        margin-bottom: 27px;
        
    }
    div#navbarSupportedContent ul li.level2.item5 ul li.level3 div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    div#navbarSupportedContent ul li.level1.first ul li.level2.item5 ul.clearfix{
        /*margin-left:6px;*/
    }
    div#navbarSupportedContent ul li.level1.first ul li.level2.item5{
        height:385px;
    }
}


@media (max-width:1200px) {
    div#navbarSupportedContent ul li.level1 ul li.level2 {

    }
}
div#navbarSupportedContent ul li.level1.first ul li.level2.item4 {
    min-height: 320px;
}