/* maatwerk.css - boxpert.com
   Gegenereerd uit de oude CSS-fork tegen skin_default (zie --migratie/LEESMIJ.md).
   Handwerk hoort in --migratie/hand.css; dat staat onderaan. */

@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");

:root {
  --color1: #ff0100;
  --color2: #00002f;
  --fontColor1: #444444;
  --borderColor1: #eeeeee;
  --fontFamily1: "Lato", Helvetica, Arial, Sans-Serif;
}

/* basis */
blockquote p {margin: 0 0 1em; color: #666; font-family: Georgia, Garamond, Helvetica, Arial, Sans-Serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.2em;}
table.lijst tr td {padding: 10px;}
table.lijst tr td a, a, a:link, a:visited, a:hover, a.hover, span.verwijderen i {color: var(--color1);}
table.lijst tr td.id, table.lijst td.id {width: 30px;}
table.lijst tr td.omschrijving .online {background: #ededed; border-radius: 3px; display: inline-block; font-size: 12px; line-height: 1; margin-left: 10px; padding: 6px 8px 4px;}
table.lijst tr td.omschrijving .online:empty, table.lijst td.omschrijving .online:empty {display: none;}
table.lijst tr td.omschrijving a, table.lijst td.omschrijving a {text-decoration: none;}
table.lijst tr th {border-bottom: 1px solid var(--borderColor1); padding: 5px 10px; text-align: left;}
table.lijst tr:nth-child(even) td {background: #fff;}
body {line-height: 1.85em; overflow-y: scroll; color: var(--fontColor1); font-family: var(--fontFamily1); background-color: #ddd; height: auto !important;}
html.noscroll {height: 100%;}
body > .laadtijd {background-color: var(--color1); border-radius: 3px; bottom: 5px; color: #fff; cursor: default; display: block; font-size: 11px; font-style: normal; line-height: 1.25em; opacity: 0.9; padding: 4px 7px; position: fixed; right: 5px; z-index: 10; text-align: right; margin: 0;}
body > .sessienr {border-radius: 3px; cursor: default; display: block; font-size: 11px; font-style: normal; line-height: 1.25em; opacity: 0.9; padding: 4px 7px; position: fixed; right: 5px; z-index: 10; text-align: right; margin: 0; background-color: #f1f1f1; bottom: 29px; color: #000;}
body > .versie {border-radius: 3px; cursor: default; display: block; font-size: 11px; font-style: normal; line-height: 1.25em; opacity: 0.9; padding: 4px 7px; position: fixed; right: 5px; z-index: 10; text-align: right; margin: 0; background-color: #f1f1f1; bottom: 53px; color: #000;}
blockquote {border-left: 5px solid var(--borderColor1); margin: 0; padding: 10px 15px;}
th {width: 33.33%;}
table.lijst {margin-bottom: 20px; background-attachment: scroll; background-image: none; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); padding: 10px 20px;}
table.lijst th {text-align: left; border-bottom: 1px solid var(--borderColor1); padding: 5px 10px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #888;}
table.lijst tr.inactief td.omschrijving {text-decoration: line-through; color: #f00;}
table.lijst td {border-bottom: 1px solid var(--borderColor1); padding: 10px; background: #fff; white-space: nowrap;}
table.lijst td > .titel {font-weight: bold;}
table.lijst td > .subtitel {color: #aaa;}
table.lijst tr:hover td {background: #edf4fc;}
table.lijst tr.inactief:hover td {background: #f1f1f1;}
table.lijst td.omschrijving .online {display: inline-block; background: #ededed; border-radius: 3px; line-height: 1; padding: 6px 8px 4px; margin-left: 10px; font-size: 12px;}
div[class*="grid"] {hyphens: auto; -webkit-hyphens: auto;}
img {object-fit: fill;}
table {width: auto;}

/* formulieren */
.meldingHouder .melding .formulierArtikelToevoegen select {margin-bottom: 0;}
.telefoonLandcodeHouder > select.telefoonLandcode {box-sizing: border-box; margin: 0;}
.dealerImportVeld input[type="file"] + label, .dealerImportVeld input[type="file"]:focus + label, .dealerImportVeld input[type="file"] + label:hover {background-color: var(--color1);}
textarea, input[type="text"], input[type="email"] {border-color: #c4c4c4; border-radius: 5px; line-height: 1.5em; width: auto;}
input[type="password"], input[type="tel"] {border-color: #c4c4c4; border-radius: 5px; line-height: 1.5em;}
input[type="number"] {border-left-color: #c4c4c4; border-right-color: #c4c4c4;}
input:focus {border: 1px solid #c4c4c4;}
select:focus {border-color: #c4c4c4;}
input.verplicht, textarea.verplicht {background-position-x: right 5px; background-position-y: top 5px;}
input.nietMeerVerplicht {background-color: #fff;}
select {border-color: #cccccc; line-height: 1.5em; cursor: default;}
input[type="checkbox"] {padding: 0; line-height: normal; border-radius: 0;}
input[type="radio"] {padding: 0; line-height: normal; position: relative; top: 1px; border-radius: 0;}
input[type="radio"]::before, input[type="checkbox"]::before {display: inline-block;}
input[type="radio"]:checked::before {color: var(--color2); font-weight: normal;}
input[type="checkbox"]:checked::before {color: var(--color1);}
.ratingStar label {color: #bbb; text-shadow: 0 1px 0 #8a8a8a;}
button {background-color: #E2E2E2; border-radius: 5px; color: var(--fontColor1); line-height: 1.85em; font-family: var(--fontFamily1); font-size: 14px; padding: 7px 19px; outline: none; margin: 0; text-align: center; transition: none;}
button:hover {background: #d2d0d0;}
input[type="text"].formulier_text {width: 100%;}

/* koppen */
h1, h1 a, h1 a:hover, h1 a:visited {margin-bottom: .5em; color: var(--fontColor1); font-family: var(--fontFamily1); font-size: 30px;}
h2 {margin-bottom: .5em; color: var(--fontColor1); font-size: 28px; font-weight: bold;}
.h2 {margin-bottom: .5em; color: var(--fontColor1); font-weight: bold;}
h4, h4 a, h4 a:hover, h4 a:visited {margin-bottom: .5em; color: #000; font-family: "Lato",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold;}
h6, h6 a, h6 a:hover, h6 a:visited {margin-bottom: .5em; font-family: var(--fontFamily1);}
h2 a, h2 a:hover, h2 a:visited {margin-bottom: .5em; color: var(--fontColor1); font-family: var(--fontFamily1);}
h5 a, h5 a:hover, h5 a:visited {margin-bottom: .5em; color: #8B8B8B; font-family: var(--fontFamily1); font-size: 20px;}
h1 a:link {color: var(--fontColor1); font-family: var(--fontFamily1); font-size: 30px; font-style: normal;}
h2 a:link {color: var(--fontColor1);}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {color: var(--fontColor1); font-family: var(--fontFamily1); font-size: 22px; margin-bottom: .25em;}
h4 a:link {color: #000; font-family: "Lato",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold;}
h5 {color: #8B8B8B; font-size: 20px;}
h5 a:link {color: #8B8B8B; font-family: var(--fontFamily1); font-size: 20px; font-style: normal; font-weight: normal;}
h6 a:link {font-family: var(--fontFamily1);}
#extraSchermWinkelmand .schermWinkelMandje .melding h2 {margin: 0; font-size: inherit; font-weight: normal;}
.haparko-promo h3 {margin: 0 0 10px; color: #9e98b7;}
.serviceHolder .serviceBlok h2 {font-size: 18px; font-weight: normal;}
.h3 {color: inherit; line-height: inherit; margin-bottom: 0; text-decoration: revert;}

/* knoppen */
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {color: #fff; background-color: #e45c46;}
.configuratieDelenPopup a.knop {margin-top: 0;}
.knoppen.metTekst > a {color: var(--color1); text-decoration: underline; transition: all .3s ease;}
.knoppen.metTekst > a.uit, .knoppen.metTekst > a:hover, table.lijst tr td.knoppenHouder .knoppen.metTekst > a.uit, table.lijst tr td.knoppenHouder .knoppen.metTekst > a:hover {color: var(--color1);}
.lijst.orders .knoppen a {text-decoration: underline; transition: all .3s ease;}
.nogNietGeladen a.button {background-color: #E2E2E2;}
.privacyMelding .knoppen a.knop.akkoord {color: var(--fontColor1);}
a.knopKaal {text-decoration: underline;}
table.lijst tr td.knoppenHouder {font-size: 16px; white-space: nowrap;}
table.lijst tr td.knoppenHouder .knoppen.metTekst > a {color: var(--color1); font-size: inherit; padding: 0 5px; text-decoration: underline; transition: all .3s ease;}
table.lijst tr td.knoppenHouder .knoppen.metTekst > a .tekst {background: #415e81; border-radius: 3px; color: #fff; font-size: 11px; line-height: 1.25em; opacity: 0; padding: 5px 9px; pointer-events: none; position: absolute; transform: translateX(-50%);}
table.lijst tr td.knoppenHouder a, table.lijst td.knoppenHouder a {font-size: inherit; padding: 0 5px; position: relative;}
table.lijst tr td.knoppenHouder a .tekst {background: #415e81; border-radius: 3px; color: #fff; font-size: 11px; font-weight: normal; left: 50%; line-height: 1.25em; opacity: 0; padding: 5px 9px; pointer-events: none; position: absolute; top: -125%; transform: translateX(-50%); transition: .3s all ease; white-space: nowrap;}
table.lijst tr td.knoppenHouder a .tekst::before {border-width: 6px 6px 0; border-style: solid; border-color: #415e81 transparent; bottom: -4px; content: ""; left: 50%; position: absolute; transform: translateX(-50%); transition: .3s all ease;}
table.lijst tr td.knoppenHouder a:hover .tekst, table.lijst td.knoppenHouder a:hover .tekst {opacity: 1; pointer-events: all;}
table.lijst tr td.knoppenHouder:has(.knoppen.metTekst) {white-space: nowrap;}
.speedSearch .resultaat a.knopAlles {background-color: #383838; color: #fff; border-radius: 5px; bottom: 12px; font-size: 12px; padding: 3px 10px; position: absolute; right: 10px; display: none;}
.knopAllesOnder a {font-size: 15px; color: #FFF;}
.knopAllesOnder::before {clear: both; content: ""; display: block;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen {text-align: right; padding-bottom: 15px; padding-top: 15px;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a {background: #bcbcbc; border-radius: 3px; color: #fff; display: inline-block; line-height: 1.25em; margin-bottom: 5px; margin-top: 5px; padding: 7px 10px; text-decoration: none; transition: all 0.3s ease 0s;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a:hover, .meldingHouder .melding .knoppen a:hover {background: #000; color: #fff; transition: all .3s ease;}
table.lijst td.knoppenHouder {font-size: 16px; line-height: 0; vertical-align: middle;}
table.lijst td.knoppenHouder a .tekst {background: #415e81; border-radius: 3px; top: -125%; color: #fff; line-height: 1.25em; white-space: nowrap; padding: 5px 9px; position: absolute; transition: .3s all ease; left: 50%; font-size: 11px; transform: translateX(-50%); opacity: 0; pointer-events: none; font-weight: normal;}
table.lijst td.knoppenHouder a .tekst::before {border-width: 6px 6px 0; border-style: solid; border-color: #415e81 transparent; bottom: -4px; content: ""; position: absolute; transition: .3s all ease; left: 50%; transform: translateX(-50%);}
.formulierVersturen a.button {float: right;}
.button {background-color: #E2E2E2; border-radius: 5px; color: var(--fontColor1); line-height: 1.85em; font-family: var(--fontFamily1); font-size: 14px; padding: 7px 19px; outline: none; margin: 0; text-align: revert; transition: none;}
a.button {background-color: #E2E2E2; border-radius: 5px; color: var(--fontColor1); line-height: 1.85em; font-size: 14px; padding: 7px 19px; text-align: inherit;}
a.button:hover, a.knop:hover {background: #d2d0d0;}
a.knop {background-color: #E2E2E2; border-radius: 5px; color: var(--fontColor1); padding: 7px 19px; line-height: inherit; text-align: inherit;}
a.knop::after {content: "\f105"; font-family: "Font Awesome 5 Pro"; font-size: 15px; margin-left: 10px; vertical-align: middle;}
a.knop.grijs {background-color: #eee; color: #888;}
.meldingHouder .melding .knoppen a {background: #ccc; border-radius: 5px; color: #fff; display: inline-block; line-height: 1.25em; margin-left: 5px; margin-right: 5px; padding: 7px 10px; text-decoration: none; transition: all 0.3s ease 0s;}
.meldingHouder .melding .knoppen a.bevestigen {background: #14153A;}
.privacyMelding .knoppen a.knop {background: #aaa;}

/* paginaframe */
#art-main {padding: 40px; box-sizing: border-box; background: #F0F1F5;}
.art-Sheet {max-width: 100%; min-width: 1px; min-height: 0;}
.art-Block {padding-top: 0; padding-bottom: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; margin-left: auto; z-index: 0;}
.art-BlockHeader {z-index: 0;}
.art-content img {max-width: 100%; height: auto !important;}
.art-sidebar2 .art-Block {padding-left: 20px;}
.catMenuLink0li, .CMSMenuLink1li {color: #9c9c9c !important; display: block; position: relative; font-family: var(--fontFamily1) !important; padding: 18px 30px 18px 18px; margin: 0;}
.catMenuLink0liSel {display: block; position: relative; font-family: var(--fontFamily1) !important; padding: 18px 30px 18px 18px; margin: 0;}
.catMenuLink0li:hover, .catMenuLink0liSel:hover, .CMSMenuLink1li:hover, .CMSMenuLink1liSel:hover {background: #eee;}
.catMenuLink0li::after, .catMenuLink0liSel::after {content: "\f178"; font-family: "Font Awesome 5 Pro"; position: absolute; right: 0; padding: 0 18px; font-size: 14px; color: #aaa;}
.catMenuLink0li::before, .catMenuLink0liSel::before, li.catMenu1li:last-child::before, .CMSMenuLink1li::before, .CMSMenuLink1liSel::before {background-color: #E2E2E2; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; right: 0;}
.catMenuLink1li {font-family: var(--fontFamily1) !important; padding-left: 30px; margin-bottom: 4px; margin-top: 4px;}
li.catMenu1li {position: relative;}
li.catMenu1li:first-child {margin-top: 10px;}
li.catMenu1li:last-child {padding-bottom: 10px;}
.CMSMenuLink1liSel {display: block; position: relative; font-family: var(--fontFamily1) !important; padding: 18px 30px 18px 18px;}
.CMSMenuLink1li::after, .CMSMenuLink1liSel::after {content: "\f178"; font-family: "Font Awesome 5 Pro"; position: absolute; right: 0; padding: 0 18px; font-size: 14px;}
.breadcrumbs {display: block; line-height: 1.75em; color: #9c9c9c; z-index: 10; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 10px 20px; margin: 0;}
.crumbSpace {font-weight: bold; padding-right: 7px; padding-left: 7px;}
.breadcrumbs ol li.crumbSpace {border: none; content: none; height: auto; left: auto; margin: 0; overflow: visible; position: static; top: auto; width: auto;}
.art-Sheet .art-sidebar1 {box-sizing: content-box; padding-right: 0; position: static;}
.breadcrumbs ol li a.crumbLink {color: #9c9c9c !important;}
.art-Sheet .art-content {overflow: visible; position: static;}
.breadcrumbs ol {list-style-image: inherit; list-style-type: decimal;}

/* header */
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven {padding: 20px;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder {margin-right: 20px; position: relative;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .icoon {background-color: #64a43a; border-radius: 50px; color: #fff; font-size: 13px; padding: 5px; position: absolute;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud p {margin: 0 0 1em;}
.account .houder .accountKop {font-size: 14px;}
.account .houder .houder1, .account .houder1, .account .content {padding: 10px;}
.account li, .shopTegel .artikel .inner .favorieten .image, .resMenublokinhoud .resMenuItem.mijnOrders, .winkelwagenHouder .winkelwagen .inhoud {padding: 0;}
.account li:last-child {padding-right: 0;}
.art-menu li a .t.action {color: var(--fontColor1);}
.extrabovenkantHolder .extrabovenkant:empty {display: flex;}
.extrabovenkantHolder .valuta {margin-right: 0.25em; max-height: 30px; overflow: hidden; top: 0; background: rgba(255,255,255,0); z-index: 5; transition: .3s all ease; display: inline-block; float: right;}
.hoverMenu .kolommen .kolom > ul {font-size: inherit; box-shadow: none; list-style-position: outside; list-style-type: disc; opacity: 1; position: static; visibility: visible; padding-left: 10px;}
.hoverMenu .kolommen .kolom a, .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa, .art-menu li a .t:hover, .art-menu ul li a.active:before {color: var(--color1);}
.hoverMenu .kolommen .kolom a:hover {text-decoration: none;}
.ordersFilters .zoekenOrders {border-radius: 5px; margin: 20px 0;}
.resMenubalkinhoud .resZoeken.open {padding-top: 0;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .relatieBtwPrijs {color: #aaa; display: block; font-size: 11px; font-weight: normal; line-height: 1.25em; white-space: nowrap;}
.winkelwagenHouder.openGeklapt .winkelwagen {top: 54px;}
.bovenkant .art-nav {left: 270px; position: absolute; margin: 0;}
.art-menu li a {font-family: var(--fontFamily1);}
.art-menu li a .t {color: var(--fontColor1); margin: 0 20px; padding: 18px 0; line-height: 30px;}
.art-menu li a.active .t {color: var(--color1) !important;}
.art-menu ul {z-index: 10; box-shadow: 0 5px 119px -17px rgba(0,0,0,.15);}
.art-menu ul li a {font-weight: bold;}
.art-menu ul li a::before {font-family: "Fontawesome";}
.art-menu ul li a.active {color: var(--color1); font-weight: bold;}
.winkelmenu {background: #ddd; border-bottom: 1px solid #dfdfdf;}
.winkelmenu .art-nav {box-sizing: border-box; margin: 0 auto; max-width: 1200px; padding: 0 20px; position: relative; top: 0;}
.winkelmenu .art-nav li.separatorHouder {display: inline-block; line-height: 0;}
.artikel .favorieten {clear: both; font-size: 12px; margin-bottom: 0; margin-top: 0.25em; z-index: 2;}
.shopTegel .artikel .inner .favorieten {display: block; position: absolute; right: 0; top: 0; z-index: 2; margin: 0; font-size: 15px; line-height: 1; padding: 15px; color: #ddd; transition: .3s all ease;}
.shopTegel .artikel .inner .favorieten.aan a {color: #3c5273;}
.shopTegel .artikel .inner .favorieten .toelichting, .shopCompact .artikel .favorieten, .winkelwagenHouder .kassaArtikel .regelStuk, .speedsearchLoader, .hoverMenu .kolommen .kolom > ul li a::before, .Taalkeuze_vlaggen.dropdownTaal ul li .omschrijving, .resMenubalkinhoud .resMenubalkinhoudonder .resMenucategorieknop img {display: none;}
.blokholder.accountWijzigen .titel {color: #777; background-color: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px;}
.blokholder.accountWijzigen .content {background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; margin: 20px 0;}
.zoekenOrders {z-index: 13; margin-bottom: 20px; margin-top: 20px; width: 100%; border-color: #E2E2E2; border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.zoekenOrders .veld {z-index: 10; width: 100%;}
.zoekenOrders .veld input, a.logo img {width: 100%;}
.zoekenOrders .knop {z-index: 10; border-radius: 0 5px 5px 0;}
.stap.twee .stap2_bestaandeKlant .inloggen {float: left; width: 47%; position: relative; margin-right: 6%;}
.extrabovenkantHolder {display: block; background-attachment: scroll; background-image: none; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; width: 100%; height: 40px; border-bottom: 1px solid #E2E2E2;}
.account {margin-bottom: 0; margin-left: 0; margin-top: 0; font-family: var(--fontFamily1); border-left: 1px solid #E2E2E2; right: 86px; position: relative; line-height: 30px; align-items: center; font-size: 13px;}
.account .mijnAccountKnop {padding: 0; background: none;}
.account .seperator {border-right: 1px solid #ccc; height: 16px; position: relative; top: 8px; width: 0; padding: 0;}
.account .houder {overflow: hidden; top: 41px; width: 300px; transition: all 0.3s ease 0s; border-radius: 5px; background-attachment: scroll; background-image: none; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); pointer-events: none; transform: none;}
.account h2 {font-size: 17px; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px;}
.account .h3 {border-bottom: 1px solid #E2E2E2; font-size: 14px; padding: 10px;}
.account .accountKop {border-bottom: 1px solid #E2E2E2; font-size: 14px; padding: 10px; font-weight: bold;}
.account .welkom {border-right: 1px solid #e2e2e2; padding: 0 20px;}
.account .openGeklapt .houder {pointer-events: all; top: 41px; transform: none;}
.account .inloggenKnop, .account .favorietenKnop {background: none;}
.account .openGeklapt .inloggenKnop, .account .openGeklapt .favorietenKnop, .account .openGeklapt  .mijnAccountKnop, .account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .mijnAccountKnop:hover {color: #777; text-decoration: none;}
.account .inloggen .email input, .account .inloggen .wachtwoord input {padding-top: 10px; padding-bottom: 10px; font-size: 13px; margin: 0;}
.account .inloggen .wachtwoord2 input {padding: 10px; font-size: 13px;}
.account .inloggen .inlogKnop {padding: 0 10px 10px;}
.account .inloggen .wachtwoordKwijt {float: right;}
.account .inloggen .wachtwoordKwijt .wachtwoordKwijtKnop {vertical-align: middle; color: #777; background: none;}
.account .email {padding: 10px 0;}
.account .wachtwoord {padding-bottom: 10px;}
.account .inloggenKnop::before {content: "\f090"; font-family: "Font Awesome 5 Pro"; color: #AAAAAA; font-size: 13px; vertical-align: middle; margin-right: 10px; line-height: 1;}
.account .houder2 a {text-decoration: none; color: #777;}
.winkelwagenHouder {position: absolute; right: 0; top: 11px; color: #606060; padding: 5px;}
.winkelwagenHouder .winkelknop {background-color: #E2E2E2; padding: 5px 10px; border-radius: 5px; position: relative; margin-left: 0; z-index: auto;}
.winkelwagenHouder .winkelknop .titel {color: var(--fontColor1); display: inline-block; font-size: 13px; font-weight: normal; line-height: inherit;}
.winkelwagenHouder .winkelknop .icoon {line-height: 1; color: var(--fontColor1); display: inline-block; position: static;}
.winkelwagenHouder .winkelknop .icoon:before {content: "\f291"; font-size: 17px; margin-right: 10px;}
.winkelwagenHouder .winkelknop .aantal {background-color: var(--color1); border-radius: 50%; right: -7px; top: -8px;}
.winkelwagenHouder .winkelwagen {top: 54px; border-radius: 5px; background-color: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.winkelwagenHouder .winkelwagen .inhoud.artikelen .winkelTitel {margin: 0 0 15px; border-bottom: 1px solid #E2E2E2; font-size: 14px; padding: 10px;}
.winkelwagenHouder .winkelwagen .inhoud .prijs {float: right; font-size: 16px; padding: 10px; text-align: right; line-height: 1em;}
.winkelwagenHouder .kassaArtikel .kassaArtikelAfbeeldingHolder {width: 50px; padding-right: 10px;}
.winkelwagenHouder .winkelwagen .inhoud .kassaArtikelen.kassaWinkelmandje {padding: 15px 20px;}
.winkelwagenHouder .winkelwagen .inhoud.totaal {padding: 10px; border-top: 1px solid #E2E2E2; display: block; line-height: inherit;}
.zoeken {display: table; position: absolute; top: 15px; right: 180px; border-color: #E2E2E2; border-radius: 5px; background-color: transparent; min-width: 0;}
.zoeken .veld {display: table-cell; position: relative; border-radius: 3px 0 0 3px;}
.zoeken .veld #zoekWoordID {padding-top: 10px; padding-bottom: 10px; font-size: 14px; font-style: italic; border-radius: 0; margin: 0; width: 400px; line-height: 1.1em; background-attachment: scroll; background-image: none; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto;}
.zoeken .knop {display: table-cell; color: #999; position: relative; padding: 5px 12px; transition: all .3s ease; cursor: pointer; z-index: 10; background-color: #fff; border-radius: 0 5px 5px 0; line-height: inherit; margin: 0;}
.zoeken .knop:before {font-size: 13px; color: var(--fontColor1);}
.zoeken .knop:hover {color: #000;}
#speedsearchResult {clear: both; top: 50px; left: -600px;}
#speedsearchResult .houder {overflow: hidden; box-shadow: 0 24px 120px -10px rgba(0,0,0,.3); border-radius: 5px; border: none; font-size: inherit; line-height: inherit; max-height: none; width: auto;}
.speedsearchLoader i {color: #383838;}
.supermenuTrigger {right: 100px; top: 5px; background: #365176; border-radius: 3px; color: #fff; line-height: 1; padding: 4px 5px;}
.supermenuInhoud.open {box-shadow: 0 25px 70px 14px rgba(0, 0, 0, 0.25);}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td {vertical-align: middle;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {width: 135px;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {vertical-align: middle; width: 100%; text-align: center; box-sizing: border-box;}
.meldingBoven {background-color: #eee; border-bottom: 1px solid #dfdfdf; padding: 20px;}
.winkelmenu .art-menu li {position: static;}
.winkelmenu .art-menu li .t.hoverMenuActief::after {content: "\f078"; font-family: "Font Awesome 5 Pro"; display: inline-block; margin-left: .25em; font-size: 13px;}
.hoverMenu {right: 0; width: 100%; border: 1px solid #ddd; box-shadow: 0 50px 50px rgba(0, 0, 0, 0.4);}
.hoverMenu .categorie {padding: 30px; background-color: #eee; border-bottom: 1px solid #dfdfdf;}
.hoverMenu .categorie .kop {color: var(--color1); font-family: var(--fontFamily1); font-size: 19px; font-style: normal; margin-bottom: .5em;}
.hoverMenu .kolommen {padding: 30px;}
.hoverMenu .kolommen .kolom .titel {font-family: var(--fontFamily1); font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.hoverMenu .kolommen .kolom .titel a {padding: 0; display: inline;}
.hoverMenu .kolommen .kolom .titel a:hover {text-decoration: underline;}
.hoverMenu .kolommen .kolom > ul li a {background: none !important; border: 0; width: auto; line-height: inherit; font-weight: normal;}
.hoverMenu .kolommen.kolommen3 .kolom {width: 33.3333%; float: left;}
.hoverMenu .kolommen.kolommen4 .kolom {width: 25%; float: left;}
.hoverMenu .kolommen.kolommen5 .kolom, .hoverMenu .kolommen.kolommen6 .kolom, .hoverMenu .kolommen.kolommen7 .kolom {width: 20%; float: left;}
.extrabovenkantHolder .valuta:hover {max-height: 150px; box-shadow: 0 0 50px -8px rgba(0,0,0,.25); border-radius: 0 0 3px 3px; background: rgba(255,255,255,1);}
.Taalkeuze_vlaggen {color: #fff; max-height: 40px; overflow: hidden; position: absolute; z-index: 5; text-align: left; top: 0; right: 0; transition: .3s all ease; background-color: #FFF; border-radius: 0;}
.Taalkeuze_vlaggen.open, .Taalkeuze_vlaggen.dropdownTaal.open {max-height: 200px; box-shadow: 0 0 28px 1px rgba(0, 0, 0, 0.2);}
.Taalkeuze_vlaggen ul li {line-height: 40px;}
.Taalkeuze_vlaggen ul li a {color: #fff; text-decoration: none;}
.Taalkeuze_vlaggen ul li.actief {cursor: pointer;}
.Taalkeuze_vlaggen ul li.actief span {border: none; color: #fff;}
.Taalkeuze_vlaggen ul li .afbeelding {top: 2px;}
.Taalkeuze_vlaggen.dropdownTaal {line-height: 40px; height: auto; margin: 0; min-width: 0;}
.Taalkeuze_vlaggen.dropdownTaal ul li {padding-right: 13px; padding-left: 13px; white-space: revert;}
.Taalkeuze_vlaggen.dropdownTaal ul li.actief::after {content: "\f107"; padding-left: 10px; font-family: "Font Awesome 5 Pro"; font-size: 16px; top: 1px; position: relative; color: #000;}
.inloggen_holder {border-radius: 5px; max-width: 400px; margin-top: 40px; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.inloggen_holder .inloggen_beschrijving {padding-bottom: 0;}
.inloggen_holder .inloggen_content {border-radius: 5px 5px 0 0; border-top: none;}
a.logo {position: absolute; top: 10px; width: 203px; line-height: inherit; margin: 0;}
.bovenkantHolder {border-bottom-color: #E2E2E2; border-top: none; z-index: auto;}
.bovenkant {position: relative; height: 65px;}
.resMenubalk {height: 100px; padding: 0; position: relative; top: 0; width: 100%; z-index: 100; margin: 0;}
.resMenubalkinhoud {background-color: #fff; top: 0; left: 0; right: 0; z-index: 50; position: fixed; border-bottom: 1px solid #E2E2E2;}
.resMenubalkinhoud .resMenubalkinhoudboven {padding: 10px; display: flex;}
.resMenubalkinhoud .resMenubalkinhoudboven a {line-height: normal; padding: 4px 7px; background: #E2E2E2; border-radius: 5px;}
.resMenubalkinhoud .resMenubalkinhoudboven a i {font-weight: normal; color: var(--fontColor1);}
.resMenubalkinhoud .resMenubalkinhoudonder {padding: 0 10px 10px; display: flex; box-sizing: border-box;}
.resMenubalkinhoud .resMenubalkinhoudonder .resMenucategorieknop {white-space: nowrap; border: 0; background: #fd0000; border-radius: 5px; line-height: normal; padding: 8px 10px; box-sizing: border-box; margin-right: 10px; color: #fff;}
.resMenubalkinhoud .resMenubalkinhoudonder .resMenucategorieknop::before {content: "\f0c9"; font-family: "Font Awesome 5 Pro"; display: inline-block; vertical-align: middle;}
.resMenubalkinhoud img {width: 30px; height: 30px; vertical-align: middle;}
.resMenubalkinhoud a.logores {flex-basis: 100%; background-color: rgba(0, 0, 0, 0); margin-top: 0; margin-right: 0; margin-bottom: 0; padding: 0;}
.resMenubalkinhoud a.logores img, #speedsearchResult .houder .knopAllesOnder {width: auto;}
.resMenubalkinhoud .resMenucategorienaam {cursor: pointer; display: inline-block; vertical-align: middle; font-weight: bold; margin: 0 0 0 5px; position: relative; text-decoration: none;}
.resMenubalkinhoud .resZoeken {display: flex; flex-basis: 100%; box-sizing: border-box; border: 1px solid #E2E2E2; border-radius: 3px; max-height: none; overflow: visible; transition: none;}
.resMenubalkinhoud .resMenuZoekenKnop {box-sizing: border-box; border-width: medium medium medium 0; border-style: none; border-color: currentcolor; padding: 10px; text-align: center; background: #fff; color: #000; font-size: 16px; cursor: pointer; border-radius: 0 5px 5px 0;}
.resMenubalkinhoud .resMenuZoekenKnop i {font-weight: normal; font-size: 13px; color: var(--fontColor1);}
.resMenubalkinhoud #resZoekveld {border: none; font-size: 16px; padding-bottom: 7px; padding-top: 7px; width: 100%; line-height: normal; margin-left: 0; margin-right: 0; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position-x: 0%; background-position-y: 0%; background-size: auto; display: block; font-style: inherit; text-align: inherit;}
.resMenuHolder {box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.2); position: fixed; bottom: 0; top: 0; padding-top: 100px; -webkit-overflow-scrolling: touch; max-width: none;}
.resMenubloktitel {background-color: #f7f7f7; color: #777; font-size: 13px; padding: 10px 7px; border-bottom: none; line-height: inherit; text-transform: inherit;}
.resMenubloktitel i {margin-right: 10px;}
.resMenublokinhoud .resMenuItem a {border-top: 1px solid #E2E2E2; padding: 7px 10px; color: var(--fontColor1); font-size: 13px; border-bottom: none;}
.resMenublokinhoud .resMenuItem.active > a {color: var(--color2); font-weight: bold;}
.resMenuItem .laag1 a {padding-left: 20px; font-size: 12px;}
.resMenuItem .laag2 a {padding-left: 30px;}
.resMenuItem .laag3 a {padding-left: 40px;}
.resMenuwinkelmandje #reswinkelMandjeAantal {background-color: var(--color1); height: 18px; line-height: 1.45em; top: -5px; min-width: 18px; padding: 0 5px; box-sizing: border-box; display: block; width: auto;}
.resMenuItemHolder {transition: .6s all ease;}
#speedsearchResult .houder .speedSearch ul li a {background: none; border: none; padding: 10px;}
#speedsearchResult .houder .knopAllesOnder a:hover {background-color: var(--color1);}
.Taalkeuze_vlaggen.dropdownTaal ul li a, .bovenkantHolder .winkelmenu::-webkit-scrollbar, .resMenuHolder::-webkit-scrollbar {display: inline;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {float: none;}
.bovenkantHolder .bovenkant .resMenubalkinhoud .resMenubalkinhoudboven a {font-size: 20px;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a {font-size: inherit; vertical-align: baseline;}
.bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop, .bovenkantHolder .bovenkant .resMenubalkinhoud a.logores {margin-left: 0;}
.Taalkeuze_vlaggen.dropdownTaal.open ul {background: none; box-shadow: none; max-height: none;}
#speedsearchResult .houder .knopAllesOnder a {background-color: var(--color1); font-weight: normal; padding: 15px;}
.zoeken .veld input#zoekWoordID[type="text"] {background-color: #fff;}
.account .houder .houder2 {background-color: transparent; border-top: none; padding: 0 10px 10px;}
#speedsearchResult .houder .speedSearch ul li a strong {border-bottom: none; display: inline; line-height: inherit; position: static;}
.Taalkeuze_vlaggen.dropdownTaal ul {border-radius: 0; max-height: none; overflow: visible; position: static; transition: none;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {bottom: -50%; left: -50%; max-height: none; max-width: none; right: -50%; top: -50%; width: 50px !important;}
.bovenkantHolder .winkelmenu {box-sizing: content-box; max-width: none; text-align: inherit;}
#speedsearchResult .houder .speedSearch.artikelen ul li a .categorie {color: #aaa; font-size: inherit;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {color: var(--fontColor1); font-weight: normal;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {color: inherit;}
.bovenkantHolder .bovenkant {display: block; margin-left: 40px; margin-right: 40px; max-width: none; min-height: 0; padding: 0;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {float: right; margin-right: 0;}
.bovenkantHolder .bovenkant .resMenubalkinhoud {line-height: 1em; white-space: revert;}
.bovenkantHolder ul.winkelmenu, .resMenublokinhoud 	ul {line-height: inherit;}
#speedsearchResult .houder .speedSearch ul li {margin-bottom: 0; margin-left: 0; margin-right: 0;}
#speedsearchResult .houder .speedSearch ul li:last-child {margin-bottom: 0;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen {margin: 0; text-align: inherit;}
.bovenkantHolder .winkelmenu.art-menu {margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
.extrabovenkantHolder .extrabovenkant {margin-left: 40px; margin-right: 40px;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.knop {margin-right: 0;}
.winkelwagenHouder .winkelwagen .inhoud.artikelen {max-height: none; overflow-y: visible;}
#speedsearchResult .houder .speedSearch .resultaat {padding-left: 30px; padding-right: 30px; padding-top: 35px;}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .nummer {text-transform: inherit;}
.resMenuItem.open > .openklapper {width: 39px;}
#speedsearchResult .houder .speedSearch ul li a::after {clear: none; content: none; display: inline;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail::after {content: none; display: inline; padding-bottom: 0;}
.Taalkeuze_vlaggen ul li.actief .afbeelding::before {bottom: auto; color: inherit; content: none; font-family: inherit; font-size: inherit; font-weight: normal; position: static; right: auto; z-index: auto;}

/* usps */
.stap.vier .totalen .vwHolder .vwTonen input[type="checkbox"] {margin-top: 0;}
.stap.vier .gegevens {padding: 20px;}
.stap.vier .gegevens .algemeen {display: none;}
.stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {border-radius: 5px; background-color: #f7f7f7;}
.uspHolder .usps {flex: 1; padding: 8px 0; font-size: 13px;}
.uspHolder .usps i {color: var(--color1); margin-right: 10px; vertical-align: middle;}

/* bouwblokken */
.bannerHouder .banner p {margin-bottom: 1em;}
.bannerHouder a {color: var(--color1);}
.liquid-slide-sjabloon .inhoud p:last-child {margin: 0 0 1em;}
.vak .inhoud.smal {max-width: 1200px;}
.art-sidebar1 .FCK2kolTd, .art-sidebar1 .FCK3kolTd, .art-sidebar1 .FCK4kolTd, .art-sidebar2 .FCK2kolTd, .art-sidebar2 .FCK3kolTd, .art-sidebar2 .FCK4kolTd {width: 100%; display: block; margin-bottom: 15px;}
.art-sidebar1 .FCK2kolTdS, .art-sidebar1 .FCK3kolTdS, .art-sidebar1 .FCK4kolTdS, .art-sidebar2 .FCK2kolTdS, .art-sidebar2 .FCK3kolTdS, .art-sidebar2 .FCK4kolTdS {display: none;}
.liquid-slide-sjabloon .inhoud {max-width: 400px; padding: 10px 20px; left: 70px; top: 25%;}
.liquid-slide-sjabloon .inhoud h2 {text-shadow: 0 1px 5px rgba(0,0,0,.5);}
.inschrijvenKolom .blokholder {background-color: #FFF;}
.cookieMelding .inhoud .sluiten {background-color: var(--color1);}
.privacyMelding .inhoud .titel {color: #3c5173; font-family: var(--fontFamily1);}
.privacyMelding .inhoud .titel::before {font-weight: bold;}
.vak.grijs {background-color: #eee;}
.vak .inhoud {max-width: 1200px; padding: 50px 20px;}
.intro .picHolder .inhoud h2 {color: var(--fontColor1); font-size: 30px; text-shadow: unset; margin-bottom: .75em;}
.intro .picHolder .inhoud h5 {color: var(--color1); font-size: 28px; text-shadow: unset; margin-bottom: .5em;}
.intro .picHolder .inhoud .afbeelding {display: inline-block; position: absolute; right: 0; bottom: 0; float: right; width: 50%; text-align: right; max-width: 800px;}
.intro .picHolder .inhoud .afbeelding img {width: 100% !important; height: auto !important;}
.intro .catHolder .inhoud h3 {padding: 16px; text-align: center; border-bottom: 1px solid #E2E2E2; margin-bottom: 0;}
.intro .catHolder .inhoud ul {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
.intro .catHolder .inhoud ul li a {color: #9c9c9c; display: block; position: relative; text-decoration: none; font-size: 15px; font-weight: normal; line-height: 1.25em; padding: 18px 30px 18px 18px; border-bottom: 1px solid #E2E2E2;}
.intro .catHolder .inhoud ul li a:hover {background: #eee;}
.intro .catHolder .inhoud ul li a::after {content: "\f178"; font-family: "Font Awesome 5 Pro"; position: absolute; right: 0; padding: 0 18px; font-size: 14px; color: #aaa;}
.intro .catHolder .inhoud a.knopMore {display: block; text-align: center; background: var(--color1); color: #FFF; text-decoration: none; padding: 16px; border-radius: 0 0 5px 5px;}
.serviceHolder .FCK4kolTdS {width: 3%;}
.blok {margin: 40px 0; background: #FFF; border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); display: block;}
.blok .inhoud {padding: 30px; box-sizing: border-box;}
.blok .rechts {display: inline-block; padding: 100px; box-sizing: border-box; flex: 1;}
.blok .links {display: inline-block; padding: 100px; box-sizing: border-box; flex: 1; background: url(images/about-boxpert.jpg) no-repeat center center / cover; z-index: 0; border-radius: 5px 0 0 5px; position: relative;}
.blok .links::before {content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(68, 68, 68, .45); border-radius: 5px 0 0 5px;}

/* webshop */
#extraSchermWinkelmand .schermWinkelMandje .melding .meeBestellenTekst, #tabSerieInhoud .shopLijst .artikel, .meeBestellenTekst {padding: 20px;}
#extraSchermWinkelmand .schermWinkelMandje .melding .meeBestellenTekst p {margin: 0 0 1em;}
#extraSchermWinkelmand .schermWinkelMandje .shopTegel {margin: 0 -10px;}
#extraSchermWinkelmand .schermWinkelMandje .shopTegel .artikel, .shopTegel .artikel {width: 20%;}
#tabSerieInhoud .shopLijst .artikel .inner .col1 {padding-right: 20px; width: 150px;}
#tabSerieInhoud .shopLijst .artikel .inner .col3, .Gv3 {display: table-cell;}
#tabSerieInhoud .shopLijst .artikel .omschrijving, .artikel .prijzen {margin: 0 0 10px;}
#tabSerieInhoud .shopTegel .artikel .inner {border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
#tabSerieInhoud .shopTegel .artikel .inner .afbeeldingHouder, .shopCompact .artikel .prijzen, #tooltip div, .kassaArtikel .tekst .variatie .eenheid:last-child, .artikel .aantalMinPlus > * > i, .artikel.detail .shopDetailModernKenmerken, .kassaArtikelen .artikel .tekst .opmerkingHolder, .kassainkollommen .knoppenHouder, .presentatieWijze a .icon, .shopTegel .artikel .bestellen {margin: 0;}
#tabSerieInhoud .shopTegel .artikel .meerinfo, .kassaArtikelen .artikel .tekst .variatie {margin: 10px 0;}
.Gv3 .Gv3Thumb {margin: 7px; position: relative;}
.Gv3 .Gv3Thumb a, .kenmerkMobielHouder .filters .filterBovenkant .alleFiltersWissen a, .kenmerkMobielHouder .filters .kenmerkgroep a.filterGroepHerstel, .kenmerkMobielHouder.slide .filters .kenmerkgroep a.filterGroepHerstel, .stap.twee .tekstNieuwAdres a {color: var(--color1); text-decoration: underline;}
.artikel.detail .detailinkollommen .links, .nieuwAdres.postcodechecker .postPlaats .postcode, .nieuwAdres.postcodechecker .postPlaats .huisnummer {width: 50%;}
.artikel.detail .detailinkollommen .rechts {width: 45%;}
.artikel.detail .rechts .bestellen .bestelknop .aantalMinPlus input {margin-right: 0; width: 40px;}
.couponcodeHouder .blok:empty, .kassainkollommen > .rechts .blok:empty, .kenmerkMobielHouder.standaard .filters.open, .variatieKeuzePopup .dropdown .keuze, ul.stappenBalk li.stap:first-child::before, .tabsV2 .inhoud > div.actief, .mijnAccountOrderHolder .item a.link, .kassaArtikel .artikelPrijsEenheid, .filtersLinks .kenmerkgroep a.titel, .shopTegel.productCarousel {display: block;}
.dropdown ul li	a {color: var(--color1); padding: 4px 12px; clear: both;}
.dropdown.openGeklapt .keuze {border-radius: 3px;}
.filters .actiefKenmerk a, ul.stappenBalk li.stap a, .shopSortOptie a {text-decoration: underline;}
.formuleHolder > .titel, ul.stappenBalk li.stap.bezig .naam, .stap.drie .regel > .omschrijving, .artikel.kassaArtikel .tekst a.kassaArtikelTitel {font-weight: bold;}
.formuleHolder.reset .content, .formuleHolder .content {background: #eee; padding: 10px 15px;}
.fotoAlbum .volledigGallery .carousel-cell-groot .verhouding {padding-bottom: 100%;}
.kassaArtikelen .artikel .tekst .voorraad .opVoorraad, .kassaArtikel .tekst .voorraad .opVoorraad {margin-left: .25em;}
.kassaArtikelen .artikel.gratis a.kassaArtikelTitel, .shopTegel .artikel .inner .rechtsboven div a, .shopTegel .artikel .inner .rechtsboven div.aan a, .dropdown .keuze:hover:before, .relatieItem .bedrijfsnaam, .relatieItem.detail .bedrijfsnaam {color: var(--color1);}
.kassaArtikelen .artikel.nietMeerLeverbaar > td:first-child, .kassaArtikelen .artikel td.verwijderKnop {padding-left: 0;}
.kassaArtikelen .artikel.nietMeerLeverbaar > td:last-child {padding-right: 0;}
.kassaArtikelen .gratisSetKeuzeRegel td {padding-top: 0;}
.kassaArtikelen .nietMeerLeverbaarTitel a.knop {margin-left: 0;}
.kenmerkMobielHouder .filters .kenmerkgroep .prijsFilterHolder .noUi-target {margin-top: 15px;}
.kenmerkMobielHouder .filters .kenmerkgroep .prijsFilterHolder .prijsfilterVelden input, .kassaArtikelen .aantallen .verwijderen, .shopLijst .artikel .prijzen .prijs {font-size: inherit;}
.kenmerkMobielHouder.accordion .filters, .kenmerkMobielHouder.slide .filters {margin: 10px 0; position: relative;}
.kenmerkMobielHouder.accordion .filters .filterknop a {color: var(--color1); text-decoration: underline; transition: all .3s ease;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep .kenmerken {background: #fff; margin-top: 0; overflow: hidden; position: absolute; transition: all .2s ease; z-index: 10;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep.open .kenmerken {padding: 0 14px;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroepHouder, .prijsafspraakLos td, .tooltip.btwGrondslag .btwGrondslagTabel td, .tooltip.btwGrondslag .btwGrondslagTabel th, body:has(.artikel.detail) .art-Sheet, .filters li.kenmerkgroep {padding: 0;}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerken {max-height: 0; overflow: hidden; padding: 0 14px; position: absolute; width: 200px;}
.kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep.open, .filters .filterCheck label {position: relative;}
.meebestellenSelectie .meebestellenSelectieArtikel input[type="checkbox"] {margin: 0 5px 0 0;}
.nieuwAdres.postcodechecker .postPlaats .plaats:only-child {width: 70%;}
.nieuwAdres.postcodechecker .straat .straatnaam:only-child, .shopLijst .artikel .inner .afbeeldingHouder {margin-right: 0; width: 100%;}
.ordersFilters .filterVeld > select {-moz-appearance: none; -webkit-appearance: none; appearance: none; background: #fff url('data:image/svg+xml;utf8,<svg fill="%23666666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat right center; border: 1px solid #cccccc; border-radius: 3px; color: #666; font-size: inherit; padding: 8px 25px 8px 10px;}
.popupHolder .popup .titel .h2 {margin: 0 0 .5em;}
.popupHolder .popup .titel .sluiten {background: #eee; border-radius: 50px; box-sizing: border-box; color: #000; cursor: pointer; font-size: 18px; height: 32px; line-height: 10px; padding: 7px; text-align: center; width: 32px;}
.presentatieWijze select {border: 1px solid #cccccc;}
.shopCompact .artikel .afbeeldingHouder {width: 100%;}
.shopCompact .artikel .omschrijving .voorraad, .stap.drie .regel .select:empty, ul.stappenBalk li.stap:last-child::after, .shopLijst .artikel .inner .col2 .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .groep, .shopTegel .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .groep, .productCarrousselHolder .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .groep, .shopLijst .artikel .inner .col2 .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerk, .shopTegel .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerk, .productCarrousselHolder .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerk, .shopCompact .artikel .bestellen a.wButBestel span, .shopCompact .artikel .voorraad, .shopCompact .artikel .artikelEenheid, .artikel.detail .prijzen .sterren .groep, .tabsV2 .inhoud > div, .kassaArtikel .tekst .artikelnr .titel, .stap.twee .stap2_naw .keuze, .productCarousel .artikel .inner .artikelgroep, .productCarousel .artikel .inhoud .artikelnr, .productCarousel .artikel .inhoud .artikelGroepPrijs, .filters .kenmerkgroepHouder .kenmerkgroep.sterren .kenmerken .kenmerk .filterCheck .omschrijving, .kenmerkArt span.toevoeging:last-of-type:after, .blader_tabel1 tr td:first-child, .blader_tabel1 tr td:last-child {display: none;}
.shopLijst .artikel .inner .afbeeldingHouder .labels img {height: auto; width: auto;}
.sorteerKnoppen a {transition: all .3s ease; display: inline-block; line-height: 1.5em; color: #666; padding: 5px 10px;}
.stap .totalen .relatieBtwPrijs {line-height: 1.25em; white-space: nowrap;}
.stap.drie .regel.actief {background: #fff; border-color: #41ae28; border-width: 1px;}
.uploadHolder ul {list-style-position: outside;}
.variatieKeuzePopup .dropdown ul {border-radius: 0 0 3px 3px; box-shadow: 0 1px 3px rgba(0,0,0,.2); max-height: 0em; overflow: hidden; position: absolute;}
.variatieKeuzePopup .dropdown ul li {border-bottom: 1px solid var(--borderColor1); margin: 0;}
.variatieKeuzePopup .dropdown ul li a {padding: 4px 12px;}
.variatieKeuzePopup .dropdown ul li a:hover, .kenmerkArt:hover, .artikelnrKenmerk:hover {background-color: #eee;}
.variatieKeuzePopup .dropdown ul li.active a {background-color: var(--color1); font-weight: bold;}
.variatieKeuzePopup input[type="text"], .variatieKeuzePopup textarea {box-sizing: border-box;}
table.lijst tr td.bedrag {text-align: right; white-space: nowrap;}
table.lijst tr th.bedrag, .shopSortOptie2, .haparko-promo .regel .bedrag {text-align: right;}
ul.stappenBalk {margin-bottom: 20px; padding: 10px;}
ul.stappenBalk li.stap {display: block; padding: 0; position: relative;}
ul.stappenBalk li.stap.klaar::after {border-color: #41ae28;}
ul.stappenBalk li.stap::after {border-top: 2px solid #ddd; content: ""; left: 50%; position: absolute; top: 12px; width: 100%; z-index: 0;}
ul.stappenBalk li.stap::before {content: ""; position: relative; width: 25px; z-index: 1;}
.shopHeader {margin: 20px 0; background: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 30px;}
.shopFooter {margin-bottom: 20px; margin-left: 0; margin-right: 0; clear: both; background: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 30px;}
.aantalPerPagina select {padding-top: 5px; padding-bottom: 5px;}
.aantalPerPagina span {line-height: 31px; padding-right: 5px;}
.presentatieWijze {display: inline-block; vertical-align: middle; padding: 0; border-radius: 4px; overflow: hidden; background: none; border: none; box-sizing: content-box;}
.sorteerKnoppen {display: inline-block; vertical-align: middle; padding: 0; border-radius: 4px; overflow: hidden;}
.presentatieWijze a {display: inline-block; line-height: 1.5em; border-right: none; padding: 5px !important; position: static; width: auto !important; color: #666 !important;}
.sorteerKnoppen a:hover, .stappenbalk .bezig .naam {color: var(--color2);}
.shopNavigatie {z-index: 100; right: 30px; display: inline-block; margin: 0 0 15px; width: auto;}
.shopNavigatie .button {background-image: unset; background-position-x: unset; background-position-y: unset; background-size: unset; background-repeat: unset; background-attachment: unset; background-origin: unset; background-clip: unset; background-color: unset; border: unset; color: #636363; font-size: 15px; padding-right: 8px; padding-left: 8px;}
.shopCategorieHolder, .shopTegel {display: flex; flex-wrap: wrap; margin: 0 -10px; gap: normal; grid-template-columns: none;}
.shopCategorieHolder .categorie {width: 20%; display: flex; border-left: none; border-top: none;}
.shopCategorieHolder .categorie .inner {height: auto !important; width: 100%; position: relative; transition: all .3s ease; background: #fff; display: flex; flex-direction: column; margin: 10px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px;}
.shopCategorieHolder .categorie .inner:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);}
.shopCategorieHolder .categorie a {z-index: 100; background: url("images/spacer.gif"); overflow: visible;}
.shopCategorieHolder .categorie .titel h2 {color: var(--fontColor1); font-size: 15px; font-weight: normal; overflow: visible; text-overflow: clip; white-space: revert;}
.shopCategorieHolder .afbeeldingHouder img {border-radius: 5px 5px 0 0;}
.artikel .afbeeldingHouder .verhouding, .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder .verhouding {padding-bottom: 75%;}
.artikel .labels {top: 15px; left: 15px; z-index: 12; font-size: inherit; line-height: inherit;}
.artikel .labels .label {color: #FFF; border-radius: 5px; line-height: 1; padding: 8px 10px; background: #04042F; display: inline-block; text-transform: uppercase; font-weight: bold; font-size: 12px; margin-bottom: 0; margin-left: 0; margin-top: 0;}
.artikel .labels .label.sold, .relatieItem.detail .website a, #aantal {background-color: var(--color1);}
.artikel .artikelnr > .titel {padding-right: 0.3em; margin-right: 0;}
.artikel .prijzen .prijs {font-weight: normal; color: var(--fontColor1);}
.artikel .verlang {clear: both; font-size: 12px; margin: 0.25em 0 0; z-index: 2;}
.artikel .variatie {margin: 10px 0; max-width: 400px;}
.artikel .variatie .mArt_holder {margin: 0 0 5px;}
.artikel #extraVrachtkosten {display: inline-block; padding: 5px 10px; margin: 0.5em 0; background-color: #eee; border-radius: 5px;}
.artikel #extraVrachtkosten a, .kassaArtikelen .artikel .tekst a.kassaArtikelTitel:hover, .shopSortOptie a:hover, .shopSortOptie a.button {text-decoration: none;}
.shopLijst .artikel {box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 20px; border: none;}
.shopLijst .artikel > a, .shopCompact .artikel a.link, .stappenbalk li::after {z-index: 0;}
.shopLijst .artikel .inner, .shopCompact {display: table; width: 100%;}
.shopLijst .artikel .inner .col1 {display: table-cell; vertical-align: middle; width: 150px; padding-right: 20px;}
.shopLijst .artikel .inner .col2 {display: table-cell; vertical-align: middle; width: auto; padding: 0;}
.shopLijst .artikel .inner .col3 {display: table-cell; vertical-align: middle; text-align: right; padding-left: 20px;}
.shopLijst .artikel .afbeeldingHouder .labels img {width: 50px; height: auto;}
.shopLijst .artikel .omschrijving {margin-bottom: 10px; margin-right: 0; margin-top: 0;}
.shopLijst .artikel .omschrijving h2.titel a {color: #777; font-weight: normal; font-size: 17px;}
.shopLijst .artikel .prijzen {font-size: 16px; margin-bottom: 10px; margin-left: 0; margin-top: 0; width: auto;}
.shopLijst .artikel .bestellen {padding: 0; margin: 0;}
.shopLijst .artikel .meerinfo {line-height: 1.5em; color: #aaa;}
.shopLijst .artikel .bestelknop {border-spacing: 0; display: inline-table; position: relative;}
.shopLijst .artikel .bestelknop input {display: table-cell; margin: 0; border-radius: 3px 0 0 3px; width: 32px;}
.shopLijst .artikel .bestelknop .button {display: table-cell; margin: 0; border-radius: 0 3px 3px 0;}
.shopTegel.volledig .artikel {width: 25%;}
.shopTegel .artikel .inner {margin: 10px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; border: none; box-sizing: content-box; padding: 0;}
.shopTegel .artikel .inner .inhoud {padding: 30px; text-align: center;}
.shopTegel .artikel .inner > a.link, .stappenbalk li::before, .stappenbalk .klaar a::before {z-index: 1;}
.shopTegel .artikel .inner .top10 {color: #3c5273;}
.shopTegel .artikel .inner .afbeeldingHouder {margin-bottom: 0; border-radius: 5px 5px 0 0;}
.shopTegel .artikel .inner .afbeeldingHouder::before {content: ""; top: 0; bottom: 0; left: 0; pointer-events: none; right: 0; position: absolute; display: block; background-color: #000; opacity: .05; border-radius: 5px 5px 0 0; transition: .3s all ease; z-index: 1;}
.shopTegel .artikel .inner .omschrijving, .kassaArtikelen th.regelStuk {text-align: center;}
.shopLijst .artikel .inner .col2 .meerinfo .shopDetailModernKenmerken .kenmerkArt, .productCarrousselHolder .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt {margin: 0; padding: 0;}
.shopTegel .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt {margin: 0; padding-top: 0; padding-bottom: 0;}
.shopLijst .artikel .inner .col2 .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerkPlaatje img, .shopTegel .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerkPlaatje img, .productCarrousselHolder .artikel .inner .meerinfo .shopDetailModernKenmerken .kenmerkArt.sterren .kenmerkPlaatje img, .filters .kenmerkgroepHouder .kenmerkgroep.sterren .kenmerken .kenmerk .filterCheck img {width: 104px;}
.shopTegel .artikel .omschrijving h2.titel {font-size: 15px; height: 2.5em; -webkit-box-orient: horizontal; -webkit-line-clamp: none;}
.shopTegel .artikel .omschrijving h2.titel a, .formulier.widget .label {font-weight: normal;}
.shopTegel .artikel .meerinfo {margin-top: 10px; margin-right: 0; margin-left: 0;}
.shopTegel .artikel .prijzen {margin-top: auto; text-align: center;}
.shopTegel .artikel .prijzen .prijs, .filters .toelichting h2 {font-size: 15px;}
.shopTegel .artikel .bestellen .bestelknop {display: flex;}
.shopTegel .artikel .bestellen .bestelknop input {border-right-style: none; border-right-width: 0;}
.shopTegel .artikel .bestellen .bestelknop a.wButBestel {line-height: inherit; font-weight: bold; background-color: #ddd !important; border: none !important; color: #404040; border-radius: 0 3px 3px 0;}
.shopCompact .artikel {display: table-row; hyphens: auto;}
.shopCompact .artikel > div {display: table-cell; vertical-align: middle; padding: 5px; border-bottom: 1px solid var(--borderColor1); position: relative;}
.shopCompact .artikel .artikelnr, .productCarousel .artikel .omschrijving .artikelnr {font-size: 11px;}
.shopCompact .artikel  .col4 {width: 80px;}
.shopCompact .artikel .bestellen input {height: auto; padding: 4px; margin: 0; border-radius: 3px 0 0 3px; width: 34px;}
.shopCompact .artikel .bestellen a.wButBestel {border-radius: 0 3px 3px 0; box-sizing: border-box; padding: 6px; width: 50%; text-align: center;}
.shopCompact .artikel .bestellen a.wButBestel::before {content: "+";}
.artikel.detail .links {float: left; width: 50%;}
.artikel.detail .rechts {float: right; width: 45%; padding-left: 20px;}
.artikel.detail h1 {font-size: 27px; margin-bottom: .5em;}
.artikel.detail .bestelknop {display: inline-table; position: relative; border-spacing: 0;}
.artikel.detail .bestellen .bestelknop input {display: none; vertical-align: middle; border-radius: 3px 0 0 3px; height: 38px; position: relative; margin: 0;}
.artikel.detail .bestellen .bestelknop .wButBestel {display: table-cell; vertical-align: middle; padding: 8px 20px; text-align: center; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position-x: 0%; background-position-y: 0%; background-size: auto; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.artikel.detail .bestellen .bestelknop .wButBestel:hover {box-shadow: 0 4px 16px 0 rgba(0,0,0,0.20);}
.artikel.detail .prijzen .prijs {font-size: 20px; color: #8B8B8B;}
.artikel.detail .artikelBoven {background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; margin-top: 40px;}
.artikel.detail .rechts .inhoud, .artikel.detail .links .inhoud {padding: 50px; box-sizing: border-box;}
.artikel.detail .rechts .inhoud #tabArtikelOmschrijvingInhoud, .artikel.detail .links .inhoud .kenmerken {padding: 20px 0;}
.artikel.detail .rechts .inhoud .techSpec {padding: 40px 0;}
.artikel.detail .prijzen .sterren {margin-bottom: 10px;}
.artikel.detail .prijzen .sterren .kenmerkPlaatje img {width: 104px; margin-right: 11px; vertical-align: middle;}
.artikel.detail .prijzen .sterren .kenmerk {background: #E2E2E2; z-index: 13; padding: 5px 10px; border-radius: 5px;}
.artikel.detail .links .inhoud .delenMedia {padding: 20px 10px;}
.thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: #365376;}
.tabsV2 .titels > div {padding: 10px 20px;}
.tabsV2 .titels > div.actief {border-top-color: var(--color1);}
.tabsV2 .inhoud {border: 1px solid var(--borderColor1); padding: 20px; display: none;}
.artikelAantal {margin-left: 5px; background: #eee; padding: 2px 5px; line-height: 1; border-radius: 3px; font-size: 12px; font-weight: bold; min-width: 10px; display: inline-block; text-align: center; color: #000;}
#tooltip {background-color: #fff; border: 1px solid #ccc; border-radius: 5px; opacity: 1; padding: 10px; position: absolute; z-index: 3000; box-shadow: 1px 1px 3px #ccc;}
#tooltip h3 {color: #7F7F7F; font-weight: bold; font-size: 1px; position: absolute; visibility: hidden;}
.bedrijfsGegevens.zakelijkTonen {max-height: 300px;}
.vatGegevens .btwGegevens {padding: 10px; line-height: 1.25em; background: #fff; border-radius: 3px; margin: 5px 0 0 10px; font-size: 12px; display: block; border: 1px solid #ccc; color: #000;}
.adresHolder .kop, .tafHolder .kop {font-family: var(--fontFamily1);}
.adresHolder .adressen .item.open {z-index: 100; box-shadow: 0 0 50px -8px rgba(0,0,0,.25);}
.adresToevoegenFormulier.open {background-color: #f7f7f7; border-radius: 5px;}
.mijnAccountOrderHolder .item .inhoud .omschrijving {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;}
.mijnAccountOrderHolder .knoppen a {background-color: rgba(54, 82, 95, .1); color: #365276; border-radius: 3px; display: inline-block; font-size: 12px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease 0s; line-height: normal; margin-right: 5px; margin-top: 5px;}
.mijnAccountOrderHolder .knoppen a.activeren {background-color: #365276; color: #fff;}
.mijnAccountOrderHolder .knoppen a.verwijderen:hover {background-color: rgba(239, 104, 104, .1); color: #ef6868;}
.mijnAccountOrderHolder .item .artikelen {margin: auto 0 auto auto;}
.mijnAccountOrderHolder .item .artikelen .afbeeldingHouder {margin-bottom: 5px; margin-top: 5px;}
.mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .meeraantal {background-color: #365276;}
.mijnAccountOrderHolder.detail .omschrijving .titel {color: #365376;}
.mijnAccountOrderHolder.detail .omschrijving .knoppen a {margin-left: 5px;}
.taf1 {width: 150px;}
#taf10, .uploadFilename {width: 250px;}
.VOVIP {border: 1px solid #ddd; color: #555; display: block; margin: 5px 0;}
.VOVTA {border: 1px solid #ddd; height: 40px; color: #555; display: block; margin-top: 10px;}
.vrijveldVeldA, .vrijveldVeldB {width: 202px;}
.stappenbalk {margin-bottom: 20px; background-color: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 10px;}
.stappenbalk .bezig::before {background-color: var(--color2);}
.stappenKnop {margin-top: 10px;}
.stappenKnop a.volgendeStap {width: 100%; box-sizing: border-box; font-size: 15px;}
.volgendeStap.disabled {opacity: .5; pointer-events: none;}
.stap .blokholder > .titel {color: #777; margin: 20px 0; padding: 10px 15px; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; box-sizing: border-box;}
.stap .blokholder > .content {padding: 10px 15px; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; box-sizing: border-box;}
.stap .kassaArtikelen {margin-bottom: 20px; background-color: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 30px;}
.kassaArtikelen th {font-size: 90%; border-bottom-width: 2px;}
.kassaArtikel .regelTotaal {max-width: 100px;}
.kassaArtikel .regelTotaal .prijs {font-weight: bold; font-size: 14px; color: #000; line-height: 1.4em;}
.kassaArtikel .aantallen input {width: 54px;}
.kassaArtikel .aantallen .eenheid, .kassaArtikel .tekst .variatie .eenheid, .kassaArtikelen .kassaArtikel .regelVolgorde .eenheid {display: block; margin: 0 0 5px;}
.kassaArtikel .aantallen .verwijderen:hover a {color: #666;}
.kassaArtikel .tekst a.kassaArtikelTitel {font-size: 110%; display: block; line-height: 1.25em;}
.kassaArtikel .tekst .artikelnr {text-transform: uppercase;}
.kassaArtikel .verwijderKnop, .artikel.kassaArtikel td.aantallen {padding-left: 10px;}
.kassaArtikel.gratis, .kassaArtikel.gratis a.kassaArtikelTitel {color: #41ae28;}
.kassaArtikel.gratis input {border: 0;}
.kassaArtikel .tekst .variatie {line-height: 1.5em; font-size: 12px; margin: 10px 0; background: #eee; display: inline-block; padding: 15px; border-radius: 3px; min-width: 150px;}
.kassaArtikel .tekst .variatie .titel {font-weight: bold; color: #000; display: block;}
.kassaArtikel .kortingsbon .titel {margin-top: 7px; display: inline-block;}
.kassaArtikelen .kassaArtikel .regelVolgorde input {width: 54px; text-align: center;}
.kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde {display: flex; background: #ddd; width: 90px; margin: 0 auto;}
.kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde > * {width: 33.333% !important; padding: 5px !important; box-sizing: border-box !important; margin: 0 !important; line-height: 1; display: flex; border-radius: 0 !important; transition: .3s all ease; color: #000; border-color: #ddd !important;}
.kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde .down:hover, .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde .up:hover {cursor: pointer; background: #d0d0d0;}
.kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde > * > i {margin: auto;}
.stap .totalen {z-index: 1; padding: 30px; box-sizing: border-box; background-color: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px;}
.stap .totalen .stappenKnop {padding: 0; background: none; border: 0;}
.stap .couponcode {display: inline-table; width: 100%; margin: 10px 0; background: #f5f5f5; box-sizing: border-box;}
.stap .couponcode #CouponCodeV {display: table-cell; vertical-align: middle; margin: 0; border-radius: 3px 0 0 3px; text-transform: uppercase;}
.stap .couponcode #CouponCodeV::placeholder {text-transform: none;}
.stap .couponcode a.wButControleer {display: table-cell; vertical-align: middle; border-radius: 0 3px 3px 0; padding: 5px 12px; line-height: 1em; text-align: center;}
.stap.twee .stap2_bestaandeKlant {border-radius: 3px; margin-bottom: 10px; margin-top: 10px; float: none !important; width: 100% !important;}
.stap.twee .stap2_bestaandeKlant .content, .productCarousel .artikel .inner {padding: 15px;}
.stap.twee .stap2_bestaandeKlant .uitleg {float: left; width: 47%; position: relative; padding-top: 10px; margin-right: 0;}
.stap.twee .tekstNieuwAdres {padding: 5px; position: relative; z-index: 1;}
.nieuwAdres.postcodechecker .straat .straatnaam {width: 100%; margin-right: 0;}
.stap.twee > .blokholder.algemeneGegevens, .stap.drie .blokholder:first-of-type {float: left;}
.stap.twee > .blokholder, #stap2_factuuruitklap, #stap2_bewaaraccount {float: right; width: 48%; clear: right;}
.stap.drie .blokholder {width: 48%; float: right;}
.stap.drie .regel .select, body:has(article > .stap, article > #naw) .art-sidebar1, body:has(article > .stap, article > #naw) .art-sidebar2, body:has(article > .stap, article > #naw) .breadcrumbs, body:has(.artikel.detail) .art-sidebar1 {display: none !important;}
.stap.drie .regel {border-width: 1px; padding: 10px 15px;}
.stap.drie .regel:hover {border-width: 1px;}
.stap.drie .regel:before {opacity: 0; content: "\f00c"; position: absolute; right: 0; top: 0; padding: 4px; font-size: 12px; background: #41ae28; color: #fff; font-family: "Font Awesome 5 Pro"; line-height: 1em; border-bottom-left-radius: 3px;}
.stap.drie .regel.actief:before {opacity: 1;}
.stap.drie .regel .label {float: right; padding: 10px;}
.stap.drie .nietActief {background-color: #FF01001f;}
.productCarousel .artikel {height: 330px; margin-right: 40px !important; margin-left: 0 !important; transition: all 0.3s ease 0s; width: 315px;}
.productCarousel .artikel .inner {margin: 0; line-height: 1.25em;}
.productCarousel .artikel .inner:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);}
.productCarousel .artikel .inner > a.link {opacity: 0; overflow: hidden;}
.productCarousel .artikel .artikel .omschrijving h2.titel {line-height: 1em; height: 2em; overflow: hidden; display: block; margin-bottom: 0.25em; text-align: center;}
.productCarousel .artikel .artikel .omschrijving h2.titel a {font-size: 14px; margin: 0; color: var(--fontColor1); font-weight: normal;}
.productCarousel .artikel .artikel .bestellen .bestelknop {display: table;}
.productCarousel .artikel .artikel .bestellen .bestelknop input {display: table-cell; margin: 0; border-radius: 3px 0 0 3px; border-right: 0; border-color: var(--borderColor1); width: 36px;}
.productCarousel .artikel .artikel .bestellen .bestelknop a.wButBestel {display: table-cell; width: 100%; text-align: center; background-color: #eee !important; border: none !important; color: #404040; border-radius: 0 3px 3px 0;}
.productCarousel .artikel .inhoud, .stap .totalen .stappenKnop a.volgendeStap {padding: 10px;}
.productCarousel .artikel .inhoud h2.titel {font-size: 14px; height: 55px; margin: 0 0 5px; overflow: hidden;}
.productCarrousselHolder .artikel .inner .prijzen, .productCarrousselHolder .artikel .inner .meerinfo {text-align: center; margin: 15px 0;}
.mijnAccount {padding: 7px 10px; border-bottom: 1px solid #E2E2E2;}
.mijnAccount a {text-decoration: none; color: #777;}
.winkelmandjeKnoppen {display: inline-block;}
.speedSearch.artikelen {width: 50%; float: left; border-right: 1px dashed var(--borderColor1); box-sizing: border-box;}
.speedSearch.categorie {width: 50%; float: right;}
.speedSearch.artikelen ul {max-height: 500px; overflow: auto;}
.speedSearch ul li .thumbnail {float: right; height: 50px; width: 50px; margin-left: 10px; text-align: center; overflow: hidden; background: #fff; position: relative; padding: 7px; border-radius: 3px;}
.speedSearch ul li .thumbnail img {width: 50px; height: auto; border-radius: 5px; position: absolute; bottom: -50%; top: -50%; margin: auto; left: -50%; right: -50%;}
.speedSearch ul li .artikelNr, .speedSearch .categorie {line-height: 1.5em;}
.speedSearch .resultaat .aantal {font-size: 24px; display: inline-block; margin: 0 3px 0 0; color: inherit;}
.filters {display: block; position: relative; margin: 10px 0; clear: both; border: none;}
.filters .kenmerkgroep {margin-bottom: 5px; margin-right: 5px; display: inline-block; border-top: none;}
.filters .kenmerkgroep:last-child {margin-right: 0;}
.filters .kenmerkgroep a.titel {padding: 8px 14px; min-width: 155px; color: var(--color2); font-weight: normal; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; transition: all .2s ease; position: relative; cursor: pointer; font-size: inherit; line-height: inherit; margin: 0;}
.filters .kenmerkgroep a.titel::before {content: "\f107"; font-family: "Font Awesome 5 Pro"; padding-left: 10px; text-decoration: none !important; float: right; font-weight: normal; color: #aaa; position: relative; top: -1px; transition: all .3s ease;}
.filters .kenmerkgroep a.titel img {position: relative; top: 3px; margin-right: 3px; opacity: .5;}
.filters .kenmerkgroep .kenmerken {max-height: 0; transition: all .2s ease; padding-left: 14px; padding-right: 14px; background: #fff; position: absolute; width: 200px; box-shadow: 0 1px 5px rgba(0,0,0,.0); z-index: 10; border-radius: 5px; opacity: 1;}
.filters .kenmerkgroep:hover .titel {z-index: 6;}
.filters .kenmerkgroep:hover a.titel::before {color: #555; top: 1px;}
.filters .kenmerkgroep:hover .kenmerken {max-height: none; padding-top: 14px; padding-bottom: 14px; border-top: 0; box-shadow: 0 3px 13px rgba(0,0,0,.2); z-index: 50;}
.filters .kenmerkgroep .kenmerken .kenmerk {padding: 2px; cursor: pointer; border-radius: 0; margin: 0;}
.filters .filterCheck label .aantal {background-color: #eee; border-radius: 10px; display: inline-block; font-weight: bold; min-width: 10px; padding: 3px 6px; text-align: center; vertical-align: baseline; position: absolute; right: 0; top: 4px;}
.filters .toelichting {float: left; margin: 0 0 0 5px; color: inherit; display: block; font-size: inherit; font-weight: normal;}
.filters .beschikbaar {float: left; margin: 0 0 0 20px; position: relative; top: 2px; color: inherit; font-size: inherit; font-weight: normal;}
.filters a.wButFilter {position: relative; float: right; font-weight: bold; padding: 5px 10px; border-radius: 3px; border: 0 solid #ccc; box-shadow: 0 1px 5px rgba(0,0,0,.0); transition: all .2s ease; margin: 5px; text-decoration: none; background: #537cb4; color: #fff;}
.filters a.wButFilter:hover {box-shadow: 0 1px 5px rgba(0,0,0,.3);}
.filters a.wButFilter:active {top: 1px; box-shadow: inset 0 1px 5px rgba(0,0,0,.3);}
.filters .glow {animation: glow 0.4s alternate; animation-iteration-count: 2; -webkit-animation: glow 0.4s alternate; -webkit-animation-iteration-count: 2;}
.filters #actieveKenmerken {clear: both;}
.filters .actieveKenmerkenLijst {padding-left: 5px; padding-right: 5px;}
.filters .actiefKenmerk {background-color: #fff; padding: 3px 8px; float: left; margin-top: 5px; margin-right: 10px;}
.filters .kenmerkAfbeelding {position: relative; top: 3px; margin-right: 3px; cursor: pointer;}
.kenmerkArt {border-bottom-color: #E8E8E8; font-size: 13px; color: #777777; display: block;}
.artikelnrKenmerk {padding: 5px 0; width: 100%; box-sizing: border-box; transition: all .3s ease; border-bottom: 1px solid #E8E8E8; font-size: 13px; color: #777777;}
.kenmerkArt:last-child, .artikel.kassaArtikel:last-child td {border-bottom: 0;}
.kenmerkArt .groep {color: #777; display: inline-block; float: left; width: 300px; clear: both; margin: 0 0 1px; min-width: 0;}
.artikelnrKenmerk .titel {color: #777; display: inline-block; float: left; padding-right: 10px; width: 300px; clear: both; margin: 0 0 1px;}
.kenmerkArt .kenmerk {height: 1.65em; overflow: hidden;}
.kenmerkArt .toevoeging {margin-left: .3em;}
.kenmerkArt .toevoeging:after {margin-right: 0.3em;}
.filtersLinks .kenmerkgroep {display: block; float: none;}
.filtersLinks .kenmerkgroep .kenmerken {border-radius: 0 0 5px 5px; max-width: 400px; width: 168px;}
.prijsFilterHolder .prijsfilterKnop, .prijsFilterHolder .noUi-target .noUi-base .noUi-connect {background-color: #365376;}
.dropdown .keuze {color: var(--color1); display: block; background-color: #eee; padding: 6px 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;}
.dropdown .keuze:before {content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: bold; float: right; transition: all .3s ease; margin-left: 5px;}
.dropdown:hover .keuze {border-radius: 3px 3px 0 0;}
.dropdown ul {top: 100%; background-color: #fff;}
.dropdown ul li.variatietitel {padding: 4px 12px; font-weight: bold; background-color: #eee;}
.dropdown ul li.active a {background-color: var(--color1); color: #fff;}
.leverdagSelectie .dropdown ul li a:hover {border-color: var(--color1);}
.leverdagSelectie .dropdown ul li.active a {border-color: var(--color1); color: var(--color1);}
.schermWinkelMandje.meebestellenActief .melding .shopTegel .artikel {display: block; float: left; position: relative; width: 33.3333%;}
#extraSchermWinkelmand .schermWinkelMandje .artikel {box-shadow: none !important; margin: 0; border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor var(--borderColor1); border-radius: 0;}
.formuleHolder .titel {font-weight: bold; background: #ddd; padding: 10px 15px;}
table.lijst .bedrag {text-align: right; padding-right: 30px; font-weight: bold;}
.artikelBestandGeupload .bestandenUpload ul {margin: 0 0 10px; padding: 0; list-style: none;}
.artikelBestandGeupload .bestandenUpload ul li {background: #fff; line-height: 1; display: inline-block; padding: 7px; margin: 5px 5px 0 0; border-radius: 3px; border: 1px solid #ddd;}
.artikelBestandGeupload .bestandenUpload ul li::before {content: "\f1c5"; font-family: "Font Awesome 5 Pro"; margin-right: 5px;}
.haparko-promo .regel.totaal span {border-top: 1px solid rgba(255,255,255,.2); font-weight: bold; padding: 5px 0 25px; color: #ddd;}
.artikel.detail .blg1 img {max-width: 24px; margin-right: 20px; vertical-align: middle; margin-bottom: 10px;}
.blader_holder {margin-top: 10px; border-top: none; padding: 0;}
.blader_tabel1 {box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); width: auto;}
.blader_tabel1 tr td {line-height: 1.25em; background: #FFF; padding-right: 0; padding-left: 0; border-width: 1px 1px 1px 0; border-style: solid solid solid none; border-color: #eaeaea #eaeaea #eaeaea currentcolor; width: 1.75em; height: 1.75em; font-size: 15px; font-weight: bold; text-align: center; transition: all 0.3s ease 0s;}
.blader_tabel1 tr td:hover {background-color: #eaeaea;}
.blader_tabel1 tr td:nth-child(2) {border-left: 1px solid #eaeaea;}
.blader_tabel1_n {border-radius: 0; border: none; font-size: inherit; font-weight: inherit; height: auto; width: auto; background-color: transparent;}
.blader_tabel1 img {width: 12px; vertical-align: middle;}
.Gv3Thumb {background-color: #fff; box-shadow: 0 2px 3px #ccc; display: table-cell; float: left; line-height: 0; margin: 7px; padding: 2px; position: relative; text-align: center;}
.Gv3ThumbImg {background-color: #fff; display: table-cell; vertical-align: middle;}
.Gv3Thumb .desc {font-size: 13px; font-weight: normal; color: #000;}
.Gv3Thumb .desc2 {position: absolute; bottom: 5px; left: 5px; background-color: #f5f5f5; border: 1px solid #ccc; box-shadow: 1px 1px 3px #ccc; padding: 2px 5px;}
.relatieItem {display: table; float: left; height: 200px; margin: 10px 0 0; width: calc(50% - 5px);}
.relatieItem:nth-child(2n+1) {margin: 10px 10px 0 0;}
.relatieItem .afbeelding {display: table-cell; vertical-align: top; width: 100px !important;}
.relatieItem .relinfo {box-sizing: border-box; padding: 0 10px; display: table-cell; vertical-align: top;}
.popupHolder .popup {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); padding: 40px; max-height: 100%; overflow: auto;}
.popupHolder .popup .sluiten {position: absolute; top: 10px; right: 10px; color: #000; padding: 7px; font-size: 18px; border-radius: 50px; background: #eee; height: 32px; width: 32px; line-height: 10px; text-align: center; box-sizing: border-box; cursor: pointer;}
body:has(article > .stap, article > #naw) .art-content {width: 100% !important;}
.kenmerkMobielHouder .filters .filterknop a {box-sizing: content-box; display: block; font-size: inherit; text-align: inherit; width: auto; z-index: auto;}
.blader_tabel1_n:hover {background-attachment: revert; background-color: transparent; background-image: none; background-position-x: revert; background-position-y: revert; background-repeat: revert; background-size: revert; border-color: revert;}
.presentatieWijze a .titel {background: none; border-radius: 0; bottom: auto; box-sizing: content-box; color: inherit; font-size: inherit; left: auto; line-height: inherit; padding: 0; pointer-events: auto; position: static; text-align: left; transform: none; transform-origin: 50% 50%; transition: none; white-space: revert; display: none; opacity: 1;}
.shopSortOptie a.actief {background: none; color: #666 !important;}
.productCarousel .flickity-button:hover {background-color: white;}
.artikel .bestellen .bestelknop a.wButBestel:hover.button {background: #d2d0d0;}
.stap .totalen .stappenKnop a:hover.knop {background-color: #d2d0d0;}
.filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: transparent;}
.presentatieWijze a:last-child {border-right: none;}
.shopCategorieHolder .categorie:hover {box-shadow: none;}
.presentatieWijze a:hover, .shopSortOptie a.actief:hover {color: var(--color2) !important;}
.shopTegel .artikel .bestellen .detailKnop, .couponcodeHouder:empty, .kassaArtikelen .artikel .verwijderKnop:empty, .kenmerkArt .kenmerken .kenmerk .toevoeging:empty, .kenmerkArt .kenmerken .kenmerk, .productCarousel .flickity-slider, .kenmerkArt .kenmerken .kenmerk:last-child::after {display: revert;}
.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: normal; color: var(--color1); text-decoration: underline;}
.presentatieWijze a:hover .titel {opacity: revert;}
.blader_tabel1 td, .kassaArtikelen .artikel td.aantallen {vertical-align: middle;}
.artikel .bestellen .bestelknop a.wButBestel {background-attachment: scroll; background-image: none; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto;}
table .blader_tabel1_n a {color: #737373;}
.shopSortOptie a.actief:link, .shopSortOptie a.actief:visited {color: #666 !important;}
.couponcodeHouder {background: none; border-radius: 0; margin-bottom: 0; min-height: auto; padding: 0;}
.stap .blokholder {background: none; border-radius: 0; padding: 0;}
.stap.twee .links>div {background: none; box-sizing: content-box; margin: 0; width: auto;}
.kassainkollommen > .rechts .blok {background-color: #FFF; border-radius: 5px; min-height: revert; padding: 0;}
.kenmerkMobielHouder .filters .filterknop a.wButFilter {background-color: #537cb4; margin: 5px; padding-bottom: 5px; padding-top: 5px; transition: all .2s ease;}
.productCarousel .flickity-button {background-color: hsla(0, 0%, 100%, 0.75); opacity: 0;}
.artikel .bestellen .bestelknop a.wButBestel.button {background-color: #E2E2E2; color: var(--fontColor1); line-height: 1.85em;}
.stap .totalen .stappenKnop a.knop {background-color: #E2E2E2; color: var(--fontColor1);}
.artikel .aantalMinPlus > input[type="number"] {background-color: #fff; border-bottom: 1px solid #c4c4c4; border-radius: 5px !important; border-top: 1px solid #c4c4c4; color: #666; line-height: 1.5em;}
.kassaArtikelen .artikel:last-child td {border-bottom: none;}
.kenmerkMobielHouder.standaard .filters {border: none; border-radius: 0; box-sizing: content-box; display: block; overflow: visible; padding: 0; transition: none;}
.shopSortOptie {border: none; margin-left: 0; margin-right: 0; margin-top: 0;}
.filters .actieveKenmerken {border-top: none; box-sizing: content-box; color: inherit; display: block; line-height: inherit; padding: 0;}
.filters .kenmerkgroep:first-child {border-top: none;}
.artikel .relatieBtwPrijs {color: #aaa; font-size: 11px; line-height: 1.25em;}
.artikel .artikelnr {color: inherit; font-size: inherit;}
.filters .kenmerkgroep .kenmerken label .aantal {color: inherit; float: none; font-size: 11px; margin-top: 0;}
.kenmerkArt .kenmerken .kenmerk .toevoeging {color: inherit;}
.shopTegel .artikel .inner .rechtsboven {display: block; line-height: inherit; position: static; right: auto; top: auto;}
.stap.twee .links {flex-wrap: nowrap; margin: 0;}
.kassainkollommen > .links, .kenmerkMobielHouder .filters .filterBovenkant .toelichting {flex: revert;}
.productCarousel .flickity-button.flickity-prev-next-button {height: 44px; width: 44px;}
.kassaArtikelen .artikel .tekst {hyphens: inherit; vertical-align: middle;}
.productCarousel .flickity-button.previous.flickity-prev-next-button {left: 10px;}
.kassaArtikelen .artikel {line-height: inherit;}
.filters .kenmerkgroep ul.kenmerken {margin-left: 0; margin-right: 0;}
.kassainkollommen > .rechts {margin-left: 0; width: auto;}
.productCarousel .flickity-page-dots {margin-top: 0; position: absolute;}
.kassaArtikelen .artikel .tekst .meerinfo {margin-top: 0;}
.artikel .labels .label img {max-width: 100%;}
.productCarousel.flickity-resize .artikel {min-height: 0;}
.artikel .afbeeldingHouder img, .volledigGallery .carousel-cell-groot img {object-fit: fill;}
.filters .kenmerkgroep .kenmerken label {overflow: visible; padding: 0;}
.kassaArtikelen .artikel .aantalMinPlus > input[type="number"] {padding: 8px 10px;}
.kassaArtikelen .artikel td {padding-bottom: 0; padding-left: 0; padding-top: 0;}
.artikel.kassaArtikel td {padding-bottom: 10px; padding-top: 10px;}
.productCarousel .flickity-button.next.flickity-prev-next-button {right: 10px;}
.kassaArtikelen .artikel td.regelStuk {text-align: center; vertical-align: middle; white-space: revert;}
.kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder {text-align: inherit; vertical-align: middle;}
.kassaArtikelen .artikel td.regelTotaal {vertical-align: middle; white-space: revert;}
.stap .totalen .gewicht, .stap .totalen .totaalGewicht {white-space: revert;}
.artikel.detail .rechts .bestellen .bestelknop input {width: 40px !important;}
.kenmerkArt .kenmerken .kenmerk .toevoeging::after {content: " ";}
.filters .kenmerkgroep .kenmerken label .aantal::after, .filters .kenmerkgroep .kenmerken label .aantal::before, .kenmerkArt .kenmerken .kenmerk .toevoeging::before {content: none;}
.kenmerkArt .kenmerken .kenmerk::after {content: none; margin-right: 0;}
.presentatieWijze a .titel::before {background: none; background-clip: border-box; background-origin: padding-box; bottom: auto; content: none; height: auto; left: auto; margin: 0; position: static; right: auto; transform: none; width: auto; z-index: auto;}
.artikel.detail .bestellen .bestelknop a.wButBestel:hover.button {background-color: #e80000;}
.artikel.detail .bestellen .bestelknop a.wButBestel {color: #fff; background-color: #fd0000;}
.artikel.kassaArtikel .tekst a.kassaArtikelTitel {color: #000; text-decoration: none;}
.artikel.kassaArtikel .tekst {hyphens: auto; vertical-align: middle;}
.artikel.kassaArtikel .tekst .opmerkingHolder {margin: 5px 0;}
.artikel.kassaArtikel .kassaArtikelAfbeeldingHolder {text-align: center; vertical-align: middle;}
.artikel.kassaArtikel td.regelTotaal {white-space: nowrap;}
.artikel.kassaArtikel td.aantallen {padding-right: 10px;}

/* footer */
.pageFooter h2, .sitemap1ul a {color: var(--fontColor1);}
.copyright {text-align: center; margin: 0 5px;}
.pageFooterHolder .Taalkeuze_vlaggen {display: none; left: auto; position: relative; right: auto; text-align: center;}
.pageFooterHolder {background-color: #FFF; border-top: 1px solid #E8E8E8; z-index: 1;}
.pageFooterHolder .pageFooter {color: #000; padding-left: 80px; padding-right: 80px; position: relative; font-size: 13px; max-width: none;}
.pageFooter .h2, .pageFooter h3 {color: var(--fontColor1); font-size: 18px;}
.pageFooterHolder .pageFooter a {color: inherit; text-decoration: none; transition: none;}
.pageFooterHolder .pageFooter a:hover {opacity: .6; text-decoration: underline;}
.pageFooterKnoppenHolder {background-color: #FFF; border-top: 1px solid #E2E2E2; z-index: 1;}
.pageFooterKnoppenHolder .pageFooterKnoppen {color: #777777; position: relative; max-width: 1200px; padding: 10px 20px; text-align: center; display: block; line-height: inherit;}
.pageFooterKnoppenHolder .pageFooterKnoppen a {color: #777777 !important; margin: 0 5px;}
.sitemap1 {margin: 40px 0; background: #FFF; border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); display: block; padding: 30px; box-sizing: border-box;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1;}

/* overig */
.algemeneZoekResultaat ul li, .speedSearch {padding: 0;}
.klantoordeel > a, .speedSearch ul li a	strong {text-decoration: underline;}
.lijst.downloads tr th:first-child, .lijst.downloads tr th:nth-child(2) {width: 33.33%;}
.postPlaats .plaats:only-child {width: 70%;}
.straat .straatnaam:only-child {margin-right: 10px; width: 70%;}
#vwShow.ingeklapt, #extraSchermWinkelmand .schermWinkelMandje .tweedeRijUit {display: none;}
.productCarousel {flex-wrap: unset; max-width: calc(100% - 40px);}
.affiliateRow {width: 100%; border-spacing: 0; border-collapse: collapse; padding: 0;}
.affiliateRow tr:hover td {background-color: #fcfcfc;}
.affiliateTotaal {text-align: right; padding-right: 15px !important;}
.mijnOrders {padding: 7px 10px; border-bottom: 1px solid #E2E2E2;}
.mijnOrders a {text-decoration: none; color: #777;}
.speedSearch ul {z-index: 100;}
.speedSearch > ul > li {color: #383838; position: relative; border-radius: 5px;}
.speedSearch > ul > li a {color: inherit; transition: all .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.speedSearch > ul > li:hover {background-color: #f7f7f7;}
.speedSearch ul li .omschrijving {font-size: 15px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.speedSearch .resultaat {color: var(--fontColor1); font-size: 17px; margin: 0; position: relative;}
.EANnummer {padding: 5px 0; width: 100%; box-sizing: border-box; transition: all .3s ease; border-bottom: 1px solid #E8E8E8; font-size: 13px; color: #777777;}
.EANnummer:hover {background-color: #eee;}
.EANnummer .toelichting {color: #777; display: inline-block; float: left; padding-right: 10px; width: 300px; clear: both; margin: 0 0 1px;}
#extraSchermWinkelmand .schermWinkelMandje .melding {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); max-width: 520px; min-width: 250px; overflow-y: scroll;}
#extraSchermWinkelmand .schermWinkelMandje .melding .icoon {background-color: #64a43a; border-radius: 50px; color: #fff; display: block; font-size: 13px; left: -10px; padding: 5px; position: absolute; top: -10px; border: 1px solid #fff;}
#extraSchermWinkelmand .schermWinkelMandje .melding .afbeeldingHouder {line-height: 0; margin-right: 20px; position: relative;}
.shareKnoppen a.deelKnopje {padding: 8px; line-height: 1;}
.lijst tr.inactief td a {color: #aaa;}
.haparko-promo {padding: 25px; border-radius: 3px; background: #ffffff; display: table; margin: 20px 0;}
.haparko-promo .regel {display: table-row; line-height: 1.25em;}
.haparko-promo .regel span {padding: 6px 0; display: table-cell;}
.haparko-promo .regel .valuta {display: inline; border: 0 !important;}
#tabBijlagenInhoud {padding: 10px 20px;}
#Bijlagen .blgT .blg1 a img {width: 30px; margin-right: 20px; margin-top: 5px;}
.nietMeerVerplicht {background-color: #fff;}
.slideshowBorder {border-color: #ccc !important;}
.faqHolder.actief .titel a {color: var(--color1);}
.ratingStar {font-weight: bold;}
.nieuws .bericht .titel a, .nieuws.widget .bericht .nieuwstitel a {font-family: var(--fontFamily1);}
.nieuws.lijst .bericht .nieuwsboven {border-left-color: var(--color1);}
.nieuwWachtwoordHolder {border-radius: 5px; max-width: 400px; margin-top: 40px; background: #FFFFFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);}
.nieuwWachtwoordHolder .nieuwWachtwoordBeschrijving {padding-bottom: 0;}
.nieuwWachtwoordHolder .nieuwWachtwoordContent {border-radius: 5px 5px 0 0;}
.inschrijvenKolom {display: block;}
.inschrijvenKolom > .rechts {margin-left: auto;}
#inschijfformulier_holder {max-width: 1000px; margin: 20px auto;}
.aLandingMenu {background-position-x: 4px; background-position-y: 4px; border-radius: 5px 5px 0 0; height: 24px; padding: 0; position: absolute; top: 2px; width: 24px; z-index: 20; left: 97px;}
.aLandingMenu:hover {background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3);}
.LandingMenu {box-shadow: 0 2px 4px rgba(0, 0, 0, .3); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; top: 24px;}
.LandingMenu  li {padding: 3px 8px;}
.LandingMenu  li a {color: #000;}
.LandingMenu  li a:visited, .LandingMenu  li a:hover {text-decoration: none; font-size: 11px; color: #000;}
.meldingHouder .melding {border-radius: 5px; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);}
.meldingHouder .melding .icoon {margin: 0 0 10px;}
.shareKnoppen {margin-bottom: 0; margin-top: 0; padding: 0;}
.shareKnoppen .deelKnopje {margin: 0 10px 0 0;}
.shareKnoppen .deelKnopje a {color: #D8D8D8; position: relative; padding: 0; display: block;}
.shareKnoppen .deelKnopje a .icoon {font-size: 21px; margin-top: 10px;}
.shareKnoppen .deelKnopje a:hover .icoon {color: #030330;}
.shareKnoppen .deelKnopje a .titel {background: #030330; border-radius: 3px; top: 120%; color: #fff; line-height: 1.25em; white-space: nowrap; padding: 5px 9px; position: absolute; transition: .3s all ease; left: 50%; font-size: 11px; transform: translateX(-50%); opacity: 0; pointer-events: none; font-weight: bold;}
.shareKnoppen .deelKnopje a .titel::before {border-width: 0 6px 6px; border-style: solid; border-color: #030330 transparent; top: -4px; content: ""; position: absolute; transition: .3s all ease; left: 50%; transform: translateX(-50%);}
.shareKnoppen .deelKnopje a:hover .titel {opacity: 1; pointer-events: all;}
.privacyMelding {box-shadow: 0 0 60px 5px rgba(0, 0, 0, 0.2);}
.intro {display: flex; padding: 40px 40px 0; background: #F0F1F5;}
.intro .picHolder {flex: 2.5; border-radius: 5px; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); margin-right: 50px; position: relative; background: #FFF; z-index: 1; overflow: hidden;}
.intro .picHolder .tekst {padding: 130px; box-sizing: border-box; float: left; display: inline-block; width: 60%;}
.intro .catHolder {flex: 1; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; background: #FFF; z-index: 1; height: 100%;}
.serviceHolder .serviceBlok {background: #FFF; box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10); border-radius: 5px; padding: 55px; font-size: 13px; box-sizing: border-box;}
.serviceHolder .serviceBlok em {font-size: 45px; color: #14153A;}
.uspHolder {flex: 3; display: flex;}
#map-canvas {border-radius: 5px;}
.openklapper {width: 39px; background-image: url("images/res_plus.svg"); background-repeat: no-repeat; background-attachment: scroll; background-position-x: center; background-position-y: center; background-size: 50%; box-sizing: content-box; color: inherit; display: block; padding: 0; text-align: inherit; text-decoration: revert;}
.openklapper.open {background-image: url("images/res_min.svg"); background-repeat: no-repeat; background-attachment: scroll; background-position-x: center; background-position-y: center; background-size: 50%;}
.resCategorieen ul li, .resCategorieen ul li:last-child {margin-right: 10px;}
.resCategorieen ul li a {border-color: var(--borderColor1); border-width: 2px;}
.resCategorieen ul li.actief a {background-color: #eee; border-color: #ddd;}
.openklapper::before {content: none; display: inline; font-family: inherit; position: static;}
.openklapper.open::before {transform: none;}

/* volgorde */
.shopNavigatie .button:hover {background-image: unset; background-position-x: unset; background-position-y: unset; background-size: unset; background-repeat: unset; background-attachment: unset; background-color: unset; border: none; opacity: .5; color: unset;}
.blader_tabel1_s {border-radius: 0; background-color: var(--color2); border: none; font-size: inherit; font-weight: inherit; height: auto; width: auto;}

@media (min-width: 681px) {
  .winkelwagenHouder .artikel .kassaArtikelAfbeeldingHolder {width: auto;}
  .shopSortOptie > * {margin: 0;}
  .shopSortOptie > .pdfKnop {margin-bottom: 0; margin-right: 0; margin-top: 0;}
}

@media (min-width: 1001px) {
  .art-Sheet {padding: 0;}
  .shopCategorieHolder .categorie {border-bottom: none; border-right: none; box-sizing: content-box;}
  .kassainkollommen > .rechts .blok {margin-bottom: 40px;}
  .artikel.kassaArtikel .kassaArtikelAfbeeldingHolder {width: 100px; padding-right: 20px;}
}

@media screen and (max-width: 1500px) {
  .zoeken .veld #zoekWoordID {width: 250px;}
  .vak .inhoud {padding: 50px 20px;}
  .shopCategorieHolder .categorie, .shopTegel .artikel {width: 25%;}
  .intro .picHolder .tekst {padding: 100px;}
}

@media screen and (max-width: 1300px) {
  .zoeken .veld #zoekWoordID {width: 140px;}
  .shopCategorieHolder .categorie, .shopTegel .artikel {width: 33.33%;}
}

@media (min-width: 1001px) and (max-width: 1250px) {
  .kassaArtikelen .artikel td.regelStuk, .kassaArtikelen th.regelStuk {display: table-cell;}
}

@media screen and (max-width: 1200px) {
  .art-menu li a .t {margin-right: 10px; margin-left: 10px; font-size: 14px;}
  .bovenkant .art-nav {left: 230px;}
  .intro .picHolder .inhoud .afbeelding {display: none;}
  .intro .picHolder .tekst {width: 100%; padding: 134px;}
}

@media screen and (max-width: 1100px) {
  .bovenkant .art-nav {left: 201px;}
}

@media screen and (max-width: 1000px) {
  body {-webkit-text-size-adjust: none; -moz-text-size-adjust: none;}
  li.STPMenu1li {border: 0;}
  li.STPMenu2li {margin-left: 10px;}
  li.STPMenu3li {margin-left: 20px;}
  li.STPMenu4li {margin-left: 30px;}
  li.STPMenu2li a {font-size: 14px;}
  li.STPMenu3li a {font-size: 13px;}
  table.lijst tr:first-child {display: none;}
  table.lijst tr {display: block; margin: 0 0 10px; background: #fafafa; border-radius: 3px; padding: 10px; border: 1px solid #E2E2E2; position: relative;}
  table.lijst tr td {display: block; width: 100%; box-sizing: border-box; border: none; background: none !important; padding: 0;}
  textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {font-size: 16px;}
  .formulier_text {max-width: 100%;}
  #formulier_holder td textarea, #formulier_holder td input[type="text"], #formulier_holder td input[type="password"], #formulier_holder td input[type="email"], #formulier_holder td input[type="tel"], #formulier_holder td input[type="number"] {display: block;}
  h1, h2, h3, h4, h5, h6 {clear: both;}
  table.lijst td.knoppenHouder {position: absolute; right: 0; top: 0; width: auto; padding: 10px; border-left: 1px solid #E2E2E2;}
  table.lijst td.knoppenHouder a {padding: 8px; display: block;}
  .privacyMelding .knoppen {padding: 20px;}
  .art-sidebar1 {display: none !important;}
  #art-main {min-width: 0; overflow: hidden; padding: 0;}
  .art-Sheet {width: 100% !important; padding: 0;}
  .art-Block {padding-top: 5%; padding-bottom: 5%; padding-left: 5%; margin-left: 0;}
  .art-Block img {max-width: 100%; height: auto !important;}
  .resMenubalk, #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td {display: block;}
  .stap2_bestaandeKlant .inloggen .beschrijving, .stap2_bestaandeKlant .inloggen .invoer {display: block !important; width: 100% !important; padding-top: 0; padding-bottom: 0;}
  .art-nav, .account, .winkelwagenHouder, .bovenkant .zoeken {display: none !important;}
  .bovenkantHolder {min-width: 0;}
  a.logo {width: 170px;}
  .bovenkant {width: 100%;}
  .Taalkeuze_vlaggen {left: auto; width: 100%;}
  .inloggen_holder {display: block; margin-top: 20px; margin-bottom: 20px;}
  .shopTegel .artikel .favorieten, #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td:first-child {display: none;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {padding: 0; width: 100%;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {width: 50%; text-align: center; box-sizing: border-box; float: left; margin: 10px 0 0;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.doorgaanKassa {border-top-right-radius: 0; border-bottom-right-radius: 0;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.verderWinkelen {border-top-left-radius: 0; border-bottom-left-radius: 0;}
  .stap.twee .stap2_bestaandeKlant .inloggen {display: block; width: 100%;}
  .blokholder.accountWijzigen .beschrijving {display: block; width: auto; padding: 0; font-weight: bold;}
  .blokholder.accountWijzigen .invoer {display: block; width: auto; padding: 0 0 10px;}
  .usps {max-width: 760px; display: none !important;}
  .stap.vier .gegevens {padding: 10px;}
  .stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {width: 100%; display: block; margin-top: 10px;}
  .stap.vier .factuurAfleverHouder .midden {display: none;}
  .FCK2kolTd {float: none; width: 100%;}
  .FCK2kolTdS {display: none !important;}
  .liquid-slide-sjabloon .inhoud {position: relative; max-width: none; left: 0; top: 0; font-size: 13px; padding: 5px 15px;}
  .liquid-slide-sjabloon .inhoud h2 {font-size: 16px;}
  .liquid-slide-sjabloon .inhoud p, .art-content .FCK3kolTdS, .art-Sheet .FCK4kolTdS {display: none;}
  .art-content .FCK2kolTd {margin-top: 0; margin-right: 0; margin-left: 0;}
  .art-content .FCK3kolTd {margin-top: 0; margin-right: 0; margin-left: 0; width: 100% !important;}
  .art-Sheet .FCK2kolTd, .art-Sheet .FCK3kolTd {display: block; margin-bottom: 15px;}
  .art-Sheet .FCK4kolTd {width: 100%; display: block; margin-bottom: 15px;}
  .vak .inhoud {padding: 40px 10px;}
  .privacyMelding .inhoud {padding: 20px;}
  .blok {margin-top: 20px; margin-bottom: 20px;}
  .blok .links {display: block; width: 100%; padding-top: 20%;}
  .blok .rechts {display: block; width: 100%; padding: 30px;}
  .intro .picHolder .inhoud h2 {white-space: normal;}
  .liquid-slide-sjabloon .sliderWrapper {background-color: #000;}
  .stap.een .kassaArtikel .aantallen input {width: 45px;}
  .stap.een .kassaArtikel .aantallen .verwijderen, .shopTegel .artikel .voorraad, .dropdown.dealerHolder .bedrijf, .tabsV2 .titels {display: block;}
  .stap.een .kassaArtikel .kassaArtikelAfbeeldingHolder {width: 60px; padding-right: 10px !important;}
  .stap.een .kassaArtikel .tekst a.kassaArtikelTitel {font-size: 13px; line-height: 1.5em;}
  .stap.een .kassaArtikel .tekst .variatie {min-width: 0;}
  .stappenKnop .button {padding: 11px 20px !important; text-align: center; width: calc(100% - 40px); font-weight: bold; border: 0 !important;}
  .stap2_naw .factuurAfleverHouder h3 a {opacity: 1;}
  .shopLijst .artikel .inner .col1 {width: 85px;}
  .shopCategorieHolder .categorie {width: 50%; border-right-color: #f0f1f5; border-bottom-color: #f0f1f5;}
  .shopTegel .artikel, .shopTegel.volledig .artikel {width: 50%;}
  .shopTegel .artikel .voorraad .image, .shopTegel .artikel .verlang, .shopTegel .artikel .formuleHolder, .shopTegel .artikel .prijsafspraakInLijst, .shopCompact .artikel .inner .col1, .shopCompact .artikel .inner .details, .shopCompact .artikel .artikelEenheid, .shopCompact .artikel .extrainfo, .stappenbalk li .naam, .kassaArtikelen th {display: none;}
  .shopTegel .artikel .omschrijving h2.titel a {height: auto;}
  .shopCompact .artikel .inner {table-layout: auto;}
  .shopCompact .artikel .inner .col3 {width: auto; padding: 0;}
  .artikel.detail .links, .artikel.detail .rechts {float: none; width: 100%; padding: 0;}
  .stappenbalk {text-align: center;}
  .stappenbalk li {margin: 0;}
  .stappenKnop li a {font-size: 14px;}
  .stap .totalen {padding: 10px;}
  .stap.twee > .blokholder, #stap2_factuuruitklap, #stap2_bewaaraccount {float: none !important; width: 100% !important; padding: 0;}
  .stap .blokholder > .content {padding-right: 10px; padding-left: 10px;}
  .stap.twee .stap2_bestaandeKlant .uitleg {display: block; width: 100%;}
  .dropdown.dealerHolder .plaats {float: none;}
  .dropdown.dealerHolder .keuze .km {padding-right: 10px;}
  table.lijst tr td.bedrag {text-align: left; font-weight: bold;}
  .pdfkeuzeholder {border-radius: 0; left: 0; margin: 0; max-width: 100%; padding: 20px 10px 10px; position: absolute; right: 0; top: 64px; width: auto;}
  .pdfkeuzeholder .pdfkeuze .inner .col1, .pdfkeuzeholder .pdfkeuze .inner .col3 {box-sizing: border-box; display: block !important; width: 100% !important;}
  .pdfkeuzeholder .pdfkeuze .inner .col2 {box-sizing: border-box; display: block !important; width: 100% !important; padding: 15px 0;}
  .adresHolder .adressen .item {flex-basis: 100%; margin: 0 0 5px;}
  .adresHolder .adressen .item.open {position: relative; left: auto; top: auto; right: auto; padding: 10px 15px; box-shadow: none;}
  .tabsV2 .titels > div {display: inline-block; float: left; width: calc(50% - 10px); box-sizing: border-box; border-radius: 3px; border: 0; margin: 5px;}
  .tabsV2 .titels > div.actief {border: 0; background: var(--color1); color: #FFF;}
  .tabsV2 .inhoud {top: 5px;}
  .artikel.detail .artikelBoven {margin-top: 20px;}
  .artikel.detail .links .inhoud, .artikel.detail .rechts .inhoud {padding: 30px;}
  .shopCategorieHolder {margin-top: 10px;}
  .shopCategorieHolder .categorie .inner {padding: 10px; margin: 0; border-radius: 0; box-shadow: none !important;}
  .shopTegel {padding: 0 5px;}
  .shopTegel .artikel .inner {margin: 5px;}
  .detailOrderHolder {flex-direction: column;}
  .detailOrderHolder .detailOrderBlok {width: calc(100% - 20px);}
  .detailOrderHolder .detailOrderBlok table.lijst tr {background-image: unset; background-position-x: unset; background-position-y: unset; background-size: unset; background-repeat: unset; background-attachment: unset; background-origin: unset; background-clip: unset; background-color: unset; border: 0; padding: 5px; margin: 0;}
  .detailOrderHolder .detailOrderBlok table.lijst tr td {display: table-cell; border-bottom: 1px solid var(--borderColor1);}
  .pageFooterHolder {overflow: hidden;}
  .pageFooter .FCK2kolTd, .pageFooter .FCK3kolTd, .pageFooter .FCK4kolTd {width: 100%; display: block; margin-bottom: 15px;}
  .pageFooter .FCK2kolTdS, .pageFooter .FCK3kolTdS, .pageFooter .FCK4kolTdS {display: none;}
  .copyright {top: auto; left: auto; right: auto; display: block;}
  .pageFooterKnoppenHolder .pageFooterKnoppen {padding-right: 10px; padding-left: 10px;}
  .pageFooterHolder .pageFooter {padding: 20px;}
  .sitemap1 .sitemap1ul a {text-decoration: none;}
  .sitemap1 .sitemap1ul li {display: block; float: none; width: auto;}
  ul.sitemap1ul ul {margin: 0;}
  #cookieHolder .cookie {width: calc(100% - 40px); max-width: 100%; border-radius: 0; left: auto; right: auto; bottom: 0;}
  .aLandingMenu {display: none !important;}
  #map-canvas, iframe {width: 100% !important; max-width: 100%;}
  #formulier_holder table {width: 100%; max-width: 100%;}
  #formulier_holder td {display: block;}
  .HeaderHolder {width: 100%;}
  .HeaderHolder .slideshowHolder, .HeaderHolder .slideshowHolder div {width: 100% !important;}
  .HeaderHolder .slideshowHolder div img {width: 100% !important; max-width: 100%; height: auto !important;}
  #barcodeScannerCamera video {width: 100%; height: auto;}
  .privacyMelding {left: 0; max-width: 100%; bottom: 0; border-radius: 0;}
  .intro {display: block; padding-top: 20px; padding-right: 20px; padding-left: 20px;}
  .intro .catHolder {flex: unset; display: block; width: 100%; margin-top: 20px;}
  .intro .picHolder {display: block; flex: unset; width: 100%;}
  .serviceHolder .serviceBlok {padding: 20px;}
  .intro .picHolder .tekst {padding: 30px;}
}

@media (max-width: 900px) {
  select {font-size: inherit;}
  .bovenkantHolder .bovenkant .resMenubalkinhoud {display: block;}
  .bovenkantHolder .winkelmenu {overflow: visible; white-space: revert;}
  .bovenkantHolder {position: relative; top: auto;}
  #speedsearchResult {right: 0;}
  .vak {padding: 0;}
  .stap.twee .resBestaandeklant .button {display: inline-block; text-align: inherit;}
  .kassainkollommen > .rechts .blok, .stap .blokholder {margin-bottom: 20px;}
  .kassainkollommen > .rechts {margin-bottom: 0; margin-right: 0; margin-top: 0;}
  .resCategorieen {display: none;}
  .inschrijvenKolom {flex-direction: row;}
  .inschrijvenKolom .rechts {width: 450px;}
}

@media screen and (max-width: 900px) {
  .privacyMelding .knoppen {padding: 30px;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {padding: 15px; width: 135px;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {box-sizing: border-box; margin: 5px; text-align: center; width: 100%;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.doorgaanKassa {border-bottom-right-radius: 3px; border-top-right-radius: 3px;}
  #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.verderWinkelen {border-bottom-left-radius: 3px; border-top-left-radius: 3px;}
  .extrabovenkantHolder .extrabovenkant .valuta {margin-right: 0.25em; position: relative;}
  .liquid-slide-sjabloon .inhoud {font-size: 15px; left: 70px; max-width: 400px; padding: 10px 20px; position: absolute; top: 25%;}
  .liquid-slide-sjabloon .inhoud h2 {font-size: 36px; margin: 0 0 .5em;}
  .liquid-slide-sjabloon .inhoud p:last-child {margin: 0 0 1em;}
  .privacyMelding .inhoud {padding: 30px;}
  .vak .inhoud {padding: 50px 20px;}
  .adresHolder .adressen .item {flex-basis: calc(33.333% - 10px); margin: 0 10px 10px 0;}
  .adresHolder .adressen .item.open {box-shadow: 0 0 50px -8px rgba(0,0,0,.25); left: 20px; padding: 35px; position: absolute; right: 20px;}
  .artikel.detail .detailinkollommen .links {width: 50%;}
  .artikel.detail .detailinkollommen .rechts {width: 45%;}
  .detailOrderHolder .detailOrderBlok {width: calc(50% - 20px);}
  .detailOrderHolder .detailOrderBlok table.lijst tr td {border-bottom: 1px solid var(--borderColor1);}
  .pdfkeuzeholder .pdfkeuze .inner .col1 {display: table-cell; width: 90px;}
  .pdfkeuzeholder .pdfkeuze .inner .col2 {display: table-cell; padding: 0 15px; width: auto;}
  .pdfkeuzeholder .pdfkeuze .inner .col3 {display: table-cell; width: 125px;}
  .shopCompact .artikel .prijzen {margin-right: 0;}
  .shopCompact .artikel h2.titel, .shopCompact .artikel h2.titel a {font-size: 14px;}
  #cookieHolder .cookie {border-radius: 3px; bottom: 20px; left: -50%; max-width: 400px; right: -50%;}
  #map-canvas {width: 100%;}
  .privacyMelding {border-radius: 3px; bottom: 20px; left: 20px; max-width: 370px;}
}

@media screen and (max-width: 760px) {
  div[class*="grid"] {grid-template-columns: 1fr;}
  .filters .kenmerkgroep {display: block; margin-right: 0;}
  .mijnAccountOrderHolder .item {flex-direction: column;}
  .mijnAccountOrderHolder .item .artikelen {display: flex; width: auto; margin: -5px 0 0; padding: 0 10px 10px;}
  .mijnAccountOrderHolder .item .pijl {display: none;}
  .artikel.detail .links .inhoud, .artikel.detail .rechts .inhoud {padding: 20px;}
  .artikel.detail .artikelBoven {margin-top: 10px;}
  .productCarrousel li {width: 250px;}
}

@media (max-width: 680px) {
  .shopSortOptie > * select, .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder {width: auto;}
  .shopLijst .artikel:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);}
  .shopLijst .artikel {margin: 0 0 10px;}
  .shopSortOptie > .pdfKnop a.button {display: inline-block;}
  .artikel .artikelnr > .titel {display: inline;}
  .shopLijst {margin: 0;}
  .shopSortOptie > * {margin: 0 !important; width: auto;}
  .shopLijst .artikel .omschrijving {text-align: inherit !important; width: auto;}
  .shopLijst .artikel .prijzen {text-align: inherit !important;}
  .pageFooterKnoppenHolder .pageFooterKnoppen {flex-direction: row;}
}

@media screen and (max-width: 680px) {
  #extraSchermWinkelmand .schermWinkelMandje .shopTegel {margin: 0 -10px;}
  .mijnAccountOrderHolder .item .artikelen {display: inline-flex; margin: auto 0 auto auto; padding: 10px; width: 330px;}
  .mijnAccountOrderHolder .item .pijl {display: flex;}
  #extraSchermWinkelmand .schermWinkelMandje .melding {min-width: 250px;}
}

@media screen and (max-width: 560px) {
  .productCarrousel li {width: 200px;}
}

@media screen and (max-width: 500px) {
  .variatieKeuzePopup input[type="text"], .variatieKeuzePopup textarea {font-size: inherit;}
}

/* handwerk - bron: --migratie/hand.css */
/* kolommen: de oude index.tpl gaf de zijbalk inline 21% */
.art-Sheet {display: flex; align-items: flex-start; z-index: 1;}
.art-Sheet .art-sidebar1 {flex: none; width: 21%;}
.art-Sheet .art-content {flex: 1; min-width: 0;}

/* rode driehoek linksboven, direct onder de header (stond op .siteHolder) */
.bovenkantHolder::after {content: ""; position: absolute; top: 100%; left: 0; z-index: 1; width: 0; height: 0; border-top: 600px solid var(--color1); border-right: 600px solid transparent; pointer-events: none;}

@media (max-width: 1000px) {
  .bovenkantHolder::after {border-top-width: 300px; border-right-width: 300px;}
}

@media (max-width: 900px) {
  .art-Sheet {display: block;}
}

/* tegels: de oude tegel had geen artikelnummer, groepsprijs en detailknop */
.shopTegel .artikel .artikelnr, .shopTegel .artikel .artikelGroepPrijs, .shopTegel .artikel .inner > .bestellen {display: none;}
/* de tekst zat in een .inhoud met 30px rondom */
.shopTegel .artikel .inner > .omschrijving {padding: 30px 30px 0;}
.shopTegel .artikel .inner > .meerinfo, .shopTegel .artikel .inner > .prijzen {padding: 0 30px;}
.shopTegel .artikel .inner > .prijzen {margin-bottom: 40px;}
/* in de flexkolom vallen de marges van het lege .meerinfo niet meer samen */
.shopTegel .artikel .inner > .meerinfo {margin-bottom: 0;}

/* mobiel: de oude mobiele balk (responsive_cmshop.tpl) staat in .bovenkant; de rest van de header verborgen, taalbalk eronder */
@media (max-width: 1000px) {
  body .bovenkantHolder {display: block !important; padding-bottom: 40px;}
  .bovenkantHolder .bovenkant {height: auto; padding: 0; margin: 0;}
  .bovenkant > a.logo, .bovenkantHolder .bovenkant > .zoekenHolder, .bovenkantHolder .winkelmenuHolder {display: none;}
  .extrabovenkantHolder {position: absolute; top: 100px; left: 0; right: 0; z-index: 2;}
}

/* zijbalk: de witte kaart zat op .art-BlockContent, die de standaard niet heeft */
.art-sidebar1 .art-Block {padding-right: 0; margin-right: 20px; background-color: #fff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .1); border-radius: 5px;}
.art-sidebar1 .art-Block > .h2 {position: relative; margin: 0; padding: 10px 18px; font-size: 23px;}
.art-sidebar1 .art-Block > .h2::before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: #e2e2e2;}

/* sorteerbalk: de oude was een tabel in een witte kaart */
.shopHolder > .shopSortOptie {display: flex; align-items: center; margin-bottom: 10px; padding: 10px 20px; background-color: #fff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .1); border-radius: 5px; text-align: left;}
.shopHolder > .shopSortOptie .aantalPerPagina {flex: none; width: 25.8%;}
.shopHolder > .shopSortOptie .presentatieWijze {margin-right: auto;}
.shopHolder > .shopSortOptie .pdfKnop {margin-left: 5px;}
/* de oude site had geen aparte filterknop voor mobiel; de filterrij bleef staan */
.kenmerkMobielHouder {display: none;}
@media (max-width: 1000px) {
  .art-Sheet .art-content {padding: 10px; box-sizing: border-box;}
  .shopHolder > .shopSortOptie {flex-wrap: wrap; margin: 15px 0;}
  .shopHolder > .shopSortOptie .aantalPerPagina {display: none;}
  /* !important: de generatie zet onder 681px een reset met !important op .shopSortOptie > * */
  .shopHolder > .shopSortOptie > div {margin-bottom: 5px !important;}
  .shopHolder > .shopSortOptie > .presentatieWijze, .shopHolder > .shopSortOptie > .sorteerLijst {flex: 0 0 33.33%; margin-right: 0;}
  .shopHolder > .shopSortOptie > .pdfKnop {display: block; flex: 0 0 100%;}
}

/* bovenbalk: de usps (Extra code 1) staan nu in .slogan; die vult de balk zoals vroeger .uspHolder */
.extrabovenkantHolder .extrabovenkant {padding: 0; max-width: none;}
.extrabovenkantHolder .extrabovenkant .slogan {flex: 1; min-width: 0; padding: 0;}

/* offerte: de oude volgorde (kop, regels of gegevens, totalen rechts) zonder stappenbalk en zijkolom */
article > .stap .stappenbalk {display: none;}
article > .stap .kassainkollommen {display: grid; grid-template-columns: 1fr 1fr; column-gap: 4%; align-items: start;}
article > .stap .kassainkollommen > .links, article > .stap .kassainkollommen > .rechts {display: contents;}
article > .stap .kassainkollommen > .rechts > .blok:first-child {order: -1; grid-column: 1 / -1; grid-row: 1; margin: 20px 0; padding: 30px; background-color: #fff; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .1); border-radius: 5px;}
article > .stap .kassainkollommen > .rechts > .stap2_bestaandeKlant {grid-column: 1 / -1; grid-row: 2;}
article > .stap .kassainkollommen > .links > * {grid-row: 3;}
article > .stap .kassainkollommen > .links > #artikelRegelsPresentatie {grid-column: 1 / -1;}
article > .stap .kassainkollommen > .links > .knoppenHouder, article > .stap .kassainkollommen > .rechts > #couponCode {grid-column: 1 / -1; grid-row: 4;}
article > .stap .kassainkollommen > .rechts > .sticky {grid-column: 2; grid-row: 5; margin-bottom: 0;}
article > .stap .sticky .totalen {float: none;}
#naw .resBestaandeklant {display: none;}
/* stap 2: de kop "Existing customer?" sloot met 20px aan op het kopblok, en de totalen stonden er niet */
article > .stap .kassainkollommen > .rechts > .stap2_bestaandeKlant {margin-top: 0;}
article > .stap .stap2_bestaandeKlant > .titel {margin-top: 0;}
article > .stap.twee .sticky .totalenTabel {display: none;}
/* mandje: de oude regel had geen ondertitel, kenmerken, prijs incl. btw en +/-; verwijderen in een eigen kolom rechts */
.kassaArtikel .tekst .artikelAanvullendeOmschrijving, .kassaArtikel .meerinfo .artikelKenmerken, .kassaArtikel .prijzen .prijs, .kassaArtikel .aantalMinPlus .min, .kassaArtikel .aantalMinPlus .plus {display: none;}
.kassaArtikel .aantalMinPlus {border: 0;}
.kassaArtikel {position: relative;}
.kassaArtikel .aantallen .verwijderen {position: absolute; top: 50%; right: 0; translate: 0 -50%;}
.kassaArtikelen .kassaArtikel td.regelVolgorde {padding: 10px 0 10px 10px;}
.kassaArtikelen .kassaArtikel td.regelVolgorde::before {content: ""; display: inline-block; width: 14px;}
.kassaArtikel .prijzen {margin-bottom: 0;}
article > .stap .sticky > .blok {margin: 0;}
/* de oude regel had geen .artikel; de fork-regel met font-weight normal raakte hem niet */
.kassaArtikelen .artikel.kassaArtikel .tekst a.kassaArtikelTitel {font-weight: bold;}
/* mandje-dropdown: de regel heet in de standaard .artikel in plaats van .kassaArtikel; de oude opmaak hier opnieuw */
.kassaWinkelmandje tr.artikel td {padding: 10px 0;}
.kassaWinkelmandje tr.artikel td.kassaArtikelAfbeeldingHolder {width: 50px; padding-right: 10px; text-align: center;}
.kassaWinkelmandje tr.artikel td.aantallen {padding: 10px 7px;}
.kassaWinkelmandje tr.artikel td.regelTotaal {max-width: 100px;}
.kassaWinkelmandje tr.artikel td.verwijderKnop {padding-left: 10px;}
.kassaWinkelmandje tr.artikel .tekst a.kassaArtikelTitel {display: block; font-size: 110%; font-weight: bold; line-height: 1.25em; color: #000; text-decoration: none;}
.kassaWinkelmandje .kassaArtikelnrTitel, .kassaWinkelmandje .artikelKenmerken, .kassaWinkelmandje .prijzen .prijs, .kassaWinkelmandje .aantalMinPlus .min, .kassaWinkelmandje .aantalMinPlus .plus {display: none;}
.kassaWinkelmandje .prijzen {margin-bottom: 0;}
/* het aantal was tekst, geen invoerveld */
.kassaWinkelmandje .aantalMinPlus {display: block; border: 0;}
#winkelmandje .aantalMinPlus input {width: 2ch; min-width: 0; height: auto; padding: 0 .19em 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; appearance: textfield; pointer-events: none;}
@supports (field-sizing: content) {
  .kassaWinkelmandje tr.artikel td.aantallen {padding: 10px;}
  #winkelmandje .aantalMinPlus input {width: auto; field-sizing: content;}
}
#winkelmandje .inhoud.totaal {display: flex; justify-content: space-between; align-items: flex-start;}
/* de oude afbeelding stond los in de cel, zonder vaste verhouding */
.kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder .verhouding {display: none;}
.kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder img {position: static; display: inline;}
@media (max-width: 1000px) {
  article > .stap .kassainkollommen {display: flex; flex-direction: column; align-items: stretch;}
  article > .stap .kassainkollommen > * > * {min-width: 0;}
  article > .stap .kassainkollommen > .rechts > .stap2_bestaandeKlant {order: 1;}
  article > .stap .kassainkollommen > .links > * {order: 2;}
  article > .stap .kassainkollommen > .links > .knoppenHouder, article > .stap .kassainkollommen > .rechts > #couponCode {order: 3;}
  article > .stap .kassainkollommen > .rechts > .sticky {order: 4;}
  /* in de flexkolom vallen de marges van blok en kop niet meer samen; de oude afstand was 20px */
  article > .stap .kassainkollommen .blokholder {margin: 0 0 20px;}
  article > .stap .kassainkollommen .blokholder > .titel {margin-top: 0;}
}

/* footerbalk: de oude volgorde "Copyright - knoppen", de tekst van Extra code 2 eronder */
.pageFooterKnoppenHolder .pageFooterKnoppen {display: flex; flex-wrap: wrap; justify-content: center;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {order: -1;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin-right: 0;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu::before {content: "-";}
.pageFooterKnoppenHolder .pageFooterKnoppen .extraPFK {flex-basis: 100%;}
@media (max-width: 1000px) {
  .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {flex-basis: 100%;}
}

/* open mobiel menu: de pagina eronder staat stil (maatwerk.js zet .noscroll op html) */
html.noscroll, html.noscroll body {overflow: hidden; position: relative; height: 100% !important;}