/* ************************* lck_ddmenu - Horizontal Multi-Level DropDown-Menu & JQuery Accordion-Menu - Responsive & Touch-friendly - 02/2016 ************************* */
.tpllck_nav_mobil {
	display: none;
}
.tpllck_nav {
	background-color: rgba(92, 85, 122, 1);
	font-size: 14px;
	margin: 0;
	padding: 0;
	width: 100%;
		z-index: 9000;

}

/* ************ Links - Allgemein */
.tpllck_nav a {
	cursor: pointer;
	font-family: Verdana,Arial,sans-serif;
	line-height: 1.3rem;
	padding: 0;
	text-decoration: none;
	vertical-align: middle;
}
.tpllck_nav a:link,
.tpllck_nav a:visited,
.tpllck_nav a:focus,
.tpllck_nav a:hover,
.tpllck_nav a:active {
	color: #fff;
}

/* ************ UL Menulevel 1 */
.tpllck_nav > ul {
	display: table;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	z-index: 9000;
}

/* ************ Listenpunkte - Alle */
.tpllck_nav li {
	border-radius: 6px;
	box-sizing: border-box;
	float: left;
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	width: 15rem;
}

/* ************ Listenpunkte mit Klasse .doc + .sdoc */
.tpllck_nav li.doc,
.tpllck_nav li.sdoc {
	display: table;
}
.tpllck_nav li.doc a,
.tpllck_nav li.sdoc a {
	display: table-cell;
}
.tpllck_nav li.doc a:hover,
.tpllck_nav li.sdoc a:hover {
	background-color: rgba(0, 0, 0, 0.1);
	-webkit-transition: background-color .5s ease; 
	transition: background-color .5s ease;
}

/* menu breedte level 1 */
.tpllck_nav .menulevel1 > li {
	font-size: 0.8rem;
	font-weight: 300;
	height: 3rem;
	line-height: 0;
	width: 6rem;
}

/* ************ Listenpunkte Menulevel 1 + 2 + 3, Accordion-Menu Links Menulevel 1 - Einzelne Farben f. Hintergrund */
.tpllck_nav .menulevel1 > li:nth-child(8n+1),
.tpllck_nav .menulevel1 > li:nth-child(8n+1) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+1) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+2),
.tpllck_nav .menulevel1 > li:nth-child(8n+2) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+2) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+3),
.tpllck_nav .menulevel1 > li:nth-child(8n+3) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+3) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+4),
.tpllck_nav .menulevel1 > li:nth-child(8n+4) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+4) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+5),
.tpllck_nav .menulevel1 > li:nth-child(8n+5) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+5) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+6),
.tpllck_nav .menulevel1 > li:nth-child(8n+6) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+6) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+7),
.tpllck_nav .menulevel1 > li:nth-child(8n+7) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+7) > a {
	background-color: #5c557a;
}
.tpllck_nav .menulevel1 > li:nth-child(8n+8),
.tpllck_nav .menulevel1 > li:nth-child(8n+8) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(8n+8) > a {
	background-color: #5c557a;
}
/* ************ OPTIONAL - Listenpunkte Menulevel 1 + 2 + 3 - gleiche Farbe f. Hintergrund */
.tpllck_nav .menulevel1 > li:nth-child(n),
.tpllck_nav .menulevel1 > li:nth-child(n) > ul li {
	/* background-color: #707980; */
}
/* ************ OPTIONAL - Listenpunkte Menulevel 2 + 3 - gleiche Farbe f. Hintergrund */
.tpllck_nav .menulevel1 > li:nth-child(n) > ul li {
	/* background-color: #666; */
}
/* ************ OPTIONAL - Listenpunkte Menulevel 3 - andere Farbe f. Hintergrund */
.tpllck_nav .menulevel1 > li:nth-child(n) > ul ul li {
	/* background-color: #555; */
}
/* ************ OPTIONAL - Listenpunkte Menulevel 1 + 2 + 3 - gleiche Farbe bei FOCUS + HOVER */
.tpllck_nav li:focus:nth-child(n):focus,
.tpllck_nav li:hover:nth-child(n):hover {
	/* background-color: #61666E; */
	/* -webkit-transition: background-color .3s ease; */
	/* transition: background-color .3s ease; */
}

