diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less index 1ea2db3..8b8a691 100644 --- a/view/frontend/web/css/source/_module.less +++ b/view/frontend/web/css/source/_module.less @@ -1,384 +1,1981 @@ & when (@media-common = true) { - - .magicmenu .nav-desktop .level0.over .level-top-mega, - .magicmenu .nav-desktop .level0.dropdown.over > .level0{opacity:1;top: 50px;visibility:visible;} - .magicmenu .nav-desktop .level0.dropdown .hasChild.over > ul, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild.over > ul {opacity: 1;visibility: visible;} - - .magicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild.over > ul, - .vmagicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild.over ul {opacity: 1;left: 90%;visibility: visible;} - - .vmagicmenu .level0.over .level-top-mega, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown.hasChild.over > ul, - .vmagicmenu .nav-desktop .level0.dropdown.over > .level0{opacity:1; visibility:visible;} - - .sections .nav-sections-item-content > .navigation{display: none;} - .nav-sections-item-content .magicmenu{position:relative;display:block;text-align: left;} - .magicmenu{position: relative;} - .magicmenu .nav-desktop{position:static;margin:0;padding:0;} - .magicmenu .nav-desktop .level0{padding:0px;margin:0px;display: inline-block;} - .magicmenu .nav-desktop .level0.logo.display{display: none;border: 0;} - .magicmenu .nav-desktop .level0 > a:hover .short_desc{color:#888888;} - .magicmenu .nav-desktop .level0 .level-top{padding: 15px 13px;font-size:14px;position: relative;text-decoration:none;outline:medium none;display:block;text-align:left;line-height: normal;font-weight: bold;text-transform: uppercase;} - .magicmenu .nav-desktop .level0 .level-top span.icon-text{padding:0;text-decoration:none;outline:medium none;text-align:left;} - .magicmenu .nav-desktop .level0 .level-top span.cat_label{right: 20px;top: -8px;} - .magicmenu .nav-desktop .level0 .level-top > span{white-space: nowrap;font-size: 14px;} - .magicmenu .level0 .level-top img{display: none;padding-right: 15px;vertical-align: middle;} - .magicmenu .nav-desktop .level0.home{margin-left: 20px;position: static;} - .magicmenu .nav-desktop .level0.home .level-top .icon,.vmagicmenu .nav-desktop .level0.home .level-top .icon{display:none} - .magicmenu .nav-desktop .level0.home .level-top .icon-home{font-size:15px} - .magicmenu .nav-desktop .level0 .level-top-mega,.magicmenu .nav-desktop .level0.dropdown > .level0{ border-style: solid ;border-width: 0px;padding: 0px 15px;position:absolute;z-index:99999;display:block;opacity:0;top:130%;visibility:hidden;transition:all 300ms ease-in-out 0s;-moz-transition:all 300ms ease-in-out 0s;-webkit-transition:all 300ms ease-in-out 0s;-o-transition:all 300ms ease-in-out 0s;box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);} - .magicmenu .nav-desktop .level0:hover .level-top-mega,.magicmenu .nav-desktop .level0.dropdown:hover > .level0{opacity:1;top: 50px;visibility:visible;} - .magicmenu .nav-desktop .level0.home .level-top-mega {padding: 20px 25px 25px;min-width: 175px;text-align: left;} - .magicmenu .nav-desktop .level0.home .level-top-mega div a span {font-size: 14px;line-height: 27px;} - .magicmenu .nav-desktop .level0 .level-top-mega .children a{position: relative;display: block;} - .magicmenu .nav-desktop .level0 .level-top-mega .children a,.magicmenu .nav-desktop p{text-align:left;text-decoration:none;font-size: 14px;line-height: 30px;} - .magicmenu .nav-desktop .level0.dropdown > .level0 li a span, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown > .level0 li a span, - .magicmenu .nav-desktop .level0.ext .level0.dropdown li a span, - .magicmenu .nav-desktop .level0 .level-top-mega .children a span, - .magicmenu .nav-desktop .level0.dropdown .dropdown .level1 a{font-size: 14px;} - .magicmenu .nav-desktop .level-top a{color:#000;font-size:14px;text-decoration:none;text-align:left} - .magicmenu .nav-desktop .level0 .level-top-mega .children.level1 > a{border-width: 0 0 0;border-style: solid;position: relative; font-size: 14px;font-weight: bold;padding: 28px 0 8px;display: block;line-height: 25px;margin: 0px;text-transform: uppercase;} - .magicmenu .nav-desktop .level0 .level-top-mega .children.level1 > a span{font-size: 14px;position: relative;} - .magicmenu .nav-desktop .level0 .level-top-mega .children.level1 > a span:after, - .vmagicmenu .level0 .level-top-mega .children > a span:after{border-width: 0 0 1px;border-style: solid;content: "";height: 1px;left: 0;position: absolute; bottom: 0px; width: 0px;transition: all 0.35s ease 0s;display: none;} - .magicmenu .nav-desktop .level0 .level-top-mega .children.level1 > a:hover span:after, - .vmagicmenu .level0 .level-top-mega .children > a:hover span:after{width: 100%;} - .magicmenu .nav-desktop .level0 .level-top-mega .children .nav:last-child { border: 0 none;} - .magicmenu .nav-desktop .level0 .level-top-mega .mega-block-top,.magicmenu .nav-desktop .level0 .level-top-mega .mega-block-bottom{width:100%;clear:both;padding:30px 0 0px} - .magicmenu .nav-desktop .level0 .level-top-mega .content-mega-horizontal .cat-mega{padding-bottom: 0px;} - .magicmenu .nav-desktop .level0 .level-top-mega .mage-column.cat-mega{float:left;} - .magicmenu .nav-desktop .level0 .level-top-mega .mage-column .children{float:left;text-align:left;width:235px;padding: 0 15px;} - .magicmenu .nav-desktop .level0 .level-top-mega .mage-column .children ul{margin-right:0px;padding: 0px;} - .magicmenu .nav-desktop .level0 .level-top-mega .mage-column .children > ul{padding: 22px 0 20px;position: relative;list-style: none;} - .magicmenu .nav-desktop .level0 .level-top-mega .mage-column li{margin: 0;} - .mage-column.mega-block-left{float:left;} - .mage-column.mega-block-right{float:right;padding: 10px 0 0;} - .block-left,.block-right,.cat-mega{float:left} - .block-bottom{clear:both} - .mage-column-custom{padding-top: 32px;} - .magicmenu .nav-desktop .level0 .level-top-mega .content-mega-custom .children.level1 > a{padding: 0px;margin-bottom: 10px;} - .magicmenu .nav-desktop .level0 .level-top-mega .mega-block-top{margin: 0px;overflow: hidden;} - .magicmenu .nav-desktop .level0 .level-top .short_desc{display:block;font-size:13px;font-weight:300;line-height:13px;text-transform:capitalize;color:#999} - .vmagicmenu .level0 .level-top-mega .children.level1 > a.a-image::before,.magicmenu .nav-desktop .level0 .level-top-mega .children.level1 > a.a-image::before{display: none;padding: 0;} - /* --- dropdown --- */ - .magicmenu .nav-desktop .level0.dropdown li{margin: 0;} - .magicmenu .nav-desktop .level0.dropdown > .level0, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown > .level0, - .magicmenu .nav-desktop .level0.ext .level0.dropdown{width: 215px;padding: 20px 0px;line-height: 38px;text-align: left;} - .magicmenu .nav-desktop .level0.dropdown.home > .level0{width: 200px;} - .magicmenu .nav-desktop .level0.dropdown .hasChild, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild {position: relative;margin: 0;} - .vmagicmenu .vmagicmenu-narrow .level0.dropdown li{margin: 0;} - .magicmenu .nav-desktop .level0.dropdown .hasChild > a:before, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild > a:before{ content: "\f105";display: block;line-height: 38px;font-size: 13px;position: absolute;right: 15px;text-align: right;font-family: FontAwesome;} - .magicmenu .nav-desktop .level0.dropdown .hasChild ul, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild ul {position: absolute;left: 100%;top: 0;opacity: 0;visibility: hidden;border-width: 1px;border-style: solid;padding: 20px 0px;min-width: 200px;z-index: 1;box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);list-style: none;} - .magicmenu .nav-desktop .level0.dropdown .hasChild:hover > ul,.vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild:hover > ul{opacity: 1;visibility: visible;} - .magicmenu .nav-desktop .level0.dropdown .level1 a,.vmagicmenu .vmagicmenu-narrow .level0.dropdown .level1 a{padding: 0 18px;display: block;text-transform: uppercase;} - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .hasChild ul li{margin: 0;} - /* --- ul leve2 --- */ - .magicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild{position: relative;} - .magicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild:before,.vmagicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild:before{color: #666;content: "\f105";display: block;line-height: 32px;font-size: 13px;position: absolute;right: 30px;text-align: right;font-family: FontAwesome;} - .magicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild ul,.vmagicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild ul { position: absolute;left: 100%;opacity: 0;visibility: hidden;top:0;background-color: #fff;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);padding: 5px 0 5px 30px;min-width: 200px;z-index: 1;} - .magicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild:hover > ul,.vmagicmenu .nav-desktop .level0 .level-top-mega .children ul.level1 .hasChild:hover > ul{opacity: 1;left: 90%;visibility: visible;} - /* Vertical Menu*/ - .vmagicmenu{display:block !important;position:relative;padding:0px;z-index: 90;width: 270px;float: left;} - .vmagicmenu .block-vmagicmenu-content{padding: 0px;position: absolute;} - .vmagicmenu .vmagicmenu-narrow{position: absolute;margin: 0px;padding: 5px 0 25px; list-style: outside none none;width: 270px;display: none;box-shadow: 0 0 3px 0 rgba(0,0,0,.1);} - .vmagicmenu .vmagicmenu-narrow.over{display: block;} - .vmagicmenu .block-title{padding: 0 30px;line-height: 49px;} - .vmagicmenu .block-title span{ font-size: 24px;vertical-align: middle;} - .vmagicmenu .block-title span.fa:before{content: "\e871";font-family: 'Linearicons-Free';} - .vmagicmenu .block-title .vmagicmenu-subtitle{padding: 0 0 0 15px;font-size: 14px;text-transform: uppercase;} - .vmagicmenu .level0{padding:0;margin: 0;float:left;line-height:39px;width:100%;list-style: none;position: static;} - .vmagicmenu .level0.last{border:none} - .vmagicmenu .level0:hover .level0{background-color: transparent;} - .vmagicmenu .level0 .level-top{border-bottom: 1px solid #e6e6e6;margin: 0px 18px;padding: 0px;font-size:100%;text-decoration:none;display:block;outline:medium none;position: relative;} - .vmagicmenu .level0 .level-top img{vertical-align: middle;margin-right: 10px;display: inline-block;} - .vmagicmenu .level0.hasChild .level-top:after{content: "\f105";font-family:FontAwesome;float:right;font-style:normal;font-weight:normal;text-decoration:inherit;vertical-align:middle;font-size: 14px;position: relative;} - .vmagicmenu .level0 .level-top span{font-size: 14px;vertical-align: middle;} - .vmagicmenu .level0 .level-top-mega,.vmagicmenu .vmagicmenu-narrow .level0.dropdown > .level0{border-width: 0px;border-style: solid;position: absolute;left:100%;z-index:999;opacity: 0;visibility: hidden;top: 0 !important;min-height: 100%;} - .vmagicmenu .vmagicmenu-narrow .level0.dropdown > .level0{top: 0;} - .vmagicmenu .level0 .level-top-mega{padding: 0 15px;} - .vmagicmenu .level0:hover .level-top-mega, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown.hasChild:hover > ul,.vmagicmenu .nav-desktop .level0.dropdown:hover > .level0{opacity:1; visibility:visible;box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);-o-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);-ms-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);} - .vmagicmenu .level0 .level-top-mega .content-mega{margin:0;padding:0px;} - .vmagicmenu .level0 .level-top-mega .children a,.vmagicmenu p{line-height:30px;text-align:left;text-decoration:none;position: relative;display: block;} - .vmagicmenu .level0 .level-top-mega .children a span, - .vmagicmenu .vmagicmenu-narrow .level0.dropdown .level1 a span{font-size: 14px;} - .vmagicmenu .level0 .level-top-mega .children > a{border-width: 0px 0 0;border-style: solid;display: block;padding-top: 28px;padding-bottom: 8px;position: relative;font-weight: bold;line-height: 25px;text-transform: uppercase;} - .vmagicmenu .level0 .level-top-mega .children > a span{font-size: 14px;} - .vmagicmenu .level-top a{color:#fff;font-size:14px;text-decoration:none;text-align:left} - .vmagicmenu .level0 .level-top-mega .children .level-3{font-size:100%;padding:0 0 5px;line-height:30px} - .vmagicmenu .level0 .level-top-mega .children .level-3 a{font-size:14px;text-transform:uppercase;font-weight:500;} - .vmagicmenu .level0 .level-top-mega .children .nav{line-height:26px;border-bottom:1px solid #ececec} - .vmagicmenu .level0 .level-top-mega .children .nav:last-child{border:none} - .vmagicmenu .level0 .level-top-mega .children > .nav{border:none} - .vmagicmenu .level0 .level-top-mega .children .nav a{font-weight:300} - .vmagicmenu .level0 .level-top-mega .mega-block-top,.vmagicmenu .level0 .level-top-mega .mega-block-bottom{width:100%} - .vmagicmenu .level0 .level-top-mega .mega-block-bottom{clear:both;padding:25px 0 0px} - .vmagicmenu .level0 .level-top-mega .mega-block-bottom img{margin: 0 auto;} - .vmagicmenu .level0 .level-top-mega .mage-column .children{float:left;width:235px;text-align:left;padding: 0 15px;margin: 0;} - .vmagicmenu .level0 .level-top-mega .mage-column li{margin: 0;} - .vmagicmenu .level0 .level-top-mega .mage-column .children ul{list-style: outside none none;} - .vmagicmenu .level0 .level0 .children > ul {margin: 0;padding: 20px 0 35px; position: relative;} - .vmagicmenu .level0 .level-top-mega .mage-column .children ul li{margin: 0;position: relative;} - .vmagicmenu .banner-menu-position img {margin-left: -30px;} - .header-container-fixed .magicmenu .nav-desktop .level0 .level-top span.cat_label {top: 0px;} - /*.vmagicmenu .vmagicmenu-narrow >li:nth-of-type(n+8) { display: none; }*/ - .vmagicmenu .vmagicmenu-narrow >li:nth-child(n+12) { display: none; } - .all-cat { display: block; margin-top: 10px;} - .all-cat span {padding: 0px;cursor: pointer;display: block;line-height: normal;width: 100%;clear: both;font-size: 14px;} - .all-cat span:after{content: "\f0d7";font-family: FontAwesome;padding-left: 5px;} - .vmagicmenu .vmagicmenu-narrow >li.all-cat{ display: block; margin-top: 15px;float: left;width: 100%;clear: both;padding: 0 18px;} - .sidebar .accordion-container .all-cat{margin-top: 20px;padding: 0 18px;} - .sidebar .accordion-container .level0 .level-top img{display: none;} - .sidebar .accordion-container{margin-bottom: 30px;} - .sidebar .accordion-container .meanmenu-accordion{border-style: solid;border-width: 1px;border-color: #e6e6e6;padding: 0px 0px 34px;} - .accor-title {font-size: 18px;font-weight: bold;line-height: 1.35;margin: 0;padding: 15px 18px;position: relative;text-align: left;text-transform: uppercase;border-bottom: 1px solid #e6e6e6;} - .sidebar .nav-accordion{padding: 13px 18px 0;} - ul.nav-accordion{line-height:0.5em;list-style:none;margin:0;padding:0 0 30px;} - ul.nav-accordion li{position:relative;margin: 0;} - ul.nav-accordion li.last { border-bottom: 0 none;} - ul.nav-accordion li a{position: relative;display:block;font-size:14px;line-height: 30px;margin:0;padding:5px 0;text-align:left;text-decoration:none;text-shadow:none;color:#333e48;outline:medium none;} - ul.nav-accordion li a.level-top{ border-bottom: 1px solid #e6e6e6;padding: 10px 0;} - ul.nav-accordion li a.level-top span{font-size: 14px;} - ul.nav-accordion li a span{font-size: 14px;} - ul.nav-accordion li a:hover,.all-cat:hover span,ul.nav-accordion ul ul li:hover a:before{color: #333;} - ul.nav-accordion li ul li a{/*padding:0 0 0 25px;*/} - ul.nav-accordion li > ul.submenu > li > a {padding-left: 20px;} - ul.nav-accordion li ul li ul li.parent > a{padding:0 0 0 20px;} - ul.nav-accordion li ul li.parent > a span:before {display: none;} - ul.nav-accordion ul{margin: 0;padding: 0px;list-style: none;} - ul.nav-accordion ul.submenu, ul.nav-mobile ul.submenu{display: none;} - ul.nav-accordion ul li{clear:both;margin:0;padding:0} - ul.nav-accordion ul li a{outline:none;} - ul.nav-accordion ul li.active{font-weight:normal;} - ul.nav-accordion ul ul li a:before{color: #cccccc;content: "\f105";display: inline-block;font-family: "FontAwesome";font-size: 13px;padding-right: 15px;text-align: right;} - ul.nav-accordion ul ul ul li a{margin-left:20px} - ul.nav-accordion .expand,ul.nav-accordion .collapse{border:0;cursor:pointer;display:block;font-size: 0 !important;height:19px;position:absolute;right:0px;top:10px;width:19px;padding: 0 !important;} - ul.nav-accordion li.level0 > a > span > .cat-label{position:inherit} - ul.nav-accordion li.level0 > a > span > .pin-bottom:before{position:inherit;right:6px;top:22px;width:0;height:0;content:"";border-style:solid;border-width:0} - ul.nav-accordion .expand:before{content: "\f106"; color: #333;} - ul.nav-accordion .collapse:before{content: "\f107";color: #7f7f7f;} - ul.nav-accordion .collapse:before,ul.nav-accordion .expand:before{font-family: FontAwesome; display: inline-block;font-size: 17px;text-align: center;width: 18px;line-height: 30px;font-weight: normal;} - ul.nav-accordion .collapse:hover:before{color: #333;} - .nav-accordion>li:nth-child(n+10) { display: none; } - /*Test*/ - .level-top-mega .mage-column.cat-mega{margin:0;list-style: outside none none;} - .fixed{z-index:999;width:100%} - .fixed .custom-menu{padding-bottom:7px;padding-top:10px;box-shadow:0 0 6px 0 rgba(0,0,0,0.2)} - .fixed .quick-access{display:none} - @media only screen and (min-width:768px){.nav-mobile{display:none !important;}} - @media (max-width: 991px) { - .nav-sections-item-content > .navigation .nav-mobile,.sections .nav-sections-item-content > .navigation{display: block !important;padding: 0;} - } - @media (max-width: 992px) {.nav-sections-item-content {display: block !important; } } - .nav-sections .mean-nav{float:left;width: 100%;position: absolute;z-index: 2;left: 0;} - .nav-sections .mean-nav .mobi-title{color:#242628;font-size:16px;line-height:52px;margin:0;padding:0 0 0 50px;text-align:left;text-transform:uppercase;font-weight: 400;position: absolute;top: -56px;z-index: 0;display: none;} - .nav-sections .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none} - .nav-sections .mean-nav ul li{position:relative;float:left;width:100%;margin: 0;} - .nav-sections .mean-nav ul li a span, .nav-sections .mean-nav ul li .level-top span{font-size:15px;padding:0 14px;} - .nav-sections .mean-nav ul li a span.icon.fa-home{padding-right: 0;} - .nav-sections .mean-nav ul li li a{font-size: 14px; padding: 10px 0 10px 25px;filter:alpha(opacity=75);visibility:visible;} - .nav-sections .mean-nav ul li li li a{font-size: 14px; padding: 10px 0 10px 40px;} - .nav-sections .mean-nav ul li li li li a{padding:1em 20%} - .nav-sections .mean-nav ul li li li li li a{padding:1em 25%} - .nav-sections .mean-nav ul li .expand,.nav-sections .mean-nav ul li .collapse{cursor: pointer;top: 0;right: 0px;width: 40px;height: 45px;text-align: center;line-height: 45px;padding:0px!important;text-align:center;position:absolute;z-index:2;font-weight:300;border:none!important;display: block;font-size: 0;} - ul.nav-accordion .collapse:before{content: "\f107";color: #7f7f7f;} - .nav-sections .mean-nav ul li .expand:before,.nav-sections .mean-nav ul li .collapse:before{font-family: FontAwesome; display: inline-block;font-size: 22px;text-align: center;width: 18px;line-height: 45px;font-weight: normal;} - .nav-sections .mean-nav ul li .expand:before{content: "\f106"; color: #ccc;} - .nav-sections .mean-nav ul li .collapse:before{content: "\f107";color: #ccc;} - .nav-sections .navigation .parent .level-top:after{display: none !important;} - .magicmenu .nav-desktop .level0 .level-top .cat_label, .magicmenu .nav-desktop .level0 .cat_label, .nav-sections .mean-nav ul li a span.cat_label, .vmagicmenu .level0 .cat_label, .vmagicmenu .level0 .level-top-mega .children .cat_label,ul.nav-accordion li a span.cat_label{background-color:#009966;color:#fff;font-size: 11px !important;line-height:16px;font-weight: 700;padding: 0px 5px;margin: 0 0 0 3px;position:absolute !important;text-transform: uppercase;} - .magicmenu .nav-desktop .level0 .cat_label.Hot, .magicmenu .nav-desktop .level0 .cat_label.hot, .magicmenu .nav-desktop .level0 .cat_label.HOT, .vmagicmenu .level0 .cat_label.Hot, .vmagicmenu .level0 .cat_label.hot, .vmagicmenu .level0 .cat_label.HOT, .vmagicmenu .level0 .level-top-mega .children .cat_label.hot, .vmagicmenu .level0 .level-top-mega .children .cat_label.Hot, .vmagicmenu .level0 .level-top-mega .children .cat_label.HOT, .mean-nav ul li a span.cat_label.hot, .mean-nav ul li a span.cat_label.Hot, .mean-nav ul li a span.cat_label.HOT{color:#ff3d49;} - .magicmenu .nav-desktop .level0 .level-top .cat_label:after, .magicmenu .nav-desktop .level0 .cat_label:after, .nav-sections .mean-nav ul li a span.cat_label:after, .vmagicmenu .level0 .cat_label:after, .vmagicmenu .level0 .level-top-mega .children .cat_label:after,ul.nav-accordion li a span.cat_label:after{content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 0;border-style: solid;border-bottom-color: transparent !important;border-right-color: transparent !important;border-right-width: 5px;border-top-width: 5px;display: none;} - /* Update */ - .magicmenu .nav-desktop .level0.hasChild .level-top:after,.magicmenu .nav-desktop .level0.hasChild .level-top:after{content: "\f107";font-family: "FontAwesome";font-size: 15px;padding-left: 5px;font-weight: normal;} - .magicmenu .nav-desktop .level0 .cat_label.Sale, .magicmenu .nav-desktop .level0 .cat_label.sale, .magicmenu .nav-desktop .level0 .level-top-mega .children a .cat_label.sale, .magicmenu .nav-desktop .level0 .level-top-mega .children a .cat_label.Sale, .vmagicmenu .level0 .cat_label.Sale, .vmagicmenu .level0 .cat_label.sale, .vmagicmenu .level0 .level-top-mega .children .cat_label.sale, .vmagicmenu .level0 .level-top-mega .children .cat_label.Sale, .mean-nav ul li a span.cat_label.sale, .mean-nav ul li a span.cat_label.Sale{color: #00bd33;} - .magicmenu .nav-desktop .level0 .cat_label:before, - .vmagicmenu .level0 .cat_label:before, - .nav-sections .mean-nav ul li a span.cat_label:before, - .nav-sections .mean-nav ul li span.level-top span.cat_label:before {border-color: transparent;border-style: solid;border-top-color: #009966;border-width: 6px 10px 0 0;content: "";height: 0;position: absolute;left: 10px;top: 17px;transition: border-color 450ms ease-in-out 0s;width: 0;display: none;} - .magicmenu .nav-desktop .level0 .cat_label.New:before,.vmagicmenu .level0 .cat_label.New {border-top-color: #009966;} - .magicmenu .nav-desktop .level0 .level-top-mega .children .level-3 a .cat_label:before, - .magicmenu .nav-desktop .level0 .level-top-mega .children .nav a .cat_label:before {display:none;} - .magicmenu .nav-desktop .level0 .cat_label.HOT:before, - .magicmenu .nav-desktop .level0 .cat_label.Hot:before, - .magicmenu .nav-desktop .level0 .cat_label.hot:before, - .vmagicmenu .level0 .cat_label.HOT:before, - .vmagicmenu .level0 .cat_label.Hot:before, - .vmagicmenu .level0 .cat_label.hot:before, - .nav-sections .mean-nav ul li a .cat_label.HOT:before, - .nav-sections .mean-nav ul li a .cat_label.Hot:before, - .nav-sections .mean-nav ul li a .cat_label.hot:before, - .nav-sections .mean-nav ul li span.level-top span.cat_label.HOT:before, - .nav-sections .mean-nav ul li span.level-top span.cat_label.Hot:before, - .nav-sections .mean-nav ul li span.level-top span.cat_label.hot:before{border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);} - .magicmenu .nav-desktop .level0 .cat_label.SALE:before, - .magicmenu .nav-desktop .level0 .cat_label.Sale:before, - .magicmenu .nav-desktop .level0 .cat_label.sale:before, - .vmagicmenu .level0 .cat_label.SALE:before, - .vmagicmenu .level0 .cat_label.Sale:before, - .vmagicmenu .level0 .cat_label.sale:before, - .nav-sections .mean-nav ul li a .cat_label.SALE:before, - .nav-sections .mean-nav ul li a .cat_label.Sale:before, - .nav-sections .mean-nav ul li a .cat_label.sale:before{border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);} - .magicmenu .nav-desktop .level0 .cat_label.SALE, - .magicmenu .nav-desktop .level0 .cat_label.Sale, - .magicmenu .nav-desktop .level0 .cat_label.sale, - .vmagicmenu .level0 .cat_label.SALE, - .vmagicmenu .level0 .cat_label.Sale, - .vmagicmenu .level0 .cat_label.sale, - .nav-sections .mean-nav ul li a .cat_label.SALE, - .nav-sections .mean-nav ul li a .cat_label.Sale, - .nav-sections .mean-nav ul li a .cat_label.sale{background-color:#ff6600;} - .magicmenu .nav-desktop .level0 .cat_label.Hot, - .magicmenu .nav-desktop .level0 .cat_label.hot, - .vmagicmenu .level0 .cat_label.Hot, - .vmagicmenu .level0 .cat_label.hot, - .nav-sections .mean-nav ul li a .cat_label.HOT, - .nav-sections .mean-nav ul li a .cat_label.Hot, - .nav-sections .mean-nav ul li a .cat_label.hot, - .nav-sections .mean-nav ul li span.level-top span.cat_label.HOT, - .nav-sections .mean-nav ul li span.level-top span.cat_label.Hot, - .nav-sections .mean-nav ul li span.level-top span.cat_label.hot{background-color:#dc1212;} - .page-wrapper { - overflow-x: hidden; + .magicmenu { + .nav-desktop { + .level0.over { + .level-top-mega { + opacity: 1; + top: 50px; + visibility: visible; + } + } + .level0.dropdown.over { + >.level0 { + opacity: 1; + top: 50px; + visibility: visible; + } + } + .level0.dropdown { + .hasChild.over { + >ul { + opacity: 1; + visibility: visible; + } + } + >.level0 { + border-style: solid; + border-width: 0px; + padding: 0px 15px; + position: absolute; + z-index: 99999; + display: block; + opacity: 0; + top: 130%; + visibility: hidden; + transition: all 300ms ease-in-out 0s; + -moz-transition: all 300ms ease-in-out 0s; + -webkit-transition: all 300ms ease-in-out 0s; + -o-transition: all 300ms ease-in-out 0s; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + width: 215px; + padding: 20px 0px; + line-height: 38px; + text-align: left; + background-color: #ffffff; + li { + a { + span { + font-size: 14px; + } + } + } + } + &:hover { + >.level0 { + opacity: 1; + top: 50px; + visibility: visible; + } + } + .dropdown { + .level1 { + a { + font-size: 14px; + } + } + } + li { + margin: 0; + } + .hasChild { + position: relative; + margin: 0; + >a { + &:before { + content: "\f105"; + display: block; + line-height: 38px; + font-size: 13px; + position: absolute; + right: 15px; + text-align: right; + font-family: FontAwesome; + } + } + ul { + position: absolute; + left: 100%; + top: 0; + opacity: 0; + visibility: hidden; + border-width: 1px; + border-style: solid; + padding: 20px 0px; + min-width: 200px; + z-index: 1; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + list-style: none; + } + &:hover { + >ul { + opacity: 1; + visibility: visible; + } + } + } + .level1 { + a { + padding: 0 18px; + display: block; + text-transform: uppercase; + } + } + } + .level0 { + .level-top-mega { + .children { + ul.level1 { + .hasChild.over { + >ul { + opacity: 1; + left: 90%; + visibility: visible; + } + } + .hasChild { + position: relative; + &:before { + color: #666; + content: "\f105"; + display: block; + line-height: 32px; + font-size: 13px; + position: absolute; + right: 30px; + text-align: right; + font-family: FontAwesome; + } + ul { + position: absolute; + left: 100%; + opacity: 0; + visibility: hidden; + top: 0; + background-color: #fff; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); + padding: 5px 0 5px 30px; + min-width: 200px; + z-index: 1; + } + &:hover { + >ul { + opacity: 1; + left: 90%; + visibility: visible; + } + } + } + } + a { + position: relative; + display: block; + text-align: left; + text-decoration: none; + font-size: 14px; + line-height: 30px; + span { + font-size: 14px; + } + .cat_label.sale { + color: #00bd33; + } + .cat_label.Sale { + color: #00bd33; + } + } + .nav { + &:last-child { + border: 0 none; + } + a { + .cat_label { + &:before { + display: none; + } + } + } + } + .level-3 { + a { + .cat_label { + &:before { + display: none; + } + } + } + } + } + border-style: solid; + border-width: 0px; + padding: 0px 15px; + position: absolute; + z-index: 99999; + display: block; + opacity: 0; + top: 130%; + visibility: hidden; + transition: all 300ms ease-in-out 0s; + -moz-transition: all 300ms ease-in-out 0s; + -webkit-transition: all 300ms ease-in-out 0s; + -o-transition: all 300ms ease-in-out 0s; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + background-color: #ffffff; + .children.level1 { + >a { + border-width: 0 0 0; + border-style: solid; + position: relative; + font-size: 14px; + font-weight: bold; + padding: 28px 0 8px; + display: block; + line-height: 25px; + margin: 0px; + text-transform: uppercase; + span { + font-size: 14px; + position: relative; + &:after { + border-width: 0 0 1px; + border-style: solid; + content: ""; + height: 1px; + left: 0; + position: absolute; + bottom: 0px; + width: 0px; + transition: all 0.35s ease 0s; + display: none; + } + } + &:hover { + span { + &:after { + width: 100%; + } + } + } + } + >a.a-image { + &::before { + display: none; + padding: 0; + } + } + } + .mega-block-top { + width: 100%; + clear: both; + padding: 30px 0 0px; + margin: 0px; + overflow: hidden; + } + .mega-block-bottom { + width: 100%; + clear: both; + padding: 30px 0 0px; + } + .content-mega-horizontal { + .cat-mega { + padding-bottom: 0px; + } + } + .mage-column.cat-mega { + float: left; + } + .mage-column { + .children { + float: left; + text-align: left; + width: 235px; + padding: 0 15px; + ul { + margin-right: 0px; + padding: 0px; + } + >ul { + padding: 22px 0 20px; + position: relative; + list-style: none; + } + } + li { + margin: 0; + } + } + .content-mega-custom { + .children.level1 { + >a { + padding: 0px; + margin-bottom: 10px; + } + } + } + } + padding: 0px; + margin: 0px; + display: inline-block; + >a { + &:hover { + .short_desc { + color: #888888; + } + } + } + .level-top { + padding: 15px 13px; + font-size: 14px; + position: relative; + text-decoration: none; + outline: medium none; + display: block; + text-align: left; + line-height: normal; + font-weight: bold; + text-transform: uppercase; + span.icon-text { + padding: 0; + text-decoration: none; + outline: medium none; + text-align: left; + } + span.cat_label { + right: 20px; + top: -8px; + } + >span { + white-space: nowrap; + font-size: 14px; + } + .short_desc { + display: block; + font-size: 13px; + font-weight: 300; + line-height: 13px; + text-transform: capitalize; + color: #999; + } + .cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + } + } + &:hover { + .level-top-mega { + opacity: 1; + top: 50px; + visibility: visible; + } + } + .cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + &:before { + border-color: transparent; + border-style: solid; + border-top-color: #009966; + border-width: 6px 10px 0 0; + content: ""; + height: 0; + position: absolute; + left: 10px; + top: 17px; + transition: border-color 450ms ease-in-out 0s; + width: 0; + display: none; + } + } + .cat_label.Hot { + color: #ff3d49; + background-color: #dc1212; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.hot { + color: #ff3d49; + background-color: #dc1212; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.HOT { + color: #ff3d49; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.Sale { + color: #00bd33; + background-color: #ff6600; + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.sale { + color: #00bd33; + background-color: #ff6600; + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.New { + &:before { + border-top-color: #009966; + } + } + .cat_label.SALE { + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #ff6600; + } + } + position: static; + margin: 0; + padding: 0; + .level0.logo.display { + display: none; + border: 0; + } + .level0.home { + margin-left: 20px; + position: static; + .level-top { + .icon { + display: none; + } + .icon-home { + font-size: 15px; + } + } + .level-top-mega { + padding: 20px 25px 25px; + min-width: 175px; + text-align: left; + div { + a { + span { + font-size: 14px; + line-height: 27px; + } + } + } + } + } + p { + text-align: left; + text-decoration: none; + font-size: 14px; + line-height: 30px; + } + .level0.ext { + .level0.dropdown { + li { + a { + span { + font-size: 14px; + } + } + } + width: 215px; + padding: 20px 0px; + line-height: 38px; + text-align: left; + } + } + .level-top { + a { + color: #000; + font-size: 14px; + text-decoration: none; + text-align: left; + } + } + .level0.dropdown.home { + >.level0 { + width: 200px; + } + } + .level0.hasChild { + .level-top { + &:after { + content: "\f107"; + font-family: "FontAwesome"; + font-size: 15px; + padding-left: 5px; + font-weight: normal; + } + } + } + } + position: relative; + .level0 { + .level-top { + img { + display: none; + padding-right: 15px; + vertical-align: middle; + } + } + } } - .magicmenu .nav-desktop .level0 .level-top-mega, - .magicmenu .nav-desktop .level0.dropdown>.level0, - .vmagicmenu .nav-desktop .level0 .level-top-mega, - .vmagicmenu .nav-desktop .level0.dropdown>.level0 { - background-color: #ffffff; + .vmagicmenu { + .vmagicmenu-narrow { + .level0.dropdown { + .hasChild.over { + >ul { + opacity: 1; + visibility: visible; + } + } + >.level0 { + li { + a { + span { + font-size: 14px; + } + } + } + width: 215px; + padding: 20px 0px; + line-height: 38px; + text-align: left; + border-width: 0px; + border-style: solid; + position: absolute; + left: 100%; + z-index: 999; + opacity: 0; + visibility: hidden; + top: 0 !important; + min-height: 100%; + top: 0; + } + .hasChild { + position: relative; + margin: 0; + >a { + &:before { + content: "\f105"; + display: block; + line-height: 38px; + font-size: 13px; + position: absolute; + right: 15px; + text-align: right; + font-family: FontAwesome; + } + } + ul { + position: absolute; + left: 100%; + top: 0; + opacity: 0; + visibility: hidden; + border-width: 1px; + border-style: solid; + padding: 20px 0px; + min-width: 200px; + z-index: 1; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + list-style: none; + li { + margin: 0; + } + } + &:hover { + >ul { + opacity: 1; + visibility: visible; + } + } + } + li { + margin: 0; + } + .level1 { + a { + padding: 0 18px; + display: block; + text-transform: uppercase; + span { + font-size: 14px; + } + } + } + } + .level0.dropdown.hasChild.over { + >ul { + opacity: 1; + visibility: visible; + } + } + position: absolute; + margin: 0px; + padding: 5px 0 25px; + list-style: outside none none; + width: 270px; + display: none; + box-shadow: 0 0 3px 0 rgba(0,0,0,.1); + background-color: #ffffff; + .level0.dropdown.hasChild { + &:hover { + >ul { + opacity: 1; + visibility: visible; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -o-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -ms-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + } + } + } + >li { + &:nth-child(n+12) { + display: none; + } + } + >li.all-cat { + display: block; + margin-top: 15px; + float: left; + width: 100%; + clear: both; + padding: 0 18px; + } + } + .nav-desktop { + .level0 { + .level-top-mega { + .children { + ul.level1 { + .hasChild.over { + ul { + opacity: 1; + left: 90%; + visibility: visible; + } + } + .hasChild { + &:before { + color: #666; + content: "\f105"; + display: block; + line-height: 32px; + font-size: 13px; + position: absolute; + right: 30px; + text-align: right; + font-family: FontAwesome; + } + ul { + position: absolute; + left: 100%; + opacity: 0; + visibility: hidden; + top: 0; + background-color: #fff; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); + padding: 5px 0 5px 30px; + min-width: 200px; + z-index: 1; + } + &:hover { + >ul { + opacity: 1; + left: 90%; + visibility: visible; + } + } + } + } + } + background-color: #ffffff; + } + } + .level0.dropdown.over { + >.level0 { + opacity: 1; + visibility: visible; + } + } + .level0.home { + .level-top { + .icon { + display: none; + } + } + } + .level0.dropdown { + &:hover { + >.level0 { + opacity: 1; + visibility: visible; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -o-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -ms-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + } + } + >.level0 { + background-color: #ffffff; + } + } + } + .level0.over { + .level-top-mega { + opacity: 1; + visibility: visible; + } + } + .level0 { + .level-top-mega { + .children { + >a { + span { + &:after { + border-width: 0 0 1px; + border-style: solid; + content: ""; + height: 1px; + left: 0; + position: absolute; + bottom: 0px; + width: 0px; + transition: all 0.35s ease 0s; + display: none; + } + font-size: 14px; + } + &:hover { + span { + &:after { + width: 100%; + } + } + } + border-width: 0px 0 0; + border-style: solid; + display: block; + padding-top: 28px; + padding-bottom: 8px; + position: relative; + font-weight: bold; + line-height: 25px; + text-transform: uppercase; + } + a { + line-height: 30px; + text-align: left; + text-decoration: none; + position: relative; + display: block; + span { + font-size: 14px; + } + } + .level-3 { + font-size: 100%; + padding: 0 0 5px; + line-height: 30px; + a { + font-size: 14px; + text-transform: uppercase; + font-weight: 500; + } + } + .nav { + line-height: 26px; + border-bottom: 1px solid #ececec; + &:last-child { + border: none; + } + a { + font-weight: 300; + } + } + >.nav { + border: none; + } + .cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + } + .cat_label.hot { + color: #ff3d49; + } + .cat_label.Hot { + color: #ff3d49; + } + .cat_label.HOT { + color: #ff3d49; + } + .cat_label.sale { + color: #00bd33; + } + .cat_label.Sale { + color: #00bd33; + } + } + .children.level1 { + >a.a-image { + &::before { + display: none; + padding: 0; + } + } + } + border-width: 0px; + border-style: solid; + position: absolute; + left: 100%; + z-index: 999; + opacity: 0; + visibility: hidden; + top: 0 !important; + min-height: 100%; + padding: 0 15px; + .content-mega { + margin: 0; + padding: 0px; + } + .mega-block-top { + width: 100%; + } + .mega-block-bottom { + width: 100%; + clear: both; + padding: 25px 0 0px; + img { + margin: 0 auto; + } + } + .mage-column { + .children { + float: left; + width: 235px; + text-align: left; + padding: 0 15px; + margin: 0; + ul { + list-style: outside none none; + li { + margin: 0; + position: relative; + } + } + } + li { + margin: 0; + } + } + } + padding: 0; + margin: 0; + float: left; + line-height: 39px; + width: 100%; + list-style: none; + position: static; + &:hover { + .level0 { + background-color: transparent; + } + .level-top-mega { + opacity: 1; + visibility: visible; + box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -o-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + -ms-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); + } + } + .level-top { + border-bottom: 1px solid #e6e6e6; + margin: 0px 18px; + padding: 0px; + font-size: 100%; + text-decoration: none; + display: block; + outline: medium none; + position: relative; + img { + vertical-align: middle; + margin-right: 10px; + display: inline-block; + } + span { + font-size: 14px; + vertical-align: middle; + } + } + .level0 { + .children { + >ul { + margin: 0; + padding: 20px 0 35px; + position: relative; + } + } + } + .cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + &:before { + border-color: transparent; + border-style: solid; + border-top-color: #009966; + border-width: 6px 10px 0 0; + content: ""; + height: 0; + position: absolute; + left: 10px; + top: 17px; + transition: border-color 450ms ease-in-out 0s; + width: 0; + display: none; + } + } + .cat_label.Hot { + color: #ff3d49; + background-color: #dc1212; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.hot { + color: #ff3d49; + background-color: #dc1212; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.HOT { + color: #ff3d49; + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.Sale { + color: #00bd33; + background-color: #ff6600; + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.sale { + color: #00bd33; + background-color: #ff6600; + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + } + .cat_label.New { + border-top-color: #009966; + } + .cat_label.SALE { + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #ff6600; + } + } + display: block !important; + position: relative; + padding: 0px; + z-index: 90; + width: 270px; + float: left; + .block-vmagicmenu-content { + padding: 0px; + position: absolute; + } + .vmagicmenu-narrow.over { + display: block; + } + .block-title { + padding: 0 30px; + line-height: 49px; + span { + font-size: 24px; + vertical-align: middle; + } + span.fa { + &:before { + content: "\e871"; + font-family: 'Linearicons-Free'; + } + } + .vmagicmenu-subtitle { + padding: 0 0 0 15px; + font-size: 14px; + text-transform: uppercase; + } + } + .level0.last { + border: none; + } + .level0.hasChild { + .level-top { + &:after { + content: "\f105"; + font-family: FontAwesome; + float: right; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + vertical-align: middle; + font-size: 14px; + position: relative; + } + } + } + p { + line-height: 30px; + text-align: left; + text-decoration: none; + position: relative; + display: block; + } + .level-top { + a { + color: #fff; + font-size: 14px; + text-decoration: none; + text-align: left; + color: #000; + } + } + .banner-menu-position { + img { + margin-left: -30px; + } + } } - .vmagicmenu .level-top a { - color: #000; + .sections { + .nav-sections-item-content { + >.navigation { + display: none; + } + } } .nav-sections-item-content { + .magicmenu { + position: relative; + display: block; + text-align: left; + } box-sizing: border-box; - margin-left: auto; - margin-right: auto; - max-width: 1280px; - padding-left: 20px; - padding-right: 20px; - width: auto; + margin-left: auto; + margin-right: auto; + max-width: 1280px; + padding-left: 20px; + padding-right: 20px; + width: auto; + } + .mage-column.mega-block-left { + float: left; + } + .mage-column.mega-block-right { + float: right; + padding: 10px 0 0; + } + .block-left { + float: left; + } + .block-right { + float: left; + } + .cat-mega { + float: left; + } + .block-bottom { + clear: both; + } + .mage-column-custom { + padding-top: 32px; + } + .header-container-fixed { + .magicmenu { + .nav-desktop { + .level0 { + .level-top { + span.cat_label { + top: 0px; + } + } + } + } + } + } + .all-cat { + display: block; + margin-top: 10px; + span { + padding: 0px; + cursor: pointer; + display: block; + line-height: normal; + width: 100%; + clear: both; + font-size: 14px; + &:after { + content: "\f0d7"; + font-family: FontAwesome; + padding-left: 5px; + } + } + &:hover { + span { + color: #333; + } + } + } + .sidebar { + .accordion-container { + .all-cat { + margin-top: 20px; + padding: 0 18px; + } + .level0 { + .level-top { + img { + display: none; + } + } + } + margin-bottom: 30px; + .meanmenu-accordion { + border-style: solid; + border-width: 1px; + border-color: #e6e6e6; + padding: 0px 0px 34px; + } + } + .nav-accordion { + padding: 13px 18px 0; + } } - .vmagicmenu .vmagicmenu-narrow { - background-color: #ffffff; + .accor-title { + font-size: 18px; + font-weight: bold; + line-height: 1.35; + margin: 0; + padding: 15px 18px; + position: relative; + text-align: left; + text-transform: uppercase; + border-bottom: 1px solid #e6e6e6; } - .nav-open .navigation .level0 .submenu { - position: static; + ul.nav-accordion { + line-height: 0.5em; + list-style: none; + margin: 0; + padding: 0 0 30px; + li { + position: relative; + margin: 0; + a { + position: relative; + display: block; + font-size: 14px; + line-height: 30px; + margin: 0; + padding: 5px 0; + text-align: left; + text-decoration: none; + text-shadow: none; + color: #333e48; + outline: medium none; + span { + font-size: 14px; + } + &:hover { + color: #333; + } + span.cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + } + } + a.level-top { + border-bottom: 1px solid #e6e6e6; + padding: 10px 0; + span { + font-size: 14px; + } + } + >ul.submenu { + >li { + >a { + padding-left: 20px; + } + } + } + ul { + li { + ul { + li.parent { + >a { + padding: 0 0 0 20px; + } + } + } + } + li.parent { + >a { + span { + &:before { + display: none; + } + } + } + } + } + } + li.last { + border-bottom: 0 none; + } + ul { + ul { + li { + &:hover { + a { + &:before { + color: #333; + } + } + } + a { + &:before { + color: #cccccc; + content: "\f105"; + display: inline-block; + font-family: "FontAwesome"; + font-size: 13px; + padding-right: 15px; + text-align: right; + } + } + } + ul { + li { + a { + margin-left: 20px; + } + } + } + } + margin: 0; + padding: 0px; + list-style: none; + li { + clear: both; + margin: 0; + padding: 0; + a { + outline: none; + } + } + li.active { + font-weight: normal; + } + } + ul.submenu { + display: none; + } + .expand { + border: 0; + cursor: pointer; + display: block; + font-size: 0 !important; + height: 19px; + position: absolute; + right: 0px; + top: 10px; + width: 19px; + padding: 0 !important; + &:before { + content: "\f106"; + color: #333; + font-family: FontAwesome; + display: inline-block; + font-size: 17px; + text-align: center; + width: 18px; + line-height: 30px; + font-weight: normal; + } + } + .collapse { + border: 0; + cursor: pointer; + display: block; + font-size: 0 !important; + height: 19px; + position: absolute; + right: 0px; + top: 10px; + width: 19px; + padding: 0 !important; + &:before { + content: "\f107"; + color: #7f7f7f; + font-family: FontAwesome; + display: inline-block; + font-size: 17px; + text-align: center; + width: 18px; + line-height: 30px; + font-weight: normal; + content: "\f107"; + color: #7f7f7f; + } + &:hover { + &:before { + color: #333; + } + } + } + li.level0 { + >a { + >span { + >.cat-label { + position: inherit; + } + >.pin-bottom { + &:before { + position: inherit; + right: 6px; + top: 22px; + width: 0; + height: 0; + content: ""; + border-style: solid; + border-width: 0; + } + } + } + } + } + } + ul.nav-mobile { + ul.submenu { + display: none; + } + } + .nav-accordion { + >li { + &:nth-child(n+10) { + display: none; + } + } + } + .level-top-mega { + .mage-column.cat-mega { + margin: 0; + list-style: outside none none; + } + } + .fixed { + z-index: 999; + width: 100%; + .custom-menu { + padding-bottom: 7px; + padding-top: 10px; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); + } + .quick-access { + display: none; + } + } + .nav-sections { + .mean-nav { + float: left; + width: 100%; + position: absolute; + z-index: 2; + left: 0; + .mobi-title { + color: #242628; + font-size: 16px; + line-height: 52px; + margin: 0; + padding: 0 0 0 50px; + text-align: left; + text-transform: uppercase; + font-weight: 400; + position: absolute; + top: -56px; + z-index: 0; + display: none; + } + ul { + padding: 0; + margin: 0; + width: 100%; + list-style-type: none; + li { + position: relative; + float: left; + width: 100%; + margin: 0; + a { + span { + font-size: 15px; + padding: 0 14px; + } + span.icon.fa-home { + padding-right: 0; + } + span.cat_label { + background-color: #009966; + color: #fff; + font-size: 11px !important; + line-height: 16px; + font-weight: 700; + padding: 0px 5px; + margin: 0 0 0 3px; + position: absolute !important; + text-transform: uppercase; + &:after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-bottom-color: transparent !important; + border-right-color: transparent !important; + border-right-width: 5px; + border-top-width: 5px; + display: none; + } + &:before { + border-color: transparent; + border-style: solid; + border-top-color: #009966; + border-width: 6px 10px 0 0; + content: ""; + height: 0; + position: absolute; + left: 10px; + top: 17px; + transition: border-color 450ms ease-in-out 0s; + width: 0; + display: none; + } + } + .cat_label.HOT { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + .cat_label.Hot { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + .cat_label.hot { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + .cat_label.SALE { + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #ff6600; + } + .cat_label.Sale { + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #ff6600; + } + .cat_label.sale { + &:before { + border-color: #ff6600 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #ff6600; + } + } + .level-top { + span { + font-size: 15px; + padding: 0 14px; + } + } + li { + a { + font-size: 14px; + padding: 10px 0 10px 25px; + filter: alpha(opacity=75); + visibility: visible; + } + li { + a { + font-size: 14px; + padding: 10px 0 10px 40px; + } + li { + a { + padding: 1em 20%; + } + li { + a { + padding: 1em 25%; + } + } + } + } + } + .expand { + cursor: pointer; + top: 0; + right: 0px; + width: 40px; + height: 45px; + text-align: center; + line-height: 45px; + padding: 0px !important; + text-align: center; + position: absolute; + z-index: 2; + font-weight: 300; + border: none !important; + display: block; + font-size: 0; + &:before { + font-family: FontAwesome; + display: inline-block; + font-size: 22px; + text-align: center; + width: 18px; + line-height: 45px; + font-weight: normal; + content: "\f106"; + color: #ccc; + } + } + .collapse { + cursor: pointer; + top: 0; + right: 0px; + width: 40px; + height: 45px; + text-align: center; + line-height: 45px; + padding: 0px !important; + text-align: center; + position: absolute; + z-index: 2; + font-weight: 300; + border: none !important; + display: block; + font-size: 0; + &:before { + font-family: FontAwesome; + display: inline-block; + font-size: 22px; + text-align: center; + width: 18px; + line-height: 45px; + font-weight: normal; + content: "\f107"; + color: #ccc; + } + } + span.level-top { + span.cat_label { + &:before { + border-color: transparent; + border-style: solid; + border-top-color: #009966; + border-width: 6px 10px 0 0; + content: ""; + height: 0; + position: absolute; + left: 10px; + top: 17px; + transition: border-color 450ms ease-in-out 0s; + width: 0; + display: none; + } + } + span.cat_label.HOT { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + span.cat_label.Hot { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + span.cat_label.hot { + &:before { + border-color: #dc1212 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); + } + background-color: #dc1212; + } + } + } + } + } + .navigation { + .parent { + .level-top { + &:after { + display: none !important; + } + } + } + } + } + .mean-nav { + ul { + li { + a { + span.cat_label.hot { + color: #ff3d49; + } + span.cat_label.Hot { + color: #ff3d49; + } + span.cat_label.HOT { + color: #ff3d49; + } + span.cat_label.sale { + color: #00bd33; + } + span.cat_label.Sale { + color: #00bd33; + } + } + } + } + } + .page-wrapper { + overflow-x: hidden; + } + .nav-open { + .navigation { + .level0 { + .submenu { + position: static; + } + } + } + } + @media only screen and (min-width:991px) { + .nav-mobile { + display: none !important; + } } @media (max-width: 991px) { - .nav-sections .mean-container .mean-nav ul li.home a span.icon, - .nav-sections-item-content .vmagicmenu, - .nav-sections-item-content .magicmenu .nav-desktop, - .header .magicmenu .level0 .level-top img { - display: none !important; - visibility: hidden; + .nav-sections-item-content { + >.navigation { + .nav-mobile { + display: block !important; + padding: 0; + display: block !important; + padding: 0; + } + } + .vmagicmenu { + display: none !important; + visibility: hidden; + } + .magicmenu { + .nav-desktop { + display: none !important; + visibility: hidden; + } + } } - .navigation .submenu:not(:first-child) ul { - display: block; - padding-left: 15px; + .sections { + .nav-sections-item-content { + >.navigation { + display: block !important; + padding: 0; + display: block !important; + padding: 0; + } + } } + .nav-sections { - height: 100%; - left: calc(~"-1 * (100% - 54px)"); - overflow: auto; - position: fixed; - top: 0px; - transition: left 0.3s ease 0s; - -moz-transition: left 0.3s ease 0s; - -webkit-transition: left 0.3s ease 0s; - -o-transition: left 0.3s ease 0s; - -ms-transition: left 0.3s ease 0s; - width: calc(~"100% - 54px"); - } - .nav-sections-item-content > .navigation .nav-mobile, - .sections .nav-sections-item-content > .navigation { - display: block !important; - padding: 0; - } - .page-header .logo { - margin: 0 0 10px 40px; + .mean-container { + .mean-nav { + ul { + li.home { + a { + span.icon { + display: none !important; + visibility: hidden; + } + } + } + } + } + } + height: 100%; + left: calc(~"-1 * (100% - 54px)"); + overflow: auto; + position: fixed; + top: 0px; + transition: left 0.3s ease 0s; + -moz-transition: left 0.3s ease 0s; + -webkit-transition: left 0.3s ease 0s; + -o-transition: left 0.3s ease 0s; + -ms-transition: left 0.3s ease 0s; + width: calc(~"100% - 54px"); + .navigation { + .level0 { + >.level-top { + display: block; + } + } + } + } + .header { + .magicmenu { + .level0 { + .level-top { + img { + display: none !important; + visibility: hidden; + } + } + } + } + } + .navigation { + .level0.active { + >a { + &:not(.ui-state-active) { + border-color: #ff5501; + border-style: solid; + border-width: 0 0 0 8px; + color: #333; + } + } + } + .level0.has-active { + >a { + &:not(.ui-state-active) { + border-color: #ff5501; + border-style: solid; + border-width: 0 0 0 8px; + color: #333; + } + } + } + .submenu { + &:not(:first-child) { + ul { + display: block; + padding-left: 15px; + } + } + } + } + .page-header { + .logo { + margin: 0 0 10px 40px; + } + .nav-toggle { + display: inline-block; + line-height: normal; + padding: 0px; + vertical-align: middle; + top: calc(50% - 15px); + left: 15px; + width: 30px; + } } .nav-toggle { - cursor: pointer; - display: block; - font-size: 0; - text-decoration: none; - top: 0px; - z-index: 14; - right: 50px; - } - .menu-mobile .nav-toggle, .page-header .nav-toggle { - display: inline-block; - - line-height: normal; - padding: 0px; - vertical-align: middle; - top: calc(50% - 15px); - left: 15px; - } - .page-header .nav-toggle { - width: 30px; - } - .nav-open .nav-sections { - left: 0; - z-index: 99; - box-shadow: 0; - } - .nav-open .nav-toggle:after { - background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; - content: ""; - display: block; - height: 100%; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 1; - } - .nav-toggle:before { - display: inline-block; - font-size: 30px; - font-weight: normal; - line-height: inherit; - overflow: hidden; - text-align: center; - vertical-align: middle; - } - .nav-before-open .nav-toggle:before { - position: static; - content: "\f00d"; - font-family: FontAwesome; - content: '\e609'; - font-family: 'icons-blank-theme'; - color: #fff; - font-size: 20px; - } - .nav-sections .navigation .level0 > .level-top { + cursor: pointer; display: block; + font-size: 0; + text-decoration: none; + top: 0px; + z-index: 14; + right: 50px; + &:before { + display: inline-block; + font-size: 30px; + font-weight: normal; + line-height: inherit; + overflow: hidden; + text-align: center; + vertical-align: middle; + } } - .nav-open .nav-sections .mean-nav ul li a:hover { - color: #ffffff; - background-color: #333333; + .menu-mobile { + .nav-toggle { + display: inline-block; + line-height: normal; + padding: 0px; + vertical-align: middle; + top: calc(50% - 15px); + left: 15px; + } } - .nav-open .navigation .level0.active > .level-top, - .nav-open .navigation .level0.has-active > .level-top { - border-width:0 0 0px; - border-color: #888; - /*color: #ffffff;*/ + .nav-open { + .nav-sections { + left: 0; + z-index: 99; + box-shadow: 0; + } + .nav-toggle { + &:after { + background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; + content: ""; + display: block; + height: 100%; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 1; + } + } + .navigation { + .level0 { + .submenu { + border: none; + background: transparent; + box-shadow: none; + } + } + } } - .nav-open .navigation .level0 .submenu { - border: none; - background: transparent; - box-shadow: none; + .nav-before-open { + .nav-toggle { + &:before { + position: static; + content: "\f00d"; + font-family: FontAwesome; + content: '\e609'; + font-family: 'icons-blank-theme'; + color: #fff; + font-size: 20px; + } + } + } + } + @media (max-width: 992px) { + .nav-sections-item-content { + display: block !important; } } -} +}