:root {
  --blauw: #1F75B5;
  --blauw-donker: #3a87c2;
  --groen: #2AAC59;
  --oranje: #E48038;

}

body {font-family: novel-sans-pro, sans-serif; font-weight: 400; font-size: 15px;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {transition: none;}

a, a:link, a:visited, a:hover {color: var(--blauw);}

.art-content img {max-width: 100%; height: auto !important;}

div[class*="grid"] {
  hyphens: initial;
}

section .inhoud, .vak .inhoud {padding: 3.5vw 0; padding-left: 0 !important; padding-right: 0 !important;}

.bovenkantHolder {background: var(--blauw); border: 0;}
.bovenkantHolder .bovenkant {padding-top: 20px; padding-bottom: 20px;}
.bovenkant .art-nav {margin: auto;}
.bovenkantHolder .art-menu li {margin: 0 10px;}
.bovenkantHolder .art-menu li:first-child {display: none;}
.bovenkantHolder .art-menu li a,
.bovenkantHolder .art-menu li a .t {color: #fff; padding: 0;}
.bovenkantHolder .art-menu li a .t {font-size: 18px; font-weight: 700;}
.bovenkantHolder .art-menu li a .subTekst {opacity: .75;}

.HeaderBg {background: var(--blauw); position: relative;}

.golven {position: absolute; height: 44px; width: 100%; bottom: -1px; overflow: hidden; border-bottom: 40px solid #fff; z-index: 0; pointer-events: none;}
.golven .golf  {position: absolute; top:0; left:0; right:0;}
.golven .golf1 {height: 44px; opacity: 0.2; background: url(images/golf1.svg) center bottom repeat-x; animation: 30s ease 0s infinite golf1;}
.golven .golf2 {height: 44px; opacity: 1; background: url(images/golf2.svg) center bottom repeat-x; animation: 40s ease-in-out 0s infinite golf2;}

@keyframes golf1 {
  0% {transform: translateX(0) scale3d(2,1,1);}
  50% {transform: translateX(-50%) scale3d(2,1,1);}
  100% {transform: translateX(0) scale3d(2,1,1);}
}

@keyframes golf2 {
  0% {transform: translateX(-25%) scale3d(2,1,1);}
  50% {transform: translateX(0) scale3d(2,1,1);}
  100% {transform: translateX(-25) scale3d(2,1,1);}
}

.pageFooterHolder .golven { transform: rotate(180deg); top: -1px; border: 0;}
.pageFooterHolder .pageFooter {
  padding-top: 95px !important;
}

.HeaderHolder {margin: 0 auto; max-width: 1580px; padding: 30px 30px 150px; box-sizing: border-box; z-index: 1; position: relative;}
.HeaderHolder .grid-2x {grid-template-columns: 1fr 500px;}
.HeaderHolder,
.HeaderHolder h1,
.HeaderHolder .h1,
.HeaderHolder h2,
.HeaderHolder .h2,
.HeaderHolder h3,
.HeaderHolder .h3,
.HeaderHolder h4,
.HeaderHolder .h4,
.HeaderHolder h5,
.HeaderHolder .h5,
.HeaderHolder ul.vinkjes li::before,
.HeaderHolder a,
.pageFooterHolder,
.pageFooterHolder h1,
.pageFooterHolder .h1,
.pageFooterHolder h2,
.pageFooterHolder .h2,
.pageFooterHolder h3,
.pageFooterHolder .h3,
.pageFooterHolder h4,
.pageFooterHolder .h4,
.pageFooterHolder h5,
.pageFooterHolder .h5,
.pageFooterHolder ul.vinkjes li::before,
.pageFooterHolder a,
.pageFooterHolder ul li::marker {color: #fff;}


.pageFooterHolder {background: var(--blauw);}
.pageFooterHolder .icoon {border-color: #fff; color: #fff; background: var(--blauw);}
.pageFooterHolder .icoon::after {background-color: #fff;}

.pageFooterHolder a.knop {background: var(--blauw-donker);}

.art-Block img {max-width: 100%; height: auto !important;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {font-family: novel-sans-pro, sans-serif; font-weight: 700; margin: 0 0 5px; color: #000000;}

h1, .h1 {font-size: 38px; margin: 0 0 10px;}
h2, .h2 {font-size: 27px;}
h3, .h3 {font-size: 18px;}

h1 + h5, 
.h1 + .h5 {font-weight: 400; margin-top: -0.5em;}
h2 + h5,
.h2 + .h5 {font-weight: 400; margin-top: -0.5em;}

ul, ol {margin: 0 0 10px; padding: 0 0 0 15px;}
ul li::marker {color: var(--blauw);}

blockquote {text-align: left; margin: 30px 0; font-size: 17px;}
blockquote::before, 
blockquote::after {display: none;}

span.groen {color: var(--groen);}
span.blauw {color: var(--blauw);}
span.oranje {color: var(--oranje);}

a.knop, .button, a.button, button, .meldingHouder .melding .knoppen a.bevestigen {background: var(--blauw); font-family: novel-sans-pro, sans-serif; font-weight: 700; font-size: 15px; padding: 12px 14px; color: #fff;}
a.knop:hover, .button:hover, a.button:hover, button:hover, .meldingHouder .melding .knoppen a.bevestigen:hover {background: var(--blauw-donker);}

a.knop small {display: block; font-weight: normal; font-size: 11px; margin-top: 4px; opacity: .7; font-family: "Open Sans", Helvetica, Arial, Sans-Serif;}
a.knop.groen {background-color: var(--groen);}

.formulierVersturen a.button {display: block;}

.formulier_tekstblok2 {padding-top: 10px;}
.formulier_tekstblok2 p:last-child {margin-bottom: 0;}

.meldingHouder .melding .knoppen  {display: flex;}
.meldingHouder .melding .knoppen a.bevestigen {flex: 1;}

.bovenkantHolder a.knop,
.HeaderHolder a.knop {background-color: var(--groen); padding: 9px 14px;}

.icoon {position: relative; margin-bottom: 20px; margin-right: 10px; background: #fff; border: 3px solid var(--blauw); box-sizing: border-box; border-radius: 100px; height: 44px; width: 44px; color: var(--blauw); display: inline-flex; transition: .5s all ease;}
a.icoon {text-decoration: none;}
.icoon::after {content: ""; position: absolute; top: 2px; left: 2px; background-color: var(--blauw); opacity: .1; height: 105%; width: 105%; border-radius: inherit; transition: inherit; z-index: 0;}
.icoon span {margin: auto; font-weight: 700; font-size: 18px; z-index: 1;}
.icoon i, .icoon em {margin: auto; font-size: 21px !important;} 
.icoon em {padding: 0 0 0 5px;}

.icoonComp {position: relative; display: grid; grid-gap: 20px; grid-template-columns: 44px 1fr; line-height: normal;}
.icoonComp h3, .icoonComp .h3 {margin: 0;}
.icoonComp a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}

.blok, blockquote {background: #fff; border: 3px solid #E6E6E6; box-shadow: 0 32px 38px 0 rgba(33,109,167,0.12); padding: 40px; color: #000;}
.blok h2 {color: #000000;}
.blok p a {color: var(--blauw);}

a.blokLink {display: flex; flex-direction: column; background: #fff; position: relative; border: 3px solid #E6E6E6; padding: 30px; color: #000; text-decoration: none;}
a.blokLink::after {content: ""; position: absolute; top: 4px; left: 4px; background-color: var(--blauw); opacity: 0; height: calc(100% + 3px); width: calc(100% + 3px); border-radius: inherit; transition: inherit; z-index: 0;}
a.blokLink em {font-weight: bold; margin-top: auto; font-size: 18px; text-align: right;}
a.blokLink:hover {border-color: var(--blauw);}
a.blokLink:hover em {color: var(--blauw);}
a.blokLink:hover::after {opacity: .1;}

ul.vinkjes    {list-style: none; padding: 0; margin: 0 0 20px;}
ul.vinkjes li {padding: 0 0 0 25px; position: relative; margin: 5px 0 5px; line-height: 1.75em;}
ul.vinkjes li::before {content: "\f00c"; font-weight: bold; font-family: "Font Awesome 5 Pro"; margin-right: 5px; color: var(--groen); left: 0; top: 1px; position: absolute;}
ul.vinkjes li:empty {display: none;}

ul.vinkjes ul {list-style: none; margin: 0; padding: 10px 0 0 15px;}
ul.vinkjes li li {padding: 0;}
ul.vinkjes li li::before {display: none;}

hr {background: url(images/border-horizontaal.jpg); height: 3px; width: 100%; border: 0; background-repeat: repeat-x; background-size: contain;}

.grid-2x.custom > div:first-child {transform: translateX( calc( (-100vw + 1520px) / 2) ); width: 50vw; line-height: 0;}
.grid-2x.custom > div:first-child img {width: 100% !important; height: auto !important;}

.grid-2x.custom .blok {margin-left: -50px; z-index: 1; position: relative;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: #fff;}

.gbBericht {padding-left: 0; padding-right: 0;}
.gbBericht .gbNaam {line-height: normal;}

.aircomatrix {border: 0; line-height: normal;}
.aircomatrix tr td {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 7px;}
.aircomatrix tr td:first-child {border-left: 1px solid #ddd;}
.aircomatrix tr:first-child td {border-top: 1px solid #ddd;}
.aircomatrix tr:first-child td:first-child {border: 0; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.aircomatrix tr td img {max-width: 100%; height: auto !important;}

.aircomatrix h2, .aircomatrix .h2 {font-size: 17px; margin: 0;}
.aircomatrix a.knop {display: block;}

.aircomatrixRespHolder {width: 100%; overflow-x: auto;}
.aircomatrixRespHolder .aircomatrix {width: 935px;}

.videoWrapper {position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; background: #fff; line-height: 0; z-index: 1; background: #f3f3f3; width: 100%;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}

@media (max-width: 1580px) {
  .grid-2x.custom > div:first-child {width: cal(100% + 60px); transform: translateX(-60px);}
}

@media (max-width: 1000px) {
  .HeaderHolder .grid-2x {grid-template-columns: 1fr;}
  .blok {padding: 20px;}
  .grid-2x.custom .blok {margin-left: 0;}
}
@media (max-width: 900px) {
  .resMenubalk {margin: auto 0 !important;}
  a.logo {margin: auto !important;}
}
@media (max-width: 760px) {
.grid-2x.custom > div:first-child {transform: translateX(-15px); width: calc(100% + 30px);}
.grid-4x .item {max-width: 280px; margin: 0 auto;}
.HeaderHolder div[class*="grid"] img {margin: 0 !important;}
}