*, *::before, *::after { box-sizing:border-box; }

html {
font-size:14px;
scroll-behavior:smooth;
scroll-padding:3rem;
}

body {
font-family:Georgia, serif;
color:#000;
line-height:1.7;
margin:0;
background-color:#b9b090;
}

h1 {
color:#000;
font-size:35px;
font-weight:700;
line-height:1.2;
margin:0 0 14px 0;
}
h2 {
color:#000;
font-size:21px;
font-weight:700;
line-height:1.2;
margin:0 0 1em 0;
}
h3 {
color:#000;
font-size:21px;
font-weight:700;
font-style:normal;
margin:0;
}
a h3 {
color:#522a00;
}
h4 {
color:#000;
font-size:21px;
font-weight:700;
line-height:1;
text-transform:uppercase;
margin:0 0 7px 0;
}

p {
font-size:1.1em;
margin:0 0 1em 0;
}

i {
font-style:italic;
}
b, strong {
font-weight:700;
}

a {
color:#522a00;
text-decoration:none;
transition:all 0.3s ease 0s;
}
a:link {
color:#522a00;
text-decoration:none;
}
a:active {
color:#522a00;
text-decoration:none;
}
a:visited {
color:#522a00;
text-decoration:none;
}
a:hover {
color:#522a00;
text-decoration:underline;
}

img {
width:100%;
height:auto;
border:solid 6px #fff;
display:block;
}

.iframe {
width:852px;
height:480px;
}
@media only screen and (max-width: 900px) {
	.iframe {
	width:284px;
	height:160px;
	}
}

header {
position:relative;
width:auto;
max-width:980px;
height:auto;
padding:0;
margin:0 auto;
}
header img {
width:100%;
height:auto;
margin:0;
border:none;
display:block;
}

nav {
position:sticky;
top:0;
width:auto;
max-width:980px;
height:auto;
min-height:39px;
padding:0 21px;
margin:0 auto;
background-color:#fff;
z-index:1;
}
.menu {
position:relative;
width:auto;
height:auto;
min-height:39px;
font-size:1.2em;
list-style-type:none;
list-style-position:inside;
padding:0;
margin:0;
display:flex;
align-items:baseline;
gap:21px;
}
@media only screen and (max-width:900px) {
	.menu {
	font-size:1.4em;
	padding:35px 0 14px 0;
	flex-direction:column;
	display:none;
	}
}
.menu li {
padding:0;
margin:0;
display:block;
}
.menu li:before {
content:none;
}
.menu a {
position:relative;
color:#522a00;
text-shadow:none;
line-height:1.5;
white-space:nowrap;
text-decoration:none;
padding:7px 14px;
background-color:#fff;
display:block;
}
.menu a:hover, nav a.active {
color:#fff;
background-color:#522a00;
text-decoration:none;
}
.menu li.active a {
color:#fff;
background-color:#522a00;
}

.navbutton {
position:absolute;
top:7px;
right:21px;
width:auto;
height:auto;
color:#fff;
font-size:0.9em;
transition:all 0.3s ease 0s;
display:none;
flex-direction:column;
gap:0.3rem;
z-index:2;
}
@media only screen and (max-width:900px) {
	.navbutton {
	display:flex;
	}
}
.navbutton:hover {
cursor:pointer;
}
.navbutton-bars {
position:relative;
display:block;
z-index:10;
}
.navbutton-bars:hover {
cursor:pointer;
}
.bar1, .bar2, .bar3 {
width:20px;
height:4px;
background-color:#000;
margin:3px 0;
transition:0.4s;
}
.navbutton-bars-on .bar1 {
position:relative;
top:1px;
transform:rotate(-45deg) translate(-4px, 4px);
}
.navbutton-bars-on .bar2 {
opacity:0;
}
.navbutton-bars-on .bar3 {
position:relative;
top:1px;
box-shadow:none;
transform:rotate(45deg) translate(-6px, -6px);
}

main {
position:relative;
width:auto;
max-width:980px;
height:auto;
padding:0;
margin:0 auto;
background-color:#dcd6c7;
}

section {
position:relative;
width:auto;
height:auto;
padding:28px 35px;
margin:0;
}

.kolommen {
position:relative;
width:auto;
height:auto;
margin:0 0 14px 0;
display:flex;
flex-direction:row;
gap:56px;
}
@media only screen and (max-width: 900px) {
	.kolommen {
	flex-direction:column;
	}
}
.kolommen div {
flex:1;
}

.event {
position:relative;
width:auto;
height:auto;
max-height:180px;
margin:0.5em 0.25em 0.25em 0;
border:solid 2px #fff;
display:inline-block;
}
.event:last-child {
margin-right:0;
}

.social-knoppen {
position:relative;
width:auto;
height:auto;
margin:0 0 14px 0;
display:flex;
flex-direction:row;
justify-content:flex-end;
gap:14px;
}
.social-knoppen a {
position:relative;
width:35px;
height:35px;
background-repeat:no-repeat;
background-size:100%;
display:block;
}

.li-knop {
background-image:url('graphics/social/linkedin-z.png');
}
a.li-knop:hover {
background-image:url('graphics/social/linkedin.png');
}
.fb-knop {
background-image:url('graphics/social/facebook-z.png');
}
a.fb-knop:hover {
background-image:url('graphics/social/facebook.png');
}
.in-knop {
background-image:url('graphics/social/instagram-z.png');
}
a.in-knop:hover {
background-image:url('graphics/social/instagram.png');
}
.x-knop {
background-image:url('graphics/social/x-z.png');
}
a.x-knop:hover {
background-image:url('graphics/social/x.png');
}

footer {
position:relative;
width:auto;
max-width:980px;
height:auto;
padding:14px 21px;
margin:0 auto;
text-align:right;
}
.toplink-pijl {
width:auto;
height:auto;
color:#000;
font-size:3em;
line-height:1;
text-decoration:none;
vertical-align:middle;
transform:rotate(-90deg);
transition:all .5s ease 0s;
border:none;
background:none;
display:inline-block;
}
@media only screen and (max-width:900px) {
	.toplink-pijl { font-size:2em; }
}
.toplink-pijl:hover {
color:#fff;
text-decoration:none;
cursor:pointer;
}