.headroom {
    transition: transform .25s ease-in-out;
    will-change: transform;
}
.headroom--pinned {
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}
.headroom--unpinned {
    -ms-transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%);
}

@media only screen
	{
	#nav {
		max-width: 1500px;
		position: absolute;
		top:26px;
		margin: 0;
		background-color: rgb(#000000,.3);
		}
		
	#nav2 {
		max-width: 1500px;
		position: absolute;
		top:26px;
		margin: 0;
		background-color: rgb(133, 133, 133, .3);
		}		
		
		
	}

#nav ul ul {
	margin: 0px;
	}
			
#nav > a {
	display: none;
	}

#nav ul.level_1 > li.first a.first span {
	color: red;
}

#nav ul.level_1 li.sibling.first a.sibling.first span {
	visibility: hidden;
}


#nav ul.level_1 > li.first > span::before {
	content: "";
}


#nav ul.level_1 > li.first > a::after, #nav ul.level_1 > li.first > span::after,
#nav ul.level_1 > li.first > strong::after {
	font-family: "icons";
    font-size:3.4rem;
    color: #fff;
    content: "\e823";
    text-align:center;
    height: 58px;
}

#nav ul.level_1 > li.first > a::after:hover, #nav ul.level_1 > li.first > span::after:hover {
	background-color: rgba(54,186,252, 0.6);
	top: 0px;
	height: 58px;
}



#nav ul.level_1 > li.first > a.first:hover, #nav ul.level_1 > li.first, #nav ul.level_1 > active {
	position: relative;
	top: 0px;
	height: 58px;
}

#nav ul.level_1 > li.first > a.first:hover{
	top: 5px;	
	vertical-align: 5px;
	height: 58px;	
}

#nav ul.level_1 > li.first > a.first:hover span:after{
	top: 5px;	
	vertical-align: 5px;
	height: 58px;
}



#nav ul.level_1 > li.first > a, #nav ul.level_1 > li.first > span {
	position: relative;
    top: 5px;
    width: 80px;
    height: 58px;
    font-size:0;
    color: #fff;

}

#nav ul.level_1 > li.first > strong.active {
position: relative;
    top: 5px;
    left: -22px;	
    color: transparent;    
	padding: 0 2rem 0 2rem;    
}


#nav ul.level_1 > li.first > a::after, #nav ul.level_1 > li.first > span::after {
/*
    position: absolute;
    top: 0px;
    left: 0px;
    */
/*    
    width: 50px;
    height: 35px;
    padding-top: 15px;
    background-color: #464648;
    */
/*
    font-family: "icons";
    font-size:3.4rem;
    color: #fff;
    content: "\e823";
    text-align: center;
    width:80px;
    height: 50px;
    padding-top:0px;
    margin-top:0px;
    margin-left:10px;
    background-color: #464648;
    */
}


#nav li	{
	position: relative;
/*	margin-bottom: 0px;
*/
	}
	
#nav ul li.active, #nav ul li:hover, #nav li.submenu, #nav li.sibling	{
	position: relative;
	top: -6px;
	height: 60px;
	margin-bottom: 4px;
	margin-top: 0px;
	}	

#nav li a {
	display: block; 
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
	}
				
#nav li a:active {
	background-color: #c00;
	}

/* expand icon */
/*
#nav a.submenu:after, #nav span.submenu:after {
	border-bottom: none;
	*/
/*	content: '...'; */
    /*font-family: icons;*/
/*    content: '';
	display: inline-block;
	position: relative;
	right: 0.5em;
	opacity:1;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
	}

#nav li:hover > a.submenu:after {
	opacity:.2;-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
	}
*/			

			/* first level */

#nav > ul	{
	height: 74%;
	float: left;
	}
				
#nav > ul > li {
	height: 100%;
	 top: -12px;
/*	float: right; 
	 float: left; 
*/
	position:relative;
	display: inline-block;
	}


	
#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
	height: 100%;
/*	padding: 0 3rem 0 3rem; 
	padding: 0 1rem 0 1rem; 
*/
	padding: 0 2rem 0 2rem; 
	font-size: 1.5rem;
	line-height: 8rem;
	text-align: center;
	font-weight:normal;
	}


