@charset "utf-8";
/* CSS Document */

/* header */
.header {z-index:3; font-size:small; letter-spacing:1px;}
.header ul {margin:0; padding:0; list-style:none; overflow:hidden; background-color:#fff;}
.header li a {display:block; padding:4px 35px 6px 35px; text-decoration:none; color:#000; background:#dbd7d1; width:auto; height:30px; margin:5px;}
.header li > label {}
.header li a:hover,
.header li > label:hover,
.header .menu-btn:hover {background-color:#eceae7; color:#000;}

.header .logo {display:block; float:left; margin:12px 0 -4px 10px; padding:10px 0px; text-decoration:none;}

/* menu */
nav {position:relative; z-index:1;}
.header .menu {clear:both; max-height:0; transition:max-height .2s ease-out; margin-top:40px;}

/* menu icon */
.header .menu-icon {cursor:pointer; display:inline-block; float:right; padding:28px 20px; position:relative; user-select:none;}
.header .menu-icon .navicon {background:#333; display:block; height:2px; position:relative; transition:background .2s ease-out; width:18px;}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {background:#333; content:''; display:block; height:100%; position:absolute; transition:all .2s ease-out; width:100%;}
.header .menu-icon .navicon:before {top:5px;}
.header .menu-icon .navicon:after {top:-5px;}

/* menu btn */
.header .menu-btn {display:none;}
.header .menu-btn:checked ~ .menu {max-height:fit-content;}
.header .menu-btn:checked ~ .menu-icon .navicon {background:transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform:rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform:rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top:0;}

/* submenu */
.menu ul {display:none; position:absolute;}
/*ul.submenu {/*display:none;*/ /*opacity:0; position:absolute;*/ /*width:-moz-available; background:transparent;*/}
/*ul.submenu > li:hover {display:block; opacity:1; /*visibility:visible;*/}
.header .submenu {clear:both; max-height:0; transition:max-height .2s ease-out;}
ul.submenu {margin-top:-5px;}
ul.submenu li {margin:0 5px;}
ul.submenu li a {margin:0; background:#f6f6f6; border-bottom: 1px solid #dbd7d1; padding:5px 50px;}

.menu input[type=checkbox] {display:none;} /* Hide the checkbox */
.menu input[type=checkbox]:checked ~ .submenu {display:block; transition:all 0.5s ease-out;} /* Show menu when invisible checkbox is checked */

/*codes from utf-8 dingbats*/
.menu input[type=checkbox]+.submenu-label::after {content:"\002B"; font-size:14px; font-weight:bolder; /*margin-right:35px;*/ margin-top:-40px; float:right; color:#000; width:50%;}
.menu input[type=checkbox]:checked+.submenu-label::after {content:"\2212"; font-size:14px; font-weight:bolder; margin-left:18px; /*margin-right:35px;*/ margin-top:-40px; float:right; color:#000; width:50%;}

/* Tekst over afbeelding */
img {display:block;}
.textoverimg {position:relative; display:inline-block; min-height:290px;}
.caption {position:absolute; top:4%; left:20px; right:20px; bottom:20px; text-align:left; color:#fff; font-weight:bold; hyphens:auto;}
.caption > h1 {font-family:Arial, Helvetica, sans-serif; font-size:1.55rem; letter-spacing:9px;}

@media screen and (width:320px) {
  .caption {line-height:initial;}
  .caption > h1 {margin-bottom:-10px; letter-spacing:1px;}
}

@media screen and (max-width:375px) {
  .caption {top:4%; left:3%; right:2%;}
}

@media screen and (min-width:240px) and (max-width:480px) {
  .caption > h1 {font-size:1.08rem; letter-spacing:1px;}
  .menu ul {position:static; display:none; /* Make dropdown links appear inline */ text-align:left; width:auto; min-width:100%;}
}

@media screen and (width:568px){
  .caption > h1 {font-size:1.35rem;}
}

@media screen and (max-width:1080px) {
  .menu ul {position:static; display:none; /* Make dropdown links appear inline */ text-align:left; width:auto; min-width:100%;}
}

/* 48em = 768px */
@media (min-width: 1081px) {
  .header .menu > li {float:left;}
  .header li a {padding:5px 35px;}
  .header .menu {clear:none; float:right; max-height:none;}
  .header .menu-icon {display:none;}
  .menu li:hover .submenu {display:block;}
  .menu input[type=checkbox]+.submenu-label::after {display:none;}
  .menu input[type=checkbox]:checked+.submenu-label::after {display:none;}
  ul.submenu li a {padding:5px 35px;}
}