html {overflow-x: hidden;}

:root {
  --color1: #000;
  --color2: #F6F5F3;
  --color3: #000;
  --color4: #b7bd4d;
  --fontColor: #000;
  --fontFamily1: "Inter", Helvetica, Arial, sans-serif;
  --bodyFontSize: 14px;
  --h1Size: 50px;
  --h2Size: 26px;
  --h3Size: 18px;
  --h5Size: 22px;
  --maxWidth: 1580px;
  --textSmall: 1000px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 3px;
}

body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor3); background: #FFF; font-size: var(--bodyFontSize); line-height: 1.75em;}



::-webkit-scrollbar, div.uitgebreid::-webkit-scrollbar              {width: 6px;}
::-webkit-scrollbar-track, div.uitgebreid::-webkit-scrollbar-track  {background:#f5f5f5; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb, div.uitgebreid::-webkit-scrollbar-thumb   {background-color: #aaa; outline:none;}

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

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); background-color: #FFF; color: #666; padding: 12px 10px; border-color: #EAE8E5;}

select {color: var(--fontColor3); padding: 15px 35px 14px 15px; border-radius: 2px; background-position:right 15px center; background-image:url('data:image/svg+xml;utf8,<svg width="11" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 1.69L5.5 7.5 0 1.69 1.227.5 5.5 5.013 9.773.5 11 1.69z" fill="%23000000"/></svg>')}

.breadcrumbs {margin-bottom: 30px; color: #999; display: none;}
.breadcrumbs ol li a {color: #999 !important;}
.breadcrumbs ol li a:hover {color: var(--fontColor3) !important; text-decoration: none;}
.breadcrumbs .crumb::before {content: "/"; margin: 0 7px;}
.breadcrumbs .crumb:first-of-type::before {display: none;}
.breadcrumbs ol li.crumbSpace {display: none;}

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

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); font-weight: 600; color: var(--fontColor3); line-height: 1.35em;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size); letter-spacing: 0.02em; font-weight: 600;}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); letter-spacing: 0.02em; font-weight: normal;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: 300;}

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

a.logo {margin: auto 0; position: absolute; outline: 0; left: 50%; transform: translate(-50%, -50%); top: 50%;}
a.logo img {width: 60px; margin: 0;}

