:root {

  --color1: #34281D; /* was 6B472B */
  --color2: #F7F7F7;
  --color3: #F9F4EF;
  --color4: #000000;
  --color5: #0C5557;
  --color6: #7B2E2E;
  --fontColor: #000;
  --borderColor: #E5E5E5;
  --fontFamily1: "din-condensed", Helvetica, Arial, sans-serif;
  --fontFamily2: "Inter", Helvetica, Arial, sans-serif;
  --fontFamily3: "LT Kai", Helvetica, Arial, sans-serif;
  --bodyFontSize: 16px;
  --h1Size: 50px;
  --h2Size: 40px;
  --h3Size: 22px;
  --h4Size: 60px;
  --h5Size: 25px;
  --h6Size: 40px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space60: calc(var(--space30) * 2);
  --space100: 100px;
  --maxWidth: 1880px;
  --borderRadius1: 5px;
  --borderRadius2: 10px;
  --borderRadius3: 20px;
  --textSmall: 650px;
  --boxShadowWindow: 0 10px 20px rgba(0,0,0,0.1);
  
}

html{
  overflow-x: hidden;
}

body {font-family: var(--fontFamily2); font-weight: normal; color: var(--fontColor); background: var(--color3); font-size: var(--bodyFontSize); line-height: 1.95em;}
::selection {background: var(--color5); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); border-color: var(--borderColor) !important; background-color: #FFF !important; color: var(--fontColor); padding: 10px; font-size: 16px;}

input[type="text"]:focus, textarea:focus {background: #FFF no-repeat scroll right 6px top 6px !important;}

select {border-color: var(--borderColor); border-radius: var(--borderRadius1); padding: 12px 30px 12px 15px; color: var(--fontColor);}

.breadcrumbs {margin: 0 0 var(--space30) 0;}
.breadcrumbs ol li::after {content: "—"; margin: 0 10px;}
.breadcrumbs ol li:last-child:after {display: none;}
.breadcrumbs ol li.crumbSpace {display: none;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); font-weight: normal; color: var(--color1); margin: 0 0 0.5em 0;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); margin-bottom:0.3em;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); color: var(--fontColor); text-transform: none;}

h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {font-size: var(--h4Size); font-family: var(--fontFamily3); color:#fff;}
h6, .h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {font-size: var(--h6Size); font-family: var(--fontFamily3); color:#fff;}

h4+p, .h4 + p {margin-top:1em;}

h5 + h1 {margin-top: -0.25em;}
h5 + h2 {margin-top: -0.25em;}

a.telefoon {text-decoration: none;}
a.mail {text-decoration: none;}
a.telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color1);}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--color1);}

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

ul.hoedjes {margin: 0 0 1em 0; padding: 0; list-style: none;}
ul.hoedjes li {padding: 0; padding-left: 35px; position: relative;}
ul.hoedjes li::before {content: ""; background: url(/skin/images/hoedje.svg); margin-right: 10px; position: absolute; left: 0; width: 25px; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center;  transform: rotate(-21deg);}
  
a.logo {margin: auto 0; outline: 0; z-index: 2;}
a.logo img {width: 172px; margin: 0; transition: .3s all ease;}

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color1); color: #FFF; border: 0; font-size: 18px; padding: 15px 30px; cursor: pointer; line-height: 1; text-decoration: none !important; text-transform: uppercase; border-radius: var(--borderRadius1); letter-spacing: 0.1em;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color1);}

