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

html{background:#D9EAD0;}
body{font-family:'Arimo', serif; color:#020800; font-weight:400; font-size:1.8rem;}

h1, h2, h3, h4, h5, h6{font-family:'Nunito', serif; font-weight:700 !important; color:#005F87;}
h1{font-weight:900;}
h2{margin-bottom:unset;}


a, a{color:#66ADB3;}
a:hover, a:hover {color:#2C9001}
input[type="submit"],
.button{color:white; font-size:2.0rem; padding: 8px 32px; background:#2c9901; font-family:'Nunito', serif; font-weight:700; border-radius:0 15px 0 15px; border:unset;}
input[type="submit"]:hover,
.button:hover{color:#2c9901; background:white; box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.3);}
p.red{color:#dc0243;}
p.orange{color:#cd7600;}
.stripe{padding:128px 0;}

article.bottom{border-radius: 50px  0 50px 0;}

.padding{padding:24px;}
.round-corner{border-radius:8px;}
.box-shadow{-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35); box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.35);}

.breadcrumbs li,
.breadcrumbs li ,
.breadcrumbs li a span{font-size:1.2rem; line-height:32px; color:#5C5C5C;}

/*form*/
/*error message*/
.message.fail article h2,
.message.fail article p{color:#dc0243;}
.message.succes article h2,
.message.succes article p{color:#2c9001;}
.form-control {font-size:1.4rem; font-family:'Arimo', serif;}
.form-grid .label,
.form-grid label,
.form-control label{font-size:1.6rem; color:white; font-family:'Nunito',serif; font-weight:500;}
.form-grid .row{margin: 2px 0;}
.form-grid h3.wide{border-bottom:1px solid white; padding-bottom:2px; margin-top:16px;}
.form-grid p{margin-bottom:12px;}
.form-grid .submit .button-right input[type="submit"]{margin: auto 0 auto auto;}
.form-grid .submit .button-left input[type="submit"]{margin: auto auto auto 0;}
.form-grid .submit .button-left input[type="submit"]:hover,
.form-grid .submit .button-right input[type="submit"]:hover{cursor: pointer;}
.form-grid label a{color:#C1DFB5;}
.form-grid label a:hover{color:#91C57B;}

input[type="radio"],
input[type="checkbox"] {font: inherit; color:#42e702; width: 1.08em; height: 1.08em; border: 0.15em solid white; border-radius: 0.15em;}

input[type="radio"] {background-color: var(--form-background); border-radius: 50%; border: 0.15em solid white;}

input[type="radio"]::before,
input[type="checkbox"]::before {background-color:#42e702;}

input[type="radio"]::before {border-radius: 50%;}

input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{background:rgb(192,192,192); border:0.15em solid #707070;}


.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea,
.form-grid input[type="datetime-local"]{ width:100%; font-family:'Arimo', serif; font-size: 1.6rem; padding: 16px; border-radius:0 25px 0 25px; border: 1px solid #707070; color: #020800; background: #ffffff; box-sizing: border-box;}
.form-grid textarea,
.form-grid select{height:unset;  padding:12px;}
.form-grid textarea{min-height:150px;}

form .shape.a{background:#2C9001;}

/* Stijlen voor gefocusde input velden */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {border-color:#2C9001; outline: none; box-shadow: 0 0 5px rgba(78, 11, 112, 0.3); background-color: #D9EAD0;}

select.red,
textarea.red,
input.red{border:1px solid #dc0243 !important; color:#dc0243 !important;}
label.red{color:#fe79a0;}
textarea.red::placeholder,
input.red::placeholder{color:#dc0243;}
input.grey{background:#958684; color:white;}
input.grey:hover{background:white; color:#958684;}

header{height:106px; position:relative; margin-bottom:32px; margin-top:24px;}
.logo{width: 170px; height:100%;}

header .grid nav ul{justify-content:flex-end !important;}
header .grid nav ul li{margin-right:24px; line-height:106px; font-size:2.2rem; font-weight:600;}
header .grid nav ul li a{color:#020800;}
header .grid nav ul li:hover a:not(header .grid nav ul li.cta a){color:#2C9001;}

section.slider{margin-top:96px;}
section.slider .shape-detail{position:absolute; bottom:-67px; right:177px;}
section.slider {position: relative; overflow: visible;}
section.slider article{margin-right:-77px;; height:fit-content; position: relative;}
section.slider article h1{font-size:4.0rem; color:#005F87; font-weight:900; line-height:3.6rem;}
section.slider article h1 span{margin-right:24px;}
section.slider article .date{font-weight:600;  color:#2C9001; margin-bottom:24px; }
section.slider .image{width:431px; margin-left:77;}

.shape{height:calc(80% - 192px); width:52vw; position:absolute; z-index:-1;}
.shape.top{background:#007680; height:calc(100% + 64px); border-top-left-radius:50px; top:-32px; right:0; }
.shape.a{background:#007680; border-top-left-radius:50px; top:96px; right:0; }
.shape.b{background:#2C9001; border-top-right-radius:50px; top:96px; left:0;}
.shape.c{background:#007680; border-top-right-radius:50px; top:96px; left:0;}
.shape-detail{width: 110px; height: 53px; background:#2C9001; border-radius:25px 0 25px 0;}
.shape-detail.a{width: 200px; height: 96px; position:absolute; bottom:57px; right:-52px; border-radius:50px 0 50px 0; background:#005F87; color:white; line-height:96px; text-align:center; font-size:5.0rem; z-index:100;}
.shape-detail.b{position:absolute; right:0; bottom:-10px; width: 110px; height: 53px; z-index:101;}

.shape.a.f{height:calc(100% - 192px);}

.alt .shape.top{background:#66ADB3;}
.alt  .image .image-bg{background:#007680;}
.alt .shape.b{height:calc(60% - 192px);}
.alt article h2{margin-top:-96px;}

.news .shape{height:calc(100% - 192px);}

.extra .shape.b{width:70vw !important; height:calc(100% - 192px);}
.extra .image{width:285px; margin:auto 0 auto auto;}
.extra .image-bg{display:none;}
.extra article p,
.extra article h2,
.extra article h3{color:white;}


.event-descr{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; overflow:visible; padding-bottom:64px;}
.event-descr h2{font-size:2.0rem; color:#2c9901; font-weight:600; grid-column:span 3;}
.event-descr .detail{display:grid; grid-template-columns:30px auto; column-gap:24px;}
.event-descr .detail i{grid-row:span 2; font-size:3.0rem; margin:auto; color:#2C9001;}
.event-descr .detail span{font-weight:600; color:#2C9001;}
.event-descr .button{position:absolute; right:-75px; bottom:-32px; padding:18px 0; min-width:420px; text-align:center; border-radius:0 50px 0 50px;}
.shapes{position: relative;}
.shape-desc.a{width:200px; height:96px; border-radius:50px 0 50px 0; background:#005F87; position:absolute; right:24px; top:64px;}
.shape-desc.b{width: 110px; height:53px; position:absolute; bottom:0; right:76px; background:#5b8f21; border-radius:25px 0 25px 0;}

section .image-content{position: relative;}
section .image-content .bg-element,
section .image{aspect-ratio:1/1 !important; width:100%;  margin:0 auto auto auto; overflow:visible;}
section .image{position: relative;}
section .image .image-bg{width: 100%; height:100%; position:absolute; bottom:-12px; right:-12px; background:#66ADB3; z-index:0; border-radius:50px 0 50px 0; z-index:0;}
section .image img{object-fit:cover; position: relative; border-radius:50px 0 50px 0; overflow:hidden; z-index:1;}
section .overlay{ position:absolute; z-index:3;}
section .overlay.a{aspect-ratio:103/136; bottom:0; right:30px;}
section .overlay.b{aspect-ratio:54/ 49; bottom:0; right:unset; left:30px;}
section .overlay img{width: 100%; height: 100%; object-fit:contain;}

.card{width:100%; position:relative;}
.card .image{width:100%; height:388px; margin:0 auto;}
.card .image img{object-fit:cover; border-radius:0 50px 0 50px; overflow:hidden;} 
.card .title{font-size:3.0rem; font-weight:700; color:#005F87; font-family:"Nunito", serif; margin-bottom:4px; min-height:8rem;}
.card .date{color:#2C9001; margin-bottom:12px;}
.card article{border-radius:50px 0 0 0; padding-bottom:64px; min-height:30rem;}
.card .button.event{width:100%; position: relative;  padding:8px 0; text-align:center; border-radius:25px 0 25px 0; margin-top:-32px; z-index:100;}
.button.open{background:#2C9001;}
.button.full{background:#cd7600;}
.button.closed{background:#cd0f00;}
.button.pending{background:#958684;}
.button.open:hover{background:white; color:#2C9001}
.button.full:hover{background:white; color:#cd7600}
.button.closed:hover{background:white; color:#cd0f00}
.button.pending:hover{background:white; color:#958684;}


.stripe.bg{padding:48px 0;}
.stripe.bg article{border-radius: 50px 0 50px 0;}
.stripe .background{width: 100%; height:100%; position:absolute; top:0; left:0;}
.stripe .background img{width: 100%; height: 100%; object-fit:cover;}

.news .image{grid-area:2/8/4/13; height:513px;}
.news .image img{border-radius:unset;}
.news .image .image-bg{right:unset; left:-12px; right:unset; border-radius:unset;}
.news .newsarticle h3{margin-bottom:12px; color: #2C9001; font-size:2.5rem;}
.news .newsarticle:nth-of-type(2) article{background:#66adb3;}
.news .newsarticle:nth-of-type(2) article h3{color:white;}
.news .newsarticle:nth-of-type(2) article p{color:white;}
.news .newsarticle:nth-of-type(3){grid-column:span 12;}
.news .newsarticle:nth-of-type(3) article{background:#005F87;}
.news .newsarticle:nth-of-type(3) article h3{color:white;}
.news .newsarticle:nth-of-type(3) article p{color:white;}
.news .newsarticle article .button{margin: 24px 0 0 auto;}

.news .shape-detail.a{position:absolute;}

section article{position: relative; overflow:visible;}
.filler{position: relative;}

table, th,td{border:3px solid white; border-collapse:collapse; padding:4px;}
article table thead tr{font-size:2.0rem; font-weight:600; text-align:left;}

footer{padding:32px 0; background:#C1DFB5;}

footer a:hover{color:#2C9001;}
footer a i{margin-right:12px;}
footer div *{color:#020800;}
footer h4{color:#2C9001;}
footer .copyright{margin-top:24px;}
footer .copyright,
footer .copyright * {font-size:1.4rem; color:#91C57B;}
footer .copyright a{margin-left:12px;}


/*desktop: 1220*/
@media only screen and (max-width:1220px) 
{
  body{font-size:1.6rem;}
  section.slider article h1{font-size:3.2rem;}
  section.slider .image{width: 410px;}

  .card .image{height:320px;}
  .card .title{font-size:2.6rem;}

  .shape-detail.a{font-size:3.6rem;}



}

/*desktop: 1024*/
@media only screen and (max-width:1023px) 
{

  h2{font-size:2.4rem;}
  h4{font-size:1.6rem;}

  section.slider .block-6{grid-column:span 6;}
  section.slider article{margin-right:-100px;}

  section.slider .image-content{ margin: 0 0 0 auto;}
  section.slider .image{width:250px;}

  header .grid nav ul li{font-size:1.6rem; margin-right:12px;}

  .button{font-size:1.8rem;}

  .card.block-4{grid-column:span 12;}
  .card{display:grid; grid-template-columns:40% 60%;}
  .card .image{height:unset;}
  .card .title{font-size:2.2rem;}
  .card .button{grid-column-start:2;}
  .stripe.album .block-4{grid-column:span 6;}
  .stripe.album .card{display:block;}

  .news .newsarticle:nth-of-type(1){grid-column:span 7 !important;}
  .news .newsarticle{grid-column:span 12;}
  .news .image{height:unset; grid-area:unset; grid-column-start:8; grid-column-end:12; grid-row-start:2;}

  .logo{width:100px;}


  .event-descr{grid-column:span 12 !important;}
  .shapes{grid-column:span 12 !important;}
  .shape-desc.b{right:410px; bottom:-32px;}
  .event-descr .button {right:-22px;}

  .block-6{grid-column:span 12;}


  .form-grid .button{grid-column:unset;}

  .shape.a.f{width:calc(100vw - 24px); right:0;}
  .stripe.form .container{margin-left:24px;}

}


/*mobile l: 427-767*/
@media only screen and (max-width:767px) 
{

  header { overflow: visible; }
header .grid nav { width: 100%; height: auto; display: block;  left: 0; top: -800px; position: absolute; -webkit-transform: translateY(-140%); transform: translateY(-140%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; }
header .grid .menu { display: block; text-align: right; }
header .grid .menu a i { font-size: 3rem; color: #2C9001; line-height: 108px; }
header .grid nav ul { display: block; position: relative;  padding: 24px; background: #2C9001; margin-left: unset; }
header .grid nav ul li { display: block;  width: 100%; height: auto; min-height: 48px; line-height: 48px; margin: 0; text-align: right; border-radius: unset; }
header .grid nav ul li:before { background: none; }
header .grid nav ul li a i { display: none; }
header .grid nav ul li:last-of-type { display: block; width: 100%; }
header .grid nav ul li a { color: white; height: 48px; line-height: 48px; margin: unset; border-right: unset; }
header .grid nav ul li a:active, header .grid nav ul li a:hover { color: white; }
header .grid nav ul li a.on { color: #C1DFB5; }
header .grid nav ul li.language { min-height: 24px; }
header .grid nav ul li.language img { margin: unset; margin-right: 0; margin-left: auto; }
header .grid nav ul li:last-of-type a { margin-right: 0; margin-left: auto; text-align: center; padding: 0 8px; line-height: 48px; background: unset; padding: unset; }
header .grid nav.open { width: 100%; height: 100vh; display: block;  left: 0; z-index: 101; position: absolute; margin: 0 !important; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; top: 108px; }

    section.slider{margin-bottom:96px;}
    section.slider article h1{font-size:2.5rem;}
    section.slider article{padding-right:24px;}

    section.slider .block-6{grid-column:span 12;}
    section.slider article{margin-right:unset;}
    section.slider .image-content{width: 100%; grid-row-start:1;}


    .event-descr{grid-template-columns:1fr;}
    .event-descr h2{grid-column:unset;}

    .event-descr .button{position: relative; right:unset; bottom:unset; width: 100%; padding:8px 0;}
    .shapes{width: 100%; height:200px;}
    .shape-desc.a{top:0;}

    .card article{height:unset;}
    .card{display:block;}
    .card .image{width: 50%; height:auto;}
    .card .title{font-size:2.2rem; margin-bottom:4px; min-height:4rem;}
.card article{ padding-bottom:64px; min-height:15rem; margin-top:-24px;}

   .grid{row-gap:32px;}
   .news .newsarticle:nth-of-type(1){grid-column:span 12 !important;}
    .news .image{grid-area:unset; grid-column:span 12; grid-row-start:2;}

    .stripe{padding:48px 0;}

    .shape{width: 100vw;}
    .shape.top{height:50%;}
    
    .alt article h2{margin-top:unset;}

    .stripe.album .block-4{grid-column:span 12;}

    .shape-desc.a{width: 100px; height: 48px;}
    .shapes{height:50px;}
}

/*mobile s: 320-426*/
@media only screen and (max-width:426px)
{
    
  .extra .shape.b{top:0; width:100vw !important;}
  .event-descr{padding-bottom:24px;}
  .event-descr .button{min-width:unset;}
  .shape.a.f{height:100%;}

  .form-grid .submit .button-left input[type="submit"],
  .form-grid .submit .button-right input[type="submit"]{margin:unset; width:100%;}
    
}