/* TOP MENU */
.InnerTopMenuWrapper { }
    .InnerTopMenuWrapper nav { }
    .InnerTopMenuWrapper .Pages { float: left; }
    .InnerTopMenuWrapper .Shop { float: right; }

        
    .InnerTopMenuWrapper nav ul li { float: left; }
        .InnerTopMenuWrapper nav ul li:last-child { border-right: 0px; }
        .InnerTopMenuWrapper nav ul li:first-child { border-left: 0px; }
        .InnerTopMenuWrapper nav ul li a { text-decoration: none; color:#34495e; }
        .InnerTopMenuWrapper nav ul li a:before {float:left;}
            .InnerTopMenuWrapper nav ul li a:hover { color: #222; }
            .InnerTopMenuWrapper nav ul li a:focus { color: #ffd100; }

    .InnerTopMenuWrapper .Pages ul li  { padding-right: 10px; margin-right: 10px; border-right: 1px solid #e0e0e0; }
    .InnerTopMenuWrapper .Shop ul li { padding-left: 10px; margin-left: 10px; border-left: 1px solid #e0e0e0; }        
            
    .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper { cursor: pointer; position: relative; }
        .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper:after { content: '\f0d7'; font-family: 'FontAwesome'; padding-left: 2px; }

        .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu { display: none; position: absolute; background: #f9f9f9; border: 1px solid #e0e0e0; z-index: 99; right: 0; top: 28px; border-top: 0; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu.Selected { display: block; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li { float: left; width: 100%; border: 0px; margin-left: 0px; box-sizing: border-box; padding-left: 0; }
                .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a { height: 36px; line-height: 36px; display: block; padding-left: 10px; white-space: nowrap; padding-right: 10px; }
                    .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a:hover { background-color: #fff; }
                    .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a:before {float:left;}

/* MAIN CATEGORIES */
.Categories {float:left; width:100%; }
.Categories:focus {background-color:#ffd100;}
.Categories ul.MainCategories { float: left; width: 100%; font-size: 20px; color: #fff; font-family: 'Basic'; letter-spacing: 1px; font-weight: 400;  }
    .Categories ul.MainCategories li.CategoryItem { float: left; position: relative; border-left: 1px solid #000; text-transform: uppercase; transition: background-color 300ms linear; height:60px; }
        .Categories ul.MainCategories li:last-child { border-right: 1px solid #000; }
                .Categories ul.MainCategories li.CategoryItem a.Root, .Categories ul.MainCategories li.CategoryItem span.Root { color:#fff; float:left; padding: 20px; padding-left:40px; padding-right:40px; cursor: pointer; text-decoration:none;    }
        .Categories ul.MainCategories li.CategoryItem a.Root:focus, .Categories ul.MainCategories li.CategoryItem span.Root:focus { background-color: #34698e;  }
        .Categories ul.MainCategories li.CategoryItem a.Focus, .Categories ul.MainCategories li.CategoryItem span.Focus { background-color: #34698e;  }
        .Categories ul.MainCategories li:hover { background-color: #34698e; }
        .Categories ul.MainCategories li ul { position: absolute; display: none; top: 60px; margin: 0px; margin-left: 0px; margin-top: 0px; float: left; min-width: 100%; padding: 0px; margin-top: 8px; z-index: 9999; border: 1px solid #ccc; border-top: 1px solid #34495e; padding-top: 3px; padding-bottom: 3px; background-color: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,0.3), 1px 1px 3px rgba(0,0,0,0.3); }
            .Categories ul.MainCategories li ul li { float: left; clear: left; background: none; background: #fff; padding: 0px; width: 100%; text-transform: capitalize; font-size: 14px; border: 0px; border-bottom: 1px solid #ddd; }
                .Categories ul.MainCategories li ul li:first-child { border-top: 0; }
            .Categories ul.MainCategories li ul:before { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #304457; position: absolute; top: -8px; left: 36px; }
            .Categories ul.MainCategories li ul li:hover { background-color: #eee; }
            .Categories ul.MainCategories li ul li:last-child { border: 0px; }

            .Categories ul.MainCategories li ul li a { float: left; color: #000; padding: 8px; font-family: 'Open Sans'; white-space: nowrap; box-sizing: border-box; width: 100%; }
            .Categories ul.MainCategories li ul li a:hover {text-decoration:none;  }
            .Categories ul.MainCategories li ul li a:focus {text-decoration:underline;  }

/* MOBILE ICONS */
.MobileIcons { float: left; width: 100%; display: none; }
.Hide { opacity: 0; visibility: hidden; }
.MobileIcons li { width: 20%; border: 0px !important; box-sizing: border-box; float: left; }
.MobileIcons .MobileIcon { font-size: 32px; float: left; color: #fff; padding: 0px; padding-top: 20px; padding-bottom: 20px; width: 100%; text-align: center; border-right: 1px solid #000; box-sizing: border-box; cursor: pointer; }
    .MobileIcons .MobileIcon:hover { background-color: #304457; }
.MobileIcons li:first-child .MobileIcon { border-left: 1px solid #000; }
.MobileIcons .CategoryBars:before { content: '\f0c9'; font-family: 'FontAwesome'; }
.MobileIcons .Search:before { content: '\f002'; font-family: 'FontAwesome'; }
.MobileIcons .Cart:before { content: '\f07a'; font-family: 'FontAwesome'; }
.MobileIcons .Cart { position: relative; color: #fff; }
    .MobileIcons .Cart:hover { text-decoration: none; }
    .MobileIcons .Cart .Count { font-size: 12px; position: absolute; left: 47px; top: 13px; background-color: #fff; color: #444; font-weight: 700; border: 1px solid #f8484a; width: 20px; text-align: center; height: 20px; border-radius: 50%; padding-top: 2px; padding-right: 1px; padding-left: 1px; box-sizing: border-box; }
.MobileIcons .WebPages:before { content: '\f015'; font-family: 'FontAwesome'; }
.MobileIcons .User { color: #fff; }
    .MobileIcons .User:hover { text-decoration: none; }
    .MobileIcons .User:before { content: '\f023'; font-family: 'FontAwesome'; }
    .MobileIcons .User.LoggedIn:before { content: '\f007'; font-family: 'FontAwesome'; }

/* MOBILE MENU HEADER */
.OuterMobileMenuHeaderWrapper { position: fixed; top: 0; left: -250px; width: 250px; z-index: 99; background-color: #34495e; color: #fff; height: 50px; transition: left 300ms ease-in; display: none; }
    .OuterMobileMenuHeaderWrapper.Active { left: 0px; }
.InnerMobileMenuHeaderWrapper { padding: 10px; padding-right: 0px; }
    .InnerMobileMenuHeaderWrapper .MobileMenuHeader { font-size: 20px; line-height: 30px; }
    .InnerMobileMenuHeaderWrapper .MobileMenuClose { float: right; line-height: 30px; cursor: pointer; }
        .InnerMobileMenuHeaderWrapper .MobileMenuClose:before { content: '\f00d'; font-family: FontAwesome; font-size: 24px; padding: 10px; }

/* MOBILE MAIN CATEGORIES */
.MobileCategoriesWrapper { position: fixed; top: 50px; bottom: 0px; left: -250px; width: 250px; z-index: 99; transition: left 300ms ease-in; display: none; }
    .MobileCategoriesWrapper.Active { left: 0px; }
.MobileCategories { width: 250px; z-index: 97; left: 0px; display: none; background-color: #fff; display: none; }
    .MobileCategories.Visible { display: none; }
    .MobileCategories li { float: left; width: 100%; border-bottom: 1px solid #ccc; transition: background-color 300ms linear; }
        .MobileCategories li:hover { background-color: #eee; }
        .MobileCategories li span, .MobileCategories li a { color: #34495e; padding-left: 15px; float: left; width: 100%; cursor: pointer; box-sizing: border-box; line-height: 46px; height: 46px; text-decoration:none; }
            .MobileCategories li span:after, .MobileCategories li a:after { content: '\f054'; font-family: FontAwesome; font-size: 16px; position: absolute; right: 20px; }
            .MobileCategories li span:hover, .MobileCategories li a:hover { color: #222; }

/* MOBILE SUB CATEGORIES/PRODUCTGROUPS */
.OuterMobileSubCategoriesWrapper { position: absolute; width: 250px; left: 0px; top: 0px; bottom: 0px; z-index: 101; background-color: #34495e; display: none; overflow: auto; }
    .OuterMobileSubCategoriesWrapper.Visible { display: block; }
.InnerMobileSubCategoriesWrapper { float: left; width: 100%; background-color: #fff; }
    .InnerMobileSubCategoriesWrapper h5 { padding-left: 15px; line-height: 46px; height: 46px; border-bottom: 1px solid #34495e; margin: 0; cursor: pointer; box-sizing: border-box; }
        .InnerMobileSubCategoriesWrapper h5:hover { color: #222; background-color: #eee; }
        .InnerMobileSubCategoriesWrapper h5:before { content: '\f053'; font-family: FontAwesome; font-size: 16px; padding-right: 5px; }
    .InnerMobileSubCategoriesWrapper ul { float: left; width: 100%; }
        .InnerMobileSubCategoriesWrapper ul li { float: left; width: 100%; border-bottom: 1px solid #ccc; background-color: #fff; position:relative; }
            .InnerMobileSubCategoriesWrapper ul li:hover { }
            .InnerMobileSubCategoriesWrapper ul li a { color: #34495e; padding: 15px; float: left; width: calc(100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:100%; cursor: pointer; box-sizing: border-box; text-decoration: none; transition: background-color 300ms linear; }
                .InnerMobileSubCategoriesWrapper ul li a:hover { color: #222; background-color: #eee; }
                .InnerMobileSubCategoriesWrapper ul li a.Selected { color: #222; background-color: #eee; }
            .InnerMobileSubCategoriesWrapper ul li .Extend { text-align: center;  width:50px; position: absolute; right: 0px; box-sizing: border-box; top:0px;  bottom: 0px; cursor: pointer; transition: background-color 300ms linear; }
                .InnerMobileSubCategoriesWrapper ul li .Extend:hover { background-color: #eee; }
                .InnerMobileSubCategoriesWrapper ul li .Extend:before { content: '\f054'; font-family: FontAwesome; font-size: 16px; }


                .OuterMobileMenuWrapper { position: fixed; height: 0px; width: 0px; z-index: 97; height: 100%; width: 100%; background: none; display: none; transition: background-color 300ms ease-in; }
        
        .OuterMobileMenuWrapper.Active { background-color: rgba(0,0,0,0.7); top: 0; right: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; }
    .InnerMobileMenuWrapper { position: absolute; width: 300px; background: #34495e; top: 0px; left: -300px; bottom: 0px; height: 100%; z-index: 98; transition: all 300ms ease-in; }
        .InnerMobileMenuWrapper.Active { left: 0px; }

    .OuterMobileMenuHeaderWrapper { left: -300px; width: 300px; }
    .InnerMobileMenuHeaderWrapper .MobileMenuClose { padding-right: 7px; }

    .MobileCategoriesWrapper { left: -300px; width: 300px;   }
    .MobileCategories { width: 300px; }
    
@media screen and (max-width:1000px) {
    /* TOP MENU */
    
    .InnerTopMenuWrapper .Pages { }/*padding-left:15px; tha*/

        .InnerTopMenuWrapper .Shop { position: absolute; z-index: 99; top: 50px; background: #fff; width: 300px; left: -300px; padding: 0px; transition: left 300ms ease-in, width 300ms ease-in; }
            .InnerTopMenuWrapper .Shop.Active { left: 0px; }  
            .InnerTpMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li {        }
        .InnerTopMenuWrapper .Shop ul li { width: 100%; border: 0px; padding-left: 20px; margin: 0; border-bottom: 1px solid #ccc; line-height: 46px; height: 46px; box-sizing: border-box; position: relative; }
        .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper { cursor: default; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper:after { content: ''; }
        .InnerTopMenuWrapper .Shop ul li span { font-size: 1.3rem; float:left; width:calc(100%-40px); display:inline-block;}
        .InnerTopMenuWrapper .Shop ul li:hover { background-color: none; }
         
        .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu { display: block; top: 46px; left: 0; background-color: #fff; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a { line-height: 46px; height: 46px; border-bottom: 1px solid #ccc; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a:last-child { border-bottom: 0px solid #ccc; }
            .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a:before {line-height: 46px; height: 46px; }
                .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li a:hover { background-color: #eee; }
        .InnerTopMenuWrapper .Shop ul li a { position: absolute; left: 0; right: 0; padding-left: 40px; font-size: 14px; }
        

    /* MOBILE ICONS */
    .MobileIcons { display: block; }
        .MobileIcons li { display: none; }
            .MobileIcons li:nth-child(2) { display: block; }
            .MobileIcons li:nth-child(5) { display: block; float: right; }
            .MobileIcons li:nth-child(2) span { border-left: 1px solid #000; }
            .MobileIcons li:nth-child(5) span { border-left: 1px solid #000; }

    /* MOBILE MENU */
    .OuterMobileMenuWrapper.Visible { display: block; }
    .OuterMobileMenuHeaderWrapper { display: block;}
     .MobileCategoriesWrapper {  display: block; }

    ul.MainCategories {display:none;}
        .MobileCategories li span:after { right: 20px; }

    .InnerMobileSubCategoriesWrapper h5 { font-size: 16px; font-weight: 400; }
    .InnerMobileSubCategoriesWrapper { font-size: 14px; }
    
    .MobileCategoriesWrapper.Active { left: 0px; }
   
    .Categories .MobileCategories { position: absolute; z-index: 99; display: none; }
        .Categories .MobileCategories.Visible { display: block; }

    .OuterMobileSubCategoriesWrapper { width: 300px; }
    .InnerMobileSubCategoriesWrapper ul li .Extend {  }
}

@media screen and (max-width:767px) {
    .OuterTopMenuWrapper { position: fixed; height: 0px; width: 0px; z-index: 97; height: 100%; width: 100%; background: none; display: none; }
        .OuterTopMenuWrapper.Visible { display: block; }
        .OuterTopMenuWrapper.Active { background-color: rgba(0,0,0,0.7); top: 0; right: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; }
    .InnerTopMenuWrapper { position: absolute; width: 250px; background: #34495e; top: 0px; left: -250px; bottom: 0px; height: 100%; z-index: 98; }
        .InnerTopMenuWrapper.Active { left: 0px; }
        .InnerTopMenuWrapper .Pages { width: 100%; padding-top: 50px; display: none; }
            .InnerTopMenuWrapper .Pages.Visible { display: block; }
        .InnerTopMenuWrapper .Shop { width: 250px; left: -250px; }
        .InnerTopMenuWrapper nav ul { float: left; background: #ccc; width: 100%; border: 0px solid #ccc; box-sizing: border-box; }
            .InnerTopMenuWrapper nav ul li { float: left; display: block; text-align: left; clear: left; background: #fff; width: 100%; box-sizing: border-box; border-bottom: 1px solid #ccc; }
        .InnerTopMenuWrapper nav.Pages ul li:hover { background: #ccc; }
        .InnerTopMenuWrapper nav.Pages ul li a { border-right: 0px !important; display: inline-block; padding: 0px; padding-left: 37px; line-height: 46px; height: 46px; box-sizing: border-box; width: 100%; font-size: 14px; }
        .InnerTopMenuWrapper nav ul li a.Home { padding-left: 10px; }
        .InnerTopMenuWrapper nav ul li ul li:last-child { border-bottom: 0px solid #ccc; }
        .InnerTopMenuWrapper .Shop ul .CustomerMenuWrapper .CustomerMenu li:last-child a { border-bottom: 0px solid #ccc; }
        .InnerTopMenuWrapper .Pages ul li { padding-left: 0px; }
        .InnerTopMenuWrapper .Shop ul li:hover { background-color: none; }
        .InnerTopMenuWrapper .Shop ul li.CustomerMenu ul li a { border-bottom: 1px solid #ddd; }

    .OuterTopMenuWrapper { padding-top: 8px; padding-bottom: 8px; }

    .InnerHeaderContentWrapper { padding-top: 10px; }
    .InnerTopMenuWrapper .Pages { }


     /* MOBILE MENU HEADER */
    .OuterMobileMenuHeaderWrapper { display: block; }

    .InnerMobileSubCategoriesWrapper h5 { font-size: 16px; font-weight: 400; }
    .InnerMobileSubCategoriesWrapper { font-size: 14px; }

    .MobileCategoriesWrapper { display: block; }
        .MobileCategoriesWrapper.Active { left: 0px; }
    .MobileIcons { display: block; }
    .Categories .MobileCategories { position: absolute; z-index: 99; display: none; }
        .Categories .MobileCategories.Visible { display: block; }

    .ShopToolsWrapper { display: none; position: absolute; left: 0px; top: 116px; float: left; width: 100%; padding: 10px; box-sizing: border-box; background: #34495e; border: 1px solid #000; border-top: 0px; }
        .ShopToolsWrapper .SearchContent { width: 100%; margin-top: 0px; box-sizing: border-box; height: 36px; background: #fff; }
        .ShopToolsWrapper .cbSearch { margin-left: 3px; }
            .ShopToolsWrapper .cbSearch input { line-height: 24px; width: 412px; }
        .ShopToolsWrapper .btnSearch { float: right; box-sizing: border-box; margin-top: -27px; }
        .ShopToolsWrapper .MiniCartWrapper { font-size: 14px; line-height: 18px; display: none !important; }

    .OuterMobileMenuWrapper { }
        .OuterMobileMenuWrapper.Visible { }
        .OuterMobileMenuWrapper.Active { display: none; }
    .InnerMobileMenuWrapper { }
        .InnerMobileMenuWrapper.Active { display: none; }

    .OuterMobileMenuHeaderWrapper { display: block; left: -250px; width: 250px; }
    .InnerMobileMenuHeaderWrapper .MobileMenuClose { padding-right: 7px; }

    .MobileCategoriesWrapper { left: -250px; width: 250px; }
    .MobileCategories { width: 250px; }
        .MobileCategories li span:after { right: 20px; }

    .InnerMobileSubCategoriesWrapper h5 { font-size: 16px; font-weight: 400; }
    .InnerMobileSubCategoriesWrapper { font-size: 14px; }

    .OuterMobileSubCategoriesWrapper { width: 250px; }
    .InnerMobileSubCategoriesWrapper ul li .Extend { height: 51px; line-height: 51px; padding-left: 20px; padding-right: 20px; }


    .MobileIcons li { display: block; }
        .MobileIcons li:nth-child(2) span { border-left: 0px solid #000; }
        .MobileIcons li:nth-child(5) span { border-left: 0px solid #000; }

        /* SUB CATEGORIES */
    .InnerLeftWrapper { position: fixed; top: 50px; left: 0; bottom: 0; width: 250px; box-sizing: border-box; z-index: 999; padding: 0px; left: 0; display: none; }
        .InnerLeftWrapper .CategoryTreeWrapper { background: #fff; width: 100%; top: 0px; bottom: 0px; padding: 0px; border: 0px solid #ccc; border-left: 0px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); z-index: 999; max-height: 100%; overflow: auto; box-sizing: border-box; }
            .InnerLeftWrapper .CategoryTreeWrapper h3 { display: none; }
            .InnerLeftWrapper .CategoryTreeWrapper .CloseCategories { display: none; }
        .InnerLeftWrapper .CategoryTree { }
            .InnerLeftWrapper .CategoryTree h5 { cursor: pointer; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; margin: 0px; }
                .InnerLeftWrapper .CategoryTree h5:hover { background-color: #eee; }
                .InnerLeftWrapper .CategoryTree h5:before { content: '\f053 \f053'; font-family: FontAwesome; font-size: 16px; padding-right: 5px; }
            .InnerLeftWrapper .CategoryTree span.Expand { position: absolute; right: 10px; top: 10px; }
                .InnerLeftWrapper .CategoryTree span.Expand:before { content: '\f054'; font-family: FontAwesome; font-size: 16px; }
            .InnerLeftWrapper .CategoryTree .Selected ul { display: none; }
    .CategoryTree ul { width: 100%; }
        .CategoryTree ul li { float: left; padding: 0px; margin: 0px; position: relative; width: 100%; }
            .CategoryTree ul li.Children { padding: 0px !important; }
                .CategoryTree ul li.Children:before { content: ""; padding: 0px; }
            .CategoryTree ul li:before { content: ""; padding: 0px; }
            .CategoryTree ul li a { float: left; width: 100%; padding: 10px; padding-left: 20px; box-sizing: border-box; }
                .CategoryTree ul li a:hover { background-color: #eee; }
}

@media screen and (max-width:480px) {
    .InnerTopMenuWrapper .Shop { width: 200px; left: -200px; }


    /* MOBILE MENU */
    .MobileIcons .Cart .Count { left: 30px; }
    .InnerTopMenuWrapper { width: 200px; left: -200px; }
    
    .InnerLeftWrapper { width: 200px; }
    .MobileCategoriesWrapper { left: -200px; width: 200px; }
    .MobileCategories { width: 200px; font-size: 16px; }
    .OuterMobileMenuHeaderWrapper { left: -200px; width: 200px; font-size: 16px; }
    .InnerMobileMenuHeaderWrapper .MobileMenuHeader { font-size: 16px; }
    .MobileCategories li span { font-size: 14px; }
    .OuterMobileSubCategoriesWrapper { width: 200px; }
    .InnerMobileSubCategoriesWrapper h5 { font-size: 14px; }
    .InnerMobileSubCategoriesWrapper a { font-size: 12px; }
    .InnerMobileSubCategoriesWrapper ul li .Extend { padding-left: 10px; padding-right: 10px; height: 46px; line-height: 46px; }
}