@media (min-width:1400px) and (max-width: 1500px) {

#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
	padding: 0 1.5rem 0 1.5rem; 
	}
	
}

@media (min-width:1250px) and (max-width: 1400px) {

#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
	padding: 0 1rem 0 1rem; 
	}
	
}

@media (min-width:1000px) and (max-width: 1250px) {

#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
	padding: 0 0.7rem 0 0.7rem; 
	}
	
}

@media (min-width:1050px) and (max-width: 1250px) {

#nav > ul > li > a,
#nav ul.level_1 li strong.active,
#nav ul.level_1 li strong.forward {
	padding: 0 0.4rem 0 0.4rem; 
	}
	
}







						
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a,
#nav ul.level_1 li.trail {
	color: #fff;
	}
						
#nav ul.level_1 li.trail a {
	color: #fff;
	}
				
		/* second level */

#nav li ul {
	visibility: hidden;
	position: absolute;
	top: 12px;
	width:17em;
	opacity: 0;
    filter: alpha(opacity=0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
	}

#nav li:hover ul {
	visibility: visible;
	display: block;
	right:0;
	left: 0;
	top:100%;
	opacity: 1;
	-webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
    filter: alpha(opacity=100);
    -webkit-box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	box-shadow: 6px 6px 40px -10px rgba(0,0,0,0.75);
	}
					
#nav li.last:hover ul {
/*	right:0;
	left:auto;
*/	
	right:auto;
	left:0;
	}
				
				
				
				
/*						
#nav li ul.level_2 a,
#nav ul.level_2 li strong.active,
#nav ul.level_2 li strong.forward{
*/

/*	Intranet-Menu */

#nav li ul.level_2 a.protected,
#nav li ul.level_2 a.protected:hover ,
#nav ul.level_2 li protected span.active ,
#nav ul.level_2 li protected span.forward ,
#nav ul.level_2 li protected strong.active,
#nav ul.level_2 li protected strong.forward {

	display: block;
	font-size: 1.1em;
	line-height: 1.2;
	text-align:left;
	padding: 1.5em;
	color: #fff;
	}



#nav li ul.level_2 a,
#nav li ul.level_2 a:hover,
#nav ul.level_2 li span.active,
#nav ul.level_2 li span.forward,
#nav ul.level_2 li strong.active,
#nav ul.level_2 li strong.forward{

	display: block;
	font-size: 1.4em;
	line-height: 1.1;
	text-align:left;
	padding: 1.5em;
	color: #fff;



/*	position: relative; 
	display: block;
	text-align: left;
	height: 48px;
	font-size: 1.4rem;
	line-height: 1.6; 
	
	
	padding: 1.0rem 0 0 1.4rem; 
	margin-top: 0.5rem;
*(	
/*
padding: 1.5em;

	padding-top: 1.0rem;
	padding-right: 1.5em;
	padding-left: 1.5em;
	padding-bottom: 1.5em;
	margin-top: 1.0rem;
*/	


	
	color: #fff;
	}
	
#nav ul.level_2 li.submenu.trail {
margin-top: 0.5rem;
	}
						
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a,
#nav ul li.active {
	position:relative;
	color:#fff;
    cursor: auto;
/*	
	orig
	cursor:  pointer;
	
	cursor: vertical-text;
	cursor: text;

	cursor: none;
	cursor:  cell;
	cursor:  grab;
	
*/	
	
	}
				
/* third level */
				
#nav ul.level_2 li ul.level_3 {
	visibility: hidden;
	left: 100%; /* klappt subs nach rechts aus*/
	top:0px;
	opacity: 0;
	}
						
#nav ul.level_2 li:hover ul.level_3 {
	visibility: visible;
	position: absolute;
	top:-12px;
/*	left: -100%; */
	right: -100%; 
	width: 17em;
	-webkit-transition: opacity 0.6s, 0.2s;
	-moz-transition: opacity 0.6s, 0.2s;
	-o-transition: opacity left 0.6s, 0.2s;
	transition: opacity 0.6s, 0.2s;
	opacity: 1;
	}