/*** 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%; }


/*** SKIN ***/
.sf-menu > li { background:#FFFBDC; margin-left:1px; }
.sf-menu a { color: #51A451; padding: .75em 2em; text-decoration: none; zoom: 1; }
.sf-menu li li a { color:#fff; }
.caret { border-top:4px solid #51A451; }
/*.sf-menu > li > a { height:150px; text-transform: uppercase; padding:60px 30px 0; font-size:13px; }*/
.sf-menu > li.current { background:#51A451; }
.sf-menu > li.current > a { color:#FFFBDC; }
.sf-menu > li.current > a .caret { border-top:4px solid #FFFBDC; }
.sf-menu > li.current li.current { background:#EE920A; }
.sf-menu ul li { background: #FCB040; }
.sf-menu ul li:hover { background:#EE920A; } 

.sf-menu ul { box-shadow: 2px 2px 6px rgba(0,0,0,.2); min-width: 16em; *width: 16em; }
.sf-menu > li:hover, .sf-menu > li.sfHover { background: #51A451; -webkit-transition: none; transition: none; }
.sf-menu li:hover, .sf-menu li.sfHover { background: #51A451; -webkit-transition: none; transition: none; }
.sf-menu li a:hover, .sf-menu li.sfHover a { color:#FFFBDC; } 
.sf-menu li a:hover .caret { border-top:4px solid #FFFBDC; } 
.sf-menu li { white-space: nowrap; *white-space: normal; -webkit-transition: background .2s; transition: background .2s; }
.sf-menu ul ul li { background: #9AAEDB; }
.sf-menu > li .pfeilNoResponsive { display:block; margin:20px auto; }

/* Responsive */

#mobnav-btn { display: none; font-size: 20px; font-weight: bold; background-color: blue; color: white; padding: 10px; cursor: pointer; }
.mobnav-subarrow { display: none; }
@media only screen and (max-width: 992px){
	.sf-menu > li > a { padding:60px 10px 0; font-size:12px; }
}
@media only screen and (max-width: 480px) {
    #mobnav-btn { display: block; }
    .pfeilNoResponsive { display:none; }
    .mobnav-subarrow { display: block; background-position: top left!important; position: absolute; top: 8px; right: 10px; cursor: pointer; }
    .sf-menu > li { border-left:0px; }
    .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;
    }
    .xpopdrop ul {
        display: block!important;
    }
}