#header {
	position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 10;
	display: flex; width: 1024px;
	flex-direction: row;
	align-self: center;
	
	color: #FFF;
}

/*----------------------------------------------------------------------------------*/

#header > nav {
	position: relative;
	flex: 1; height: 50px;
	margin-right: 1px;
	padding-right: 20px;
	
	background: url(logo/light) no-repeat, linear-gradient(to right, #EE2E7B, #9E2064);
	background-position: top -15px left 2px, top left;
	box-shadow: -1px 0 2px rgba(0,0,0,.5);
}
#header > nav:before {
	content: "";
	position: absolute; top: -15px; left: 2px; z-index: -1;
	display: block; height: 100px; width: 300px;
	background-image: url(logo/dark);
}

/*----------------------------------------------------------------------------------*/

#header > nav > ul {
	display: flex; width: 100%; height: 100%;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
}
#header > nav > ul > li > a {
	display: block; height: 100%;
	padding: 0 10px;
	
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 1px 1px rgba(0,0,0,.2);
	
	line-height: 50px;
	font-size: 18px;
	color: inherit;
}
#header > nav > ul > li > a:hover,
#header > nav > ul > li > a.active {
	text-shadow:
		 1px  1px rgba(255,255,255,.1),
		-1px -1px rgba(0,0,0,.2);
	color: #CCC;
}