/*
 * NAVIGATION MODE 1
 */

/*** DESKTOP ***/

@media (min-width: 992px) {
		
	.header-bottom {
		background: #555;
	}


	/** ALLE EBENEN **/

	#main-navigation-mode1 {
		padding: 0;
		margin: 0;
	}

	#main-navigation-mode1 ul {
		padding: 0;
		margin: 0;
	}

	#main-navigation-mode1 li {
		list-style: none;
		position: relative;
		padding: 0;
		margin: 0;
	}

	#main-navigation-mode1 a {
		outline: none;
		display: block;
		position: relative;
		text-decoration: none;
		/*line-height: 1.5rem;*/
	}

	#main-navigation-mode1 i {
		position: absolute;
		right: 5px;
		top: 8px;
		z-index: 1;
		cursor: pointer;
		text-align: center;
		color: #fff;
		padding: 8px;
		/*line-height: 1.5rem;*/
		/*width: 24px;
		height: 24px;*/
	}

	#main-navigation-mode1 ul.nav-next-level {
		position: absolute;
		z-index: 10;
		width: 100%;
		display: none;
		-moz-animation: zoomIn .1s ease-in;
		-webkit-animation: zoomIn .1s ease-in;
		animation: zoomIn .1s ease-in;
	}

	#main-navigation-mode1 ul li a:hover,
	#main-navigation-mode1 ul li a:focus {
		-o-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#main-navigation-mode1 li.subpages > i {
		transform: rotate(0deg);
		-o-transition: all 0.2s ease;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	#main-navigation-mode1 li.subpages:hover > i {
		-ms-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		-o-transition: all 0.2s ease;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	#main-navigation-mode1 li.subpages:hover > ul.nav-next-level,
	#main-navigation-mode1 li.is-open.subpages:hover > ul.nav-next-level {
		display: block;
	}


	/** 1. EBENE **/

	#main-navigation-mode1 > li {
		float: left;
	}

	#main-navigation-mode1 > li > a {
		padding: 15px 20px;
	}

	#main-navigation-mode1 > li > a:hover,
	#main-navigation-mode1 > li > a:focus {}

	#main-navigation-mode1 > li.current > a,
	#main-navigation-mode1 > li.active > a {}

	#main-navigation-mode1 > li.subpages > a {
		padding-right: 50px;
	}


	/** 2. EBENE **/

	#main-navigation-mode1 ul.level2 {
		background: #333;
	}

	#main-navigation-mode1 ul.level2 > li {}

	#main-navigation-mode1 ul.level2 > li > a {
		padding: 15px 20px;
	}

	#main-navigation-mode1 ul.level2 > li > a:hover,
	#main-navigation-mode1 ul.level2 > li > a:focus {}

	#main-navigation-mode1 ul.level2 > li.current > a,
	#main-navigation-mode1 ul.level2 > li.active > a {}

	#main-navigation-mode1 ul.level2 > li.subpages > a {
		padding-right: 50px;
	}

	#main-navigation-mode1 ul.level2 > li.subpages:hover > i {
		-ms-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	#main-navigation-mode1 li.last ul.level2 > li.subpages:hover > i {
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);   
	}


	/** 3. EBENE **/

	#main-navigation-mode1 ul.level3 {
		background: #333;
	}

	#main-navigation-mode1 li.subpages:hover > ul.level3 {
		left: 100%;
		top: 0;
	}
	
	#main-navigation-mode1 > li.last.subpages:hover ul.level3 {
		left: -100%;
	}

	#main-navigation-mode1 ul.level3 > li {}

	#main-navigation-mode1 ul.level3 > li > a {
		padding: 15px 20px;
	}

	#main-navigation-mode1 ul.level3 > li > a:hover,
	#main-navigation-mode1 ul.level3 > li > a:focus {}

	#main-navigation-mode1 ul.level3 > li.current > a,
	#main-navigation-mode1 ul.level3 > li.active > a {}

	#main-navigation-mode1 ul.level3 > li.subpages > a {
		padding-right: 50px;
	}
	
}


/*** RESPONSIVE ***/

@media (max-width: 991px) {

	#main-navigation-toggler {
		position: relative;
	}

