:root {
	--colorMain: #7AC460;
}

@font-face {
	src: url(nevis.ttf);
	font-family: Nevis;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	outline: none;
}

p>a,
article ul a {
	color: var(--colorMain);
	text-decoration: none;
	border-bottom: 1px var(--colorMain) solid;
}

p>a:hover {
	border-bottom: 2px var(--colorMain) solid;
}

body {
	background: #F9F9F9;
	overflow-x: hidden;
}

nav {
	display: inline-block;
	width: 300px;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--colorMain);
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	height: 100vh;
	-webkit-transition: left .5s;
	transition: left .5s;
	padding-top: 60px;
	z-index: 1;
}

nav h1 {
	position: relative;
	display: inline;
	top: -44px;
	left: 16px;
	color: white;
	font-family: Nevis;
	font-size: 2em;
}

#navCloseContainer {
	height: 64px;
	width: 64px;
	position: absolute;
	top: 0;
	left: 236px;
	cursor: pointer;
}

#navClose {
	border: none;
	background: none;
	color: white;
	width: 64px;
	height: 64px;
	float: right;
	font-size: 2em;
	left: 13px;
	top: 30px;
}

#navClose,
#navClose::before,
#navClose::after {
	position: absolute;
	width: 36px;
	height: 3px;
	display: block;
	border-radius: 2px;
	-webkit-transition: all .2s;
	transition: all .2s;
	cursor: pointer;
}

#navClose::before,
#navClose::after {
	content: "";
	top: 0px;
	background: white;
}

#navClose::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#navClose::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#navClose.navOpened {
	background: white;
}

#navClose.navOpened::before {
	top: -9px;
	-webkit-transform: rotate(0);
	transform: rotate(0);
}

#navClose.navOpened::after {
	top: 9px;
	-webkit-transform: rotate(0);
	transform: rotate(0);
}

ul {
	list-style: none;
	margin-top: -24px;
	padding: 0 10px 0 8px;
}

nav li {
	border-top: 1px rgba(0, 0, 0, .05) solid;
}

nav a {
	padding: 8px;
	color: white;
	-webkit-transition: all .1s;
	transition: all .1s;
	text-decoration: none;
	width: 100%;
	display: inline-block;
	font-size: 1.2em;
}

nav a:hover {
	background: white;
	color: var(--colorMain);
	width: 300px;
	margin-left: -8px;
	padding-left: 18px;
}

nav a::after {
	content: "›";
	float: right;
	font-weight: 400;
	color: white;
	margin-top: -2px;
}

nav a:hover:after {
	color: var(--colorMain);
}

nav [type="text"] {
	margin: 8px 0 4px 0;
	border: none;
	background: url(images/search.png) no-repeat .2em center;
	background-size: 1em;
	font-size: 1.3em;
	font-weight: 100;
	padding-left: 1.6em;
	opacity: .4;
	outline: none;
	-webkit-transition: opacity .1s;
	transition: opacity .1s;
	color: white;
}

nav [type="text"]:hover,
nav [type="text"]:focus {
	opacity: 1;
}

nav [type="text"]:hover {
	cursor: pointer;
}

nav [type="text"]:focus {
	cursor: text;
}

::-webkit-input-placeholder {
	color: white;
	opacity: calc(inherit);
}

::-moz-placeholder {
	color: white;
	opacity: calc(inherit);
}

:-ms-input-placeholder {
	color: white;
	opacity: calc(inherit);
}

::placeholder {
	color: white;
	opacity: calc(inherit);
}

nav [type="text"]:focus::-webkit-input-placeholder {
	opacity: 0;
}

nav [type="text"]:focus::-moz-placeholder {
	opacity: 0;
}

nav [type="text"]:focus:-ms-input-placeholder {
	opacity: 0;
}

nav [type="text"]:focus::placeholder {
	opacity: 0;
}

main {
	width: 60%;
	margin: 64px auto 64px 400px;
}

article {
	width: calc(100vw - 164px);
	max-width: 100%;
	background: white;
	border-radius: 3px 3px 1px 1px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
	padding-bottom: 44px;
}

article+article {
	margin-top: 128px;
}

article .imgContainer {
	border-radius: 3px 3px 0 0;
	height: 400px;
	width: 100%;
}

#imgHome {
	background: url(images/imgHome.jpg) no-repeat center center;
	background-size: cover;
}

