/* //////////////////////////////////////// MEDIA QUERIES ///////////////////////////////////// */

/* Auflösung oberhalb 970px  */


@media only screen and (min-width: 970px) {

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


	#mainnavigation ul,
	#mainnavigation li {
		padding: 0;
		margin: 0;
		list-style: none;
	}


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

	#mainnavigation ul.level1>li {
		margin: 0;
		padding: 0;
		float: left;
		position: relative;
		z-index: 100;
		height: 70px;
		list-style: none;
		white-space: nowrap;
	}

	#mainnavigation ul.level1>li.integration:hover,
	#mainnavigation ul.level1>li.integration.hover {
		background: url('/_local/images/mainNaviHoverBg.gif') 35px 40px no-repeat;
	}

	#mainnavigation ul.level1>li>a {
		color: #544f4e;
		text-decoration: none;
		padding: 5px 15px 9px 15px;
		height: auto;
		font-size: 1.75em;
		white-space: nowrap;
		outline: none;
		border-right: 1px solid #d8d8d8;
	}

	#mainnavigation ul.level1>li.last>a {
		padding-right: 0;
		border-right: 0;
	}

	#mainnavigation ul.level1>li.first>a {
		padding-left: 0;
	}

	#mainnavigation ul.level1>li>a:hover,
	#mainnavigation ul.level1>li>a.open {
		color: #7da516;
	}


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

	/* dropdown */

    #mainnavigation ul.level1>li>ul.level2 {
		display: none;
		float: left;
		margin: 0 0 0 15px;
		position: absolute;
		background-color: #7da516;
		padding: 50px 20px 30px 20px;
		left: 0;
		top: 39px;
		z-index: 100000;
		opacity: 0.99;
		-moz-opacity: 0.99;
		width: 200px;
		background: #7da516 url('/_local/images/mainNaviHoverBg.gif') 0 0 no-repeat;
	}

	#mainnavigation ul.level1>li:hover>ul.level2,
	#mainnavigation ul.level1>li.hover>ul.level2 {
		display: block !important;


	}

    #mainnavigation ul.level1>li>ul.level2>li {
		float: none;
		background-color: #7da516;
	}

	#mainnavigation ul.level1>li>ul.level2>div>li>a {
		display: block;
		color: white;
		font-size: 90%;
		padding: 5px 2px;
		margin: 0;
		white-space: normal;
		border-bottom: 1px solid #acca60;

	}

	#mainnavigation ul.level1>li.integration>ul.level2 {
		position: absolute;
		float: left;
		margin-left: 0;
		width: 99%;
		height: 520px;
        padding-left: 1%;
        padding: 20px 20px 30px 0;
        top: 70px;
		left: 0;
		right: 0;
		display: none;
	    opacity: 0.99;
		-moz-opacity: 0.99;
		background: #7da516;
	}

	#mainnavigation ul.level1>li.integration ul.level2 {
		margin-left: -215px;
		width:650px !important;
	}

    #mainnavigation ul.level1>li.integration:hover ul.level2 {
		display: inline-flex;
	}

    #mainnavigation ul.level1>li.integration>ul.level2 div {

        margin: 0 auto;
        background-color: #7da516;
    }


	#mainnavigation ul.level1>li.integration>ul.level2>div>li {
		float: left;
		margin: 0 3% 0 0;
	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li>ul.level3>li.last>a.last {
		margin-bottom: 30px;

	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li.first>ul.level3>li.last>a.last {
		margin-bottom: 0px;

	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li.first {
		margin-left: 3%;
		float: left;
		background-color: #7da516;
	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li:nth-child(7) {
		margin: 130px 0 0 -215px;
		float: left;
		background-color: #7da516;
	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li>a {
		display: block;
		color: white;
		font-size: 95%;
		padding: 0 5px 0 2px;
		margin: 0;
		white-space: normal;
		font-weight: bold;
		border: 0;
	}



	#mainnavigation ul.level1>li>ul.level2>div>li.open>a,
	#mainnavigation ul.level1>li.integration>ul.level2>div>li>a:hover,
	#mainnavigation ul.level1>li>ul.level2>div>li>a:hover {
		color: #000;
	}

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


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

	/* dropdown */

	#mainnavigation ul.level1>li>ul.level2>div>li:hover>ul.level3 {
		display: none;
	}

	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3 {
		display: none;
		margin: 0;
		padding: 0 0 0 0;
		clear: left;
		left: 201px;
		width: 200px;
	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li>ul.level3 {
		display: block;
		float: left;
		clear: left;
		margin: 0;
		padding: 0 0 0 0;
		margin-top: 35px;
		width: 190px;
	}

	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li,
	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li>ul>li {
		position: relative;
		float: left;
		width: 100%;
		clear: left;
		padding: 0 0 0 0;
	}


	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li>a {
		display: block;
		cursor: pointer;
		font-size: 90%;
		float: left;
		width: 95%;
		line-height: 1.2em;
		color: white;
		padding: 3px 0 3px 5%;
		margin: 0 0px;
		border-bottom: 1px solid #acca60;
		white-space: normal;
		clear: both;
	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li>ul.level3>li>a {
		display: block;
		cursor: pointer;
		font-size: 90%;
		float: left;
		width: 100%;
		line-height: 1.2em;
		color: white;
		padding: 3px 0 3px 0;
		margin: 0 0px;
		border-bottom: 1px solid #acca60;
		white-space: normal;
		clear: both;
	}

	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li.open>a,
	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li>a:hover,
	#mainnavigation ul.level1>li.integration>ul.level2>div>li>ul.level3>li>a:hover {
		color: #000;
	}

	/** level4 **/

	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li>ul {
		display: none;
		float: left;
		width: 96%;
		padding: 2%;
		background-color: #6a8a17;
		border-bottom: 1px solid #8fb42b;

	}

	#mainnavigation ul.level1>li>ul.level2>div>li>ul.level3>li>ul>li>a {
	    cursor: pointer;
		display: block;
		float: left;
		width: 96%;
		max-width: 190px;
		white-space: normal;
		font-size: 90%;
		color: white;
		font-weight: normal;
		padding: 3px 2% 3px 4%;
		margin: 0 0px;
		clear: left;

	}

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

	}

	/* ///////////////////////////////// CLEARFIX ///////////////////////////////// */

	#mainnavigation:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

	#mainnavigation {
		display: inline-block;
	}
	html[xmlns] #mainnavigation {
		display: block;
	}

	* html #mainnavigation {
		height: 1%;
	}
}


