/* +++++++++++++++++++++++++++++++++++
  Grundfunktionen
+++++++++++++++++++++++++++++++++++ */
.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: 999;}
.sf-menu > li             {float: left; display:inline;}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul  {display: block;}
.sf-menu a                {display: block; position: relative; text-decoration: none;}
.sf-menu .trenner         {display: block; position: relative;}



/* ==========================================================
  SKIN
============================================================= */
.sf-menu        {float: left; display:block; list-style:none; width:80%;}
.sf-menu:after  {}
.sf-menu > li.level-1:last-child 	      {border-right:none;}
/* der wird nur für Mobile gebraucht */
.opener {display:none;}

/* +++++++++++++++++++++++++++++++++++
   Toplevel
+++++++++++++++++++++++++++++++++++ */
.sf-menu li.level-1       {
	background: transparent;
	white-space: nowrap;
	*white-space: normal;
	-webkit-transition: background .17s;
	transition: background .17s;
}
.sf-menu li.level-1               {/*border-right:1px solid #CCC;*/ /*width:16.6667%;*/}
.sf-menu li.level-1.last 	        {border-right:none;}

.sf-menu li.level-1 a             {font-size:15px; padding:1.5em 1.5em; color: #444;}
.sf-menu li.level-1 a:hover       {color: #FFF;}
.sf-menu li.level-1:hover         {background:#ADB429;}

.sf-menu li.level-1.parent > a,
.sf-menu li.level-1.current > a   { color:#FFF;/*background-image:url(../images/icons/mainnav-current.svg); background-repeat: no-repeat; background-position: 10% 50%;*/}


/* +++++++++++++++++++++++++++++++++++
   Aufklapper nach unten (2. Ebene)
+++++++++++++++++++++++++++++++++++ */
.sf-menu ul                       {box-shadow: 2px 4px 7px rgba(0,0,0,0.3); min-width: 12em; *width: 12em;}
.sf-menu ul li.level-2            {white-space: nowrap; *white-space: normal; -webkit-transition: background .17s; transition: background .17s;}

.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
	background: #ADB429; color:#FFF;
	-webkit-transition: none;
	transition: none;
}
.submenu                              {background: #ADB429; padding-bottom:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

.sf-menu ul li.level-2                {background: #ADB429; border-bottom:1px solid #C4CD07;}
.sf-menu ul li.level-2 a              {font-size:14px; padding:0.5em 2.0em 0.5em 1em; color:#FFF;}
.sf-menu ul li.level-2 a:hover        {color:#FFF;}
.sf-menu ul li.level-2:hover          {background-color:#82871F;}
.sf-menu li.level-2.current > a       {background-color:#82871F !important; color:#FFF !important;}
/*.sf-menu ul > li.level-2:last-child 	{border-bottom:5px solid #C7D309;}*/

/* Arrowfarbe für active Level-2 */
.sf-arrows ul .level-2.current .sf-with-ul:after,
.sf-arrows ul li.level-2.current > .sf-with-ul:focus:after,
.sf-arrows ul li.level-2.current:hover > .sf-with-ul:after  {border-left-color: #FFF;}





/* +++++++++++++++++++++++++++++++++++
   Aufklapper seitlich (3. Ebene) | Gibts nicht!
+++++++++++++++++++++++++++++++++++ */
.sf-menu ul ul                        {top:0; left:100%;}
.sf-menu ul ul                        {box-shadow: 3px 4px 5px rgba(0,0,0,0.3); min-width: 12em; *width: 12em;}
.sf-menu ul li.level-3                {white-space: nowrap; *white-space: normal; -webkit-transition: background .17s; transition: background .17s;}

.sf-menu ul li.level-3                {background:#F5F5F5; border-bottom:1px solid #DDD;}
.sf-menu ul li.level-3 a              {font-size:14px; padding:0.5em 1em; color:#555;}
.sf-menu ul li.level-3 a:hover        {color:#000;}
.sf-menu ul li.level-3:hover          {background-color:#CDE6E9;}
.sf-menu li.level-3.current > a       {background-color:#C9A203 !important; color:#FFF !important;}

.sf-menu ul > li.level-3:last-child 	{border-bottom:none;}

/* Aufklapper seitlich (3. Ebene) nach links */
.sf-menu ul ul.lefti                  {top:0; left:-100%;}




/* +++++++++++++++++++++++++++++++++++
  Trenner
+++++++++++++++++++++++++++++++++++ */
.sf-menu ul li.level-2.trenner        {font-size:14px; padding:1em 1em 0.5em 1em; color:#111; font-weight:700;}
.sf-menu ul li.level-2.trenner:hover  {background-color:#F5F5F5;}
/* Nur dickere Trennline im ersten Aufklapper */
.sf-menu ul li.level-2.minitrenner    {border-width:2px; border-color:#CCC;}



/* +++++++++++++++++++++++++++++++++++
  Arrows (alle ausser IE7)
+++++++++++++++++++++++++++++++++++ */
.sf-arrows .sf-with-ul {padding-right: 2.5em;	*padding-right: 1em;}

/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
/*	position: absolute;	top: 55%;	right: 1em;*/ /* Arrows links */
	position: absolute;	bottom: 0;	left: 48%;
	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,.8);
}

.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: #FFF; /* 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: #dFeEFF; /* 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;
}

.sf-arrows .level-2 .sf-with-ul:after {right:0.55em;}

/* Arrows rechts im Level-2 */
.sf-arrows ul .level-2 .sf-with-ul:after,
.sf-arrows ul li.level-2 > .sf-with-ul:focus:after,
.sf-arrows ul li.level-2:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {border-left-color: #00AFCB;}


.sf-menu .home {display:none;}
@media only screen and (max-width:1240px){
  .sf-menu              {width:85%;}
  .sf-menu li.level-1 > a       {padding-left:2rem; padding-right:2rem; text-align:center;}
}

@media only screen and (max-width:1199px){
  .sf-menu li.level-1 > a       {/*padding-left:1.5rem; padding-right:1.5rem; text-align:center;*/}
  .sf-menu li.level-1.current > a   {background-position: 5% 50%;}
  .sf-arrows .sf-with-ul:after  {right:5%;}
}


@media only screen and (max-width: 900px) {
  .sf-menu {display:none;}
}