/* ///////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////  DROPDOWN-MENU   /////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */


#mainnavigation ul {
	font-family: 'Merriweather Sans';
	padding: 0;
	margin: 0;
	padding: 0 0 0 0;
}



/* ///////////////////////////////// LEVEL 1 ///////////////////////////////// */

#mainnavigation ul.level1 > li {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	z-index: 100;
	list-style: none;
	background: url(../images/li_nav.gif) no-repeat 0px 9px transparent;
}

#mainnavigation ul.level1 > li > ul {
	display: none;
}

#mainnavigation ul.level1 > li.first {
	background: none;
}


#mainnavigation ul.level1 > li a {
	color: #343332;
	text-decoration: none;
	padding: 4px 13px 6px 18px;
	height: 11px;
	line-height: 110%;
	font-size: 123.1%;	
	display: block;
}

#mainnavigation ul.level1 > li > a:hover,
#mainnavigation ul.level1 > li > a.open {
	color: #67635a;	
}
@media only screen and (max-width: 1200px) {
	#mainnavigation ul.level1 > li a{
		padding: 4px 11px 6px 15px;
	}
}
@media only screen and (max-width: 950px) {
    #mainnavigation ul.level1 > li {
        margin: 0 -2px;
    }
 	#mainnavigation ul.level1 > li a{
 		font-size: 120%;
 	}
}


