.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:400 18px/22px 'Oswald', sans-serif;
	text-align:center;
	text-transform:uppercase;
	/*text-shadow:1px 1px 1px #c9c7c7;*/
	letter-spacing:-0.5px;
	background:url(pic2.gif) right 15px no-repeat;
}
/*
.locked > a > .linkText {
	padding-left 30px;
	background:url("lock_icon.svg") left center no-repeat;
	background-size: contain;
	padding-left: 15px;
}*/
.locked > a > .linkText:before, .sf-menu >li>ul>.locked>a:before {
	content: '';
	background:url("lock_icon.svg") left center no-repeat;
	background-size: contain;
	padding-left: 16px;
}
	.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;
	padding-right: 0;
	padding-bottom:29px;
	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:#E7793C;}
		.sf-menu > li > a span.arrow{
	display:block;
	position:absolute;
	top:60px;
	left:0;
	width:100%;
	height:6px;
	background:url(menu-arrow.gif) center top no-repeat;
}
			.sf-menu > li.current > a span.arrow{background-position:center bottom;}
/***submenu***/
.sf-menu ul {
	position:absolute;
	top:-999em;
	z-index:99;
	/*width:186px;*/
	display:none;
	background:none;
}
.sf-menu li li{
	width:100%;
	padding:0px;
	position:relative;
	font:400 12px/20px 'Oswald', sans-serif;
	text-align:center;
	text-transform:uppercase;
	/*text-shadow:1px 1px 1px #c9c7c7;*/
}
	.sf-menu li li a{color:#2c2d31; display:block; background:#fff; padding:27px 0; font-weight:normal;}
		.sf-menu li li > a:hover,.sf-menu li li.sfHover > a{color:#fdfdfd; text-decoration:none; background-color:#2b2b2b; text-shadow:none;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0px;
	top:72px;
}
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;
}
	.sf-menu li li li{float:left; padding-left:1px; width:187px;}
		.sf-menu li li li a:hover{background-color:#535353;}
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;
}

#mainNav{width:100%; display:table;}
.sf-menu{display:table-row;}

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

/* big screen */
@media only screen and (min-width: 996px) {	
  /* NOTE: width and padding of
    .sf-menu > li, .sf-menu > li li, .sf-menu > li:last-child
  will be done in "cheich_base/templates/dynamic.css" !this supports dynamic length of menu-entrys, by corresponding django.view!
  */
}

/* Design for a width of 768px */
@media only screen and (max-width: 995px){
	.sf-menu > li, .sf-menu > li li {
        width:146px;
		padding-right:2px;
  }
  .sf-menu > li:last-child {
    background:none;padding:0 0 0 0;width:148px;
  }
  /* NOTE: width and padding of
    .sf-menu > li, .sf-menu > li li, .sf-menu > li:last-child
  will be done in "cheich_base/templates/dynamic.css" !this supports dynamic length of menu-entrys, by corresponding django.view!
  */
}
/* smaller "tablet" screens */
/* Design for a width of 480px and 320px */
/*@media only screen and (max-width: 810px) {
	/* 2DO: here must be some code wich smalers the page size till width hit 767px -> momently buggy*/ 
	/*.sf-menu > li a {width:90%;}
}*/
/* 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:10px 0 9px 22px; background-color:#fff;}
	.sf-menu > li > a span.arrow, .sf-menu li li a span.arrow{display:block; position:absolute; top:18px; left: auto; right:22px; width:11px; height:6px; background:url(menu-arrow.gif) center top no-repeat;}
		.sf-menu li li.sfHover a span.arrow, sf-menu li li a:hover span.arrow{background-position:center bottom;}
	.sf-menu ul{position:static; width:100%;}
	.sf-menu li li{text-align:left; padding-top:1px;}
	.sf-menu li li a{padding:10px 0 9px 22px;}
	.sf-menu ul ul{position:static; width:100%;}
	.sf-menu li li li{padding:0; float:none; width:100%;}
	.sf-menu li li li a{background-color:#fafafa; padding:8px 0 8px 22px;}
}