:root {
  --color1: #CB1417;
  --fontColor: #353535;
  --fontFamily1: "Open Sans", Helvetica, Arial, sans-serif;
  --fontFamily2: "Teko", Helvetica, Arial, sans-serif;
  --bodyFontSize: 14px;
  --h1Size: 45px;
  --h2Size: 35px;
  --h3Size: 25px;
  --h5Size: 17px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
} 

html {
  overflow-x: hidden;
}

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

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

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

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(--fontFamily2); color: var(--fontColor); font-weight: 500; line-height: 1;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size); color: var(--color1);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size); font-family: var(--fontFamily2);}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {color: #686868; font-size: var(--h5Size); font-family: var(--fontFamily1);}

a.knop, .button, a.button, button {font-size: 14px; padding: 15px 25px; border-radius: 5px; background: var(--color1); line-height: 1; text-decoration: none !important; color: #FFF;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: #000; color: #FFF;}

a.whatsAppButton {background:#25D366; color:#fff; padding:15px; background-color:#49E76F; position: fixed; right:20px; bottom:20px; z-index: 15; border-radius: 100%; aspect-ratio: 1; line-height: 1em;; box-shadow: 0 5px 15px rgba(0,0,0,0.3); box-sizing:border-box; transition: all .3s ease;}
a.whatsAppButton img {width:100%; height:auto;}
a.whatsAppButton:hover {background-color: #075E54;}

a.logo {margin: auto 0; outline: 0;}
a.logo img {width: 200px;}

.art-Sheet .art-sidebar1:empty {display: none;}

.extrabovenkantHolder {background: var(--color1);}
.extrabovenkantHolder .extrabovenkant .uspArtikel ul {list-style: none; padding: 0; margin: 0; display: flex; gap: 30px;}
.extrabovenkantHolder .extrabovenkant .uspArtikel ul li {font-size: 12px; color: #FFF; padding: 5px 0; position: relative;}
.extrabovenkantHolder .extrabovenkant .uspArtikel ul li a {color: #FFF !important;}
.extrabovenkantHolder .extrabovenkant .uspArtikel ul li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #FFF; margin-right: 10px;}
.extrabovenkantHolder .extrabovenkant .telefoon {margin: auto 20px auto auto; text-decoration: none; font-size: 12px; color: #FFF; padding: 5px 0; position: relative;}
.extrabovenkantHolder .extrabovenkant .telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #FFF; margin-right: 10px;}

header {position: sticky; top: 0; z-index: 20;}
.bovenkantHolder {background: #FFF; border: 0; border-bottom: 1px solid #f3f3f3;}
.winkelmenuHolder {background: var(--color1);}

.bovenkant .art-nav {margin: auto 20px auto auto;}
.bovenkant .art-nav .art-menu {display: flex; gap: 20px;}
.bovenkant .art-nav .art-menu li a .t {padding: 15px 0; font-size: 14px; font-weight: normal; color: var(--fontColor); font-family: var(--fontFamily1);}
.bovenkant .art-nav .art-menu li a .t:hover, .bovenkant .art-nav .art-menu li a.active .t {color: var(--color1);}
.bovenkant .art-nav .art-menu li.separatorHouder {display: none;}

.bovenkantHolder .bovenkant .winkelmenuKnop  {visibility:hidden!important; position: relative; margin: auto 20px; padding: 12px 15px; line-height: 1; cursor: pointer; transition: .3s all ease; background: #f2f2f2; border-radius: 5px; color: var(--color1);}
.bovenkantHolder .bovenkant .winkelmenuKnop > .titel {text-align: center; font-weight: bold;}
.bovenkantHolder .bovenkant .winkelmenuKnop > .titel::before {content: "\f0c9"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; vertical-align: middle; font-size: 16px; position: relative; bottom: 1px;}
.bovenkantHolder .bovenkant .winkelmenuKnop > .titel::after {content: ""; position: absolute; border: 0; left: -20px; top: 29px; right: -20px; height: 30px; z-index: 2; display: block; width: auto;}

.bovenkantHolder .bovenkant .winkelmenuHolder {position: absolute; background: #FFFF; transition: .3s all ease; opacity: 0; padding: 0; box-sizing: border-box; pointer-events: none; left: 0; width: 330px; border-radius: 0 0 10px 10px; overflow: unset; top: calc(100% + 18px); height: auto;}

.bovenkantHolder .bovenkant .winkelmenuHolder.actief  {opacity: 1; pointer-events: all; z-index:12; box-shadow: 0 30px 30px rgba(0,0,0,0.2);}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul {opacity: 1; visibility: unset; box-shadow: unset; border: 0; display: block; padding: 20px 10px;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul::before {display: none;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li {display: block; margin: 0; border-top: 0; position: static; border-radius:0; padding: 0;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li:first-child {border: 0;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li.separatorHouder {display: none;}

.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li > a {border: 0; position: relative; display: block; padding: 7px 20px; cursor: pointer; width: 260px;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li > a:hover {background: #f2f2f2;}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li > a .t {padding: 0 20px 0 0; hyphens: auto; font-size: 15px; box-sizing: border-box; line-height: 1.95em; font-weight: bold; color: var(--color1);}
.bovenkantHolder .bovenkant .winkelmenuHolder > ul > li > a .t::after {display: none;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu {left: calc(100% - 10px); max-height: 100%; z-index: 10; top: 0; padding: 30px; box-sizing: border-box; width: 980px; min-height: 100%; overflow: auto; border: 0; border-top: unset; transform: unset; box-shadow: unset; border-radius: 0 0 10px 0; visibility: unset; border-left: 1px solid #eee;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu.actief {transform: unset; top: 0; opacity: 1; visibility: visible; pointer-events: all;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .categorie {padding: 0; display: flex; gap: 20px; margin: 0 0 30px 0;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .categorie .afbeelding {float: unset; order: 3; margin-left: auto; display: none;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .categorie .kop {font-family: var(--fontFamily2); color: var(--fontColor); font-weight: 500; line-height: 1; font-size: 27px;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen {padding: 0; display: block; column-count: 4; display: flex; align-items: center; gap: 10px 0;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom {width: 300px; padding: 0; float: none; break-inside: avoid-column; display: flex; align-items: center; gap: 10px;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom .afbeelding {position: relative; line-height: 0; background: #f5f5f5; border-radius: 10px; padding: 10px; box-sizing: border-box;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom .afbeelding img {width: 50px; height: 50px; mix-blend-mode: darken;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom .titel a {border: 0; font-weight: normal; width: auto; padding: 5px 0; line-height: 1;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom .titel a::before {display: none;}

.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul {font-size: 14px; padding: 0; background: unset; opacity: 1; visibility: unset; position: relative; box-shadow: unset; transition: unset; border: 0; overflow: hidden;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul.gesloten {max-height: 146px;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul.open {max-height: 100%;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul::before {display: none;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul li {line-height: 1.35em;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul li a {border: 0; padding: 5px 10px; color: #686868; border-radius: 5px;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul li a:hover {background: #f2f2f2;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom > ul li a::before {display: none;}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom a:hover {text-decoration: none; color: var(--color1);}
.bovenkantHolder .bovenkant .winkelmenuHolder .hoverMenu .kolommen .kolom .tonen {color: var(--fontColor); cursor: pointer; padding: 0 10px; text-decoration: underline; font-weight: 500;}

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

.bovenkantHolder .bovenkant .zoekenHolder {margin: auto auto auto 0; width: 100%; max-width: 600px;}
.zoeken {background: #f2f2f2; border-radius: 5px; width: 100%; border: 0;}
.zoeken .veld {width: 100%;}
.zoeken .veld #zoekWoordID {padding: 11px;}
.zoeken .veld #zoekWoordID:focus {color: #000 !important;}
.zoeken .knop:before {font-weight: normal; font-size: 17px; color: #94a3b8;}

.speedsearchResultBg {background: unset !important;}
#speedsearchResult {left: 0; border-radius: 5px; max-width: 1520px; margin: 0 auto; padding: 0px;}
#speedsearchResult .houder {display: block; border-radius: 5px; border: 0; box-shadow: 0 20px 50px 0 rgba(0,0,0,0.20); font-size: inherit; width: 100%; box-sizing: border-box; padding: 15px;}
.speedSearch.categorie {order: 1;}
.speedSearch.artikelen {width: 100%;}
.speedsearchLoader {display: none;}
#speedsearchResult .houder .speedSearch ul li a {border:0; border-radius: 5px; line-height: 1.35em;}
#speedsearchResult .houder .speedSearch ul li a .omschrijving {margin: auto 0; font-weight: bold;}
#speedsearchResult .houder .speedSearch ul li a strong {font-weight: bold; color: var(--color1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size: 11px;}
#speedsearchResult .houder .speedSearch .resultaat {padding: 10px; margin: 0; color: #514F4F; font-weight: bold; font-size: 17px; display: none;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .speedSearch ul li a:hover {background: #f2f2f2;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .knopAllesOnder a {padding: 15px 20px; border-radius: 5px; line-height: 1; background: var(--color1); border: 0; color: #fff; font-size: 16px; font-weight: 600;}
#speedsearchResult .houder .knopAllesOnder a:hover {background: var(--color1);}
.speedSearch ul li .thumbnail 					{height: 60px; width: 60px; margin-right: 15px; text-align: center; overflow: hidden; padding: 0; box-sizing: border-box; position: relative;}
.speedSearch ul li .thumbnail img 			{max-width: 85%; max-height: 85%; position: absolute; left: -50%; right: -50%; margin: auto; top: -50%; bottom: -50%; mix-blend-mode: darken;}
#speedsearchResult .houder .speedSearch.categorie ul li a {display: flex;}

.winkelwagenHouder .winkelknop {background: unset; padding: 10px; margin: 0;}
.winkelwagenHouder .winkelknop .icoon::before {font-weight: normal; color: var(--color1); font-size: 17px; content: "\f290"; background: #fde8e8; border-radius: 5px; padding: 10px; box-sizing: border-box;}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--color1); color: #000; border-radius: 100%; line-height: 17px; top: -15px; right: -5px;}
.winkelwagenHouder .winkelknop .aantal {color: #FFF;}

.account li {border: 0;}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; color: var(--color1); font-size: 17px; font-weight: normal; background: #fde8e8; border-radius: 5px; padding: 10px; box-sizing: border-box;}
.account .welkom .bericht,
.account .inloggenKnop .titel, 
.account .mijnAccountKnop .titel, 
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje, 
.account .favorietenKnop .favAantal {display: none;}
.account .houder .houder1 {padding: 20px;}
.account .mijnAccount .houder {width: 270px;}
.account .mijnAccount .houder .houder1 {padding: 20px 20px 10px 20px;}
.account .houder .houder1 a {text-decoration: none; margin: 0;}
.account .houder .houder2 {background: unset; border: 0; padding: 0 20px 20px 20px;}
.account .houder .houder2 .registreer {color: #686868; font-size: 14px;}
.account .houder .houder2 .registreer a {color: var(--color1);}
.account .houder .houder2 .uitloggen a {font-family: inherit; font-size: 14px; padding: 15px 20px; color: #FFF; border-radius: 4px; background: var(--color1); 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: #000;}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}
.account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; color: var(--color1); font-size: 22px; font-weight: normal;}
.account .welkom {font-weight: bold; color: rgba(255,255,255,.5); font-size: 13px; margin: auto;}
.account .houder {border-radius: 4px;}
.account .inloggen .inlogKnop .wachtwoordKwijt a {color: #686868; font-size: 14px;}
.account .inloggen .cookie {margin-top: 10px; font-size: 14px;}
.account .inloggen .cookie label {display: flex; align-items: center;}

.pageFooterHolder {background-color: var(--color1);}
.pageFooterKnoppenHolder {padding-top:10px; padding-bottom:10px; background:#000;}
.pageFooter h2, .pageFooter .h2 {font-size: 25px;}
.pageFooterHolder a {text-decoration: none;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {color: #FFF;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {color: #FFF; opacity: 1;}
.pageFooterHolder .pageFooter .STPMenu1li {list-style: none; margin: 0; padding: 0;}
.pageFooterHolder .pageFooter ul {padding: 0; margin: 0; list-style: none; columns: 2; column-gap: 20px; display: inline-block;;}
.pageFooterHolder .pageFooter .STPMenu1li > ul {display: none;}

.shopSortOptie {padding: 0; border: 0; margin: 20px 0; border-radius: 0;}
.shopSortOptie .sorteerLijst {margin-left: auto;}
.shopSortOptie > * select {line-height: 1.5em;}

.shopCategorieHolder {gap: 20px;}
.shopCategorieHolder .categorie {border-radius: 5px; transition: .3s all ease;}
.shopCategorieHolder .categorie:hover {box-shadow: unset; background: #f2f2f2;}
.shopCategorieHolder .categorie .titel {background: #f2f2f2;}
.shopCategorieHolder .categorie .titel h2 {font-size:19px;}
.shopCategorieHolder .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;}

.shopCategorieHolder .categorieBlok {padding: 20px; width: 100%; box-sizing: border-box; position: relative; border-radius: 6px; background-color: #f2f2f2;}
.shopCategorieHolder .categorieBlok > .titel h2 {margin: auto 0; font-size: 25px; color: var(--color1);}
.shopCategorieHolder .categorieBlok > .titel {display: flex; gap: 10px; margin: 0 0 10px 0;}
.shopCategorieHolder .categorieBlok > a {display: block;}
.shopCategorieHolder .categorieBlok > a:hover {color: var(--color1);}

.shopTegel .artikel .inner {border-radius: 5px;}
.shopTegel .artikel .inner:hover {box-shadow: unset; background: #f2f2f2;}
.shopTegel .artikel .inner .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;}
.shopTegel .artikel .inner .rechtsboven div a {color: rgb(255 165 0 / 50%); background: unset; font-size: 19px;}
.shopTegel .artikel .inner .rechtsboven div.aan a {color: #ffa500;}
.shopTegel .artikel .prijzen {margin: 10px 0 0 0; line-height: 1.35em;}
.shopTegel .artikel .omschrijving h2.titel {font-weight: 500;}
.shopTegel .artikel .omschrijving h2.titel a {font-size: 20px;}
.shopTegel .artikel .voorraad {margin: 10px 0;}
.shopTegel .artikel .voorraad .status .toelichting {font-size: 11px;}

.shopLijst .artikel {border-radius: 5px;}
.shopLijst .artikel:hover {box-shadow: unset; background: #f2f2f2;}
.shopLijst .artikel .omschrijving h2.titel {font-size: 22px;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color1); width: 100%;}
.shopLijst .artikel .bestellen .bestelknop input {margin-right: 0;}
.shopLijst .artikel .afbeeldingHouder img {mix-blend-mode: darken;}
.shopLijst .artikel .voorraad {margin: 10px 0;}
.shopLijst .artikel .voorraad .status .toelichting {font-size: 11px;}

.filters .kenmerkgroepHouder .kenmerk:has(label.nietBeschikbaar) {display: none;}
ul.kenmerkgroepHouder::before {
    content: "Filter op merk of model";
    font-weight: bold;
    color: #fff;
    padding: 6px 15px;
    background: var(--color1);
    font-size: 16px;
    border-radius: 5px 5px 0 0;
    display: block;
    text-align: center;
}
.filters .kenmerkgroep {background:#f2f2f2}

.kenmerkMobielHouder.accordion .toonFiltersKnop {background-color: var(--color1); border-radius: 5px ;}
.kenmerkMobielHouder.accordion .toonFiltersKnop:hover {background-color: #000;}
.kenmerkMobielHouder.accordion .toonFiltersKnop::before {content:"\f0b0"; font-family: "Font Awesome 5 Pro"; margin-right: 0.5em;}



.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 1fr 500px; gap: 30px; margin: 0;}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {margin: 0; width: 100%;}
.artikel.detail h1 {font-size: 35px;}
.artikel.detail .bestellen {display: flex; margin: 20px 0;}
.artikel.detail .bestellen .bestelknop {width: 100%;}
.artikel.detail .bestellen .favorieten {margin: 0;}
.artikel.detail .bestellen .favorieten a {display: block; line-height: 1; color: rgb(255 165 0 / 50%); padding: 14px; font-size: 20px; border: 1px solid #cbd4dd; border-radius: 5px; font-weight: 600; background: #FFF;}
.artikel.detail .bestellen .favorieten.aan a {color: #ffa500;}
.artikel.detail .bestellen .favorieten .image {padding: 0;}
.artikel.detail .bestellen .favorieten .image i {font-weight: bold;}
.artikel.detail .favorieten span.toelichting {display: none;}
.artikel.detail .bestellen .bestelknop a.wButBestel {width: 100% !important; margin-right: 0; background: var(--color1); padding: 9px; box-sizing: border-box;}
.artikel.detail .bestellen .bestelknop .wButBestel::before {display: none;}
.artikel.detail .prijzen {margin: 15px 0;}
.artikel.detail .prijzen .prijs {color: #514F4F; font-size: 22px;}
.artikel.detail .prijzen .relatieBtwPrijs {font-size: 14px;}
.artikel.detail .rechts .bestellen .bestelknop input {margin: 0;}
.artikel.detail .voorraad {margin:20px 0;}

.artikel .voorraad .status .toelichting {background: #f1f5f9; border-radius: 5px; color:#000; font-size: 13px; padding: 10px; font-weight: bold;}
.artikel .voorraad .status .toelichting.positief::before, .artikel .voorraad .status .toelichting::before {content: "\f111"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-weight: bold; color:  #ff6900; font-size: 7px; vertical-align: middle;}
.artikel .voorraad .status .toelichting.positief {background: #e9fbee; color: #22cc52;}
.artikel .voorraad .status .toelichting.positief::before {color: #22cc52;}
.artikel .voorraad .status .toelichting.negatief {background: #f8ecec; color: #c05252;}
.artikel .voorraad .status .toelichting.negatief::before {color: #c05252;}

.artikel.detail .detailinkollommen .rechts .uspArtikel {background-color: #f3f4f8; padding: 30px; box-sizing: border-box; border-radius: 5px;}
.artikel.detail .detailinkollommen .rechts .uspArtikel ul {margin: 0; padding: 0; list-style: none;}
.artikel.detail .detailinkollommen .rechts .uspArtikel ul li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: var(--color1); margin-right: 10px; position: absolute; left: 0;}
.artikel.detail .detailinkollommen .rechts .uspArtikel ul li {padding: 0; padding-left: 25px; position: relative;}

.artikel.detail .shopDetailTabKenmerken {margin-top:30px;}

.artikel.detail #tabArtikelOmschrijvingInhoud h1 {font-size: var(--h3Size);}
.artikel.detail #tabArtikelOmschrijvingInhoud h2 {font-size: var(--h3Size);}

.volledigGallery .carousel-cell-groot .verhouding {padding-bottom: 75%;}

.tabsV2 .titels {display: flex; list-style: none; padding: 15px 0; margin: 0; gap: 5px;}
.tabsV2 .titels > div {border: 0; background:#f3f4f8}
.tabsV2 .titels > div.actief {color: #fff; background: var(--color1); border-radius: 5px; border: 0;}
.tabsV2 > .inhoud {border: 0; background: unset; padding: 40px 5px;} 


/* .tabsV2 > .inhoud::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #f3f4f8; z-index: -1;} */

#tabBijlagenInhoud {font-size: 14px; color: #333;}
#tabBijlagenInhoud table {width: auto; line-height: 55px;}
#tabBijlagenInhoud td.blg1 a img {display: none;}
#tabBijlagenInhoud td.blg1 a {text-decoration: none;}
#tabBijlagenInhoud td.blg1 a::before {content: "\f33d"; font-family: "Font Awesome 5 Pro"; font-size: 18px; color: var(--color1); font-weight: normal; border: 1px solid #ddd; background: #FFF; border-radius: 50%; padding: 13px 15px; margin-right: 12px;}

.artikel .artikelnr {color: #686868; font-size: 12px;}
.artikel .artikelnr > .titel {display: none; }
.artikel .aantalMinPlus {border-color: #ddd; border-radius: 5px; max-width: 50px !important;}
.artikel .aantalMinPlus .min, .artikel .aantalMinPlus .plus {display: none;}
.artikel .aantalMinPlus input {border: 0;}

.kassaArtikelen .artikel .aantallen input {border-radius: 5px !important;}
.kassaArtikelen .artikel .tekst .meerinfo .voorraad {display: none;}
.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen table .totaalVerzendkosten .bedragExclusiefRelatie {opacity: 0;}
.stap .totalen table .totaalVerzendkosten .beschrijving .omschrijving {display: none;}

.artikel .inclBtwPrijs,
.artikel .prijzen .inclBtwPrijs .prijs {font-size:14px !important; color:#666 !important; font-weight: normal;}

.kassainkollommen > .rechts .blok, .couponcodeHouder {background: #f2f2f2; border-radius: 5px;}
.stap .totaalExclBtw td {font-weight: 600; color: var(--color1);}
.stap .gewicht {display: none}
.kassainkollommen > .rechts .blok .totalen {font-size: 14px;}
.stap .totalen .stappenKnop a {padding: 15px 20px; background: var(--color1);}
.stap .totalen .totaalTeBetalen td {color: var(--color1); font-size: 16px;}
.stap .totalen .totaalArtikelen .bedragExclusiefRelatie .relatieBtwPrijs {display: none;}
.stap .totalen .bedrag .gratis {background-color: #22cc52;}

.stappenbalk .bezig::before {background-color: var(--color1);}
.stappenbalk .bezig .naam {color: var(--color1);}
.stappenbalk .klaar::after {border-color: #22cc52;}
.stappenbalk .klaar a::before {background-color: #22cc52;}

.kassainkollommen > .rechts .blok.bestaandeKlant h2 {font-size: 18px;}

.stap .blokholder {border-radius: 0; padding: 0; background: transparent;}
.stap .blokholder.algemeneGegevens {margin: 0;}
.stap .blokholder > .titel {color: var(--color1); margin-bottom: 5px;}

.stap.twee .links>div, .stap.drie .links>div {width: 100%; margin: 0;}
.stap.twee .links, .stap.drie .links {margin: 0; display: grid; gap: 20px;}
.stap.twee .adres .geselecteerd {border: 2px solid #22cc52 !important;}
.stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: #22cc52;}
.stap.twee .tekstNieuwAdres a {font-family: inherit; font-size: 15px; padding: 15px 20px; border-radius: 5px; margin-bottom: 10px; background: #22cc52; line-height: 1; font-weight: 700; text-decoration: none !important;}

.typeKlant input[type="radio"]+label::before, .geslacht input[type="radio"]+label::before {top: 16px;}
.typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {color: #22cc52;}
.typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color: #22cc52; color: #22cc52;}
.typeKlant input[type="radio"]+label:hover, .geslacht input[type="radio"]+label:hover {border-color: #22cc52;}

.stap.drie .regel .bedrag .gratis {background-color: #22cc52;}
.stap.drie .regel.actief {border: 2px solid #22cc52 !important; background-color: #FFF !important;}
.stap.drie .regel.actief input[type="radio"]:checked::before {color: #22cc52;}

.bovenkantHolder .bovenkant .resMenubalkinhoud {display: flex;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a {color: #FFF;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {order: 1;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop i, .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje i {display: none;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop::before {font-weight: normal; color: var(--color1); font-size: 22px; content: "\f0c9"; font-family: "Font Awesome 5 Pro";}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje::before {font-weight: normal; color: var(--color1); font-size: 22px; content: "\f290"; font-family: "Font Awesome 5 Pro";}
.resMenubloktitel {background-color: #f2f2f2; border-bottom: 1px solid #eee; color: var(--fontColor); text-transform: none; font-size: 13px; font-weight: 600; padding: 10px 15px;}
.resMenublokinhoud .resMenuItem.active > a {color: var(--color1); font-weight: bold;}
.resMenublokinhoud .resMenuItem a {border-bottom: 1px solid #eee; color: var(--fontColor);}
.resMenublokinhoud .resMenuItem .laag1 a {font-size: 13px;}
.resMenublokinhoud .resMenuItem .laag2 a {font-size: 12px;}
.resMenuItem.favorieten a span, .resMenuItem.verlanglijst a span {border: 2px solid var(--color1); background: #f2f2f2; font-size: 13px; font-weight: 600;}
.resMenuHolder {top: 100%;}

.blader_holder {margin-top: 20px; overflow: auto; border: 0; padding: 0;}
.blader_tabel1 {width: auto;}
.blader_holder table      {table-layout: fixed; margin: 0 auto; border: 1px solid #e2e2e2; border-radius: 0; overflow: hidden;}
.blader_holder table td {vertical-align: middle; line-height: 1; padding: 0;}
.blader_holder table td a, .blader_holder table td .blader_tabel1_s {display: block; border: 0; font-size: 13px; border-radius: 0; height: 24px; border-right: 1px solid #e2e2e2; width: 32px; text-align: center; line-height: 1; padding-top: 10px; margin: 0; text-decoration: none; color: #b7b7b7;}
.blader_tabel1_n, .blader_tabel1_s {border: 0; border-radius: 0; height: unset; font-size: inherit; line-height: 1; width: 100%;}
.blader_holder table td:last-child a, .blader_holder table td:last-child .blader_tabel1_s, .blader_holder table td:last-child img  {border-right: 0;}
.blader_holder table td a img {padding: 0; border: 0; vertical-align: top; display: inline-block; width: 13px;}
.blader_holder table td > img {display: none;}
.blader_tabel1_n:hover, .blader_holder table td a:hover {background-color: #f2f2f2; color: var(--color1);}
.blader_tabel1_n:hover a {background-color: #f2f2f2; color: var(--color1);}
.blader_holder table td .blader_tabel1_s {background-color: var(--color1);}


.breadcrumbs ol li a {color: #686868 !important;}
.breadcrumbs ol li {color: #686868 !important;}
.breadcrumbs ol li.crumbSpace {border-color: transparent transparent transparent #686868;}

.homeHeader {display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a a b" "c c b";}
.homeHeader > div:first-child {grid-column: span 2;}

/* .homeHeader {display: grid; gap: 30px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "a a b" "a a c" "e f g";}
.homeHeader > div:first-child {grid-column: span 2; grid-row: span 2;}
.homeHeader > div:first-child .afbeelding {height:100%;} */

.popupHolder .popup .titel {padding: 10px 20px;}
.popupHolder .popup .titel .h2 {font-size: 22px;}

iframe.googleMapsEmbedKaart {width:100%; height:300px;}

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

  .bovenkantHolder .bovenkant .winkelmenuHolder::after {left: 0; width: 300px;}

}

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

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

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

  .bovenkantHolder .bovenkant .zoekenHolder {max-width: 250px;}
  .homeHeader {grid-template-columns: 1fr; gap: 20px; grid-template-areas: "a" "b" "c";}
  .homeHeader > div:first-child {grid-column: unset;}
  .extrabovenkantHolder .extrabovenkant .uspArtikel ul li:first-child {display: none;}
  
}



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

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

  .winkelmenuHolder {display: none;}
  .zoeken {min-width: 100%; position: static;}
  .bovenkantHolder .bovenkant .zoekenHolder {margin: auto;}
  .bovenkantHolder .bovenkant .winkelmenuKnop {display: none;}
  .extrabovenkantHolder .extrabovenkant .uspArtikel {display: none;}
  .extrabovenkantHolder .extrabovenkant .telefoon {margin: auto;}

  a.logo img {width: 130px;}

  .vak {padding: 0;}

  .blok {grid-template-columns: 1fr;}
  .blok .tekst {padding: 20px;}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr; gap: 20px;}
  .tabsV2 .titels {display: flex;}
  .tabsV2 .inhoud {border: 1px solid #eee; padding: 15px;}
  .tabsV2 > .inhoud > div {display: none !important;}
  .tabsV2 > .inhoud > div.actief {display: block !important;}
  .tabsV2 > .inhoud > div .shopLijst .artikel .inner .inhoud {padding: 10px; border: 0;}
  
}
 
@media screen and (max-width: 680px) {
 
  
}