:root {
  --kleur1: #031F30;
  --kleur2: #e26729;
  --kleur3: #4A6380;
  --kleur4: hsla(203, 88%, 10%, 0.1);
  --kleur5: hsla(203, 88%, 10%, 0.1);
  --fontkleur: #000;
  --font-family1: "Ubuntu", Helvetica, Arial, sans-serif;
  --font-family2: "Source Sans Pro", Helvetica, Arial, sans-serif;
  --max-width: 1230px;
  --text-small: 1000px;
  --border-radius: 5px;
  
}

body {font-family: var(--font-family2); font-weight: normal; color: var(--fontkleur); background: #F4F8FF; font-size: 18px; line-height: 1.85em; text-underline-offset: 0.2em;}
::selection {background: var(--kleur1); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--border-radius); border-color: #666; background: #FFF; color: var(--fontkleur); padding: 12px 10px;}

/* .breadcrumbs {display: none;} */
.breadCrumbHolder {margin: 0 auto; padding: 15px 30px; box-sizing: border-box; position: relative; max-width:1580px;}
.breadCrumbHolder:empty {display: none;}
.breadCrumbHolder::before {position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); content: ""; background: #fff; z-index: -2;}
.breadCrumbHolder .breadcrumbs {margin: 0; font-size: 15px;}
.breadCrumbHolder .breadcrumbs ol li:last-child {font-weight: bold; color: var(--kleur1);}
 
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--font-family1); font-weight: bold; color: var(--kleur1); line-height: 1.35em; margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 50px; font-weight: normal;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 40px; font-weight: normal;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: 18px;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 24px; font-weight: lighter; color: var(--kleur1);}

h1 + h5 {margin-top:-1em;}

h1 strong {color: var(--kleur2); font-weight: normal;}
h2 strong {color: var(--kleur2); font-weight: normal;}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 250px; margin: 0;}