#imgPraktijk {
	background: url(images/imgPraktijk.jpg) no-repeat center center;
	background-size: cover;
}

#imgInschrijven {
	background: url(images/imgInschrijven.jpg) no-repeat center center;
	background-size: cover;
}

#imgTarieven {
	background: url(images/imgTarieven.jpg) no-repeat center center;
	background-size: cover;
}

#imgSpoed {
	background: url(images/imgSpoed.jpg) no-repeat center center;
	background-size: cover;
}

#imgContact {
	background: url(images/imgContact.jpg) no-repeat center center;
	background-size: cover;
}

#imgLinks {
	background: url(images/imgLinks.jpg) no-repeat center center;
	background-size: cover;
}

article .textContainer {
	max-width: 85%;
	margin: auto;
}

.lastUpdated {
	background: var(--colorMain);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	color: white;
	text-align: center;
	padding-top: .9em;
	position: relative;
	left: 85%;
	top: -37px;
}

.lastUpdated span {
	font-family: Nevis;
	display: inline-block;
}

h2 {
	color: black;
	font-weight: 300;
	font-family: Nevis;
	letter-spacing: -1px;
	margin-top: 20px;
	font-size: 3em;
}

h3 {
	margin-top: 16px;
	font-size: 1em;
	font-weight: 300;
	font-family: Nevis;
}

p:not(.subTitel) {
	font-weight: 400;
	font-size: .8em;
	letter-spacing: .015em;
	line-height: 22px;
}

p:not(.subTitel)+p {
	margin-top: 1em;
}

.subTitel::before {
	content: "[ ";
}

.subTitel {
	color: var(--colorMain);
	letter-spacing: 1px;
	margin-bottom: 32px;
	text-transform: uppercase;
}

.subTitel::after {
	content: " ]";
}

textarea {
	width: 100%;
	padding: 8px 12px;
	overflow: hidden;
	resize: none;
	border: 1px rgba(0, 0, 0, .2) dashed;
	transition: border .5s, background-position .15s ease, background-image .4s;
	background: url(images/editLowerAlpha.png) no-repeat 99% 8px;
	font-weight: 400;
	font-size: .8em;
	letter-spacing: .015em;
	line-height: 22px;
	border-radius: 2px;
	background-size: 16px;
}

textarea:hover {
	border: 1px rgba(0, 0, 0, .2) solid;
	background: url(images/edit.png) no-repeat 98.5% 12px;
}

textarea:focus {
	border: 1px #3590FF solid;
	background: url(images/editLowerAlpha.png) no-repeat 99% 8px;
}

textarea:hover,
textarea:focus {
	background-size: 16px;
}

table {
	font-size: .9em;
	margin: 16px 0;
}

tr {
	display: table;
	width: 500px;
	padding: 4px;
}

tr,
td {
	text-align: left;
	width: 300px;
}

th {
	color: var(--colorMain);
	font-family: Nevis;
	font-size: 1.4em;
}

tr+tr {
	border-top: 1px rgba(0, 0, 0, .1) solid;
}

.opbeltijd {
	color: var(--colorMain);
}

#articleFooter {
	position: relative;
	left: -8.8%;
	top: 44px;
	width: 117.6%;
	padding: 16px;
	background: var(--colorMain);
	color: white;
	border-radius: 0 0 3px 3px;
}

.submit_form {
	float: right;
}

#editBox {
	background: white;
	height: 138px;
	position: fixed;
	left: calc(100vw - 294px);
	top: calc(100vh - 154px);
	z-index: 2;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
	text-align: center;
}

#editBox h2 {
	font-size: 1em;
	margin-bottom: 11px;
}

#cancel_button,
#submit_button {
	box-shadow: none;
}

#cancel_button {
	background-color: rgb(170, 10, 60);
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}

#submit_button {
	background-color: #7AC460;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}

#editBox a {
	display: block;
	padding-top: 58px;
}

.tel {
	font-weight: 900;
}

article ul {
	font-size: .8em;
	margin: 8px 0;
	padding: 0;
	list-style: circle;
}

article ul li+li {
	margin-top: 8px;
}

span.tel::before {
	content: "☎ ";
}

@media screen and (max-width: 1080px) {
	nav {
		display: none;
	}
	
	main {
		margin: 0;
	}
	
	article {
		max-width: 100vw;
		width: 100vw;
	}
	
	article h2 {
		hyphens: manual;
	}
	
	article+article {
		margin-top: 8px;
	}
}