/* menu-Höhe wird schrittweise verkleinert */

@media only screen and (max-width: 1500px) {
	#mainnavigation ul.level1>li.integration>ul.level2 { height: 470px; }
}

@media only screen and (max-width: 1350px) {
	#mainnavigation ul.level1>li.integration>ul.level2 { height: auto; }
}

@media only screen and (max-width: 1200px) {
	#mainnavigation ul.level1>li.integration>ul.level2 { height: auto; }
}

@media only screen and (max-width: 1030px) {
	#mainnavigation ul.level1>li.integration>ul.level2 { height: auto; }
}


@media only screen and (max-width: 1200px) {

 	div#quicklinks {
		margin-left: 1%;
		top: 20px;
 	}

 	div#iconnavi {
		right: 35%;
 	}

 	#mainnavigation ul.level1>li>a {
		font-size: 1.6em;
	}
}



@media only screen and (max-width: 1080px) {

	#mainnavigation ul.level1>li.integration>ul.level2>div>li.first {
		margin-left: 20px;
	}

	#mainnavigation ul.level1>li>a {
		font-size: 1.41em;
	}

	#mainnavigation ul.level1>li.integration>ul.level2{
		margin-left: -180px !important;
	}

	 #mainnavigation ul.level1>li.integration:hover ul.level2 {
		display: block !important;

	}

	#mainnavigation ul.level1>li.integration>ul.level2>div>li.last {
		clear: left;
		position: absolute;
	 	margin-left: 475px;
	    margin-top: 125px;
	}
}


.closeMenu {
	display: none;
}

#mainnavigation ul.level1>li.integration>ul.level2>div .closeMenu {
	position: absolute;
	display: block;
	right: 50px;
	color: white;
	text-align: center;
	line-height: 30px;
	font-size: 140%;
	width: 30px;
	height: 30px;
	border: 1px solid white;
	cursor: pointer;
}