/* ************ UL Menulevel 2 + 3 */
.tpllck_nav ul ul {
	margin: 0;
	opacity: 0;
	padding: 0;
	position: relative;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	visibility: hidden;
	z-index: 200;
}

/* menubreedte level 2 */
.tpllck_nav .menulevel2 > li {
	background-color: #565D67;
	height: 3rem;
	line-height: 3rem;
	width: 7rem;
}

/* ************ ddm_link + ddm_opener Menulevel2 + Listenpunkte Menulevel3 */
.tpllck_nav .menulevel2 li span:first-of-type,
.tpllck_nav ul ul li {
	font-size: .8rem;
}
.tpllck_nav .menulevel2 li,
.tpllck_nav .menulevel3 li {
	border-top: 1px solid #fff;
}
.tpllck_nav .menulevel3 li:first-child {
	border-top: 0px solid #222;
}

/* ************************* ddm_link + ddm_opener - Allgemein */
.tpllck_nav .ddm_link {
	display: table;
	float: left;
	height: 100%;
	width: 80%;
}
.tpllck_nav .ddm_opener {
	display: table;
	float: right;
	font-size: 2rem;
	height: 100%;
	width: 20%;
}
.tpllck_nav .ddm_link a,
.tpllck_nav .ddm_opener a {
	display: table-cell;
}
.tpllck_nav .ddm_link a {
	box-sizing: border-box;
	padding: 0 .4em;
}
.tpllck_nav .ddm_opener a {
	background-color: rgba(0, 0, 0, 0.02);
}
.tpllck_nav .ddm_link a:hover,
.tpllck_nav .ddm_opener a:hover,
.tpllck_nav .menulevel3 li a:hover {
	background-color: rgba(0, 0, 0, 0.1);
	-webkit-transition: background-color .5s ease; 
	transition: background-color .5s ease;
}
.ddm_opener_icon {
	background: #FFF;
	border-radius: 50%;
	-webkit-box-shadow: 0 -10px #FFF, 0 10px #FFF;
	box-shadow: 0 -10px #FFF, 0 10px #FFF;
	display: block;
	height: 4px;
	margin: 0 auto;
	width: 4px;
}
/* ************************* Untermenü öffnen, nur bei hover über Hamburger-Symbol. Reihenfolge ist wichtig! */
.tpllck_nav li:hover > .ddm_opener ~ ul {
	opacity: 1;
	visibility: visible;
}
.tpllck_nav li > .ddm_link:hover ~ ul {
	visibility: hidden;
}
/* menubreedte level 3 */
.tpllck_nav ul ul ul {
	margin-left: 0;
	padding-top: 1rem;
	position: absolute;
	left: 15rem;
	top: 0;
	width: 7rem;
	z-index: 300;
}
.tpllck_nav .menulevel3 > li {
	background-color: #565D67;
	height: 3rem;
	line-height: 3rem;
	width: 15rem;
}

/* ************************* Media Queries - RESPONSIVE STYLE ************************* */
/* ************************* Menulevel 3 Fold-out - rechts oder links von menulevel2 - abhängig vom Viewport */
@media only screen and (min-width: 1537px) {
.tpllck_nav > ul {
	max-width: 90.1rem;
}
.tpllck_nav .menulevel1 > li:nth-child(6n+6) ul ul {
	left: -15rem;
}
.tpllck_nav .menulevel1 > li:nth-child(6n+6) ul .ddm_link {
	float: right;
}
.tpllck_nav .menulevel1 > li:nth-child(6n+6) ul .ddm_opener {
	float: left;
}
}

