#header, #header * { display:block; line-height:normal; }
#header, #header ul { padding:0; }

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

#header > li:last-child {
	height:42px;
	
	border-top:solid 1px rgba(0,0,0,0.2);
	border-bottom:solid 1px rgba(0, 0, 0, 0.2);
}

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

#menu {
	display: flex; height:40px;
	
	padding:0;
	margin:0 auto;
}
#menu > li { display: flex; height: 100%; }

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

#menu > li:first-child { flex-grow: 1; }
#menu > li:first-child > div {
	position: relative; z-index: 1;
	height: 100%;
}
#menu > li:first-child > div > a {
	display: block; height: 100%;
	padding-left: 50px;
	
	background-position: left top;
	background-repeat: no-repeat;
	
	line-height: 40px;
	text-align:center;
	text-decoration:none;
	font-weight:500;
	color:rgba(0,0,0,0.2);
}
#menu > li:first-child > div:hover > a,
#menu > li:first-child > div.selected > a {
	color: #000;
	background-position: left bottom;
}

#menu > li:first-child > div > ul {
	position: absolute; top: calc(100% + 1px); left: calc(50% + 20px); transform: translateX(-50%);
	
	display: flex;
	flex-direction: column;
	align-items: stretch;
	
	background-color: #FFF;
	
	opacity: 0; transition: opacity .2s ease-out;
	pointer-events: none;
	
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#menu > li:first-child > div > ul > li { height: 40px; }
#menu > li:first-child > div > ul > li + li { border-top: solid 1px #ccc; }
#menu > li:first-child > div > ul > li > a {
	display: block;
	padding: 0 20px;
	
	white-space: nowrap;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	font-weight: 500;
	color: rgba(0,0,0,0.2);
}
#menu > li:first-child > div > ul > li:hover > a { color: #000; }
#menu > li:first-child > div:hover > ul {
	opacity: 1;
	pointer-events: auto;
}


#home > a		 { background-image: url(images/home.svg); }
#contact > a	 { background-image: url(images/contact.svg); }
#filmography > a { background-image: url(images/filmography.svg); }
#press > a		 { background-image: url(images/press.svg); }

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

#menu > li:last-child {
	justify-content: center;
	width: 100px;
	border-left: solid 1px #ccc;
}
#menu > li:last-child > a {
	display: block; width: 40px; height: 40px;
	
	line-height: 40px;
	text-align:center;
	text-decoration:none;
	font-weight:500;
	color:rgba(0,0,0,0.2);
}
#menu > li:last-child > a:hover,
#menu > li:last-child > a.selected { color: #000; }

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

#logo {
	height:105px;
	
	margin:0 auto;
	padding:20px 0;
	
	text-decoration:none;
	
	overflow:hidden;
}
#logo > span {
	font-weight:300;
	color:#333;
}
#logo > span:first-child {font-size:30px;}
#logo > span:last-child {font-size:20px;}