.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu {}
.sf-menu > li {
	position:relative;
	float:left;
	/*width:132.2px;*/
	width:311px; 
	padding-right:2px;
	font:400px 18px/22px 'Oswald', sans-serif;
	text-align:center;
	/*text-shadow:1px 1px 1px #c9c7c7;*/
	letter-spacing:-0.5px;
	background:right 15px no-repeat;
}

.sf-menu > li.last-item{background:none; padding-right:0;}
.sf-menu > li > a {
	display:block;
	font-weight:normal;
	color:#232428;
	background:none;
	padding-top: 0px; // Rand unten
	padding-right: 0;
	padding-bottom: 4px; // Rand unten
	padding-left: 0;
}
.sf-menu > li.sfHover > a,.sf-menu > li > a:hover{text-decoration:none; text-shadow:none; color:#7f7f7f;}
.sf-menu > li.current > a{
	background-position:center top; 
	color:#fff; 
	text-shadow:none;
	background:#D07060;		// Hintergrund Top-Level , titelzeile: B01F09 / d75 89d
}  

/***submenu***/
.sf-menu ul {
	position:absolute;
	top:-999em;
	z-index:99;
	/*width:186px;*/
	display:none;
	background:#D07060;
}
.sf-menu li li{
	width:100%;
	padding:0px;
	padding-top:1px;
	position:relative;
	font:400px 12px/20px 'Oswald', sans-serif;
	text-align:center;
	/*text-shadow:1px 1px 1px #c9c7c7;*/
}
.sf-menu li li a	{
	color:#2c2d31; 
	display:block; 
	background:#fff; 
	padding:5px 0; 		// Untermenu: Rand oben/unten
	font-weight:normal;
}
.sf-menu li li > a:hover,.sf-menu li li.sfHover > a { 
	color:#fff; 			// Submenu: Textfarbe
	text-decoration:none; 
	background:#D07060; 	// Submenu: Hintergrund d75 89d
	text-shadow:none;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul { left:0px;	top:30px; }		// Untermenu
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {	top:-999em; }

/***subsubmenu***/
.sf-menu ul ul {
	position:absolute;
	top:-999em;
	z-index:99;
	width:312px;
	display:none;
	background:none;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left:185px; top:0px; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:-999em; }

.sf-menu{display:table-row;}
.sf-menu > li{display:table-cell;}
.sf-menu > li > a span.prenav { height:4px; display:block;}
.sf-menu > li > a span.linkText {clear: both;}

/* big screen */
@media only screen and (min-width: 996px) {	}

/* Design for a width of 768px */
@media only screen and (max-width: 995px){
	.sf-menu > li, .sf-menu > li li 	{ width:199px; padding-right:2px; padding-top:1px; }
	.sf-menu > li:last-child    	{ width:199px; padding:0;  }
}

/* small mobile screens */
@media only screen and (max-width: 767px) {
	.sf-menu > li, .sf-menu > li:last-child		{ width:100%; background:none; text-align:left; margin-bottom:6px;}
	.sf-menu > li li	{width:100%; background:none; text-align:left; margin-bottom:0px;}
	.sf-menu > li > a	{padding:5px; text-align:center; background:#fff;}
	.sf-menu ul 		{ position:static; width:100%;}
	.sf-menu li li 		{ text-align:left; padding-top:1px;}
	.sf-menu li li a 	{ padding:5px; text-align:center; }
	.sf-menu ul ul		{ position:static; width:100%;}
}

/* ------------------------------------------------------------------------------- */

/* Resizing Menu Buttons dynamicaly(from django view) by length of menu */
 /* big screen (e.g. Desktop)*/
@media only screen and (min-width: 996px) {
	.sf-menu > li, .sf-menu > li li 	{ width:210px; padding-right:2px; }
	.sf-menu > li:last-child 		{ width:210px; padding:0; 	}
}

/* Design for a width of 768px  (e.g. Tablets) */
@media only screen and (max-width: 995px) and (min-width: 768px) { 
	.sf-menu > li, .sf-menu > li li 	{ width:123px; padding-right:2px; }
	.sf-menu > li:last-child 		{ width:123px; padding:0; }
}


@media only screen and (min-width: 768px) {  .sf-menu > li:nth-child(3) span.prenav { height: 13px;  } }
@media only screen and (min-width: 768px) {  .sf-menu > li:nth-child(4) span.prenav { height: 13px;  } }
@media only screen and (min-width: 768px) {  .sf-menu > li:nth-child(5) span.prenav { height: 13px;  } }