@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Condensed:wght@700&display=swap');

/*-------------------------------------- RESET --------------------------- */

*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth; 
}

/*--------------------------------- ELEMENTS ---------------------------------*/

figure {
    img {
        display: block;
    }
    figcaption {
        margin-top: 10px;
        font-size: 90%;
    }
}

/*-------------------------------------- FRAME --------------------------- */

body {
    font-family: "Open Sans", serif;
    font-size: 16px;
    line-height: 1.55;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background: var(--bg-color);
    padding: var(--whitespace) 10px;
    color: #212121;
}
@media screen and (max-width: 900px) {
    body {
        font-size: 14px;
        line-height: 1.55;
        padding: var(--whitespace) 0;
    }
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header nav {
    display: flex;
    gap: 20px;
}
header nav a {
    font-size: 18px;
    text-decoration: none;
    color: #000;
    text-decoration-color: var(--main-color);
}
header nav a:hover, header nav a:focus {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 4px;
    text-decoration-color: var(--main-color);
}
#toplogo {
    font-size: 0;
}
#toplogo svg {
    width: 138px;
    height: 48px;
}
@media screen and (max-width: 900px) {
    header .inner {
        flex-direction: column;
        align-items: start;
    }
    header nav {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    header nav a {
        font-size: 14px;
    }
    #toplogo svg {
        width: calc(142px * 0.75);
        height: calc(48px * 0.75);
    }
}

main {
    background: #FFF;
    border-radius: var(--corners);
    max-width: var(--width);
    margin: var(--whitespace) auto;
    overflow: hidden;
    > hr {
        margin: 0 var(--whitespace);
    }
}
@media screen and (max-width: 900px) {
    main {
        border-radius: 0;
        margin-bottom: calc(var(--whitespace) * 2);
    }
}

footer {
    padding-bottom: 30px;
}
footer h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

footer p.center {
    margin-top: 40px;
    font-size: 13px;
    color: #656565;
    justify-content: center;
    display: flex;
    gap: 15px;
}
footer p.center a {
    color: #656565;
    text-decoration-color: #656565;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
footer p.center a:hover, footer p.center a:focus {
    color: #000;
    text-decoration-color: #000;
}

.inner {
    max-width: var(--width);
    margin: auto;
    padding: 0 var(--whitespace);
}
.inner--extrawide {
    padding: 0;
    figcaption {
        padding: 0 var(--whitespace);
    }
}

section {
    padding: var(--whitespace) 0;
    position: relative;
}
section.intro {
    padding-bottom: calc(var(--whitespace) / 2);
    article {
        font-size: 20px;
    }
}
section.bg {
    background: var(--main-color-light);
    margin: var(--whitespace) 0;
    + section.bg {
        margin-top: calc(var(--whitespace) * -1);
        padding-top: 0;
    }
}
section.bggray {
    background: var(--border);
    margin: var(--whitespace) 0;
    + section.bggray {
        margin-top: calc(var(--whitespace) * -1);
        padding-top: 0;
    }
}
section.border:before {
    display: block;
    content: '';
    position: absolute;
    left: var(--whitespace);
    right: var(--whitespace);
    top: 0;
    border-top: solid 1px var(--border);     
}
section:last-child {
    margin-bottom: 0;
}
section:first-child {
    margin-top: 0;
}
section:only-child {
    margin: 0;
}

/*-------------------------------------- ALERT --------------------------- */

.alert {
    padding: max(calc(var(--whitespace) / 2), 15px);
    border-radius: calc(var(--corners) / 2);
    background: #E74C3C;
    color: #FFF;
    margin-bottom: 30px;
}
.alert a {
    color: #FFF;
    font-weight: bold;
    text-decoration-color: rgba(255,255,255,0.5);
}
.alert a:hover, .alert a:focus {
    text-decoration-color: rgba(255,255,255,1);
}
.alert a.btn {
    color: #E74C3C;
    background: #FFF;
}
.alert a.btn:hover, .alert a.btn:focus {
    color: #E74C3C;
    background: rgba(255,255,255,0.8);
}

/*-------------------------------------- LINKS & BTNS --------------------------- */
a {
    color: var(--main-color-dark);
    text-decoration: underline;
    text-decoration-color: var(--main-color);
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
    transition: all 0.3s;
}
a:hover, a:focus {
    text-decoration-color: var(--main-color-dark);
}
a.ico {
    display: inline-block;
    width: 36px;
    height: 36px;
    overflow: hidden;
    font-size: 0;
    padding: 9px;
    position: relative;
    top: 12px;
    left: -5px;
}
a.ico svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}
a.ico--big {
    width: 60px;
    height: 60px;
    padding: 10px;
    position: relative;
    top: 0;
    left: 0;
}
a.ico--big svg {
    width: 40px;
    height: 40px;
}
a.ico:hover , a.ico:focus  {
    color: #000;
}
a.ico:hover svg, a.ico:focus svg {
    transform: scale(1.2);
}

