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

/* header */
.header {z-index:3; font-size:small; letter-spacing:1px; line-height:30px;}
.header ul {margin:0; padding:0; list-style:none; overflow:hidden; background-color:#fff;}
.header li a {margin:5px 0; padding:5px 40px;}
.header li a,
.header li > label {display:block; text-decoration:none; color:#1e4564; font-weight:bold; width:auto; /*height:30px;*/ font-size:1.05em;}
.header li a:hover,
.header li > label:hover,
.header .menu-btn:hover {background-color:#e8ecef; /*#eceae7;*/ color:#1e4564;}
.header .logo {display:block; float:left; /*margin:12px 0 -4px 10px;*/ padding:7px 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:42px;}

/* 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;}
.submenu {border-top:2px solid #1e4564;}
ul.submenu {margin-top:10px; text-align:left;}
ul.submenu li {margin:0 5px; display:contents;}
ul.submenu li a {margin:0; /*background:#f6f6f6;*/ border-bottom: 1px solid #dbd7d1; padding:5px 60px;}
ul.submenu li a:hover {text-decoration:none;}

.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:40px; margin-top:-40px; float:right;}
.menu input[type=checkbox]:checked+.submenu-label::after {content:"\2212"; font-size:14px; font-weight:bolder; margin-right:40px; margin-top:-40px; float:right;}

/* 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%;}
  .header li a {padding:5px 40px; background:#eceae7;}
  .header .logo {width:60%;}
  ul.submenu {margin-top:-5px;}
}

/* 48em = 768px */
@media (min-width: 1081px) {
  .header .menu > li {float:left;}
  .header li a {padding:5px 40px;}
  .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 {margin-top:-5px;}
  ul.submenu li a {padding:5px 40px;}
}