/*	#main-navigation-toggler i {
		cursor: pointer;
		padding: 1px 5px;
		font-size: 33px;
		background-color: #000;
		color: #fff;
		-o-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#main-navigation-toggler.is-open i {
		background-color: #999;
	}*/

	#main-navigation-toggler i {
		cursor: pointer;
		font-size: 48px;
		-o-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#main-navigation-toggler i::before {
		font-family: "Material Icons";
		content: "close";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		-o-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#main-navigation-toggler.is-open i {
		color: transparent;
		-ms-transform: rotateY(-180deg);
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}

	#main-navigation-toggler.is-open i::before {
		opacity: 1;
		-ms-transform: rotateX(-180deg);
		-webkit-transform: rotateX(-180deg);
		transform: rotateX(-180deg);
		color: #000;
	}

	#main-navigation-mode1 {
		width: 100%;
		padding: 0;
		margin: 0;
		background: #F5F5F5;
		display: none;
	}


	/** ALLE EBENEN **/

	#main-navigation-mode1 ul {
		padding: 0;
		margin: 0;
	}

	#main-navigation-mode1 li {
		list-style: none;
		position: relative;
		padding: 0;
		margin: 0;
	}

	#main-navigation-mode1 ul.nav-next-level {
		display: none;
		-o-transition: all 0.2s ease;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	#main-navigation-mode1 li.is-open > ul.nav-next-level {
		display: block;
		-o-transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	#main-navigation-mode1 li.subpages > i {
		position: absolute;
		right: 8px;
		top: 5px;
		z-index: 1;
		cursor: pointer;
		font-size: 35px;
		line-height: 2rem;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-o-transition: all 0.2s ease;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	#main-navigation-mode1 li.is-open > i {
		-ms-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	#main-navigation-mode1 li.is-open > ul.nav-next-level {
		display: block;
	}


	/** 1. EBENE **/
	
	#main-navigation-mode1 > li {
		border-bottom: 1px solid #DDD;
	}

	#main-navigation-mode1 > li > a {
		display: block;
		padding: 10px 15px 10px 15px;
	}

	#main-navigation-mode1 > li > a:hover,
	#main-navigation-mode1 > li > a:focus {}

	#main-navigation-mode1 > li.current > a,
	#main-navigation-mode1 > li.active > a {}

	#main-navigation-mode1 > li.subpages > a {
		padding-right: 50px;
	}

	#main-navigation-mode1 > li.first > a {
		position: relative;
		padding-left: 45px;
	}

	#main-navigation-mode1 > li.first > a::before {
		content: "\E88A";
		font-family: 'Material Icons';
		font-size: 25px;
		position: absolute;
		top: 10px;
		left: 13px;
	}
	

	/** 2. EBENE **/

	#main-navigation-mode1 ul.level2 {
		padding-bottom: 10px;
	}

	#main-navigation-mode1 ul.level2 > li {}

	#main-navigation-mode1 ul.level2 > li > a {
		padding: 5px 50px 5px 25px;
		font-size: 16px;
		display: block;
	}

	#main-navigation-mode1 ul.level2 > li > a:hover,
	#main-navigation-mode1 ul.level2 > li > a:focus {}

	#main-navigation-mode1 ul.level2 > li.current > a,
	#main-navigation-mode1 ul.level2 > li.active > a {}

	#main-navigation-mode1 ul.level2 > li.subpages > a {
		padding-right: 50px;
	}


	/** 3. EBENE **/

	#main-navigation-mode1 ul.level3 {
		padding-bottom: 10px;
	}

	#main-navigation-mode1 ul.level3 > li {}

	#main-navigation-mode1 ul.level3 > li > a {
		padding: 5px 50px 5px 45px;
		font-size: 16px;
		display: block;
	}

	#main-navigation-mode1 ul.level3 > li > a:hover,
	#main-navigation-mode1 ul.level3 > li > a:focus {}

	#main-navigation-mode1 ul.level3 > li.current > a,
	#main-navigation-mode1 ul.level3 > li.active > a {}

	#main-navigation-mode1 ul.level3 > li.subpages > a {
		padding-right: 50px;
	}


	/** SEARCH **/

	#main-navigation-search {
		width: 100%;
		padding: 15px 0;
	}

	#main-navigation-search .tx-indexedsearch-form {
		position: relative;
	}

	#main-navigation-search .tx-indexedsearch-form button {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
	}

	#main-navigation-search .tx-indexedsearch-searchbox-sword {
		display: block;
		width: 100%;
		padding: 10px 50px 10px 20px;
		color: #2b2b2b;
		border: 1px solid #D3D6DD;
		border-radius: 3px;
	}

	#main-navigation-search .tx-indexedsearch-searchbox-button {
		border: none;
		background-color: transparent;
		padding: 10px;
	}

	#main-navigation-search .tx-indexedsearch-searchbox-button i {
		color: #0AF;
		font-size: 33px;
	}

	#main-navigation-search .tx-indexedsearch-searchbox-button:hover i {
		color: #000;
	}
}