/* Auflösung unterhalb 970px / responsive Navigation wird eingeblendet  */
@media only screen and (min-width: 871px) {
	#mainnavigation #adresse{
		display: none
	}
}
@media only screen and (max-width: 870px) {

	#mainnavigation #adresse{
		display: block;
		padding-top: 40px;
		margin-bottom: 25px;
		padding-left: 0.7em;
	}

	div#navigation {
		position: fixed;
		width: 310px;
        padding: 0 !important;
		margin: 0;
		top: 0; 
        display: block;
		right: auto;
        left: -310px;
		height: 100%;
		overflow: hidden;
		z-index: 13 !important;
        transition: all 0.2s ease-in-out;		
	}
	
	#navigation>div,
	body.naviFixed #navigation div {
		padding: 0;
        margin: 0% 0 0 0;
		width: 100%;
		min-width: 0;
        height: 100%;
        background: #CEC59E;
        overflow: auto;
	}
    
    body.naviFixed #navigation {
        position: fixed;
        top: 0;
        display: block;
        background-color: transparent;
        z-index: 4;
        border-bottom: 0;
        left: -310px;
    }
    
    #mainnavigation {
		margin: 0;
		overflow: visible;		
	}
    
    #mainnavigation li {
		width: inherit;
		float: left;		
	}

	.fullLayer {
		display: none;
	}
	
	#close {
		z-index: 3;
		width: 40px;
		height: 40px;
		float: right;
		margin-right: 14px;
		margin-top: 22px;
		position: relative;
		cursor: pointer;
		background: url(/_local/images/close.png) no-repeat;
		background-size: contain;
	}


	#menu-toggle {
		z-index: 10;
		display: block;
		position: absolute;
		right: 10px;
		top: 42px;
		height: 40px;
		width: 40px;
		background: transparent url("/_local/images/menu-toggle.svg") no-repeat scroll center center;
		transition: all 0.2s ease-out 0s;
		cursor: pointer;
		color: #333;
	}
	
	#menu-toggle:after {
		content: '';
		position: absolute;
		margin: 13px 0 0 -60px;
		color: #333;	
	}

	body.menu #navigation {
        background: transparent;
        left: 0; 
        transition: all 0.3s ease-in-out;
	}
	
	#wrapper.menu {
		overflow: hidden;
		height: 100px;		
	}
	

	body.menu #mainnavigation>ul.level1 li>a,
	body.menu #mainnavigation>ul.level1 li>a:hover,
	body.menu #mainnavigation>ul.level1 li.open>a,
	body.menu #mainnavigation>ul.level1 li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a:hover  {
		float: none;
		background: #aaa transparent;
		border: 0 !important;
        height: auto !important;
        transition: background 0.6s ease-in-out;
	}

	body #mainnavigation>ul.level1>li>ul.level2,
    body #mainnavigation>ul.level1>li:hover>ul.level2,
	body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3,
    body #mainnavigation>ul.level1>li>ul.level2>li:hover>ul.level3,
	body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4,
    body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li:hover>ul.level4 {
		display: none;
		float: left;
		float: none;
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		left: 0 !important;
		top: 0;
        background: #aaa;
	}
	
	body #mainnavigation>ul.level1>li.open>ul.level2,
	body #mainnavigation>ul.level1>li.open>ul.level2>li.open ul.level3,
	body #mainnavigation>ul.level1>li.open>ul.level2>li.open ul.level3 li.open ul.level4 {
		float: left;
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		left: 0 !important;
        display: block;
        padding: 0;
        font-size: 1em;
        transition: background 0.6s ease-in-out;
		height: auto;
        
	}

    #mainnavigation ul.level1 > li > ul.level2 > div {
        display: none;
    }
	
	#mainnavigation>ul.level1,
	#mainnavigation ul.level2,
	#mainnavigation ul.level3,
    #mainnavigation ul.level4 {
		padding-top: 0px;
		width: 100%;
	}
    
    
    
    /********************** Span more ************************/
    
    
    /* plus sign if child nodes (created using jquery) */
	#mainnavigation li>span.more,
	#mainnavigation li.quick.last>span {
		position:absolute;
		width: 50px;
		text-align: center;
		top: 0.3em;
		right: 3%;
		min-height: 2.2em;
		font-weight: 100;
		cursor: pointer;
		opacity: 0.8;
		transition: all 0.1s ease-out 0s;
		z-index: 2000;
	}
	
	#mainnavigation li>span.more:before,
	#mainnavigation li.quick.last>span:before {
		position:absolute;
		right: 7%;
		content: '\f107';
		font-family: 'fontAweSome',sans-serif;
		color: white;
		font-size: 200%;
		-ms-transform: rotate(0deg); /* IE 9 */
    	-webkit-transform: rotate(0deg); /* Safari */
    	transform: rotate(0deg); /* Standard syntax */
    	transition: all 0.1s ease-out 0s;
    	z-index: 2000;
	}

	#mainnavigation>ul.level1>li.open>span.more:before,
	#mainnavigation>ul.level1>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open.quick.last>span:before     {
		-ms-transform: rotate(180deg); /* IE 9 */
    	-webkit-transform: rotate(180deg); /* Safari */
    	transform: rotate(180deg); /* Standard syntax */
    	transition: all 0.2s ease-out 0s;
    	z-index: 2000;
	}
    

	/* ///////////////////////////////// LEVEL 1 ///////////////////////////////// */
	
	
	body #mainnavigation>ul.level1 {
		padding: 90px 0 30px 0;
		font-size: 1.2em;
		position: relative;
		float: left;
		overflow: hidden;
		height: auto;
		display: none;
	}
	
	body.menu #mainnavigation>ul.level1 {
		display: block;
	}
	
	body.menu #mainnavigation ul.level1 > li a {
		line-height: 120% !important;
	}
	
   body.menu #mainnavigation>ul.level1>li.first {		
        border-top: 1px solid #eee;
	}

	body.menu #mainnavigation>ul.level1>li {
		position: relative;		
        border-bottom: 1px solid #eee;
		margin: 0;
		padding: 0;
		
	}
	
	body.menu #mainnavigation>ul.level1>li>a {
		text-decoration: none;	
		text-transform: uppercase;
		color: #fff;
		line-height: 1.3em;
		display: block;
		font-size: 100%;
		font-weight: 100;
		white-space: normal;
		background: #AAA285 !important;
		padding: 1em 2.2em 1em 0.7em !important;
	} 


	body.menu #mainnavigation ul.level1>li:hover a,
	body.menu #mainnavigation ul.level1>li>a:hover{
		color: white ;
        background: #707070 !important;
	}
	
	body.menu #mainnavigation ul.level1>li.open>a,
	body.menu #mainnavigation ul.level1>li>a.open {
		background: #707070 !important;
		color: white ;
	}


	/* ///////////////////////////////// LEVEL 2 ///////////////////////////////// */

    body.menu #mainnavigation>ul.level1>li.open>ul.level2>li>a {
		background: #707070 !important;
	}
	

	body.menu #mainnavigation>ul.level1>li>ul.level2>li{
		position: relative;	
        border-bottom: 0;	
        border-top: 1px solid #eee;
		margin: 0;
		padding: 0;
		width: 100%;
	}

		
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a {
		text-decoration: none;	
		text-transform: normal;
		color: #fff;
		display: block;
		font-size: 100%;
		font-weight: 400;
		padding: 0.9em 2.5em 0.9em 1.4em;
	} 


	body.menu #mainnavigation>ul.level1>li>ul.level2>li:hover a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a.open {
		color: white ;
		background: #909090 !important;

	}

	/* ///////////////////////////////// LEVEL 3 ///////////////////////////////// */

	 body.menu #mainnavigation>ul.level1>li.open>ul.level2>li.open>ul.level3  {
		background: #909090;
		float: left;
		height: auto;
	}
	
	body.menu #mainnavigation>ul.level1>li.open>ul.level2>li.open>ul.level3>li>a {
		background: #919191 !important;
	}
	

	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li {
		position: relative;	
        border-bottom: 0;	
        border-top: 1px solid #eee;
		margin: 0;
		padding: 0;
		width: 100%;
	}

		
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a {
		text-decoration: none;	
		text-transform: normal;
		color: #fff;
		display: block;
		font-size: 100%;
		font-weight: 400;
		padding: 0.9em 2.5em 0.9em 2.2em;
	} 


	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li:hover a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a.open {
		color: #585858 ;
		background: #ccc !important;
	}
    

	/* ///////////////////////////////// LEVEL 4 ///////////////////////////////// */

	 body.menu #mainnavigation>ul.level1>li.open>ul.level2>li.open>ul.level3>li.open>ul.level4  {
		background: #bbb;
		float: left;
		height: auto;
	}
	

	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li {
		position: relative;	
        border-bottom: 0;	
        border-top: 1px solid #eee;
		margin: 0;
		padding: 0;
		width: 100%;
	}

		
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a {
		text-decoration: none;	
		text-transform: uppercase;
		color: #fff;
		display: block;
		font-size: 100%;
		font-weight: 400;
		padding: 0.9em 2em 0.9em 3.5em;
	} 


	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li:hover a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a:hover,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a.open {
		color: white ;

	}
	
}

li.nodisplay {
    visibility: hidden;
}

@media only screen and (min-width: 870px) {
	#mainnavigation ul li.quick {
	    display: none;
	}
}