a.ico-text {
    display: inline-block;
    padding-left: 30px;
    position: relative;
}
a.ico-text svg {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
    position: absolute;
    left: 0;
    top: 3px;
}
a.ico-text:hover svg, a.ico-text:focus svg {
    transform: scale(1.2);
}

a.btn {
    background: var(--main-color-dark);
    display: inline-block;
    color: #FFF;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
}
a.btn:hover, a.btn:focus {
    background: var(--main-color)
}
a.btn:has(svg) {
    padding-left: 45px;
    position: relative;
}
a.btn:has(svg) svg {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
    position: absolute;
    left: 15px;
    top: 12px;
}
a.btn:has(svg):hover svg, a.btn:has(svg):focus svg {
    transform: scale(1.2);
}

.linklist {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
}
.linklist a {
    display: inline-block;
    position: relative;
    text-decoration-color: var(--main-color-dark);
    text-decoration-thickness: 1px;
}
.linklist a:hover, .linklist a:focus {
    color: var(--main-color);
    text-decoration-color: var(--main-color);
}
.linklist a:not(:last-child):after {
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    background: var(--main-color);
    border-radius: 2px;
    position: absolute;
    right: -12px;
    top: 12px;
}


/*-------------------------------------- TITLES --------------------------- */
h1, h2 {
    font-family: "Roboto Condensed", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.05;
    text-wrap: balance;
}
h1 {    font-size: 40px;    }
h2 {    font-size: 30px;    }
h3, h4, h5, h6 {
    margin-bottom: 15px;
    text-wrap: balance;
}
h3, h4, h5 {    font-size: 22px;    }
@media screen and (max-width: 900px) {
    h1 {    font-size: 28px;    }
    h2 {    font-size: 22px;    }
    h3 {    font-size: 18px;    }
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    display: inline-block;
    margin: 0 -0.3em;
    padding: 0.1em 0.4em;
    border-radius: 0.8em 0.3em;
    background: transparent;
    background-image: linear-gradient(to right, rgba(201, 234, 245, 0.1), var(--main-color-light2) 4%, var(--main-color-light));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-style: normal;
}
h2 {
    margin-bottom: 30px;
}

/*-------------------------------------- ELEMENTS --------------------------- */
hr {
    border: none;
    border-top: solid 1px var(--border);
    margin: var(--whitespace) 0;
}
@media screen and (max-width: 900px) {
    hr {
        margin: calc(var(--whitespace) * 2) 0;
    }
}

.box {
    padding: var(--whitespace);
    border-radius: calc(var(--corners) / 2);
    background: var(--main-color-dark);
    color: #FFF;
}
.box--light {
    background: var(--main-color-light);
    color: #212121;
}

.box:not(.box--light) {
    article {
        a {
            color: #FFF;
            &:hover, &:focus {
                text-decoration-color: var(--main-color-light2);
            }
        }
    }
}

