body {
	background-color: #dacf87;
	font-size: 1.2rem;
	color: blue;
}

nav {
	&.primary-navigation {
		margin: 0 auto;
		display: block;
		text-align: center;
		font-size: 16px;

		ul li {
			list-style: none;
			margin: 0 auto;
			border-left: 2px solid darkblue;
			display: inline-block;
			padding: 0 30px;
			position: relative;
			text-decoration: none;
			text-align: center;
			font-family: arvo;
			font-weight: bold;
		}

		li a {
			color: blue;
		}

		li a:hover {
			color: black;
		}

		li:hover {
			cursor: pointer;
		}

		ul li ul {
			visibility: hidden;
			opacity: 0;
			position: absolute;
			padding-left: 0;
			left: 0;
			display: none;
			background-color: #b8b8b8;
		}

		ul li:hover > ul,
		ul li ul:hover {
			visibility: visible;
			opacity: 1;
			display: block;
			min-width: 250px;
			text-align: left;
			padding-top: 20px;
			box-shadow: 0px 3px 5px -1px #ccc;
		}

		ul li ul li {
			clear: both;
			width: 100%;
			text-align: left;
			margin-bottom: 20px;
			border-style: none;
		}

		ul li ul li a:hover {
			padding-left: 10px;
			border-left: 3px solid black;
			transition: all 0.3s ease;
		}
	}
}

a {
	text-decoration: none;
}

ul li ul li a {
	transition: all 0.5s ease;
}

header > a {
	float: right;
	margin-right: 5%;
	color: black;
}

header,
nav,
article,
footer {
	width: 1024px;
	margin: 1% auto;
	border: 2px solid black;
}

header {
	background-image: url('ephemeral_b.jpg');
	background-repeat: repeat-x;
	overflow: hidden;
}

img#logo {
	width: 15%;
	height: 15%;
	float: left;
}

article {
	background-color: #fff;
}

article > * {
	margin: 1%;
}

footer {
	text-align: center;
}

a.linken {
	background-color: #2273b4;
	text-decoration: none;
	color: white;
	text-align: center;
	padding: 0 5px 0 5px;
}

a.linken:hover {
	background-color: white;
	color: #2273b4;
	border: 1px solid #2273b4;
}

a.taalkeuze {
	background-color: black;
	display: block;
	padding: 0 20px;
	color: white;
	float: right;
	margin-top: 4%;
}

address > * {
	margin: 5px;
}

#menu-toggle {
	display: none;
}

@media screen and (max-width: 1023px) {
	header,
	nav,
	article,
	footer {
		border: none;
		/*margin: 0;  */
	}
}

@media screen and (max-width: 700px) {
	.menu-button-container {
		display: flex;
	}

	#menu-toggle ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#menu-toggle:checked ~ .menu li {
		border: 1px solid #333;
		height: 2.5em;
		padding: 0.5em;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
}