/* Auflösung unterhalb 970px / responsive Navigation wird eingeblendet  */

@media only screen and (max-width: 970px) {

	#menu-toggle {
		z-index: 105;
		display: block;
		position: absolute;
		right: 6.2136%;
		top: 1em;
		height: 3em;
		width: 3em;
		background: url("/_local/images/menu-toggle.svg") no-repeat scroll center center;
		background-size: contain;
	}

	div#iconnavi {
		right: 30%;
 	}


	#navigationcontainer {
		position: absolute;
		left: -100%;
		top: 82px;
		width: 100%;
		margin-left: 0;
		height: 0;
		overflow: hidden;
		z-index: 11;
	}

	body.menu #navigationcontainer {
		margin-left: 100%;
		visibility: visible;
		height: auto;
	}

	body.menu #mainnavigation {
		position: relative;
		right: inherit;
		left: 0;
		top: 0;
		margin-top: /*100px*/79px;
		width: 100%;
		z-index: 2;
	}

	body.menu #main {
		display: none;
	}

	body.menu #banner {
		display: none;
	}

	body.menu #footer {
		display: none;
	}

	/* ///////////////////////////////// NAVIGATION ///////////////////////////////// */

	#mainnavigation ul {
		list-style: none;
		padding: 0;
		margin: 0;
		/* max-height may be altered using transitions */
		max-height: 0;
	}

	#mainnavigation ul li {
		line-height: 2em;
		position: relative;
	}

	#mainnavigation ul.level1 > li.integration > ul.level2 > div > li.first{
		margin:0;
	}


	#mainnavigation ul li a {
		text-decoration: none;
		font-size: 1.375em;
		text-transform: uppercase;
		color: #a0a0a0;
		display: block;
		padding-top: 1em;
		padding-bottom: 1em;
		padding-right: 4em;
		background-color: #3c3c3c ; /* fallback background color */
		background: 	 -webkit-linear-gradient(top, #5a5a5a 0, #3c3c3c 100%);
		background:      -o-linear-gradient(top, #5a5a5a 0, #3c3c3c 100%);
		background:     -ms-linear-gradient(top, #5a5a5a 0, #3c3c3c 100%);
		background:   linear-gradient(to bottom, #5a5a5a 0, #3c3c3c 100%);
	}

	#mainnavigation ul.level1,
	#mainnavigation li.open>ul {
		/* max-height may be altered using transitions */
		max-height: 400em;
	}

	/* plus sign if child nodes (created using jquery) */
	#mainnavigation ul li>span.more {
		position: absolute;
		width: 2.5em;
		height: 2.5em;
		background: url("/_local/images/more.gif") no-repeat scroll center center;
		top: 1em;
		right: 5%;
		cursor: pointer;
	}

	#mainnavigation ul li.open>span.more {
		background: url("/_local/images/less.gif") no-repeat scroll center center;
	}

	#mainnavigation ul li.open>a,
	#mainnavigation ul li.active>a {
		color: white;
	}

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

	#mainnavigation ul.level1>li>a {
		padding-left: 5%;

	}

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

	#mainnavigation ul.level1>li.integration>ul.level2 { height: inherit; }

	#mainnavigation ul.level1>li.integration>ul.level2>div>li.last {
		clear: left;
		position: relative;
		margin-left: 0px;
		margin-top: 0px;
	}

	#mainnavigation ul.level2>div>li>span.more {
		top: 0.375em;
		right: 5%;
	}

	#mainnavigation ul.level2 {
		position: static;
	}



	#mainnavigation ul.level2>div>li>a {
		padding-left: 5%;
		background: none;
		background-color: #f0f0f0;
		border-bottom: 1px solid lightgray;
		color: #969696;
		padding-top: 1em;
		padding-bottom: 1em;
		font-size: 1.1em;
		line-height: 1.25em;
		text-transform: inherit;
	}



	#mainnavigation ul.level2>div>li.open>a {
		color: #3c3c3c;
	}

	#mainnavigation ul.level2>div>li.active>a {
		color: #E21B1A;
	}

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


	#mainnavigation ul.level3>li>a {
		padding-left: 8%;
		background: none;
		background-color: white;
		border-bottom: 1px solid lightgray;
		color: #969696;
		background-image: url(/_local/images/list_item.png);
		background-repeat: no-repeat;
		background-position: 5% center;
		font-size: 1.1em;
		line-height: 1.25em;
		background-position: 5% center;
		padding-top: 1.125em;
		padding-bottom: 1em;
		text-transform: inherit;
	}

	#mainnavigation ul.level3>li.open>a {
		color: #555;
	}

	#mainnavigation ul.level3>li.active>a {
		color: #555;
	}

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

	#mainnavigation ul.level4>li>a {
		padding-left: 12%;
		background: none;
		background-color: white;
		border-bottom: 1px solid lightgray;
		color: #969696;
		background-image: url(/_local/images/list_item.png);
		background-repeat: no-repeat;
		background-position: 5% center;
		font-size: 1em;
		line-height: 1.25em;
		background-position: 5% center;
		padding-top: 1.125em;
		padding-bottom: 1em;
		text-transform: inherit;
	}

	#mainnavigation ul.level4>li.open>a {
		color: #3c3c3c;
	}

	#mainnavigation ul.level4>li.active>a {
		color: #333;
	}

}

