#nav {
    position: relative;
	background-color: #012e58;
	display: block;
	z-index: 12;
	padding:10px 0px;
	border-top:8px solid #0095c0;
	}

#nav > a						{ display: none; }

#nav .wrapper > ul {
	position: relative;
	width:100%;
	}

#nav ul > li {
    position: relative;
    list-style: none;
    padding: 5px 20px 5px 20px;
    display: inline-block;
    z-index: 1;
    }

#nav ul > li:first-child {padding-left:0px; }

#nav li a {
	color: #fff;
	text-decoration: none;
	padding: 4px 0px 4px 0px;
	display: block;
	text-transform:uppercase;
	}

#nav .active a,
#nav li a:hover {
	color: #f6b130;
	}


/* submenu */
#sidenav {
	position: relative;
	border-right: 2px solid #f8b333;
	border-bottom: 2px solid #f8b333;
	width: 275px;
	margin-bottom: 18px;
	}

#sidenav:after, #sidenav:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	}

#sidenav:after {
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
	}

#sidenav:before {
	border-left-color: #f8b333;
	border-width: 13px;
	margin-top: -13px;
	}

#sidenav > ul > li				{ margin-bottom: 18px; }

#sidenav > ul > li > i:before {
	content: "\f105";
	font-family: FontAwesome;
	font-style: normal;
	color: #0e72b5;
	width: 18px;
	height: 18px;
	display: block;
	float: left;
	}

#sidenav .active i:before,
#sidenav > ul > li:hover > i:before {
	color: #000;
	}

#sidenav > ul > li > a			{ display: block; padding-left: 20px; padding-right: 20px; }
#sidenav .active a 				{ color: #000; }

.topbar-right .content {margin-top:10px; float:right;}

#nav ul > li:last-child {
    float: right;
	padding-right:0px;
}


/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */
@media only screen and (max-width: 1280px) {

	#nav ul > li				{ padding: 5px 15px 5px 15px; }

	#sidenav					{ width: 237px; }

}

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

	#nav ul > li				{ font-size: 0.9em; padding: 5px 12px 5px 12px; }

	#sidenav					{ width: 207px; }

}

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

	#nav ul > li 				{ padding: 5px 10px 5px 10px; }

	#sidenav					{ width: 189px; }

}

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

	#nav ul > li 				{padding: 0px 5px; font-size:0.8em;}		
	#sidenav					{ width: 214px; }
}

/* ==> breakpoint notebooks, tablets */
@media only screen and (max-width: 800px) {

    #nav .wrapper > ul {
        display: none;
        position: absolute;
        width: 100%;
        height: auto;
		padding: 0px;
        top: 31px;
        right: 0;
        z-index: 1000;
   	 	}

	#nav ul > li:last-child 	{float: left;}		
	#nav ul > li 				{ display: block; }
	#nav ul > li:first-child 	{ padding-left:5px; }
    #nav li ul 					{ position: static; }
	#nav:target .wrapper > ul 	{ position: static; display: block; }
	.topbar-right .content		{ margin-top:5px; }

	#nav li a {
		border-bottom: 0px;
		color: #fff;
		text-decoration: none;
		}

	#nav .active a,
	#nav li a:hover 			{ border-bottom: 0px; }

	#nav:not(:target) > a:first-of-type,
	#nav:target > a:last-of-type {
		position: relative;
		text-transform: uppercase;
		color: #fff;
		text-align: center;
		text-decoration: none;
		display: block;
		padding: 7px 10px;
		}

	#nav:not(:target) > a:hover:first-of-type,
	#nav:target > a:hover:last-of-type {
		color: #f6b130;
		}

	#nav li 					{ -webkit-tap-highlight-color: transparent; }

	#sidenav {
		border-right: 0px solid #f8b333;
		border-top: 2px solid #f8b333;
		width: 100%;
		margin-top: 36px;
		padding-top: 18px;
		}

	#sidenav:after, #sidenav:before {
		display: none;
		}


}



/* print */
@media print {

	#nav						{ display: none; }

}