:root {
  --kleur1: #a51c18;
  --kleur2: #97BF32 ;
  --kleur3: #ffa701;
  --kleur4: #FFF;
  --kleur5: #F5F6F7;
  --fontkleur1: #000;
  --fontkleur2: #333;
  --font1: "Nunito", Helvetica, Arial, sans-serif;
  --max-width: 1400px;
  --border-radius: 3px;
  --padding-20: 20px;

}

body {font-family: var(--font1); font-weight: normal; background: var(--kleur5); color: var(--fontkleur1); font-size: 14px; overflow-y: scroll; overflow-x: hidden;}

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

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="number"], input[type="search"]  {background-color: #fff; border: 1px solid #000; border-radius: var(--border-radius); box-shadow: none; color: #666; font-family: inherit; font-size: inherit; line-height: normal; padding: 12px; box-sizing: border-box; width: 100%; transition: all .3s ease; outline: none; margin: 5px;}
input[type="checkbox"]::before {color: #ddd; font-weight: bold;}
input[type="checkbox"]:checked::before {color: var(--kleur2);}

select {border: 1px solid #000; border-radius: var(--border-radius);}

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(--font1); color: var(--fontkleur1);}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: 29px;font-weight: bold;}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: 23px; font-weight: bold;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {color: var(--fontkleur2); font-size: 18px; font-weight: normal;}

h1 + h5 {margin-top: -0.5em; margin-bottom: 1.5em;}
h2 + h5 {margin-top: -0.5em; margin-bottom: 1.5em;}

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

ul.vinkjes {padding: var(--padding-20); margin: 0; list-style: none;}
ul.vinkjes li {padding: 0; padding-left: 25px; position: relative;}
ul.vinkjes li a {text-decoration: none;}
ul.vinkjes li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: var(--kleur2); margin-right: 10px; position: absolute; left: 0;}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 230px; margin-right: 20px}

a.knop, .button, a.button, button {font-family: inherit; font-size: 14px; padding: 13px 20px; border-radius: var(--border-radius); color: var(--fontkleur1); background: var(--kleur5); line-height: 1; font-weight: 500; text-decoration: none !important;}
a.knop::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; margin-left: 10px; font-size: 12px;}