/* Auflösung unterhalb 1080px  /  kleinere Hauptnavigationspunkte */



/* Auflösung unterhalb 970px  */

@media only screen and (max-width: 970px) {

	div#iconnavi {
		right: 22%;
 	}
 	#mainnavigation ul.level1>li.integration>ul.level2{
		margin-left: 0px !important;
	}
}

@media only screen and (max-width: 800px) {

	div#iconnavi {
		right: 13%;
 	}
}

@media only screen and (max-width: 700px) {

	body.menu #mainnavigation {
		margin-top: 111px;
	}

	div#quicklinks {
		top: 108px;
		left: -5px;
	}

	div#iconnavi {
		top: 65px;
		right: 0%;
 	}

}

@media only screen and (max-width: 620px) {



	div#iconnavi {
		top: 65px;
		right: 0%;
 	}

 	div#iconnavi {
		top: 5px;
		margin: 0;
		left: -35px;
		padding: 0;
 	}

 	div#header div#logo {
 		padding-top: 73px;
 		margin-left: 300px;
 	}
}

/* Auflösung unterhalb 560px  */

@media only screen and (max-width: 560px) {

	div#quicklinks {
		display: none;
	}

	#menu-toggle {
		right: 5%;
	}

	div#header div#logo {
 		padding: 0px 0 30px 0;
 		margin-left: 0px;

 	}

 	#mainnavigation ul li.quick a.noMobile {
		display: none !important;
	}
}

@media only screen and (max-width: 530px){
	div#navigationcontainer{
		margin-top: 0px !important;
	}

	#mainnavigation{
		margin-top: 0px !important;
	}
}

@media only screen and (max-width: 450px) {


 	div#iconnavi ul li:nth-child(odd) {
		clear: left;
	}

 	div#iconnavi ul li {
 		font-size: 87%;
 	}
}

@media only screen and (max-width: 340px) {
	/*
	div#header div#logo {
		text-align: left;
	}
	div#header div#logo img {
		padding: 25px 0 65px 13px;
		margin: 0;
		width: 65%;
		min-width: 170px;
	}

	div#iconnavi {
		display: block;
		width: 100%;
		padding: 0;
		left: 0;
		margin-top: 90px;
	}

	div#iconnavi ul {
		margin:0;
		padding:0;
	}


	div#iconnavi ul li:nth-child(odd) {
		clear: none;
	}

	#iconnavi ul li, div#iconnavi ul li {
		display: inline-block;
		min-width: 17%;
		width: 17.5%;
		clear: none;
		font-size: 83%;
		margin: 0 0 0 3% !important;
		float: left;

	}

	div#iconnavi ul li:nth-child(2){
		margin: 0 0 0 6% !important;
 	}

 	div#iconnavi ul li:nth-child(3){
		margin: 0 0 0 7% !important;
 	}

	div#iconnavi ul li:nth-child(4){
		margin: 0 0 0 7% !important;
 	}*/
}