/*	Navi		---------------------------------------------------------------------------------------------------- */

nav.sub {
	position:fixed;
	display:block;
	width:auto;
	height:auto;
	left:-3px;
	top:145px;
	margin:0;
	padding:0;
	text-align: left;
	color: #999;
	background-color: rgba(238,238,238,0.90);
	backdrop-filter: blur(5px);
    -o-backdrop-filter:blur(5px);
    -ms-backdrop-filter:blur(5px);
    -moz-backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border: 3px solid #FFF;
	-webkit-border-radius: 0 0 15px 15px;
	-moz-border-radius: 0 0 15px 15px;
	border-radius: 0 15px 15px 0;
	font-family: 'Raleway_Light', Helvetica Neue, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	line-height: 30px;
	font-size: 16px;
	overflow: hidden;
	z-index:9999;
}
label {
	position: relative;
	display: block;
	cursor: pointer;
	width: auto;
	font-family: 'Raleway_Bold', Helvetica Neue, Arial, Helvetica, sans-serif;
	text-align: left;
	color: #FFF;
	background-color: rgba(153,153,153,0.75);
	padding: 10px 60px 10px 20px;
	margin: 0;
}
label i, nav.sub ul li a.seg i {
	padding: 0 10px;
	vertical-align: -1px;
	-webkit-transition: .5s;
	transition: .5s;
}
label:hover {
	background-color: #00607C;
	-webkit-transition: .5s;
	transition: .5s;
}

input.filter1,
input.filter2 {
	display: block;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding:0;
}
nav.sub ul.submenu,
ul.subsubmenu {
	display: block;
	opacity: 0;
	width: auto;
	height: auto;
	max-width: 0;
	max-height: 0;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
	margin: 0;
	padding:0;
	list-style:none;
	overflow: auto;
}
ul.subsubmenu.vsbl {
	opacity: 1;
	max-width: 1000px;
	max-height: 2000px;
}
ul.subsubmenu.vsbl li {
	padding-left: 20px;
}
input.filter1:checked~ul.submenu,
input.filter2:checked~ul.subsubmenu {
	opacity: 1;
	max-width: 1000px;
	max-height: 2000px;
    -webkit-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
}

input.filter1:checked~ul.submenu {
	padding:10px 20px;
}
input.filter2:checked~ul.subsubmenu {
	padding:0 20px 10px;
}
input.filter1:checked~label i,
input.filter2:checked~label i {
	transform: rotate(180deg);
	-webkit-transition: .5s;
	transition: .5s;
}

nav.sub ul li, ul.submenu label {
	position: relative;
	display: block;
	cursor: pointer;
	height:auto;
	width: auto;
	font-family: 'Raleway_Regular', Helvetica Neue, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #444;
	background-color:transparent;
	text-align: left;
	padding:0;
	border: none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
nav.sub ul li a.seg:hover i,
nav.sub ul li a.seg.active i {
	transform: rotate(-90deg);
	-webkit-transition: .5s;
	transition: .5s;
}
nav.sub ul.submenu li.hdln {
	font-family: 'Raleway_Medium', Helvetica Neue, Arial, Helvetica, sans-serif;
	padding:0 0 5px;
	margin: 0 0 5px;
	border-bottom: 1px dotted #888;
}
nav.sub ul.submenu li.hdln.prtnr {
	padding:0;
	margin: 0;
	border-bottom: none;
}
nav.sub ul li a {
	color: #444;
}
nav.sub ul li a:hover,
ul.submenu label:hover {
	background-color:transparent;
	color: #00607C;
}
nav.sub ul.subsubmenu li a {
	font-family: 'Raleway_Light', Helvetica Neue, Arial, Helvetica, sans-serif;
	color: #888;
}
nav.sub ul.subsubmenu li a:hover,
nav.sub ul li.active a,
nav.sub ul li a.seg.active {
	color: #00607C;
}



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

/*	Navi		---------------------------------------------------------------------------------------------------- */


nav.sub {
	top:120px;
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	border-radius: 0 10px 10px 0;
	line-height: 25px;
}
label {
	padding: 10px 20px;
}
input.filter1:checked~ul.submenu {
	padding:10px 10px 10px 20px;
}
input.filter2:checked~ul.subsubmenu {
	padding:0 10px 5px;
}
nav.sub ul.submenu li.hdln {
	padding:0 0 5px;
	margin: 0 0 5px;
}

}


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

/*	Navi		---------------------------------------------------------------------------------------------------- */

nav.sub {
	top:100px;
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	border-radius: 0 10px 10px 0;
	line-height: 22px;
	font-size: 15px;
}
label {
	padding: 10px;
}
input.filter1:checked~ul.submenu {
	padding:10px;
}
input.filter2:checked~ul.subsubmenu {
	padding:0 5px 5px;
}
nav.sub ul li, ul.submenu label {
	font-size: 14px;
}
nav.sub ul.submenu li.hdln {
	padding:0 0 5px;
	margin: 0 0 5px;
	border-bottom: 1px dotted #888;
}

}


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


/*	Navi		---------------------------------------------------------------------------------------------------- */

nav.sub {
	position:relative;
	display:block;
	width:calc(100% - 20px);
	height:auto;
	left:auto;
	top:auto;
	margin:10px auto;
	padding:0;
	text-align: left;
	background-color: #DDD;
	backdrop-filter: blur(0);
    -o-backdrop-filter:blur(0);
    -ms-backdrop-filter:blur(0);
    -moz-backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
label {
	padding: 10px 20px;
}
input.filter1:checked~ul.submenu {
	padding:10px 20px;
}
input.filter2:checked~ul.subsubmenu {
	padding:0 5px 5px 10px;
}
nav.sub ul.submenu li.hdln {
	padding:0 0 5px;
	margin: 0 0 5px;
}

}



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


/*	Navi		---------------------------------------------------------------------------------------------------- */

	
}


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


/*	Navi		---------------------------------------------------------------------------------------------------- */


	
}


/* Farben
Zwaardvis gelb
100% = #F39200
Zwaardvis blau
100% = #00607C
*/