:root {
  --kleur1: #2B2B2B;
  --kleur2: #9892B3;
  --kleur3: #E7DFD7;
  --fontkleur: #2B2B2B;
  --font-family1: "Anth", Helvetica, Arial, sans-serif;
  --font-family2: "Avenir", Helvetica, Arial, sans-serif;
  --max-width: 1580px;
  --text-small: 1000px;
  --border-radius: 0;

  --body-font-size: 15px;
  --h1-font-size: 50px;
  --h2-font-size: 40px;
  --h3-font-size: 22px;
  --h5-font-size: 12px;

  --padding-5: 5px;
  --padding-10: 10px;
  --padding-15: 15px;
  --padding-20: 20px;
  --padding-25: 25px;
  --padding-30: 30px;
  --padding-40: 50px;
  --padding-50: 50px;
  --padding-80: 80px;
  --padding-100: 100px;
}

html {overflow-x: hidden;}

body {font-family: var(--font-family2); font-weight: normal; color: var(--fontkleur); background: #FFF; font-size: 15px; line-height: 1.95em;}

input[type="checkbox"]:checked::before {color: var(--kleur1);}

/* .breadcrumbs {display: none;} */

.breadcrumbs {margin: var(--padding-20) auto; width:100%; box-sizing: border-box; padding: 0 var(--padding-30); max-width: var(--max-width);}
.breadcrumbs ol li:last-child {opacity: .4;}
.breadcrumbs .crumbSpace {display: none;}

.breadcrumbs ol {display: flex; flex-wrap: wrap;}
.breadcrumbs ol li::after {content:"\f054"; font-family: "Font Awesome 5 Pro"; display: inline-block; margin:0 10px; font-size:10px;}
.breadcrumbs ol li:last-child::after {display: none;}

.art-Sheet .art-sidebar1:empty {display: none;}
.art-Sheet .art-sidebar1 .art-Block {background: #f7f7f7; padding: var(--padding-20); box-sizing: border-box; border-radius: var(--border-radius); *position: sticky; *top: 130px;}
.art-Sheet .art-sidebar1 .art-Block .art-BlockHeader {display: none;}

.catMenuLink0li, .catMenuLink0liSel {font-size: 17px; color: var(--fontkleur) !important;}
.catMenuLink0liSel {color: var(--kleur2) !important; font-weight: 600;}

.catMenuLink1li, .catMenuLink1liSel {font-size: 17px; color: var(--fontkleur) !important;}
.catMenuLink1liSel {color: var(--kleur2) !important; font-weight: 600;}

.catMenuLink2li, .catMenuLink2liSel {padding: 0 !important; color: var(--fontkleur) !important; font-size: 17px;}
.catMenuLink2liSel {color: var(--kleur2) !important; font-weight: 600;}

.catMenuLink3li, .catMenuLink3liSel {color: var(--fontkleur) !important; display: inline-block; font-size: 17px; line-height: 1.75em; text-decoration: none !important; font-weight: normal; margin: 2px 0; margin-left: 35px;}
.catMenuLink3liSel {color: var(--kleur2) !important; font-weight: 600;}

.catMenu2liSel>a:hover, .catMenu3liSel>a:hover, .catMenu4liSel>a:hover,
.catMenu2li>a:hover, .catMenu3li>a:hover, .catMenu4li>a:hover {color: var(--kleur2) !important; text-decoration: none !important;}

::selection {background: var(--kleur2); color: #FFF;}

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--border-radius); background: #FFF; color: #666; padding: 12px 10px; border-color: #EAE8E5;}
select {border-color: #EAE8E5; color: #666; padding: 12px 25px 12px 10px; 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(--font-family1); font-weight: normal; color: var(--fontkleur); line-height: 1.35em;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1-font-size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2-font-size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3-font-size);}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-family: var(--font-family2); font-size: var(--h5-font-size); text-transform: uppercase; letter-spacing: 0.12em;}

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

a.logo {margin: auto 0; outline: 0; z-index: 20;}
a.logo img {width: 130px; margin: 0;}

a.knop, .button, a.button, button {position: relative; font-family: var(--font-family2); background-color: var(--kleur1); color: #FFF; border: 0; font-size: 14px; letter-spacing: 0.05em; padding: 20px 25px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: var(--border-radius); margin-bottom:10px;}
a.knop:hover, .button:hover, a.button:hover, button:hover {opacity: .7;}

a.knop.secundair {background: unset; color: var(--fontkleur); box-shadow: inset 0 0 0 1px var(--kleur1);}

.bovenkantHolder {border: 0; background: var(--kleur1); position: sticky; top: 0; z-index: 200;}
.bovenkantHolder .bovenkant {position: relative; min-height: 100px;}
.bovenkantHolder .bovenkant .art-nav {margin: auto;}
.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: 30px; position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li {position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {color: #FFF; font-size: 16px; padding: 10px 0; z-index: 20; position: relative;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t::before {content: ""; display: block; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background-color: #FFF; transition: all .3s ease;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a:hover .t::before, .bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t::before {width: 100%;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t::after {content: ""; position: absolute; bottom: -20px; width: 100%; height: 30px; display: block; z-index: 2;}

.bovenkantHolder .bovenkant .shopitems {z-index: 20;}

.bovenkantHolder .bovenkant .zoekenTrigger {position: relative; margin: auto 10px; cursor: pointer; line-height: 1;}
.bovenkantHolder .bovenkant .zoekenTrigger::before {content: ""; display: block; background: url(/skin/images/search.svg) no-repeat; background-position: center; background-size: contain; width: 22px; height: 23px;}

.bovenkantHolder .aLandingMenu {filter: invert(1);  opacity: .3; position: absolute; right:23px; top:-3px; z-index: 5; z-index: 21;}
.bovenkantHolder .aLandingMenu:hover {opacity: 1;}
.bovenkantHolder .LandingMenu {left:unset; right:0; box-shadow: unset; position: absolute;}

.zoeken {position: absolute; top: calc(100% + 30px); z-index: 17; opacity: 0; pointer-events: none; right: 0; left: 0; width: 700px; margin: 0 auto; background: #FFF; box-sizing: border-box;}
.zoeken.open {opacity: 1; pointer-events: all;}
.zoeken .knop {margin: auto 0 auto auto; padding: 15px;}
.zoeken .knop:before {font-weight: lighter; font-size: 19px;}
.zoeken .veld {width: 100%; box-sizing: border-box;}
.zoeken .veld #zoekWoordID {padding: 15px; width: 100%; box-sizing: border-box;}

.speedsearchLoader {display: none;}
#speedsearchResult {left: 0; border-radius: var(--border-radius); max-width: var(--max-width); margin: 0 auto; box-sizing: border-box;}
#speedsearchResult .houder {display:block; border-radius: var(--border-radius); border: 0; box-shadow: 0 20px 50px 0 rgba(0,0,0,0.20); font-size:inherit; width: 100%; box-sizing: border-box; padding: 20px;}
#speedsearchResult .houder .speedSearch.categorie {order:1;}
#speedsearchResult .houder .speedSearch.artikelen {width: 100%;}
#speedsearchResult .houder .speedSearch ul li a {border:0; display: flex; border-radius: var(--border-radius);}
#speedsearchResult .houder .speedSearch ul li a .omschrijving {margin: auto 0; font-weight: normal;}
#speedsearchResult .houder .speedSearch ul li a strong {font-weight: bold; color: var(--kleur1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size:14px;}
#speedsearchResult .houder .speedSearch .resultaat {padding: 10px; margin: 0; color: var(--fontkleur); font-weight: bold; font-size: 17px;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .speedSearch ul li a:hover {background: #f7f7f7;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: darken;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .knopAllesOnder a {border-radius: var(--border-radius); line-height: 1; background: var(--kleur1); font-weight: normal; border: 0; color: #fff; font-size: 14px; letter-spacing: 0.05em; padding: 20px 25px;}
#speedsearchResult .houder .knopAllesOnder a:hover {background: #444;}

.winkelwagenHouder .winkelknop {background: unset; padding: 10px; padding-right: 0;}
.winkelwagenHouder .winkelknop .icoon::before {content: ""; display: block; background: url(/skin/images/cart.svg) no-repeat; background-position: center; background-size: contain; width: 18px; height: 23px;}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--kleur3); color: var(--fontkleur); border-radius: 100%; line-height: 14px; top: -10px; right: -11px; padding: 2px 5px 0 5px;}

.winkelwagenHouder .winkelwagen {border-radius: var(--border-radius); background: #fff; border: 0; width: 550px; box-shadow: unset; top: 100%; z-index: 20;}
.winkelwagenHouder .winkelwagen .winkelmandjeLeeg {border: 0; font-size: 12px;}
.winkelwagenHouder .winkelwagen .inhoud .h3 {font-size: 20px;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {padding: 15px; background: var(--kleur1);}

.account li {border: 0;}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: ""; display: block; background: url(/skin/images/account.svg) no-repeat; background-position: center; background-size: contain; width: 21px; height: 23px;}
.account .welkom,
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje,
.account .inloggenKnop .titel, .account .mijnAccountKnop .titel,
.account .favorietenKnop .favAantal {display: none;}
.account .inloggenKnop, .account .mijnAccountKnop {display: flex; gap: 10px; align-items: center;}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}
.account .favorietenKnop::before {content: ""; display: block; background: url(/skin/images/heart.svg) no-repeat; background-position: center; background-size: contain; width: 23px; height: 23px;}

.account .houder {border-radius: var(--border-radius); background: #fff; border: 0; width: 345px; box-shadow: unset; top: 100%; z-index: 20; transform: translateY(0); pointer-events: none;}
.account .openGeklapt .houder {pointer-events: all;}
.account .houder .accountKop {font-size: 20px; margin: 0 0 0.5em 0; font-family: var(--font-family1); font-weight: normal; color: var(--fontkleur); line-height: 1.35em;}

.account .inloggen .inlogKnop {flex-direction: column; gap: 10px;}
.account .inloggen .inlogKnop .wachtwoordKwijt {margin: 0;}
.account .inloggen .inlogKnop .wachtwoordKwijt a {font-size: 12px; color: #111;}
.account .inloggen .cookie {display: none;}

.account .houder .houder1 {padding: 20px;}
.account .houder .houder1 a {text-decoration: none; margin: 0;}
.account .houder .houder1 a.button {display: block; border-radius: var(--border-radius); background: var(--kleur1); padding: 15px; width: 100%; box-sizing: border-box; margin: 0;}
.account .mijnAccount .houder {width: 270px;}
.account .mijnAccount .houder .houder1 {padding: 20px 20px 10px 20px;}
.account .houder .houder2 {background: unset; border: 0; padding: 0 20px 20px 20px;}
.account .houder .houder2 .registreer {font-size: 12px;}
.account .houder .houder2 .registreer a {color: var(--kleur1); font-weight: 500;}
.account .houder .houder2 .uitloggen a {font-family: inherit; font-size: 14px; padding: 15px 20px; color: #FFF; border-radius: var(--border-radius); background: var(--kleur1); line-height: 1; font-weight: 600; text-decoration: none !important; border-bottom: 3px solid #b31b21; display: block; text-align: center;}
.account .houder .houder2 .uitloggen:first-child {margin-bottom: 10px;}
.account .houder .houder2 .uitloggen:first-child a {background-color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-color: var(--fontkleur);}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}

.artikel .artikelnr {color: var(--fontkleur); font-size: 14px; font-weight: normal;}
.artikel .artikelnr > .titel {display: none;}
.artikel .relatieBtwPrijs {display: none;}
.artikel .aantalMinPlus {display: grid; grid-template-columns: 1fr 1fr 1fr;}
.artikel .displayprijs {display: block;}

.shopSortOptie {border-radius: 0; border: 0; padding: 0; margin: 30px 0;}
.shopSortOptie > .sorteerLijst {margin: auto 0 auto auto;}

.artikel.detail .detailinkollommen {margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "a c";}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;}
.artikel.detail .detailinkollommen .links {grid-area: a; position: sticky; top: 130px; margin-bottom: auto;}

.artikel.detail .detailinkollommen .rechts {grid-area: b; padding: var(--padding-50); box-sizing: border-box; position: relative;}
.artikel.detail .detailinkollommen .rechts .omschrijving {display: flex; flex-direction: column; gap: 15px;}
.artikel.detail .detailinkollommen .rechts .omschrijving h1 {font-size: var(--h2-font-size);}
.artikel.detail .detailinkollommen .rechts .omschrijving .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--kleur1); margin:0;}
.artikel.detail .detailinkollommen .rechts .omschrijving .bestellen .bestelknop a.wButBestel::before {display: none;}
.artikel.detail .detailinkollommen .rechts .omschrijving .bestellen .bestelknop input {width: 53px !important;}

.artikel.detail .detailinkollommen .rechts .omschrijving .prijzen {display: flex; align-items: center; gap: 6px;}
.artikel.detail .detailinkollommen .rechts .omschrijving .prijzen .prijs {font-size: 20px;}
.artikel.detail .detailinkollommen .rechts .omschrijving .prijzen .btwinfo {color: #999; font-size: 12px;}

.artikel.detail .detailinkollommen .rechts .omschrijving .artikelnrFavorieten {display: flex; align-items: center;}
.artikel.detail .detailinkollommen .rechts .omschrijving .artikelnrFavorieten .favorieten {margin: 0 0 0 auto; font-size: 25px;}
.artikel.detail .detailinkollommen .rechts .omschrijving .artikelnrFavorieten .favorieten .toelichting {display: none;}
.artikel.detail .detailinkollommen .rechts .omschrijving .artikelnrFavorieten .favorieten a i {font-weight: lighter;}
.artikel.detail .detailinkollommen .rechts .omschrijving .artikelnrFavorieten .favorieten.aan a i {font-weight: bold !important; color: var(--fontkleur)}

.artikel.detail .detailinkollommen .rechts .omschrijving .h3 {font-size: 18px; margin: 0;}
.artikel.detail .detailinkollommen .rechts .omschrijving .kenmerkgroepKeuze.afbeeldingen .artikel {border-color: #eee;}
.artikel.detail .detailinkollommen .rechts .omschrijving .kenmerkgroepKeuze.afbeeldingen .artike:hover,
.artikel.detail .detailinkollommen .rechts .omschrijving .kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: var(--kleur2);}

.artikel.detail .detailinkollommen .informatie {grid-area: c; background: var(--kleur1); padding: var(--padding-50); box-sizing: border-box; color: #FFF; position: relative; display: flex; flex-direction: column; gap: var(--padding-40);}
.artikel.detail .detailinkollommen .informatie::before {background: var(--kleur1); content: ""; top: 0; bottom: 0; left: 0; width: 50vw; position: absolute; z-index: -1;}
.artikel.detail .detailinkollommen .informatie h3 {color: #FFF;}

.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt.publieksprijs .kenmerken .kenmerk .titel,
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt.publieksprijs .kenmerken .toevoeging::after {display: none;}
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt.publieksprijs .kenmerken .toevoeging::before {content: "€"; margin-right: 3px;}
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken {margin: 0;}
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt, .artikel.detail .detailinkollommen .informatie .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 1fr 1fr; color: #FFF; border: 0; font-size: 14px; font-weight: normal;}
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt .groep, .artikel.detail .detailinkollommen .informatie .artikelGewicht .titel, .EANnummer .toelichting {color: #FFF; font-weight: 500;}
.artikel.detail .detailinkollommen .informatie .shopDetailModernKenmerken .kenmerkArt:nth-child(odd) {background-color: #404040;}

.shopCategorieHolder {gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));}
.shopCategorieHolder .categorie {border: 0;}
.shopCategorieHolder .categorie::before {content: ""; background: #000; top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: .03; transition: all .3s ease; z-index: 1; pointer-events: none;}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}
.shopCategorieHolder .categorie .titel {padding: 15px 0;}
.shopCategorieHolder .categorie .titel h2 {font-size: 14px; font-weight: normal; margin-bottom: 0; font-family: var(--font-family2); line-height: 1.65em;}

.shopTegel {gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));}
.shopTegel .artikel .inner {padding: 0; border: 0;}
.shopTegel .artikel .inner::before {content: ""; background: #000; top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: .03; transition: all .3s ease; z-index: 1; pointer-events: none;}
.shopTegel .artikel .inner > a.link {z-index: 2;}
.shopTegel .artikel .inner:hover {box-shadow: none;}

.shopTegel .artikel .inner .afbeeldingHouder {margin-bottom:0;}

.shopTegel .artikel .inner .rechtsboven {z-index: 5;}
.shopTegel .artikel .inner .rechtsboven div {padding: 20px; margin: 0;}
.shopTegel .artikel .inner .rechtsboven div a {background: transparent; padding: 0; font-size: 22px; color: var(--fontkleur);}
.shopTegel .artikel .inner .rechtsboven div a i {font-weight: lighter;}
.shopTegel .artikel .inner .rechtsboven div.aan a i {font-weight: bold !important; color: var(--fontkleur)}

.shopTegel .artikel .inner .bestellen {margin: 0; z-index: 3;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--fontkleur); margin:0;}

.shopTegel .artikel .inner .omschrijving {padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1;}
.shopTegel .artikel .inner .omschrijving h2.titel {font-size: 14px; font-weight: 600; margin-bottom: 0; font-family: var(--font-family2); line-height: 1.65em;}
.shopTegel .artikel .inner .omschrijving h2.titel a {line-height: inherit;}

.shopTegel .artikel .inner .prijzen {display: flex; align-items: center; gap: 6px; margin-top: auto;}
.shopTegel .artikel .inner .prijzen .btwinfo {color: #999; font-size: 12px;}
.shopTegel .artikel .inner .prijzen .prijs {font-size: 14px; font-weight: 600;}

.kassaArtikelen .artikel .prijzen {font-weight: bold;}
.kassaArtikelen .artikel .btwinfo {display: none;}

.kassainkollommen > .rechts .blok, .couponcodeHouder {background: var(--kleur3);}

.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen .stappenKnop a {padding: 15px; font-weight: normal;}

.stap .blokholder {background: var(--kleur3);}

.stap .blokholder > .titel {font-size: 20px; font-family: var(--font-family1); font-weight: normal; color: var(--fontkleur);}

/* Haparko */
.haparko-promo	 				            {*display: none; font-size:90%; line-height: 1.5em;}
.haparko-promo h3 {display: none;}
/* .haparko-promo div.regel:nth-child(1)	 	  {*display: none;} */
.haparko-promo div.regel:nth-child(2)	 	  {display: none;}
.haparko-promo div.regel:nth-child(3)	 	  {*display: none;}
.haparko-promo div.regel:nth-child(4)	 	  {display: none;}
.haparko-promo div.regel:nth-child(4)	 	  {display: none;}
.haparko-promo div.regel:nth-child(4)	 	  {display: none;}
.haparko-promo div.regel:nth-child(7)	 	  {display: none;}


/* .haparko-promo h3                   {margin: 0 0 10px;}
.haparko-promo	.regel 			        {display: table-row; line-height: 1.25em;}
.haparko-promo  .regel span         {padding: 6px 0; display: table-cell;}
.haparko-promo	.regel .bedrag	    {text-align: right;}
.haparko-promo	.regel.totaal span	{border-top: 1px solid rgba(255,255,255,.2); font-weight: bold; padding: 5px 0 25px;} */
/* Einde Haparko */

.art-sidebar1 .filters {border: 0; margin: 0 0 20px 0;}
.art-sidebar1 .filters .kenmerkgroep {padding: 0; border: 0; margin: 0 0 20px 0;}
.art-sidebar1 .filters .kenmerkgroep:last-child {margin: 0;}
.art-sidebar1 .filters .kenmerkgroep a.titel {margin: 0; font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.12em; padding: 0 0 10px 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 0; border-radius: 0; border-bottom: 1px solid #DFDFDF;}
.art-sidebar1 .filters .kenmerkgroep a.titel::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: lighter; position: absolute; right: 0; font-size: 13px; transition: .3s all ease; box-sizing: border-box;}
.art-sidebar1 .filters .kenmerkgroep a.titel.gesloten::after {transform: rotate(180deg);}
.art-sidebar1 .filters .kenmerkgroep .kenmerken {z-index: 1; overflow: hidden; position: relative; margin-top: 0; height: auto; padding: 15px 0 0 0; opacity: 1; transition: .3s all ease; margin: 0; border-radius: 0;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken.gesloten {max-height: 145px;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken.open {max-height: 100%;}
.art-sidebar1 .filters .kenmerkgroep.gesloten .kenmerken {height: 0; opacity: 0; padding: 0;}
.art-sidebar1 .filters .kenmerkgroep .tonen {transition: all .3s ease; padding: 10px 0 0 0; text-transform: uppercase; cursor: pointer; color: var(--kleur2); letter-spacing: 0.12em; font-size: 12px; font-weight: bold; align-items: center; display: inline-block;}
.art-sidebar1 .filters .kenmerkgroep .tonen.gesloten {display: none;}

.art-sidebar1 .filters .actieveKenmerken {border: 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 20px; box-shadow: unset; border-radius: 0; padding: 0;}
.art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {border-radius: 5px;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .omschrijving {font-size: inherit; color: #111; margin-right: 10px;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .kenmerkAfbeelding {width: 16px; border-radius: 100%; position: relative; top: -1px; height: 16px !important; margin: auto 10px auto 0;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: #FFF;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .aantal {float: unset; color: #BCBBBB; font-size: 11px; margin: 8px 0 0 auto; }
.art-sidebar1 .filters .kenmerkgroep .kenmerken label {display: flex;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label input {top: 6px !important; position: relative;}

.hoverMenu {left: 0; right: 0; width: 100%; max-width: var(--max-width); overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; transform: unset; top: 100%; padding: 30px 30px 80px 30px; box-sizing: border-box;}
.hoverMenu::after {content: ""; position: absolute; top: -100%; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--kleur1); 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: var(--padding-100); grid-template-columns: 1fr 2fr 3fr;}
.hoverMenu .kolommen .kolom {padding: 0; width: unset;}
.hoverMenu .kolommen .kolom > ul {opacity: 1; visibility: visible; position: relative; box-shadow: unset; border: 0; transition: unset; background: unset;}
.hoverMenu .kolommen .kolom:nth-child(2) > ul {column-gap: 20px; column-count: 2;}
/* .hoverMenu .kolommen .kolom:nth-child(3) > ul {column-gap: 20px; column-count: 2;} */
.hoverMenu .kolommen .kolom > ul::before {display: none;}
.hoverMenu .kolommen .kolom > ul li a {color: #FFF; font-size: 14px; line-height: 1; border: 0; padding: 10px 0; transition: .3s all ease;}
.hoverMenu .kolommen .kolom > ul li a:hover {text-decoration: none; opacity: .7; background: unset;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}
.hoverMenu .kolommen .kolom .titel a {text-transform: uppercase; font-weight: 700; font-size: 15px; margin: 0 0 10px 0; letter-spacing: 0.10em; color: #FFF;}
.hoverMenu .kolommen .kolom .titel a:hover {text-decoration: none; opacity: .4;}

/* .hoverMenu {left: 0; right: 0; width: 100%; max-width: var(--max-width); overflow: unset; margin: 0 auto; border-radius: 0; box-shadow: unset; transform: unset; top: 100%; padding: 80px 30px; box-sizing: border-box;}
.hoverMenu::after {content: ""; position: absolute; top: -100%; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--kleur1); z-index: -1;}
.hoverMenu.actief {opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0px); z-index: 11;}
.hoverMenu .kolommen {width: 100%; box-sizing: border-box; column-count: 1; display: block; padding: 0;}
.hoverMenu .kolommen .kolom {padding: 0; width: unset;}
.hoverMenu .kolommen .kolom > ul {opacity: 1; visibility: visible; position: relative; box-shadow: unset; border: 0; transition: unset; background: unset; display: none;}
.hoverMenu .kolommen .kolom > ul li a {color: #FFF; font-size: 14px; line-height: 1; border: 0; padding: 10px 0; transition: .3s all ease;}
.hoverMenu .kolommen .kolom > ul li a:hover {text-decoration: none; color: var(--kleur1); background: unset;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}
.hoverMenu .kolommen .kolom .titel a {font-size: 17px; font-weight: normal; color: #FFF; line-height: 1; padding: 10px 0; display: inline-block;}
.hoverMenu .kolommen .kolom .titel a:hover {text-decoration: none; opacity: .4;} */

.hoverMenu .categorie {padding: 0; margin: 0 0 20px 0; order: 2; display: none;}
.hoverMenu .categorie .kop {display: none;}
.hoverMenu .categorie .aankeiler h2 {color: #FFF;}
.hoverMenu .categorie .aankeiler h5  {color: #FFF;}

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

.vak.taupe {background: var(--kleur3);}

section .inhoud, .vak .inhoud {padding: var(--padding-100) var(--padding-30);}

div[class*="grid"].contact {align-items: center;}
div[class*="grid"].contact img {width: 100% !important; height: auto !important;}

.pageFooterHolder {background: var(--kleur1);}
.pageFooterHolder .pageFooter {padding: var(--padding-100) var(--padding-30); color: #D5D5D5;}
.pageFooterHolder .pageFooter a {text-decoration: none; color: #D5D5D5;}
.pageFooterHolder .pageFooter .h2 {font-family: var(--font-family2); text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: 0.10em;}

.pageFooterKnoppenHolder {background: var(--kleur1);}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; color: #D5D5D5;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin: auto 0 auto auto;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {color: #D5D5D5;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {opacity: 0; margin: 0 5px;}

.pageFooterHolder ul, .pageFooterHolder li  {padding:0; margin:0; list-style-type: none;}
.sitemap2ul {display:none;}
.pageFooterHolder .sitemap2ul {display:none;}

.resMenubalk {margin: auto 0;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {color: #FFF;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje i {display: none;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje::before {content: ""; display: block; background: url(/skin/images/cart.svg) no-repeat; background-position: center; background-size: contain; width: 17px; height: 22px;}

.nieuws.lijst {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--padding-20); box-sizing: border-box;}
.nieuws.lijst .bericht {padding: unset; position: relative; cursor: pointer; overflow: hidden;}
.nieuws.lijst .bericht::before {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid #FFF; z-index: 1; margin: var(--padding-20); box-sizing: border-box;}
.nieuws.lijst .bericht .afbeelding {line-height: 0; position: relative;}
.nieuws.lijst .bericht .afbeelding::after {content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgb(0 0 0 / 9%);}
.nieuws.lijst .bericht .afbeelding img {width: 100% !important; height: auto !important; transform: scale(1); transition: 1s all ease;}

.nieuws.lijst .bericht .content {text-shadow:0 2px 30px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,.5); transition: all .3s ease; padding: var(--padding-30); box-sizing: border-box; color: #FFF; z-index: 1; margin: 0 auto; position: absolute; outline: 0; left: 50%; transform: translate(-50%, -50%); top: 50%; width: 100%; text-align: center;}
.nieuws.lijst .bericht .content .titel {color:#FFF; font-size: 23px; margin: 0; position: relative;}
.nieuws.lijst .bericht .content .datum {color: #fff; opacity: .7; display: block;}

.nieuws.lijst .bericht > a.link {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 1;}

.nieuws.lijst .bericht:hover .afbeelding img {transform: scale(1.1);}
.nieuws.lijst .bericht:hover .content {transform: translate(-50%, -60%);}

.nieuws .bericht.actief {max-width: 900px; margin: 0 auto;}
.nieuws .bericht.actief .aankeilerafb {float:right; margin-left:var(--padding-30); margin-bottom:var(--padding-30);}
.nieuws .bericht.actief .aankeilerafb img {max-width:400px; height: auto !important;}
.nieuws .bericht.actief .nieuwsNavigatie {margin: 0 0 var(--padding-30) 0;}
.nieuws .bericht.actief .nieuwsNavigatie i {font-size: 30px;}

.uniekeForm {background: var(--kleur1); padding: 50px; box-sizing: border-box; color: #FFF;}
.uniekeForm h2, .uniekeForm h5 {color: #FFF;}
.uniekeForm input {margin: 0;}
.uniekeForm input[type="radio"]:checked::before {color: var(--kleur3);}
.uniekeForm .formulier.widget {display: grid; gap: 10px;}
.uniekeForm .formulier.widget label.radio, .uniekeForm .formulier.widget label.checkbox {color: #FFF;}
.uniekeForm .formulier.widget .radios .label, .uniekeForm .formulier.widget .checkboxes .label {display: none;}
.uniekeForm .formulier.widget input, .uniekeForm .formulier.widget textarea {border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); background: transparent; margin-bottom: 10px; border-radius: 0; color: #fff !important; padding: 5px;}
.uniekeForm .formulierVersturen a.button {background: var(--kleur3); color: var(--fontkleur); display: block; width: 100%; box-sizing: border-box;}

.datepicker-container {width: 210px;}
.datepicker-panel > ul > li.highlighted, .datepicker-panel > ul > li.picked:hover {color: #FFF !important;}
.datepicker-panel > ul > li.picked {color: var(--kleur1) !important; }
.datepicker-panel > ul > li:hover,
.datepicker-panel > ul > li.highlighted {background-color: var(--kleur1) !important; color: #FFF !important;}
.datepicker-top-left, .datepicker-top-right {border-top-color: var(--kleur1) !important;}
.datepicker-top-left::before, .datepicker-top-right::before {border-bottom-color: var(--kleur1) !important;}

.resMenuHolder {background: var(--kleur1); top: 100%; max-width: 100%;}
.resMenublokinhoud {padding:20px;}
.resMenublokinhoud .resMenuItem a {border: 0; color: #FFF; font-size: 15px;}
.resMenuItem.favorieten a, .resMenuItem.verlanglijst a {display: block;}
.resMenuItem.favorieten a span, .resMenuItem.verlanglijst a span {display: none;}
.openklapper {width:80px}
.openklapper::before {color: #FFF; font-size: 12px;}
.resMenublokinhoud .resMenuItem .laag1 a {font-size: 13px;}

.klantWorden { background: var(--kleur3); padding: 30px;}
.alleenNiv1 {display: none;}

.kenmerkMobielHouder.accordion .filters {z-index: 201; top: 70px; height: calc(100% - 70px) !important;}
.kenmerkMobielHouder.accordion .toonFiltersKnop,
.kenmerkMobielHouder.accordion .filters .filterknop a {background-color: var(--kleur1);}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep {border-top:unset;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroepHouder {height: calc(100vh - 190px) !important; padding-bottom:80px;}

.kenmerkMobielHouder.accordion .filters .filterBovenkant {background-color: #fff; padding-right: 15px;}
.kenmerkMobielHouder .filters .filterBovenkant .filtersSluiten {color: var(--fontkleur);}
.kenmerkMobielHouder .filters .filterBovenkant .filtersSluiten i.far.fa-times {font-weight: 100;}

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

  :root {  
    --body-font-size: 15px;
    --h1-font-size: 30px;
    --h2-font-size: 25px;
    --h3-font-size: 18px;
    --h5-font-size: 12px;

    --padding-5: 2px;
    --padding-10: 5px;
    --padding-15: 8px;
    --padding-20: 10px;
    --padding-30: 15px;
    --padding-40: 20px;
    --padding-50: 25px;
    --padding-80: 40px;
    --padding-100: 50px;
  }
  
  a.logo img {width: 100px;}

  .bovenkantHolder .bovenkant {min-height: 70px;}
  .bovenkantHolder .bovenkant .shopitems {margin-left: auto; line-height: 1;}

  .zoekenTrigger {margin: auto 5px auto auto;}
  .zoeken {top: 70px; width: 100%;}

  #speedsearchResult {right: 0;}

  .vak {padding: 0;}

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

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr; grid-template-areas: "a" "b" "c";}
  .artikel.detail .detailinkollommen .links {position: relative; top: 0;}
  .artikel.detail .detailinkollommen .rechts {padding: 30px 0;}
  .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height:calc(100vh - 500px); max-height:600px; padding-bottom:0; min-height: unset;}
  .artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery img {max-height: 50px !important; border:0;}

  .artikel.detail .detailinkollommen .informatie {padding: 20px; gap: 20px;}
  .artikel.detail .detailinkollommen .informatie::before {display: none;}

  

  .nieuws.lijst {grid-template-columns: 1fr; gap: 20px;}

  .uniekeForm {padding: 20px;}

  .shopTegel {grid-template-columns: 1fr 1fr; gap: 10px;}

  .shopSortOptie {display: flex; gap: 10px;}
  .shopSortOptie>* {width: auto; margin: 0 !important; box-sizing: border-box;}

}