:root {
  --color1: #00a0e3;
  --color2: #f77701;
  --color3: #E9F1F3;
  --fontColor: #000;
  --fontFamily1: "Open Sans", Helvetica, Arial, sans-serif;
  --bodyFontSize: 15px;
  --h1Size: 30px;
  --h2Size: 22px;
  --h5Size: 18px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
}


body {font-family: var(--fontFamily1); font-weight: normal; background: #fff; color: var(--fontColor); font-size: var(--bodyFontSize);}

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

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {color: var(--fontColor); border-radius: var(--BorderRadius1); border: 1px solid #cbd4dd;}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {color: var(--color1);}

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


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); font-weight: 600;}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-weight: normal;}

h1 + h5 {margin-top: -0.70em; margin-bottom: 1em;}
h2 + h5 {margin-top: -0.70em; margin-bottom: 1em;}

a.telefoon, a.mail, a.facebook {text-decoration: none;}
a.telefoon::before {content: "\f879"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: inherit;}
a.mail::before {content: "\f0e0"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-size: 14px; color: inherit;}
a.facebook::before {content: "\f39e"; font-family: "Font Awesome 5 Brands"; margin-right: 10px; font-size: 14px; color: inherit;}

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

.bovenkantHolder {background: #FFF; border: 0; position: sticky; top: 0;}

.bovenkantHolder .winkelmenuHolder {background: var(--color1);}
.bovenkantHolder .winkelmenuHolder .winkelmenu {display: flex; gap: 30px; text-align: left;}
.bovenkantHolder .winkelmenuHolder .winkelmenu .rechts {margin-left: auto; gap: 30px; display: flex;}
.bovenkantHolder .winkelmenuHolder .winkelmenu li .t.hoverMenuActief::after {margin: auto auto auto 10px; color: #FFF;}

.extrabovenkantHolder .extrabovenkant .uspHolder {display: grid; margin: auto 0; grid-template-columns: 1fr; padding: 0; gap: 20px;}
.extrabovenkantHolder .extrabovenkant .uspHolder .usp {color: #FFF; flex: 1; font-weight: 500; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.extrabovenkantHolder .extrabovenkant .uspHolder .usp::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: #22cc52; margin-right: 10px;}

.art-menu li {position: static;}
.art-menu li.compact {position: relative;}
.art-menu li.separatorHouder {display: none;}
.art-menu li a .t {padding: 15px 0; font-weight: 600; color: #FFF; font-size: 15px;}
.art-menu li a .t:hover, .art-menu li a.active .t {opacity: .6; color: #FFF;}

a.knop, .button, a.button, button {font-family: inherit; font-size: 14px; padding: 15px 20px; border-radius: var(--BorderRadius1); background: var(--color2); line-height: 1; font-weight: 600; text-decoration: none !important;}
a.knop:hover {background-color: #b31b21;}

section.grijs, .vak.grijs {background: #f7f7f7;}
.inhoud.max1200 {max-width: 1200px; margin-left: auto; margin-right: auto;}

.vak .inhoud .sliderHolder {grid-template-columns: 3fr 2fr; gap: 20px;}
.vak .inhoud .sliderHolder .afbeeldingHome {position: relative; border-radius: var(--BorderRadius1); overflow: hidden;}
.vak .inhoud .sliderHolder .afbeeldingHome img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover;}

.bovenkantHolder .bovenkant .zoekenHolder {margin: auto;}
.zoeken {background: #f5f5f5; border-radius: var(--BorderRadius1); min-width: 600px;}
.zoeken .veld {width: 100%;}
.zoeken .veld #zoekWoordID {padding: 11px; color: #bac3cd;}
.zoeken .veld #zoekWoordID:focus {color: #000 !important;}
.zoeken .knop:before {font-weight: normal; font-size: 22px; color: #94a3b8;}

.speedsearchResultBg {background: unset !important;}
#speedsearchResult {left: 0; border-radius: var(--BorderRadius1); max-width: 1520px; margin: 0 auto; padding: 0px;}
#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;}
.speedSearch.categorie {order:1;}
.speedSearch.artikelen {width: 100%;}
.speedsearchLoader {display: none;}
#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(--fontColor); 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 {padding: 15px 20px; border-radius: var(--BorderRadius1); line-height: 1; background: var(--color2); border: 0; color: #fff; font-size: 16px; font-weight: 600;}
#speedsearchResult .houder .knopAllesOnder a:hover {background: #444;}

.winkelwagenHouder .winkelknop {background: unset; padding: 10px;}
.winkelwagenHouder .winkelknop .icoon::before {font-weight: normal; color: var(--color1); font-size: 22px; content: "\f290";}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--color1); color: var(--fontColor); padding:1px 6px 0 6px; border-radius: 100%; line-height: 17px; top: -10px; right: -10px;}
.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: 22px; font-weight: normal;}
.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: #7a94a4; 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: var(--BorderRadius1); 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: var(--fontColor);}
.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: var(--BorderRadius1);}
.account .inloggen .inlogKnop .wachtwoordKwijt a {color: #7a94a4; font-size: 14px;}
.account .inloggen .cookie {margin-top: 10px; font-size: 14px;}
.account .inloggen .cookie label {display: flex; align-items: center;}

.zoekenOrders + table.lijst tr td.knoppenHouder {text-align: left; padding-left:20px;}

footer {position: relative;}
footer::after {background: linear-gradient(90deg,#009fe3 0%,rgba(255,255,255,0) 100%); content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}

.pageFooterHolder {background:var(--color1); position: static;}
.pageFooter h2, .pageFooter .h2 {font-size: 18px; font-weight: 700;}
.pageFooterHolder .pageFooter {font-size: 15px;}
.pageFooterHolder a {text-decoration: none;}
.pageFooterHolder a > em {color: #FFF !important; font-size: 18px; margin-right: 5px;}

.pageFooterKnoppenHolder {border-top: 1px solid rgba(255,255,255,.15); background: unset;}
.pageFooterKnoppenHolder .pageFooterKnoppen {position: relative; z-index: 2;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {margin-right: 10px;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a:hover {opacity: 1;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {display: none;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

.pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin: 0;}
.pageFooterHolder .pageFooter ul li > ul {display: none;}

.pageFooterHolder .pageFooter .footerVideo {bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0;}
.pageFooterHolder .pageFooter .footerVideo video {pointer-events: none; width: 100vw; height: 56.25vw; max-width: none; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}

.pageFooterHolder .pageFooter .FCK4kol {position: relative; z-index: 2;}

.shopSortOptie {border: 0; padding: 0; margin: 20px 0;}
.shopSortOptie a.actief {color: var(--color1)!important; background: #f7f7f7;}
.shopSortOptie select {border: 1px solid #cbd4dd; border-radius: var(--BorderRadius1); font-weight: 600; color: var(--fontColor); font-size: 14px;}
.shopSortOptie .aantalPerPagina {display: none;}
.shopSortOptie .sorteerLijst {margin: auto 0 auto auto;}

.shopCategorieHolder .categorie {border-radius: var(--BorderRadius1); background-color: #FFF; border: 2px solid #eee; transition: .3s all ease;}
.shopCategorieHolder .categorie:hover {box-shadow: unset; border-color: var(--color1); background: #f7f7f7;}
.shopCategorieHolder .categorie .titel {background: #f7f7f7; border-radius: 0 0 4px 4px;}
.shopCategorieHolder .categorie .titel h2 {font-weight: 600; color: var(--fontColor); font-size: 15px;}
.shopCategorieHolder .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;}
.shopCategorieHolder .afbeeldingHouder .verhouding {padding-bottom: 75%;}

/* .shopCategorieHolder.widget {display:block; margin-bottom:30px;}
.shopCategorieHolder.widget .categorie  {margin:0 10px; width:calc(20% - 16px); transition: unset;}
.shopCategorieHolder .flickity-page-dots {bottom:-30px;} */

.artikel .bestellen .bestelknop input {margin-right:0;}
.artikel .bestellen .bestelknop a.wButBestel {line-height: 1; background-color: var(--color2);}

.artikel .artikelnr {color: #7a94a4; font-size: 13px;}
.artikel .artikelnr > .titel {display: none;}
.relatieBtwPrijs {display: none !important;}

.artikel .labels .label {background: transparent;}
.artikel .labels .label img {width: 45px;}

.artikel .prijzen .prijs {font-size: 17px; color: var(--fontColor)}
.artikel .prijzen .artikelEenheid {color: #999; font-size: 14px; display: block;}
.artikel .prijzen .relatieBtwPrijs {color: #7a94a4;}

.shopTegel .artikel .inner {border-radius: var(--BorderRadius1); border: 2px solid #eee;}
.shopTegel .artikel .inner:hover {box-shadow: unset; border-color: var(--color1); background: #f7f7f7;}
.shopTegel .artikel .inner .afbeeldingHouder .verhouding {padding-bottom: 75%;}
.shopTegel .artikel .inner .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;}
.shopTegel .artikel .omschrijving h2.titel a {color: var(--fontColor);}
.shopTegel .artikel .inner .prijzen {line-height: 1.5em; margin: 15px 0 0 0;}
.shopTegel .artikel .inner .prijzen .prijs {font-size: 17px; color: var(--fontColor);}
.shopTegel .artikel .inner .prijzen .van {opacity: 1; color: #7a94a4;}
.shopTegel .artikel .inner .bestellen {display: block;}
.shopTegel .artikel .inner .bestellen:empty {display: none;}
.shopTegel .artikel .inner .rechtsboven div a {background: transparent; color: #333; font-size: 20px;}
.shopTegel .artikel .inner .rechtsboven div a i {font-weight: normal;}
.shopTegel .artikel .inner .rechtsboven div.aan a {color: var(--color1)}
.shopTegel .artikel .inner .rechtsboven div.aan a i {font-weight: bold;}

.shopTegel .artikel.moederartikel .bestellen,
.shopCompact .artikel.moederartikel .bestellen {opacity: 0 !important;}
.shopCompact .artikel .labels {display: none;}

.shopCompact .artikel .artikelnr {width: 120px;}
.shopCompact .artikel .bestellen {width: unset; min-width: unset; display: flex !important;}
.shopCompact .artikel .bestellen .bestelknop input {margin-right: 0;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel {font-size: inherit; padding: 10px;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel::before {font-family: "Font Awesome 5 Pro"; content:"\f07a"; font-weight: normal;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel span {display:none;}
.shopCompact .artikel .prijzen {font-size: 14px; margin: auto 20px auto auto !important;}

.shopCompact .artikel .bestellen .doos,
.shopCompact .artikel .bestellen .omschrijving,
.shopCompact .artikel .bestellen .doosVerkoop .totaal {display: none !important;}
.shopCompact .artikel .bestellen .doosVerkoop, .shopCompact .artikel .bestellen .doosVerkoop .stuk {margin-bottom:0;}

.productCarousel {margin: 0;}
.productCarousel .flickity-prev-next-button {display: none;}
.productCarousel .artikel .inner .prijzen .displayprijs {color: var(--fontColor); font-weight: bold; font-size: 20px;}
.productCarousel .artikel .inner .prijzen .displayprijs .toelichting {display: none;}

.artikel.detail .shopDetailModernKenmerken {margin: 0;}
.kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 5px 15px; grid-template-columns: 1fr 1fr; color: var(--fontColor); border: 0; font-size: 15px;}
.kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: normal; color: var(--fontColor);}
.kenmerkArt:nth-child(odd), .artikelGewicht:nth-child(odd) {background-color: #f1f5f9;}

.kenmerkgroepKeuze.tags .artikel.actief {border-color: var(--color1); background: #f7f7f7;}
.kenmerkgroepKeuze.afbeeldingen .artikel img {mix-blend-mode: darken;}
.kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: var(--color1); background: #f7f7f7;}
.filters .kenmerkgroep .kenmerken {z-index:unset}

.artikel.detail .detailinkollommen {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0;}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {margin: 0; width: 100%;}
.artikel.detail .bestellen {display: flex; margin: 20px 0;}
.artikel.detail .bestellen .bestelknop {width: 90%;}
.artikel.detail .bestellen .favorieten {margin: 0;}
.artikel.detail .bestellen .favorieten a {display: block; line-height: 1; color: rgb(255 165 0 / 50%); padding: 12px 15px; font-size: 20px; border: 1px solid #cbd4dd; border-radius: var(--BorderRadius1); font-weight: 600;}
.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; font-weight: bold; margin-right: 10px; box-sizing: border-box;  border-radius: var(--BorderRadius1); background-color: var(--color2);}
.artikel.detail .bestellen .bestelknop .wButBestel::before {display: none;}
.artikel.detail .rechts .bestellen .bestelknop input {width: 50px !important;}
.artikel.detail .prijzen {margin: 15px 0;}
.artikel.detail .prijzen .prijs {color: #848484; font-size: 12px; font-weight: normal;}
.artikel.detail .prijzen .btwinfo {font-size: 12px; color: #848484;}
.artikel.detail .prijzen .prijs:first-child {display: block; color: var(--fontColor); font-size: 20px; font-weight: bold;}
.artikel.detail .links > .vak {margin: 30px 0;}
.artikel.detail .detailinkollommen .rechts .artikelInfo {position: sticky; top: 175px; max-width: 600px;}

.artikel.detail .formuleHolder {background: #f1f5f9; margin: 20px 0; border-radius: var(--BorderRadius1);}
.artikel.detail .formuleHolder.reset {display: none;}
.artikel.detail .formuleHolder > .titel {background-color: var(--color1); color: #FFF; padding: 10px 20px; border-radius: var(--BorderRadius1) var(--BorderRadius1) 0 0; margin: 0; font-size: 15px;}
.artikel.detail .formuleHolder label {font-size: 13px; font-weight: bold; color: var(--fontColor);}
.artikel.detail .formuleHolder .content {padding: 20px; box-sizing: border-box;}
.artikel.detail .formuleHolder .content .formuleMeerprijs {color: #7a94a4; font-size: 12px; font-weight: 400;}
.artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs {display: flex; align-items: center; margin: 20px 0 0 0;}
.artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs .prijs {color: var(--fontColor); font-size: 20px; font-weight: bold;}
.artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs .toelichting {font-size: 14px; margin-right: 10px;}

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

.artikel.detail .doosVerkoop {margin: 10px 0; line-height: 1.35em;}
.artikel.detail .doosVerkoop .doos, .artikel.detail .doosVerkoop .stuk { display: flex; align-items: center; margin-bottom:5px;}
.artikel.detail .doosVerkoop .omschrijving {font-size: 13px; color: #707070;}
.artikel.detail .doosVerkoop .totaal {margin:5px 0; line-height:1.35em;}
.artikel.detail .doosVerkoop .bestelknop a {display: block; background: var(--color2);}
.artikel.detail .doosVerkoop .totaal {margin: 10px 0; line-height: 1.35em; text-transform: lowercase; font-size: 14px; color: #707070;}

.artikel .aantalMinPlus {display: grid; grid-template-columns: 1fr 1fr 1fr;}

.alleenNiv1   {display:none}
.klantWorden  {background:#eee; border-radius: var(--BorderRadius1); padding:30px 30px 15px 30px;}

.samengesteldeArtikelen .h3 {display: none;}
.samengesteldeArtikelen {padding:10px 15px; background:#eee; border-radius: var(--BorderRadius1);}

.volledigGallery .carousel-cell-groot .verhouding {padding-bottom: 75%;}
.thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: var(--color1);}

.winkelwagenHouder .winkelwagen {border-radius: var(--BorderRadius1); width: 600px;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--color2);}

.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {color: var(--fontColor); font-size: 14px;}
.kassaArtikelen .artikel td .doos, 
.kassaArtikelen .artikel .artikelBestelEenheid,
.kassaArtikelen .artikel .tekst .meerinfo .voorraad {display: none;}
.kassaArtikelen .artikel td .stuk .omschrijving {font-size: 13px; margin: 5px 0 0 0;}

.kassaArtikelen .aantallen .verwijderen {}

.kassainkollommen > .rechts .blok, .couponcodeHouder {border: 1px solid var(--color1); background: #f7f7f7; border-radius: var(--BorderRadius1);}
.kassainkollommen > .rechts .blok .totalen {font-size: 14px;}
.kassainkollommen > .rechts .blok.bestaandeKlant h2 {font-size: 18px;}
.kassainkollommen>.rechts .sticky {top: 170px;}

.stap .totaalExclBtw td {font-weight: 600; color: var(--fontColor);}
.stap .gewicht {display: none}
.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen table .totaalVerzendkosten .beschrijving .omschrijving {display: none;}
.stap .totalen .stappenKnop a {padding: 15px 20px; background: #22cc52;}
.stap .totalen .totaalTeBetalen td {color: var(--fontColor); 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;}

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

.typeKlant {display: none;}

.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: var(--BorderRadius1); margin-bottom: 10px; background: #22cc52; line-height: 1; font-weight: 700; text-decoration: none !important;} */
.stap.twee .tekstNieuwAdres a {font-family: inherit; font-size: inherit;  line-height: 1.35em; text-decoration: underline !important; background-color: transparent; color:var(--color1)}

.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: var(--fontColor);}
.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: var(--color1);}
.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: #f7f7f7; border-bottom: 1px solid #eee; color: var(--fontColor); text-transform: none; font-size: 15px; font-weight: 600; padding: 10px 15px;}
.resMenublokinhoud .resMenuItem.active > a {color: var(--color1);}
.resMenublokinhoud .resMenuItem a {border-bottom: 1px solid #eee; color: var(--fontColor);}
.resMenuItem.favorieten a span, .resMenuItem.verlanglijst a span {border: 2px solid var(--color1); background: #f7f7f7; font-size: 13px; font-weight: 600;}

/* .hoverMenu {box-shadow: 0 70px 120px 0 rgb(0 0 0 / 10%); max-width: 260px; border: 1px solid #eee; border-radius: 0 0 4px 4px;}
.hoverMenu .categorie {padding: 25px 25px 0; display: none;}
.hoverMenu .kolommen {padding: 20px; display: flex; flex-wrap: wrap;}
.hoverMenu .kolommen .kolom {width: 100%;}
.hoverMenu .kolommen .kolom a {font-size: 14px; color: var(--fontColor);}
.hoverMenu .kolommen .kolom a:hover {text-decoration: none; color: var(--color1) !important;}
.hoverMenu .kolommen .kolom .afbeelding {width: 100%; max-width: 150px; line-height: 0; margin: 0 0 20px; position: relative;}
.hoverMenu .kolommen .kolom .afbeelding a img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 90%; max-width: 90%; margin: auto; height: auto !important; width: auto !important;}
.hoverMenu .kolommen .kolom .afbeelding .verhouding {display: block; padding-bottom: 100%;}
.hoverMenu .kolommen .kolom .titel a {font-size: 16px; font-weight: 600; color: var(--fontColor); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0;}
.hoverMenu .kolommen .kolom > ul li a {line-height: 1.75em; color: #7e97a7;} */

.hoverMenu  {right: 0; width: 100%; min-width:300px; max-width:1200px; box-shadow: 0 70px 120px 0 rgb(0 0 0 / 10%); border: 0; border-radius: 0 0 4px 4px; display: grid; grid-template-columns: 2fr 1fr;}
.hoverMenu .categorie {padding: 30px; order: 2; background-color: var(--color1);}
.hoverMenu .categorie h2, .hoverMenu .categorie {color:#fff;}
.hoverMenu .categorie .kop {display: none;}
.hoverMenu .kolommen {padding: 30px; display: grid; min-height: 160px; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));}
.hoverMenu .kolommen .kolom {width: auto; padding: 0;}
.hoverMenu .kolommen .kolom a {font-size: 14px; color: var(--color2);}
.hoverMenu .kolommen .cleared {display: none;}

.hoverMenu .kolommen .kolom .afbeelding {width: 100%; max-width: 150px; line-height: 0; margin: 0 0 20px; position: relative;}
.hoverMenu .kolommen .kolom .afbeelding a img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 90%; max-width: 90%; margin: auto; height: auto !important; width: auto !important;}
.hoverMenu .kolommen .kolom .afbeelding .verhouding {display: block; padding-bottom: 100%;}
.hoverMenu .kolommen .kolom .titel a {font-size: 17px; font-weight: 500; color: var(--color1); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0 0 10px 0;}

.hoverMenu .kolommen .kolom > ul {opacity: 1; visibility: visible; position: relative; box-shadow: unset; border: 0; transition: unset; background: unset;}
.hoverMenu .kolommen .kolom > ul li a {line-height: 1.35em; color: var(--kleur4); margin-bottom:0.5em; max-width:250px; transition: .3s all ease; border: 0; padding: 0;}
.hoverMenu .kolommen .kolom > ul li a:hover {text-decoration: none; color: var(--color1); background: unset;}
.hoverMenu .kolommen .kolom > ul li a::before {display: none;}

.compact .hoverMenu             {left:-30px}
.compact .hoverMenu .categorie  {display: none;}
.compact .hoverMenu .kolommen   {gap:0;}

.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: #f1f5f9; color: var(--color1);}
.blader_tabel1_n:hover a {background-color: #f1f5f9; color: var(--color1);}
.blader_holder table td .blader_tabel1_s {background-color: var(--color1);}

.formulier_holder {box-shadow: 0 5px 10px rgb(0 0 0 / 10%); border-radius: var(--BorderRadius1); padding: 30px; max-width: 700px; margin: 0 auto; background:#f8f8f8;}
.formulier_tekstblok {border-bottom:1px solid #ddd; margin-bottom:15px;}
.formulier_tabel1_td1 {max-width:150px;}
.formulier_textarea {margin: 5px 0;}


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

.inschrijvenKolom .blokholder > .titel  {font-family:var(--fontFamily1); font-size: 20px; font-weight: bold; color:#000;}
.inschrijvenKolom                       {display: block; background: var(--color3); box-sizing: border-box; max-width: 900px; margin: 0 auto; box-shadow: 0 10px 20px rgba(0,0,0,.2); padding: 20px; border-radius: 5px;}
.inschrijvenKolom .blokholder           {background-color: transparent; border:0;}
.inschrijvenKolom > .rechts             {margin:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); width:auto; gap:0 20px;}
.inschrijvenKolom .blokholder.knopVersturen {grid-column: 1/-1;}
.inschrijvenKolom .blokholder.knopVersturen a.wButVerstuur {padding:15px;}

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

}

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

  .zoeken {min-width: 400px;}
  .bovenkantHolder .winkelmenuHolder .winkelmenu li .t.hoverMenuActief::after {display: none;}

}

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

}

@media screen and (max-width: 900px) {
  :root {  
    --space10: 10px;
    --space15: 15px;
    --space20: 10px;
    --space30: 20px;
    --space40: 20px;
    --space50: 25px;
    --space80: 40px;
    --space100: 50px;
 }

  a.logo img {width: 90px;}
  .bovenkantHolder .bovenkant {min-height: 0; border-bottom:3px solid var(--color1)}
  .bovenkantHolder .winkelmenuHolder {display: none;}
  
  #speedsearchResult {right: 0; top: 100%;}
  #speedsearchResult .houder {padding: 10px;}

  .zoeken {min-width: 100%; position: static;}
  .zoeken .knop {padding: 8px;}
  .zoeken .veld #zoekWoordID {padding: 8px;}
  .zoeken .knop:before {font-size: 16px;}

  .pageFooterHolder .pageFooter .footerVideo {display: none;}
  
  .liquid-slide-sjabloon .sliderWrapper {background-color: var(--color1);}

  .vak {padding: 0;}
  .vak .inhoud .sliderHolder {grid-template-columns: 1fr;}

  .shopTegel .artikel .aantalMinPlus .min,  .shopTegel .artikel .aantalMinPlus .plus {}
  .shopTegel .artikel .bestellen .bestelknop a.wButBestel::after {font-weight: normal; color: #FFF; font-size: 17px; content: "\f290"; font-family: "Font Awesome 5 Pro";}
  .shopTegel .artikel .bestellen .bestelknop a.wButBestel span {display: none;}
  .shopTegel .artikel .bestellen .bestelknop input {border: 0;}

  .shopCompact .doosVerkoop,
  .shopCompact .artikelEenheid {display: none !important;}
  .shopCompact .artikel .prijzen .prijs {font-size: inherit;}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr; gap: 0;}
  .artikel.detail .detailinkollommen .rechts .artikelInfo {max-width: 100%; position: relative; top: unset;}
  .artikel.detail .links > .vak {padding: 0;}
  
  .artikel.detail .thumbnailGallery .carousel-cell img {max-height:30px;}
  .artikel.detail .volledigGallery .carousel-cell-groot .verhouding { height: 250px;  padding-bottom: 0; }
  .resMenuwinkelmandje #reswinkelMandjeAantal {display: block; margin: -3px; background-color: var(--color1); font-size: 11px !important; height: 17px; }

  .resBestaandeklant {display: none !important;}
  .stappenbalk {margin-bottom:0;}
  .stap.twee .totalenTabel {display: none;}
  .stap.drie .totalenTabel {display: none;}

  table.lijst th.status_td2, table.lijst td.ordernummer, table.lijst th.status_td5, table.lijst td.knoppenHouder {display: table-cell;}

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

  .shopCategorieHolder.widget .categorie  {width:100%;}
  .shopSortOptie>* {width:calc(33% - 10px)}
  .shopTegel {grid-template-columns: 1fr;}

}