a.knop, .button, a.button, button {position: relative; font-family: var(--font-family1); background-color: var(--kleur2); color: #FFF; border: 0; font-size: 18px; padding: 15px 40px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: 30px;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--kleur1);}

a.knop + a.knop {margin-left:10px;}

a.knop-twee {color: var(--kleur2); position: relative; font-family: var(--font-family1); font-size: 20px; font-weight: normal; line-height: 1; text-decoration: none; cursor: pointer;}
a.knop-twee::after {content: "\f138"; font-family: "Font Awesome 5 Pro"; margin-left: 10px; font-weight: lighter;}
a.knop-twee:hover {color: var(--kleur1);}

.extrabovenkantHolder {background: var(--kleur1);}
.extrabovenkantHolder .extrabovenkant {display: flex; justify-content: space-between;}
.extrabovenkantHolder .extrabovenkant a.knop-twee.terug {padding: 10px 0; font-size: 16px; color: #FFF;}
.extrabovenkantHolder .extrabovenkant a.knop-twee.terug::after {display: none;}
.extrabovenkantHolder .extrabovenkant a.knop-twee.terug::before {content: "\f137"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-weight: lighter; color: var(--kleur2);}
.extrabovenkantHolder .extrabovenkant #google_translate_element {position: relative; text-align: center; height:41px; background:transparent; color:#fff;}
.extrabovenkantHolder .extrabovenkant #google_translate_element .goog-te-gadget {color:#fff;}
 

.bovenkantHolder {background: #fff; border: 0; position: sticky; top: 0;}
.bovenkantHolder .bovenkant {min-height: 100px;}
.bovenkantHolder .bovenkant .art-menu li a .t {color: var(--kleur1); font-family: var(--font-family1); font-size: 18px; padding: 20px 15px;}
.bovenkantHolder .bovenkant .art-menu li a .t.conversion {background-color: var(--kleur2); color: #FFF; padding: 15px 30px; cursor: pointer; line-height: 1; border-radius: 30px;}
.bovenkantHolder .bovenkant .art-menu li a.active .t, .bovenkantHolder .bovenkant .art-menu li a:hover .t {opacity: .5;}
.bovenkantHolder .bovenkant .art-menu li a.active .t.conversion {opacity: 1;}

.bovenkantHolder .bovenkant .art-menu ul { top: 80px !important; border: 0; padding: 30px; font-weight: 400; color: var(--fontkleur); box-shadow: 0 10px 20px rgba(0,0,0,.1); border-radius:0 0 5px 5px }
.bovenkantHolder .bovenkant .art-menu ul:before { border: 0; left: 0; top: -30px; right: 0; height: 30px; z-index: 2; display: block; width: auto; }
.bovenkantHolder .bovenkant .art-menu ul li a {color: var(--kleur1); width: 280px; padding: 7px 5px; border: 0;}
.bovenkantHolder .bovenkant .art-menu ul li a.active, .bovenkantHolder .bovenkant .art-menu ul li a:hover {background: unset; color: var(--kleur2);}
.bovenkantHolder .bovenkant .art-menu ul li a::before {display: none;}

.art-Sheet {padding: 80px 30px;}

div[class*="grid"].grid-2x {grid-template-columns: 1fr 1fr;}
div[class*="grid"].grid-3x {grid-template-columns: 1fr 1fr 1fr;}

div[class*="grid"].midden {align-items: center;}
div[class*="grid"].about {gap: 100px;}

div[class*="grid"].contact {grid-template-columns: 1fr 2fr; background: #FFF; border-radius: 20px; padding: 20px; box-sizing: border-box; box-shadow: 0px 0px 10px 5px #EDEDED; max-width: var(--max-width); margin: 0 auto;}
div[class*="grid"].contact .left {background: linear-gradient(135deg, #031F30 0%, #084266 100%); border-radius: 20px; padding: 40px; box-sizing: border-box; color: #FFF; position: relative; overflow: hidden;}
div[class*="grid"].contact .left::after {content: ""; position: absolute; bottom: -20%; right: -20%; width: 250px; height: 250px; background: var(--kleur2); border-radius: 100%; z-index: 1;}
div[class*="grid"].contact .left h3 {color: #FFF;}

div[class*="grid"].contact .left p.marker::before {content: "\f3c5"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #fff; margin-right: 10px; position: absolute; left: 0;}
div[class*="grid"].contact .left p.marker {padding: 0; padding-left: 34px; position: relative; z-index: 2;}

div[class*="grid"].contact .right {padding: 40px; box-sizing: border-box;}

div[class*="grid"].grid-1-3 {grid-template-columns: 1fr 3fr;}
div[class*="grid"].grid-1-2 {grid-template-columns: 1fr 2fr; gap: 60px;}
div[class*="grid"].grid-2-1 {grid-template-columns: 2fr 1fr; gap: 60px;}

section .inhoud, .vak .inhoud {padding: 80px 30px;}

.inhoud + .inhoud {padding-top: 0;}

.vak.wit {background: #fff;}

.max600 {max-width: 600px !important; margin-left: auto; margin-right: auto;}

.nextPage {margin-top:30px; text-align: right; padding-top:20px; border-top: 1px solid #ccc;}
.nextPage a.knop.next::after {font-family: "Font Awesome 5 Pro"; content: "\f054"; margin-left: 10px; font-weight: lighter;}

footer {background: linear-gradient(135deg, #031F30 0%, #084266 100%);}

.pageFooterHolder {background: unset;}
.pageFooterHolder .pageFooter {padding: 100px 30px 30px; font-size: 20px;}
.pageFooterHolder .pageFooter div[class*="grid"] .h2 {font-weight: 500; font-size: 26px;}
.pageFooterHolder .pageFooter div[class*="grid"] .h3 {font-weight: 500; font-size: 20px; text-transform: uppercase; color: #FFFFFF3B;}
.pageFooterHolder .pageFooter div[class*="grid"] .h3 a {color: #FFFFFF3B;}
.pageFooterHolder .pageFooter div[class*="grid"] p {line-height: 2em;}
.pageFooterHolder .pageFooter div[class*="grid"] a {text-decoration: none; color: #FFF;}
.pageFooterHolder .pageFooter div[class*="grid"] a.knop-twee {color: var(--kleur2);}
.pageFooterHolder .pageFooter div[class*="grid"] p + .h3 {margin-top: 60px;}

.pageFooterHolder .pageFooter div[class*="grid"] > div {text-align: right;}
.pageFooterHolder .pageFooter div[class*="grid"] > div:first-child {text-align: left;}

.pageFooterKnoppenHolder {background: unset;}
.pageFooterKnoppenHolder .pageFooterKnoppen {padding: 15px 30px 80px 30px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {margin: 0 5px; opacity: 0;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; color: #FFFFFF3B; text-transform: uppercase; font-family: var(--font-family1); font-weight: 500; font-size: 20px;}

.pageFooterHolder a {transition: all .3s ease; opacity: 1;}
.pageFooterHolder a:hover {opacity:.5;}

.formulier.widget > div {margin-bottom:20px;}
.formulier.widget label, .formulier.widget .label {font-size: 16px; font-weight: bold;}

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: var(--kleur1);}

.resMenuHolder {background-color:#f4f8ff; box-sizing: border-box; padding:30px;}
.resMenublokinhoud .resMenuItem a {font-size:18px; border-bottom:0; font-family: var(--font-family1);}
.resMenublokinhoud .laag1 .resMenuItem a {font-size: 16px;}
.resMenublokinhoud .resMenuItem.active>a {color:#e26729}
.openklapper {top:2px; transition: all .3s ease;}

.gm-style .gm-style-iw-c {border-radius: 0; box-shadow: 0 10px 20px rgba(0,0,0,.2);}
.gm-style .gm-style-iw-c button { top: 5px !important; right: 5px !important; transform: scale(1.5);}
.gMapsHolder {padding:0 20px 20px 20px; line-height: 1.65em; font-weight: normal; width:300px;}
.gMaps_email, .gMaps_extra1, .gMaps_adres, .gMaps_Telefoon {margin:0;}
.gMaps_Telefoon, .gMaps_extra1, .gMaps_extra2 {margin-top:0.5em;}
.gMaps_bedrijfsnaam {font-weight: bold !important;}

.gMapsL_type {display:none}
.gMaps_type { font-size: 16px; padding-left: 20px; font-size: 16px; margin-bottom: 10px; display: inline-block;}
.gMaps_adres, .gMaps_land, .gMaps_plaats, .gMaps_postcode {display:none;}
.gMapsHolder {font-size: 16px;}

.art-Block {background-color: var(--kleur2); padding: 30px 40px; border-radius: 0 15px 15px 15px}
.CMSMenu1ul > li {border-bottom: 1px solid rgba(255,255,255,0.2); position: relative;}
.CMSMenu1ul > li:last-child {border-bottom: 0;}
.CMSMenu2ul {margin-bottom:15px !important;}
a.CMSMenuLink1li, a.CMSMenuLink1liSel {padding: 15px 5px 15px 30px; display: block; margin:0; font-size: 17px; color: #fff !important;}
a.CMSMenuLink1li::before, a.CMSMenuLink1liSel::before { content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-size: 13px; color: #fff; font-weight: bold; position: absolute; left:12px; opacity: .2;}
a.CMSMenuLink1liSel {border:0; color: #fff !important; font-weight: 700; opacity: 1; font-size: 16px;}
a.CMSMenuLink1liSel::before {opacity: 1;}
.CMSMenuLink2li, .CMSMenuLink2liSel {line-height: 1.35em; font-size: 16px; color: var(--kleur1) !important; padding: 8px 0 8px 30px;}
.CMSMenu2li > a:hover, .CMSMenu3li > a:hover, .CMSMenu4li > a:hover, .CMSMenu2liSel > a:hover, .CMSMenu3liSel > a:hover, .CMSMenu4liSel > a:hover {text-decoration: none !important; color: var(--kleur2) !important;}
a.CMSMenuLink2liSel {color: var(--kleur2) !important; font-weight: 400;}
.art-Block .h2 {font-size: 28px; color: #fff;}

.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal {min-width: 40px; margin-left: 20px; top: -1px; background:var(--kleur4); border-radius: var(--border-radius);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal.open ul {border-radius: var(--border-radius);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul {transition: unset;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {font-weight: bold; font-size: 15px; color: var(--fontkleur);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding {display: none;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving::after {display: none;}

@media screen and (max-width: 1200px) {

  div[class*="grid"].contact {grid-template-columns: 1fr 1fr;}
  div[class*="grid"].grid-1-3 {grid-template-columns: 1fr 2fr;}

}

@media screen and (max-width: 900px) {

  body {font-size: 16px;}

  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 30px;}
  h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 25px;}
  h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: 20px;}

  a.logo img {width: 100px;}

  .bovenkantHolder .bovenkant {min-height: 60px;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

  div[class*="grid"].contact .left, div[class*="grid"].contact .right {padding: 20px;}

  div[class*="grid"].grid-2x, div[class*="grid"].grid-3x, div[class*="grid"].contact, div[class*="grid"].grid-1-2, div[class*="grid"].grid-2-1, div[class*="grid"].grid-1-3 {grid-template-columns: 1fr; gap: 20px;}

  .pageFooterHolder .pageFooter {padding: 50px 20px; font-size: 16px;}

  .pageFooterKnoppenHolder .pageFooterKnoppen {padding: 30px 20px;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {font-size: 15px; margin: 10px 0 0 0;}

}

@media screen and (max-width: 680px) {


}