#header {
	width: 100%;
	height: 80px;
	position: fixed;
	left: 0;
	top: 0;
	background: #2B251D;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	z-index: 3;
}
#header #header-container {
	position: relative;
	width: 90%;
	max-width: 1180px;
	margin: 0 auto;
	height: 80px;
}
#header #header-container #logo {
	width: 110px;
	height: 80px;
	position: absolute;
	left: 25px;
	top: 0;
	background-image: url('../images/logo-oorlogsmuseum.png');
	background-size: 109px 40px;
	background-repeat: no-repeat;
	background-position:left 16px;
}
#header #header-container #logo a {
	display: block;
	width: 100%;
	height: 100%;
}
#header #header-container #menu {
	width: 100%;
	max-width: 880px;
	position: absolute;
	right: 80px;
	height: 80px;
	line-height: 80px;
	box-sizing: border-box;
}
#header #header-container #menu ul li {
	float: left;
	box-sizing: border-box;
	min-height: 80px;
	text-transform: uppercase;
}
#header #header-container #menu ul li.home span {
	margin-top:17px;
	width: 40px;
	height: 40px;
	display: block;
	background: #221D17;
	background-image: url('../images/icons/home.png');
	background-position: 50% 50% ;
	background-repeat: no-repeat;
}
#header #header-container #menu ul li a:not(.tripadvisorbtn) {
	display: block;
	text-align: center;
	color: #fff;
	padding: 0 17px;
	border-top: 3px solid transparent;
	line-height: 78px;
	letter-spacing: 1px;
	height: 80px;
	box-sizing: border-box;

	transition: color 100ms ease;
}
#header #header-container #menu ul li a.active {
	color:#9eaa8a
}
#header #header-container #menu ul li:hover > a {
	background: #fff;
	border-top: 3px solid #FBBA00;
	background-image: url('../images/pattern.v2.png');
	color: #2b251d;
}
#header #header-container #menu ul li.home:hover a {
	border-color: transparent;
	background: transparent;
}
#header #header-container #menu ul li.home a:hover span {
	background-color: #677447;
}
#header #header-container #menu ul li.tickets a {
	color: #FBBA00;
}
#header #header-container #menu ul li.tickets a.there {
	border-top: 3px solid #FBBA00;
}
#header #header-container #menu ul li.tickets a:hover {
	border-color: #FF6A00;
	color: #FF6A00;
	background: transparent;
}
#header #header-container #langmenu {
	position: absolute;
	right: 45px;
	top: 20px;
	width: 40px;
	background: #4D463C;
	z-index: 9;
	display: none;
}
#header #header-container #langmenu.active {
	display: block;
}
#header #header-container #langmenu img {
	width: 16px;
	height: 12px;
	margin: 14px 12px;
	display: block;	
}
#header #header-container #langmenu img:hover {
	opacity: 0.5;
} 
#header #header-container #langmenu-open {
	width: 40px; height: 40px;
	background: #221D17;
	position: absolute;
	right: 45px;
	top: 20px;
	cursor: pointer;
}
#header #header-container #langmenu-open span {
	display: block;
}
#header #header-container #langmenu-open img {
	width: 16px;
	height: 12px;
	margin: 14px 12px;
	display: block;
}
#header #header-container #search_top {
	position: absolute;
	right: 95px;
	top: 20px;
	width: 40px; height: 40px;
	background: #221D17;
	background-image: url('../images/icons/icon-search.png');
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	cursor: pointer;
	z-index: 91;
}
#header #header-container #menu ul li .supermenu {
	width: 100%;
	position: fixed;
	left: 50%;
	top: 80px;
	min-height: 380px;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	/* background-color: #5f723e; background-image:url(../images/pattern.png), url(../images/backgrounds/menu-dropdown.jpg); background-position:0 0, right top; background-size:auto, 290px auto; background-repeat:repeat, repeat-y; */
	display: none;
	z-index: 2;
	background-color: #fff;
	background-image:url(../images/pattern.v2.png);
}
#header #header-container #menu ul li .supermenu:after {
	content: "";
	width: 100%;
	height: 380px;
	position: absolute;
	right: 0;
	top: 0;
	background-image:url(../images/supermenu-right.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	display: block;
}
@media screen and (max-width: 1100px) {
	#header #header-container #menu ul li .supermenu:after {
		opacity: 0.4;
	}
}
#header #header-container #menu ul li:hover .supermenu,
#header #header-container #menu ul li.has-super.vis .supermenu {
	display: block;
}
#header #header-container #menu ul li .supermenu .supermenu-items {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	z-index: 2; 
	position: relative;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column {
	width: 25%;
	float: left;
	box-sizing: border-box;
	padding-bottom: 45px;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving {
    width: 100px;
    position: absolute;
    right: -30px; 
    top: -20px;
}
@media screen and (max-width: 1100px) {
	#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving {
		right: 100px;
	}
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving ul.set {
	width:100%;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving ul.set img {
	width:100%;
	display: none;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving ul.set .title {
	display: none;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving ul.set li.map a {
	display: block;
	width: 179px;
	height: 182px;
	background-image: url('../images/route.v2.map.png');
	background-size: 179px 182px;
	position: relative;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column.routebeschrijving ul.set li.map a:hover:after {
	content: "PLAN ROUTE ›";
	position: absolute;
	left: 50%;
	bottom: 0;
	padding: 8px 12px; 
	color: #fff;
	background: #000;
	font-weight: 300;
	font-size: 0.9em;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	white-space: nowrap;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set {
	width: 90%;
	margin-top: 55px;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li {
	display: block;
	float: none;
	padding: 0;
	min-height: inherit!important;
	text-align: left;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.title,
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li a {
	height: auto;
	min-height: auto;
	text-align: left;
	padding: 8px 0;
	line-height:1.7em;
	border: 0;
	border-bottom: 2px solid #dcdcdc;
	color: #4f5824;
	font-weight: 800;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.title {
	color: #505b23;
	font-size:22px;
	font-weight: 800;
	letter-spacing: 1px;
	border-bottom:0;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li:nth-child(1) a {
	display:none;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.active a,
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li a.active {
	color: #2c321e;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li a:hover {
	color: #323a14;
	background: transparent;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.map,
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.map a {
	border: 0;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.map img {
	margin-top: -7px;
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.more a {
	border: 0;
	color: #b5b5b5;
	font-weight: 300;
	/*padding-left: 28px;
	background-image: url('../images/icons/arrow-light_yellow.png');
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 16px;*/
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.more a:before {
	content: "> ";
}
#header #header-container #menu ul li .supermenu .supermenu-items .column ul.set li.more a:hover {
	color: #323a14;
	/* background-image: url('../images/icons/arrow-dark_green.png'); */
}
#header #header-container #menu ul li .supermenu .supermenu-items .buttons {
	position: absolute;
	left: 50%;
	bottom: 0px;	
	width: 100%;
	max-width: 940px;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#header #header-container #menu ul li .supermenu .supermenu-items .ticket-button {
	float: left;
}
#header #header-container #menu ul li .supermenu .supermenu-items .route-button {
	float: right;
}
#header #header-container #menu ul li .supermenu .supermenu-items .ticket-button a {
	display: block;
	background-color: #FBBA00;
	background-image: url('../images/pattern.png');
	/* border: 3px solid #fcb70f; */
	color: #fff;
	padding: 15px 20px;
	padding-right: 50px;
	line-height: 1;
	height: auto;
	min-height: auto;	
	font-size: 1.2em;
	position: relative;
}
#header #header-container #menu ul li .supermenu .supermenu-items .ticket-button a:hover {
	background-color: #d24202;
}
#header #header-container #menu ul li .supermenu .supermenu-items .ticket-button a:after,
#header #header-container #menu ul li .supermenu .supermenu-items .route-button a:after {
	content: "";
	width: 40px;
	height: 100%;
	background-image: url('../images/icons/arrow.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	right: 0;
	top: 0;
}
#header #header-container #menu ul li .supermenu .supermenu-items .route-button.breed {
	width:100%;
}
#header #header-container #menu ul li .supermenu .supermenu-items .route-button a {
	display: block;
	background-color: #5c633e;
	background-image: url('../images/pattern.png');
	border: 3px solid transparent;
	color: #fff;
	padding: 15px 20px;
	padding-right:57px;
	line-height: 1;
	height: auto;
	min-height: auto;	
	font-size: 1.2em;
	position: relative;
	box-sizing: border-box;
	width:100%;	
	margin-right:14px;
	text-align: left;
}
#header #header-container #menu ul li .supermenu .supermenu-items .route-button a:hover {
	background-color: #485131;
}
#header #header-container #menu ul li .supermenu img.tripadvisor,
#header #header-container #menu ul li .supermenu a.tripadvisorbtn img {
	position: absolute;
	right: 0;
	width: 100px;
	top: 0;
	cursor:pointer;
	-ms-transform: translateX(50%) translateY(-20%);
	-webkit-transform: translateX(50%) translateY(-20%);
	transform: translateX(50%) translateY(-20%);
}

/* Tripadvisor pop-up */
#tripadvisor {
	position:fixed;
	margin:0;
	padding:15px 120px 10px 120px;
	top:30px;
	left:50%;
	border-radius:5px; 
	opacity:0;
	-ms-transform:translateX(-50%) translateY(-105%);
	-webkit-transform:translateX(-50%) translateY(-105%);
	transform:translateX(-50%) translateY(-105%);
	transition:all 0.4s;
	z-index:12;
	background-color:#fff;
}
#tripadvisor.active {
	opacity:1;
	-ms-transform:translateX(-50%) translateY(0);
	-webkit-transform:translateX(-50%) translateY(0);
	transform:translateX(-50%) translateY(0);
}
#tripadvisor .close {
	position:absolute; display:block; top:10px; right:15px; font-family:Arial; font-size:32px; color:#999; font-weight:bold; line-height:normal; cursor:pointer; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);
}
#tripadvisor .close:hover {
	color:#ccc;
}
#tripadvisor-hitbox {
	position:fixed;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:11;
}
#tripadvisor-hitbox.active {
	display:block;
}