a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color1); color: #FFF; border: 0; font-size: 14px; letter-spacing: 0.02em; padding: 15px 20px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: var(--borderRadius1);}
a.knop:hover, .button:hover, a.button:hover, button:hover {opacity: .7;}
a.knop {min-width: 200px;}
a.knop.wit {background: #FFF; color: var(--fontColor3);}
a.knop.wit:hover {background: var(--color1); color: #FFF; opacity: 1;}

a.knop.oranje {color:#fff; background-color: var(--color3);}
a.knop.oranje:hover {color:#fff; background-color: var(--color3);}

header {position: sticky; top: 0; z-index: 20;}
header > form {background: #FFF;}

.bovenkantHolder {border: 0;}
.bovenkantHolder .bovenkant {position: relative; max-width: var(--maxWidth);}
.bovenkantHolder .bovenkant .art-nav {margin: auto auto auto 0;}
.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: 20px; position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li {position: static;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {font-size: 14px; color: var(--fontColor3); padding: 10px 0; 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: #000; 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 .zoekenTrigger {position: relative; margin: auto 10px; cursor: pointer; line-height: 1;}
.bovenkantHolder .bovenkant .zoekenTrigger::before {content: "\f002"; font-family: "Font Awesome 5 Pro"; font-weight: lighter; font-size: 18px; position: relative; top: 1px;}

.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal {min-width: 65px;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal.open ul {background: var(--color1);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul {transition: unset; border-radius: var(--borderRadius1);}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving {font-size: 12px; font-weight: normal; color: inherit;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal.open ul li .omschrijving {color: #FFF !important; filter: unset;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li.actief .afbeelding::before {display: none;}
.bovenkantHolder .bovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding img {width: 100% !important; height: auto !important; max-width: 18px; bottom: 2px;}

.zoeken {position: absolute; background: #FFF; border: 0; top: 70px; right: 0; left: 0; width: 100%; max-width: var(--maxWidth); border-radius: 0; margin: 0 auto; box-sizing: border-box; overflow: hidden; max-height: 0; transition: .4s all ease; padding: 0 30px; z-index: 3;}
.zoeken.open {opacity: 1; pointer-events: all; max-height: 70px; overflow: visible; z-index: 3;}
.zoeken .veld {width: 100%;}
.zoeken .veld #zoekWoordID {padding: 20px 10px; font-size: 16px; font-family: var(--fontFamily1); color: var(--fontColor3) !important; font-weight: normal;}
.zoeken .knop {transition: .3s all ease;}
.zoeken .knop:before {content: "\f002"; font-family: "Font Awesome 5 Pro"; font-weight: lighter; font-size: 18px;}

.donkerBg {z-index: 15; 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;}
.donkerBg.open {opacity: 1; bottom: 0;}

.speedsearchResultBg, .speedsearchLoader {display: none;}
#speedsearchResult {left: 0; border-radius: var(--borderRadius1); max-width: var(--maxWidth); margin: 0 auto; padding: 0 30px; box-sizing: border-box;}
#speedsearchResult .houder {display:block; border-radius: var(--borderRadius1); 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(--borderRadius1);}
#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(--color1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size:14px;}
#speedsearchResult .houder .speedSearch .resultaat {padding: 10px; margin: 0; color: var(--fontColor3); 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(--borderRadius1); line-height: 1; background: var(--color1); border: 0; color: #fff; font-size: 14px; letter-spacing: 0.02em; padding: 15px 20px;}
#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: 20px; height: 20px;}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: #000; color: #FFF; padding: 1px 4px 0 4px; border-radius: var(--borderRadius1); line-height: 14px; top: -10px; right: -11px;}

.winkelwagenHouder .winkelknop .aantal {padding:2px 6px 0 6px;}

.winkelwagenHouder .winkelwagen                   {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: var(--color2); transform: translateZ(0); transition: right .5s ease-in-out; width: 700px; max-width: 100vw;}
.winkelwagenHouder.openGeklapt .winkelwagen       {top: 0; right: 0; max-height: 100vh;}
.winkelwagenHouder .winkelwagen #winkelmandje     {display: flex; flex-direction: column; height: 100vh;}
.winkelwagenHouder .winkelwagen .inhoud.totaal    {margin: auto 0 0; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,.1);}
.winkelwagenHouder .winkelwagen .inhoud.artikelen .h3, .account .houder .accountKop {font-size: 20px; margin: 0 0 10px 0; line-height: 1.35em;}
.winkelwagenHouder .winkelwagen .inhoud {padding: 30px;}
.winkelmandjeLeeg {background: transparent; border: 0; padding: 30px; margin: auto; font-size: 20px; color: #a4a4a4;}

.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: 20px; height: 20px;}
.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/favorites.svg) no-repeat; background-position: center; background-size: contain; width: 20px; height: 20px;}

.account .houder {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: var(--color2); transform: translateZ(0); transition: right .5s ease-in-out; width: 500px; max-width: 100vw;}
.account .openGeklapt .houder {top: 0; right: 0; max-height: 100vh;}
.account .mijnAccount .houder {width: 400px; max-width: 80vw; display: flex; flex-direction: column; height: 100vh;}
.account .mijnAccount .houder .houder2 {margin: auto 0 0; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,.1);}
.account .mijnAccount .houder .houder2 .uitloggen a {padding: 15px 20px; background: var(--color1); border: 0; border-radius: var(--borderRadius1); color: #FFF; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; text-decoration: none; display: block; text-align: center; line-height: normal;}
.account .houder .houder1 {padding: 30px 30px 0 30px;}
.account .houder .houder2 {background: transparent; border: 0; padding: 20px 30px;}
.account .inloggen .inlogKnop a.inlogKnop2 {background: var(--color1); color: #FFF; width: 130px;}
.account .inloggen .inlogKnop .wachtwoordKwijt a {font-size: 13px; color: #a4a4a4;}
.account .inloggen .inlogKnop .wachtwoordKwijt {margin-left: auto; margin-right: 10px;}

.hoverMenu {left: 0; right: 0; border-top: 0; border-radius: 0 0 0 0; width: 100%; top: 100%; box-shadow: unset; max-width: var(--maxWidth); margin: 0 auto; padding: 30px; box-sizing: border-box; display: grid; grid-template-columns: 2fr 1fr; overflow: unset;}
.hoverMenu::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FFF; z-index: -1; box-shadow: rgba(0, 0, 0, 0.01) 0px 2px 1px, rgba(0, 0, 0, 0.01) 0px 4px 2px, rgba(0, 0, 0, 0.01) 0px 8px 4px, rgba(0, 0, 0, 0.01) 0px 16px 8px, rgba(0, 0, 0, 0.01) 0px 32px 16px;}
.hoverMenu .categorie {width: 100%; order: 2; padding: 0;}
.hoverMenu .categorie p {margin: 0;}
.hoverMenu .categorie .kop {display: none;}
.hoverMenu .categorie .afbeelding {float: unset; margin: 0;}

.hoverMenu .kolommen {width: 100%; padding: 0; display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr; order: 1;}
.hoverMenu .kolommen .kolom {padding: 0; width: unset;}
.hoverMenu .kolommen .kolom a {color: var(--fontColor3); font-size: 15px;}
.hoverMenu .kolommen .kolom .titel a {line-height: 1.35em; font-family: var(--fontFamily1); color: var(--fontColor3); margin: 0 0 10px 0; pointer-events: none; font-size: 20px; letter-spacing: 0.02em; font-weight: normal;}
.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 li {line-height: inherit;}
.hoverMenu .kolommen .kolom > ul li a {color: var(--fontColor3); position: relative; font-size: 14px; line-height: 1; border: 0; padding: 5px 0; transition: .3s all ease; width: unset; display: inline-flex; align-items: center; gap: 10px;}
.hoverMenu .kolommen .kolom > ul li a::after {content: ""; display: block; position: absolute; bottom: 2px; left: 0; width: 0; height: 1px; background-color: #000; transition: all .3s ease;}
.hoverMenu .kolommen .kolom > ul li a:hover {text-decoration: none; opacity: .5; background: unset;}
.hoverMenu .kolommen .kolom > ul li a:hover::after {width: 100%;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}

section .inhoud, .vak .inhoud {padding: 80px 30px;}

div[class*="grid"].logos {display: flex;}
div[class*="grid"].logos > div {line-height: 0; flex: 1;}
div[class*="grid"].logos img {width: 100% !important; height: auto !important;}

.vak.grijs {background: var(--color2);}

.vak.metFoto  {padding: 0;}
.vak.metFoto .grid-2x {position: relative; gap:0; align-items: center; aspect-ratio: 2/1 !important; width: 100%; max-width: var(--maxWidth); margin: auto;}
.vak.metFoto .tekst {padding: 100px; box-sizing: border-box; align-content: center;}
.vak.metFoto .tekst h2 {position: relative;}
.vak.metFoto .afbeelding {box-sizing: border-box; line-height:0; background-size: cover; background-position: center;}
.vak.metFoto.links .tekst {padding-left: 100px;}



.pageFooterHolder {background: transparent;}
.pageFooterHolder .pageFooter {color: var(--fontColor3); padding: 80px 30px; max-width: var(--maxWidth);}

.copyright {margin-top:40px; display: inline-block;}
.pageFooterHolder .pageFooter .extramenu {display: inline-block; margin-left:20px; }
.pageFooterHolder .pageFooter .extramenu a {color: var(--fontColor3); text-decoration: none; border-bottom: 1px solid #000;}
.pageFooterHolder .pageFooter .extramenu .seperator {opacity: 0; margin: 0 5px;}

.pageFooterHolder .pageFooter .grid-4x {grid-template-columns: 3fr 2fr 2fr 2fr; padding-top: 80px; gap: 50px;}
.pageFooterHolder .pageFooter .h3 {font-size: 16px;}

.pageFooterHolder .pageFooter .footerBetalen {position: relative; background: var(--color2); padding: 30px 0; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center;}
.pageFooterHolder .pageFooter .footerBetalen::before {position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); content: ""; background: var(--color2); z-index: -2;}
.pageFooterHolder .pageFooter .footerBetalen .uitleg .h3 {font-size: 18px; margin: 0;}
.pageFooterHolder .pageFooter .footerBetalen .uitleg p {margin-bottom: 0;}
.pageFooterHolder .pageFooter .footerBetalen > div:last-child {margin-left: auto;}

.pageFooterHolder a, .pageFooterHolder a:hover {color:#000;}

.pageFooterKnoppenHolder {background: #FFF;}
.pageFooterHolder a.knop {color:#fff !important;}

.shopBovenkant {padding: 70px 0 20px 0; margin-bottom: 80px; z-index: 3; position: relative;}
.shopBovenkant::before {content: ""; position: absolute; width: 100vw; background: var(--color2); top: -30px; bottom: 0; margin-left: calc((-100vw + 100%) / 2); z-index: -1;}

.shopBovenkant p {max-width: 1200px;}

.shopHolder .resCategorieen     {display: flex; padding:10px 15px 0px 15px}
.shopHolder .resCategorieen ul li           {margin-right:20px; font-size:14px;}
.shopHolder .resCategorieen ul li a         {padding: 10px 0; border:0; border-radius: 0; min-width: 0; position: relative;}
.shopHolder .resCategorieen ul li.actief a  {background: transparent; color: var(--fontColor3);}
.shopHolder .resCategorieen ul li a::before { content: ""; display: block; position: absolute; bottom: 4px; left: 0; width: 0; height: 1px; background-color: #000; transition: all .3s ease; }
.shopHolder .resCategorieen ul li a:hover::before, .shopHolder .resCategorieen ul li.actief a::before {width: 100%;}

.shopSortOptie  {border:0; padding:0; position: absolute; right:0; margin-top:-4px;}
.shopSortOptie select {box-shadow: 0 10px 15px rgba(0,0,0,.1);}
.sorteerLijst {margin-right: 0;}

.kenmerkMobielHouder {display: block; }

.kenmerkMobielHouder.standaard .toonFiltersKnop {display: block !important; margin: auto; border: 1px solid #ddd; white-space: nowrap; background: #fff; color: var(--fontColor3); padding: 15px 15px 14px 15px; border-radius: var(--borderRadius1); line-height: normal; font-size: 15px; box-shadow: 0 10px 15px rgba(0,0,0,.1); transition: all .3s ease}
.kenmerkMobielHouder.standaard .toonFiltersKnop::after {content: "\f0b0"; font-family: "Font Awesome 5 Pro"; margin-left: 15px; vertical-align: middle; font-weight: 100;}
.kenmerkMobielHouder.standaard .toonFiltersKnop:hover {color:#fff; background:#000}


.kenmerkMobielHouder.standaard .filters .kenmerkgroep .titel .groepActieveKenmerken {font-weight: normal;}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .titel .groepActieveKenmerken:empty {display: none;}

.kenmerkMobielHouder.standaard .filters .filterBovenkant .alleFiltersWissen {margin: 0 0 20px 0;}
.kenmerkMobielHouder.standaard .filters .filterBovenkant .alleFiltersWissen a {background :none; padding: 0; border-bottom: 1px solid #000; border-radius: 0; margin: 0;}

.kenmerkMobielHouder.standaard .filters {position: fixed; top: 70px; flex-direction: column; bottom: 0; opacity: 1; display: flex !important; right: -100%; max-height: calc(100vh - 72px); border-radius: 0; box-shadow: unset; background-color: #FFF; transition: right .5s ease-in-out; width: 500px; max-width: 100vw; margin: 0;}
.kenmerkMobielHouder.standaard .filters.open {opacity: 1; right: 0;}
.kenmerkMobielHouder.standaard .filters .kenmerkgroepHouder {display: flex; flex-direction: column; gap: 15px; max-height: calc(100vh - 200px); overflow-y: auto;}
.kenmerkMobielHouder.standaard .filters .kenmerkgroepHouder .kenmerkgroep {border: 0; padding: 0;}

.kenmerkMobielHouder.standaard .filterknop {position: sticky; bottom:0; margin-top: auto;}
.kenmerkMobielHouder.standaard .filterknop a {color: #FFF; background: var(--color1); border: 0; transition: all .3s ease; border-radius: var(--borderRadius1); margin: 20px 0 0 0;}
.kenmerkMobielHouder.standaard .filterknop a:hover {opacity: .7;}

.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color:transparent}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk:hover .omschrijving {color: var(--fontColor3);}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"]:checked + .omschrijving {font-weight: bold; color: var(--fontColor3);}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"]:checked + .kenmerkAfbeelding {box-shadow: 0 0 0 2px rgba(0,0,0,1)}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken {margin: 0; padding:0}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk {margin: 0; padding: 5px;}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"] {top:0}
.kenmerkMobielHouder.standaard .filters .kenmerkgroep .kenmerken label img { border: 1px solid #eee; border-radius: 50px; max-width: 22px; position: relative; top: 7px; margin-right: 6px; margin-left: 0px; }

.shopCategorieHolder {gap: 30px; grid-template-columns: 1fr 1fr 1fr; max-width: 1580px; margin:0 auto}
.shopCategorieHolder .categorie {border: 0;}
.shopCategorieHolder .afbeeldingHouder::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 .afbeeldingHouder .verhouding {padding-bottom: calc(100% * 7 / 5);}
.shopCategorieHolder .categorie .titel {padding: 20px 0;}
.shopCategorieHolder .categorie .titel h2 {font-size: 20px; font-weight: normal; line-height: 1.3em; margin-bottom: 0.5em;}

.artikel .afbeeldingHouder .verhouding {padding-bottom:calc(100% * 7 / 5)}
.kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: var(--color1);}

.shopTegel {gap: 30px; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));}
.shopTegel .artikel .inner {padding:0; border:0;}
.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 .afbeeldingHouder::before {content: ""; background: #000; top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: .03; transition: all .5s ease; z-index: 1; pointer-events: none;}
.shopTegel .artikel .inner .afbeeldingHouder .verhouding {padding-bottom: calc(100% * 7 / 5);}


.shopTegel .artikel .inner .rechtsboven {z-index: 2;;}
.shopTegel .artikel .inner .rechtsboven div {margin: 15px;}
.shopTegel .artikel .inner .rechtsboven div a {background: transparent; padding: 0; font-size: 22px; color: var(--fontColor3);}
.shopTegel .artikel .inner .rechtsboven div a i {font-weight: lighter;}
.shopTegel .artikel .inner .rechtsboven div.aan a i {font-weight: bold !important; color: #000}
.shopTegel .artikel .inner img.tweedePlaatje {opacity: 0; transition: all .1s ease}
.shopTegel .artikel .inner:hover img.afbeelding:nth-child(1n+2) {opacity: 0;}
.shopTegel .artikel .inner:hover img.tweedePlaatje {opacity: 1;}
.shopTegel .artikel .omschrijving {padding:20px 0;}
.shopTegel .artikel .omschrijving h2.titel {font-size: 15px; font-weight: 600; line-height: 1.3em; margin-bottom: 0.5em;}
.shopTegel .artikel .omschrijving h2.titel a {line-height: inherit;}

.shopTegel .artikel .prijzen .prijs {font-size: 15px; font-weight: normal;}

.shopLijst .artikel .prijzen {width: 100px; text-align: right;}
.shopLijst .artikel .bestellen {margin:0 !important; display: inline-block !important;}
.shopLijst .artikel .meerinfo,
.shopLijst .artikel .prijzen .relatieBtwPrijs,
.shopLijst .artikel .prijzen .artikelEenheid,
.shopLijst .artikel .prijzen .artikelBestelEenheid,
.shopLijst .artikel .prijzen .aantalMinPlus,
.shopLijst .artikel .labels,
.shopLijst  a.wButBestel span {display: none;}
.shopLijst .artikel .prijzen .prijs {font-size:18px;}
.shopLijst a.wButBestel {text-align: center; width:16px !important; padding:15px; line-height: 1em !important;}
.shopLijst a.wButBestel::before {content: "\f291"; font-family: "Font Awesome 5 Pro"; margin: 0; font-weight: 400; display: block !important;}

.shopCompact .artikel {gap: 10px;}
.shopCompact .artikel .bestellen {width: unset; min-width: unset; display: block;}
.shopCompact .artikel .bestellen .bestelknop a {line-height: 0; background: var(--color4);}
.shopCompact .artikel .bestellen .bestelknop a span {display: none;}
.shopCompact .artikel .bestellen .bestelknop a::before {content: "" !important; display: block; background: url(/skin/images/cart.svg) no-repeat; background-position: center; background-size: contain; margin: auto 0 auto auto !important; filter: brightness(0) invert(1); width: 15px; height: 15px;}
.shopCompact .artikel .prijzen .prijs {font-size: 14px;}

#extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding:20px;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .afbeeldingHouder {max-width: 70px;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .prijzen {line-height: 1.35em;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen {display: inline-block !important; margin-top: 5px !important;}
.shopLijst a.wButBestel a.wButBestel::before {content: "\f291"; font-family: "Font Awesome 5 Pro"; margin: 0; font-weight: 400;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a {min-width: unset;}

.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin: 0;}
.artikel.detail .detailinkollommen .links {width: 100%; margin: 0;}
.artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0; padding: 30px; box-sizing: border-box; top: 70px; position: sticky; margin-bottom: auto;}

.artikel.detail .detailinkollommen .rechts h1 {font-size: 36px; font-weight: normal; line-height: 1.3em}
.artikel.detail .detailinkollommen .rechts .h3 {margin-bottom: 0; margin-top: 20px;}
.artikel.detail .detailinkollommen .rechts > .prijzen {margin: 10px 0 auto auto;}

.artikel.detail .detailinkollommen .rechts > .bestellen  {margin: 20px 0;}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten {margin: 0;}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten .image {padding: 0;}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten .image i {font-weight: lighter; color: var(--fontColor3);}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten.aan .image i {font-weight: bold;}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten a {display: block; line-height: 1; padding: 15px 20px; border: 1px solid #EAE8E5; border-radius: var(--borderRadius1); font-size: 20px; font-weight: lighter;}
.artikel.detail .detailinkollommen .rechts > .bestellen .favorieten span.toelichting {display: none;}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop a.wButBestel {width: 100%; line-height: 1; display: flex; gap: 10px; padding:15px; background: var(--color4);}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop a.wButBestel span {margin: auto auto auto 0;}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop .wButBestel::before {content: ""; display: block; background: url(/skin/images/cart.svg) no-repeat; background-position: center; background-size: contain; margin: auto 0 auto auto; filter: brightness(0) invert(1); width: 20px; height: 20px;}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop input {display: none;}

.artikel.detail .afbeelding .volledigGallery .carousel-cell-groot {margin:0; line-height: 0;}
.artikel.detail .afbeelding .volledigGallery .carousel-cell-groot::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;}
.artikel.detail .afbeelding .volledigGallery .carousel-cell-groot .verhouding {padding-bottom: calc(100% * 7 / 5);}
.artikel.detail .afbeelding .volledigGallery .carousel-cell-groot video {width: 100%; height: auto;}
.artikel.detail .afbeelding .volledigGallery.carousel.carousel-main {display: grid; gap: 10px; grid-template-columns: 1fr 1fr;}

.artikel.detail #tabSerieInhoud .shopTegel .artikel .inner {padding:0;}

.artikel.detail .vak .inhoud {padding-left: 0; padding-right: 0;}

#tabSerieInhoud .artikel .labels,
#tabSerieInhoud .artikel .prijzen,
#tabSerieInhoud .artikel .bestellen,
#tabSerieInhoud .artikel .artikelGewicht,
#tabSerieInhoud .artikel .favorieten,
#tabSerieInhoud .artikel .verlang,
#tabSerieInhoud .artikel .shopDetailModernKenmerken,
#tabSerieInhoud .artikel .formuleHolder,
#tabSerieInhoud .shopTegel .artikel .omschrijving,
#tabSerieInhoud .shopLijst .artikel .inner .col3,
#tabSerieInhoud .shopLijst .artikel .inner .meerinfo {display: block;}


.fancybox-content.dialog-content {position: fixed; top: 0; bottom: 0; max-width: 450px; min-width: 450px; right: 0; margin: 0 !important;}
.fancybox-close-small {padding: 5px !important;}
.fancybox-close-small svg {background: var(--color2); padding: 5px; box-sizing: border-box; border-radius: var(--borderRadius1);}
.fancybox-button:hover {background: unset;}

.tabsV2 .titels {border-bottom:1px solid #e5e5e5; width: 100%;}
.tabsV2 .titels > div {border:0; padding:5px 0; border-bottom:1px solid #e5e5e5; color:#999; background: transparent; margin-right: 30px; font-weight: 600; white-space: nowrap;}
.tabsV2 .titels > div.actief {border: 0; border-bottom: 1px solid #000; color: var(--fontColor3);}
.tabsV2 > .inhoud {padding: 10px 0; border:0;}
.tabsV2 > .inhoud .shopDetailModernKenmerken {margin: 0;}

.kenmerkArt,
.tabsV2 > .inhoud .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 220px 1fr; color: var(--fontColor3); border: 0; font-size: 12px; font-weight: normal;}
.kenmerkArt .groep, .tabsV2 > .inhoud .artikelGewicht .titel, .EANnummer .toelichting {color: var(--fontColor3); font-weight: 500;}
.kenmerkArt:nth-child(odd) {background-color: #f8f8f8;}
.kenmerkArt .kenmerken .kenmerk {display: block;}
.kenmerkArt .kenmerken .kenmerk .toevoeging::before,
.kenmerkArt .kenmerken .kenmerk .toevoeging::after,
.kenmerkArt .kenmerk::after {display: none;}
.kenmerkArt .kenmerken .kenmerk .toevoeging {margin-left:0.3em; color: inherit;}



.artikel .artikelnr > .titel {display: none;}
.artikel .labels .label {border-radius: var(--borderRadius1); background: var(--color3); color: #FFF; text-transform: uppercase; letter-spacing: 0.02em; margin: 10px 10px 0; padding: 10px;}

.stappenbalk {margin:40px 0;}
.stappenbalk li {text-align: left;}
.stappenbalk li::before, .stappenbalk .klaar a::before {color:inherit; margin:0; width:30px; height:30px; font-size:16px; font-weight: normal; line-height:30px; background:#eee;}
.stappenbalk li::after {left:10%; width:85%; border-color: #EAE8E5; top:15px;}
.stappenbalk .naam {text-align: left; text-transform: none; font-size:16px; position: absolute; top: 0; margin-left: 35px; background: #fff; padding: 10px 15px ;}
.stappenbalk .klaar a::before  {margin:0; background-color:#000; color:#fff;}
.stappenbalk .bezig::before {color:#fff;}
.stappenbalk .klaar::after {border-color:#000;}
.stappenbalk .bezig .naam {font-weight: normal;}

.kassainkollommen>.rechts {margin-left:50px;}
.kassainkollommen>.rechts .blok, .couponcodeHouder {padding:30px; background-color:var(--color2);}

.kassainkollommen>.rechts .blok .usp {list-style: none; padding: 0;}
.kassainkollommen>.rechts .blok .usp li {display: flex; gap: var(--space10); align-items: center;}
.kassainkollommen>.rechts .blok .usp li i {font-size: 17px; color: var(--color4);}

.kassaArtikelen {margin-top:40px}
.kassaArtikel {position: relative;} 
.kassaArtikelen .aantallen .verwijderen {display: none;}
tr.totaalTeBetalenSpacing, .kassaArtikelen .artikel .relatieBtwPrijs, .totaalGewicht {display:none;}
.kassaArtikelen .artikel .aantalMinPlus {display: grid; grid-template-columns: 1fr 1fr 1fr;}

.stap .totalen .totalenTabel table td {padding-top: 6px; padding-bottom: 6px; line-height: 1.4em; color: var(--fontColor3);}
.stap .totalen .totalenTabel table .totaalExclBtw td {border-color:#000; font-weight: inherit;}
.stap .totalen .totalenTabel table .totaalTeBetalen td {border-color: #000; padding-top: 10px; font-weight: inherit; font-size: 100%;}
.stap .totalen .totalenTabel table .totaalArtikelen .bedragExclusiefRelatie .relatieBtwPrijs {opacity: 0;}
.stap .totalen .stappenKnop a {background-color: var(--color3); font-weight: normal; padding:15px 25px; margin-top: 20px;}
.stap .totalen .totaalExclBtw, .stap .totalen .totaalBtw, .stap .totalen .totaalBetalingskosten, 
.stap .totalen .totaalTeBetalenSpacing, .stap .totalen .totaalTeBetalen {display: none;}

.stap .blokholder {background:#fff; padding:30px 30px 0 30px;}
.stap .blokholder>.titel {font-weight: normal; font-size:24px;}
.typeKlant input[type="radio"]+label::before, .geslacht input[type="radio"]+label::before {font-size: 20px; top: 12px;}
.typeKlant label, .geslacht label {padding: 8px 15px 7px 40px;}
.typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label, .typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before, .typeKlant input[type="radio"]+label:hover, .geslacht input[type="radio"]+label:hover {color:#000; border-color:#000;}
input[type="checkbox"]::before {font-size:20px; top:2px;}
input.correct, .correct {border-color:#000; background-image:url('data:image/svg+xml;utf8,<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="m207.252556 301.567803 226.515803-226.5158031c6.736-6.7359999 17.657214-6.7359999 24.393214 0l48.786427 48.7864271c6.736 6.736 6.736 17.657214 0 24.393214l-236.180647 236.180646c-.644342.989192-1.400558 1.92679-2.268647 2.794879l-48.786427 48.786427c-6.736 6.736-17.657214 6.736-24.393213 0l-190.26706606-190.267065c-6.73599992-6.736-6.73599992-17.657214 0-24.393214l48.78642706-48.786427c6.7359999-6.736 17.6572136-6.736 24.3932135 0z"/></svg>')!important;}

.stap.twee .contactpersoon .tussenvoegsel {display:none;}
.stap.twee .contactpersoon .voornaam, .stap.twee .contactpersoon .achternaam {width:50%;}
.stap.twee .telefoon {display:none;}
.stap.twee .telefoon .vast {width:100%; margin-right:0;}
.stap.twee .telefoon .mobiel {display:none;}
.stap.twee #stap2_bewaaraccount { padding: 30px; background: var(--color2); margin: 0 30px; }
.stap.twee #stap2_factuuruitklap {padding: 0 30px;}
.stap.twee .algemeneGegevens .content {display: flex; flex-direction: column;}
.stap.twee .nawVeld.labelBinnenkant.emailadres {order:-1;}

.stap.drie .regel .bedrag .gratis {padding-top:4px;}

.meldingHouder .melding {text-align: left;}
.meldingHouder .melding .knoppen a {margin:0; margin-right:20px; padding:15px 20px; min-width: unset;}

.inloggenBg.open, .mijnAccountBg.open, .verlanglijstBg.open, .winkelwagenHouderBg.open, .speedsearchResultBg.open, .donkerBg.open {cursor: url(/skin/images/cursor-close.png), auto;}
.inloggenBg, .mijnAccountBg, .verlanglijstBg, .winkelwagenHouderBg, .speedsearchResultBg, .donkerBg {background:rgba(240,240,240,.7);}

.bovenkantHolder .bovenkant .resMenubalk {margin: auto 10px auto 0;}
.bovenkantHolder .bovenkant .resMenubalk .resMenubalkinhoud {display: flex;}
.bovenkantHolder .bovenkant .resMenubalk .resMenubalkinhoud a.resMenucategorieknop {margin: auto auto auto 0;}

.bovenkantHolder:has("open") {background:#FFF;}

.resMenuHolder {display: flex; flex-direction: column; top:100%;}
.resMenublok:last-child {margin-top:auto;}
.bovenkantHolder:has(.resMenuHolder.open) {background-color: #fff;}

.liquid-slide-sjabloon .sliderWrapper {max-width: var(--maxWidth);}
.liquid-slide-sjabloon .inhoud {position: absolute; background: unset; max-width: 800px; border-radius: 0; color: #FFF; padding: 20px; box-sizing: border-box; text-align: center; left: 0; right: 0; margin: 0 auto;}
.liquid-slide-sjabloon .inhoud h1, .liquid-slide-sjabloon .inhoud h2 {color: #FFF; font-size: 36px; text-transform: uppercase;}
.liquid-slide-sjabloon .inhoud a.knop[href=""] {display: none;}

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

  .shopCategorieHolder {gap: 30px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); max-width: unset;}

}


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

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


  a.logo img {width: 60px;}

  .bovenkantHolder .bovenkant .shopitems {margin: auto 0 auto auto;}
  .bovenkantHolder .bovenkant .zoekenTrigger {margin: auto 5px;}

  .breadcrumbs {display: none !important;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

  .pageFooterHolder .pageFooter {padding: 20px;}
  .pageFooterHolder .pageFooter .footerBetalen {grid-template-columns: 1fr; text-align: center;}
  .pageFooterHolder .pageFooter .footerBetalen > div:last-child {margin: 0 auto;}
  .pageFooterHolder .pageFooter .grid-4x {gap: 20px; grid-template-columns: 1fr; padding-top: 20px;}

  .pageFooterHolder .pageFooter .extramenu {margin: 0;}

  .shopCategorieHolder {gap: 20px;}

  .shopTegel {gap: 20px;}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr;}
  .artikel.detail .detailinkollommen .rechts {top: unset; position: relative; padding: 0;}
  .artikel.detail .detailinkollommen .rechts h1 {font-size: 24px;}

  .artikel.detail .afbeelding .volledigGallery.carousel.carousel-main {margin: 0 0 20px 0; display: block;}
  .artikel.detail .afbeelding .volledigGallery.carousel.carousel-main::after {content: 'flickity'; display: none;}
  .artikel.detail .afbeelding button.flickity-button {opacity: 1;}
  .fancybox-content.inhoud {min-width: 90vw !important; max-width: 90vw !important;}

  .tabsV2 .titels {display: flex;}
  .tabsV2 .inhoud>div {display: none !important;}
  .tabsV2 .inhoud>div.actief {display: block !important;}
  
  .account {display: flex;}
  .account li {padding: 5px;}
  .account .houder {max-width: 80vw;}

  .winkelwagenHouder {display: block;}
  .winkelwagenHouder .winkelknop {margin: 0;}
  .winkelwagenHouder .winkelwagen  {max-width: 90vw;}
  .winkelwagenHouder .winkelwagen .inhoud {padding: 20px;}

  .kassaArtikelen {margin-top: 10px;}
  .kassaArtikelen .artikel .aantalMinPlus {width: 50px; border: 0;}
  .kassaArtikelen .artikel .aantallen input {width: 45px !important; border: 1px solid #EAE8E5; border-radius: var(--borderRadius1) !important;}
  .kassaArtikelen .artikel .aantalMinPlus div {display: none;}
  
  .kassainkollommen>.rechts {margin-left: 0;}
  .stap .blokholder {padding: 10px;}
  .stap.twee #stap2_bewaaraccount {margin: 0 10px;}
  .stap.twee #stap2_factuuruitklap {padding: 0 10px;}
  .stappenbalk  {margin: 10px 0;}


  .filters .kenmerkgroepHouder {grid-template-columns: repeat(1, 1fr);}
  .filters .kenmerkgroep {padding: 0;}

  .vak.metFoto .tekst {padding: 30px;}
  .vak.metFoto .tekst a.knop + a.knop {margin: 10px 0;}
  .vak.metFoto .afbeelding {min-height: 300px;}
  .vak.metFoto.links .tekst {padding: 30px;}
  .vak.metFoto.links .afbeelding {order: 1;}
  .vak.metFoto .grid-2x {aspect-ratio: unset !important;}

  .liquid-slide-sjabloon .inhoud {position: absolute; font-size: inherit; max-width: 100%; top: unset; bottom: 0;}
  .liquid-slide-sjabloon .inhoud a.knop {display: block;}
  .liquid-slide-sjabloon .inhoud a.knop + a.knop {margin: 10px 0;}
  .liquid-slide-sjabloon .inhoud h1, .liquid-slide-sjabloon .inhoud h2 {font-size: 30px; margin: 0 0 30px 0;}
  .liquid-slide-sjabloon .sliderWrapper {position: absolute; bottom: 0; background: unset;}

}