/* ************************* lck_ddmenu - Multi-Level DropDown-Menu (menulevel1-3), responsive and touch friendly - 02/2016 ************************* */
.tpllck_nav_mobil {
	display: none;
}
.tpllck_nav {
	background-color: #000000;
	font-size: 16px;
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: 15px;
}

/* ************ 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 Menulevel1 */
.tpllck_nav > ul {
	display: table;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	z-index: 100;
}

/* ************ Listenpunkte - Alle */
.tpllck_nav li {
	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;
}

/* ************ Listenpunkte Menulevel 1 - Allgemein */
.tpllck_nav .menulevel1 > li {
	font-size: 1rem;
	font-weight: 500;
	height: 5rem;
	line-height: 0;
	width: 13rem;
}

/* ************ Listenpunkte Menulevel 1 + 2 + 3, Accordion-Menu Links Menulevel 1 - Einzelne Farben f. Hintergrund */
.tpllck_nav .menulevel1 > li:nth-child(7n+1),
.tpllck_nav .menulevel1 > li:nth-child(7n+1) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+1) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+2),
.tpllck_nav .menulevel1 > li:nth-child(7n+2) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+2) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+3),
.tpllck_nav .menulevel1 > li:nth-child(7n+3) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+3) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+4),
.tpllck_nav .menulevel1 > li:nth-child(7n+4) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+4) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+5),
.tpllck_nav .menulevel1 > li:nth-child(7n+5) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+5) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+6),
.tpllck_nav .menulevel1 > li:nth-child(7n+6) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+6) > a {
	background-color: #652B7C;
}
.tpllck_nav .menulevel1 > li:nth-child(7n+7),
.tpllck_nav .menulevel1 > li:nth-child(7n+7) > ul li,
.tpllck_nav_mobil nav > ul > li:nth-child(7n+7) > a {
	background-color: #652B7C;
}
/* ************ 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: #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: #560a74;
	/* -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 .5s ease;
	transition: opacity .5s ease;
	visibility: hidden;
	z-index: 200;
}

/* ************ Listenpunkte Menulevel 2 - Allgemein */
.tpllck_nav .menulevel2 > li {
	background-color: #565D67;
	height: 3rem;
	line-height: 3rem;
	width: 15rem;
}

/* ************ 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: 1.3rem;
	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;
}
/* ************************* 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;
}
/* ************************* Menulevel 3 Standard Fold-out + Listenpunkt Allgemein */
.tpllck_nav ul ul ul {
	margin-left: 0;
	padding-top: 1rem;
	position: absolute;
	left: 15rem;
	top: 0;
	width: 15rem;
	z-index: 300;
}
.tpllck_nav .menulevel3 > li {
	background-color: #565D67;
	height: 3rem;
	line-height: 3rem;
	width: 15rem;
}

/* ************************* 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: 45.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;
}*/
.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(253, 245, 230, 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: #4F97C2;
	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%;
	margin-bottom: .4rem;
}
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 #fff;
}
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: 1px solid #fff;
	float: right;
	width: 50px;
}
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;
}
}

@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;
}*/
.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(253, 245, 230, 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: #4F97C2;
	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%;
	margin-bottom: .4rem;
}
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 #fff;
}
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: 1px solid #fff;
	float: right;
	width: 50px;
}
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;
}
}

/* ************************* jQuery-Accordion-Menu f. kleine Viewports ************************* */
@media only screen and (max-width: 499px) {
.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(253, 245, 230, 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: #4F97C2;
	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%;
	margin-bottom: .4rem;
}
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 #fff;
}
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: 1px solid #fff;
	float: right;
	width: 50px;
}
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;
}
}