/* CSS Document
 
BLAU der Türe
color: rgba(0,62,144,1.0);
#003e90
 
Dunkelgrau TEXT
color: rgba(225,221,0,1.0);
#29363f
 
Dunkles Grau
color: rgba(108,114,122,1.0);
#6c727a

Mittleres Grau
color: rgba(163,167,175,1.0);
#a3a7af

Helles Grau
color: rgba(191,194,198,1.0);
#bfc2c6
*/
#navigationTop{
	/* float: left; */
	width: 100%;
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
	background: transparent;
	border-top: 1px solid #a3a7af;
    height:50px;
}

.subPages a.is-active{
    color:#000000;
}

.subPages a.is-current{
    color:#000000;
}

headerresp {
	display: block;
}
.sf-menu, .sf-menu * {/* NEU*/
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu {/*  NEU Position responsive Menue*/
	position: relative;
	float: left;
	display: none;
	width: 100%;
	background-color: tranparent;
	margin: 0px 0px 0px 0px;
	border: 0px dotted red;
}
.sf-menu a {
	font-size: 15px;
}
.sf-menu ul {
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
/* Menue responsiv Farbe 1. Ebene*/

.sf-menu > li,
.toplinkNo {
	float: left;
	width: 100%;
	text-align: left;
}
.sf-menu li {/*Position 1. Ebene*/
	position: relative;
	background-color: #fff;
	padding: 10px 0px 10px 0px;
	border-top:1px transparent;
		margin: 2px 0px 0px 0px;
}
.sf-menu li a{/*Font 1. Ebene*/
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
	font-size: 1.2em;
	text-decoration: none;
	color:#6c727a;
	padding-left:20px;
}
.sf-menu li a:hover{/*Font 1. Ebene*/
	color: #003e90;
}
/* Menue responsiv 2. Ebene*/
.sf-menu li li {
	background-color:#bfc2c6;
	margin: 10px 0px -10px 0px;
	padding: 10px 0px 10px 0px;
	border-top:1px  solid #fff;
}
.sf-menu li li a{
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
	font-size: 1.1em;
	color: #29363f;
	padding:0px 0px 0px 40px;
}
.sf-menu li li a:hover{
	color: #000;
}
/* Menue responsiv 3. Ebene*/

.sf-menu li li li {
	background-color:#8d8d8d;
}
.sf-menu li li li a{
	color: #fff;
	padding-left:60px;
}
.sf-menu li li li a:hover{
	color: #bfc2c6;
	padding-left:60px;
}
/* ######################################
####  PFEILE (for all except IE7)   ####
#######################################*/
.sf-arrows .sf-with-ul {
	padding-right: 2.0em;
	*padding-right: 2em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.0em;
	margin-top: 0px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #bfc2c6; /* edit this to suit design (no rgba in IE8) /*/
}
.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: #fff; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,1.0);
}
.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: #fff;
}

/* ######################################
####            Fuer grossen Screen    ####
#######################################*/

@media only screen and (min-width: 950px) {
	
	#navigationTop{
	/* float: left; */
	width: 100%;
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	z-index:999;
	border-bottom: 1px solid #a3a7af;
	border-top: 0px solid #a3a7af;
}
	headerresp {
		display: none;
	}
