/*** ESSENTIAL STYLES ***/
.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: 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%; padding-top: 0; }

/* Effect Lift */
.sf-menu ul { transition: all .2s ease-in-out; transform-origin: top center; visibility: hidden; transform: translate3d(0,10px,0); display: block !important; }
.sf-menu li:hover > ul { visibility: visible; transition-delay: .2s; transform: translate3d(0,0,0); }

/* First level */
.sf-menu { float: left; }
.sf-menu li:hover, 
.sf-menu li.sfHover { -webkit-transition: none; transition: none; }
.sf-menu li a { padding: 0.678em 1.0em; text-decoration: none; zoom: 1; font-size: 16px; }
.sf-menu li:hover a { color: #808080; }
.sf-menu li { background: none; white-space: nowrap; *white-space: normal; -webkit-transition: background .2s; transition: background .2s; }
.sf-menu li.current-menu-item a, 
.sf-menu li.current_page_item a { color: #808080; }

/* Second and third level */
.sf-menu ul { min-width: 12em; *width: 12em; border: 1px solid #e1e1e1; box-shadow: 2px 2px 6px rgba( 0, 0, 0, .2 ); }
.sf-menu ul li, 
.sf-menu ul ul li { border-bottom: 1px solid #e1e1e1; background-color: rgba( 255, 255, 255, 1.0 ); }
.sf-menu ul li:last-child, 
.sf-menu ul ul li:last-child { border-bottom: none; }
.sf-menu li li:hover, 
.sf-menu li li.sfHover { background: #f6f6f6; }
.sf-menu ul li a, 
.sf-menu ul ul li a, 
.sf-menu li:hover li a { color: #333333; }
.sf-menu ul li a, 
.sf-menu ul ul li a { padding: .80em .75em; }
.sf-menu ul li.current-menu-item, 
.sf-menu ul li.current_page_item { background: #f5f5f5; }
.sf-menu ul li.current-menu-item a, 
.sf-menu ul li.current_page_item a { color: #333333; }

/* Menu Vertical */
.sf-menu.sf-vertical { width: 100%; margin-bottom: 25px; }
.sf-menu.sf-vertical ul { left: 100%; top: 0; width: 250px; }
.sf-menu.sf-vertical > li { float: none; border-bottom: 1px solid #e1e1e1; }
.sf-menu.sf-vertical li a { padding: 0.678em 1.0em; }
.sf-menu.sf-vertical li { width: 100%; }
.sf-menu.sf-vertical.sf-arrows > li > .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ border-left-color: rgba(255,255,255,.5); }
.sf-menu.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.sf-menu.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.sf-menu.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after { border-left-color: white; }