@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Ubuntu';
  src:  url('../font/Ubuntu-L.ttf')  format('truetype');
}

/* contactformulier */
.contactformulier {position:fixed;bottom:50px;right:20px;z-index:2;overflow:hidden;border:1px solid #444;border-radius:5px;box-shadow: 2px 2px 5px #888888;}
.contactformulier form {display:block;background-color:white;overflow-y:auto;margin: 0;}
.contactformulier > form > span {display:block;height:35px;line-height:35px;margin:0;font-weight:normal;color:white;background-color:darkgreen;text-align:center;padding:0 10px;}
.contactformulier > form > span > span {display:none;float:right;margin-right:20px;font-weight:bold;cursor:pointer;}
.contactformulier ol {display:none;width:300px;height:500px;list-style:none;margin:0;padding:20px;}
.contactformulier label {font-weight:bold;font-size:0.9em;padding:0 0 10px 0;}
.contactformulier input,textarea {border:1px solid #ddd;border-radius:5px;width:260px;margin:0 auto 10px auto;font-size:1em;padding:5px;}
.contactformulier input[type=file] {display:none;}
label.bestanduploaden {display:block;border:2px dashed #ddd;border-radius:5px;width:260px;margin:0 auto 10px auto;height:30px; color:#888;font-weight:bold;cursor:pointer;text-align:center;line-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5px;}
.contactformulier textarea {height:180px;resize: none;}
.contactformulier input {height:30px;}
.contactformulier button {position:relative;left:50%;;height:35px;line-height:30px;font-size:0.9em;background-color:darkgreen;border:none;border-radius:5px;width:100px;color:white;text-align:center; margin-left:-50px;margin-top:10px;}

/* colors */
#menu ul {background:#FFFFFF;}
#menu li > a.inactive {color:#E7717D;}
#menu li > a:hover,.active {color:#AFD275;}
#menu > ul > li > ul > li {background:#FFFFFF;}
a {color:#E7717D;}
.footer {background-color:#C2CAD0;}
.footer span,.footer span a {color:white;}
/* einde colors */

* {box-sizing: border-box;}
body {background-size: cover;padding:0;margin:0;font-family:'Ubuntu',Geneva, Arial, Helvetica, sans-serif;line-height:20px;font-size:16px;}
img {margin:0 0 0 0;}
img.logo {margin-left:30px;}
h1 {font-size:1.7em;font-weight:500;padding:0px 0 10px 0;margin:0;}
h2 {font-size:1.5em;font-weight:500;padding:0px 0 10px 0;margin:0;line-height:28px;}
h3 {font-size:1.3em;font-weight:500;padding:0px 0 10px 0;margin:0;}
h4 {font-size:1.1em;font-weight:500;padding:0px 0 10px 0;margin:0;}

header {position:fixed;top:0;display:block;width:100%;height:60px;background-color:white;overflow:hidden;z-index:2;}
#home {position:fixed;top:0;background:white;padding-top:5px;height:60px;float:left;z-index:2;}
#menu {position:fixed;top:0;margin:0;display:block;width:100%;line-height:60px;overflow:hidden;z-index:1;}
#menu ul {position: relative;display:block;width:auto;list-style:none;margin:0;padding:0 0 0 400px;text-align:center;}
#menu > ul > li {display:inline-block;margin:7.5px 0;line-height:16px;width:auto;padding:0;font-size:1.1em;letter-spacing: 0px;font-weight:normal;border-right:1px solid #000;}
#menu > ul > li > a,#menu > ul > li > span {padding:0 10px;}
#menu li:last-child {border-right:none;}
#menu li > a.inactive {text-decoration:none;}
#menu li > a:hover,.active {text-decoration:none;}
#menu > ul > li > ul {position:absolute;top:20px;display:none;width:auto;margin:0;background:none;overflow:hidden;z-index:6;padding:10px 0 0 0;}
#menu > ul > li > ul > li {font-size:0.9em;margin:0;padding:10px 15px 0px 15px;width:auto;text-align:left;}
#menu > ul > li > ul > li:last-child {padding-bottom:10px;}

.foto {background-size: cover;margin-top:60px;background-position:center 0;background-repeat:no-repeat;overflow:hidden;position:relative;}
.foto img {width:100%;visibility:hidden;}
.titelblok {
	position:absolute;top:35%;display:block;width:1000px;left:50%;margin-left:-500px;
    animation: mymove 2s;
}


h1.titel {font-size:3em;line-height:50px;color:#fff;text-align:center;opacity:1;transition:opacity 1s linear;animation-delay: 2s;}
h2.ondertitel {font-size:2em;line-height:40px;color:#fff;text-align:center;}

.body {width:50%;line-height: 30px; height:inherit;margin:50px 20px 20px 400px;padding:0;vertical-align:top;hyphens:auto;-webkit-hyphens:auto;animation: fadein 1s ease forwards;}
.body p:first-child::first-letter {font-size:6em;font-weight:bold;float:left;margin-right:0.1em;line-height:.88}

@-webkit-keyframes mymove {
    from {top: 50%;opacity:0.0;}
    to {}
}
@keyframes mymove {
    from {top: 50%;opacity:0.0;}
    to {}
}
@keyframes fadein {
  0% { opacity: 0;}
  25% { opacity: 0;}
  100% { opacity: 100;}
}

.footer {display:block;margin:0 auto;width:100%;height:40px;overflow:hidden;}
.footer span {display:none;width:1280px;margin:0 auto;font-size:12px;line-height:40px;text-align:right;padding-right:80px;}
.footer span a {text-decoration:none;}
.footer span a:hover {text-decoration:underline;}
	
@media only screen and (max-width: 1024px) {
/* menu */
.logo {height:50px;}

/* sandwich menu */
.button-menu {position:fixed;top:0px; right:0;display:block;width:55px;height:55px;margin:0;cursor: pointer;}
.button-menu span {position: absolute; top:7px;display:block;width:30px; height: 3px;background-color: #AFD275;margin-top:10px;margin-left: 2px;transition: transform 0.2s ease-in;}
.button-menu span:before {content:'';position: absolute;top:10px;width:30px; height: 3px;background-color: #AFD275;transition: transform 0.2s ease-in;}
.button-menu span:after {content:'';position: absolute;top:20px;width:30px; height: 3px;background-color: #AFD275;transition: transform 0.2s ease-in;}
.button-menu.active span {width:0px}
.button-menu.active span:before {transform:translateY(0px) rotate(-45deg);}
.button-menu.active span:after {transform:translateY(-10px) rotate(45deg);}
/* einde sandwich menu */

#menu {position:fixed;top:0px;left:0px;margin:0;height:auto;width:100%;z-index:1;background-color:white;}
#menu > ul {display:none;overflow:hidden;width:100%;margin:50px 0 0 0;padding:10px 0 0 0;text-align:left;background-color:#FFFFFF;}
#menu > ul > li {float:none;display:block;width:100%;border-right:none;line-height:30px;}
#menu > ul > li > a {display:block;}
/* einde menu*/
.titelblok h1 {font-size:2em;line-height:30px;}
.titelblok h2 {font-size:1.33em;line-height:30px;}
.body {width:70%;line-height: 30px; margin:50px 20px 20px 200px;}
}
@media only screen and (max-width:800px) {
.titelblok {display:block;width:100%;left:0;margin-left:0;}
.body {width:auto;line-height: 30px; margin:50px 20px 20px 20px;}
}
@media only screen and (max-width: 420px) {
img.logo {margin-left:10px;margin-top:10px;height:42px;}
	.button-menu {width:40px;}
.titelblok {display:block;width:100%;}
.titelblok h1 {font-size:1.3em;line-height:20px;}
.titelblok h2 {font-size:1em;line-height:20px;}
}