/* https://codepen.io/signalkuppe/pen/YybXNJ */

.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.menu ul ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.menu-dropdown,
.menu input[type=checkbox] {
	display: none;
}

.menu-dropdown a {
	font-size: .8em !important;
	padding: 5px 15px !important;
	border-bottom: 1px solid #fff;
}

.menu label:hover {
	cursor: pointer;
}

.menu-l1-off a:link,
.menu-l1-off a:visited {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: bold;
	background: #c00;
	color: #fff;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
}

.menu-l1-off a:hover,
.menu-l1-off a:active,
.menu-l1-off a:focus {
	background: #00c;
	color: #f0f;
}

.menu-l1-on a:link,
.menu-l1-on a:visited,
.menu-l1-on a:hover,
.menu-l1-on a:active,
.menu-l1-on a:focus {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
	background: #0c0;
	color: #000;
}

.menu-l2-off a:link,
.menu-l2-off a:visited {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #c00;
	color: #fff;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
}

.menu-l2-off a:hover,
.menu-l2-off a:active,
.menu-l2-off a:focus {
	background: #00c !important;
	color: #f0f;
}

.menu-l2-on a:link,
.menu-l2-on a:visited,
.menu-l2-on a:hover,
.menu-l2-on a:active,
.menu-l2-on a:focus {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
	background: #070;
	color: #bbb;
}

.menu-l3-off a:link,
.menu-l3-off a:visited {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #00c;
	color: #fff;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
}

.menu-l3-off a:hover,
.menu-l3-off a:active,
.menu-l3-off a:focus {
	background: #0cc;
	color: #f00;
}

.menu-l3-on a:link,
.menu-l3-on a:visited,
.menu-l3-on a:hover,
.menu-l3-on a:active,
.menu-l3-on a:focus {
	font-family: arial,verdana,sans-serif;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	display: block;
	white-space: nowrap;
	margin: 0;
	background: #3a3;
	color: #0ff;
}

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

	.menu {
		max-width: 100%;
		margin: 0 auto;
	}

	.menu > label,
	.menu > input[type=checkbox] {
		/* display: none; Raus wegen Form Tab*/
		display: none;
	}

	.menu a {
		padding: 10px 15px;
	}

	.menu > ul > li {
		display: inline-block;
	}

	.menu-hasdropdown {
		position: relative;
	}

	.menu-hasdropdown:hover > ul, .menu-hasdropdown:focus-within > ul {
		display: block;
		-webkit-animation: grow 0.5s ease-in-out;
		animation: grow 0.5s ease-in-out;
	}

	.menu-hasdropdown > ul {
		position: absolute;
		top: 100%;
		left: 0;
		width: 200px;
		text-align: left;
	}

	.menu-hasflyout > ul {
		left: 100%;
		top: 0;
	}

	.menu-hasflyout .menu-downicon {
		display: none;
	}

}

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

	.menu > ul,
	.menu-righticon {
		display: none;
	}

	input[type=checkbox]:checked + ul {
		display: block;
		-webkit-animation: grow 0.5s ease-in-out;
		animation: grow 0.5s ease-in-out;
	}

	.menu > label {
		/*display: block;
		text-align: right;
		margin: 0;*/
		position: absolute;
		top: -90px;
		right: 20px;
		padding: 25px 22px;
	}

	.menu a {
		padding: 15px 20px;
		text-align: left !important;
		border-bottom: 1px solid #fff !important;
	}

	.menu > ul label > span {
		float: right;
		padding: 5px 10px;
		font-style: normal;
		font-size: 30px;
	}

	.menu-dropdown a {
		background: #024d74;
	}

	.menu-hasflyout > ul a {
		background: #023d5b;
	}

	.navbar-icon {
		background: transparent url(../images/icon-navbar.png) no-repeat 99% 50%;
		background-size: 30px;
		height: 50px;

	}

}

@-webkit-keyframes grow {

	0% {
		display: none;
		opacity: 0;
	}

	50% {
		display: block;
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}

}

@keyframes grow {

	0% {
		display: none;
		opacity: 0;
	}

	50% {
		display: block;
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}

}