a.knop.wit {background: #FFF; color: var(--color1);}
a.knop.wit:hover {background: var(--color1); color: #fff;}

.account {display: flex;}
.account li {border: 0}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro";  font-size: 18px; font-weight: normal; color: var(--fontColor);}
.account .welkom,
.account .welkom .bericht,
.account .inloggenKnop .titel, 
.account .mijnAccountKnop .titel,
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje, 
.account .favorietenKnop .favAantal {display: none;}
.account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; font-size: 18px; font-weight: normal; color: var(--fontColor);}
.account .favorietenKnop:hover {text-decoration: none !important;}

.account .houder {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: #FFF; transform: translateZ(0); transition: right .5s ease-in-out; width: 500px; max-width: 90vw;}
.account .openGeklapt .houder {top: 0; right: 0; max-height: 100vh;}
.account .inloggen .inlogKnop {flex-direction: column;}
.account .inloggen .inlogKnop a.button {background: var(--color5); display: block;}
.account .inloggen .inlogKnop .wachtwoordKwijt {margin: 10px 0 0 0;}
.account .inloggen .inlogKnop .wachtwoordKwijt a {display: block; text-align: center; text-decoration: none; font-size: 13px; color: #777;}

.account .houder .houder2 {border: 0; background: unset; padding-top: 0;}
.account .houder .houder2 .uitloggen a {position: relative; font-family: var(--fontFamily1); background-color: var(--color4); color: #FFF; border: 0; font-size: 18px; padding: 15px 30px; cursor: pointer; line-height: 1; text-decoration: none !important; text-transform: uppercase; border-radius: var(--borderRadius1); letter-spacing: 0.1em; display: block; text-align: center; box-sizing: border-box;}

.account .houder .houder1 .mijnWelkomstPagina {display: none;}

.account .mijnAccount .houder {width: 500px;}

.winkelwagenHouder {display: block;}
.winkelwagenHouder .winkelknop {background: unset; padding: 10px 10px 13px 10px;;}
.winkelwagenHouder .winkelknop .icoon {display: flex ; align-items: center; gap: 10px;}
.winkelwagenHouder .winkelknop .icoon:before {content: "\f290"; font-family: "Font Awesome 5 Pro"; font-size: 18px; font-weight: normal; color: var(--fontColor);}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: unset; color: var(--fontColor); padding: 0; position: relative; font-weight: normal; line-height: normal; top: unset; right: unset; font-size: 12px;}

.winkelwagenHouder .winkelwagen {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: #FFF; transform: translateZ(0); transition: right .5s ease-in-out; width: 500px; max-width: 90vw;}
.winkelwagenHouder.openGeklapt .winkelwagen {top: 0; right: 0; max-height: 100vh;}
.winkelwagenHouder .winkelwagen #winkelmandje  {display: flex; flex-direction: column; height: 100vh;}
.winkelwagenHouder .winkelwagen .inhoud {padding: var(--space20);}
.winkelwagenHouder .winkelwagen .inhoud.totaal {margin: auto 0 0; background: #FFF; border-top: 1px solid var(--borderColor);}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--color5);}

.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen {font-family: var(--fontFamily1); text-transform: uppercase;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {color: var(--fontColor); font-size: 25px;}
.winkelwagenHouder .winkelwagen .inhoud.artikelen .h3, .account .houder .accountKop {font-size: 18px; margin: 0 0 10px 0; line-height: 1.35em; font-family: var(--fontFamily1); font-weight: normal; color: var(--color1); text-transform: uppercase;}
.winkelmandjeLeeg {background: transparent; border: 0; padding: var(--space20); margin: auto; font-size: 20px; color: #a4a4a4;}

.extrabovenkantHolder {background: var(--color1);}

.bovenkantHolder {border: 0; border-bottom: 0; position: sticky; top: 0;}
.bovenkantHolder .bovenkant {min-height: 80px; max-width: var(--maxWidth);}

.bovenkantHolder .bovenkant .art-nav {margin: auto auto auto var(--space100);}
.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: var(--space40); position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li {position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {padding: var(--space15) 0 var(--space10) 0; font-family: var(--fontFamily1); text-transform: uppercase; font-size: 20px; cursor: pointer; position: relative;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t.hoverMenuActief::after {content: ""; position: absolute; border: 0; left: -100px; top: 29px; height: 65px; z-index: 2; display: inline-block; width: 250px;}
.art-menu li a .t:hover, .art-menu li a.active .t {opacity: .5; color: var(--color5);}

.bovenkantHolder .bovenkant .shopitems {align-items: center;}

.zoekenTrigger {position: relative; line-height: normal; padding: 10px; box-sizing: border-box;}
.zoekenTrigger::before {content: "\f002"; font-family: "Font Awesome 5 Pro"; font-size: 18px; font-weight: normal; color: var(--fontColor);}

.zoeken {position: absolute; left: 0; right: 0; border-radius: 0; border: 0; z-index: 17; opacity: 0; pointer-events: none; width: 100%; max-width: var(--maxWidth); padding: 0 var(--space30); margin: 0 auto; background: #FFF; box-sizing: border-box; transition: .3s all ease;}
.zoeken::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FFF; z-index: -1;}
.zoeken.open {opacity: 1; pointer-events: all; z-index: 2;}
.zoeken .knop {margin: auto 0 auto auto; padding: 0;}
.zoeken .veld {width: 100%;}
.zoeken .veld #zoekWoordID {padding: 20px 0;}
.speedsearchResultBg {display: none;}
.speedsearchLoader {display: none;}

#speedsearchResult {max-width: var(--maxWidth); top: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; left: 0; right: 0;}
#speedsearchResult::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FFF; z-index: -1;}
#speedsearchResult .houder {display:block; border-radius: 0; border: 0; box-shadow: unset; font-size:inherit; width: 100%; box-sizing: border-box; padding: 30px 0; max-height: 600px;}
.speedSearch.categorie {order:1;}
.speedSearch.artikelen {width: 100%;}
.speedsearchLoader {display: none;}
#speedsearchResult .houder .speedSearch ul li a {border:0; color: #000; display: flex;}
#speedsearchResult .houder .speedSearch ul li a .omschrijving {margin: auto 0; color: #666; font-size: 14px; font-weight: normal;}
#speedsearchResult .houder .speedSearch ul li a strong {color: var(--kleur2)}
#speedsearchResult .houder .speedSearch .resultaat {padding: 0; font-family: var(--fontFamily1); color: var(--fontColor); text-transform: uppercase; margin: 0 0 20px 0; line-height: 1.35em; font-size: 24px;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .speedSearch ul li a:hover {background: #f7f7f7;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {width: 80px; height: 80px;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: darken;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .knopAllesOnder a {border: 0; font-size: 13px; color: #FFF !important; padding: 15px 30px; border-radius: var(--borderRadius1); background: var(--kleur2); line-height: 1; text-decoration: none !important; font-weight: 500;}
#speedsearchResult .houder .knopAllesOnder a:hover {background: var(--kleur1);}

.art-Sheet {padding: var(--space30) var(--space30); max-width: var(--maxWidth);}
.art-Sheet .art-sidebar1:empty {display: none;}

section .inhoud, .vak .inhoud {padding: var(--space50) var(--space30); max-width: var(--maxWidth);}
.vak .inhoud + .inhoud {padding-top: 0;}

.text-small {max-width: var(--textSmall);}

.max900 {max-width: 900px !important; margin-left: auto;margin-right: auto;}

.grid-2x {grid-template-columns: 1fr 1fr; gap: var(--space40);}

div[class*="grid"].metAfbeelding > div {background: #FFF; padding: var(--space50); box-sizing: border-box; border-radius: var(--borderRadius3);}

div[class*="grid"].metAfbeelding > div .afbeelding {border-radius: 15px; overflow: hidden; margin: 0 0 var(--space30) 0; line-height: 0;}
div[class*="grid"].metAfbeelding > div .afbeelding img {width: 100% !important; height: auto !important;}
div[class*="grid"].metAfbeelding > div h2 {margin: 0;}

div[class*="grid"].blok {background: #FFF; padding: var(--space50); box-sizing: border-box; border-radius: var(--borderRadius3); grid-template-columns: 1fr 1fr; gap: var(--space100); align-items: center;}
div[class*="grid"].blok .afbeelding {border-radius: var(--borderRadius3); overflow: hidden; line-height: 0;}
div[class*="grid"].blok .afbeelding img {width: 100% !important; height: auto !important;}
div[class*="grid"].blok h4 {color:var(--color1);}

div[class*="grid"].blok a.knop {display: block; margin-bottom: 10px; max-width: 300px;}
div[class*="grid"].blok a.knop:last-of-type, div[class*="grid"].blok p:last-of-type {margin: 0;}
div[class*="grid"].blok h2 {margin: 0;}

div[class*="grid"].blok.transparant {background: transparent;}
/* div[class*="grid"].blok.transparant .afbeelding {transform: translateX(calc(var(--space50)* -1));} */

.afbeeldingAlsBackground {display: flex; flex-direction: column; position: relative; color:#fff; min-height: 900px; font-size: 21px; line-height:1.85em;}
.afbeeldingAlsBackground:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .7; background-color: var(--color1); border-radius: var(--borderRadius3); z-index: 0;}
.afbeeldingAlsBackground h2 {color:#fff;}
.afbeeldingAlsBackground ul.hoedjes li::before {filter: brightness(0) invert(1);}
.afbeeldingAlsBackground > * {z-index: 1;}
.afbeeldingAlsBackground .afbeelding {margin-top: auto !important;}

.blok.googleMapsCustomHouder { background-color: var(--color1); line-height: 0; border-radius: var(--borderRadius3); overflow: hidden;}
.blok.googleMapsCustomHouder iframe {width:100% !important; filter: saturate(0.2); opacity: .95;}

.flickity-nav {display: flex; gap: var(--space30);}
.flickity-nav > div {position: relative; margin-left: auto; display: flex; gap: 10px;}
.flickity-nav > div .flickity-button {position: relative; opacity: 1; background: unset; background-color: unset; border: 1px solid var(--color4); border-radius: 100%; width: 45px; height: 45px; padding: 0; left: 0; right: 0; top: 0; bottom: 0; transform: unset;}
.flickity-nav > div .flickity-button:disabled {opacity: .3;}
.flickity-nav > div .flickity-button .flickity-button-icon {display: none;}
.flickity-nav > div .flickity-button::before {content: "\f178"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor); font-size: 24px; font-weight: lighter;}
.flickity-nav > div .flickity-button.previous::before {content: "\f177";}

.hoverMenu {left: 0; right: 0; width: 100%; max-width: calc( var(--maxWidth) - 60px); overflow: hidden; margin: 0 auto; padding: 0; border-radius: var(--borderRadius3); box-shadow: unset; transform: unset; top: calc(100% + 30px); display: grid; grid-template-columns: 2fr 1fr; gap: var(--space30); z-index: 1;}
.hoverMenu.open {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); box-shadow: var(--box-shadow-venster);}

.hoverMenu .kolommen {width: 100%; padding: var(--space50); box-sizing: border-box; gap:var(--space30); display: block; column-count: 3; column-gap: var(--space30);}
.hoverMenu .kolommen .kolom {padding: 0; width:auto; break-inside: avoid; margin-bottom: var(--space30);}
.hoverMenu .kolommen .kolom .titel a {font-family: var(--fontFamily1); color: var(--fontColor); text-transform: uppercase; font-size: 25px;}
.hoverMenu .kolommen .kolom > ul {position: relative; opacity: 1; left: 0; right: unset; box-shadow: unset; border: 0; visibility: unset; transition: unset;}
.hoverMenu .kolommen .kolom > ul::before {display: none;}
.hoverMenu .kolommen .kolom > ul li a {border: 0; padding: 5px 0; color: var(--fontColor); font-size: 14px;}
.hoverMenu .kolommen .kolom > ul li a:hover {background: unset; opacity: .6; text-decoration: none;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}


.hoverMenu .categorie {display: flex; align-items: center; padding: 0;}
.hoverMenu .categorie .afbeelding {margin: 0; float: unset;}
.hoverMenu .categorie a.knop {padding: 20px 30px; display: inline-block;}
.hoverMenu .categorie .aankeiler {max-width: var(--textSmall); margin: 0 auto;}

.productCarousel {margin: 0;}
.productCarousel .artikel {width: calc((100% - (var(--space30) * 3)) / 4); margin-left: var(--space30); margin-right: 0;}

.shopHolder {display: flex; flex-direction: column; gap: var(--space30); }
.shopHolder .shopSortOptie {border: 0; border-radius: 0; padding: 0; margin: 0; align-items: center;}
.shopHolder .shopSortOptie .aantalPerPagina {display: none;}
.shopHolder .shopSortOptie .sorteerLijst {margin-right:0;}
.presentatieWijze, .sorteerKnoppen {margin: 0 10px 0 0;}

.shopHolder .shopSortOptie .sorteerLijst select {font-size:14px; padding: 10px 30px 10px 14px}

.shopHolder .resCategorieen {display: block; margin: 0; padding: 0; margin-right: auto;}
.shopHolder .resCategorieen ul {display: flex; margin: 0; gap: var(--space10);}
.shopHolder .resCategorieen ul li {display: block; margin: 0;}
.shopHolder .resCategorieen ul li a {background: #FFF; font-weight:normal; border-color: var(--borderColor); border-radius: var(--borderRadius1); font-family: var(--fontFamily2); font-size:14px;}
.shopHolder .resCategorieen ul li:hover a,
.shopHolder .resCategorieen ul li.actief a {border-color: var(--color5); color: var(--color2); background: var(--color5);}

.artikel .aantalMinPlus, .artikel .aantalVolgorde {display: grid; grid-template-columns: 1fr 1fr 1fr; background: #fff; border: 1px solid var(--borderColor); border-radius: var(--borderRadius1); margin: 0; overflow: hidden;}
.artikel .prijzen {line-height: 1.35em;}
.artikel .artikelnr {display: none;}
.artikel .artikelEenheid {display: none;}
.artikel .relatieBtwPrijs {font-size:14px;}
.regelTotaal .relatieBtwPrijs,
.regelStuk .relatieBtwPrijs{display: none;}
.artikel .prijzen .voor {color: var(--color6);}

.artikel .labels {padding:5px}
.artikel .labels .label {background:var(--color6); color:#fff;border-radius: var(--borderRadius2); padding:5px 10px}

.kortingsbonCode {border-color: var(--color6); color: var(--color6);}
.kortingsbonCode a {background-color: var(--color6); color:#fff;}
.stap .totalen .negatief {color: var(--color6);}

.shopCategorieHolder {gap: var(--space30); grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));}
.shopCategorieHolder .categorie {border: 0;}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}
.shopCategorieHolder .categorie .inner .afbeeldingHouder {background: #FFF; border-radius: var(--borderRadius3); overflow: hidden; margin: 0 0 20px 0;}
.shopCategorieHolder .categorie .inner .afbeeldingHouder img {padding: var(--space30); box-sizing: border-box;}
.shopCategorieHolder .categorie .inner .titel {padding: 0 5px;}
.shopCategorieHolder .categorie .inner .titel h2 {font-size: 24px;}

.shopTegel {gap: var(--space30); grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));}

.shopTegel .artikel .inner {border: 0; background: unset; padding: 0;}
.shopTegel .artikel .inner:hover {box-shadow: unset;}
.shopTegel .artikel .inner .afbeeldingHouder {background: #FFF; border-radius: var(--borderRadius3); overflow: hidden; margin: 0 0 20px 0;}
.shopTegel .artikel .inner .afbeeldingHouder img {padding: var(--space30); box-sizing: border-box;}

.shopTegel .artikel .inner .rechtsboven div {font-size: 18px;}
.shopTegel .artikel .inner .rechtsboven div a {background: unset; border-radius: 0;}
.shopTegel .artikel .inner .rechtsboven div a i {font-weight: normal;}
.shopTegel .artikel .inner .rechtsboven div.aan a i {font-weight: bold; color: var(--color5);}

.shopTegel .artikel .inner .omschrijving h2.titel a {font-size: 24px; font-weight: normal;}
.shopTegel .artikel .inner .meerinfo .aanvullendeOmschrijving {font-size: 15px;}

.shopTegel .artikel .inner .bestellen {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: center;}
.shopTegel .artikel .inner .bestellen .bestelknop {margin-left: auto;}
.shopTegel .artikel .inner .bestellen .bestelknop input {width: 52px; border-radius: var(--borderRadius1) 0 0 var(--borderRadius1);}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color5); border-radius: 0 var(--borderRadius1) var(--borderRadius1) 0; width: unset; padding: 17px 20px;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel::before {font-weight: normal; color: #FFF; font-size: 15px; content: "\f290"; font-family: "Font Awesome 5 Pro";}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel span {display: none;}

.shopTegel .artikel .inner .bestellen .prijzen .prijs {font-size: 22px;}

.shopCompact {display: grid; gap: 10px;}
.shopCompact .artikel {border: 0; border-radius: var(--borderRadius2);}

.shopCompact .artikel .bestellen {min-width: unset; width: unset; display: block;}
.shopCompact .artikel .bestellen .bestelknop {margin-left: auto;}
.shopCompact .artikel .bestellen .bestelknop input {width: 52px !important; border-radius: var(--borderRadius1) 0 0 var(--borderRadius1); margin: 0;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color5); border-radius: 0 var(--borderRadius1) var(--borderRadius1) 0; width: unset; padding: 17px 20px;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel::before {font-weight: normal; color: #FFF; font-size: 15px; content: "\f290"; font-family: "Font Awesome 5 Pro";}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel span {display: none;}
.shopCompact .artikel .gerelateerde-artikelen {display: none}

.shopCompact .artikel .prijzen {margin-right: 10px;}

.shopCompact .artikel .omschrijving h2.titel {font-size: inherit; font-family: inherit; font-weight: 500;}

.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 1fr 1fr; gap: var(--space50); margin: 0;}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;}

.artikel.detail .detailinkollommen .links .afbeelding {background: #FFF; border-radius: var(--borderRadius3); padding: var(--space30); box-sizing: border-box;  position: sticky; top: 131px;}

.artikel.detail .detailinkollommen .links .volledigGallery .carousel-cell-groot .verhouding {height: calc(100vh - 200px); min-height: 250px; max-height: 450px; padding-bottom: 0;}
.artikel.detail .detailinkollommen .links .volledigGallery .carousel-cell-groot img {padding: var(--space50); box-sizing: border-box;}
.artikel.detail .detailinkollommen .links .volledigGallery .flickity-page-dots {display: flex ; gap: var(--space10); justify-content: center; align-items: center;}
.artikel.detail .detailinkollommen .links .volledigGallery .flickity-page-dots .dot {margin: 0; width: 40px; height: 2px; background: #b9b9b9; border-radius: 0;}
.artikel.detail .detailinkollommen .links .volledigGallery .flickity-page-dots .dot.is-selected {background: var(--color5);}

.artikel.detail .detailinkollommen .links .volledigGallery .kenmerkArt.intensiteit {position: absolute; right: 0; bottom: 0; width: unset; border: 0; padding: 0;}
.artikel.detail .detailinkollommen .links .volledigGallery .kenmerkArt.intensiteit img {max-width: 40px;}
.artikel.detail .detailinkollommen .links .volledigGallery .kenmerkArt.intensiteit .groep,
.artikel.detail .detailinkollommen .links .volledigGallery .kenmerkArt.intensiteit .kenmerken .kenmerk .titel {display: none;}

.artikel.detail .detailinkollommen .links .thumbnailGallery .flickity-viewport {height: 0 !important;}
.artikel.detail .detailinkollommen .links .thumbnailGallery img {height: 0 !important; width: 0 !important; border: 0; margin: 0;}
.artikel.detail .detailinkollommen .links .thumbnailGallery button {display: none;}

.artikel.detail .detailinkollommen .rechts .blok {box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space20); max-width: var(--textSmall);}

.artikel.detail .detailinkollommen .rechts .blok .omschrijving > h1 {font-size: 55px; font-family: var(--fontFamily3);}
.artikel.detail .detailinkollommen .rechts .blok .aanvullendeOmschrijving {display: none;}

.artikel.detail .detailinkollommen .rechts .blok > div:empty {display: none;}

.artikel.detail .detailinkollommen .rechts .blok .prijzen {display: flex; gap: 10px;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs {font-size: 35px;}

.artikel.detail .detailinkollommen .rechts .blok .prijzen .adviesPrijsMetKorting {margin-bottom:20px; display: flex; gap:5px; word-spacing: 0; align-items: center; line-height: 1em;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .adviesprijs {font-size: 20px; text-decoration: line-through; color: #666; margin: auto 0;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .adviesprijs .toelichting {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .prijsPercentage {display: inline-block; font-size: 14px; background: var(--color4); border-radius: var(--borderRadius1); color: #FFF; padding: 4px 8px; line-height: 1; text-transform: lowercase; margin: auto 0; word-spacing:-0.25em}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .prijsPercentage:empty {display: none}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .prijsPercentage:has(.valuta) {display: none}

.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop {gap: var(--space10);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel {width: 100% !important; box-sizing: border-box; background: var(--color5); line-height: 1; padding: var(--space20);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel::before {display: none;}

.artikel.detail .detailinkollommen .rechts .blok .shopDetailModernKenmerken {margin: 0;}
.artikel.detail .detailinkollommen .rechts .blok .shopDetailModernKenmerken .kenmerkArt {border: 0; padding: 0; font-size: 14px; display: grid; grid-template-columns: 1fr 2fr;}
.artikel.detail .detailinkollommen .rechts .blok .shopDetailModernKenmerken .kenmerkArt .groep {border-right: 1px solid #7F7263; padding-right: var(--space30); color: var(--fontColor); font-weight: bold;}
.artikel.detail .detailinkollommen .rechts .blok .shopDetailModernKenmerken .kenmerkArt .kenmerken {padding-left: var(--space30);}

.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .h3 {display: none} 
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.tags .artikel {border: 2px solid var(--borderColor); background: #FFF; border-radius: var(--borderRadius1); font-size: 14px; padding: 10px 15px; transition: all .3s ease; min-width: 70px; text-align: center; font-weight: normal;}
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.tags .artikel:hover,
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.tags .artikel.actief {border-color: var(--color5); background: var(--color5); color:#fff;}

.artikelSerieActief .afbeeldingHouder {border:2px solid var(--color5)}

.pageFooterHolder {background: var(--color1);}
.pageFooterHolder .pageFooter {max-width: var(--maxWidth); padding: var(--space100) var(--space30); color: #fff;}
.pageFooterHolder .pageFooter .h2 {color: #fff; font-size: 22px;}
.pageFooterHolder .pageFooter a {color:#fff; text-decoration: none;}
.pageFooterHolder .pageFooter a:hover {text-decoration: underline;}

.pageFooterHolder .pageFooter .grid-2x {margin: var(--space50) 0 0 0;}

ul.check {margin: 0; padding: 0; list-style: none;}
ul.check li::before {content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #fff; margin-right: 10px; position: absolute; left: 0;}
ul.check li {padding: 0; padding-left: 34px; position: relative;}

.pageFooterKnoppenHolder {background: var(--color4);}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--maxWidth); color: #fff; display: block; text-align: center;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {font-size: 13px; color: #fff;}

.kassaArtikelen .artikel {position: relative;}
.kassaArtikelen .artikel .aantallen .verwijderen {position: absolute; right:0; top:50%; transform:translateY(-50%);}

.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: bold; color: var(--fontColor);}



.resMenubalk {margin: auto 0;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {margin: 0;}

.resMenuHolder {top: 100%; background: var(--color3);}
.resMenuHolder .resMenuinhoud {padding: 30px 0;}
.resMenublokinhoud .resMenuItem a {border: 0; padding: 7px 20px; font-family: var(--fontFamily1); text-transform: uppercase; font-size: 20px; }
.resMenuItem .laag1 a {padding-left: 30px; font-size: 17px;}
.resMenuItem .laag2 a {padding-left: 45px; font-size: 14px;}

.flickity-page-dots {bottom:10px; z-index: 4;}
.flickity-page-dots .dot {background-color:#fff; transition: all .3s ease; border-radius:5px;}
.flickity-page-dots .dot:hover {opacity: 1;}
.flickity-page-dots .dot.is-selected {width:30px;}

.kassainkollommen > .links .kassaArtikelen {background: #FFF; padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius3);}
.kassainkollommen > .rechts .blok, .couponcodeHouder {background: #FFF; padding: var(--space20); box-sizing: border-box; border-radius: var(--borderRadius3);}

.stap .gewicht {display: none;}
.stap .totalen {font-size: 14px;}
.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen .totaalTeBetalen td {color: var(--fontColor); font-size: 16px;}
.stap .totalen .totaalArtikelen .bedragExclusiefRelatie .relatieBtwPrijs {display: none;}
.stap .totalen .totaalVerzendkosten .bedragExclusiefRelatie {opacity: 0;}
.stap .totalen .totaalVerzendkosten .omschrijving {display: none;}
.stap .totalen .stappenKnop a {background: var(--color5);}
.stap .totalen .bedrag .gratis {background: var(--color4);}

.stap .voorraad {color: #888; margin-top:10px; margin-left:10px; font-size: 14px;}

.stap .totalenTabel .totaalInclBtw      {font-weight: bold;}
.stap .totalenTabel .totaalInclBtw td   {border-top:1px solid #ccc;}
.kortingsbonCode {line-height: 1.7em;}

.stap .totalenTabel .totaalExclBtw td   {padding-top:20px;}
.stap .totalenTabel .totaalExclBtw td,
.stap .totalenTabel .totaalBtw td       {border-top:0;  opacity: .5; font-size:12px; line-height: 1.35em; font-weight: normal;}

.stap .blokholder {background: #FFF; padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius3);}
.stap .blokholder > .titel {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor); margin: 0 0 0.5em 0; text-transform: uppercase; font-size: 21px;}

.stap .totalen .totaalBetalingskosten {display: none;}

.stap.twee .links>div, .stap.drie .links>div {background: unset;}
.stap.twee .adres .geselecteerd {border-color: var(--color4) !important;}
.stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: var(--color4);}

.stap.drie .regel .bedrag .gratis {background: var(--color4);}
.stap.drie .regel.betaal .bedrag {display: none;}

.stappenbalk .klaar a::before {background: var(--color4);}
.stappenbalk .klaar::after {border-color: var(--color4);}

.typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color: var(--color4);}
.typeKlant input[type="radio"]+label::before, .geslacht input[type="radio"]+label::before {top: 16px;}
.typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {color: var(--color4);}

table.voedingswaarde {border-spacing: 0; border-radius: var(--borderRadius2); padding:15px 20px; width: 100% !important; background: #FFF; font-size: 15px;}
table.voedingswaarde th {text-align: right; padding: 5px 5px; border-bottom: 1px solid #ccc; color: #000; font-size:12px; text-transform: uppercase; line-height:1.35em;}
table.voedingswaarde td {padding: 5px 5px; text-align: right; border-bottom: 1px solid #eee; width: 150px; font-size: 12px; line-height:1.35em;}
table.voedingswaarde td:first-of-type, table.voedingswaarde th:first-of-type {text-align: left; vertical-align: bottom; width:auto;}
table.voedingswaarde tr td {background:#fff; transition: all .3s ease}
table.voedingswaarde tr:last-of-type td {border-bottom:0;}
table.voedingswaarde tr:hover td {background:#eee;}
table.voedingswaarde p {margin:0;}

.art-sidebar1 .filterform {position: sticky; top:108px;}
.art-sidebar1 .filters {border: 0; display: flex; flex-direction: column; gap: 10px;}
.art-sidebar1 .filters .kenmerkgroep {border: 0; margin: 0 0 20px 0; background: #FFF; border-radius: var(--borderRadius2);}
.art-sidebar1 .filters .kenmerkgroep a.titel {font-family: var(--fontFamily1); text-transform: uppercase; font-size: 22px;}

#eapps-instagram-feed-1 {border-radius: var(--borderRadius3); overflow: hidden; max-width: calc(var(--maxWidth) - var(--space60)) !important; margin:0 auto;}

.inloggen_holder {border: 0; border-radius: var(--borderRadius2); background: #FFF; max-width: 400px;}
.inloggen_holder .inloggen_content {border: 0; padding: var(--space20);}
.inloggen_holder .inloggen_content h2 {font-size: 30px; margin: 0 0 10px 0; line-height: 1.35em; font-family: var(--fontFamily1); font-weight: normal; color: var(--color1); text-transform: uppercase;}
.inloggen_holder .inloggen_content #buttonLogin {background: var(--color5); display: block; width: 100%; box-sizing: border-box;}
.inloggen_holder .inloggen_content .wachtwoordKwijt a {display: block; text-align: center; text-decoration: none; font-size: 13px; color: #777; padding-bottom: var(--space20);}

.blokholder.accountWijzigen {max-width: 800px; margin: 0 auto; background: #FFF; padding: var(--space30); border-radius: var(--borderRadius1); box-sizing: border-box;}
.blokholder.accountWijzigen .titel {background: unset; padding: 0; border-radius: 0; margin: 0}
.blokholder.accountWijzigen .content {padding: 15px 0;}

#inschijfformulier_holder {max-width: 800px; margin: 0 auto; background: #FFF; padding: var(--space30); border-radius: var(--borderRadius1); box-sizing: border-box;}
#inschijfformulier_holder .inschrijvenKolom {display: block;}
#inschijfformulier_holder .inschrijvenKolom .blokholder {background: unset; padding: 0; border: 0; margin: 0;}
#inschijfformulier_holder .inschrijvenKolom > .rechts {margin: 0; max-width: 200px;}


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

  .bovenkantHolder .bovenkant .art-nav .art-menu {gap:20px;}
  .hoverMenu {grid-template-columns: 1fr;}
  .hoverMenu .categorie {display: none}

}

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

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

  a.logo {margin-right: auto;}
  a.logo img {width: 120px;}

  .vak {padding: 0;}

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

  .productCarousel .artikel {width: calc((100% - (var(--space30) * 0)) / 1); margin-left: var(--space30);}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr;}
  
  .afbeeldingAlsBackground {min-height: unset;}

}