:root {
  --kleur1: #F39200;
  --kleur3: #E61B53;
  --kleur2: #4E728A;
  --kleur4: hsl(37, 45%, 95%);
  --fontkleur: #000;
  --font-family1: "Poppins", sans-serif;
  --max-width: 1580px;
}
 

body {font-family: var(--font-family1); font-weight: 400; background: #000;  font-size: 16px;}
main {background: #FFF;}

::selection {background: #000; color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] { border-radius: 4px; border: 1px solid #cbd4dd;}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {}

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); }

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 40p; font-weight: 700;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 24px; font-weight: 600;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-weight: 600;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover, .subtitel {color: #939393; font-size: 22px; font-weight: normal;}

strong {font-weight: 600;}

/* h1      {font-weight: 400;} */
h1 + h5, h1 + .h5, h1 + .subtitel {margin-top: -0.50em; margin-bottom: 1em;}
h2 + h5, h2 + .h5 {margin-top: -0.50em; margin-bottom: 1em;}
h3 {margin-bottom:0;}
h4 {font-size:inherit;font-weight: 600; color:inherit; margin-top:20px; margin-bottom:0}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 180px; margin-right:10px; margin-top:10px; margin-bottom:10px;}

header {box-shadow: 0 0 3px 0 rgb(0 49 82 / 20%); position: sticky; top: 0; z-index: 10;}

.bovenkantHolder {background: #FFF; border: unset; position: sticky; top:0; box-shadow: 0 0 20px rgba(0, 0, 0, .05);}
.bovenkantHolder .bovenkant {min-height: 100px; max-width:var(--max-width)}
.winkelmenuHolder {display:none}


.art-menu {display: flex; align-items: center; gap: 20px;}
.art-menu li {break-inside: avoid-column;}
.art-menu li a:focus-visible {outline: 2px solid var(--kleur1);}


.art-menu li a .t {padding: 20px 0; font-weight: bold; color: var(--fontkleur); font-size: inherit; cursor:pointer; text-transform: lowercase;}
.art-menu li a.active .t {font-weight: bold; color:var(--kleur1);}
.art-menu li a .t:hover, .art-menu li a.active .t {color:var(--kleur1);}

.art-menu li a.active .t.oranje,.art-menu li a .t.oranje:hover   {color:var(--kleur1);}
.art-menu li a .t.oranje::before  {background-color:var(--kleur1);}

.art-menu li a.active .t.blauw,.art-menu li a .t.blauw:hover   {color:var(--kleur2);}
.art-menu li a .t.blauw::before  {background-color:var(--kleur2);}

.art-menu li a.active .t.roze,.art-menu li a .t.roze:hover    {color:var(--kleur3);}
.art-menu li a .t.roze::before  {background-color:var(--kleur3);}

.art-menu li a.active .t.zwart,.art-menu li a .t.zwart:hover   {color:var(--fontkleur);}
.art-menu li a .t.zwart::before  {background-color:var(--fontkleur);}

.art-menu li a .t::before {content: ""; display: block; position: absolute; bottom: 10px; left: 0; width: 0; height: 3px; background-color: var(--kleur1); transition: all .3s ease; }
.art-menu li a:hover .t::before, .art-menu li a.active .t::before {width: 100%;}

.art-menu li a span.vacaturebankLink {padding:12px 15px; background:var(--kleur1); color:#fff !important; border-radius: 5px;}

.art-menu > li > a:has(.kol2) + ul {columns: 2; gap:20px; }

.art-menu > li > ul {top:80px !important; border:0; padding:30px; font-size:15px; font-weight: 400; color:var(--fontkleur); box-shadow:0 10px 20px rgba(0,0,0,.2);}
.art-menu ul:before {border:0; left:0; top:-30px; right:0; height:30px; z-index:2; display: block; width: auto;}
.art-menu ul li:nth-last-child(2) a {*border-bottom:0;}
.art-menu ul li a {color: var(--fontkleur); width:unset; min-width:250px;}
.art-menu ul li li a {opacity: .7;}

.art-menu li li > ul {display:none!important; position: relative; top:unset !important; border: 0; left: unset !important; box-shadow: none; font-size: 14px; margin-left: 30px; top:unset; visibility: visible; opacity:1;}
.art-menu li li > ul ul {display: none !important;}
.art-menu ul li li a::before {display: none;}


.CMSMenu1ul > li {border-bottom: 1px solid #eee;}
.CMSMenu2ul {margin-bottom:15px !important;}
a.CMSMenuLink1li, a.CMSMenuLink1liSel {padding: 15px 5px 15px 30px; display: block; margin:0; font-size: inherit;}
a.CMSMenuLink1li::before, a.CMSMenuLink1liSel::before { content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-size: 13px; color: #bbb; font-weight: bold; position: absolute; left:12px;}
a.CMSMenuLink1liSel {border:0;}
.CMSMenuLink2li, .CMSMenuLink2liSel {padding-left:30px;}


/* .Taalkeuze_vlaggen.dropdownTaal {margin-left:20px; min-width: unset; width:30px; line-height: 1em;}
.Taalkeuze_vlaggen.dropdownTaal ul {border-radius: 5px; padding:2px 0; max-height:22px;}
.Taalkeuze_vlaggen.dropdownTaal ul li {padding:5px;}
.Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {display: none;}
.Taalkeuze_vlaggen ul li.actief .afbeelding::before {display: none;}
.Taalkeuze_vlaggen.dropdownTaal img {border-radius: 3px;}
.Taalkeuze_vlaggen.dropdownTaal.open ul {} */

.hoogContrast            {position:absolute; top:124px; right:0; display:inline-block; padding: 3px 10px; background: #eee; border-radius: 0 0 5px 5px; font-size: 14px;}
.hoogContrast a          {text-decoration: none; font-weight: bold; color:#000;}
.hoogContrast a.hoog     {display:none;}
.hoogContrast a.normaal  {display:block; color:#4d4d4d;}
.hoogContrast .hoog::before, .hoogContrast .normaal::before {font-family:"Font Awesome 5 Pro"; content:"\f205"; margin-right:5px; font-size:110%;}
.hoogContrast .normaal::before  {content:"\f204";}

a.skipLink {display: block; left: 10px; padding: 8px 16px; position: fixed; font-size: 17px; font-weight: bold; text-transform: uppercase; transition: none; color: #fff; background-color: var(--kleur1); top: -400px; text-decoration: none;}
a.skipLink:focus, a.skipLink:active {left: 10px; top: 10px; z-index: 100;}

.breadcrumbsHouder {background:#eee;}
.breadcrumbs {padding:10px 30px; max-width:var(--max-width); margin:0 auto;  box-sizing: border-box;}

.art-Sheet {padding-top:50px; padding-bottom: 50px;}
.art-Sheet .art-sidebar1 {width:380px; min-width: 380px; padding-right:80px;}

div.grid-2x {gap:50px;}
div.grid-3x {gap:50px;}
img.volledig, img.links-20, img.links-30, img.links-40, img.links-50, img.links-60, img.links-70, img.links-80, img.rechts-20, img.rechts-30, img.rechts-40, img.rechts-50, img.rechts-60, img.rechts-70, img.rechts-80 {border-radius: 5px;}
div.grid-3x {grid-template-columns: 1fr 1fr 1fr;}

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

/* section .inhoud, .vak .inhoud {padding-top:80px; padding-bottom: 80px;} */


/* Eigen knoppen */
a.knop, a.button.wButInloggen, .button, button, a.button {
  background-color: transparent;
  border: 2px solid var(--kleur1);
  border-radius: 5px;
  color: var(--kleur1);
  display: inline-block;
  margin: 0;
  padding: 11px 15px;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease 0s;
  font-family: var(--font-family1);
  line-height: 1.25em;
  z-index: 1;
  outline: 0;
  cursor: pointer;
}

.button:hover {background:var(--kleur1); color:#fff;}

a.knop::before, a.button.wButInloggen:before {position: absolute; content: ""; top: 0; left: 0; bottom: 0; width: 0%; background: var(--kleur1); display: block; border-radius: 5px; transition: .3s all ease; z-index: -1; opacity: .3;}
a.knop:hover::before, a.button.wButInloggen:hover::before {width: 100%; opacity: 1; }

a.knop:hover, a.button.wButInloggen:hover {border: 2px solid var(--kleur1); color: #fff;}
a.knop:active, a.button.wButInloggen:active {border: 2px solid var(--kleur1); top:1px;}

a.knop.pijl::after {margin-left: 10px; font-family: "Font Awesome 5 Pro"; content: "\f054"; display: inline-block;}
/* einde eigen knoppen */

.prijzenTabel {width:100%; *background:var(--kleur3)}
.prijzenTabel td {padding:10px 10px; vertical-align: middle; background-color:#fff; transition:all .3s ease;}
.prijzenTabel tr:hover:first-child td {background-color:#fff;}
.prijzenTabel tr:hover:nth-child(2) td {background-color:#fff;}
.prijzenTabel tr:hover td {background-color:var(--kleur3)}
.prijzenTabel td p {margin:0;}

.prijzenTabel h3 {margin-bottom:0;}
.prijzenTabel tr td {border-bottom:1px solid rgba(0,0,0,.2)}
.prijzenTabel tr:first-child td {border-bottom:0}
.prijzenTabel tr:last-child td {border-bottom:0}
.geenBorder {border:0 !important}


.vak .inhoud {padding-top:100px; padding-bottom:100px;}
.vak.kleur1 {background-color: var(--kleur1);}
.vak.kleur2 {background-color: var(--kleur2);}
.vak.kleur3 {background-color: var(--kleur3);}
.vak.kleur1 h1, .vak.kleur1 .h1, .vak.kleur1 h2, .vak.kleur1 .h2, .vak.kleur1 h5, .vak.kleur1 .h5, .vak.kleur1,
.vak.kleur2 h1, .vak.kleur2 .h1, .vak.kleur2 h2, .vak.kleur2 .h2, .vak.kleur2 h5, .vak.kleur2 .h5, .vak.kleur2,
.vak.kleur3 h1, .vak.kleur3 .h1, .vak.kleur3 h2, .vak.kleur3 .h2, .vak.kleur3 h5, .vak.kleur3 .h5, .vak.kleur3  {color:#fff;}
.vak.kleur1 a.knop, .vak.kleur2 a.knop, .vak.kleur3 a.knop {border-color:#fff; color:#fff;}
.vak.kleur1 a.knop::before, .vak.kleur2 a.knop::before, .vak.kleur3 a.knop::before {background-color:#fff; opacity:.2;}

.vak.huizen {background:url("/skin/images/botterwerf.jpg") no-repeat; background-size:cover; background-position:center; position: relative;}
.vak.huizen::after {content:""; background-color: rgba(255,255,255,.75); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}
.vak.huizen .inhoud {z-index: 1; position: relative;}
.vak.huizen .inhoud h5 {color: #000;}


.inhoud.max1200 {max-width: 1200px; margin-left: auto; margin-right: auto;}

.HeaderHolder {background-color: #000;}
.HeaderHolder .videoWrapper {background-color: #000;}
.HeaderHolder .videoWrapper iframe {opacity:.8}
.liquid-slide-sjabloon .inhoud {background:transparent; max-width: unset;}
.liquid-slide-sjabloon .inhoud h1 {color:#fff; font-size:3vw; font-weight: 300; line-height: 1.35em;}
.liquid-slide-sjabloon .inhoud h5 {color:#fff; font-size:1vw; font-weight: 300; line-height: 1.35em;}

.vak.metFoto  {padding:0;}
.vak.metFoto .grid-2x {position: relative; gap:0; align-items: center;}
.vak.metFoto .tekst {padding: 100px; box-sizing: border-box; align-content: center; padding-right: max(calc((100vw - var(--max-width)) / 2 + 30px), 30px);}
.vak.metFoto .tekst h2 {position: relative;}
.vak.metFoto .afbeelding {box-sizing: border-box; line-height:0; height:100%; background-size: cover; background-position: center; min-height:500px;}

img.full {max-width: unset; width: 100% !important;}

.vak.metFoto.rechts .afbeelding {order: 2; }
.vak.metFoto.rechts .tekst {padding-right: 100px; padding-left: max(calc((100vw - var(--max-width)) / 2 + 30px), 30px);}


.pageFooterHolder {background-color: var(--kleur3); background: url(/skin/images/menubg.svg?1) no-repeat var(--kleur2) bottom 0px right 0px; background-size: contain;}
.pageFooterKnoppenHolder {border:0; background: var(--kleur1);}
.pageFooter h2, .pageFooter .h2 {font-size: 18px; font-weight: 600; color: #fff;;}
.pageFooterHolder .pageFooter {padding-top:60px; padding-bottom:60px; font-size: 15px; color: #fff;}
.pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin: 0;}
.pageFooterHolder .pageFooter ul ul.sitemap2ul {display: none;}
.pageFooterHolder a {text-decoration: none; color: #fff;}
.pageFooterHolder a > em {color: #fff !important; font-size: 18px; margin-right: 5px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {opacity: .5; margin-right: 10px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a:hover {opacity: 1;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {display: none;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: .5;}
.pageFooterHolder .pageFooter .SMIconen {margin: 20px 0 0 auto;}
.pageFooterHolder .pageFooter .SMIconen a { color: #fff; padding: 5px 0px 5px 5px; width: 30px; height: 23px; display: inline-flex; margin: 0 5px 0 0; font-size: 16px; border-radius: 5px; text-decoration: none;}
.pageFooterHolder .pageFooter .SMIconen a em {margin: auto;}
.pageFooterHolder .pageFooter .SMIconen a:hover {opacity: .5;}


blockquote.rechts {float:right; margin-left:-15%; width:50%; transform: translateX(50%); background: var(--kleur4); padding: 50px;}
blockquote:before, blockquote:after {display: none;}


.uniekeForm {background: var(--kleur4); padding: 40px;}
.uniekeForm textarea, 
.uniekeForm input[type="text"], 
.uniekeForm input[type="password"], 
.uniekeForm input[type="email"], 
.uniekeForm input[type="tel"],
.uniekeForm input[type="date"], 
.uniekeForm input[type="number"] {border: 0; border-bottom: 1px solid #000; border-radius: 0; color: #000 !important; background: none; padding: 15px 0; font-size: 16px;}
.uniekeForm input::placeholder,
.uniekeForm textarea::placeholder {color: #777; font-size: 16px;}
.uniekeForm .uploadHolder {width: 100%; padding: 0; border-color: #ddd; border-radius: 3px;}
.uniekeForm .uploadHolder .upload_1 {display: flex; background: #FFF; padding: 10px; box-sizing: border-box;  border-radius: 3px;}
.uniekeForm .uploadHolder .upload_1 > input {max-width: 100%;}
.uniekeForm .uploadHolder ul li {font-size: 12px;}
/* .uniekeForm a.knopVersturen {float: right; margin-bottom: -60px; margin-top: 20px;} */
.checkboxes .label,
label[for="DR81"] {font-weight: 600; margin-top:20px !important;}

/* Responsive menu */

.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {border:2px solid var(--fontkleur); padding:10px; border-radius: 4px; display: flex; align-items: center; }
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop i {font-weight:400;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop::before {content:"MENU"; line-height:1em; font-weight: 600;  font-size:15px; margin-right:10px; font-family: var(--font-family1);}
.resMenuHolder {max-width: 80%; top: 0; max-width: 80%; height: 100vh !important; background: url(/skin/images/menubg.svg?1) no-repeat var(--kleur1) bottom 100px right; background-size: contain;}
.resMenublokinhoud {padding-top:20px;}
.resMenublokinhoud .resMenuItem a {border: 0; text-transform: lowercase; padding:7px 30px; text-align: left; font-weight: 600; font-family: var(--font-family1); color: #000; font-size: 16px;}
.resMenuItem .laag1 a {font-weight: normal; font-size: 15px; margin-left: 10px;}
.resMenublokinhoud .resMenuItem.active > a {color:#fff; font-weight: 600;}





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

}

@media screen and (max-width: 1100px) {
  div.grid-3x {grid-template-columns: 1fr 1fr;}
}

@media screen and (max-width: 900px) {
  .hoogContrast {display:none !important}

  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size:26px;}

  a.logo img {width: 150px;}
  .Taalkeuze_vlaggen.dropdownTaal {margin-left:auto; margin-right:10px; position: relative; top:-1.5px;}
  /* .resMenubalk {margin-left:0px;} */
  .bovenkantHolder .bovenkant {min-height: 0; padding-left:30px; padding-right:30px;}
  .pageFooterHolder .pageFooter {padding-left:30px; padding-right: 30px;}
  .pageFooterKnoppen {padding:20px 30px !important}

  .liquid-slide-sjabloon .inhoud {position: absolute; bottom:0; padding:30px; top:unset}
  .liquid-slide-sjabloon .inhoud h1 {font-size:6vw}
  .liquid-slide-sjabloon .inhoud h5 {font-size:3vw}

  .vak.metFoto .tekst        {padding-left: 30px;}
  .vak.metFoto.rechts .tekst {padding-right: 30px;}

  .extrabovenkantHolder {display: none;}
  .vak {padding: 0;}

  blockquote.rechts {float:none; margin-left:0; width:100%; transform: translateX(0); box-sizing: border-box;}

  .prijzenTabel h3 {font-size:13px;}
  .prijzenTabel td {padding:5px; font-size:13px; line-height: 1.35em;}
  .prijzenTabel .geenBorder {width:2px; padding:0;}

  .prijzenTabel td:first-child {padding-left:0;}
  .prijzenTabel td:last-child {padding-right:0;}


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


}