a.knop:hover, .button:hover, a.button:hover, button:hover {background: #ebf0f1;}

.postnlHouder {display: block; background: #fcf8c5; padding: 5px;}
.postnlHouder .postnlMelding {max-width: 1260px; margin: 0 auto; text-align: center;}

.extrabovenkantHolder {background: var(--kleur5); z-index: 5;}
.extrabovenkantHolder .extrabovenkant {max-width: var(--max-width); padding: 5px 30px;}
.extrabovenkantHolder .extrabovenkant .usp {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin: auto auto auto 0;}
.extrabovenkantHolder .extrabovenkant .usp span {font-size: 13px;  box-sizing: border-box;}
.extrabovenkantHolder .extrabovenkant .usp span a {text-decoration: none;}
.extrabovenkantHolder .extrabovenkant .usp span::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: var(--kleur2); margin-right: 10px;}

.extrabovenkantHolder .extrabovenkant .taalVerzenden {margin: auto 20px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}

.Taalkeuze_vlaggen.dropdownTaal {margin: auto 0; min-width: unset; bottom: 2px;}
.Taalkeuze_vlaggen.dropdownTaal ul {position: static; border: 1px solid #ccc; background: var(--kleur4); border-radius: var(--border-radius);}
.Taalkeuze_vlaggen.dropdownTaal.open ul {max-height: unset; background: #FFF; box-shadow: unset;}
.Taalkeuze_vlaggen.dropdownTaal ul li {display: flex; align-items: center; width: 100%;}
.Taalkeuze_vlaggen.dropdownTaal ul li a {text-decoration: none; display: flex; align-items: center;}
.Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {line-height: 1.35em; width: 100%; display: flex;}
.Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving::after {bottom: 0; margin-left: auto;}
.Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding img {max-width: 18px; width: 100% !important; height: auto !important;}
.Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding::before {display: none;}

.bovenkantHolder {border: 0; position: sticky; top: 0; box-shadow: 0 14px 12px -12px rgb(200 200 200 / 40%);}
.bovenkantHolder .bovenkant {max-width: var(--max-width); min-height: 95px;}

.bovenkantHolder .bovenkant .zoekenHolder {margin: auto 20px auto auto; width: 100%; max-width: 500px; display: none;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken {width: 100%; border: 0; background: var(--kleur5); border-radius: var(--border-radius);}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld {width: 100%;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld input {padding: 15px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {margin: auto 0; padding: 15px;} 
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop::before {color: #afafaf; font-weight: lighter; font-size: 17px;}
.speedsearchResultBg, .speedsearchLoader {display: none !important;}

#speedsearchResult {left:0; top:100%;}
#speedsearchResult .houder {width:100%; max-width: 100vw; border:0; border-radius: 0 0 var(--border-radius) var(--border-radius); padding:10px 10px 40px 10px; box-sizing: border-box;}

#speedsearchResult .houder .speedSearch.categorie .resultaat  {display: none;}
#speedsearchResult .houder .speedSearch.categorie ul          {display: flex; flex-wrap:wrap; gap:10px; padding:10px;}
#speedsearchResult .houder .speedSearch.categorie ul li       {margin:0;}
#speedsearchResult .houder .speedSearch.categorie ul li a     {background:#eee; border-radius: 50px; padding: 5px 15px; border:0;}
#speedsearchResult .houder .speedSearch.categorie ul li a:hover  {background:var(--kleur1); color:#fff;}

#speedsearchResult .houder .speedSearch.artikelen ul li a         {border-radius: var(--border-radius);}
#speedsearchResult .houder .speedSearch.artikelen ul li a:hover   {background-color: #eee;}
#speedsearchResult .houder .speedSearch.artikelen ul li a .omschrijving {font-weight: bold; padding-top:5px;}
#speedsearchResult .houder .speedSearch.artikelen ul li a strong {font-weight: bold; color: var(--kleur1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: multiply;}

#speedsearchResult .houder .knopAllesOnder {position: absolute; bottom: 0; left: 0; right: 0; max-width: 100vw; box-sizing: border-box;}
#speedsearchResult .houder .knopAllesOnder a:hover {background-color: var(--kleur1); color: #fff; border-radius:0 0 var(--border-radius) var(--border-radius);}


.inloggenBg, .mijnAccountBg, .verlanglijstBg, .winkelwagenHouderBg, .speedsearchResultBg, #extraSchermWinkelmand,
#alertBox, #confirmAlert, .alertBox, .confirmAlert {background: rgba(17, 17, 17, 0.5) !important;}

.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelknop {background: unset; padding: 10px; margin: 0;}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelknop .icoon::before {font-weight: lighter; color: var(--fontkleur2); font-size: 25px; content: "\f290";}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--kleur2); padding: 0; border-radius: 50%; line-height: 1.95em; top: -10px; right: -10px; color: var(--kleur4); width: 20px; height: 20px; font-size: 10px; font-weight: lighter;}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelwagen {top: 100%; border-radius: var(--border-radius); box-shadow: unset; width: 700px; background: var(--kleur5);}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelwagen .inhoud.artikelen .h3 {font-size: 16px; font-weight: bold; line-height: inherit; color: var(--fontkleur1);}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelwagen .inhoud.totaal .prijs {font-size: 20px; font-weight: bold; color: var(--fontkleur1);}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a {background: var(--kleur4);}
.bovenkantHolder .bovenkant .shopitems .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--kleur3);}

.bovenkantHolder .bovenkant .shopitems .account li {border: 0; padding: 10px;}
.bovenkantHolder .bovenkant .shopitems .account li.inloggen .inloggenKnop::before, .bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .mijnAccountKnop::before {content: "\f2bd"; font-family: "Font Awesome 5 Pro"; color: var(--fontkleur2); font-size: 25px; font-weight: lighter;}
.bovenkantHolder .bovenkant .shopitems .account li.inloggen .inloggenKnop .titel, .bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .mijnAccountKnop .titel {display: none;}
.bovenkantHolder .bovenkant .shopitems .account li.inloggen .inloggenKnop:hover, .bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .mijnAccountKnop:hover {text-decoration: none; color: unset;}
.bovenkantHolder .bovenkant .shopitems .account li.inloggen.openGeklapt .inloggenKnop, .bovenkantHolder .bovenkant .shopitems .account li.mijnAccount.openGeklapt .mijnAccountKnop {text-decoration: none; color: inherit;}
.bovenkantHolder .bovenkant .shopitems .account li.welkom {display: none;}

.bovenkantHolder .bovenkant .shopitems .account li .houder {transform: translateY(0); width: 300px; box-shadow: unset; border-radius: var(--border-radius);}
.bovenkantHolder .bovenkant .shopitems .account li .houder .accountKop {font-size: 16px; font-weight: bold; line-height: inherit;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .inlogKnop {display: block;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .inlogKnop a.inlogKnop2 {display: block; width: 100%; box-sizing: border-box; background-color: var(--kleur2); color: var(--kleur4);}
.bovenkantHolder .bovenkant .shopitems .account li .houder .inlogKnop .wachtwoordKwijt {margin: 10px 0;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .inlogKnop .wachtwoordKwijt a {text-decoration: none; color: #afafaf;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .houder2 {background: unset; border-top: 1px solid var(--kleur5); border-bottom: 1px solid var(--kleur5);}
.bovenkantHolder .bovenkant .shopitems .account li .houder .houder2 .registreer {font-weight: bold; color: var(--fontkleur1); font-size: 16px;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .houder2 .registreer a {display: block; color: #afafaf; font-weight: normal; font-size: 13px; text-decoration: none; pointer-events: none; line-height: 1.5em;}
.bovenkantHolder .bovenkant .shopitems .account li .houder ul {list-style: none; padding: 0; margin: 0;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .favorieten {padding: 15px 20px;}
.bovenkantHolder .bovenkant .shopitems .account li .houder .favorieten a {text-decoration: none; color: var(--fontkleur1);}
.bovenkantHolder .bovenkant .shopitems .account li .houder .favorieten a::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-weight: lighter;}

.bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .houder .houder1 a {text-decoration: none; padding: 5px 0; border-bottom: 1px solid var(--kleur5); display: flex; align-items: center;}
.bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .houder .houder1 a::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; margin-left: auto; font-size: 12px;}
.bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .houder .houder2 {border: 0; padding: 0 20px 10px 20px;}
.bovenkantHolder .bovenkant .shopitems .account li.mijnAccount .houder .houder2 .uitloggen a {font-family: inherit; font-size: 14px; padding: 13px 20px; border-radius: var(--border-radius); color: var(--kleur4); background: var(--kleur1); line-height: 1; font-weight: 500; text-decoration: none !important; display: block; width: 100%; box-sizing: border-box; text-align: center;}

.bovenkantHolder .bovenkant .shopitems .klantenservice {padding: 10px; display: block; margin: auto 0; color: var(--fontkleur2); font-size: 25px;}
.bovenkantHolder .bovenkant .shopitems .resMenuwinkelmandje {display: none;  margin: auto 0; color: var(--kleur4); font-size: 25px; position: relative;}
.bovenkantHolder .bovenkant .shopitems .resMenuwinkelmandje #reswinkelMandjeAantal {box-shadow: unset; background-color: var(--kleur2); padding: 0; border-radius: 50%; line-height: 1.95em; top: -10px; right: -10px; color: var(--kleur4); width: 20px; height: 20px; font-size: 10px; font-weight: lighter; display: block;}

.bovenkantHolder .bovenkant .keurmerk {display: flex; gap: 10px; margin: auto auto auto 20px; line-height: 0;}
.bovenkantHolder .bovenkant .keurmerk img {width: 100% !important; height: auto !important; max-height: 35px;}
.bovenkantHolder .bovenkant .keurmerk a:last-child img {max-height: 40px;}

.bovenkantHolder .winkelmenu {max-width: var(--max-width); text-align: unset; display: flex; gap: 30px;}
.bovenkantHolder .winkelmenu li {position: static;}
.bovenkantHolder .winkelmenu li a .t {padding: 15px 0; cursor: pointer;}
.bovenkantHolder .winkelmenu li.separatorHouder {display: none;}

.breadcrumbs {max-width: var(--max-width); padding: 20px 30px; margin: 0 auto; box-sizing: border-box;}

.breadcrumbs ol li a {text-decoration: none !important; padding-left:5px;}
.breadcrumbs li.crumb:nth-child(1) {display: inline-block;;}
.breadcrumbs li.crumb a::before {content: "\f0d9"; font-family: "Font Awesome 5 Pro"; color: #dcdcdc; margin-right: 5px; font-weight: bold; font-size: 15px;}
/* .breadcrumbs li.crumb:nth-child(n+2) {display:none;} */
.breadcrumbs li.crumbSpace { display: none;}

.breadcrumbs ol li:last-child {display: none;}

.art-Sheet {max-width: var(--max-width);}
.art-Sheet .art-content {width: 100% !important;}

section .inhoud, .vak .inhoud {max-width: var(--max-width);}
section .inhoud .blok, .vak .blok {background-color: var(--kleur4); border-radius: var(--border-radius); padding: var(--padding-20); box-sizing: border-box;}


.vak.clerkHouder {width: 100%; overflow: hidden;}
.vak.clerkHouder .inhoud {padding: 20px 0;}

.grid-2x.header {grid-template-columns: 1fr 3fr; gap: 30px;}
.grid-2x.header .categorie-lijst {background-color: #FFF; border-radius: var(--border-radius); height: 100%;}
.grid-2x.header .categorie-lijst .item {display: flex; border-bottom: 2px solid var(--kleur5); padding: 10px 20px; text-decoration: none;}
.grid-2x.header .categorie-lijst .item::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; margin-left: auto; font-size: 14px;}
.grid-2x.header .categorie-lijst .klantenservice {padding: var(--padding-20); box-sizing: border-box;}

.grid-2x.merken {align-items: center; grid-template-columns: 1fr 250px;}

.grid-5x.over-ons {grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr)); gap: 30px;}
.grid-5x.over-ons > div .content {display: block; text-align: center;}
.grid-5x.over-ons > div .afbeelding {line-height: 0; text-align: center;}
.grid-5x.over-ons > div .content {font-size: 16px; text-align: center;}

.artikel .labels .label {background-color: unset; border-radius: 0; padding: 0; margin: 10px 10px 0;}
.artikel .labels .label.verbergen {display: none;}
.artikel .labels .label img {height: 45px !important; object-fit: contain; overflow: hidden; width: 100%;}
.artikel .artikelnr > .titel, .artikel .relatieBtwPrijs {display: none;}

.productCarousel.shopTegel {margin: 0;}
.productCarousel.shopTegel .flickity-button {display: none;}
.productCarousel.shopTegel .artikel .inner {border: 0;}

.shopHeader {max-width: var(--max-width); padding: 0 30px; margin: 0 auto; box-sizing: border-box;}
.shopHeader .blok.headerShop {background: var(--kleur4); border-radius: var(--border-radius); display: grid; grid-template-columns: 3fr 2fr; overflow: hidden;}
.shopHeader .blok.headerShop .linksVak {padding: var(--padding-20); box-sizing: border-box;}
.shopHeader .blok.headerShop .rechtsVak.afbeelding {line-height: 0;}
.shopHeader .blok.headerShop .rechtsVak.afbeelding img {height: 100% !important; object-fit: cover; overflow: hidden; width: 100% !important;}

.shopFooter {border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box;}
.shopFooter img {max-width: 100% !important; height: auto !important;}

.shopSortOptie {border: 0; border-radius: var(--border-radius); background: var(--kleur4); padding: 10px;}
.shopSortOptie .sorteerLijst {margin: auto 0 auto auto}

.blader_holder {border: 0; margin: 20px 0 0 0; border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; overflow: auto;}
.blader_tabel1_n a {border: 0; background-color: var(--kleur5); border-radius: var(--border-radius); color: var(--fontkleur2); font-size: 15px; font-weight: normal;}
.blader_tabel1_s, .blader_tabel1_n:hover, .blader_tabel1_n:hover a {background-color: #ebf0f1; color: var(--fontkleur1) !important;}
.blader_tabel1_n, .blader_tabel1_s {border: 0; border-radius: var(--border-radius); color: var(--fontkleur1) !important; font-size: 15px; height: 2.15em; line-height: 2.15em; width: 2.15em; font-weight: normal;}

.shopCategorieHolder {grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));}
.shopCategorieHolder .categorie {border: 0; border-radius: var(--border-radius); background: var(--kleur4); transition: .3s all ease;}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}
.shopCategorieHolder .categorie .afbeeldingHouder .afbeelding img {transition: .2s all ease;}
.shopCategorieHolder .categorie:hover .afbeeldingHouder .afbeelding img {transform: translateY(-10px);}
.shopCategorieHolder .categorie .titel h2 {color: var(--fontkleur1);}

.art-Sheet .art-Block {border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20) !important; box-sizing: border-box;}
.art-Sheet .art-Block .CMSMenu1ul .CMSMenuLink1li, .art-Sheet .art-Block .CMSMenu1ul .CMSMenuLink1liSel {font-size: 15px; color: var(--fontkleur1) !important;}

.art-Sheet .art-sidebar1 {padding-right: 30px;}
.art-Sheet .art-sidebar1 .catMenu0ul .catMenuLink0li, .art-Sheet .art-sidebar1 .catMenu0ul .catMenuLink0liSel {font-size: 15px; color: var(--fontkleur1) !important;}
.art-Sheet .art-sidebar1 .catMenu1ul .catMenuLink1li, .art-Sheet .art-sidebar1 .catMenu1ul .catMenuLink1liSel {font-size: 14px; color: var(--fontkleur2) !important; padding: 0 0 0 10px;}
.art-Sheet .art-sidebar1 .catMenu2ul .catMenuLink2li, .art-Sheet .art-sidebar1 .catMenu2ul .catMenuLink2liSel {font-size: 14px; color: var(--fontkleur2) !important; padding: 0 0 0 20px; margin-left: 0;}

.art-Sheet .art-sidebar1 .filters {border: 0; border-radius: var(--border-radius); overflow: hidden;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroepHouder .kenmerkgroep {background: var(--kleur4);}
.art-Sheet .art-sidebar1 .filters .kenmerkgroepHouder .kenmerkgroep .tonen {text-decoration: underline; cursor: pointer; color: var(--fontkleur1); font-size: 14px; margin: 10px 0 0 0; position: relative; transition: .3s all ease;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroepHouder .kenmerkgroep .tonen:hover {color: var(--kleur2);}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken {z-index: 1; overflow: hidden; position: relative; margin-top: 0; height: auto; padding: 0; opacity: 1; transition: .3s all ease; margin: 0; border-radius: 0;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken.gesloten {max-height: 216px;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken.open {max-height: 100%;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk {border-radius: var(--border-radius);}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: var(--kleur5);}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk .kenmerkAfbeelding {display: none;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk .nietBeschikbaar {display: none;}
.art-Sheet .art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {background-color: var(--kleur4);}
.art-Sheet .art-sidebar1 .filters .actieveKenmerken {padding: 20px 0;}

.shopTegel {grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr)); transition: opacity .3s ease;}
.shopTegel.loading {opacity: .3; pointer-events: none;}

.shopTegel .artikel .inner {border: 0; border-radius: var(--border-radius);}
.shopTegel .artikel .inner:hover {box-shadow: unset;}
.shopTegel .artikel .inner .afbeeldingHouder img {transition: .2s all ease;}
.shopTegel .artikel .inner:hover .afbeeldingHouder img {transform: translateY(-10px);}
.shopTegel .artikel .inner .omschrijving {margin: 0 0 10px 0;}
.shopTegel .artikel .inner .omschrijving .h2.titel {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25em; font-size: inherit; font-weight: 700; display: block; margin: 0;}
.shopTegel .artikel .inner .meerinfo .kenmerkArt {border: 0; padding: 2px 0; font-size: 13px;}
.shopTegel .artikel .inner .meerinfo .kenmerkArt .kenmerkPlaatje {display: none;}
.shopTegel .artikel .inner .meerinfo .kenmerkArt a {text-decoration: none;}
.shopTegel .artikel .inner .meerinfo .kenmerkArt .groep {font-size: 0; min-width: unset; padding: 0; line-height: 0;}
.shopTegel .artikel .inner .meerinfo .kenmerkArt .groep img {max-width: 23px; width: 100% !important; height: auto !important; position: relative; margin-right: 5px; margin-bottom: auto;}

.shopTegel .artikel .inner .prijzen {margin: auto 0 0 0;}
.shopTegel .artikel .inner .prijzen .valuta {display: none;}
.shopTegel .artikel .inner .prijzen .prijs {font-size: 17px; color: var(--fontkleur1);}
.shopTegel .artikel .inner .bestellen {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px; z-index: unset;}
.shopTegel .artikel .inner .bestellen .detailKnop {background: var(--kleur5); border-radius: var(--border-radius); pointer-events: none; color: var(--fontkleur1); text-decoration: none; line-height: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 5px;}
.shopTegel .artikel .inner .bestellen .bestelknop {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px; z-index: 1; position: relative;}
.shopTegel .artikel .inner .bestellen .bestelknop input {text-align: center; padding: 12px 0; border: 0; margin: 0; background-color: var(--kleur5); width: 100%;}
.shopTegel .artikel .inner .bestellen .bestelknop a {color: var(--kleur4); display: flex; background-color: var(--kleur3); border: 0; padding: 0; margin: 0;}
.shopTegel .artikel .inner .bestellen .bestelknop a::after {content: "\f290"; font-weight: lighter; font-family: "Font Awesome 5 Pro"; font-size: 17px; margin: auto;}
.shopTegel .artikel .inner .bestellen .bestelknop a span {display: none;}
.shopTegel .artikel .inner .voorraad {line-height: normal; margin: 10px 0 0 0;}
.shopTegel .artikel .inner .voorraad .status {display: flex; align-items: center;}
.shopTegel .artikel .inner .voorraad .status .image {display: block;}
.shopTegel .artikel .inner .voorraad .status .toelichting {line-height: 1.25em; font-size: 11px;}

.shopTegel .artikel .inner .kortingLabel:empty {display: none;}
.shopTegel .artikel .inner .kortingLabel {position: absolute; right: 0; top: 0; font-weight: 600; margin: 10px 10px 0; line-height: 1; transition: .3s all ease; background: var(--kleur5); border-radius: var(--border-radius); color: var(--fontkleur1); text-align: center; box-sizing: border-box; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; z-index: 1;}
.shopTegel .artikel .inner .kortingLabel .artKortingPrijsPercentage {font-size: 16px; margin: auto; display: flex;}
.shopTegel .artikel .inner .kortingLabel .artKortingPrijsPercentage::before {content: "-";}
.shopTegel .artikel .inner .kortingLabel .artKortingPrijsPercentage .toelichting {display: none;}

.shopLijst .artikel {border: 0; border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box;}
.shopLijst .artikel:hover {box-shadow: unset;}
.shopLijst .artikel .inner .top10 {width: 50px; margin: auto; font-size: 25px; font-weight: bold;}
.shopLijst .artikel .inner .top10::before {content: "#"; opacity: .15; padding-right: 0.25em;}

.shopLijst .artikel .inner .afbeeldingHouder {pointer-events: none;}
.shopLijst .artikel .inner .afbeeldingHouder img {transition: .2s all ease;}
.shopLijst .artikel:hover .inner .afbeeldingHouder img {transform: translateY(-10px);}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken {display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0 0;}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt {border: 0; padding: 0; font-size: 13px;}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt .groep, .shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt .kenmerkPlaatje {display: none;}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt a {text-decoration: none;}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.land::before {content: "\f041"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--fontkleur1); font-weight: lighter;}
.shopLijst .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.jaar::before {content: "\f133"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: var(--fontkleur1); font-weight: lighter;}

.shopLijst .artikel .inner .inhoud .prijzen {width: auto;}
.shopLijst .artikel .inner .inhoud .prijzen .prijs {font-size: 17px; color: var(--fontkleur1);}
.shopLijst .artikel .inner .inhoud .prijzen .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--kleur3);}
.shopLijst .artikel .inner .inhoud .prijzen .bestellen .bestelknop input {width: 40px;}

.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 1fr 340px; gap: 20px; margin: 0; grid-template-areas: "a b" "c b" "d b";}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;}

.artikel.detail .detailinkollommen .links {grid-area: a;}
.artikel.detail .detailinkollommen .links .grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--kleur4); padding: var(--padding-20); border-radius: var(--border-radius); box-sizing: border-box;}
.artikel.detail .detailinkollommen .links .grid .afbeelding .thumbnailGallery button {display: none;}
.artikel.detail .detailinkollommen .links .grid .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height: calc(100vh - 350px); padding-bottom: 0; max-height: 450px;}
.artikel.detail .detailinkollommen .links .grid .informatie {display: flex; flex-direction: column;}
.artikel.detail .detailinkollommen .links .grid .informatie .kort {margin: 0 0 10px 0; display: flex; gap: 5px;}
.artikel.detail .detailinkollommen .links .grid .informatie .kort div {display: flex; align-items: center;}
.artikel.detail .detailinkollommen .links .grid .informatie .kort div:empty {display: none;}
.artikel.detail .detailinkollommen .links .grid .informatie .kort div::after {content: ",";}
.artikel.detail .detailinkollommen .links .grid .informatie .kort div:last-child:after {display: none;}
.artikel.detail .detailinkollommen .links .grid .informatie .kort div img {margin: 0 10px 0 0; max-width: 15px; width: 100%; border-radius: 100%; border: 1px solid #333; padding: 1px;}
.artikel.detail .detailinkollommen .links .grid .informatie .merkknop {font-weight: 600; cursor: pointer; position: relative; line-height: 1.25em; transition: .3s all ease; background: var(--kleur5); border-radius: var(--border-radius); color: var(--fontkleur1); padding: 15px; text-align: center; width: 100%; box-sizing: border-box; display: block; margin: auto 0 0 0;}
.artikel.detail .detailinkollommen .links .grid .informatie .merkknop::after {content: "\f0da"; font-family: "Font Awesome 5 Pro"; margin-left: 10px; color: inherit; opacity: .3;}
.artikel.detail .detailinkollommen .links .grid .informatie .merkknop .merk {display: inline-block;}
.artikel.detail .detailinkollommen .links .grid .informatie .meldingLand {padding: 10px; border-radius: var(--border-radius); margin: 10px 0; font-size: 13px; box-sizing: border-box; text-align: center; border: 2px solid var(--kleur5);}
.artikel.detail .detailinkollommen .links .grid .informatie .meldingLand img {line-height: 0; position: relative; top: 2px; margin-right: 5px;}
.artikel.detail .detailinkollommen .links .grid .informatie .vrijveldHolder {display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px;}
.artikel.detail .detailinkollommen .links .grid .informatie .vrijveldHolder textarea {height: 120px;}

.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt {border: 0; font-size: 13px; padding: 2px 0;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt .groep {min-width: 40px; color: inherit; display: flex;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt .groep img {order: -1; max-width: 23px; width: 100% !important; height: auto !important; position: relative; margin-right: 5px; margin-bottom: auto;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt .groep::after {content: ":";}

.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.garantie {background: #faf8c5; border-radius: var(--border-radius);}

.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt .kenmerken {font-weight: bold;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje {display: none;}

.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.bottelaar {border: 0; font-size: 13px; padding: 2px 0;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.bottelaar .groep {min-width: 75px; color: inherit;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.bottelaar .groep::after {content: ":";}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.bottelaar .kenmerken {font-weight: bold; margin-left: 10px;}

.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.alcoholpercentage .titel::after {content: "%"; margin-left: 0.2em;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.inhoud .titel::after {content: "ml"; margin-left: 0.2em;}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.gewicht::after {content: "gram"; margin-left:0.2em}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.hoogte::after {content: "mm"; margin-left:0.2em}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.diameter::after {content: "mm"; margin-left:0.2em}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.volume::after {content: "ml"; margin-left:0.2em}
.artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken .kenmerkArt.aantal::after {content: "stuks"; margin-left:0.2em}

.artikel.detail .detailinkollommen .links .kortingLabel:empty {display: none;}
.artikel.detail .detailinkollommen .links .kortingLabel {position: absolute; right: 0; top: 0; font-weight: 600; line-height: 1; transition: .3s all ease; background: var(--kleur5); border-radius: var(--border-radius); color: var(--fontkleur1); text-align: center; box-sizing: border-box; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; z-index: 1;}
.artikel.detail .detailinkollommen .links .kortingLabel .artKortingPrijsPercentage {font-size: 16px; margin: auto; display: flex;}
.artikel.detail .detailinkollommen .links .kortingLabel .artKortingPrijsPercentage::before {content: "-";}
.artikel.detail .detailinkollommen .links .kortingLabel .artKortingPrijsPercentage .toelichting {display: none;}

.artikel.detail .detailinkollommen .rechts {top: 160px; position: sticky; margin-bottom: auto; grid-area: b;}

.artikel.detail .detailinkollommen .rechts .blok {background: var(--kleur4); border-radius: var(--border-radius); padding: var(--padding-20); box-sizing: border-box;}

.artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs {font-weight: bold; font-size: 28px; color: var(--fontkleur1);}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .valuta {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .eigenStaffelPresentatie {display: flex; gap: 5px; background: #faf8c5; padding: 6px 10px; margin: 10px 0; border-radius: var(--border-radius); font-size: 12px;}
/* .artikel.detail .detailinkollommen .rechts .blok .prijzen .prijsPerLiter {display: none;} */

.artikel.detail .detailinkollommen .rechts .blok .bestellen {margin: 20px 0;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop {display: grid; grid-template-columns: 1fr 45px; gap: 10px; grid-template-areas: "a a" "b c";}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop .aantalMinPlus {grid-area: a; max-width: 100%; grid-column: span 2; margin: 0; border: 0; border-radius: var(--border-radius); overflow: hidden;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel {grid-area: b; line-height: 1; background: var(--kleur3);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten {grid-area: c; margin: 0;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a {display: block; line-height: 1; text-align: center; font-weight: lighter; color: var(--kleur1); padding: 12px; font-size: 15px; background-color: var(--kleur5); border-radius: var(--border-radius);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .toelichting {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .image {padding: 0;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop .aantalMinPlus .min, 
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop .aantalMinPlus .plus {flex: 1; background: var(--kleur5); padding: 15px;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop .aantalMinPlus input {width: unset !important; flex: 1; margin: 0; background: var(--kleur5); border: 2px solid #E3E4E5; border-top: 0; border-bottom: 0;}
.artikel.detail .detailinkollommen .rechts .blok .voorraad {line-height: normal;}
.artikel.detail .detailinkollommen .rechts .blok .voorraad .status {display: flex; align-items: center;}
.artikel.detail .detailinkollommen .rechts .blok .voorraad .status .image {display: block;}
.artikel.detail .detailinkollommen .rechts .blok .voorraad .status .toelichting {line-height: 1.25em; font-size: 13px;}
.artikel.detail .detailinkollommen .rechts .blok .houdMeOpHoogteVoorraad {padding: 0; background-color: unset; border-radius: 0; margin: 0;}
.artikel.detail .detailinkollommen .rechts .blok .houdMeOpHoogteVoorraad form {display: grid; grid-template-columns: 1fr 40px;}
.artikel.detail .detailinkollommen .rechts .blok .houdMeOpHoogteVoorraad form input#houdOphoogteEmail {margin: 0; border-radius: 3px 0 0 3px; border: 1px solid #000; border-right: 0;}
.artikel.detail .detailinkollommen .rechts .blok .houdMeOpHoogteVoorraad form button {padding: 13px; background-color: var(--kleur3); color: var(--kleur4); border-radius: 0 3px 3px 0;}
.artikel.detail .detailinkollommen .rechts .blok .houdMeOpHoogteVoorraad form button::after {content: "\f0e0"; margin: 0; font-size: 15px; font-family: "Font Awesome 5 Pro";}

.artikel.detail .detailinkollommen .rechts .informatie-advies {background: var(--kleur4); border-radius: var(--border-radius); margin: 20px 0 0 0;}
.artikel.detail .detailinkollommen .rechts .informatie-advies .klantenservice {padding: var(--padding-20); box-sizing: border-box; border-bottom: 2px solid var(--kleur5);}

.artikel.detail .detailinkollommen .omschrijving {grid-area: c; background: var(--kleur4); border-radius: var(--border-radius); padding: var(--padding-20); box-sizing: border-box;}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud a.knop.meer {display: block; margin: 0 auto; max-width: 160px; cursor: pointer;}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud a.knop.meer::after {content: "\f078";}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud > .tabExtra.lang {overflow: hidden; max-height: 260px; transition: .2s all ease; position: relative;}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud > .tabExtra.lang::after {background: linear-gradient(0deg, #fff, hsla(0, 0%, 100%, 0)); left: 0; right: 0; transition: opacity .3s cubic-bezier(.39,.575,.565,1); bottom: 0; content: ""; height: 4rem; position: absolute;}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud > .tabExtra.lang.open {overflow: unset; max-height: unset;}
.artikel.detail .detailinkollommen .omschrijving #tabArtikelOmschrijvingInhoud > .tabExtra.lang.open::after {display: none;}

.uspFooter {max-width: var(--max-width); margin: 0 auto; padding: 0 30px; box-sizing: border-box;}
.uspFooter .content {background-color: var(--kleur4); border-radius: 3px 3px 0 0; display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr;}
.uspFooter .content span {font-size: 13px; flex: 1; line-height: 1em; padding: 15px; box-sizing: border-box; text-align: center;}
.uspFooter .content span a {text-decoration: none;}
.uspFooter .content span::before {content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: var(--kleur2); margin-right: 10px; font-size: 18px; position: relative; top: 2px;}

.pageFooterHolder {background-color: var(--kleur4); box-shadow: 0 -14px 12px -12px rgb(200 200 200 / 40%);}
.pageFooterHolder .pageFooter {max-width: var(--max-width); color: var(--fontkleur1); padding: 50px 30px;}
.pageFooterHolder .pageFooter .grid-4x {grid-template-columns: 1fr 1fr 1fr 1fr;}
.pageFooterHolder .pageFooter .grid-4x .h2 {color: var(--fontkleur1); font-size: 16px;}
.pageFooterHolder .pageFooter .grid-4x a {text-decoration: none; color: var(--fontkleur1);}
.pageFooterHolder .pageFooter .grid-4x a:hover {opacity: .3;}
.pageFooterHolder .pageFooter .grid-4x a.knop:hover {opacity: 1;}
.pageFooterHolder .pageFooter .grid-4x > div {display: flex; flex-direction: column;}
.pageFooterHolder .pageFooter .grid-4x .content {display: flex; flex-direction: column; flex: 1;}
.pageFooterHolder .pageFooter .grid-4x .content a.knop {margin: auto auto 0 0;}

.pageFooterKnoppenHolder {background-color: var(--kleur4);}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--max-width); color: var(--fontkleur1); padding: 20px 30px; align-items: center;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; margin-right: auto;}

.hoverMenu {left: 0; right: 0; width: 100%; padding: 30px; max-width: var(--max-width); overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; transform: unset; top: 100%; display: grid; grid-template-columns: 1fr; box-sizing: border-box;}
.hoverMenu::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FFF; z-index: -1;}
.hoverMenu.actief {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11;}
.hoverMenu .kolommen {width: 100%; padding: 0; box-sizing: border-box; display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.hoverMenu .kolommen .kolom > ul {opacity: 1; visibility: visible; position: relative; box-shadow: unset; border: 0; transition: unset; background: unset;}
.hoverMenu .kolommen .kolom > ul::before {display: none;}
.hoverMenu .kolommen .kolom > ul.twee-col {column-count: 2; column-gap: 30px;}
.hoverMenu .kolommen .kolom.twee-col {grid-row: span 3; grid-column: span 2;}
.hoverMenu .kolommen .kolom > ul li a {color: var(--fontkleur2); position: relative; font-size: 15px; line-height: 1; border: 0; padding: 5px 0; transition: .3s all ease; width: unset; display: inline-block;}
.hoverMenu .kolommen .kolom a::after {content: ""; display: block; position: absolute; bottom: 2px; left: 0; width: 0; height: 1px; background-color: var(--kleur3); transition: all .3s ease;}
.hoverMenu .kolommen .kolom a:hover::after {width: 100%;}

.hoverMenu .kolommen .kolom > ul li.catMenuVerwijzingSubMenu a {color: var(--kleur3);}
.hoverMenu .kolommen .kolom > ul li.catMenuVerwijzingSubMenu a::after {width: 100%;}

.hoverMenu .kolommen .kolom > ul li a:hover {text-decoration: none; color: var(--kleur3); background: unset;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}
.hoverMenu .kolommen .kolom .titel a {font-size: 16px; font-weight: bold; color: var(--fontkleur1); line-height: 1; padding: 10px 0;}
.hoverMenu .categorie {padding: var(--padding-20); margin: auto 0; order: 2; display: none;}
.hoverMenu .categorie .kop {display: none;}
.hoverMenu .categorie .afbeelding {float: unset; margin: 0;}
.hoverMenu .kolommen .kolom {padding: 0; width: unset;}
.hoverMenuBg {z-index: 1; opacity: 0; position: fixed; left: 0; top: 0; right: 0; background: rgb(0 0 0 / 20%); background-repeat: repeat; transition: opacity 0.3s ease 0s;}
.hoverMenuBg.actief {opacity: 1; bottom: 0;}

.compact .hoverMenu .kolommen {grid-template-columns: 1fr 1fr; gap: 0;}
.compact .hoverMenu .kolommen .kolom .titel a {color: var(--fontkleur2); position: relative; font-size: 15px; line-height: 1.5em; border: 0; padding: 5px 0; transition: .3s all ease; width: unset; display: inline-block; font-weight: normal;}
.compact .hoverMenu .kolommen .kolom .titel a:hover {text-decoration: none; color: var(--kleur3);}

.compact .hoverMenu .categorie {display: block; order: unset; padding: 0; font-size: 16px; font-weight: bold; color: var(--fontkleur1); line-height: 1; padding: 10px 0;}
.compact .hoverMenu .categorie .kop {display: block;}

.kassaArtikelen .artikel .aantalMinPlus {background: var(--kleur5); border: 0; border-radius: var(--border-radius);}
.kassaArtikelen .artikel .aantalMinPlus .min, .kassaArtikelen .artikel .aantalMinPlus .plus {padding: 8px !important; flex: 1;} 
.kassaArtikelen .artikel .aantalMinPlus input {padding: 8px; border: 2px solid #E3E4E5; border-top: 0; border-bottom: 0; flex: 1; background: var(--kleur5);}

.kassaArtikelen .artikel .voorraad {line-height: normal; margin: 10px 0 0 0;}
.kassaArtikelen .artikel .voorraad .status {display: flex; align-items: center;}
.kassaArtikelen .artikel .voorraad .status .image {display: block;}
.kassaArtikelen .artikel .voorraad .status .toelichting {line-height: 1.25em; font-size: 11px;}

.kassaArtikelen .artikel .meldingLand {padding: 5px; border-radius: var(--border-radius); margin: 10px 0; font-size: 11px; box-sizing: border-box; text-align: center; border: 2px solid var(--kleur5);}
.kassaArtikelen .artikel .meldingLand img {line-height: 0; position: relative; top: 2px; margin-right: 5px; height: auto !important; width: 12px !important;}

.stappenbalk {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}
.stappenbalk li {text-transform: unset; font-size: 12px;}
.stappenbalk li::before {z-index: 2; background: #DCDEE0;}
.stappenbalk li.klaar a::before {z-index: 2; background-color: var(--kleur2);}
.stappenbalk li.bezig::before {background-color: var(--kleur3);}
.stappenbalk li::after {z-index: 1; border-color: var(--kleur5);}
.stappenbalk li.klaar::after {border-color: var(--kleur2);}

.kassainkollommen {gap: 20px;}
.kassainkollommen > .rechts {margin: 0;}
.kassainkollommen > .rechts .sticky {top: 160px;}
.kassainkollommen > .rechts .blok {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}

.stap a.knop.vorige {display: inline-block; background: var(--kleur4); margin-right: auto; margin-bottom: auto;}
.stap a.knop.vorige::after {display: none;}
.stap a.knop.vorige::before {content: "\f053"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 12px;}

.stap.drie a.knop.vorige {margin-left: 10px; margin-top: 20px;}
.stap.vier a.knop.vorige {margin-top: 20px;}

.stap.een .kassainkollommen .links .kassaArtikelen  {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}
.stap.een .kassainkollommen .links .kassaArtikelen th {border-color: var(--kleur5); text-transform: none;}
.stap.een .kassainkollommen .links .kassaArtikelen .artikel td.regelVolgorde {text-align: right;}
.stap.een .kassainkollommen .links .kassaArtikelen .artikel .aantallen {position: relative;}
.stap.een .kassainkollommen .links .kassaArtikelen .artikel .aantallen::before {content: "\f2f9"; font-family: "Font Awesome 5 Pro"; cursor: pointer; font-size: 12px; position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto;}

.stap.een .kassainkollommen .rechts .blok .couponcodeHouder {background: unset; padding: 0;}
.stap.een .kassainkollommen .rechts .blok .couponcodeHouder .couponcode {background: unset; display: flex; gap: 10px; align-items: center;}
.stap.een .kassainkollommen .rechts .blok .couponcodeHouder .couponcode #CouponCodeV {border: 1px solid #DCDEE0; border-radius: var(--border-radius); margin: 0;}
.stap.een .kassainkollommen .rechts .blok .couponcodeHouder .couponcode a.wButControleer {display: block; line-height: 1; padding: 13px 20px; border-radius: var(--border-radius); margin: 0;}
.stap.een .kassainkollommen .rechts .blok a.knop.wenskaarten, .stap.een .kassainkollommen .rechts .blok a.knop.verpakkingen {margin: 0 0 10px 0; display: flex; align-items: center;}
.stap.een .kassainkollommen .rechts .blok a.knop.wenskaarten::before {content: "\f663"; font-family: "Font Awesome 5 Pro"; margin-right: 10px;}
.stap.een .kassainkollommen .rechts .blok a.knop.verpakkingen::before {content: "\f06b"; font-family: "Font Awesome 5 Pro"; margin-right: 10px;}
.stap.een .kassainkollommen .rechts .blok a.knop.wenskaarten::after, .stap.een .kassainkollommen .rechts .blok a.knop.verpakkingen::after {margin-left: auto;}

.stap.twee.nietIngelogd .rechts {margin: 0;}
.stap.twee.nietIngelogd .stappenbalk,
.stap.twee.nietIngelogd .kassainkollommen .links,
.stap.twee.nietIngelogd .kassainkollommen .rechts .sticky {display: none;}
.stap.twee.nietIngelogd .kassainkollommen {display: block;}
.stap.twee.nietIngelogd .kassainkollommen {margin: 0 auto; width: 100%; max-width: 350px;}
.stap.twee.nietIngelogd .blok.bestaandeKlant {display: block;}

.geslacht, .contactpersoon .tussenvoegsel {display: none;}
.contactpersoon .voornaam, .contactpersoon .achternaam {width: 50% !important;}

.stap.twee .blok.bestaandeKlant, .stap.twee .resBestaandeklant .button {display: none;}
.stap.twee .blok.bestaandeKlant h2 {font-size: 18px; font-weight: bold; line-height: inherit; color: var(--fontkleur1);}
.stap.twee .blok.bestaandeKlant .inloggen .knoppen {display: block;}
.stap.twee .blok.bestaandeKlant .inloggen .knoppen a.button {display: block; width: 100%; box-sizing: border-box; background: var(--kleur3); color: #FFF;}
.stap.twee .blok.bestaandeKlant .inloggen .knoppen a.kwijt {display: block; margin: 0 0 10px 0;}
.stap.twee .blok.bestaandeKlant .inloggen .knoppen span {margin: 10px 0 0 0; display: block;}
.stap.twee .blok.bestaandeKlant .inloggen .registreer a {display: block; color: #afafaf; font-weight: normal; font-size: 14px; text-decoration: none;}
.stap.twee .blok.bestaandeKlant .inloggen a.zonderInloggen {display: block; margin: 20px 0 10px 0; cursor: pointer; background: #fdf0e3; color: var(--fontkleur1);}
.stap.twee .blok.bestaandeKlant .inloggen a.zonderInloggen::after {display: none;}

.stap.twee .links {display: flex; flex-direction: column; gap: 20px; margin: 0;}
.stap.twee .links > div {margin-bottom: auto; background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius); margin: 0; width: 100%;}
.stap.twee .links > div .blokholder {padding: 0; border-radius: 0; background: unset; margin: 0;}

.stap.twee .bestaandAdres {border: 1px solid var(--kleur5); background: #f5f6f7;}
.stap.twee .adres .geselecteerd, .stap.twee .bestaandAdres:hover {border: 1px solid var(--kleur2) !important; background: #fbfdf8;}
.stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {display: none;}
.stap.twee .tekstNieuwAdres a {font-family: inherit; font-size: 14px; padding: 13px 20px; margin: 0 0 10px 0; border-radius: var(--border-radius); color: var(--fontkleur1); background: var(--kleur5); line-height: 1; font-weight: 500; text-decoration: none !important;}

.stap.twee .telefoon {display: block;}
.stap.twee .telefoon .vast {margin: 0; width: 100%;}
.stap.twee .telefoon .mobiel {display: none;}

.nawVeld {margin: 0 0 15px 0;}

.stap.drie .links > div {margin-bottom: auto; background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}
.stap.drie .links > div .blokholder {padding: 0; border-radius: 0; background: unset; margin: 0;}
.stap.drie .links > div .blokholder .regel {border: 1px solid var(--kleur5); background: #f5f6f7;}
.stap.drie .links > div .blokholder .regel.actief {border: 1px solid var(--kleur2); background: #fbfdf8;}
.stap.drie .links > div .blokholder .regel .label {min-width: 25px; max-width: 25px;}
.stap.drie .links > div .blokholder .regel.lever .bedrag {margin: 10px 0 0 auto;}
.stap.drie .links > div .blokholder .regel.lever .label {margin: 5px 10px 0 0;}
.stap.drie .links > div .blokholder .regel .bedrag .gratis {background: var(--kleur2);}
.stap.drie .links > div .blokholder .regel .select {display: block;}
.stap.drie .links > div .blokholder .regel .inhoud .myParcelPickupLocations {margin: 10px 0;}
.stap.drie .links > div .blokholder .regel .inhoud .myParcelPickupLocations .myParcelPickupLocationsTitel {margin: 0 0 5px 0;}
.stap.drie .links > div .blokholder .regel .inhoud .myParcelPickupLocations a.button {display: block; width: 100%; box-sizing: border-box; margin: 10px 0; background: var(--kleur1); color: var(--kleur4);}
.stap.drie .links > div .blokholder .regel .inhoud .myParcelPickupLocations h4 {font-size: 14px; font-weight: bold;}

.stap.drie .blokholder > .titel {margin: 0;}
.stap.drie .blokholder > .subtitel {margin-bottom: 15px;}

.stap.vier .kassainkollommen .links .stap4Gegevens {display: none;}
.stap.vier .kassainkollommen .links .kassaArtikelen  {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}
.stap.vier .kassainkollommen .links .kassaArtikelen th {border-color: var(--kleur5);}

.stap .totalen table .totaalExclBtw td {border: 0; font-weight: normal; padding: 0; color: var(--fontkleur1);}
.stap .totalen .totaalTeBetalen td {font-size: 16px; color: var(--fontkleur1); border-top: 2px solid var(--kleur5); padding: 10px 0;}
.stap .totalen .stappenKnop {margin-top:20px;}
.stap .totalen .stappenKnop a {background: var(--kleur3); font-weight: normal;}
.stap .totalen table .bedrag .gratis {background: var(--kleur2);}
.stap .totalen table .totaalVerzendkosten .omschrijving, .stap .totalen table .totaalBetalingskosten .beschrijving .omschrijving, .stap .totalen table .totaalArtikelen {display: none;}

.stap.een .totalen table .totaalExclBtw,
.stap.drie .totalen table .totaalExclBtw, 
.stap.vier .totalen table .totaalExclBtw  {display: none;}

.stap.een .totalen table .totaalBtw,
.stap.drie .totalen table .totaalBtw, 
.stap.vier .totalen table .totaalBtw  {display: none;}

.stap.bedanktscherm {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}

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

.account_txtBlok {border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box;}
.blokholder.accountWijzigen {border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box;}
.blokholder.accountWijzigen.adressen {margin: 20px 0 0 0;}
.blokholder.accountWijzigen .titel {padding: 0; color: var(--fontkleur1); background-color: unset; border-radius: unset; margin: 0;}
.blokholder.accountWijzigen .content {padding: 0;}
.blokholder.accountWijzigen .content .adresHolder .adressen .item {border-radius: var(--border-radius); background-color: var(--kleur5); border: 0;}
.blokholder.accountWijzigen .content .adresHolder .adressen .item.open {background: var(--kleur4); bottom: 100%; z-index: 1;}

.zoekenOrders {display: flex; width: 100%; border: 0; border-radius: var(--border-radius); background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box;}
.zoekenOrders .veld {display: block; width: 100%;}
.zoekenOrders .veld input {font-style: normal; font-size: inherit; width: 100%; padding: 15px; box-sizing: border-box; line-height: normal;}
.zoekenOrders .knop {background: var(--kleur5); padding: 15px; box-sizing: border-box; line-height: 1; color: #afafaf; font-weight: lighter; font-size: 17px;}

table.lijst tr:nth-child(even) th, table.lijst tr:nth-child(even) td {background: var(--kleur5);}
table.lijst td.knoppenHouder {display: table-cell;}

.meldingHouder .melding {text-align: left; border-radius: var(--border-radius); overflow: hidden; min-width: 450px; max-width: 450px;}
.meldingHouder .melding .icoon {display: none;}
.meldingHouder .melding h2 {font-size: 19px;}
.meldingHouder .melding .knoppen {background: #f7f9fa; margin: 0 -30px -30px; padding: var(--padding-20);}
.meldingHouder .melding .knoppen a.bevestigen {background: var(--kleur2); color: #FFF;}
.meldingHouder .melding .knoppen a.bevestigen::after {display: none;}

#extraSchermWinkelmand .schermWinkelMandje .melding {background: var(--kleur4); border-radius: var(--border-radius); box-shadow: unset;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven::after {background-color: #fbfdf8; opacity: 1; z-index: -1;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .icoon {display: none;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud p {margin: 0; font-weight: bold; line-height: 1.25em;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud .h5 {font-size: 14px; margin: 0;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen {border: 0;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {background: var(--kleur3);}

.sitemap1 {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius); border: 0;}

.inloggen_holder {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius); max-width: 380px; border: 0;}
.inloggen_holder .inloggen_content {border: 0; padding: 0;}
.inloggen_holder .inloggen_content h2 {font-size: 18px; font-weight: bold; line-height: inherit; color: var(--fontkleur1);}
.inloggen_holder .inloggen_content .knoppen button {display: block; width: 100%; box-sizing: border-box;}
.inloggen_holder .inloggen_content .knoppen a {display: block; margin: 0 0 10px 0;}
.inloggen_holder .inloggen_content .knoppen span {margin: 10px 0 0 0; display: block;}
.inloggen_holder .inloggen_content a.zonderInloggen {display: block; margin: 20px 0 10px 0; cursor: pointer; background: var(--kleur3); color: var(--kleur4);}

#inschijfformulier_holder {background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius); border: 0; max-width: 900px; margin: 0 auto;}
#inschijfformulier_holder .inschrijvenKolom { flex-direction: column; gap: 20px;}
#inschijfformulier_holder .inschrijvenKolom .blokholder > .titel {color: var(--fontkleur1); font-size: 16px; font-weight: 700; margin-bottom: 15px;}
#inschijfformulier_holder .inschrijvenKolom .blokholder {background: unset; border: 0; padding: 0; border-radius: unset; margin: 0;}
#inschijfformulier_holder .inschrijvenKolom .blokholder.knopVersturen .button {font-weight: normal; font-size: 14px; padding: 13px 20px; display: block; width: 100%; box-sizing: border-box; background-color: var(--kleur2); color: var(--kleur4);}
#inschijfformulier_holder .inschrijvenKolom > .rechts {margin: 0; width: 100%; display: flex; flex-direction: column; gap: 20px;}

.flickity-prev-next-button .flickity-button-icon {position: absolute; left: 20%; top: 20%; width: 60%; height: 60%;}

.bovenkantHolder .bovenkant .resZoeken {margin: auto 0; display: none; font-size: 23px; color: var(--kleur4); cursor: pointer;}
.bovenkantHolder .bovenkant .resMenubalk {margin: auto 20px auto 0;}
.bovenkantHolder .bovenkant .resMenubalk .resMenubalkinhoud a.resMenucategorieknop {margin: 0; color: var(--kleur4); font-size: 25px;}

.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder {top: 100%}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud {border-bottom: 10px solid var(--kleur5);}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem a::before {content: "\f570"; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 8px;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.inloggen a::before,
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.mijnGegevens a::before {content: "\f2bd";}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.winkelmand a::before {content: "\f290";}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.favorieten a::before {content: "\f004";}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.mijnOrders a::before {content: "\f570";}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .resMenuItem.uitloggen a::before {content: "\f08b";}

/* .bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal { padding: 0; height: 45px; width: 100%; line-height: 45px; min-width: unset; box-sizing: border-box;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul {max-height: 43px; border-radius: 0; width: 100%; display: flex ; flex-direction: column; gap: 15px; box-sizing: border-box; padding: 15px;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal.open ul {max-height: max-content;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li {padding: 0; display: flex; align-items: center;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li a {display: flex; align-items: center; text-decoration: none;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {display: flex; width: 100%; align-items: center; padding: 0;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li.actief .omschrijving::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; position: relative; display: inline-block; color: #333; font-size: 14px; bottom: 0; margin-left: auto;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding {margin-right: 5px;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding::before {display: none;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublok.een .resMenublokinhoud .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding img {object-fit: cover; aspect-ratio: 1; height: 100%; border-radius: 100%; max-width: 18px;} */


.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem a {display: flex; border-bottom: 1px solid var(--kleur5); line-height: 1; align-items: center; padding: 15px; font-size: 15px;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem.favorieten a span {font-size: 11px; min-width: 15px; border-radius: 100%; border: 0; margin: auto 0 auto 10px; color: #FFF; background-color: var(--hoofd-kleur);}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem.active > a {color: var(--kleur3);}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem .resMenuItemHolder.open {max-height: 100%;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem .laag1 a {padding: 13px 30px; font-size: 14px; color: #262626;}
.bovenkantHolder .bovenkant .resMenubalk .resMenuHolder .resMenublokinhoud .resMenuItem .laag2 a {padding: 13px 50px;}

.resCategorieen {margin: 0; padding: 0 0 15px 0;}
.resCategorieen ul li a {background: var(--kleur4); border-radius: var(--border-radius); border: 0; color: var(--fontkleur1);}
.resCategorieen ul li.actief a {background: #fbfdf8; color: var(--kleur2);}

.privacyMelding {background: var(--kleur4); box-shadow: 0 0 60px 5px rgb(0 0 0 / 10%); border-radius: var(--border-radius);}
.privacyMelding .inhoud {padding: 15px;}
.privacyMelding .inhoud .titel::before {display: none;}
.privacyMelding .knoppen {padding: 15px 15px 10px; border-top: 2px solid var(--kleur5); display: flex; gap: 15px; background: var(--kleur4);}
.privacyMelding .knoppen a.knop.akkoord {background-color: var(--kleur2);}
.privacyMelding .knoppen a.knop.sluiten {background-color: var(--kleur5); color: var(--fontkleur1);}

/* Nieuws */
.nieuwsNavigatie {margin: 10px 0; width: 100%; display: flex; box-sizing: border-box;}
.nieuwsNavigatie a {background: #FFF;}
.nieuwsNavigatie .nieuwsNavigatieVorige {flex: 1; text-align: left;}
.nieuwsNavigatie .nieuwsNavigatieLijst {flex: 1; text-align: center;}
.nieuwsNavigatie .nieuwsNavigatieVolgende {flex: 1; text-align: right;}
.nieuwsNavigatie a.nietTonen {display: none;}

.nieuwsTekst {margin: 0 auto; max-width: 500px;}

.nieuws.lijst, .nieuws .bericht.actief  {background-color: var(--kleur4); border-radius: var(--border-radius); padding: var(--padding-20); box-sizing: border-box;}

.nieuws .bericht .titel a  {font-weight: normal; text-decoration: none; font-family: var(--font1); color: var(--kleur1); font-size: 16px;}
.nieuws .bericht .auteur          {font-family: var(--font1); text-transform: uppercase; font-weight: normal;}
.nieuws .bericht .lichtgrijs {color: #929292; font-family: var(--font1); font-size: 13px; font-weight: normal;}

.nieuws.lijst .bericht {max-width: 750px; padding: 20px 0; border-bottom: 1px solid #eee; box-sizing: border-box; margin: 0 0 20px; position: relative; display: flex;}
.nieuws.lijst .bericht .links {width: 125px; margin: 0 20px 0px 0; line-height: 0;}
.nieuws.lijst .bericht .rechts {flex: 1;}
.nieuws.lijst .bericht .datum {margin: 0px; font-weight: normal; display: inline-block;}
.nieuws.lijst .bericht .nieuwsCategorie {display: inline-block;}
.nieuws.lijst .bericht .auteur {font-family: var(--font1); font-weight: normal; line-height: 10px; text-transform: uppercase;}
.nieuws.lijst .bericht .titel  {margin: 3px 0;}
.nieuws.lijst .bericht .aankeiler {margin: 0 0 10px;}
.nieuws.lijst .bericht .titel a {color: #404040; font-family: var(--font1); font-size: 19px; font-style: normal; font-weight: bold; line-height: 1.25em; } 
.nieuws.lijst .bericht .aankeilerafb {display: block; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); max-width: 100%;}
.nieuws.lijst .bericht .aankeilerafb img {max-width: 100%; height: auto !important;}
.nieuws.lijst .bericht .inhoud {border-top: 1px solid #eee; display: none; margin: 0; padding: 20px 0 0;}
.nieuws.lijst .bericht .inhoud img {height: auto !important; max-width: 100%;}
.nieuws.lijst .bericht .nieuwsknophouder a.knop {margin:0;}

.nieuws.lijst .bericht.actief {display: block;}
.nieuws.lijst .bericht.actief .inhoud {display: block;}
.nieuws.lijst .bericht.actief .nieuwsboven {padding: 0 0 20px;}
.nieuws.lijst .bericht.actief .nieuwsknophouder {display: none;}

.nieuws.lijst .bericht .datum .type1 {display: inline-block;}
.nieuws.lijst .bericht .datum .type5,
.nieuws.lijst .bericht .datum .type6        {float: left; font-size: 12px; font-weight: bold; line-height: 1.65em; margin-right: 20px; position: relative; width: 60px;}
.nieuws.lijst .bericht .datum .type5 .dag,
.nieuws.lijst .bericht .datum .type6 .dag   {background: #eee; color: #505050; display: block; font-size: 30px; font-weight: bold; line-height: 1.5em; padding: 0; text-align: center;}
.nieuws.lijst .bericht .datum .type5 .maand,
.nieuws.lijst .bericht .datum .type6 .maand {background: #505050; box-sizing: border-box; color: #fff; display: block; padding: 2px; text-align: center; text-transform: uppercase; font-size: 10px;}
.nieuws.lijst .bericht .datum .type5 .jaar,
.nieuws.lijst .bericht .datum .type6 .jaar,
.nieuws.lijst .bericht .datum .type6 .tijd  {background: #fff; display: block; text-align: center; width: 100%;}

#mc_embed_signup {max-width: 500px;}
#mc_embed_signup .mc-field-group input {border: 1px solid #000; border-radius: var(--border-radius); background-color: #FFF !important; padding: 10px;}
#mc_embed_signup .button {font-family: var(--font1) !important; font-size: 14px !important; margin: 0 !important; padding: 13px 20px !important; border-radius: var(--border-radius) !important; color: var(--kleur4) !important; background: var(--kleur3) !important; line-height: 1 !important; font-weight: 500 !important; text-decoration: none !important; height: unset !important;}

.clerk-slider-nav {z-index: 1 !important;}

.meldingLevering {background: #fcf8c5; padding: var(--padding-20); border-radius: var(--border-radius);}
.meldingLevering p:last-child {margin: 0;}

.nieuwWachtwoordHolder {border: 0; background: var(--kleur4); padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius);}
.nieuwWachtwoordHolder .nieuwWachtwoordBeschrijving {padding: 0;}
.nieuwWachtwoordHolder .nieuwWachtwoordBeschrijving h1 {font-size: 18px; font-weight: bold; line-height: inherit; color: var(--fontkleur1); margin: 0;}
.nieuwWachtwoordHolder .nieuwWachtwoordContent {padding: 0; border: 0; margin: 20px 0 0 0;}
.nieuwWachtwoordHolder .nieuwWachtwoordContent h2 {display: none;}
.nieuwWachtwoordHolder .versturen a.button {display: block; box-sizing: border-box;}

.slideshowHolder {width: 100% !important;}

.zoekenHolderTweakwise {margin: auto 20px auto auto; width: 100%; max-width: 500px; position: relative; z-index: 1;}
.zoekenHolderTweakwise::before {content: "\f002"; font-size:18px; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin: 0 10px 0 0; color: #000; position: absolute; right:10px; top:50%; transform: translateY(-50%);}
#tweakwise-input {border-radius: var(--border-radius); background: #FFF !important; padding: 15px 20px; border: 1px solid #000; margin: 10px; width: calc(100% - 20px); box-sizing: border-box;}


html , body {height: 100%;}

body {min-height: 100svh; display: flex; flex-direction: column;}

main {flex: 1 0 auto;}

footer, .pageFooterHolder {margin-top: auto;}

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

  .grid-2x.header .categorie-lijst .klantenservice {display:none;}
  
}


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

  .extrabovenkantHolder .extrabovenkant .usp span:first-child, 
  .extrabovenkantHolder .extrabovenkant .usp span:last-child {display: none;}

  .bovenkantHolder .bovenkant .zoekenHolder {max-width: 350px;}
  .zoekenHolderTweakwise {max-width: 350px;}

  .hoverMenu .kolommen {gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr;}
  .hoverMenu .kolommen .kolom.twee-col {grid-row: unset; grid-column: span 2;}

  .grid-2x.header {grid-template-columns: 1fr;}
  .grid-2x.header > div:first-child {order: 2;}

  .artikel.detail .detailinkollommen {grid-template-areas: "a a" "c b" "d b";}

}


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

  .extrabovenkantHolder {display: none;}

  .bovenkantHolder {background: var(--kleur1);}
  .bovenkantHolder .winkelmenu {display: none;}
  .bovenkantHolder .bovenkant {min-height: 55px;}
  .bovenkantHolder .bovenkant .keurmerk {display: none;}

  .bovenkantHolder .bovenkant .resZoeken {display: block;}
  .bovenkantHolder .bovenkant .zoekenHolder {margin: 0; order: 1; width: unset;}

  .zoekenHolderTweakwise {margin: 0; order: 1; width: unset; position: static;}
  .zoekenHolderTweakwise::before {display: none;}
  .zoekenHolderTweakwise .twn-suggestions-context {position: static;}
  .zoekenHolderTweakwise .twn-suggestions-context .twn-suggestions {top: calc(100% + 50px);}
  .zoekenHolderTweakwise .twn-suggestions-context .twn-suggestions .twn-suggestions__panel {border-radius: 0;}
  .zoekenHolderTweakwise input {display: flex; max-height: 0; position: absolute; transition: .3s all ease; box-sizing: border-box; top: 100%; z-index: 17; opacity: 0; pointer-events: none; right: 0; left: 0; width: 100%; margin: 0 auto; border: 0; border-radius: 0;}
  .zoekenHolderTweakwise input.open {opacity: 1; pointer-events: all; max-height: 100%;}

  .bovenkantHolder .bovenkant .zoekenHolder .zoeken {display: flex; max-height: 0; position: absolute; transition: .3s all ease; box-sizing: border-box; top: 100%; z-index: 17; opacity: 0; pointer-events: none; right: 0; left: 0; width: 100%; margin: 0 auto; border: 0; border-radius: 0;}
  .bovenkantHolder .bovenkant .zoekenHolder .zoeken.open {opacity: 1; pointer-events: all; max-height: 100%;}

  .bovenkantHolder .bovenkant .shopitems {order: 3;}
  .bovenkantHolder .bovenkant .shopitems .klantenservice {display: none;}
  .bovenkantHolder .bovenkant .shopitems .resMenuwinkelmandje {display: block;}

  .Taalkeuze_vlaggen.dropdownTaal {margin: auto 15px auto auto;}
  .Taalkeuze_vlaggen.dropdownTaal ul li {padding: 5px;}
  .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {display: none;}
  .Taalkeuze_vlaggen.dropdownTaal ul li.actief {padding: 0 5px;}
  .Taalkeuze_vlaggen.dropdownTaal ul li.actief::after {content: "\f078"; padding-left: 5px; font-family: "Font Awesome 5 Pro"; font-size: 9px; bottom: 1px; position: relative;}

  a.logo {position: absolute; outline: 0; left: 50%; transform: translate(-50%, -50%); top: 50%;}
  a.logo img {filter: brightness(0) invert(1); width: 160px; margin: 0;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 10px;}
  
  .breadcrumbs {padding: 15px 10px;}

  textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"] {font-size: 16px;}

  .grid-2x.header {gap: 20px;}
  .grid-2x.header > div:first-child {order: 2;}

  .grid-2x.merken {grid-template-columns: 1fr; gap: 20px; text-align: center;}

  .grid-5x.over-ons {gap: 20px;}

  .shopHeader {padding: 10px 10px 0 10px;}
  .shopHeader .blok.headerShop {grid-template-columns: 1fr;}
  .shopHeader .blok.headerShop .rechtsVak.afbeelding {display: none;}

  .shopSortOptie {margin: 0 0 10px 0; align-items: center; display: grid;  grid-template-columns: 1fr 1fr; gap: 10px;}
  .shopSortOptie > * {width: 100%; margin: 0 !important;}
  .shopSortOptie .aantalPerPagina {display: none;}

  .shopCategorieHolder, .shopTegel {grid-template-columns: 1fr 1fr;}

  .shopTegel .artikel .inner .bestellen {grid-template-columns: 2fr 1fr;}
  .shopTegel .artikel .inner .bestellen .bestelknop {grid-template-columns: 1fr;}
  .shopTegel .artikel .inner .bestellen .bestelknop input {display: none;}
  
  .productCarousel .artikel {width: calc(50% - 15px); margin: 0 7.5px;}

  .kenmerkMobielHouder.slide .toonFiltersKnop {padding: 13px 20px; border-radius: var(--border-radius); color: var(--kleur4); background: var(--kleur2); line-height: 1; font-weight: 500;}
  .kenmerkMobielHouder.slide .filters .filterBovenkant {background: var(--kleur4); border-bottom: 2px solid var(--kleur5);}
  .kenmerkMobielHouder.slide .filters.volgende .filterBovenkant .terugFilteren {margin: auto 10px auto 0; background: var(--kleur5); color: var(--fontkleur1); border-radius: var(--border-radius); padding: 8px 15px; line-height: 1;}
  .kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen {margin: auto;}
  .kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen a {border-radius: var(--border-radius); color: var(--fontkleur1);  background: var(--kleur5); padding: 8px 15px; line-height: 1;}
  .kenmerkMobielHouder.slide .filters .filterBovenkant .filtersSluiten {cursor: pointer; font-size: 14px; background: var(--kleur5); color: var(--fontkleur1); padding: 11px 15px; line-height: 1; border-radius: var(--border-radius); margin: 0; border: 0; min-width: 0;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep {border: 0; border-bottom: 1px solid var(--kleur5); display: grid; align-items: center; grid-template-columns: 4fr 1fr;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerk {margin: 0; padding: 0 10px; border-radius: var(--border-radius); }
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerk:hover {background: var(--kleur5);}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerk .kenmerkAfbeelding {display: none;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep::after {display: none;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel {font-weight: normal; font-size: 15px; padding: 15px 0;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel .groepActieveKenmerken {margin-top: 0; color: var(--fontkleur2);}
  .kenmerkMobielHouder.slide .filters .kenmerkgroep a.filterGroepHerstel {position: relative; top: unset; bottom: unset; left: unset; right: unset; margin: auto 10px auto auto; background: var(--kleur5); color: var(--fontkleur1);  border-radius: var(--border-radius);}
  .kenmerkMobielHouder.slide .filters .filterknop a {position: absolute; background-color: var(--kleur3); border-radius: var(--border-radius); border: 0; padding: 10px; width: calc(100% - 20px); margin: 0 auto; right: 0; bottom: 10px;}
  .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerken {height: 100%;}

  .artikel.detail .detailinkollommen {grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 1fr;}
  .artikel.detail .detailinkollommen .links .grid {grid-template-columns: 1fr;}
  .artikel.detail .detailinkollommen .rechts {top: unset; position: relative;}
  .artikel.detail .detailinkollommen .links .grid .informatie .shopDetailModernKenmerken {column-count: 1;}

  .artikel.detail .detailinkollommen .links .grid .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height: calc(100vh - 200px); max-height: 300px;}

  .artikel.detail .detailinkollommen .links .grid .informatie .kort div {display: none;}
  .artikel.detail .detailinkollommen .links .grid .informatie .kort div::after {display: none;}
  .artikel.detail .detailinkollommen .links .grid .informatie .kort div:first-child {display: flex;}

  .artikel.detail .detailinkollommen .links .grid .informatie .artikelnr {position: absolute; right: var(--padding-20);}

  .blokholder.accountWijzigen .content .adresHolder .adressen .item.open {padding: 0;}
  .blokholder.accountWijzigen .content .adresHolder .adressen .item.open h2 {display: none;}

  .stap .kassainkollommen .links .kassaArtikelen tr {display: block;}
  .stap .kassainkollommen .links .kassaArtikelen tr:first-child {display: none;}
  .stap .kassainkollommen .links .kassaArtikelen .artikel td {border:0;}
  .stap .kassainkollommen .links .kassaArtikelen .artikel {grid-template-areas: "a b b b" "a c d e"; display:grid; margin-bottom:10px;}
  .stap .kassainkollommen .links .kassaArtikelen .kassaArtikelAfbeeldingHolder {grid-area: a;}
  .stap .kassainkollommen .links .kassaArtikelen .tekst {grid-area: b;}
  .stap .kassainkollommen .links .kassaArtikelen .kassaArtikelAfbeeldingHolder {grid-area: a;}
  .stap .kassainkollommen .links .kassaArtikelen .artikel td.regelTotaal {justify-content: center; margin:auto;}
  .stap .kassainkollommen .links .kassaArtikelen .artikel .aantallen {padding:0 10px 0 10px;}
  .stap .kassainkollommen .links .kassaArtikelen .artikel .aantalMinPlus, .kassaArtikelen .artikel .aantalVolgorde {margin:0;}

  .stap.een .kassainkollommen .links .kassaArtikelen .artikel .aantallen {display: flex; align-items: center;}
  .stap.een .kassainkollommen .links .kassaArtikelen .artikel .aantallen::before {position: relative; bottom: unset; display: block; margin: auto 15px auto 0;}
  .stap.een .kassainkollommen .links .kassaArtikelen .artikel td.regelVolgorde {grid-area: e;}

  .kassaArtikelen .artikel .aantalMinPlus input {min-width: 50px;}

  .uspFooter {padding: 10px;}
  .uspFooter .content {grid-template-columns: 1fr; gap: 0;}
  .uspFooter .content span {text-align: left; padding: 10px 5px; font-size: 12px;}

  .pageFooterHolder .pageFooter {padding: 30px 10px;}
  .pageFooterHolder .pageFooter .grid-4x {grid-template-columns: 1fr; gap: 20px;}
  .pageFooterHolder .pageFooter .grid-4x .h2 {position: relative; display: flex; align-items: center; cursor: pointer;}
  .pageFooterHolder .pageFooter .grid-4x > div {display: block;}
  .pageFooterHolder .pageFooter .grid-4x .h2::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; margin-left: auto; right: 0; font-size: 17px; transition: .3s all ease;}
  .pageFooterHolder .pageFooter .grid-4x .content a.knop {margin: 0;}
  .pageFooterHolder .pageFooter .grid-4x .content {overflow: hidden; position: relative; height: 0; opacity: 0; transition: .3s all ease;}
  .pageFooterHolder .pageFooter .grid-4x .content.open {opacity: 1; height: 100%; padding: 10px 0;}

  .pageFooterKnoppenHolder .pageFooterKnoppen {flex-direction: column; padding: 10px;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {margin: 0 auto 10px auto;}

  table.lijst {display: block; width: 100%; overflow-x: auto; white-space: nowrap; border-collapse: collapse;}

  .artikel.detail .detailinkollommen .rechts .blok.bestel .bestellen {margin: 0; z-index: 3; position: fixed; bottom: 0; left: 0; right: 0; box-shadow: var(--box-shadow-venster); background: #FFF; padding: var(--padding-20); grid-column: span 2;}

  .artikel.detail .detailinkollommen .rechts .blok.bestel .bestellen .bestelknop {grid-template-areas: "a b c"; grid-template-columns: 140px 1fr 44px;}
  .artikel.detail .detailinkollommen .rechts .blok.bestel .bestellen .bestelknop .aantalMinPlus {grid-column: unset; max-width: 140px;}
  .artikel.detail .detailinkollommen .rechts .blok.bestel .bestellen .bestelknop a.wButBestel::before {display: none;}
  .artikel.detail .detailinkollommen .rechts .blok.bestel .bestellen .favorieten a {padding: 14px; box-sizing: border-box;}

  .artikel.detail .detailinkollommen .rechts .blok .prijzen .van {font-size: 20px;}
  .artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs {font-size: 36px;}

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


}