/**** NAAVIGATION MENU ****/ .menu-top { float: left; margin-left: 3em; } body.fixed { padding-top: 3.5em; } body.fixed .menu-top { position: fixed; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .menu-top li { display: block; float: left; } .menu-top li > a { color: #000; cursor: pointer; text-decoration: none; padding: 1.1em 1.1em; height: 100%; font-weight: 500; display: block; font-size: 1.1em; } @media screen and (max-width: 1220px) { .menu-top li > a { padding: 1.25em 1em; } } @media screen and (max-width: 1160px) { .menu-top li > a { padding: 1.25em .65em; } } #menu-mobile { display: none; } #menu-mobile li { width: 50%; } #menu-mobile li > a { font-size: 2em; font-weight: 400; padding: .35em 0 0 0; width: 100%; } .menu-top li > a, .menu-top li > a i { transition: background 0.2s linear, color 0.2s linear; } .menu-top li > a i { margin-right: 0.2em; } .menu-top li.active > a { background: #000; } .menu-top li a i.icon-angle-down:before { margin: -.2em -.5em 0 .2em; } .menu-top li > .sub { position: absolute; z-index: 112; margin-top: 1em; transition: all 0.2s linear; visibility: hidden; opacity: 0; border-top: 3px solid #000; background: #fff; box-shadow: rgba(0,0,0,0.2) 0px 3px 6px 0px; } .menu-top li:hover .sub { visibility: visible; opacity: 1; margin-top: 0; } .menu-top li ul.sub li { min-width: 20em !important; clear: both; height: auto; text-align: left; } .menu-top li ul.sub li > a { font-weight: 400; text-transform: none; } #menu-desktop li:hover > a, #menu-desktop li > a:hover { background-color: #000; color: #fff; } /**** MEGA MENU ****/ #menu-desktop li .sub.mega { background: #fff; left: 0; right: 0; padding: 2em 0 2em 2em; } #menu-desktop li .sub.mega [class*="col-"] { padding-right: 2em; } #menu-desktop li .sub.mega .img-cnt { width: 100%; height: 11em; overflow: hidden; margin-bottom: 1em; border-radius: .3em; } #menu-desktop li .sub.mega img { margin-top: -2.8em; max-width: 100%; } #menu-desktop li .sub.mega label { color: #000; font-weight: 500; text-transform: uppercase; border-bottom: 1px solid #6f8b37; padding: 0 0 0.8em 0; margin: 0 0 0.6em 0; display: block; } #menu-desktop li .sub.mega p { line-height: inherit; color: #666; margin: 0; } #menu-desktop li .sub.mega .button { margin: 1em 0 0 0; font-size: 1em; } #menu-desktop li .sub.mega .button.link { color: #000; background: #fff; padding: 1em 0; margin: 0; border: none; font-weight: 600; font-size: 1.1em; } #menu-desktop li .sub.mega ul, #menu-desktop li .sub.mega ul li, #menu-desktop li .sub.mega ul li a { padding: 0; margin: 0; width: 100%; height: auto; } #menu-desktop li .sub.mega ul li a { text-transform: capitalize; padding: 0.5em 0 0 0; font-size: 1em; font-weight: normal; color: #000; } #menu-desktop li .sub.mega ul li a:hover { background: none; color: #777; } /**** MOBILE SIDEBAR ****/ .mobile-sidebar { top: 0; bottom: 0; left: 0; width: 26em; max-width: 80%; height: 100%; position: fixed; z-index: 10001; background-color: #fefefe; color: #000; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; -webkit-transform: translateX(-99.999%); -ms-transform: translateX(-99.999%); transform: translateX(-99.999%); } .mobile-sidebar.right { left: auto; right: 0; -webkit-transform: translateX(100.001%); -ms-transform: translateX(100.001%); transform: translateX(100.001%); } .mobile-sidebar.open { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mobile-sidebar .title { width: 100%; height: 4em; display: block; font-size: 1.2em; padding: 1em 0 0 1em; font-weight: 700; color: #000; text-transform: uppercase; position: absolute; background: #000; color: #fff; z-index: 2; } .mobile-sidebar .title b { padding-top: .5em; float: left; } .mobile-sidebar.level1 .title.cat, .mobile-sidebar.level2 .title.cat, .mobile-sidebar.level3 .title.cat, .mobile-sidebar .title.back { display: none; } .mobile-sidebar.level1 .title.back, .mobile-sidebar.level2 .title.back, .mobile-sidebar.level3 .title.back { display: block; } .mobile-sidebar .title i { margin-left: -.5em; font-size: 1.4em; padding: 0; } .mobile-sidebar .title .icon-cancel { float: right; margin-right: .5em; padding: 0; } .mobile-sidebar .title .icon-angle-left { float: left; } .mobile-sidebar.open .content { width: 100%; position: absolute; top: 5em; bottom: 0; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .mobile-sidebar ul { position: absolute; height: 100%; } .mobile-sidebar ul, .mobile-sidebar ul li, .mobile-sidebar ul li a { width: 100%; display: block; list-style: none; margin: 0; padding: 0; } .mobile-sidebar ul.nav { -webkit-transition: -webkit-transform 300ms ease; -moz-transition: -moz-transform 300ms ease; -o-transition: -o-transform 300ms ease; transition: transform 300ms ease; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .mobile-sidebar.level1 .nav { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .mobile-sidebar.level2 .nav { -webkit-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } .mobile-sidebar.level3 .nav { -webkit-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); transform: translateX(-300%); } .mobile-sidebar ul li > ul { left: 100%; top: 0; display: none; } .mobile-sidebar ul li.active > ul { display: block; } .mobile-sidebar ul li { padding-left: 1em; } .mobile-sidebar ul li a { color: #000; padding: 1em 0; font-weight: 500; font-size: 1.2em; border-bottom: 1px solid #ddd; text-decoration: none; } .mobile-sidebar ul li a i.tag { font-size: .8em; padding: .3em 1em; background: #000; margin-top: -.2em; color: #fff; font-weight: 500; border-radius: .5em; } .mobile-sidebar ul li ul li a { text-transform: none; } .mobile-sidebar ul li a i { float: right; margin-right: 1em; font-style: normal; text-transform: none; } .mobile-sidebar ul li.all a { font-weight: 600; } .mobile-sidebar ul li a b { font-weight: 600; color: #000; }