@media only screen and (min-width: 1281px) and (max-width: 1536px) {
.tpllck_nav > ul {
	max-width: 75.1rem;
}
.tpllck_nav .menulevel1 > li:nth-child(5n+5) ul ul {
	left: -15rem;
}
.tpllck_nav .menulevel1 > li:nth-child(5n+5) ul .ddm_link {
	float: right;
}
.tpllck_nav .menulevel1 > li:nth-child(5n+5) ul .ddm_opener {
	float: left;
}
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
.tpllck_nav > ul {
	max-width: 60.1rem;
}
.tpllck_nav .menulevel1 > li:nth-child(4n+4) ul ul {
	left: -15rem;
}
.tpllck_nav .menulevel1 > li:nth-child(4n+4) ul .ddm_link {
	float: right;
}
.tpllck_nav .menulevel1 > li:nth-child(4n+4) ul .ddm_opener {
	float: left;
}
}

@media only screen and (min-width: 740px) and (max-width: 1024px) {
.tpllck_nav > ul {
	max-width: 55.1rem;
}
.tpllck_nav .menulevel1 > li:nth-child(3n+3) ul ul {
	left: -15rem;
}
.tpllck_nav .menulevel1 > li:nth-child(3n+3) ul .ddm_link {
	float: right;
}
.tpllck_nav .menulevel1 > li:nth-child(3n+3) ul .ddm_opener {
	float: left;
}
}

@media only screen and (min-width: 500px) and (max-width: 739px) {
.tpllck_nav > ul {
	max-width: 30.1rem;
}
.tpllck_nav .menulevel1 > li {
	height: 4rem;
}
.tpllck_nav .menulevel1 > li:nth-child(2n+2) ul ul {
	left: -15rem;
}
.tpllck_nav .menulevel1 > li:nth-child(2n+2) ul .ddm_link {
	float: right;
}
.tpllck_nav .menulevel1 > li:nth-child(2n+2) ul .ddm_opener {
	float: left;
}
}

@media only screen and (max-width: 1023px) {
.tpllck_nav {
	position: relative !important; /* deaktiviert das Sticky-Menü - fixed zu relative */
}
}

/* ************************* jQuery-Accordion-Menu f. kleine Viewports ************************* */
@media only screen and (max-width: 499px) {
#sticky-wrapper,
.tpllck_nav {
	display: none;
}
.tpllck_nav_mobil {
	display: block;
	margin: 0 auto;
	width: 100%;
}
.tpllck_nav_mobil ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tpllck_nav_mobil a {
	box-sizing: border-box;
	text-decoration: none;
}
.toggle-nav {
	background: 10px center no-repeat rgba(92, 85, 122, 0.9);
	border: 1px solid #DEDEDE;
	display: block;
	margin: 0 auto;
	padding: 10px 10px 10px 20px;
	text-align: center;
	width: 100%;
}
a:link.toggle-nav {
	color: #eeeff0;
	font-size: 1.4em;
	position: relative;
	z-index: 999;
}
.toggle-nav.closed {
	background-image: url('images/downArrow.png');
	background-position: 35% 50%;
}
.toggle-nav.open {
	background-image: url('images/upArrow.png');
	background-position: 35% 50%;
}
nav a {
	background-color: inherit; /* Gleiche Farbe wie horizontales Menü, siehe ab ca. Zeile 77 */
	color: #fff !important;
	display: block;
	font-size: 12px;
	padding: 6px 15px;
}
nav li {
	border-top: 1px solid rgba(0, 0, 0, 0);
}
nav li li a {
	background-color: #555;
	padding-left: 25px;
}
nav li li li a {
	background-color: #444;
	padding-left: 35px;
}
nav .parent > .more {
	background-color: inherit; /* Gleiche Farbe wie horizontales Menü, siehe ab ca. Zeile 77 */
	background-position: center center;
	background-repeat: no-repeat;
	border-left: 0px solid #fff;
	border-right: 0px solid #000;
	border-radius: 10%;
	float: right;
	outline: 0px none rgba(0, 0, 0, 0);
	width: 70px;
}
nav .parent.closed > .more {
	background-image: url('images/downArrow.png');
}
nav .parent.open > .more {
	background-image: url('images/upArrow.png');
}
/* nav, li can be closed */
.tpllck_nav_mobil .closed > ul {
	display: none;
}
}