/* maatwerk.css - fruitsecurityholland.com
   Gegenereerd uit de oude CSS-fork tegen skin_default, plus handwerk. Niet hier
   wijzigen maar in --migratie/ (hand.css) en opnieuw opmaken, zie LEESMIJ.md.
   revert-layer betekent: de oude site zette hier niets. */

/* fonts: Nudista (Medium, SemiBold, Bold) via Adobe Typekit, Open Sans via Google Fonts */

@import url("https://p.typekit.net/p.css?s=1&k=upi0uzi&ht=tk&f=1791.1792.1793.1794.1795.1796.1797.1798&a=7997974&app=typekit&e=css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");

@font-face { font-family:"Nudista Medium"; src:url("https://use.typekit.net/af/18401e/00000000000000003b9afb6a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/18401e/00000000000000003b9afb6a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/18401e/00000000000000003b9afb6a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-style:normal; font-weight:400; }

@font-face { font-family:"Nudista SemiBold"; src:url("https://use.typekit.net/af/4e2d77/00000000000000003b9afb6b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/4e2d77/00000000000000003b9afb6b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/4e2d77/00000000000000003b9afb6b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype"); font-style:normal; font-weight:600; }

@font-face { font-family:"Nudista Bold"; src:url("https://use.typekit.net/af/f75c20/00000000000000003b9afb6d/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/f75c20/00000000000000003b9afb6d/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/f75c20/00000000000000003b9afb6d/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-style:normal; font-weight:700; }

:root {
  --color1: #03a362;
  --color2: #f39203;
  --color3: #f0f2f5;
  --fontColor1: #000;
  --fontColor2: #fff;
  --borderColor1: #e8e8e8;
  --borderColor2: #cfcfcf;
  --fontFamily1: "Nudista Medium", Helvetica, Arial, Sans-Serif;
  --fontFamily2: "Nudista Bold", Helvetica, Arial, Sans-Serif;
  --fontFamily3: "Nudista SemiBold", Helvetica, Arial, Sans-Serif;
  --fontFamily4: "Open Sans", Helvetica, Arial, Sans-Serif;
  --bodyFontSize: 18px;
  --h1Size: 55px;
  --h2Size: 25px;
  --maxWidth: 1500px;
  --borderRadius1: 3px;
  --borderRadius2: 6px;
  --borderRadius3: 20px;
  --borderRadius4: 50px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space60: 60px;
  --space80: 80px;
  --space100: 100px;
  --space200: 200px;
}

/* basis */
body {line-height: 1.85em; overflow-y: scroll; color: var(--fontColor1); font-family: var(--fontFamily1); font-size: var(--bodyFontSize); background-color: #f3f3f3; height: revert-layer !important;}
p {letter-spacing: 0.05em;}
a, a:link {text-decoration: none; color: var(--color1);}
a:visited, a:hover {color: var(--color1);}
blockquote {max-width: 1140px; margin: var(--space50) auto; color: revert-layer; font-family: revert-layer; font-size: revert-layer; font-weight: revert-layer; padding: revert-layer; position: revert-layer;}
blockquote p {color: #00000047; font-size: 28px; font-style: normal; font-weight: normal; letter-spacing: 1.75px; line-height: 53px; margin-bottom: 1em; margin-top: 0;}
textarea, input[type="password"], input[type="email"], input[type="tel"] {border-color: var(--borderColor2); color: var(--fontColor1); line-height: 1.5em;}
input[type="text"], input[type="number"] {border-left-color: var(--borderColor2); border-right-color: var(--borderColor2);}
input:focus {border: 1px solid var(--color2);}
textarea:focus, select:focus {border-color: var(--color2);}
select {border-color: #cccccc; line-height: 1.5em; cursor: revert-layer;}
input[type="radio"]::before, input[type="checkbox"]::before {font-size: 15px; font-weight: normal; background: #FFF;}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {color: var(--color2);}
header {position: sticky; top: 0; z-index: 5;}
strong {font-family: var(--fontFamily2);}
input[type="text"][type="text"] {background-color: #FFF; line-height: 1.5em; padding: 8px var(--space10); border-bottom: 1px solid var(--borderColor2); border-top: 1px solid var(--borderColor2); box-sizing: border-box; transition: all .3s ease; color: var(--fontColor1);}
input[type="text"][type="text"]:focus {border-top-color: var(--color2); border-bottom-color: var(--color2);}
input[type="number"][type="number"] {border-radius: var(--borderRadius1) !important; line-height: 1.5em; border-bottom: 1px solid var(--borderColor2); border-top: 1px solid var(--borderColor2); box-sizing: border-box; transition: all .3s ease; color: var(--fontColor1);}
input[type="number"][type="number"][type="number"] {padding: 8px var(--space10);}
input[type="text"], textarea, table {width: revert-layer;}
section {position: revert-layer;}
blockquote:after, blockquote:before {content: revert-layer;}
input[type="checkbox"]::before, input[type="radio"]::before {letter-spacing: revert-layer;}

/* koppen */
.popupHolder .popup .titel .h2 {margin: 0 0 .5em;}
h1, .h2, h2, h1 a, h1 a:hover, h1 a:visited {margin-bottom: .5em;}
h1, h1 a {font-family: var(--fontFamily2); font-size: var(--h1Size); letter-spacing: .038em;}
h1 a:link, h1 a:visited, h1 a:hover {font-family: var(--fontFamily2); font-size: var(--h1Size);}
h1.streepje::after {content: ""; background: url(images/lijn-stippen.svg) 0% 0% / contain no-repeat; display: block; width: 190px; height: 11px; position: absolute;}
h2, .h2 {color: var(--fontColor1); font-family: var(--fontFamily2); font-size: var(--h2Size); font-weight: bold; letter-spacing: .038em; position: relative;}
h2 a {color: var(--fontColor1); font-family: var(--fontFamily2); font-weight: bold; letter-spacing: .038em; position: relative;}
h2 a:link {color: var(--fontColor1); font-family: var(--fontFamily2);}
h2 a:visited, h2 a:hover {color: var(--fontColor1); font-family: var(--fontFamily2); font-weight: bold;}
h2.streepje {font-size: var(--h1Size);}
h2.streepje::after {content: ""; background: url(images/lijn-stippen.svg) 0% 0% / contain no-repeat; display: block; width: 100%; height: 11px; position: absolute;}
h3 {color: var(--fontColor1); font-family: var(--fontFamily2); font-size: var(--bodyFontSize); margin-bottom: .25em; letter-spacing: .038em;}
h5 {font-family: var(--fontFamily1); font-size: var(--bodyFontSize); letter-spacing: 1.31px;}
p + h1, p + h2, p + h3, p + h5, ul + h2, ul + h3, ol + h3 {margin-bottom: 0.1em;}
.h3 {color: revert-layer; font-size: revert-layer; font-style: revert-layer; font-weight: revert-layer; line-height: revert-layer; margin: revert-layer; text-decoration: revert-layer;}
h5.h4 {font-size: var(--bodyFontSize); font-weight: normal; margin-bottom: 0.1em;}
p + h1, p + h2, ul + h2, ol + h3, p + h3, ul + h3, p + h5 {margin-top: 0;}

/* knoppen */
.configuratieDelenPopup a.knop {margin-top: 0;}
.button {background-color: var(--color1); border-radius: 0; font-family: var(--fontFamily2); font-size: var(--bodyFontSize); line-height: 1.85em; padding: var(--space10) var(--space50); outline: none; margin: revert-layer; text-align: revert-layer; transition: revert-layer;}
a.button {border-radius: 0; font-family: var(--fontFamily2); font-size: var(--bodyFontSize); padding: var(--space10) var(--space50); color: var(--fontColor2); margin: revert-layer; text-align: revert-layer;}
button {border-radius: 0; font-family: var(--fontFamily2); font-size: var(--bodyFontSize); line-height: 1.85em; padding: var(--space10) var(--space50); outline: none; margin: revert-layer; text-align: revert-layer;}
button:hover, a.button:hover.button.button.button.button {background-color: #049258;}
a.knop {font-family: var(--fontFamily2); border-radius: 0; font-size: var(--bodyFontSize); padding-left: var(--space50); padding-right: var(--space50); text-transform: uppercase; letter-spacing: 1.13px; line-height: 1.85em; z-index: 1; color: var(--fontColor2); text-align: revert-layer;}
a.knop.zwart:hover, a.knop.wit {color: var(--fontColor1);}
a.knop:hover.knop.knop.knop.knop.knop {background-image: none;}
a.button.button.button.button {line-height: 1.85em; background-color: var(--color1);}
a.knop.knop.knop.knop.knop {margin-right: 0;}
a.knop.knop.knop.knop.knop.knop {background-color: var(--color2);}
a.knop:hover.knop.knop.knop.knop.knop.knop {background-color: #e08907;}

.privacyMelding .knoppen a.knop.knop.knop {margin-right: var(--space10);}
a.knop.wit.wit.wit.wit.wit, a.knop.zwart:hover.zwart.zwart.zwart.zwart.zwart.zwart {background-color: #FFF;}
a.knop.zwart.zwart.zwart.zwart.zwart, .privacyMelding .knoppen a.knop.knop.knop.knop.knop.knop, a.knop.wit:hover.wit.wit.wit.wit.wit.wit {background-color: #000;}
.privacyMelding .knoppen a.knop.akkoord.akkoord.akkoord.akkoord.akkoord {background-color: #33a362;}
a.knop.wit:hover.wit {color: var(--fontColor2);}
.privacyMelding .knoppen a.knop:last-child.knop {margin-right: 0;}

.privacyMelding p:last-child {margin-bottom: 0;}

/* afbeeldingen */
img.schaduw {box-shadow: 0 2px 7px -1px rgb(0 0 0 / 60%);}
img {object-fit: revert-layer;}

/* paginaframe */
#art-main {background: #FFF;}
#art-main::before {content: ""; background: url(images/orangeHalve.svg) left top / contain no-repeat; position: absolute; display: block; width: 100%; height: 639px; bottom: 20%; left: -3px; z-index: 1;}
#art-main::after {content: ""; background: url(images/dotsHalve.svg) right top / contain no-repeat; position: absolute; display: block; width: 100%; height: 900px; bottom: 10%;}
.siteHolder {position: relative; margin: 0 auto; max-width: 1800px;}
.art-Sheet {background: #fff; max-width: var(--maxWidth); min-width: 1px; padding: 0 var(--space20); display: revert-layer;}
.art-Sheet-body {position: relative; z-index: 1; padding: 0;}
.art-contentLayout {position: relative; max-width: 1800px; padding: 0;}
.art-Block {padding: var(--space20) 0 0; margin: 0 auto; z-index: 0;}
.art-Post {margin: var(--space20) 0; position: relative; z-index: 0;}
.art-Post-body {padding: 0; position: relative; z-index: 1;}
.art-Post img {height: auto !important;}
.art-contentLayout .art-content, .art-contentLayout .art-sidebar1 {margin: 0; padding: 0; border: 0; float: left; width: 250px;}
.art-sidebar1 .art-Block {padding-right: var(--space20);}
.art-sidebar2 {position: relative; margin: 0; padding: 0; border: 0; width: 100% !important; background: #FFF;}
.art-Sheet .art-sidebar1 {box-sizing: revert-layer;}
.art-Sheet .art-content {flex: revert-layer; overflow: revert-layer;}
.art-Post.art-Post.art-Post img {max-width: 100%;}
/* pagina's met bouwblokken over de volle breedte (deed de oude index.tpl met jQuery) */
#art-main:has(article .vak) .art-Sheet {max-width: 100%; padding: 0;}
#art-main:has(article .vak) .art-Post-body {padding: 0;}
#art-main:has(article .vak) .art-Post {margin: 0;}

/* header */
.Taalkeuze_vlaggen.dropdownTaal.open {z-index: 12; max-height: 190px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.Taalkeuze_vlaggen.dropdownTaal.open ul, .Taalkeuze_vlaggen ul {background: #FFF;}
.resMenuItem.open > .openklapper {width: 39px;}
.resMenubalkinhoud .resZoeken.open {padding-top: 0;}
html.noscroll, html.noscroll body {overflow: hidden; position: relative; height: 100%;}
.art-navSite {position: relative; background-color: #FFF; text-align: center; border-top: 1px solid #e8e8e6;}
.art-navSite .art-menu {max-width: var(--maxWidth); margin-right: auto; margin-left: auto; padding-right: var(--space20); padding-left: var(--space20); box-sizing: border-box;}
.art-menu li a {font-family: var(--fontFamily2);}
.art-menu li a .t {font-size: var(--bodyFontSize); margin: var(--space10) 0; font-weight: bold; padding: var(--space5) var(--space30); line-height: 30px; text-transform: uppercase; letter-spacing: 1px; border-radius: var(--borderRadius3);}
.art-menu li a.active .t {background: var(--color2); color: var(--fontColor2);}
.art-menu li a:hover .t {background: var(--color1); color: var(--fontColor2);}
.art-menu ul:before {content: "";}
.art-menu ul {z-index: 10; box-shadow: 0 5px 119px -17px rgba(0,0,0,.15);}
.art-menu ul li a {font-weight: bold; text-align: left; font-size: 17px;}
.art-menu ul li a.active, .art-menu ul li a.active:before {color: var(--color2);}
.winkelmenu {display: none; background: var(--color1); position: relative; text-align: center; z-index: 2;}
.winkelmenu .art-menu li a .t, .account .houder1 > .inlogKnop > a {color: var(--fontColor2);}
.winkelmenu .art-menu li a.active .t, .winkelmenu .art-menu li a:hover .t {color: var(--fontColor1); background-color: #FFF;}
.winkelmenu .art-nav {box-sizing: border-box; margin: 0 auto; max-width: var(--maxWidth); padding: 0 var(--space20); position: relative; top: 0;}
.winkelmenu .art-nav li.separatorHouder {display: inline-block; line-height: 0;}
.accountHolder {position: absolute; top: 45px; transition: .3s all ease; right: 20px;}
.accountHolder .seperator2 {border-right: 1px solid #ddd; height: 12px; position: relative; top: 0; width: 0; padding: 0; bottom: 0;}
.account {margin-bottom: 0; margin-left: 0; margin-top: 0; line-height: 1; display: inline-block; vertical-align: top; padding: revert-layer;}
li.inloggen {display: inline-block; margin: 0; text-decoration: none; cursor: pointer; background: var(--color1); z-index: 13; padding-top: 0; padding-bottom: 0; padding-left: 0; border-radius: var(--borderRadius2); height: 40px; width: 40px; box-sizing: border-box; line-height: 40px; text-align: center;}
.account li.favorieten {position: relative; margin: 0; text-decoration: none; cursor: pointer; background: var(--color1); z-index: 13; padding: 0; border-radius: var(--borderRadius2); height: 40px; width: 40px; box-sizing: border-box; line-height: 40px; text-align: center;}
.account li.mijnAccount {display: inline-block; position: relative; margin: 0; text-decoration: none; cursor: pointer; background: var(--color1); z-index: 13; padding: 0; border-radius: var(--borderRadius2); height: 40px; width: 40px; box-sizing: border-box; line-height: 40px; text-align: center;}
.account .houder {font-size: 14px; text-align: left; background-color: #f7f7f7; border-radius: var(--borderRadius2); box-shadow: 0 4px 4px rgba(0,0,0,.2); transition: .4s all ease; pointer-events: none; transform: revert-layer;}
.account .houder::before {content: ""; height: 15px; width: 15px; background-color: inherit; display: block; right: 16px; top: -4px; position: absolute; transform: rotate(45deg);}
.account .houder1 .mijnAccount, .account .houder1 .mijnOrders, .account .houder1 .mijnWelkomstPagina {margin: var(--space5) var(--space15); background: #FFF; border: 1px solid var(--borderColor1); font-size: 15px;}
.account .houder1 .mijnAccount a, .account .houder1 .mijnOrders a, .account .houder1 .mijnWelkomstPagina a {padding: var(--space5) var(--space10);}
.account .houder1 .mijnWelkomstPagina a::before {content: "\f7e2"; font-family: "Font Awesome 5 Pro"; font-size: var(--bodyFontSize); margin-right: var(--space10);}
.account .houder1 .mijnAccount a::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; font-size: var(--bodyFontSize); margin-right: var(--space10);}
.account .houder1 .mijnOrders a::before {content: "\f543"; font-family: "Font Awesome 5 Pro"; font-size: var(--bodyFontSize); margin-right: var(--space10);}
.account .accountKop {padding: var(--space20) var(--space20) 0 var(--space20); text-transform: uppercase; letter-spacing: 1px; font-family: var(--fontFamily2);}
.account .welkom {color: #636363; text-align: right; line-height: 1.35em; margin-right: var(--space10); display: none;}
.account .welkom .bericht {color: #e73742; display: block; line-height: 1;}
.account li.favorieten .haakje, .account .mijnAccountKnop .titel, .accountHolder .seperator2, .account li.favorieten, .account .inloggenKnop .titel, .hoverMenu .categorie .kop, .hoverMenu .subTekst {display: none;}
.account .openGeklapt .houder {transform: scale(1); pointer-events: all;}
.account .houder2 {background-image: none; border-radius: 0 0 8px 8px; line-height: normal;}
.account .inloggen .email input, .account .inloggen .wachtwoord input {font-size: 13px; margin: var(--space15) var(--space15) 0; padding-top: var(--space10); padding-bottom: var(--space10); width: calc(100% - 30px);}
.account .inloggen .inlogKnop {padding-top: var(--space15); text-align: center; margin: 0 16px; line-height: normal;}
.account .houder1 .inlogKnop > div {padding: var(--space20);}
.account .houder1 > div a {display: block; color: #666; text-decoration: none; position: relative;}
.account .inloggen .cookie {padding: var(--space20); line-height: normal;}
.account .mijnAccount .houder {width: 400px;}
.inloggen .favorietenKnop, .account .favorietenKnop {display: block; padding: 8px var(--space20); position: relative;}
li.inloggen .inloggenKnop::before {position: relative; content: "\f007"; font-family: "Font Awesome 5 Pro"; font-size: 22px; color: var(--fontColor2);}
.supermenuInhoud.open {box-shadow: 0 25px 70px 14px rgba(0, 0, 0, 0.25);}
.winkelmenu .art-menu li {position: static;}
.winkelmenu .art-menu li .t.hoverMenuActief::after {content: "\f078"; font-family: "Font Awesome 5 Pro"; display: inline-block; margin-left: .25em; font-size: 13px;}
.hoverMenu {right: 0; width: 1200px; border: 1px solid #ddd; box-shadow: 0 50px 50px rgba(0, 0, 0, 0.4); display: grid; grid-template-columns: 380px 1fr; left: revert-layer;}
.hoverMenu .categorie {padding: var(--space40); background: var(--color3); font-size: 16px;}
.hoverMenu .kolommen {padding: var(--space40); display: revert-layer; flex-wrap: revert-layer;}
.hoverMenu .kolommen .kolom {width: 33%; float: left; box-sizing: revert-layer; hyphens: revert-layer; padding: revert-layer;}
.hoverMenu .kolommen .kolom .titel {font-family: var(--fontFamily4); font-size: var(--bodyFontSize); font-weight: bold; margin-bottom: var(--space5);}
.hoverMenu .kolommen .kolom .titel a {display: inline;}
.hoverMenu .kolommen.kolommen5 .kolom {width: 20%;}
.Taalkeuze_vlaggen {max-height: 30px; overflow: hidden; position: absolute; font-size: 16px; text-align: left; top: 48px; transition: .3s all ease; z-index: 12; right: 200px; border-radius: 4px;}
.Taalkeuze_vlaggen ul li, .resMenubalkinhoud.resMenubalkinhoud.resMenubalkinhoud {line-height: 1em;}
.Taalkeuze_vlaggen ul li a {color: var(--fontColor1); text-decoration: none;}
.Taalkeuze_vlaggen ul li a:hover {color: #666;}
.Taalkeuze_vlaggen ul li.actief span {border: none;}
.Taalkeuze_vlaggen ul li.actief span::after {content: "\f078"; padding-left: var(--space10); font-family: "Font Awesome 5 Pro"; font-size: 9px; bottom: 2px; position: relative;}
.Taalkeuze_vlaggen.open ul li span {border-bottom: 1px solid #eeeeee;}
.Taalkeuze_vlaggen ul li .afbeelding {top: 2px;}
.Taalkeuze_vlaggen.dropdownTaal {display: inline-block; margin-bottom: 0; margin-left: var(--space10); margin-top: 0; height: revert-layer; min-width: revert-layer;}
.Taalkeuze_vlaggen.dropdownTaal ul li {background: #FFF; padding: var(--space5) var(--space10); white-space: revert-layer;}
.Taalkeuze_vlaggen.dropdownTaal ul li.actief {border-bottom: 1px solid #eee;}
.Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving::after {padding-bottom: 0; padding-right: var(--space10); padding-top: 0; transition: .3s all ease;}
.Taalkeuze_vlaggen.dropdownTaal.open ul li.actief .omschrijving::after {display: inline-block; transform: rotate(180deg);}
.inloggen_holder {max-width: 700px;}
.inloggen_holder .inloggen_content {background-color: #f2f2f2;}
.inloggen_holder .inloggen_content input {width: 100%; margin-right: 0; margin-bottom: var(--space10);}
a.logo {left: 20px; position: absolute; top: 32px; width: 201px; background-attachment: scroll; background-color: rgba(0,0,0,0); background-image: url(images/logo.svg); background-repeat: no-repeat; background-position: center; background-size: cover; height: 62px; line-height: revert-layer; margin: revert-layer;}
.bovenkantHolder {z-index: 3; border-bottom: revert-layer; border-top: revert-layer;}
.bovenkant {position: relative; height: 128px;}
.uspBar {display: none; padding: 17px; background: #FFF; border-bottom: 1px solid #e8e8e6;}
.uspBar .usp {flex: 1; text-align: center; font-size: 16px; letter-spacing: .28px; color: #00000047; font-family: var(--fontFamily3);}
.uspBar .usp i {color: var(--color2); margin-right: var(--space15); font-size: 26px; vertical-align: middle;}
a.phoneCall {position: absolute; top: 33px; right: 330px; text-decoration: none; color: var(--fontColor1); font-size: 16px;}
a.phoneCall i {color: var(--color1); margin-right: var(--space5);}
a.whatsapp {position: absolute; top: 63px; right: 330px; text-decoration: none; color: var(--fontColor1); font-size: 16px;}
a.whatsapp i {color: var(--color1); margin-right: var(--space5); font-weight: 600; font-size: 20px;}
.socialM {position: fixed; right: 0; z-index: 5; background: #000; border-left: 0;}
.socialM .deelKnopje {display: block; position: relative; padding: var(--space15) var(--space20); line-height: 1; cursor: pointer; color: var(--fontColor2);}
.socialM .deelKnopje:last-child {border-bottom: 0;}
.socialM .deelKnopje i {font-size: 28px; transition: .3s all ease;}
.socialM .deelKnopje span {opacity: 0; pointer-events: none; transition: .3s all ease; position: absolute; top: 11px; white-space: nowrap; margin-left: var(--space20); background: #FFF; padding: 8px; border-radius: var(--borderRadius1); font-size: 13px; color: #514F4F; border: 1px solid var(--borderColor1); font-weight: normal; right: 60px;}
.socialM .deelKnopje:hover span {opacity: 1;}
.resMenubalk {height: 102px; padding: 3px 0 0; position: relative; top: 0; width: 100%; z-index: 100; margin: revert-layer;}
.resMenubalkinhoud {background-color: #fff; top: 0; left: 0; right: 0; z-index: 50; position: fixed; border-bottom: 1px solid #e8e8e6;}
.bovenkantHolder .bovenkant .resMenucategorieknop {white-space: nowrap; background: var(--color2); border-radius: 11px; line-height: normal; padding: 7px var(--space10); box-sizing: border-box; margin-right: var(--space10); margin-top: 1px; color: var(--fontColor2);}
.bovenkantHolder .bovenkant .resMenucategorieknop::before {content: "\f0c9"; font-family: "Font Awesome 5 Pro"; display: inline-block; vertical-align: middle;}
.resMenuHolder {box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.2); position: fixed; bottom: 0; top: 0; padding-top: var(--space80); -webkit-overflow-scrolling: touch; max-width: revert-layer;}
.resMenubloktitel {color: var(--fontColor2); font-size: 16px; padding: var(--space5); text-align: center; background: var(--color2); border-bottom: revert-layer; line-height: revert-layer;}
.resMenubloktitel i {margin-right: var(--space10);}
.resMenublokinhoud .resMenuItem a {padding: var(--space20); font-weight: bold; color: #333; font-size: 21px; text-align: center; text-transform: uppercase; font-family: var(--fontFamily2); letter-spacing: 1px; border-bottom: revert-layer;}
.resMenublokinhoud .resMenuItem.active > a, .hoverMenu .kolommen .kolom a {color: var(--color1);}
.resMenublokinhoud .resMenuItem #respVerlangLijstCode {padding: 7px var(--space10); font-size: 14px; border-bottom: 0; color: #333; border-top: 1px solid #eee;}
.resMenuItem .laag1 a {font-size: 13px;}
.resMenuItem .laag2 a {padding-left: var(--space30);}
.resMenuItemHolder {transition: .6s all ease;}
.resMenublokinhoud.mijnAccount ul {display: flex; flex-wrap: wrap;}
.resMenublokinhoud.mijnAccount ul li {margin: 0;}
.mijnAccount .resMenuItem a {line-height: 1; white-space: nowrap; border-top: 1px solid var(--borderColor1); text-overflow: ellipsis; background: #FFF; font-size: 11px !important; border-left: 1px solid var(--borderColor1); padding: var(--space10) var(--space5) var(--space10) !important; border-bottom: 1px solid var(--borderColor1);}
.mijnAccount .resMenuItem a:hover {opacity: 1; background-color: #fafafa;}
.mijnAccount .resMenuItem a::before {content: "\f08b"; display: block; font-family: "Font Awesome 5 Pro"; font-size: var(--bodyFontSize); margin: 0 0 var(--space10);}
.Taalkeuze_vlaggen.dropdownTaal ul li a {display: revert-layer;}
.account .houder2.houder2 {background-color: #fff; border-top-color: var(--borderColor2);}
.Taalkeuze_vlaggen.dropdownTaal ul {border-radius: revert-layer; max-height: revert-layer; overflow: revert-layer; position: revert-layer; transition: revert-layer;}
.account li:last-child {border-right: revert-layer;}
.account .inloggenKnop {color: revert-layer; text-decoration: revert-layer;}
.hoverMenu .categorie .kop {color: revert-layer; font-size: revert-layer; font-weight: revert-layer; line-height: revert-layer; margin: revert-layer;}
.account .accountKop.accountKop {font-size: var(--bodyFontSize);}
.account .houder .accountKop {font-style: revert-layer; line-height: revert-layer; margin: revert-layer;}
html.noscroll body {height: 100% !important;}
.resMenublokinhoud ul {line-height: inherit;}
.account .inloggen .inlogKnop .wachtwoordKwijt, .hoverMenu .categorie .aankeiler {line-height: revert-layer;}
.account .houder1 .inlogKnop.inlogKnop > div {margin-left: auto;}
.bovenkantHolder .bovenkant {min-height: revert-layer;}
.account .houder1.houder1 {padding: 0;}
.account .houder.houder {top: 48px;}
.bovenkantHolder .bovenkant .resMenubalkinhoud {white-space: revert-layer;}
.resMenuHolder::-webkit-scrollbar {display: revert-layer;}
.Taalkeuze_vlaggen ul li.actief .afbeelding::before {content: revert-layer;}
/* mobiel: accountknoppen als twee helften, carrousel met minder tegels (netter dan de oude site) */
.resMenublokinhoud.mijnAccount ul > li {flex: 1 1 0; width: auto;}
.resMenublokinhoud.mijnAccount ul > li > a {width: auto; overflow: visible; text-align: center;}
.resMenuItem > .openklapper {top: 17px;}

/* zoeken */
.zoeken {display: table; position: absolute; top: 40px; left: 300px; background-color: revert-layer; border: revert-layer; border-radius: revert-layer; min-width: revert-layer;}
.zoeken .veld {display: table-cell; position: relative; border-radius: 27px 0 0 27px;}
.zoeken .veld #zoekWoordID {padding: var(--space15) var(--space20); font-size: 17px; border-radius: 0; margin: 0; width: 450px; line-height: 1.1em; background-color: var(--color3); color: #bfc0c2;}
.zoeken .knop {display: table-cell; color: var(--fontColor2); position: relative; padding: var(--space5) 12px; transition: all .3s ease; cursor: pointer; z-index: 10; background-color: var(--color1); border-radius: 0 27px 27px 0; line-height: revert-layer; margin: revert-layer;}
.zoeken .knop:hover {color: var(--color2);}
#speedsearchResult {clear: both; top: 60px; left: -280px; right: -500px;}
#speedsearchResult .houder {overflow: hidden; box-shadow: 0 24px 120px -10px rgba(0,0,0,.3); border-radius: var(--borderRadius2); display: flex; border: revert-layer; font-size: revert-layer; line-height: revert-layer; max-height: revert-layer; width: revert-layer;}
.speedSearch {padding: 0; background-image: none;}
.speedSearch ul {z-index: 100; max-height: calc(100vh - 240px); overflow-y: auto;}
.speedSearch.algemeen, .speedSearch.artikelen, .speedSearch.categorie {border-right: 1px dashed #eee; box-sizing: border-box; background-color: #fff; flex-grow: 1; flex-basis: 0;}
.speedSearch > ul > li {color: #383838; position: relative; border-radius: var(--borderRadius1); border: 1px solid #fff;}
.speedSearch > ul > li a {color: inherit; transition: all .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.speedSearch > ul > li:hover {background-color: #f7f7f7; border-color: #ddd;}
.speedSearch ul li a strong {text-decoration: underline;}
.speedSearch ul li .thumbnail {height: 50px; width: 50px; margin-left: var(--space10); text-align: center; overflow: hidden; background: #fff; position: relative; padding: 7px; border-radius: var(--borderRadius1);}
.speedSearch ul li .thumbnail img {height: auto; border-radius: var(--borderRadius1); position: absolute; margin: auto;}
.speedSearch ul li .omschrijving {font-size: 15px; font-weight: normal; white-space: normal; text-overflow: ellipsis; overflow: hidden; line-height: 1.35em;}
.speedSearch ul li .artikelNr {line-height: 1.5em;}
.speedSearch .resultaat {margin: 0; position: relative; color: var(--fontColor1); font-size: var(--bodyFontSize); font-weight: bold; text-transform: uppercase; font-family: var(--fontFamily2);}
.speedSearch .resultaat a.knopAlles {background-color: #383838; color: var(--fontColor2); border-radius: var(--borderRadius1); bottom: 12px; font-size: 12px; font-weight: normal; padding: 3px var(--space10); position: absolute; right: 10px; display: none;}
.speedSearch .resultaat .aantal {font-size: 24px; display: inline-block; margin: 0 3px 0 0; color: inherit;}
#speedsearchResult .knopAllesOnder, .speedsearchLoader {display: none;}
.speedsearchLoader i {color: #383838;}
#speedsearchResult .houder .speedSearch ul li a {background-color: revert-layer; background-image: revert-layer; border: revert-layer;}
#speedsearchResult .knopAllesOnder.knopAllesOnder.knopAllesOnder a {background-color: var(--color1);}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {float: revert-layer;}
#speedsearchResult .knopAllesOnder.knopAllesOnder a {font-weight: normal; padding: var(--space15);}
#speedsearchResult .speedSearch.speedSearch.speedSearch > ul > li {margin-bottom: 0;}
#speedsearchResult .speedSearch.speedSearch > ul > li {margin-left: 0; margin-right: 0;}
#speedsearchResult .speedSearch.speedSearch > ul > li a {padding: var(--space10);}
#speedsearchResult .houder .speedSearch ul li a strong {border-bottom: revert-layer; display: revert-layer; line-height: revert-layer; position: revert-layer;}
#speedsearchResult .speedSearch ul li .thumbnail.thumbnail.thumbnail img {bottom: -50%; left: -50%; right: -50%; top: -50%; width: 50px !important;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {color: revert-layer;}
#speedsearchResult .speedSearch ul li .thumbnail.thumbnail.thumbnail {float: right;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {margin-right: revert-layer;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {max-height: revert-layer; max-width: revert-layer;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .nummer {text-transform: revert-layer;}
#speedsearchResult .houder .knopAllesOnder {width: revert-layer;}
#speedsearchResult .houder .speedSearch ul li a::after, #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail::after {content: revert-layer;}

/* bouwblokken */
ul.check.blokken {display: flex; gap: var(--space15);}
ul.check.blokken li {background: #F4F2ED; padding: var(--space15); flex: 1; text-align: center; box-sizing: border-box; color: var(--fontColor1); font-size: 16px; line-height: 1.5em;}
ul.check.blokken li::before {color: var(--fontColor1); position: relative;}
.cookieMelding .inhoud .sluiten {background-color: var(--color2);}
.privacyMelding .inhoud .titel {color: #f39204; font-family: var(--fontFamily4); font-size: 20px;}
.privacyMelding .inhoud .titel::before {font-weight: bold;}
.privacyMelding .inhoud .tekstblok {font-size: 15px; line-height: 2em;}
.vak.groen {background-color: var(--color1); overflow: hidden;}
.vak.grijs {background-color: #eeeeee;}
.vak.groen .inhoud, .vak.groen .inhoud h2, .vak.groen .inhoud h5, .vak.groen.profiteer h1 {color: var(--fontColor2);}
.vak.groen .inhoud h3 {color: var(--fontColor2); font-size: 22px; max-width: 260px; margin-right: auto; margin-bottom: 0; margin-left: auto; letter-spacing: .38px;}
.vak .inhoud {max-width: 1300px; padding: 70px var(--space20);}
.vak .inhoud .tekstKop, .vak .inhoud .tekstKop h2.streepje {margin-bottom: var(--space30);}
.vak .inhoud .tekstKop h2 {font-size: 50px; margin-bottom: 0;}
.vak.groen.hulpBestellen {overflow: unset;}
.vak.groen.hulpBestellen::before, .vak.groen.vakkundig::before {content: ""; background: url(images/orangeDots.svg) left top / contain no-repeat; position: absolute; display: block; width: 100%; height: 639px; bottom: 0;}
.vak.groen.hulpBestellen .inhoud {padding: 0 !important; display: flex;}
.vak.groen.hulpBestellen .inhoud .tekst {flex: 2; padding: 70px var(--space20);}
.vak.groen.hulpBestellen .inhoud .tekst .of {margin: 0 var(--space20);}
.vak.groen.profiteer::after {content: ""; background: url(images/dots.svg) center bottom / contain no-repeat; position: absolute; display: block; bottom: -50%; width: 100%; height: 369px;}
.max700 {max-width: 700px !important;}
.FCK2kol.kennis td.FCK2kolTd.tekst {width: 60%;}

/* lijstmodules */
.kenmerkMobielHouder.accordion .filters .kenmerkgroep.open .kenmerken {height: 0; opacity: 0; padding: 0;}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep.open {position: relative;}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep.open .kenmerken {opacity: 0;}
.kenmerkMobielHouder.standaard .filters.open, .mijnAccountOrderHolder .item a.link {display: block;}
table.lijst tr td.knoppenHouder .knoppen.metTekst > a.uit {color: var(--color1);}
.kenmerkgroepKeuze.tags .artikel {padding: 8px; min-width: 26px; font-weight: normal; color: #41ae28; transition: all 0.3s ease; font-size: 15px; text-align: center;}
.adresHolder .adressen .item {border-color: var(--borderColor1); border-width: 1px; background: #fff; border-radius: var(--borderRadius2);}
.adresHolder .adressen .item.default {border-color: var(--color1) !important;}
.adresHolder .adressen .item.default:before, .adresHolder .adressen .item.default .defaultTekst {background-color: var(--color1);}
.adresHolder .adressen .item .adresRow .knoppen a {font-size: 14px;}
.adresHolder .adressen .item .adresRow .knoppen a i {margin-right: var(--space10);}
.adresHolder .adressen .item.open {z-index: 100; box-shadow: 0 0px 50px -8px rgba(0,0,0,.25);}
.mijnAccountOrderHolder .item .inhoud .omschrijving {font-family: var(--fontFamily4);}
.mijnAccountOrderHolder .item .artikelen {margin: auto 0 auto auto;}
.mijnAccountOrderHolder .item .artikelen .afbeeldingHouder {margin-bottom: var(--space5); margin-top: var(--space5);}
.mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .meeraantal {background-color: #365276;}
.filters {position: relative; background: #FFF; -webkit-user-select: revert-layer;}
.filters .kenmerkgroep a.titel {font-size: 19px; font-family: var(--fontFamily3); letter-spacing: 1.38px; color: var(--fontColor1); font-weight: revert-layer; line-height: revert-layer;}
.filters .kenmerkgroep .kenmerken {padding-left: 0; padding-right: 0; z-index: 10; height: auto;}
.filters .kenmerkgroep.open .kenmerken {height: 0; opacity: 0;}
.filters ul.kenmerken {transition: .3s all ease;}
.filters ul.kenmerken.open {max-height: 650px; overflow: hidden;}
.filters .tonen {font-size: 14px; z-index: 100; position: relative; margin: var(--space10) 0 0; color: var(--fontColor1); font-weight: 500; cursor: pointer; transition: .3s all ease;}
.filters .tonen:hover {color: #75cf32; text-decoration: none;}
.filters .filterCheck label {letter-spacing: 1.16px; font-size: 15px;}
.filters .filterCheck label .aantal {min-width: 10px; padding: 3px 6px; text-align: center; vertical-align: baseline;}
.filters .filterCheck label.nietBeschikbaar {cursor: default;}
.filters .toelichting {float: left; margin-left: var(--space5); color: revert-layer; font-size: revert-layer; font-weight: revert-layer; margin-bottom: revert-layer; margin-right: revert-layer; margin-top: revert-layer;}
.faqHolder.actief .titel a {color: var(--color2);}
.vak.groen.profiteer .FCK2kol.kennis td.FCK2kolTd.lijst li {color: var(--fontColor2);}
.FCK2kol.kennis td.FCK2kolTd.lijst {width: 34%;}
.filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"] {position: revert-layer; top: revert-layer;}
:where(html:has(#lijstId8, #lijstId13)) .filters .kenmerkgroep .kenmerken .kenmerk.kenmerk {background-color: #f7f7f7;}
.kenmerkgroepKeuze .artikel.actief a.link, .kenmerkgroepKeuze .artikel.bestaatNiet {cursor: revert-layer;}
.filters .kenmerkgroep .kenmerken .kenmerk {margin: revert-layer;}
.kenmerkgroepKeuze .artikel.bestaatNiet a.link {pointer-events: revert-layer;}
.filters .filterCheck label .aantal.aantal {color: #8F8F8F; margin-top: 4px;}
.filters .beschikbaar {font-size: revert-layer; font-weight: revert-layer; margin: revert-layer;}
.filters .kenmerkgroep .kenmerken label .aantal {font-size: revert-layer;}
.filters ul.kenmerken.kenmerken {margin-left: 0; margin-right: 0;}
.filters .kenmerkgroep .kenmerken label .aantal::after, .filters .kenmerkgroep .kenmerken label .aantal::before {content: revert-layer;}

/* sliders */
.productCarousel .flickity-button, .liquid-slide-sjabloon a.knop:empty {display: none;}
.productCarousel.flickity-resize .artikel {padding: 0;}
.liquid-slide-sjabloon .inhoud h1,
.liquid-slide-sjabloon .inhoud h2 {text-shadow: 0 1px 5px rgba(0,0,0,.5); font-size: 70px; line-height: 1.15em; color: #FFF;}
.liquid-slide-sjabloon .sliderWrapper {max-width: var(--maxWidth);}
.liquid-slide-sjabloon .inhoud {top: 25%; max-width: 850px; line-height: 1.85em; background-color: revert-layer; background-image: revert-layer; bottom: revert-layer;}
.liquid-slide-sjabloon .plaatje::before {content: ""; background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-image: url(images/groenRadius.svg); position: absolute; bottom: -1px; right: 0; background-size: contain; left: 0; background-repeat: no-repeat; opacity: 1; height: 173px; background-position: bottom center; z-index: 1;}
.liquid-slide-sjabloon .plaatje::after {content: ""; background: url(images/orangeCirkel.svg) left bottom / contain no-repeat; position: absolute; display: block; width: 100%; height: 950px; bottom: 0;}
.liquid-slide-sjabloon .plaatje .witteDots {content: ""; background: url(images/witteDots.svg) right top / contain no-repeat; position: absolute; display: block; width: 100%; height: 800px; top: 0;}
.liquid-slide-sjabloon .inhoud h5 {margin-top: -.7em; color: var(--fontColor2); font-size: 40px; font-family: var(--fontFamily3); text-shadow: 0 1px 5px rgba(0,0,0,.5);}
.liquid-slide-sjabloon a.knop.wit {box-shadow: 0 1px 5px rgba(0,0,0,.5);}
.scrollTo {background: url(images/scroll-down.svg) center center / 25px no-repeat; position: absolute; width: 100%; height: 63px; bottom: 3%; z-index: 1; cursor: pointer;}

/* webshop */
.shopHeader {background: var(--color3); padding: var(--space20) var(--space40); border-radius: var(--borderRadius3); max-height: 38px; overflow: hidden; font-size: 16px; line-height: 1.65em; cursor: pointer; position: relative; transition: all .3s ease; margin: var(--space30) 0;}
.shopHeader.open {max-height: 100vh; overflow-y: auto; padding-top: var(--space30); padding-bottom: var(--space30);}
.shopHeader::before {content: "\f078"; font-family: "Font Awesome 5 Pro"; font-size: 24px; color: var(--color1); position: absolute; right: 30px; top: 40px; transform: translateY(-50%); transition: transform 0.3s ease; z-index: 1;}
.shopHeader.open::before {transform: translateY(-50%) rotate(180deg);}
.shopHeader p:last-child, .shopFooter p:last-child, .shopCategorieHolder .categorie .titel .h2 {margin-bottom: 0;}
.shopHeader h1 {font-size: 34px; color: var(--color1);}
.shopHeader h2 {font-size: 24px;}
.shopHeader ul.check li {margin-bottom: .2em; color: var(--color1);}
.shopSortOptie {display: none; text-align: right; border: revert-layer; border-radius: revert-layer; margin: revert-layer; padding: revert-layer;}
.shopFooter {background: var(--color3); padding: var(--space20) var(--space25); border-radius: var(--borderRadius1);}
.presentatieWijze {display: inline-block; vertical-align: middle; padding: 0; border-radius: 4px; overflow: hidden; background-color: revert-layer; background-image: revert-layer; border: revert-layer; box-sizing: revert-layer;}
.presentatieWijze a {display: inline-block; line-height: 1.5em; border-right: revert-layer; padding: var(--space5) !important; position: revert-layer; width: revert-layer !important;}
.shopCategorieHolder {grid-gap: 20px; grid-template-columns: repeat(auto-fill,minmax(min(360px,100%),1fr));}
.shopCategorieHolder .categorie {display: grid; grid-gap: 15px; grid-template-columns: 100px 1fr; padding: var(--space15); transition: all .3s ease; box-shadow: 0 0px 15px 0 rgba(0,0,0,0.11); background: #fff; border: revert-layer; box-sizing: revert-layer;}
.shopCategorieHolder .categorie a {z-index: 100; background: url("images/spacer.gif"); overflow: revert-layer;}
.shopCategorieHolder .categorie .titel {margin: auto 0; line-height: normal; padding: revert-layer; position: revert-layer; text-align: revert-layer;}
.shopCategorieHolder .categorie .titel .subtitel {color: #777;}
.shopCategorieHolder .afbeeldingHouder {width: 100px;}
.artikel .afbeeldingHouder img {border-radius: 5px; object-fit: revert-layer;}
.artikel .labels {z-index: 3; font-size: revert-layer; line-height: revert-layer;}
.artikel .artikelnr > .titel {padding-right: 0.3em; margin-right: revert-layer;}
.artikel .voorraad .status .toelichting.positief::before {color: var(--color1);}
.artikel .prijzen {margin: 0 0 var(--space10);}
.artikel .favorieten {clear: both; font-size: 13px; margin-bottom: 0; margin-top: 0.25em; z-index: 2;}
.shopLijst .artikel {border-color: #eee; padding: var(--space20);}
.shopLijst .artikel > a, .shopCompact .artikel a.link {z-index: 0;}
.shopLijst .artikel .inner, .shopCompact, .formuleHolder .bestellen .bestelknop, .formuleHolder .bestellen .bestelknop .button, .artikel .afbeeldingHouder.afbeeldingHouder {width: 100%;}
.shopLijst .artikel .omschrijving h2.titel a {font-size: 20px;}
.shopLijst .artikel .prijzen {font-size: var(--bodyFontSize); line-height: 1.5em;}
.shopLijst .artikel .prijzen .btwinfo {color: #999; font-size: 15px; font-weight: revert-layer; line-height: revert-layer; white-space: revert-layer;}
.shopLijst .artikel .bestellen, .shopTegel .artikel .favorieten .image {padding: 0;}
.shopLijst .artikel .meerinfo {line-height: 1.5em; color: #aaa;}
.shopLijst .artikel .bestelknop input {display: table-cell; margin-bottom: 0; margin-left: 0; margin-top: 0; width: 60px; height: 35px; border-radius: var(--borderRadius2) !important;}
.shopLijst .artikel .bestelknop .button {display: table-cell; margin: 0; border-radius: var(--borderRadius2); text-align: center; width: 33px; height: 33px; overflow: hidden; border-color: var(--color1); padding: 0 var(--space5);}
.shopTegel {grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space20);}
.shopTegel .artikel {width: 100%; transition: all .3s ease; padding: var(--space25); border-radius: 12px; background: #fff; flex-direction: column; border: 2px solid #eee; box-shadow: 0 0px 0px 0 rgba(0,0,0,0); box-sizing: border-box; overflow: hidden;}
.shopTegel .artikel .favorieten {display: block; position: absolute; right: 0; top: 0; z-index: 2; margin: 0; font-size: 15px; line-height: 1; padding: var(--space15); color: #ddd; transition: .3s all ease;}
.shopTegel .artikel .favorieten.aan a {color: #3c5273;}
.shopTegel .artikel .omschrijving h2.titel {line-height: 1.45em; font-size: var(--bodyFontSize); -webkit-box-orient: revert-layer; -webkit-line-clamp: revert-layer;}
.shopTegel .artikel .omschrijving h2.titel a {font-size: var(--bodyFontSize); margin-bottom: 0; font-family: var(--fontFamily3); font-weight: bold;}
.shopTegel .artikel .meerinfo {margin-bottom: var(--space10); font-size: 80%; line-height: 1.35em;}
.shopTegel .artikel .prijzen {margin-bottom: 0; line-height: 1.1em;}
.shopTegel .artikel .prijzen .btwinfo, .shopTegel .artikel .prijzen .vanaf {display: block; font-size: 13px; color: #999;}
.shopTegel .artikel .bestellen {display: flex;}
.shopTegel .artikel .bestellen .bestelknop {display: flex; margin-left: auto;}
.shopTegel .artikel .bestellen .bestelknop input {width: 65px; border-radius: var(--borderRadius2) 0 0 var(--borderRadius2) !important; margin-bottom: revert-layer; margin-left: revert-layer; margin-top: revert-layer;}
.shopTegel .artikel .bestellen .bestelknop a.wButBestel {display: block; overflow: hidden; border-top-right-radius: var(--borderRadius2); border-bottom-right-radius: var(--borderRadius2); border-color: var(--color1); color: transparent; padding: 23px var(--space25); background-image: url(images/shoppingCart.svg); background-size: 22px; background-repeat: no-repeat; background-position: center; box-sizing: border-box; width: revert-layer;}
.shopTegel .artikel .bestellen .bestelknop a.wButBestel.knopMoederArtikel, .shopTegel .artikel .bestellen .bestelknop a.wButBestel.knopFomuleConfig {border-radius: var(--borderRadius2);}
.shopTegel .artikel .inner .artikelBestelEenheid {font-size: 15px; color: #999; text-align: right; margin-bottom: var(--space5);}
.shopCompact .artikel {hyphens: auto; padding: revert-layer;}
.shopCompact .artikel > div {vertical-align: middle; position: relative;}
.shopCompact .artikel .artikelnr {font-size: 11px;}
.shopCompact .artikel .prijzen {margin: 0;}
.shopCompact .artikel .bestellen input {height: auto; padding: 4px; margin: 0; width: 34px; border-radius: var(--borderRadius1) 0 0 var(--borderRadius1) !important;}
.shopCompact .artikel .bestellen a.wButBestel {border-top-right-radius: var(--borderRadius1); border-bottom-right-radius: var(--borderRadius1); box-sizing: border-box; padding: 6px 6px; width: 50%; text-align: center;}
.shopCompact .artikel .bestellen a.wButBestel::before {content: "+";}
.artikel.bestaatNiet {pointer-events: none;}
.productCarousel .artikel {width: calc(20% - 12px); transition: none !important;}
.productCarousel .artikel .inner .toelichting.positief {color: var(--fontColor1);}
.productCarousel .artikel .inner .omschrijving {margin-bottom: var(--space15);}
.formuleHolder .titel {font-family: var(--fontFamily2); padding: var(--space10) 0;}
.formuleHolder .content {background-image: none; border-radius: 5px 5px 0 0;}
.formuleHolder .formuleInputVeldHolder {padding-bottom: var(--space10); border-bottom: 1px solid #ccc;}
.formuleHolder label {font-family: var(--fontFamily2);}
.formuleHolder .formuleInputVeld, .formuleHolder .formuleMeerprijs {display: flex; align-items: center;}
.formuleHolder .totaalFormuleVariatiePrijs {display: flex; align-items: center; border-top: 1px solid #ccc; margin-top: var(--space5); padding-top: var(--space5); font-family: var(--fontFamily2);}
.formuleHolder .formuleMeerprijs .prijs, .formuleHolder .totaalFormuleVariatiePrijs .prijs {margin-left: auto;}
.formuleHolder .formuleInputVeld input {width: 100px; text-align: right; margin-left: auto;}
.formuleHolder .bestellen {display: flex; padding-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;}
.blader_holder {margin-top: var(--space10); border-top: revert-layer; padding: revert-layer;}
.blader_tabel1 tr td {line-height: 1.25em; padding-right: 0; padding-left: 0; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-top: 1px solid #eaeaea; border-left: 0; width: 1.75em; height: 1.75em; font-size: 15px; font-weight: bold; text-align: center; transition: all 0.3s ease 0s;}
.blader_tabel1 tr td:hover {background: #eaeaea;}
.blader_tabel1 tr td:nth-child(2) {border-left: 1px solid #eaeaea;}
.blader_tabel1_n {border-radius: 0; border: revert-layer; font-size: revert-layer; font-weight: revert-layer; height: revert-layer; width: revert-layer; background-color: revert-layer;}
.blader_tabel1_s {border-radius: 0; background-color: var(--color2); border-color: var(--color2); border-style: revert-layer; border-width: revert-layer; font-size: revert-layer; font-weight: revert-layer; height: revert-layer; width: revert-layer;}
.blader_tabel1 img {width: 12px; vertical-align: middle;}
.artikel .aantalMinPlus > * {background-image: revert-layer; display: revert-layer; margin: revert-layer; border-bottom: revert-layer; border-radius: revert-layer !important; border-top: revert-layer; box-sizing: revert-layer; color: revert-layer; line-height: revert-layer; padding: revert-layer; text-align: revert-layer; transition: revert-layer; background-color: revert-layer;}
.artikel .aantalMinPlus > input:focus {border-bottom-color: var(--color2); border-top-color: var(--color2);}
.artikel .aantalMinPlus input, .artikel .aantalMinPlus .min, .artikel .aantalMinPlus .plus {min-width: revert-layer;}
.artikel .aantalMinPlus .min:hover, .artikel .aantalMinPlus .plus:hover {background-color: revert-layer; background-image: revert-layer; cursor: revert-layer;}
.artikel .bestellen .bestelknop a.wButBestel {background-image: revert-layer;}
.blader_tabel1_n:hover {background-color: revert-layer; background-image: revert-layer; border-color: revert-layer;}
.presentatieWijze a .titel {background-color: revert-layer; background-image: revert-layer; border-radius: revert-layer; bottom: revert-layer; box-sizing: revert-layer; color: revert-layer; font-size: revert-layer; left: revert-layer; line-height: revert-layer; padding: revert-layer; pointer-events: revert-layer; position: revert-layer; text-align: revert-layer; transform: revert-layer; transform-origin: revert-layer; transition: revert-layer; white-space: revert-layer; opacity: revert-layer;}
.shopSortOptie a.actief {background-color: revert-layer; background-image: revert-layer;}
.shopTegel .artikel .inner {background-color: revert-layer; background-image: revert-layer; border: revert-layer; box-sizing: revert-layer; display: revert-layer; flex-direction: revert-layer; height: revert-layer; padding: revert-layer; position: revert-layer; transition: revert-layer; width: revert-layer;}
.shopLijst .artikel .bestelknop .button.button {background-image: url(images/shoppingCart.svg); background-position-x: center; background-position-y: center; background-repeat: no-repeat; background-size: 22px; color: transparent;}
.presentatieWijze a:last-child {border-right: revert-layer;}
.shopTegel .artikel .inner:hover {box-shadow: revert-layer;}
.blader_tabel1_n.blader_tabel1_n a {color: #737373;}
.artikel .aantalMinPlus .inactive {color: revert-layer; pointer-events: revert-layer; cursor: revert-layer;}
.presentatieWijze a:hover .titel {opacity: revert-layer;}
.blader_tabel1 td {vertical-align: revert-layer;}
.artikel .bestellen .bestelknop > .knopFomuleConfig {width: revert-layer !important;}
.presentatieWijze.presentatieWijze a {color: #666 !important;}
.shopSortOptie a:visited {text-decoration: underline;}
.artikel .aantalMinPlus {background-color: revert-layer; background-image: revert-layer; border: revert-layer; border-radius: revert-layer; grid-template-columns: revert-layer; margin-right: revert-layer; max-width: revert-layer;}
.formuleHolder .content.content {background-color: #eee; padding: var(--space25) var(--space25) var(--space15);}
.artikel .labels .label {background-color: revert-layer; border-radius: revert-layer; margin: revert-layer; padding: revert-layer;}
.shopCompact .artikel:first-child {border-top: revert-layer;}
.artikel .artikelnr {color: revert-layer; font-size: revert-layer;}
.formuleHolder > .titel {color: revert-layer; font-size: revert-layer; font-style: revert-layer; font-weight: revert-layer; line-height: revert-layer; margin: revert-layer; text-decoration: revert-layer;}
.shopLijst .artikel .prijzen .artikelEenheid {color: revert-layer; font-size: revert-layer; font-weight: revert-layer; line-height: revert-layer; white-space: revert-layer;}
.artikel .bestellen .bestelknop, .formuleHolder .formuleInputVeldHolder, .formuleHolder.reset > .titel {display: revert-layer;}
.shopLijst .artikel .inner .inhoud, .blader_tabel1, .formuleHolder .formuleInputVeldHolder .formuleInputVeld, .shopLijst .artikel .prijzen {width: revert-layer;}
.shopTegel .artikel .inner .rechtsboven {display: revert-layer; line-height: revert-layer; position: revert-layer; right: revert-layer; top: revert-layer;}
.shopLijst .artikel .prijzen .prijs {font-size: revert-layer;}
.formuleHolder.formuleHolder {margin-bottom: var(--space20);}
.artikel .aantalMinPlus > * > i, .artikel .voorraad, .presentatieWijze a .icon, .shopCompact .artikel .artikelnr, .shopCompact .artikel .omschrijving, .shopLijst .artikel .bestellen, .shopTegel .artikel .bestellen {margin: revert-layer;}
.shopCompact .artikel .bestellen {margin: revert-layer; min-width: revert-layer; width: revert-layer; z-index: revert-layer;}
.artikel .relatieBtwPrijs .exBtwToelichting {margin-left: revert-layer;}
.formuleHolder.reset {margin-left: revert-layer; margin-right: revert-layer; margin-top: revert-layer;}
.formuleHolder .formuleInputVeldHolder .formuleInputVeld:nth-child(1) {margin-right: revert-layer;}
.presentatieWijze a .titel::before {content: revert-layer;}
.productCarousel .artikel .inner {background: #fff; padding: var(--space15);}
.presentatieWijze.presentatieWijze.presentatieWijze a:hover {color: var(--color2) !important;}
.shopLijst .artikel .bestelknop {border-spacing: 0; position: relative; display: inline-table;}
.shopLijst .artikel .bestelknop .button.button.button.button, .shopTegel .artikel .bestellen .bestelknop a.wButBestel.wButBestel {background-color: var(--color1);}
/* leeg formuleblok verbergen, zoals de oude templates deden */
.shopLijst .artikel .bestelknop .button span, .shopTegel .artikel .favorieten .toelichting, .shopTegel .artikel .bestellen .bestelknop a.wButBestel span, .shopCompact .artikel .bestellen a.wButBestel span, .shopCompact .artikel .favorieten, .shopCompact .artikel .artikelEenheid, .blader_tabel1 tr td:first-child, .blader_tabel1 tr td:last-child, .presentatieWijze .titel.titel, .formuleHolder:not(:has(.content > *)), .shopTegel .artikel .omschrijving .artikelnr, .shopTegel .artikel .prijzen .artikelEenheid, .shopTegel .artikel .prijzen .artikelBestelEenheid, .shopTegel .artikel .prijzen .artikelGroepPrijs, .shopTegel .artikel .bestellen .detailKnop {display: none;}
/* geen -/+ stepper, alleen het invoerveld; !important tegen de resets op .artikel .aantalMinPlus */
.aantalMinPlus {display: contents !important;}
.aantalMinPlus > .min, .aantalMinPlus > .plus {display: none !important;}
/* tegel: zonder de .inner-laag zet het raster prijs en bestelknop naast elkaar, zoals de oude wrapper */
.shopTegel:not(.productCarousel) .artikel {display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; column-gap: var(--space10);}
.shopTegel:not(.productCarousel) .artikel > .inner, .shopHolder .shopCompact .artikel > .omschrijving {display: contents;}
.shopTegel:not(.productCarousel) .artikel > .inner > * {grid-column: 1 / -1;}
.shopTegel:not(.productCarousel) .artikel .inner .omschrijving {margin-bottom: var(--space10);}
.shopTegel:not(.productCarousel) .artikel > .inner > .meerinfo {align-self: end;}
.shopTegel:not(.productCarousel) .artikel > .inner > .prijzen {grid-column: 1; grid-row: 4; align-self: center;}
.shopTegel:not(.productCarousel) .artikel > .inner > .bestellen {grid-column: 2; grid-row: 4; align-self: center;}
.shopTegel .artikel > .inner > a.link {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; text-indent: -9999px; background: #fff; mix-blend-mode: multiply; transition: all .3s ease;}
.shopTegel .artikel:hover > .inner > a.link {background: var(--color3);}
.productCarousel .artikel .prijzen, .productCarousel .artikel > .inner > a.link, .shopHolder .shopCompact .artikel .artikelBestelEenheid, .shopHolder .shopCompact .artikel > .omschrijving > .prijzen:not(:has(.content > *)) {display: none;}
/* compacte weergave: subgrid in plaats van de oude tabel, artikelnummer onder de titel, btw onder de prijs */
.shopHolder .shopCompact {display: grid; grid-template-columns: 40px 1fr auto 90px;}
.shopHolder .shopCompact .artikel {display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; border-bottom: 1px solid #ddd;}
.shopHolder .shopCompact .artikel > div, .shopHolder .shopCompact .artikel > .omschrijving > * {grid-column: 2; border-bottom: 0; padding: 0 var(--space5);}
.shopHolder .shopCompact .artikel > div {display: block;}
.shopHolder .shopCompact .artikel > .afbeeldingHouder {grid-column: 1; grid-row: 1 / span 2; align-self: center; min-width: 0; margin: 0; padding: var(--space5);}
.shopHolder .shopCompact .artikel > .omschrijving > h2.titel {grid-row: 1; align-self: end; padding-top: var(--space5);}
.shopHolder .shopCompact .artikel > .artikelnr {grid-row: 2; align-self: start; padding-bottom: var(--space5);}
.shopHolder .shopCompact .artikel > .prijzen {grid-column: 3; grid-row: 1; align-self: end; padding-top: var(--space5); white-space: nowrap;}
.shopHolder .shopCompact .artikel > .omschrijving > .btwinfo {grid-column: 3; grid-row: 2; align-self: start; text-align: right; padding-bottom: var(--space5);}
.shopHolder .shopCompact .artikel > .bestellen {grid-column: 4; grid-row: 1 / span 2; align-self: center; padding: var(--space5);}
.shopHolder .shopCompact .artikel > .artikelnr, .shopHolder .shopCompact .artikel > .omschrijving > .btwinfo {line-height: 22.5px;}

/* artikeldetail */
.artikel.detail .links {float: left; width: 50%;}
.artikel.detail .rechts {float: right; width: 45%; padding-left: var(--space20); position: sticky; top: 40px;}
.artikel.detail h1 {font-size: 35px; margin-bottom: .5em;}
.artikel.detail .artikelEenheid {display: none;}
.artikel.detail .bestelknop {position: relative; border-spacing: 0; display: inline-table;}
.artikel.detail .bestellen .bestelknop input {display: table-cell; vertical-align: middle; border-radius: var(--borderRadius2); height: 54px; position: relative; margin: 0 var(--space20) 0 0;}
.artikel.detail .bestellen .bestelknop .wButBestel {display: table-cell; vertical-align: middle; padding-right: 14px; padding-left: 14px; text-align: center; background-image: none; border-radius: var(--borderRadius2);}
.artikel.detail .bestellen .bestelknop .wButBestel::before {content: ""; position: relative; line-height: 1; width: 24px; height: 19px; background-image: url(images/shoppingCart.svg); z-index: 1; background-repeat: no-repeat; display: inline-block; background-size: contain; top: 2px; font-family: revert-layer; font-weight: revert-layer; margin-bottom: revert-layer; margin-left: revert-layer; margin-top: revert-layer;}
.artikel.detail .bestellen {padding: var(--space20); background: #eee; border-radius: 5px;}
.artikel.detail .rechts .omschrijving .artikelnr {color: var(--color2); font-size: 14px;}
#tabArtikelOmschrijvingInhoud > .tabExtra.lang {overflow: hidden; max-height: 200px; transition: 1s all ease;}
#tabArtikelOmschrijvingInhoud > .tabExtra.open {max-height: none; overflow: auto;}
#tabArtikelOmschrijvingInhoud .meeromschrijving {background: #fff; box-shadow: 0 0 60px 40px #fff; z-index: 1; display: block; padding: 0; overflow: visible; position: relative; cursor: pointer;}
a.knop.verderlezen {padding: 2px var(--space15); text-transform: inherit; border-radius: 5px; letter-spacing: 0; margin-top: var(--space15);}
.thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: var(--color2);}
.tabsV2 .titels > div.actief {border-top-color: var(--color2);}
.tabsV2 .inhoud > div.actief {display: block;}
.formuleHolder .fruit-totaalAantalM2, .formuleHolder .fruit-prijsPerM2 {display: flex; align-items: center;}
.formuleHolder .fruit-totaalAantalM2 #totaalAantalM2, .formuleHolder .fruit-prijsPerM2 #prijsPerM2 {margin-left: auto;}
.vak.meebestellen .inhoud h2.kopTekst {text-align: center; font-size: 28px; letter-spacing: 2.04px; font-family: var(--fontFamily1); color: var(--color2);}
.artikel.detail .dochters {margin: var(--space10) 0;}
.artikel.detail .bestellen .bestelknop.bestelknop input {width: 55px !important;}
.volledigGallery .carousel-cell-groot img {object-fit: revert-layer;}
.formuleHolder .bestellen .bestelknop {display: flex;}
.artikel.detail .bestellen .bestelknop .wButBestel.wButBestel.wButBestel {background-color: var(--color1);}

/* winkelmand en kassa */
.kassaArtikelen .artikel.nietMeerLeverbaar > td:first-child, .kassaArtikel.kassaArtikel td {padding-left: 0;}
.kassaArtikelen .artikel.nietMeerLeverbaar > td:last-child {padding-right: 0;}
.kassaArtikelen .nietMeerLeverbaarTitel a.knop {margin-left: 0;}
.stap.drie .regel.actief {background: #fff;}
.stap.vier .totalen .vwHolder .vwTonen input[type="checkbox"] {margin-top: 0;}
.kenmerkgroepKeuze.tags .artikel.actief {background-color: var(--color2); color: var(--fontColor2); border-color: var(--color2);}
.kenmerkgroepKeuze.tags .artikel:hover {border-color: var(--color2); background-color: #eee; color: #41ae28;}
.stappenbalk .bezig .naam {color: var(--color2);}
.stappenbalk .bezig::before {background-color: var(--color2);}
.stappenbalk .klaar::after {border-color: var(--color1);}
.stappenbalk .klaar a::before {background-color: var(--color1);}
.stap .blokholder > .titel {font-size: var(--bodyFontSize); text-transform: uppercase; letter-spacing: 1px; font-family: var(--fontFamily2); background: #eee; padding: var(--space10) var(--space15); border-radius: 11px 11px 0 0; font-weight: revert-layer; margin-bottom: revert-layer;}
.stap .blokholder > .content {padding: var(--space15); background: #fafafa; border: 1px solid var(--borderColor1); border-radius: 0 0 11px 11px;}
.stap .kassaArtikelen {margin-bottom: var(--space20); background: #fafafa; padding: var(--space20); border-radius: var(--borderRadius2); border: 1px solid var(--borderColor1);}
.kassaArtikelen th {font-size: 90%; border-bottom-color: #eee; border-bottom-width: 2px;}
.kassaArtikelen .regelTotaal {text-align: right;}
.kassaArtikel td {padding-top: var(--space10); padding-bottom: var(--space10);}
.kassaArtikel:last-child td {border-bottom: 0;}
.kassaArtikel .regelTotaal {max-width: 100px; white-space: nowrap;}
.kassaArtikel .regelTotaal .prijs {font-size: 14px; line-height: 1.4em;}
.kassaArtikel .aantallen input {width: 54px; text-align: center;}
.kassaArtikel .tekst {vertical-align: middle; hyphens: auto;}
.kassaArtikel .tekst a.kassaArtikelTitel {text-decoration: none; color: var(--fontColor1); font-size: 16px; display: block; line-height: 1.25em;}
.kassaArtikel .tekst .artikelnr {text-transform: uppercase; font-size: 12px;}
.kassaArtikel .verwijderKnop a {color: #909090;}
.kassaArtikel .kassaArtikelAfbeeldingHolder {vertical-align: middle; text-align: center;}
.kassaArtikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder img {width: auto !important; height: auto !important; max-width: 100%;}
.kassaArtikelen .kassaArtikel .tekst .nietMeerLeverbaar {color: #d55929; border-radius: var(--borderRadius1); line-height: normal; padding: var(--space5) var(--space10); display: inline-block; background-color: rgba(213, 89, 41, .1);}
.stap .totalen {background: #fafafa; width: 48%; float: right; z-index: 1; padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius2); border: 1px solid var(--borderColor1); font-size: 14px;}
.stap .totalen .stappenKnop {padding: 0; background: transparent; border: 0;}
.stap .couponcode {display: inline-table;}
.stap .couponcode #CouponCodeV {margin-right: 0;}
.stap .couponcode a.wButControleer, #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td {vertical-align: middle;}
.stap.drie .blokholder {width: 48%; float: right;}
.stap.drie .blokholder:first-of-type {float: left;}
.stap.drie .regel {border-width: 1px; padding: var(--space10) var(--space15);}
.stap.drie .regel:hover {border-width: 1px;}
.stap.drie .regel.actief {border-color: var(--color1); border-width: 1px;}
.stap.drie .regel:before {opacity: 0; content: "\f00c"; position: absolute; right: 0; top: 0; padding: 4px; font-size: 12px; background: var(--color1); color: var(--fontColor2); font-family: "Font Awesome 5 Pro"; line-height: 1em; border-bottom-left-radius: var(--borderRadius1);}
.stap.drie .regel.actief:before {opacity: 1;}
.stap.drie .regel .label {float: right; padding: var(--space10);}
.stap.drie .regel > .omschrijving {font-weight: bold; font-size: 15px;}
.stap.drie .sendcloudResultaat.actief {border: 1px solid #e6e7e8;}
.stap.vier .gegevens {background: #eee; padding: var(--space20); border-radius: var(--borderRadius1);}
.winkelwagenHouder {color: #606060; display: inline-block; vertical-align: top; margin-left: 8px;}
.winkelwagenHouder .winkelknop {background-color: var(--color1); border-radius: var(--borderRadius2); margin-left: revert-layer; padding: revert-layer;}
.winkelwagenHouder .winkelknop .icoon {line-height: 1; color: var(--fontColor2); width: 40px; height: 40px; background-image: url(images/shoppingCart.svg); z-index: 1; background-repeat: no-repeat; background-size: 25px; background-position: center; box-sizing: border-box;}
.winkelwagenHouder .winkelknop .aantal {border-radius: var(--borderRadius4); padding-left: 7px; padding-right: 7px; right: -11px; border: 2px solid #FFF;}
.winkelwagenHouder .winkelwagen {top: 46px; border-radius: var(--borderRadius2); background-color: #f7f7f7; box-shadow: 0 4px 4px rgba(0,0,0,.2); right: 5px;}
.winkelwagenHouder.openGeklapt .winkelwagen {height: auto; top: 46px;}
.winkelwagenHouder .winkelwagen .inhoud.totaal, .winkelwagenHouder .winkelwagen .inhoud.artikelen .kassaArtikelen {padding: var(--space15);}
.winkelwagenHouder .winkelwagen .inhoud.artikelen .winkelTitel {font-size: var(--bodyFontSize); padding: var(--space20) var(--space20) 0 var(--space20); color: var(--fontColor1); text-transform: uppercase; letter-spacing: 1px; font-family: var(--fontFamily2);}
.winkelwagenHouder .winkelwagen .inhoud .prijs {float: right; font-weight: bold; font-size: 16px; padding: var(--space10); color: var(--fontColor1); text-align: right; line-height: 1em;}
.winkelwagenHouder .kassaArtikel .kassaArtikelAfbeeldingHolder {width: 50px; padding-right: var(--space10);}
.kassaArtikel .artikelKenmerken {max-width: 250px;}
.winkelmandjeKnoppen {display: inline-block;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {width: 135px;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {vertical-align: middle; width: 100%; text-align: center; box-sizing: border-box;}
#extraSchermWinkelmand .schermWinkelMandje .melding .icoon {display: block; left: -10px; top: -10px; border: 1px solid #fff;}
#extraSchermWinkelmand .schermWinkelMandje .melding .afbeeldingHouder {line-height: 0;}
#extraSchermWinkelmand .schermWinkelMandje .melding h2 {margin-bottom: 0; font-size: inherit; font-weight: normal;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen {text-align: right; padding-bottom: var(--space15); padding-top: var(--space15); border-top: revert-layer; display: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a {background: #bcbcbc; border-radius: var(--borderRadius1); color: var(--fontColor2); display: inline-block; line-height: 1.25em; margin-bottom: var(--space5); margin-top: var(--space5); padding: 7px var(--space10); text-decoration: none; width: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a:hover {background-color: #000;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {background-color: #e45c46;}
.schermWinkelMandje.meebestellenActief .melding .shopTegel .artikel {display: block; float: left; position: relative; width: 33.3333%;}
#extraSchermWinkelmand .schermWinkelMandje .artikel {box-shadow: none !important; margin: 0; border-left: none; border-right: none; border-top: none; border-radius: 0;}
.mijnAccount .resMenuItem.winkelmand a::before {content: "\f07a";}
.mijnAccount .resMenuItem.mijnGegevens a::before {content: "\f0c9";}
.mijnAccount .resMenuItem.mijnOrders a::before {content: "\f15c";}
.couponcodeHouder .couponcode #CouponCodeV, .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background-image: revert-layer;}
.stap.twee input[type="password"][type="password"], .stap.twee input[type="text"][type="text"] {margin-bottom: 0;}
.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: revert-layer;}
.stap.twee .blok .inloggen .knoppen a {margin: revert-layer;}
.kassaArtikelen .artikel .aantalMinPlus > *, #extraSchermWinkelmand .schermWinkelMandje .shopLijst, .winkelwagenHouder .winkelwagen .inhoud {padding: revert-layer;}
.couponcodeHouder .couponcode a.wButControleer, .stap .totalen .gewicht, .stap .totalen .totaalGewicht {white-space: revert-layer;}
.couponcodeHouder {background-color: revert-layer; background-image: revert-layer; border-radius: revert-layer; display: revert-layer; margin-bottom: revert-layer; min-height: revert-layer; padding: revert-layer;}
.kassainkollommen > .rechts .blok {background-color: revert-layer; background-image: revert-layer; border-radius: revert-layer; margin-bottom: revert-layer; min-height: revert-layer; padding: revert-layer;}
.stap .blokholder {background-color: revert-layer; background-image: revert-layer; border-radius: revert-layer; padding: revert-layer;}
.stap.twee .links>div {background-color: revert-layer; background-image: revert-layer; box-sizing: revert-layer; margin: revert-layer; width: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .icoon.icoon {background-color: var(--color1); border-radius: var(--borderRadius4); font-size: 13px; padding: var(--space5); position: absolute;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder img {bottom: revert-layer; height: revert-layer !important; left: revert-layer; margin: revert-layer; max-height: revert-layer; max-width: revert-layer; position: revert-layer; right: revert-layer; top: revert-layer; width: revert-layer !important; object-fit: contain;}
.kassainkollommen {box-sizing: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven {display: revert-layer; position: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen, #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .meerinfo, .couponcodeHouder:empty, .stap.twee .blok .inloggen .knoppen, .winkelwagenHouder .winkelwagen .inhoud.artikelen .voorraad {display: revert-layer;}
.stap.twee .links {flex-wrap: revert-layer; margin: revert-layer;}
.winkelwagenHouder .winkelwagen .inhoud.totaal {display: revert-layer; line-height: revert-layer;}
.kassainkollommen > .links {flex: revert-layer;}
.kassaArtikelen .aantallen .verwijderen {font-size: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .icoon {line-height: revert-layer; margin: revert-layer;}
.kassaArtikelen .artikel {line-height: revert-layer;}
.kassaArtikelen .artikel .aantalMinPlus {margin: revert-layer; max-width: revert-layer;}
.kassainkollommen > .rechts .sticky {margin-bottom: revert-layer; position: revert-layer; top: revert-layer;}
.kassainkollommen > .rechts {margin-left: revert-layer; width: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .afbeeldingHouder.afbeeldingHouder.afbeeldingHouder {margin-right: var(--space20);}
.kassaArtikelen .artikel .tekst .meerinfo {margin-top: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meebestellen {max-height: revert-layer; overflow: revert-layer;}
.winkelwagenHouder .winkelwagen .inhoud.artikelen {max-height: revert-layer; overflow-y: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder {max-width: revert-layer; width: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .afbeeldingHouder {max-width: revert-layer;}
.kassaArtikel .aantallen.aantallen {padding-right: var(--space10); padding-left: var(--space10);}
.kassaArtikelen .regelStuk.regelStuk.regelStuk {text-align: center;}
.kassaArtikelen .artikel td.aantallen, .kassaArtikelen .artikel td.regelTotaal {vertical-align: revert-layer;}
.kassaArtikelen .artikel td.regelStuk {vertical-align: revert-layer; white-space: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .prijzen {width: revert-layer;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven::after, .winkelwagenHouder .winkelknop .icoon:before {content: revert-layer;}
.stap .couponcode a.wButControleer.wButControleer {line-height: 1em;}
.kassaArtikel .verwijderKnop.verwijderKnop {padding-left: var(--space15);}
/* orderproces: wat orderproces_extra.tpl deed */
.stap.drie .regel .select, body:has(article > .stap) .art-sidebar1, body:has(article > .stap) .art-sidebar2, body:has(article > .stap) .breadcrumbs {display: none !important;}
body:has(article > .stap) .art-content {width: 100% !important;}
body:has(article > .stap) .art-Post-inner {position: relative;}
a.knop.bestaandeKlantKnop {position: absolute; top: 77px; right: 5px;}
/* kassa: zonder de tussenlagen van .kassainkollommen werken de oude floats van 48% weer */
.kassaArtikel .artikelPrijsEenheid, .stap .kassainkollommen {display: block;}
.stap .kassainkollommen > .links, .stap .kassainkollommen > .rechts, .stap .kassainkollommen > .rechts .sticky, .stap .kassainkollommen > .rechts .blok:not(.bestaandeKlant), .stap.twee .kassainkollommen > .links > div, :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner > .inhoud {display: contents;}
.stap .kassainkollommen::after, .stap.twee .blok.bestaandeKlant::after {content: ""; display: table; clear: both;}
.stap .kassainkollommen .knoppenHouder {display: inline-block; margin: 0;}
.stap:not(.een) .totalen {clear: both;}
.stap.twee .kassainkollommen .blokholder, .stap.twee .kassainkollommen #stap2_factuuruitklap, .stap.twee .kassainkollommen #stap2_bewaaraccount {float: right; width: 48%; clear: right;}
.stap.twee .kassainkollommen .blokholder.algemeneGegevens {float: left; clear: none;}
.stap.drie .kassainkollommen > .links > div {float: left; width: 48%; margin: 0;}
.stap.drie .kassainkollommen > .links > div + div {float: right;}
.stap.drie .kassainkollommen > .links > div > .blokholder {float: none; width: 100%;}
/* bestaande klant: klapt open onder de eigen knop uit maatwerk.js */
.stap.drie .regel .select:empty, .kassaArtikel .tekst .artikelnr .titel, .winkelwagenHouder .kassaArtikel .regelStuk, .stap .kassainkollommen #gratisCadeauVoortgang:empty, .stap.twee .resBestaandeklant {display: none;}
.stap.twee .blok.bestaandeKlant {clear: both; background-color: #f5f5f5; border-radius: var(--borderRadius1); margin: var(--space10) 0; padding: var(--space15);}
.stap.twee .blok.bestaandeKlant .inloggen {float: left; width: 47%; margin-right: 6%;}
.stap.twee .blok.bestaandeKlant .uitleg {float: left; width: 47%; padding-top: var(--space10);}
/* orderregel: een prijs, de voorraad onder de eenheden, de verwijderknop in een eigen kolom */
.stap .kassaArtikel .prijzen .prijs, .stap .kassaArtikel .prijzen .btwinfo, .stap .kassaArtikel .tekst .artikelAanvullendeOmschrijving, :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .omschrijving .artikelnr, :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .prijzen .artikelEenheid, :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .prijzen .artikelBestelEenheid, #extraSchermWinkelmand .schermWinkelMandje .knoppen.tweedeRijUit {display: none;}
.stap .kassaArtikel .tekst .meerinfo {display: flex; flex-direction: column;}
.stap .kassaArtikel .tekst .meerinfo > * {order: 2;}
.stap .kassaArtikel .tekst .meerinfo > :is(.variatie, .artikelPrijsEenheid, .artikelBestelEenheid) {order: 0;}
.stap .kassaArtikel .tekst .meerinfo > :is(.voorraad, .nietMeerLeverbaar) {order: 1;}
.stap .kassaArtikel .voorraad .status .toelichting::before {content: none;}
/* grijze balk onder de stappen, de oude lege .shopHeader */
#maincontent > article > .stap > .kassainkollommen::before {content: ""; display: block; margin-bottom: var(--space30); padding: var(--space20) var(--space40); background: var(--color3); border-radius: var(--borderRadius3);}
/* lijstweergave: grid in plaats van de oude tabel, afbeelding in een kolom van 150px */
:is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner {display: grid; grid-template-columns: 150px 1fr auto; column-gap: var(--space20); align-items: center;}
:is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner > .afbeeldingHouder, :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner > .inhoud > .omschrijving {width: auto; margin: 0;}
:is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner > .inhoud > .prijzen {margin: 0;}
:is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .omschrijving .meerinfo .voorraad {margin: var(--space5) 0 var(--space10); font-size: var(--bodyFontSize); line-height: 1.85em; color: var(--fontColor1);}
/* melding na toevoegen: altijd 650px breed, anders vallen de knoppen eraf (ook op live) */
#extraSchermWinkelmand .schermWinkelMandje .melding {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); min-width: 250px; overflow-y: scroll; max-width: 650px;}

/* account */
.typeKlant input[type="radio"]+label:hover, .geslacht input[type="radio"]+label:hover, .typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color: var(--color1);}
.typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {color: var(--color1);}
.mijnAccountOrderHolder {background: #fafafa; border: 1px solid var(--borderColor1); padding: var(--space20); border-radius: var(--borderRadius2);}
.mijnAccountOrderHolder .knoppen a {background-color: rgba(54, 82, 95, .1); color: #365276; border-radius: var(--borderRadius1); display: inline-block; font-size: 12px; padding: var(--space5) 8px; position: relative; text-decoration: none; transition: all 0.3s ease 0s; line-height: normal; margin-right: var(--space5); margin-top: var(--space5);}
.mijnAccountOrderHolder .knoppen a.activeren {background-color: #365276; color: var(--fontColor2);}
.mijnAccountOrderHolder .knoppen a.verwijderen:hover {background-color: rgba(239, 104, 104, .1); color: #ef6868;}
.mijnAccountOrderHolder.detail .omschrijving .titel {color: #365376;}
.mijnAccountOrderHolder.detail .omschrijving .knoppen a {margin-left: var(--space5);}
.cadeauHolder {border: 1px solid #ccc; padding: var(--space15);}
.cadeauHolder .cadeauAfbeeldingHolder img {border: 1px solid #ccc;}
.cadeauHolder h2 {border-bottom: 1px solid #ccc; margin: var(--space10) 0 var(--space20); padding: 0 0 var(--space10);}
.cadeauHolder .cadeauBedrag span {font-size: 25px;}
.mijnAccount .mijnAccountKnop::before {position: relative; content: "\f007"; font-family: "Font Awesome 5 Pro"; font-size: 22px; color: var(--fontColor2);}
.nawVeld.labelBinnenkant input {padding-bottom: 12px; padding-top: 12px;}
.stap .kassaArtikel .aantallen .verwijderen a {color: #909090;}

/* footer */
.pageFooterHolder {background-color: #FFF; border-top: 1px solid #e8e8e6;}
.pageFooterHolder .pageFooter {padding-left: var(--space20); padding-right: var(--space20); position: relative; max-width: var(--maxWidth); color: #9b9b9b; letter-spacing: .7px; font-size: 15px;}
.pageFooterHolder a {text-decoration: none;}
.pageFooterHolder a:hover {opacity: .7;}
.pageFooter .h2 {color: var(--fontColor1); font-size: 19px; letter-spacing: .33px; text-transform: uppercase;}
.pageFooterKnoppenHolder {background-color: var(--color3);}
.pageFooterKnoppenHolder .pageFooterKnoppen {color: #a3a3a4; position: relative; max-width: var(--maxWidth); padding: var(--space10) var(--space20); text-align: center; display: revert-layer; font-size: revert-layer; line-height: revert-layer;}
.pageFooterKnoppenHolder .pageFooterKnoppen a {color: #a3a3a4 !important; letter-spacing: .7px; text-decoration: none; font-size: 15px; margin: 0 var(--space5);}
.footerBlokHouder {display: flex; padding: 0 0; min-height: 308px;}
.footerBlokHouder .footerBlok {margin-right: var(--space100);}
.footerBlok.tekst {position: relative; flex: 2;}
.footerBlok.contact {position: relative; flex: 1;}
.footerBlok.contact table {margin-bottom: 18px;}
.footerBlok.contact td.icoon {width: 15%; vertical-align: middle;}
.footerBlok.contact td.icoon img {margin-right: var(--space20);}
.footerBlok.contact td.tekst a {vertical-align: middle; color: var(--fontColor1); letter-spacing: .31px; font-size: var(--bodyFontSize); font-family: var(--fontFamily3);}
.footerBovenHolder {background-color: #FFF; position: relative; width: 100%; border-top: 1px solid #e8e8e6;}
.footerBovenHolder .footerBovenInhoud {max-width: var(--maxWidth); padding: 0 var(--space20); margin: 0 auto; position: relative; height: 128px; box-sizing: border-box;}
.footerBovenHolder span.t.webshop {position: absolute; right: 0; top: 32px; font-size: var(--bodyFontSize); margin: var(--space10) var(--space25); display: block; transition: all 0.3s ease 0s; font-weight: bold; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--fontFamily2);}
.pageFooterHolder.pageFooterHolder a {color: var(--color1);}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: revert-layer;}
/* footer: - als scheidingsteken in plaats van | (deed de oude index.tpl met jQuery) */
.pageFooterKnoppen span.seperator {font-size: 0; line-height: 0;}
.pageFooterKnoppen span.seperator::before {content: "-"; font-size: var(--bodyFontSize); line-height: 1;}

/* componenten */
.dropdown.openGeklapt .keuze {border-radius: var(--borderRadius1);}
.knoppen.metTekst > a.uit {color: var(--color1);}
.meldingHouder .melding .formulierArtikelToevoegen select, ul.check li p:last-child {margin-bottom: 0;}
.popupHolder .popup .titel .sluiten {background: #eee; border-radius: var(--borderRadius4); box-sizing: border-box; color: var(--fontColor1); cursor: pointer; font-size: var(--bodyFontSize); height: 32px; line-height: 10px; padding: 7px; text-align: center; width: 32px;}
.tooltip.btwGrondslag {display: inline-block;}
.tooltip.btwGrondslag .btwGrondslagTabel td, .tooltip.btwGrondslag .btwGrondslagTabel th, .prijsafspraakLos td {padding: 0;}
.tooltip.btwGrondslag .omschrijving {left: 50%; padding: var(--space10); transform: translateX(-50%); width: 400px;}
span.t.webshop {background: var(--color2); color: var(--fontColor2) !important; border-radius: var(--borderRadius3); padding: var(--space5) var(--space30) !important;}
a.active span.t.webshop, a:hover span.t.webshop {color: var(--fontColor2) !important; background-color: var(--color2) !important;}
span.t.webshop::before {content: ""; position: relative; line-height: 1; width: 24px; height: 19px; background-image: url(images/shoppingCart.svg); z-index: 1; background-repeat: no-repeat; display: inline-block; background-size: contain; top: 2px; margin-right: var(--space10);}
ul.check {list-style-type: none; list-style-image: none; padding: 0; letter-spacing: 1.31px;}
ul.check li {padding-left: 35px; margin-bottom: var(--space10); position: relative;}
ul.check li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: var(--space10); color: var(--color2); left: 0; position: absolute; font-size: var(--bodyFontSize);}
blockquote .naam {font-size: 17px; color: var(--fontColor1); font-family: var(--fontFamily2); letter-spacing: 1.06px;}
.aantalPerPagina select {padding-top: var(--space5); padding-bottom: var(--space5);}
#tabArtikelOmschrijvingInhoud {overflow: hidden;}
#tabExtra1Inhoud {padding: 35px 0 0 0;}
#tabExtra1Inhoud ul.vinkjes {list-style-type: none; list-style-image: none; padding-left: 0; margin: 0;}
#tabExtra1Inhoud ul.vinkjes li:before {content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: 700; color: var(--color1); left: -8px; position: relative; padding: 0 0 0 var(--space10);}
.catMenuLink0li {font-family: var(--fontFamily4) !important; font-size: 16px; line-height: 1.85em;}
.catMenuLink0liSel {font-family: var(--fontFamily4) !important; font-size: 16px; line-height: 1.85em; color: var(--color2) !important;}
.tooltip {cursor: pointer;}
.tooltip::before {color: #365376;}
.bedrijfsGegevens.zakelijkTonen {max-height: 300px;}
.adresHolder .kop {font-family: var(--fontFamily4);}
.stappenKnop {margin-top: var(--space10);}
.stappenKnop a.volgendeStap {width: 100%; box-sizing: border-box; font-size: 15px;}
.productCarousel {margin-bottom: var(--space30);}
.knopAllesOnder a {font-family: var(--fontFamily2); text-transform: uppercase; letter-spacing: 1px; font-size: 15px; color: var(--fontColor2);}
.knopAllesOnder::before {clear: both; content: ""; display: block;}
.algemeneZoekResultaat ul li {background: #fff;}
.dropdown .keuze {color: var(--color2); padding: 6px 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background-image: revert-layer; line-height: revert-layer;}
.dropdown .keuze:before {content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: bold; float: right; transition: all .3s ease; margin-left: var(--space5);}
.dropdown:hover .keuze {border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.dropdown .keuze:hover:before {color: var(--color2);}
.dropdown ul {top: 100%;}
.dropdown ul li.variatietitel {padding: 4px 12px; font-weight: bold; background-color: #eee;}
.dropdown ul li a {padding: 4px 12px; clear: both; line-height: revert-layer; background-color: revert-layer; color: var(--color1);}
.dropdown ul li.active a {background-color: var(--color2); color: var(--fontColor2);}
.leverdagSelectie .dropdown ul li a:hover, #mArt_holder .dropdown ul li.active, #mArt_holder .dropdown ul li:hover {border-color: var(--color2);}
.leverdagSelectie .dropdown ul li.active a {border-color: var(--color2); color: var(--color2);}
.meldingBoven {background-color: #eee; border-bottom: 1px solid #dfdfdf;}
.snelbestellenHolder .tooltip.sbUpload {display: table-cell; padding-left: var(--space10);}
.barcodescannerHouder.open {box-shadow: 0 10px 50px rgba(0,0,0,.3);}
#mArt_holder .dropdown .keuze, .popupHolder {display: none;}
#mArt_holder .dropdown ul {display: flex; position: relative; max-height: none; width: auto; flex-wrap: wrap; z-index: 0; box-shadow: none; background-color: transparent;}
#mArt_holder .dropdown ul li {display: inline-block; box-shadow: none; min-width: 60px; margin-right: 3px; margin-bottom: 3px; border: 2px solid #ddd; border-radius: var(--borderRadius1); text-align: center; background-color: #fff;}
#mArt_holder .dropdown.openGeklapt ul, .formulier_textarea {margin: 0;}
input.verplicht, textarea.verplicht {background: #fff no-repeat scroll right 5px top 5px;}
input.nietMeerVerplicht, .nietMeerVerplicht {background-color: #fff;}
.copyright {text-align: center; margin-right: var(--space5); font-size: 15px; letter-spacing: .7px;}
.Taalkeuze_vlaggen.open {max-height: 190px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.formulier_text {margin-bottom: 0; margin-top: 0;}
.uniekeForm {padding: var(--space50); margin: var(--space30) auto; max-width: 800px; border-radius: var(--borderRadius1); background: var(--color3); box-sizing: border-box;}
.uniekeForm .formulier_textarea {height: 200px;}
.uniekeForm .formulierVersturen a {margin-top: var(--space20);}
.uniekeForm .formulier.widget label {margin-bottom: var(--space5); font-size: 16px;}
.meldingHouder .melding {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);}
.meldingHouder .melding .icoon {margin: 0 0 var(--space10);}
.meldingHouder .melding .knoppen a {background: #ccc; border-radius: var(--borderRadius1); color: var(--fontColor2); display: inline-block; line-height: 1.25em; margin-left: var(--space5); margin-right: var(--space5); padding: 7px var(--space10); text-decoration: none; transition: all 0.3s ease 0s;}
.meldingHouder .melding .knoppen a:hover {background: #000; color: var(--fontColor2); transition: all .3s ease;}
.meldingHouder .melding .knoppen a.bevestigen {background: var(--color2);}
.privacyMelding {box-shadow: 0 0 60px 5px rgba(0, 0, 0, 0.2); max-width: 400px;}
.privacyMelding .knoppen a.knop {background-image: none; padding: var(--space5) var(--space10); font-size: 13px;}
.popupHolder .popup {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); padding: var(--space40); max-height: 100%; overflow: auto;}
.popupHolder .popup .sluiten {position: absolute; top: 10px; right: 10px; color: var(--fontColor1); padding: 7px; font-size: var(--bodyFontSize); border-radius: var(--borderRadius4); background: #eee; height: 32px; width: 32px; line-height: 10px; text-align: center; box-sizing: border-box; cursor: pointer;}
a.knopLandingspagina {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.openklapper {width: 39px; background: url("images/res_plus.svg") no-repeat scroll center center / 50% auto; box-sizing: revert-layer; color: revert-layer; display: revert-layer; padding: revert-layer; text-align: revert-layer; text-decoration: revert-layer;}
.openklapper.open {background: url("images/res_min.svg") no-repeat scroll center center / 50% auto;}
.resCategorieen ul li a {border-color: #eee; border-width: 2px;}
.resCategorieen ul li.actief a {background-color: #eee; border-color: #ddd;}
a.wButControleer {margin-top: var(--space5);}
.stappenKnop a.volgendeStap.volgendeStap {padding: var(--space10);}
.embeddedContent {background-color: revert-layer; background-image: revert-layer; border-radius: revert-layer; height: revert-layer; line-height: revert-layer; margin-bottom: revert-layer; overflow: revert-layer; padding-bottom: revert-layer; padding-top: revert-layer; position: revert-layer; z-index: revert-layer;}
.prijsafspraakLos tr {box-sizing: revert-layer; display: revert-layer;}
.relatieBtwPrijs.relatieBtwPrijs {color: #aaa; font-size: 11px; line-height: 1.25em;}
.dropdown {cursor: revert-layer; margin: revert-layer;}
.embeddedContent iframe {height: revert-layer; left: revert-layer; position: revert-layer; top: revert-layer; z-index: revert-layer;}
.resCategorieen {margin: revert-layer; padding: revert-layer;}
.resCategorieen.resCategorieen ul li {margin-right: var(--space10);}
.resCategorieen::-webkit-scrollbar {display: revert-layer;}
.dropdown .keuze:after, .openklapper::before {content: revert-layer;}
.formulier_text.formulier_text {width: 100%;}

/* Extra custom code */
.stap.twee .kassainkollommen .blokholder.algemeneGegevens .content {display:flex; flex-direction: column;}
.stap.twee .kassainkollommen .blokholder.algemeneGegevens .content > .emailadres {order:-1;}

/* responsive */
@media (min-width: 1201px) {
  .bovenkant.bovenkant.bovenkant {max-width: var(--maxWidth);}
}
@media (min-width: 1001px) {
  .filters .beschikbaar {color: revert-layer;}
  .bovenkantHolder .bovenkant {display: revert-layer;}
  .bovenkant.bovenkant.bovenkant {padding-bottom: 0; padding-top: 0;}
  .bovenkant.bovenkant, #speedsearchResult .speedSearch.speedSearch ul {padding-left: var(--space20); padding-right: var(--space20);}
  #speedsearchResult .speedSearch.speedSearch.speedSearch ul {padding-bottom: var(--space20); padding-top: var(--space20);}
  #speedsearchResult .speedSearch .resultaat.resultaat {padding-left: var(--space30); padding-right: var(--space30);}
  #speedsearchResult .speedSearch .resultaat.resultaat.resultaat {padding-top: 35px;}
  .kassaArtikel .kassaArtikelAfbeeldingHolder.kassaArtikelAfbeeldingHolder {padding-right: var(--space20);}
  .kassaArtikel .kassaArtikelAfbeeldingHolder.kassaArtikelAfbeeldingHolder.kassaArtikelAfbeeldingHolder {width: 100px;}
  .embeddedContent iframe {width: revert-layer;}
  .winkelwagenHouder .kassaArtikel .kassaArtikelAfbeeldingHolder {padding-right: var(--space10);}
  .winkelwagenHouder .kassaArtikel .kassaArtikelAfbeeldingHolder.kassaArtikelAfbeeldingHolder {width: 50px;}
}
@media screen and (min-width: 1001px) {
  .stap .kassaArtikelen tr > th:last-child, .stap .kassaArtikel td.regelVolgorde {width: 67px; padding-left: var(--space15);}
  .stap .kassaArtikel {position: relative;}
  .stap .kassaArtikel .aantallen .verwijderen {position: absolute; right: 49px; top: 50%; transform: translateY(-50%);}
}
@media (min-width: 681px) {
  .shopSortOptie > * {margin: revert-layer;}
  #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .prijzen {text-align: revert-layer;}
}
@media screen and (max-width: 1345px) {
  .art-menu li a .t {padding-right: var(--space10); padding-left: var(--space10);}
}
@media screen and (min-width: 1001px) and (max-width: 1300px) {
  /* zoekresultaten: onder 1300px viel de dropdown links buiten beeld (ook op live) */
  #speedsearchResult {left: -210px; right: auto; width: min(1270px, calc(100vw - 40px));}
}
@media screen and (max-width: 1300px) {
  .zoeken {left: 230px;}
  .zoeken .veld #zoekWoordID {width: 350px;}
  .liquid-slide-sjabloon .inhoud {top: 10%;}
}
@media (min-width: 1001px) and (max-width: 1250px) {
  .kassaArtikelen .artikel td.regelStuk, .kassaArtikelen th.regelStuk {display: revert-layer;}
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .bovenkant.bovenkant.bovenkant {max-width: 1000px;}
}
@media screen and (min-width: 1001px) and (max-width: 1200px) {
  #speedsearchResult {left: calc(-210px - (100vw - 1000px) / 2);}
}
@media screen and (max-width: 1200px) {
  .art-Sheet, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen {max-width: 1000px;}
  .art-menu li a .t {padding-right: 7px; padding-left: 7px; font-size: 15px;}
  .zoeken .veld #zoekWoordID {width: 200px;}
  span.t.webshop {padding-right: 18px !important; padding-left: 18px !important;}
  .scrollTo {display: none;}
}
@media screen and (max-width: 900px) {
  .adresHolder .adressen .item {flex-basis: calc(33.333% - 10px); margin: 0 var(--space10) var(--space10) 0;}
  .adresHolder .adressen .item.open {box-shadow: 0 0px 50px -8px rgba(0,0,0,.25); left: 20px; padding: 35px; position: absolute; right: 20px;}
  .barcodescannerHouder.open {border-radius: 5px; left: 50%; margin-left: -350px; top: 10%; width: 700px;}
  .privacyMelding {transform:scale(.8);}
  .privacyMelding a.knop.zwart, .privacyMelding .knoppen a.knop, a.knop.wit:hover.wit {width:100%; display:block; text-align:center; margin:2px 0; box-sizing:border-box;} 
  .privacyMelding .knoppen {background:unset; padding-top:0 !important}
}
@media screen and (max-width: 1000px) {
  header .art-navSite, .bovenkantHolder .bovenkant .phoneCall, .bovenkantHolder .bovenkant .whatsapp, header .socialM, .bovenkantHolder .bovenkant .accountHolder .account, .liquid-slide-sjabloon .inhoud p, .Taalkeuze_vlaggen ul li.actief span::after, .shopTegel .artikel .favorieten, #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td:first-child, .stappenbalk li .naam, .kassaArtikelen th, .stap.vier .factuurAfleverHouder .midden {display: none;}
  .bovenkantHolder .bovenkant {max-width: none; display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; padding: var(--space20); grid-template-areas: "a b c" "d d d"; justify-content: space-between; height: 140px; gap: var(--space20) 0;}
  .bovenkantHolder .bovenkant a.logo {width: 130px; height: 40px; position: relative; top: unset; left: unset; grid-area: a; z-index: 23;}
  .bovenkantHolder .bovenkant .zoeken {position: static; top: unset; left: unset; display: unset; grid-area: d;}
  .bovenkantHolder .bovenkant .zoeken .veld, .HeaderHolder, .bovenkant {width: 100%;}
  .bovenkantHolder .bovenkant .resMenubalk {grid-area: b; height: fit-content;}
  .bovenkantHolder .bovenkant .accountHolder {grid-area: c; position: static; top: unset; right: unset; z-index: 23;}
  .bovenkantHolder .bovenkant .accountHolder .winkelwagenHouder {position: static;}
  .bovenkantHolder .bovenkant .winkelwagenHouder .winkelwagen {width: auto; left: 10px; right: 10px; top: 70px;}
  .bovenkantHolder .bovenkant .zoeken .veld #zoekWoordID {width: 100%; padding-top: var(--space10); padding-bottom: var(--space10); font-size: 16px;}
  .bovenkantHolder .bovenkant .zoeken .knop {font-size: 16px; padding-top: 0; padding-bottom: 0;}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult {left: 10px; right: 10px; top: 130px; height: calc(100dvh - 120px); overflow: auto; border-radius: var(--borderRadius2); display: none;}
  .bovenkantHolder .bovenkant .zoeken.open #speedsearchResult {display: unset;}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder, .inschrijvenKolom, ul.check.blokken {flex-direction: column;}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder .speedSearch ul {max-height: none; padding-right: var(--space20); padding-left: var(--space20);}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder .speedSearch:first-of-type .resultaat {padding-top: var(--space30);}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder .speedSearch .resultaat {padding-right: var(--space30); padding-left: var(--space30);}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder .speedSearch ul li a {display: flex; align-items: center; justify-content: space-between;}
  .bovenkantHolder .bovenkant .zoeken #speedsearchResult .houder .speedSearch ul li a .thumbnail {order: 2;}
  .resMenubalk, .stap.een .kassaArtikel .aantallen .verwijderen, .shopTegel .artikel .voorraad, #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td, .dropdown.dealerHolder .bedrijf, .footerBlokHouder {display: block;}
  .art-Sheet, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen {max-width: 760px;}
  .FCK2kolTd, .dropdown.dealerHolder .plaats {float: none;}
  .FCK3kolTd {float: none; width: 100%; display: block;}
  .FCK2kolTdS, .FCK3kolTdS, .winkelmenu {display: none !important;}
  .liquid-slide-sjabloon .inhoud {position: relative; max-width: none; font-size: 13px; padding: var(--space5) var(--space15);}
  .liquid-slide-sjabloon .inhoud h2 {font-size: 26px;}
  .liquid-slide-sjabloon .inhoud h5 {font-size: 20px;}
  .stap.een .kassaArtikel .aantallen input {width: 45px;}
  .stap.een .kassaArtikel .kassaArtikelAfbeeldingHolder {width: 60px; padding-right: var(--space10) !important;}
  .stap.een .kassaArtikel .tekst a.kassaArtikelTitel {font-size: 13px; line-height: 1.5em;}
  .stap2_naw .factuurAfleverHouder h3 a {opacity: 1;}
  .art-Post .FCK2kolTd {margin-top: 0; margin-right: 0; margin-left: 0; width: 100% !important;}
  .art-Post .FCK3kolTd {margin-top: 0; margin-right: 0; margin-left: 0;}
  body {-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
  h1, h2, h3, h5 {clear: both;}
  h2, .h2 {font-size: 28px;}
  textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {font-size: 16px;}
  iframe {width: 100% !important; max-width: 100%;}
  .pageFooterHolder {overflow: hidden;}
  .bovenkantHolder {min-width: 0;}
  #art-main {min-width: 0; overflow: hidden;}
  .formulier_text {max-width: 100%;}
  .art-Sheet .FCK2kolTd {display: block; margin-bottom: var(--space15);}
  .art-Sheet .FCK3kolTd {margin-bottom: var(--space15);}
  a.logo {width: 170px;}
  .art-Sheet {width: 100% !important; padding: 0;}
  .art-contentLayout, .art-contentLayout .art-content {width: 100% !important;}
  .art-Post {width: 100% !important; margin: 0;}
  .art-Post-body, .pageFooterHolder .pageFooter, .stap .blokholder > .content, .stap.vier .gegevens {padding: var(--space10);}
  .copyright {top: auto; left: auto; right: auto; display: block;}
  .pageFooterKnoppenHolder .pageFooterKnoppen {padding-right: var(--space10); padding-left: var(--space10);}
  .sitemap1 .sitemap1ul a {text-decoration: none;}
  .sitemap1 .sitemap1ul li {display: block; float: none; width: auto;}
  ul.sitemap1ul ul, .stappenbalk li {margin: 0;}
  li.STPMenu1li {border: 0;}
  li.STPMenu2li {margin-left: var(--space10);}
  li.STPMenu3li {margin-left: var(--space20);}
  li.STPMenu2li a {font-size: 14px;}
  li.STPMenu3li a {font-size: 13px;}
  .Taalkeuze_vlaggen {left: auto; width: 100%;}
  .Taalkeuze_vlaggen.open {box-shadow: unset;}
  .Taalkeuze_vlaggen.dropdownTaal {margin-left: 0; position: relative; top: 2px; right: auto; text-align: center;}
  .inschrijvenKolom .rechts {width: 100%; margin-left: 0;}
  .inloggen_holder {display: block; max-width: 100%;}
  .shopTegel .artikel .omschrijving h2.titel a {height: auto;}
  .artikel.detail .links, .artikel.detail .rechts, .stap.twee .kassainkollommen .blokholder, .stap.twee .kassainkollommen #stap2_factuuruitklap, .stap.twee .kassainkollommen #stap2_bewaaraccount, .stap.drie .kassainkollommen > .links > div {float: none; width: 100%; padding: 0;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {padding: 0; width: 100%;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {width: 50%; float: left; margin: var(--space10) 0 0;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.doorgaanKassa {border-top-right-radius: 0; border-bottom-right-radius: 0;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.verderWinkelen {border-top-left-radius: 0; border-bottom-left-radius: 0;}
  .stappenbalk {padding: 0 0 var(--space10); text-align: center;}
  .stap .totalen {float: none; width: 100%; padding: var(--space10);}
  .dropdown.dealerHolder .keuze .km {padding-right: var(--space10);}
  .stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {width: 100%; display: block; margin-top: var(--space10);}
  .cadeauHolder .cadeauAfbeeldingHolder img {max-width: 100%; height: auto !important;}
  .barcodescannerHouder.open {border-radius: 0; top: 0; left: 0; width: 100%; bottom: 0; margin-left: 0;}
  .adresHolder .adressen .item {flex-basis: 100%; margin: 0 0 var(--space5);}
  .adresHolder .adressen .item.open {position: relative; left: auto; top: auto; right: auto; padding: var(--space10) var(--space15); box-shadow: none;}
  .vak .inhoud {padding: var(--space40) var(--space20) !important;}
  .privacyMelding {left: 0; max-width: 100%; bottom: 0; border-radius: 0;}
  .privacyMelding .inhoud, .privacyMelding .knoppen {padding: var(--space20);}
  .tabsV2 .titels > div.actief {border: 0; background: #365376; color: var(--fontColor2);}
  .footerBlok {margin-top: var(--space20); margin-bottom: var(--space20); margin-left: 0;}
  .artikel.detail {margin-top: unset;}
  .vak.groen.hulpBestellen .inhoud .tekst {padding-top: var(--space20); padding-bottom: var(--space20); box-sizing: border-box; width: 100%;}
  .vak.groen.hulpBestellen .inhoud .tekst a {width: 100%; display: block; box-sizing: border-box; text-align: center; padding-right: var(--space10); padding-left: var(--space10);}
  a.knop, a.button {font-size: 15px;}
  .filters .beschikbaar {background: #fafafa; color: var(--fontColor1); border-radius: 0; padding: var(--space10); line-height: 1em; position: fixed; bottom: 0; top: unset; width: 100%; text-align: center; height: 90px; box-sizing: border-box; border-top: 1px solid var(--borderColor1); z-index: 11;}
  .shopHeader {padding-top: var(--space25);}
  .stap.twee .blok.bestaandeKlant .inloggen, .stap.twee .blok.bestaandeKlant .uitleg {float: none; width: 100%; margin: 0;}
  :is(.shopHolder, .schermWinkelMandje) .shopLijst .artikel .inner {grid-template-columns: 85px 1fr auto;}
  .productCarousel .artikel {width: calc(33.333% - 15px);}
}
@media (max-width: 900px) {
  select {font-size: inherit;}
  .shopCompact .artikel .bestellen a.wButBestel {width: 50% !important;}
  .shopCompact .artikel .bestellen a.wButBestel.knopMoederArtikel {width: 100% !important;}
  .liquid-slide-sjabloon .sliderWrapper {background-color: revert-layer; position: absolute;}
  .button.button.button.button.button {display: inline-block;}
  .resCategorieen {display: none;}
  .art-nav, .art-sidebar1, .bovenkantHolder .bovenkant .resMenubalkinhoud {display: revert-layer;}
  .kassainkollommen {flex-direction: revert-layer;}
  .shopCompact .artikel h2.titel {font-size: 14px;}
  .liquid-slide-sjabloon .inhoud p:last-child {margin-bottom: 0;}
  .stap .blokholder {margin-bottom: var(--space20);}
  .liquid-slide-sjabloon .inhoud h2 {margin-bottom: .5em;}
  .kassainkollommen > .rechts {margin-bottom: revert-layer; margin-right: revert-layer; margin-top: revert-layer;}
  .stap.twee .resBestaandeklant {margin: revert-layer;}
  .vak {padding: revert-layer;}
  .bovenkantHolder {position: relative; top: revert-layer;}
  .stap.twee .resBestaandeklant .button {text-align: revert-layer;}
  .shopCompact .artikel .bestellen .bestelknop > * {width: revert-layer !important;}
  .account .houder1.houder1.houder1.houder1 > div a, .inschrijvenKolom .blokholder.knopVersturen .button.button {display: block;}
  .artikel.detail .bestellen .bestelknop .wButBestel, .shopLijst .artikel .bestelknop .button.button, .stap .couponcode a.wButControleer.wButControleer.wButControleer {display: table-cell;}
}
@media screen and (max-width: 680px) {
  .mijnAccountOrderHolder .item .artikelen {display: inline-flex; margin: auto 0 auto auto; padding: var(--space10); width: 330px;}
  .mijnAccountOrderHolder .item .pijl {display: flex;}
}
@media screen and (max-width: 760px) {
  .art-Sheet, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen {max-width: 550px;}
  .liquid-slide-sjabloon .plaatje::before, .liquid-slide-sjabloon .plaatje::after, .mijnAccountOrderHolder .item .pijl {display: none;}
  .uniekeForm {padding: var(--space20);}
  .mijnAccountOrderHolder .item {flex-direction: column;}
  .mijnAccountOrderHolder .item .artikelen {display: flex; width: auto; margin: -5px 0 0 0; padding: 0px var(--space10) var(--space10);}
  div[class*="grid"] {grid-template-columns: 1fr;}
  a.knop.bestaandeKlantKnop {top: 75px; right: 4px;}
  .productCarousel {margin: 0 0 var(--space30);}
  .productCarousel .artikel {width: calc(50% - 15px);}
}
@media (max-width: 680px) {
  .shopSortOptie > * select {width: revert-layer;}
  .shopLijst .artikel {border-radius: var(--borderRadius1); border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; margin-bottom: var(--space10); margin-left: revert-layer; margin-right: revert-layer; margin-top: revert-layer;}
  .shopLijst .artikel:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);}
  .productCarousel .artikel {margin-left: 7.5px; margin-right: 7.5px;}
  .shopTegel .artikel .bestellen.bestellen {display: flex;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder, .artikel .artikelnr > .titel, .kassaArtikelen .artikel .exBtwToelichting {display: revert-layer;}
  .pageFooterKnoppenHolder .pageFooterKnoppen, .shopLijst .artikel .inner .inhoud {flex-direction: revert-layer;}
  .shopSortOptie {flex-wrap: revert-layer;}
  .shopCompact, .shopLijst {margin: revert-layer;}
  .shopSortOptie > * {margin: revert-layer !important; width: revert-layer;}
  .shopLijst .artikel .omschrijving, .shopLijst .artikel .prijzen {text-align: revert-layer !important;}
}
@media screen and (max-width: 480px) {
  .productCarousel .artikel {width: 75%;}
}