/*-------------------------------------- ARTICLE --------------------------- */
article {
    margin-bottom: var(--whitespace);
    margin-bottom: 50px;
}
article:last-child, article:only-child {
    margin-bottom: 0;
}
article p {
    max-width: 80ch;
    margin-bottom: 20px;
    text-wrap: balance;
    + h2 {
        margin-top: 40px;
    }
    + h3, + h4, + h5, + h6 {
        margin-top: 20px;
    }
}
article p small {
    font-size: 12px;
}
article ul, article ol {
    margin-bottom: 20px;
}
article ul li,
article ol li {
    margin-left: 18px;
}
article p:last-child, 
article p:only-child,
article ul:last-child, 
article ul:only-child,
article ol:last-child, 
article ol:only-child {
    margin-bottom: 0;
}

/*-------------------------------------- COLUMNS --------------------------- */
.cols {
    display: flex;
    gap: var(--whitespace);
}
.cols > .col {
    flex: 1 1;
    position: relative;
}
.cols--border {
    gap: calc(var(--whitespace)*2);
}
.cols--border .col:not(:first-child):before {
    display: block;
    content: '';
    border-left: solid 1px var(--border);
    position: absolute;
    left: calc(var(--whitespace)*-1);
    top: 0;
    bottom: 0;
}
@media screen and (max-width: 900px) {
    .cols {
        flex-direction: column;
        gap: calc(var(--whitespace) * 2)
    }
    .cols--border {
        gap: calc(var(--whitespace) * 2)
    }
    .cols--border .col:not(:first-child):before {
        display: none;
    }
}

.cols--66 > *:has(article) {
    align-self: center;
}
.cols--66 > * {
    flex-basis: 50%;
}

.cols--93 > .col:first-child {
    flex-basis: 67.5%;
}
.cols--93 > .col:last-child {
    flex-basis: 32.5%;
}

.cols--75 > .col:first-child {
    flex-basis: 55%;
}
.cols--75 > .col:last-child {
    flex-basis: 45%;
}

/*-------------------------------------- CONTACT LIST --------------------------- */
ul.contact, ul.contact li {
    margin: 0;
    padding: 0;
    list-style: none none;
    font-size: 13px;
}
ul.contact li + li {
    margin: 15px 0 0 0;
}
ul.contact a {
    display: block;
    color: var(--main-color);
    text-decoration: none;
    padding-left: 55px;
    position: relative;
}
ul.contact a:hover, ul.contact a:focus {
    color: var(--main-color-dark);
}
ul.contact a svg {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    left: 0;
    top: 3px;
}
ul.contact a strong {
    font-size: 26px;
    line-height: 36px;
    display: block;
    font-weight: normal;
}
@media screen and (max-width: 460px) {
    ul.contact a strong {
        font-size: 20px;
    }
}
ul.contact a span {
    display: block;
    color: var(--main-color-dark);
}

.box ul.contact a {
    color: #FFF;
}
.box ul.contact a:hover, .box ul.contact a:focus {
    color: var(--main-color-light);
}
.box ul.contact a span {
    color: var(--main-color-light);
}


/*-------------------------------------- UPDATES --------------------------- */

article + ul.updates {
    margin-top: calc(var(--whitespace) * -1 + 15px);
}
ul.updates, ul.updates li {
    margin: 0;
    padding: 0;
    list-style: none none;
}
ul.updates {
    margin-bottom: 20px;
}
ul.updates li + li {
    margin: 10px 0 0 0;
    padding: 10px 0 0 0;
    border-top: solid 1px  var(--border);
}
ul.updates li.updates__ico {
    padding-left: 24px;
    position: relative;
}
ul.updates li.updates__ico svg {
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
}
ul.updates li.updates__ico:first-child svg {
    top: 5px;
}

/*-------------------------------------- OPENINGSUREN --------------------------- */
ul.openingsuren, ul.openingsuren li {
    margin: 0;
    padding: 0;
    list-style: none none;
    font-size: 13px;
}
ul.openingsuren {
    margin-bottom: 20px;
}
ul.openingsuren li + li {
    margin: 5px 0 0 0;
    padding: 5px 0 0 0;
    border-top: solid 1px  var(--border);
}

/*--------------------------------- LINKBACK ---------------------------------*/

