.top_nav #menu .box_menu .menu_title { background: #F5F5F5; padding:10px 10px; } .top_nav #menu .box_menu .menu_title .menu_icon{ background: #333E48; display:block; float:left; margin-right:10px; border-radius:2px; padding:5px; margin-top:-6px; height:30px; width:30px; text-align:center; } .top_nav #menu .box_menu .menu_title .menu_icon i{ color:#fff; font-size:17px; } .top_nav #menu .box_menu .menu_title span{ color:#333E48; font-weight:bold; text-transform:uppercase; } @media (min-width: 991px) { #menu_tool .menu_content li{ float:left; border-right: 1px solid #F5F5F5; border-top: 0px solid #F5F5F5!important; } } .top_nav #menu_tool .menu_content li a span{ white-space:nowrap; width:auto; } .top_nav #menu_tool .menu_content li a:hover{ } .top_nav #menu_tool .menu_content li .menu_icon{ margin-right:5px; } .top_nav #menu_tool .menu_content li .menu_icon i{ position:relative; font-size:15px; wont-weight:bold; top:0px; right:0px; transform:none; } .top_nav .tool_button { font-size: 14px !important; color: #fff; font-weight: bold; background: #333E48; border-radius: 5px 5px 0px 0px; display: inline-block; padding: 18px 25px 16px 25px; margin-bottom: -11px; bottom: -5px; cursor: pointer; white-space: nowrap; } .top_nav .tool_button i { font-size: 20px; margin-left: 5px; } @media (min-width: 991px) { .top_nav .mobile_menu_nav { display: none; } .top_nav .category_button { font-size: 18px !important; color: #fff; text-transform:uppercase; font-weight: normal; background: #333E48; border-radius: 5px 5px 0px 0px; display: inline-block; padding: 19px 15px 16px 15px; margin-bottom: -11px; bottom: -5px; cursor: pointer; width:100%; white-space: nowrap; } .top_nav .category_button i { font-size: 20px; margin-left: 0px; margin-right: 10px; float:left; } .top_nav #menu { position: absolute; display: none; background: #fff; border: 2px solid #333E48; border-radius: 0px 0px 5px 5px; z-index: 10000; top: 58px; } .top_nav #menu ul { list-style: none; padding-left: 0px; padding: 0px; margin:0px; } .top_nav #menu ul li { padding-left: 0px; position: relative; } .top_nav #menu ul li i { padding-left: 0px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #aeaeae; font-size: 10px; } .top_nav #menu ul li:hover { background: #f5f5f5; } .top_nav #menu ul li .menu-category-sub { height: auto !important; } .top_nav #menu ul li .menu-category-sub ul li a { white-space: nowrap !important; font-size: 14px; min-width: 200px; } .top_nav #menu ul li +li { border-top: 1px solid #ddd; } .top_nav #menu ul li a { color: #333e48; display: inline-block; font-weight: normal; line-height: 1.5; padding: 8px !important; width: 100%; position: relative; } .top_nav #menu ul li a span { color: #333e48; display: inline-block; font-weight: normal; font-size: 14px; line-height: 1.5; width: 90%; position: relative; } .top_nav #menu ul > li:hover > .menu-category-sub { display: block; } .top_nav #menu .menuCol0 .menu-category-sub { position: absolute; display: none; left: calc(80%); background: #fff; border-bottom: 2px solid #333E48; border-left: 2px solid #333E48; border-right: 2px solid #333E48; border-top: 2px solid #333E48; } .top_nav #menu .menuCol1 .menu-category-sub { position: absolute; display: none; left: calc(100% - 3px); background: #fff; border-bottom: 2px solid #333E48; border-left: 2px solid #333E48; border-right: 2px solid #333E48; border-top: 2px solid #333E48; } .top_nav #menu .menuCol2 .menu-category-sub { position: absolute; display: none; right: calc(95%); background: #fff; border-bottom: 2px solid #333E48; border-left: 2px solid #333E48; border-right: 2px solid #333E48; border-top: 2px solid #333E48; } .top_nav #menu.menuActive { display: block; } } @media (max-width: 991px) { .menu_opened { overflow: hidden; position: relative; } .menu_opened .shadow_bg { display: block; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.5); top: 0px; right: 0px; z-index: 1007; } .menu_opened #open_button { display: none !important; } .top_nav { z-index: 1007 !important; } .top_nav .mobile_menu_nav { display: block; background: #F5F5F5; border-bottom: 1px solid #D9D9D9; width: 100%; } .top_nav .mobile_menu_nav table { width: 100%; height: 60px; } .top_nav .mobile_menu_nav table td:first-child { padding-left: 10px; } .top_nav .mobile_menu_nav table td:first-child b { font-size: 18px; line-height: 32px; } .top_nav .mobile_menu_nav .btn { margin-right: 5px; } .top_nav .mobile_menu_nav .btn:hover { color: #fff !important; } .top_nav .mobile_menu_nav .go-to-page { background: #fff; padding: 15px; border-top: 1px solid #D9D9D9; } .top_nav .mobile_menu_nav .go-to-page .btn { margin: 0px; } .top_nav .category_button { font-size: 14px !important; color: #fff; font-weight: bold; background: #333E48; border-radius: 5px 5px 0px 0px; display: inline-block; padding: 16px 25px 16px 25px; margin-bottom: -11px; bottom: -5px; cursor: pointer; white-space: nowrap; } @media (min-width: 991px) { .top_nav .category_button i { margin-left: 5px; } } .top_nav .category_button i { font-size: 26px; } .top_nav #menu { position: fixed; background: #fff; border: 0px solid #333E48; border-radius: 0px; z-index: 10000; overflow-y: auto; overflow-x: hidden; top: 0px; left: 0px; max-width: 300px; width: 300px; height: 100%; opacity: 0; margin-left: -300px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .top_nav #menu .row { margin: 0px; } .top_nav #menu .row > div { padding-left: 0px; padding-right: 0px; } .top_nav #menu .row .mobileDisplayCategory { padding: 0px !important; margin-bottom: 0px; } .top_nav #menu .row ul { list-style: none; padding-left: 0px; padding: 0px; } .top_nav #menu .row ul li { padding-left: 0px; } .top_nav #menu .row ul li a i { padding-left: 0px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #aeaeae; font-size: 10px; } .top_nav #menu .row ul li:hover { background: #f5f5f5; } .top_nav #menu .row ul li .menu-category-sub { overflow: hidden; margin-left: -300px; max-width: 300px; width: 300px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .top_nav #menu .row ul li .menu-category-sub ul li a { white-space: nowrap !important; font-size: 14px; min-width: 200px; } .top_nav #menu .row ul li +li { border-top: 1px solid #ddd; } .top_nav #menu .row ul li +li:last-child { border-bottom: 1px solid #ddd; } .top_nav #menu .row ul li a { color: #333e48; display: inline-block; font-weight: normal; line-height: 1.5; padding: 12px 0 12px 8px !important; width: 100%; position: relative; } .top_nav #menu .row ul li a span { color: #333e48; display: inline-block; font-weight: normal; font-size: 14px; line-height: 1.5; width: 90%; position: relative; } .top_nav #menu .row ul > li.link-opened > .menu-category-sub { display: block; } .top_nav #menu .row .menuCol0 .menu-category-sub { position: fixed; height: 100%; padding: 0px; top: 0px; background: #fff; border: 0px solid #333E48; } .top_nav #menu .row .menuCol1 .menu-category-sub { position: fixed; height: 100%; padding: 0px; top: 0px; background: #fff; border: 0px solid #333E48; } .top_nav #menu .row .menuCol2 .menu-category-sub { position: fixed; height: 100%; padding: 0px; top: 0px; background: #fff; border: 0px solid #333E48; } .top_nav #menu.menuActive { margin-left: 0px !important; box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.5); opacity: 1; } .link-opened > .menu-category-sub { margin-left: 0px !important; } }