.supermenu-overlay {
	position: fixed;
	width: 100%;
	height: calc(100% - 80px);
	left: 0;
	top: 80px;
	background: rgba(0,0,0,0.5);
	z-index:-1;
	pointer-events: none;
	opacity: 0;
	transition:opacity 600ms;
}
.supermenu-overlay.visible {
	opacity: 1;
	z-index:1;
}


/* mobile menu */
#menu-mobile{
	display:none;
	width: 40px; height: 40px;
	background: #221D17;
	position: absolute;
	left: 20px;
	top: 20px;
	cursor: pointer;
	background: #221D17;
	background-image: url('../images/icons/menu-mobile.png');
	background-position: 50% 50% ;
	background-repeat: no-repeat;	
	z-index: 9;
}
#menu-mobile:hover {
	background-color: #667345;
}
#side-nav {
	display:none;
	position: fixed;
	top: 80px;
	left: 0px;
	z-index:2;
	background-color: #5f723e;
	background-image: url('../images/pattern.png');
	height: calc(100% - 80px);
	box-sizing: border-box;
	font-family: Arial;
	font-weight: 400;
	font-size: 1.1em;
	overflow-y: scroll;
	color: #fff;
	width: 100%;
	max-width: 400px;
	-ms-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	transition: all 300ms;
	-webkit-overflow-scrolling: touch;
}
#side-nav img.tripadvisor {
	display:none;
}
#side-nav.active {
	-ms-transform: translateX(0%);
	-webkit-transform: translateX(0%);
	transform: translateX(0%);	
}
#side-nav > ol {
	overflow-y: scroll;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
}
#side-nav ol li {
	list-style-type: none;
	
}
#side-nav ol li.title {
	color: #fff;
	display: block;
	border-bottom: 1px solid #58673e;
	padding-left: 10px;
	padding: 10px 20px;
	font-weight: bold;	
}
#side-nav ol li a {
	color: #fff;
	display: block;
	border-bottom: 1px solid #58673e;
	padding-left: 10px;
	padding: 10px 20px;
	position: relative;
}


#side-nav ol li.active > a {
	background-color: rgba(0,0,0,.1);
}

#side-nav ol li a:hover {
	opacity: 0.5;
}
#side-nav ol li ol li a {
	padding-left: 40px;
}
#side-nav ol li ol li ol li a {
	padding-left: 60px;
}
#side-nav ol li a:after {
	content: "";
	float: right;
	color: #34401f;
	font-size: 2em;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50px;
	border-left: 1px solid #58673e;
	background-image: url('../images/icons/arrow.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 10px 10px;
}