a.backlink {
    display: inline-block;
    position: relative;
    padding-left: 22px;
}
a.backlink:before {
    display: block;
    content: '';
    border: solid 3px transparent;
    transform: rotate(-45deg);
    border-left-color: var(--main-color);
    border-top-color: var(--main-color);
    width: 12px;
    height: 12px;
    position: absolute;
    top: 7px;
    left: 0;
}

/*--------------------------------- GALLERY ---------------------------------*/

ul.gallery {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 -4px 20px;
}

ul.gallery li {
  height: 240px;
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  padding: 0;
  margin: 4px;
}
ul.gallery li:before {
  display: none;
}

ul.gallery li:last-child {
  flex-grow: 100;
  height: 1px;
}
ul.gallery a {
  display: block;
  display: flex;
  align-items: stretch;
  width: 100%;
}
ul.gallery img {
    display: block;
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
  border-radius: 1px;
}

@media (max-width: 480px) {
  ul.gallery li {
    height: 120px;
  }
}


.sl-overlay {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:#fff;
	opacity:1;
	display:none;
	z-index:1035
   }
   .sl-wrapper {
	z-index:1040
   }
   .sl-wrapper button {
	border:0 none;
	padding:0;
	cursor:pointer
   }
   .sl-wrapper .sl-close {
	font:0/0 a;
	color:transparent;
	text-shadow:none;
	background-color:transparent;
	border:0;
	display:none;
	position:fixed;
	right:20px;
	top:20px;
	z-index:10060;
	width:40px;
	height:40px;
	background-color:rgba(255,255,255,0.5)
   }
   .sl-wrapper .sl-close br {
	display:none
   }
   .sl-wrapper .sl-close:after {
	display:block;
	content:'';
	position:absolute;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	width:40px;
	height:40px;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23004f30%22%20d%3D%22m2%200%2028%2027.3-2%202L0%202z%22%2F%3E%3Cpath%20fill%3D%22%23004f30%22%20d%3D%22M30%202.7%202%2030l-2-2L28%20.7z%22%2F%3E%3C%2Fsvg%3E")
   }
   .sl-wrapper .sl-close:focus {
	outline:none
   }
   @media (min-width: 1400px) {
	.sl-wrapper .sl-close {
	 right:60px;
	 top:60px
	}
   }
   .sl-wrapper .sl-counter {
	display:none;
	position:fixed;
	top:30px;
	left:30px;
	z-index:1060;
	color:#000;
	font-size:1rem
   }
   .sl-wrapper .sl-navigation {
	width:100%;
	display:none
   }
   .sl-wrapper .sl-navigation button {
	position:fixed;
	top:50%;
	margin-top:-30px;
	height:60px;
	width:40px;
	display:block;
	z-index:10000;
	background-color:rgba(255,255,255,0.5) !important
   }
   .sl-wrapper .sl-navigation button.sl-next,
   .sl-wrapper .sl-navigation button.sl-prev {
	font:0/0 a;
	color:transparent;
	text-shadow:none;
	background-color:transparent;
	border:0
   }
   .sl-wrapper .sl-navigation button.sl-next br,
   .sl-wrapper .sl-navigation button.sl-prev br {
	display:none
   }
   .sl-wrapper .sl-navigation button.sl-next {
	right:0
   }
   .sl-wrapper .sl-navigation button.sl-prev {
	left:0
   }
   .sl-wrapper .sl-navigation button.sl-next:after,
   .sl-wrapper .sl-navigation button.sl-prev:after {
	display:block;
	content:'';
	position:absolute;
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	width:40px;
	height:60px;
	background-repeat:no-repeat;
	background-position:center center
   }
   .sl-wrapper .sl-navigation button.sl-prev:after {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='32' fill='none'%3E%3Cpath stroke='%23004F30' d='m16 1.084-15 15 15 15'/%3E%3C/svg%3E")
   }
   .sl-wrapper .sl-navigation button.sl-next:after {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='32' fill='none'%3E%3Cpath stroke='%23004F30' d='m1 31.084 15-15-15-15'/%3E%3C/svg%3E")
   }
   .sl-wrapper .sl-navigation button:focus {
	outline:none
   }
   @media (min-width: 35.5em) {
	.sl-wrapper .sl-navigation button.sl-next {
	 right:10px
	}
	.sl-wrapper .sl-navigation button.sl-prev {
	 left:10px
	}
	.sl-wrapper .sl-navigation button.sl-prev:after {
		background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2263%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23004f30%22%20stroke-width%3D%223%22%20d%3D%22m32.1%201-30%2030%2030%2030%22%2F%3E%3C%2Fsvg%3E")
	}
	.sl-wrapper .sl-navigation button.sl-next:after {
		background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2263%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23004f30%22%20stroke-width%3D%223%22%20d%3D%22m1%2061%2030-30L1%201%22%2F%3E%3C%2Fsvg%3E")
	}
   }
   @media (min-width: 50em) {
	.sl-wrapper .sl-navigation button.sl-next {
	 right:20px
	}
	.sl-wrapper .sl-navigation button.sl-prev {
	 left:20px
	}
   }
   @media (min-width: 1400px) {
	.sl-wrapper .sl-navigation button.sl-next {
	 right:60px
	}
	.sl-wrapper .sl-navigation button.sl-prev {
	 left:60px
	}
   }
   .sl-wrapper .sl-image {
	position:fixed;
	margin-top:-30px;
	touch-action:none;
	z-index:10000
   }
   .sl-wrapper .sl-image img {
	margin:0;
	padding:0;
	display:block;
	border:0 none;
	width:100%;
	height:auto
   }
   @media (min-width: 35.5em) {
	.sl-wrapper .sl-image img {
	 border:0 none
	}
   }
   @media (min-width: 50em) {
	.sl-wrapper .sl-image img {
	 border:0 none
	}
   }
   .sl-wrapper .sl-image iframe {
	background:#000;
	border:0 none
   }
   @media (min-width: 35.5em) {
	.sl-wrapper .sl-image iframe {
	 border:0 none
	}
   }
   @media (min-width: 50em) {
	.sl-wrapper .sl-image iframe {
	 border:0 none
	}
   }
   .sl-wrapper .sl-image .sl-caption {
	display:none;
	padding:10px 0;
	color:$text;
	background:rgba(0,0,0,0);
	font-size:1rem;
	position:absolute;
	bottom:0;
	-webkit-transform:translateY(100%);
	transform:translateY(100%);
	left:0;
	right:0;
	text-align:center
   }
   .sl-wrapper .sl-image .sl-caption.pos-top {
	bottom:auto;
	top:0
   }
   .sl-wrapper .sl-image .sl-caption.pos-outside {
	bottom:auto
   }
   .sl-wrapper .sl-image .sl-download {
	display:none;
	position:absolute;
	bottom:5px;
	right:5px;
	color:#000;
	z-index:1060
   }
   .sl-spinner {
	display:none;
	border:5px solid #333;
	border-radius:40px;
	height:40px;
	left:50%;
	margin:-20px 0 0 -20px;
	opacity:0;
	position:fixed;
	top:50%;
	width:40px;
	z-index:1007;
	-webkit-animation:pulsate 1s ease-out infinite;
	animation:pulsate 1s ease-out infinite
   }
   .sl-scrollbar-measure {
	position:absolute;
	top:-9999px;
	width:50px;
	height:50px;
	overflow:scroll
   }
   .sl-transition {
	transition:-webkit-transform ease 200ms;
	transition:transform ease 200ms;
	transition:transform ease 200ms, -webkit-transform ease 200ms
   }
   @-webkit-keyframes pulsate {
	0% {
	 -webkit-transform:scale(0.1);
	 transform:scale(0.1);
	 opacity:0.0
	}
	50% {
	 opacity:1
	}
	100% {
	 -webkit-transform:scale(1.2);
	 transform:scale(1.2);
	 opacity:0
	}
   }
   @keyframes pulsate {
	0% {
	 -webkit-transform:scale(0.1);
	 transform:scale(0.1);
	 opacity:0.0
	}
	50% {
	 opacity:1
	}
	100% {
	 -webkit-transform:scale(1.2);
	 transform:scale(1.2);
	 opacity:0
	}
   }