/* erste Menueebene */
	.sf-menu {
		display: block;
		position:relative;
		left:0;
		width: 100%;
	}
	.sf-menu, .sf-menu * {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.sf-menu > li,
	.toplinkNo {/*abstaende der Hauptmenuepunkte*/
		width: auto;
		background-color: transparent;
		text-align: left;
		padding: 6px 30px 7px 0px;
		margin: 0px 50px 0px 0px;
		display: inline-block;
	}
	/*	.toplinkNo:hover {/*Over ganze Fläche Farbe Div Hauptmenuepunkte*
		background-color: transparent;
		-webkit-transition: background-color .5s linear;
		-moz-transition: background-color .5s linear;
		-ms-transition: background-color .5s linear;
		-o-transition: background-color .5s linear;
		transition: background-color .5s linear;
	}
/* Effekt: erste Menueebene - Animierte Linie */	
/*.sf-menu > li::after {/*animierte Linie 1*
		content: '';
		display: block;
		width: 0;
		height: 2px;
		background: #29363f;
		transition: width .3s;
		margin: 3px 0px 0px 0px;
	}
	.sf-menu> li:hover::after {/*animierte Linie 2*
		width: 100%;
		//transition: width .3s;
	}
	.sf-menu> li.current  {
		background-color: #111;
		border-top: 0px solid #fff;
	}
		.sf-menu> li.current::after {/*animierte Linie bleibt stehen bei aktivem Link*
		width: 100%;
		content: '';
		display: block;
		width: 100%;
		height: 2px;
		background: #fff;
		transition: width .3s;
		margin: 3px 0px 0px 0px;
		}
	/* erste Menueebene - Animierte Linie Ende */		


	.sf-menu li {
		list-style-type:none;
		position: relative;
	}
	
		.sf-menu li a {/*font, farbe */
		opacity: 1;
		font-family: 'PT Sans Caption';
		font-style: normal;
		font-weight: 300;
		font-size: 1.2em;
		color: #a3a7af;
		text-decoration: none;
		text-transform: none;
		padding: 5px 0px 7px 0px;
		display: inline-block;
	}
	.sf-menu li a:hover {/*font, farbe - bezogen auf a hover*/
		color: #29363f;
		-webkit-transition: color .3s linear;
		-moz-transition: color .3s linear;
		-ms-transition: color .3s linear;
		-o-transition: color .3s linear;
		transition: color .3s linear;
	}
	.sf-menu > li.current >a {/*font, farbe bezogen auf a active / current*/
		color: #29363f;
	}
	
	
	
	/*.sf-menu li a {/*font, farbe, linie unter Text 
		opacity: 1;
		font-family: 'PT Sans Caption';
		font-style: normal;
		font-weight: 300;
		font-size: 1.2em;
		color: #6c727a;
		text-decoration: none;
		text-transform: none;
		padding: 5px 5px 5px 5px;
		border-bottom: 1px solid #6c727a;
		display: inline-block;
	}
	.sf-menu li a:hover {/*font, farbe, linie unter Text - bezogen auf a hover
		color: #29363f;
		border-bottom: 3px solid #29363f;
		-webkit-transition: color .3s linear;
		-moz-transition: color .3s linear;
		-ms-transition: color .3s linear;
		-o-transition: color .3s linear;
		transition: color .3s linear;
		padding-bottom: 2px;
		display: inline-block;
	}
	.sf-menu > li.current >a {/*font, farbe, linie unter Text bezogen auf a active / current
		background-color: transparent;
		color: #29363f;
		border-bottom: 3px solid #29363f;
		padding-bottom: 2px;
		display: inline-block;
	}*/

/* Menue 2. Ebene */
	li.subPages{
		border: 0px solid red;
	}
	li.subPages:hover{
		border: 0px solid red;
		margin: 2px 0px 0px 0px;
	}
	li.activeSubPage,
	li.subPages{
		font-size: 16px;
	}
	.sf-menu ul {
		position: absolute;
		top: 100%;
		width: auto;/* Wichtig damit die Breite sich anpasst*/
		z-index: 99;
		margin: -1px 0px 0px 0px;
	}
	.sf-menu li li {
		background-color: #a3a7af;
		opacity: 0.9;
		padding: 4px 0px 4px 0px;
		margin: 1px 0px 0px 0px;
		padding-right: 20px;
	}
	.sf-menu li li a {/*font, farbe, linie unter Text */
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 300;
		font-size: 16px;
		color: #fff;
		opacity: 1;
		padding: 0px 0px 0px 10px;
		border-top:none;
		border-bottom: none;
	}
	.sf-menu li li a:hover{
		font-size: 16px;
		text-transform: none;
		border-top:none;
		border-bottom: none;
		padding-bottom: 0px;
		color: #000;
		padding-left:10px;
	}
	.sf-menu li ul a:hover {/* hover zweite und dritte Menueebene */
		color:#000;
		padding-left:10px;
	}
	
/* Menue 3. Ebene*/
	.sf-menu ul ul {/* Abstand zu zweiter Menueebene*/
		top: 0;
		margin: -2px 0px 0px 0px;
		left: 101%;
		width: auto;/* Wichtig damit die Breite sich anpasst*/
		border: 0px dotted red;
	}
	.sf-menu li li li{
		margin-top: 1px;
    background-color: #a3a7af;
    		opacity: 1;
		margin: 1px 0px 0px 0px;
	}
	.sf-menu li li li a{
		font-size: 16px;
		color: #fff;
		opacity: 1;
		padding-left:10px;
	}
	.sf-menu li li li a:hover{
		font-size: 16px;
		color: #000;
		padding-left:10px;
	}

/*****************************
** PFEILE (for all except IE7)
*****************************/
	.sf-arrows .sf-with-ul {
		padding-right: 0.0em;
		*padding-right: 0em; /* no CSS arrows for IE7 (lack pseudo-elements) */
	}
	.sf-arrows .sf-with-ul:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: 0px;
		height: 0;
		width: 0;
	}
	/* Pfeil nach unten auf der ersten Ebene */
	.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: #000;
	}
	/* pfeil nach rechts auf zweiter Ebene */
	.sf-arrows ul .sf-with-ul:after {
		margin-top: -5px;
		margin-right: -3px;
		border-color: transparent;
		border-left-color: #fff;
	}
	.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: #fff;
	}
}


/* ######################################
####            Fuer mittlere Screen    ####
#######################################*/
@media only screen and (min-width: 950px) and (max-width: 1140px) {
	#navigationTop {
		margin: 0px 20px 0px 20px;
	}
}