@import url('https://fonts.googleapis.com/css2?family=Asul:wght@400;700&display=swap');

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, iframe, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; box-sizing: border-box; }

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 300; }

/* Removes list-style form lists */
ol, ul { list-style: none; }

/* Klikrandjes weghalen */
a:focus, div:focus { outline: none; }
img::-moz-focus-inner { border: 0; }



/* HTML & BODY */
html { text-align: center; background: #E3B18B; color: #000411; }

body { 
	position: relative;
	margin: 0 auto;
	width: 80%; max-width: 1260px;
	font-size: 14px; 
	line-height: 1;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-align: left; 
}

h1 { font-family: 'Asul', sans-serif; font-weight: 700; font-size: 2em; line-height: 1.1; padding: 0.5em 0 1em; }
h2 { font-family: 'Asul', sans-serif; font-weight: 400; font-size: 1.6em; padding: 0.7em 0 0.5em; }
h3 { font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.2em; padding: 0.2em 0 0.4em; text-transform: uppercase; }
h4 { font-size: 1.2em; line-height: 1.2; padding-bottom: 0.8em; }
p { font-size: 1.2em; line-height: 1.2; padding-bottom: 0.8em; }
td { font-size: 1.2em; line-height: 1.2; padding-bottom: 0.2em; }
.clear { float: none; clear: both; }
.cycle-slide-active { z-index: 1000 !important; }


#main { width: 100%; margin-top: 4em; }
header { width: 100%; font-family: 'Asul', sans-serif; font-weight: 700; color: #563500; font-size: 3em; text-transform: uppercase; padding: 0; margin-bottom: 3px; }
header a { color: #563500; text-decoration: none; }
header a:hover { color: #540309; }

.naarhome { position: absolute; right: 0; top: 1.35em; text-align: right; font-family: 'Asul', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.2em; color: #563500; }
.naarhome a { color: #563500; text-decoration: none; }
.naarhome a:hover { color: #540309; }

.menu-home { position: relative; width: 100%; }
.menu-foto { float: left; width: calc(0.475 * (100% - 3px)); padding-bottom: calc((0.475 * (100% - 3px)) * 525/475); overflow: hidden; }
.menu-foto .banner-show { position: absolute; left: 0; width: calc(0.475 * (100% - 3px)); top: 0; bottom: 3px; }
.menu-foto .banner-show > img { width: 100%; height: 100%; }

.menu-home .menu-blokken { float: right; width: calc(0.525 * (100% - 3px) + 3px); height: 100%; margin-right: -3px; }
.menu-home .menu-blokken > div { position: relative; float: left; width: calc(0.333 * (100% - 9px)); margin: 0 3px 3px 0; line-height: 0; }
.menu-blokken > div img { width: 100%; height: 100%; opacity: 0.1; filter: alpha(opacity=10); transition: opacity 0.8s; }
.menu-blokken > div.actief img { opacity: 1; filter: alpha(opacity=100); }
.menu-blokken > div a:hover img { opacity: 1; filter: alpha(opacity=100); }
.menu-home .menu-blokken div.blokkop { position: absolute; width: 100%; font-family: 'Asul', sans-serif; font-weight: 400; color: #FFE4B9; font-size: 1.4em; line-height: 1; text-transform: uppercase; padding: 0.4em; bottom: 0; }
div.blokkop, a div.blokkop, .menu-blokken a { text-decoration: none !important; }

.menu-content { position: relative; width: calc(100% + 3px); margin-bottom: 0; }
.menu-content .menublokken { float: none; width: 100%; }
.menu-content .menu-blokken > div { position: relative; float: left; width: calc((100% - 27px) / 9); margin: 0 3px 3px 0; line-height: 0; }
.menu-content .menu-blokken div.blokkop { position: absolute; width: 100%; font-family: 'Asul', sans-serif; font-weight: 400; color: #FFE4B9; font-size: 1.2em; line-height: 1; text-transform: uppercase; padding: 0.45em 0.4em 0.4em 0.4em; bottom: 0; }

.tekstalinea { position: relative; width: 100%; }
.home .tekstalinea { width: 82.5%; }
.tekstdiv { width: calc(((100% + 4.8em) / 9 * 6.5) - 2.4em); float: left; }
.tekstplaatje { position: absolute; left: calc(((100% + 4.8em) / 9 * 7) - 2.4em); width: calc((100% + 4.8em) / 9 * 2.5); float: left; background: #E3B18B; line-height: 0; padding: 3px; margin-top: 2.8em; }
.tekstplaatje img { width: 100%; height: auto; }
.tekstdivhalf { width: calc(((100% + 4.8em) / 9 * 4) - 2.4em); float: left; }
.tekstdivhalf.eerste { margin-right: calc((100% / 9) + 3px); }

.tekstfotoserie { width: 100%; margin: 2em 0; }
.tekstfotoserie li { position: relative; float: left; width: calc(16.6% - 6px); margin: 0 6px 6px 0; height: auto; line-height: 0; }
.tekstfotoserie li div, 
.tekstfotoserie li img { width: 100%; height: auto; }
.fotoserienummer { position: absolute; top: 1em; right: 0.7em; font-size: 1.2em; font-weight: 700; color: #E3B18B; text-align: right; z-index: 3000; }


.menu-blok-1, .menu-blok-1 a:hover div.blokkop { background: #563500; }
.menu-blok-2, .menu-blok-2 a:hover div.blokkop { background: #E88700; }
.menu-blok-3, .menu-blok-3 a:hover div.blokkop { background: #C52300; }
.menu-blok-4, .menu-blok-4 a:hover div.blokkop { background: #FB8100; }
.menu-blok-5, .menu-blok-5 a:hover div.blokkop { background: #BA8D20; }
.menu-blok-6, .menu-blok-6 a:hover div.blokkop { background: #540309; }
.menu-blok-7, .menu-blok-7 a:hover div.blokkop { background: #5F2C44; }
.menu-blok-8, .menu-blok-8 a:hover div.blokkop { background: #B44F00; }
.menu-blok-9, .menu-blok-9 a:hover div.blokkop { background: #D27D00; }
.menu-blok.actief a:hover div.blokkop { background: none !important; }

.content { position: relative; width: 100%; background: #D27D00; color: #540309; padding: 1.6em 2.4em; margin-bottom: 3px; }
.content a { color: #540309; text-decoration: underline;  }
.content a:hover { color: #C32300; }

.content .plaatjeintekst { width: 50%; height: auto; }


/* FOOTER, LOGO EN SOCIALS */
.footer { width: 100%; }
.footer p { font-family: 'Asul', sans-serif; font-weigt: 400; padding-bottom: 1.2em; }

.footer-open { width: 100%; background: #563500; color: #D27D00; padding: 1.6em 2.4em 0.6em; margin-bottom: 3px; }
.footer-open a { color: #D27D00; text-decoration: underline; }

.footer-contact { width: 100%; background: #DE6104; color: #563500; padding: 1.6em 2.4em; /*margin-bottom: 30px;*/ }
.footer-contact a { color: #563500; text-decoration: underline; }
.footer-contact a:hover { color: #540309; }

.footer-contact-naw { float: left;  width: 59%; }
.footer-contact-logo { float: right; width: 40%; text-align: center; }
.footer-contact-logo img { width: 100%; max-width: 180px; height: auto; padding: 1em 0 0; }

.footer-contact-socials { position: relative; height: 3.5em; margin: 0 0 2em; }
.social li { position: relative; width: 3.5em; height: 3.5em; float: left; }
.social li div { width: 3.5em; height: 3.5em; overflow: hidden; text-indent: -999px; }
.social li.facebook div { background: url('../images/ico23-fb.png') no-repeat; background-size: 3.5em 7em; }
.social li.insta div { background: url('../images/ico23-insta.png') no-repeat; background-size: 3.5em 7em;  }
.social li.linkedin div { background: url('../images/ico23-linkedin.png') no-repeat; background-size: 3.5em 7em; }
.social li.yt div { background: url('../images/ico23-youtube.png') no-repeat; background-size: 3.5em 7em; }
.social li.spotify div { background: url('../images/ico23-spotify.png') no-repeat; background-size: 3.5em 7em; }
.social li.whatsapp div { background: url('../images/ico23-whatsapp.png') no-repeat; background-size: 3.5em 7em; }
.social li a:hover div { background-position: bottom; }




/* TEKSTGROOTTE NAV BLOKKEN IETS KLEINER */
@media only screen and (max-width: 1250px) {
	body { font-size: 12px; }
	.tekstfotoserie li { width: calc(33.3% - 6px); }
}

@media only screen and (max-width: 1080px) {
	.menu-content .menu-blokken div.blokkop { font-size: 1.0em; }
}

@media only screen and (max-width: 990px) {
	.tekstdiv { width: calc(((100% + 4.8em) / 9 * 5.5) - 2.4em); }
	.tekstplaatje { left: calc(((100% + 4.8em) / 9 * 6) - 2.4em); width: calc((100% + 4.8em) / 9 * 3.5); }
}

@media only screen and (max-width: 900px) {
	.menu-home .menu-blokken div.blokkop { font-size: 1.2em; }
	.menu-content .menu-blokken div.blokkop { font-size: 0.9em; }
}

@media only screen and (max-width: 850px) {
	/* NAAR MOBIELE VERSIE */
	body { font-size: 16px; }
	
	.naarhome { top: 0.3em; }
	
	.menu-home { width: 100%; }
	.menu-foto { display: none; }
	.menu-home .menu-blokken { float: none; width: calc(100% + 3px); margin-right: 0; }
	.menu-home .menu-blokken > div { width: calc(0.333 * (100% - 9px)); }
	.menu-home .menu-blokken div.blokkop { font-size: 1.4em; }
	
	.menu-content .menu-blokken > div { width: calc((100% - 9px) / 3); height: calc(2.8em + 0.85em + 6px); }
	.menu-content .menu-blokken > div img { display: none; }
	.menu-content .menu-blokken div.blokkop { font-size: 1.4em; }
	.menu-blok.actief { background: none; }
	
	.home .tekstalinea { width: 100%; }
	.tekstdiv { float: none; width: 100%; }
	.tekstplaatje { position: relative; float: none; left: 0; width: 70%; margin-left: 15%; margin-top: 0; margin-bottom: 1em; }
	.content .plaatjeintekst { width: 66%; height: auto; }
	
	.tekstdivhalf { width: 100%; float: none; margin-right: 0 !important; }
}

@media only screen and (max-width: 650px) {
	body { font-size: 14px; }
	.tekstfotoserie li { width: calc(50% - 6px); }
	.content .plaatjeintekst { width: 100%; height: auto; }
}

@media only screen and (max-width: 580px) {
	body { width: 90%; }
	#main { width: 100%; margin-top: 2.5em; }
	header { font-size: 2.4em; }
	.naarhome { top: 0.25em; }
	
	.menu-home .menu-blokken div.blokkop,
	.menu-content .menu-blokken div.blokkop { font-size: 1.2em; }
}

@media only screen and (max-width: 430px) {
	.menu-home .menu-blokken div.blokkop,
	.menu-content .menu-blokken div.blokkop { font-size: 1em; }
	.tekstplaatje { width: 100%; margin-left: 0; }
}

@media only screen and (max-width: 350px) {
	body { font-size: 12px; }
	.naarhome { top: 0.2em; }
}