.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 100000; } .sf-menu .flyOutLeft ul { right: 0 !important; left: auto; } .sf-menu > li { float: left; margin-right: 10px; text-transform: uppercase; position: relative; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 16em; } .sf-menu .flyOutLeft ul ul { top: 0; left: -16em; } #topNav .sf-menu { font-size: 0.8125em; line-height: 1.2; } .sf-menu ul { width: 16em; } .sf-menu a { padding: 0.8em 1em; text-decoration: none; zoom: 1; text-align: left; } .sf-menu a:link, .sf-menu a:visited { color: #000000; } .sf-menu a:hover, .sf-menu a:active { color: #20e434; } .sf-menu ul li a:link, .sf-menu ul li a:visited { color: #ffffff; } .sf-menu ul li a:hover, .sf-menu ul li a:active { color: #20e434; } .sf-menu > li > a { padding: 3px 0; } .sf-menu > li { padding-left: 15px; } .sf-menu > li:first-child { padding-left: 0; } .sf-menu > li:before { display: block; content: '|'; position: absolute; left: 0; top: 0; } .sf-menu > li:first-child:before { display: none; } .sf-menu > li:first-child a:before { content: ''; } .sf-menu ul li { text-transform: none; } .sf-menu ul li a { background: #000000; } .sf-arrows .sf-with-ul { padding-right: 1.7em; } .sf-arrows .flyOutLeft ul .sf-with-ul { padding-left: 1.7em; padding-right: 1em; } .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 0.5em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #000000; } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #000000; } .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #ffffff; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #20e434; } .sf-arrows .flyOutLeft ul .sf-with-ul:after { margin-left: -3px; left: 0.5em; border-color: transparent; border-right-color: #ffffff; } .sf-arrows .flyOutLeft ul li > .sf-with-ul:focus:after, .sf-arrows .flyOutLeft ul li:hover > .sf-with-ul:after, .sf-arrows .flyOutLeft ul .sfHover > .sf-with-ul:after { border-right-color: #20e434; border-left-color: transparent; } .goMobile-btn { display: none; font-weight: normal; cursor: pointer; padding: 0.3em 0.5em 0.4em 40px; background: url(https://juicebox.easx.eu/layout/mobileMenu-icon.png?v-637211276026890000) no-repeat left 5px; color: #000000; text-indent: -9999em; } .goMobile-btn.active { background-position: left -41px; } .goMobile-btn:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .goMobile-subArrow { display: none; } .product-menu { width: 92%; max-width: 90em; margin: 0 auto; list-style: none; padding: 0; } .product-menu * { margin: 0; padding: 0; list-style: none; } .product-menu li { position: relative; } .product-menu ul { position: absolute; display: none; top: 100%; left: 3px; z-index: 100000; } .product-menu .flyOutLeft ul { right: 0 !important; left: auto; } .product-menu > li { background: none !important; text-transform: uppercase; display: block; font-family: 'Oswald', sans-serif; font-weight: 400; float: left; position: relative; } .product-menu li:hover > ul, .product-menu li.sfHover > ul { display: block; } .product-menu ul ul { top: 0; left: 16em; } .product-menu .flyOutLeft ul ul { top: 0; left: -16em; } .product-menu { line-height: 1; } .product-menu ul { width: 16em; } .product-menu a { display: block; position: relative; text-decoration: none; zoom: 1; text-align: left; font-size: 0.8125em; } .product-menu a:link, .product-menu a:visited { color: #ffffff; } .product-menu a:hover, .product-menu a:active { background: #ffffff; color: #222222; } .product-menu ul li a:link, .product-menu ul li a:visited { color: #ffffff; } .product-menu ul li a:hover, .product-menu ul li a:active { background: #ffffff; color: #222222; } .product-menu > li > a { padding: 1em 1.125em; font-size: 1em; } .product-menu li { vertical-align: top; } .product-menu > li li { font-weight: normal; } .product-menu ul li { text-transform: none; } .product-menu ul li a { background: #000000; padding: 0.8em; } .product-menu.sf-arrows .sf-with-ul { padding-right: 1.7em; } .product-menu.sf-arrows .flyOutLeft ul .sf-with-ul { padding-left: 1.7em; padding-right: 1em; } .product-menu.sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 0.5em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #ffffff; } .product-menu.sf-arrows > li > .sf-with-ul:focus:after, .product-menu.sf-arrows > li:hover > .sf-with-ul:after, .product-menu.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #222222; } .product-menu.sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #ffffff; } .product-menu.sf-arrows ul li > .sf-with-ul:focus:after, .product-menu.sf-arrows ul li:hover > .sf-with-ul:after, .product-menu.sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #20e434; } .product-menu.sf-arrows .flyOutLeft ul .sf-with-ul:after { margin-left: -3px; left: 0.5em; border-color: transparent; border-right-color: #ffffff; } .product-menu.sf-arrows .flyOutLeft ul li > .sf-with-ul:focus:after, .product-menu.sf-arrows .flyOutLeft ul li:hover > .sf-with-ul:after, .product-menu.sf-arrows .flyOutLeft ul .sfHover > .sf-with-ul:after { border-right-color: #20e434; border-left-color: transparent; } .goMobile-btn-product { display: none; font-weight: normal; cursor: pointer; padding: 0.5em 0.5em 0.5em 40px; background-image: url(https://juicebox.easx.eu/layout/mobileMenu-icon.png?v-637211276026890000); background-repeat: no-repeat; background-position: left 8px; color: #ffffff; position: relative; z-index: 999; text-transform: uppercase; } .goMobile-btn-product.active { background-position: left -41px; } .goMobile-btn-product:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .goMobile-product-subArrow { display: none; }