/*** ESSENTIAL STYLES ***/ .sf-menu { margin: 0; padding: 0; list-style: none; position: relative; max-width: 1370px; margin: 0 auto; } ul.sf-menu li.normal_drop_down ul { margin: 0; padding: 0; list-style: none; } .sf-menu li.normal_drop_down { position: relative; } ul.sf-menu li ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .sf-menu>li { float: left; } .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: 100%; } /*** DEMO SKIN ***/ .sf-menu { margin-bottom: 0; text-transform: uppercase; font-size: 13px; font-weight: 700; } .sf-menu ul { min-width: 12em; /* allow long menu items to determine submenu width */ *width: 12em; /* no auto sub width for IE7, see white-space comment below */ } .sf-menu a { padding: 1.1em 1em; text-decoration: none; zoom: 1; /* IE7 */ color: #fff; } .sf-menu a#sign_in { background-color: #252525; } .sf-menu li { white-space: nowrap; /* no need for Supersubs plugin */ *white-space: normal; /* ...unless you support IE7 (let it wrap) */ -webkit-transition: background .2s; transition: background .2s; } ul.sf-menu li a { color: #fff; } ul.sf-menu li a:hover { color: #30d9a4; outline: none; } ul.sf-menu li a>sup.badge { background: #EA2227; text-transform: none; position: absolute; top: 3px; font-size: 10px; } .sf-menu ul li { background: #111; min-width: 200px; } .sf-menu ul li a { background: #111; min-width: 220px !important; padding: 0.9em 1.8em; cursor: pointer; } .sf-menu ul li a:hover { background: #30d9a4; color: #111; outline: none; } .sf-menu ul li a .badge { background: #EA2227; color: #fff; text-transform: none; font-size: 10px; } .sf-menu ul ul li { background: #111; } .sf-menu li:hover, .sf-menu li.sfHover { background: #111; /* only transition out, not in */ -webkit-transition: none; transition: none; color: #fff; } /*** arrows (for all except IE7) **/ .sf-arrows .sf-with-ul { padding-right: 2.1em; *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ } /* styling for both css and generated arrows */ .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; /* order of following 3 rules important for fallbacks to work */ border: 5px solid transparent; border-top-color: #fff; /* edit this to suit design (no rgba in IE8) */ border-top-color: rgba(255, 255, 255, .5); } .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: #30d9a4; /* IE8 fallback colour */ } /* styling for right-facing arrows */ .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #30d9a4; /* edit this to suit design (no rgba in IE8) */ border-left-color: rgba(255, 255, 255, .5); } .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: white; } #mobnav-btn:before { display: none; font-family: "fontello"; content: "\e874"; font-size: 24px; color: #427dff; cursor: pointer; } .mobnav-subarrow { display: none; } .sf-menu .sf-mega { position: absolute; display: none; top: 45px; left: 0; z-index: 9999; background: #111; padding: 10px 15px; box-sizing: border-box; width: 100%; } .sf-menu .sf-mega ul.mega_submenu { display: block; float: none; width: 100%; position: inherit; padding: 0; margin: 0; list-style: none; } .sf-menu .sf-mega ul.mega_submenu li { border-bottom: 1px dotted #333; text-transform: none; font-size: 14px; min-width: inherit; } .sf-menu .sf-mega ul.mega_submenu li a { color: #b7b7b7; padding: 7px 9px; min-width: auto; } .sf-menu .sf-mega ul.mega_submenu li a:hover { color: #000; } .sf-menu .sf-mega ul.mega_submenu li:last-child { border-bottom: none; } ul.mega_submenu li i { margin-left: 0; padding-left: 0; text-align: left; } .sf-mega h5 { border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 0; font-weight: 600; color: #fff !important; } /** VERSION 1.3 New CSS ==================== **/ ul.mega_submenu.icons li { position: relative; } ul.mega_submenu.icons li i { position: absolute; right: 25px; } /** End Version 1.3 Updated **/ @media screen and (min-width: 768px) { .sf-menu .sf-mega .col-md-3 { width: 50%; } } @media screen and (min-width: 992px) { .sf-menu .sf-mega .col-md-3 { width: 20%; } } @media (max-width: 1365px) { .sf-menu { font-size: 12px; } .sf-menu .sf-mega ul.mega_submenu li .sub-menu li { font-size: 12px; } } @media (max-width: 1279px) { .sf-menu a { padding: 1.1em 0.80em; } .sf-arrows .sf-with-ul { padding-right: 1.8em; *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ } .sf-menu .sf-mega ul.mega_submenu li { font-size: 12px; } } @media (max-width: 767px) { #mobnav-btn { cursor: pointer; } .mobnav-subarrow { display: block; height: 47px; width: 100%; background-position: top left !important; position: absolute; top: 0; right: 0; cursor: pointer; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } .sf-menu .sf-mega { padding: 10px; } /* styling for both css and generated arrows */ .sf-arrows .sf-with-ul:after { top: 50%; right: 20px; } .sf-menu { width: 100% !important; display: none; } .sf-menu.xactive { display: block !important; } .sf-menu li { float: none !important; display: block !important; width: 100% !important; } .sf-menu li a { float: none !important; } .sf-menu ul { position: static !important; display: none !important; } .sf-mega { position: static !important; display: none !important; } .xpopdrop ul { display: block !important; } .xpopdrop .sf-mega { display: block !important; } .mega_drop_down { position: relative; } }