/* :root {
  --kleur1: #031F30;
  --kleur2: #e26729;
  --kleur3: #4A6380;
  --kleur4: 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;
} */


:root {
  --color1: #031F30;
  --color2: #e26729;
  --color3: #4A6380;
  --color4: hsla(203, 88%, 10%, 0.1);
  --fontColor: #000;
  --fontFamily1: "Ubuntu", Helvetica, Arial, sans-serif;
  --fontFamily2: "Source Sans Pro", Helvetica, Arial, sans-serif;
  --bodyFontSize: 18px;
  --h1Size: 50px;
  --h2Size: 40px;
  --h3Size: 18px;
  --h5Size: 18px;
  --maxWidth: 1230px;
  --textSmall: 1000px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
}


body {font-family: var(--fontFamily2); font-weight: normal; color: var(--fontColor); background: #F4F8FF; font-size: var(--bodyFontSize); line-height: 1.85em; text-underline-offset: 0.2em;}
::selection {background: var(--color1); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); border-color: #666; background: #FFF; color: var(--fontColor); 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(--color1);}
 
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(--fontFamily1); font-weight: bold; color: var(--color1); 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: var(--h1Size); font-weight: normal;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); font-weight: normal;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size)}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: lighter; color: #999;}

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

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

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

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color2); 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(--color1);}

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

a.knop-twee {color: var(--color2); position: relative; font-family: var(--fontFamily1); 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(--color1);}

.bovenkantHolder {background: var(--color1); border: 0; position: sticky; top: 0;}
.bovenkantHolder .bovenkant {min-height: 100px;}
.bovenkantHolder .bovenkant .art-menu li a .t {color: #FFF; font-family: var(--fontFamily1); font-size: 18px; padding: 20px 15px;}
.bovenkantHolder .bovenkant .art-menu li a .t.conversion {background-color: var(--color2); 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(--fontColor); 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(--color1); 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(--color2);}
.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"].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(--maxWidth); 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(--color2); 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;}

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"] 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(--color2);}
.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(--fontFamily1); font-weight: 500; font-size: 20px;}

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

.formulier.widget label, .formulier.widget .label {font-size: 16px; font-weight: bold;}

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

.resMenuHolder {background-color:#f4f8ff; box-sizing: border-box; padding:30px;}
.resMenublokinhoud .resMenuItem a {font-size:18px; border-bottom:0; font-family: var(--fontFamily1);}
.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;}

@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) {

  :root {  
     --bodyFontSize: 16px;
     --h1Size: 30px;
     --h2Size: 25px;
     --h5Size: 20px;
  
     --space10: 10px;
     --space15: 15px;
     --space20: 10px;
     --space30: 20px;
     --space40: 20px;
     --space50: 25px;
     --space80: 40px;
     --space100: 50px;
  }

  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"].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) {


}