:root { --kleur1: #0e8257; --kleur2: #A31248; --kleur3: #faf6f3; --kleur4: #999; --font-kleur: #22384d; --font-family1: "Poppins", Helvetica, Arial, sans-serif; --border-radius: 5px; --border-color: #ddd; --max-width: 1920px; --padding-5: 5px; --padding-10: 10px; --padding-15: 15px; --padding-20: 20px; --padding-30: 30px; --padding-40: 40px; --padding-50: 50px; --padding-80: 80px; --padding-100: 100px; --body-font-size: 14px; --h1-font-size: 32px; --h2-font-size: 26px; --h3-font-size: 20px; --h5-font-size: 18px; } body {font-family: var(--font-family1); font-weight: normal; background: #FFF; color: var(--font-kleur); font-size: var(--body-font-size);} ::selection {background: var(--kleur1); color: #FFF;} textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border: 1px solid var(--border-color); border-radius: 5px;} input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {color: var(--kleur1);} input.nietMeerVerplicht, .nietMeerVerplicht {background: #FFF;} input[type="checkbox"]::before {font-weight: 100;} input.verplicht, textarea.verplicht {border-color: #333;} h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover, h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--font-family1); color: var(--font-kleur); font-weight: bold;} h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1-font-size);} h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2-font-size);} h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3-font-size);} h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5-font-size); font-weight: normal; color: #aaa;} h1 + .h5 {margin-top:-0.5em; margin-bottom:1em;} h1 strong, h2 strong {color: var(--kleur1);} a, a:link, a:visited, a.visited, a:hover, a.hover {color: var(--font-kleur);} a.logo {width:245px; min-width:245px; margin: auto 20px auto 0; outline: 0;} a.logo img {width: 100%;} .art-menu li a .t {font-weight: normal; padding: 15px 5px; cursor: pointer; color: var(--font-kleur);} .art-menu li a .t:hover, .art-menu li a.active .t {color: var(--kleur1);} .art-menu li a .t.sale {color: var(--kleur2);} a.knop, .button, a.button, button {background: var(--kleur2); font-weight: normal; font-size: 14px; border-radius: var(--border-radius); padding: 18px 20px; line-height: 1; font-family: inherit; color: #FFF;} a.knop:hover {background: #8a0f3c;} a.knop.wit {background-color: #FFF; color: var(--kleur1);} a.knop + a.knop {margin: 0 0 10px 10px;} .extrabovenkantHolder {background-color: var(--kleur1); color: #FFF; height:28px;} .extrabovenkantHolder .extrabovenkant {max-width: var(--max-width);} .extrabovenkantHolder .extrabovenkant .usp {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: auto; padding: 0; gap: 20px; text-align: center;} .extrabovenkantHolder .extrabovenkant .usp a {color: #FFF; flex: 1; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-decoration: none; transition:unset;} .extrabovenkantHolder .extrabovenkant .usp a::before {content: "\f015"; font-family: "Font Awesome 5 Pro"; color: #FFF; margin-right: 10px; font-weight: lighter;} .extrabovenkantHolder .extrabovenkant .usp a.bedenktijd::before {content: "\f2f7";} .extrabovenkantHolder .extrabovenkant .usp a.levering::before {content: "\f49d";} .extrabovenkantHolder .extrabovenkant .usp a.reviews::before {content: "\f004";} .bovenkantHolder {background-color: var(--kleur3); border: 0; position: sticky; top: -1px; z-index: 20;} .bovenkantHolder .bovenkant {max-width: var(--max-width); align-items: center;} .bovenkantHolder .winkelmenuHolder {background: #FFF; border-bottom: 1px solid var(--border-color);} .bovenkantHolder .winkelmenuHolder .winkelmenu {max-width: var(--max-width); text-align: unset; display: flex; gap:60px;} .bovenkantHolder .winkelmenuHolder .winkelmenu li {position: static;} .bovenkantHolder .winkelmenuHolder .winkelmenu li a .t {padding: 15px 0; cursor: pointer; font-size: 15px; font-weight: normal;} .bovenkantHolder .winkelmenuHolder .winkelmenu li.separatorHouder {display: none;} .bovenkantHolder .bovenkant .zoekenToggle {display: none;} .bovenkantHolder .bovenkant .zoekenHolder {margin: auto; width: 100%; max-width: 600px;} .bovenkantHolder .bovenkant .zoekenHolder .zoeken {width: 100%; background: #FFF; border-radius: 999px; border: 1px solid var(--font-kleur);} .bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld {width: 100%;} .bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld input {padding: 10px 15px;} .bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {margin: auto 0; padding: 10px 15px;} .bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop::before {color: var(--font-kleur); font-weight: normal; font-size: 17px;} .bovenkantHolder .bovenkant .thuiswinkelWaarborg {margin: auto 20px auto 20px; line-height: 0;} .bovenkantHolder .bovenkant .thuiswinkelWaarborg img.onderElkaar {display:none;} .bovenkantHolder .bovenkant .shopitems {min-width: 128px;} .breadcrumbs {white-space: nowrap; position: absolute; z-index: 1; margin-top:5px;} .breadcrumbs ol li a { color: var(--font-kleur) !important; background: var(--kleur3); border-radius: 100px; padding: 5px 10px; text-decoration: none !important; } .breadcrumbs li.crumb:nth-child(1) {display: inline-block;} .breadcrumbs li.crumb:nth-child(1) a::before {content: "\f137"; font-family: "Font Awesome 5 Pro"; color: var(--font-kleur); margin-right: 5px; font-weight: bold; font-size:15px; position: relative; top:2px} .breadcrumbs li.crumb:nth-child(n+2),.breadcrumbs li.crumbSpace { display: none;} .speedsearchResultBg, .speedsearchLoader {display: none !important;} .winkelwagenHouder .winkelknop {background: unset; padding: 10px;} .winkelwagenHouder .winkelknop .icoon:before {content: "\f291"; font-family: "Font Awesome 5 Pro"; font-size: 21px; font-weight: normal; color: var(--font-kleur);} .winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--kleur1); color: #FFF; padding:1px 6px 0 6px; border-radius: 100%; line-height: 17px; top: 7px; right: -9px;} .winkelwagenHouder .winkelwagen {position: fixed; top: 0; bottom: 0; opacity: 1; right: -100%; max-height: 100vh; border-radius: 0; box-shadow: unset; background-color: #FFF; transform: translateZ(0); transition: right .5s ease-in-out; width: 500px; max-width: 100vw;} .winkelwagenHouder.openGeklapt .winkelwagen {top: 0; right: 0; max-height: 100vh;} .winkelwagenHouder .winkelwagen #winkelmandje {display: flex; flex-direction: column; height: 100vh;} .winkelwagenHouder .winkelwagen .inhoud {padding: var(--padding-20);} .winkelwagenHouder .winkelwagen .inhoud.totaal {margin: auto 0 0; background: #FFF; border-top: 1px solid var(--border-color);} .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--kleur2);} .winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {color: var(--font-kleur);} .winkelwagenHouder .winkelwagen .inhoud.artikelen .h3, .account .houder .accountKop {font-size: 18px; margin: 0 0 10px 0; line-height: 1.35em;} .winkelmandjeLeeg {background: transparent; border: 0; padding: var(--padding-20); margin: auto; font-size: 20px; color: #a4a4a4;} .totGratisVerzending {font-weight: normal; font-size:12px; background:transparent; border:1px solid var(--kleur1); color: var(--kleur1)} .account li {border: 0;} .account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro"; font-size: 21px; font-weight: normal; color: var(--font-kleur);} .account .welkom, .account .welkom .bericht, .account .inloggenKnop .titel, .account .mijnAccountKnop .titel, .account .favorietenKnop .titel, .account .favorietenKnop .haakje, .account .favorietenKnop .favAantal {display: none;} .account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; font-size: 21px; font-weight: normal; color: var(--font-kleur);} .speedsearchResultBg, .speedsearchLoader {display: none !important;} #speedsearchResult {left:0; top:100%;} #speedsearchResult .houder {width:100%; max-width: 100vw; border:0; border-radius: 0 0 var(--border-radius) var(--border-radius); padding:10px 10px 40px 10px; box-sizing: border-box;} #speedsearchResult .houder .speedSearch ul li a::after {display: none} #speedsearchResult .houder .speedSearch.categorie .resultaat {display: none;} #speedsearchResult .houder .speedSearch.categorie ul {display: flex; flex-wrap:wrap; gap:10px; padding:10px;} #speedsearchResult .houder .speedSearch.categorie ul li {margin:0;} #speedsearchResult .houder .speedSearch.categorie ul li a {background:var(--kleur3); height:30px; border-radius: 50px; padding: 3px 15px; border:0; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap:10px;} #speedsearchResult .houder .speedSearch.categorie ul li a img {width: 100%; max-height:26px; mix-blend-mode: multiply;} #speedsearchResult .houder .speedSearch.categorie ul li a:hover {background:var(--kleur1); color:#fff;} #speedsearchResult .houder .speedSearch.artikelen ul li a {border-radius: var(--border-radius);} #speedsearchResult .houder .speedSearch.artikelen ul li a:hover {background-color: #eee;} #speedsearchResult .houder .speedSearch.artikelen ul li a .omschrijving {font-weight: bold; padding-top:5px;} #speedsearchResult .houder .speedSearch.artikelen ul li a strong {font-weight: bold; color: var(--kleur1);} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: multiply;} #speedsearchResult .houder .knopAllesOnder {position: absolute; bottom: 0; left: 0; right: 0; max-width: 100vw; box-sizing: border-box;} #speedsearchResult .houder .knopAllesOnder a:hover {background-color: var(--kleur1); color: #fff; border-radius:0 0 var(--border-radius) var(--border-radius);} .formulier_holder.help-ons-form {max-width: 650px; margin: 0 auto;} .formulier_holder.help-ons-form textarea, .formulier_holder.help-ons-form select {margin: 5px 0; border-radius: var(--border-radius);} .art-Sheet {max-width: var(--max-width);} section .inhoud, .vak .inhoud {max-width: var(--max-width); padding: var(--padding-50) var(--padding-30);} .vak.groen {background: var(--kleur3);} .vak.reviews {margin: var(--padding-80) 0;} .vak.reviews .inhoud {padding-top: var(--padding-40); padding-bottom: var(--padding-40);} .vak.reviews div[class*="grid"] {grid-template-columns: 2fr 3fr;} .vak.reviews div[class*="grid"] > div img {margin: -100px 0; max-width: 550px;} .vak.reviews .flickity-nav > div .flickity-button {background:#fff;} div[class*="grid"].midden {align-items: center;} .art-sidebar1 .filters {border: 0; display: flex; flex-direction: column; gap:10px} .art-sidebar1 .filters .kenmerkgroep {padding: 0; border: 0; margin: 0 0 20px 0;} .art-sidebar1 .filters .kenmerkgroep:last-child {margin: 0;} .art-sidebar1 .filters .kenmerkgroep a {padding: 0 0 15px 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 0; border-radius: 0; border-bottom: 1px solid #eee;} .art-sidebar1 .filters .kenmerkgroep a.titel {margin: 0; font-size: 15px; font-family: var(--font-family1); position: relative; font-weight: 600; color: var(--font-kleur);} .art-sidebar1 .filters .kenmerkgroep a.titel::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: bold; position: absolute; right: 5px; font-size: 15px; transition: .3s all ease; box-sizing: border-box;} .art-sidebar1 .filters .kenmerkgroep a.titel.gesloten::after {transform: rotate(180deg);} .art-sidebar1 .filters .kenmerkgroep .kenmerken {z-index: 1; overflow: hidden; position: relative; margin-top: 0; height: auto; padding: 15px 0 0 0; opacity: 1; transition: .3s all ease; margin: 0; border-radius: 0;} .art-sidebar1 .filters .kenmerkgroep .kenmerken.gesloten {max-height: 140px;} .art-sidebar1 .filters .kenmerkgroep .kenmerken.open {max-height: 100%;} .art-sidebar1 .filters .kenmerkgroep.gesloten .kenmerken {height: 0; opacity: 0; padding: 0;} .art-sidebar1 .filters .kenmerkgroep .tonen {transition: all .3s ease; font-weight: 500; cursor: pointer; color: var(--font-kleur); font-size: 14px; align-items: center; display: inline-block;} .art-sidebar1 .filters .kenmerkgroep .tonen.gesloten {display: none;} .art-sidebar1 .filters .actieveKenmerken {border: 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 20px; box-shadow: unset; border-radius: 0; padding: 0; order:-1;} .art-sidebar1 .filters .actieveKenmerken:before {content: "Gekozen filters"; color:var(--font-kleur); font-size: 15px; font-weight: 600; padding: 0 0 15px 0; margin: 0; display: block;} .art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {border-radius: 5px; background-color:var(--kleur3); color: var(--font-kleur);} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .omschrijving {font-size: inherit; color: var(--font-kleur); margin-right: 10px;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label input[type="checkbox"]:checked + .omschrijving {font-weight: bold;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .kenmerkAfbeelding {width: 16px; border-radius: 100%; position: relative; top: -1px; height: 16px !important; margin: auto 10px auto 0;} .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: #FFF;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .aantal {float: unset; color: #BCBBBB; font-size: 11px; margin: 8px 0 0 auto; } .art-sidebar1 .filters .kenmerkgroep .kenmerken label {display: flex;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label input {top: 6px !important; position: relative;} .art-sidebar1 .filters .kenmerkgroep.prijsfilter a.titel::after {display: none;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder {position: relative; display: flex; flex-direction: column; padding: 15px 0;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .noUi-target {margin: 10px 12px 30px 12px; height: 6px; background-color: #F3F3F3; display: none;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .noUi-target .noUi-base .noUi-connect {background-color: var(--kleur3);} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .noUi-target .noUi-base .noUi-origin .noUi-handle {height: 22px; width: 22px; border: 0; background-color: var(--kleur1); right: -11px;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .noUi-target .noUi-base .noUi-origin .noUi-handle::before {content: "\f7a5"; font-family: "Font Awesome 5 Pro"; position: absolute; font-weight: bold; color: rgb(255 255 255 / 20%); font-size: 11px; left: 9px; bottom: -3px;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterVelden {order: 2; display: grid; grid-template-columns: 1fr 1fr;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterInput {background: #FFF; border-radius: var(--border-radius); display: grid; grid-template-columns: 1fr 50px; align-items: center;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterVelden input {background: #FFF; height: 42px; width: 100%; color: var(--font-kleur); border: 1px solid var(--border-color);} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterVelden .valuta {margin: 0 10px; font-weight: normal; color: var(--font-kleur); display: none;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterInput:first-child::after { content: "tot"; margin: auto;} .art-sidebar1 .kenmerkgroep .prijsFilterHolder .prijsfilterInput:last-child::after { content: "OK"; margin: auto; height:42px; box-sizing: border-box; background:var(--font-kleur); color:#FFF; padding: 8px 12px; border-radius: var(--border-radius); cursor: pointer;} .productCarousel {margin: 0;} .productCarousel .artikel {width: calc((100% - (var(--padding-30) * 4)) / 5); margin-left: var(--padding-30); margin-right: 0;} .productCarousel .artikel .inner {transition: unset;} .flickity-nav {display: flex; gap: var(--padding-30); align-items: center; margin: 0 0 10px 0;} .flickity-nav > div {position: relative; margin-left: auto; display: flex; gap: var(--padding-5);} .flickity-nav > div .flickity-button {position: relative; opacity: 1; background: var(--kleur3); width: 36px; height: 36px; padding: 0; left: 0; right: 0; top: 0; bottom: 0; transform: unset;} .flickity-nav > div .flickity-button:disabled {opacity: .3;} .flickity-nav > div .flickity-button .flickity-button-icon {position: relative; left: unset; top: unset; width: 45%; height: 45%; color: var(--font-kleur);} .shopHeader {background: var(--kleur3); padding: var(--padding-30); box-sizing: border-box; border-radius: var(--border-radius); margin: 0 0 var(--padding-20) 0;} .shopHeader p:last-of-type {margin: 0;} .shopSortOptie {border: 0; padding: 0; margin: 0 0 var(--padding-20) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-30);} .shopSortOptie .sorteerLijst {margin: auto 0 auto auto; grid-column: 2/2;} .shopSortOptie .aantalPerPagina {display: none;} .shopSortOptie select {border-radius: var(--border-radius); font-weight: normal; color: var(--font-kleur); font-size: 13px; padding: var(--padding-10) var(--padding-15); background-position: right 5px center;} .artikel .labels .label {background: var(--kleur2); color: #FFF; margin: 10px 10px 0; padding:5px 10px; border-radius: var(--border-radius)} .label.zwart {background: #000 !important;} .label.groen {background: var(--kleur1) !important;} .label.rood {background: var(--kleur2) !important;} .label.nietTonen {display: none;} .artikel .aantalMinPlus, .artikel .aantalVolgorde {display: grid; grid-template-columns: 1fr 1fr 1fr; background: #fff; border: 1px solid var(--border-color); border-radius: var(--border-radius); margin: 0; overflow: hidden;} .artikel .artikelnr, .artikel .relatieBtwPrijs {display: none;} .artikel .prijzen .prijs {color: var(--font-kleur);} .artikel .omschrijving .merk {color: var(--kleur4); font-weight: normal; font-size: 90%; text-transform: uppercase;} .artikel .prijs .centen {position: relative; top: -0.5em; font-size: 60%; left: -0.15em;} .shopLijst .artikel .omschrijving h2.titel a {color: var(--font-kleur); font-size:var(--body-font-size);} .shopLijst .artikel .prijzen .valuta {display: none;} .shopTegel {grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--padding-30);} .shopTegel .artikel .inner {border: 0; padding: 0;} .shopTegel .artikel .inner:hover {box-shadow: unset;} .shopTegel .artikel .inner .afbeeldingHouder {overflow: hidden; margin: 0; background-color: var(--kleur3); border-radius: var(--border-radius);} .shopTegel .artikel .inner .afbeeldingHouder img {mix-blend-mode: darken;} .shopTegel .artikel .prijzen .prijs {color: var(--font-kleur); font-size: 18px; font-weight: bold;} .shopTegel .artikel .omschrijving h2.titel a {color: var(--font-kleur); font-weight: normal;} .shopTegel .artikel .inner .rechtsboven .favorieten a {border-radius: 0; background: none; color: var(--kleur1); font-size: 22px;} .shopTegel .artikel .inner .rechtsboven .favorieten a i {font-weight: normal;} .shopTegel .artikel .inner .rechtsboven .favorieten.aan a i {font-weight: bold; color: var(--kleur1);} .shopTegel .artikel .prijzen .prijs .valuta {margin: 0;} .shopTegel .artikel .prijzen .prijs.moeder .vanaf {font-size: inherit; color: inherit;} .shopTegel .artikel .prijzen .prijs.moeder .vanaf:empty {display: none;} .shopTegel .artikel .inner img.tweedePlaatje {opacity:0;} .shopTegel .artikel .inner:hover img.afbeelding:first-child[data-secondimage] {opacity:0;} .shopTegel .artikel .inner:hover img.tweedePlaatje {opacity: 1; transform: scale(1.5);} .shopTegel .artikel .inner .omschrijvingHouder {margin: 10px 0; font-size: inherit;} .shopTegel .artikel .valuta, .detail .valuta {display: none;} .artikel.detail .detailinkollommen {display: grid; grid-template-columns: 4fr 3fr; gap: var(--padding-50); margin: 0; grid-template-areas: "a b" "c b" "d d" "e e";} .artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;} .artikel.detail .detailinkollommen .links {grid-area: a;} .artikel.detail .labels {left: unset; right:0;} .shopTegel .artKortingPrijsPercentage {position: absolute; right:0; top:0; background: var(--kleur2); font-size:12px; color: #FFF; padding: 5px 10px; border-radius: var(--border-radius); z-index: 1; margin:10px; line-height: normal;} .shopTegel .artKortingPrijsPercentage::before {content:"-"} .shopTegel .artKortingPrijsPercentage .toelichting {display: none;} .artikel.detail .detailinkollommen .rechts {grid-area: b;} .artikel.detail .detailinkollommen .rechts .blok {z-index:2; background: var(--kleur3); border-radius: var(--border-radius); padding: var(--padding-30); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--padding-20); position: sticky; top: 150px;} .artikel.detail .detailinkollommen .tabs {grid-area: c; display: flex; flex-direction: column; gap: var(--padding-20) 0;} .artikel.detail .detailinkollommen .tabs .vak > h2 {font-size: 20px;} .artikel.detail .detailinkollommen .tabs .vak .inhoud {padding: 0; max-width: unset; margin: 0;} .artikel.detail .detailinkollommen .tabs .vak .inhoud.lang {overflow: hidden; max-height: 200px; transition: .3s all ease;} .artikel.detail .detailinkollommen .tabs .vak .inhoud.lang::after {content: ""; background: linear-gradient(0, #fff, hsla(0, 0%, 98%, 0)); bottom: 67px; display: block; height: 50px; left: 0; position: absolute; width: 100%;} .artikel.detail .detailinkollommen .tabs .vak .inhoud.open {overflow: unset; max-height: unset;} .artikel.detail .detailinkollommen .tabs .vak .inhoud.open::after {display: none;} .artikel.detail .detailinkollommen .tabs .vak a.lees-meer {display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 600; position: relative; margin: var(--padding-20) 0; cursor: pointer;} .artikel.detail .detailinkollommen .tabs .vak a.lees-meer span {position: relative; background: #FFF; z-index: 1; padding: 0 var(--padding-20); cursor: pointer;} .artikel.detail .detailinkollommen .tabs .vak a.lees-meer::after {content: ""; width: 100%; height: 1px; background: var(--border-color); display: block; top: 50%; position: absolute;} .artikel.detail .detailinkollommen .tabs .vak .inhoud .shopDetailTabKenmerken {margin: var(--padding-20) 0 0 0;} .kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 1fr 1fr; color: var(--font-kleur); border: 0;} .kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: normal; color: #8A8884;} .kenmerkArt:nth-child(odd), .artikelGewicht:nth-child(odd) {background-color: var(--kleur3);} .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje {display: none;} .artikel.detail .detailinkollommen .links .afbeelding {width: 100%; grid-area: a;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery { margin: 0 0 var(--padding-30) 0;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height: calc(100vh - 650px); min-height: 650px; max-height: 650px; padding-bottom: 0;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button {opacity: 1; background: var(--kleur3); width: 40px; height: 40px; padding: 0;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button:disabled {opacity: .3;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button .flickity-button-icon {position: relative; left: unset; top: unset; width: 45%; height: 45%; color: var(--font-kleur);} .artikel.detail .detailinkollommen .links .afbeelding .vimeoBekijken {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-size:30px; text-shadow: 0 2px 10px #000; color: #FFF; z-index: 1;} .artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery img {border: 2px solid var(--border-color); border-radius: var(--border-radius); background: #FFF; box-sizing: border-box; max-height:80px; width:auto !important} .artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery .is-selected img {border-color: var(--kleur1);} .artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery button { display: none;} .artikel.detail .detailinkollommen .links .flickity-slider iframe.vimeoMetAutoPlay {width: 100% !important; height: 100% !important; max-width: 100% !important; max-height:650px !important; aspect-ratio: 1;} .artikel.detail .detailinkollommen .rechts .blok .omschrijving h1 {font-size: 23px;} .artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs {font-size: 22px; color: var(--font-kleur);} .artikel.detail .detailinkollommen .rechts .blok .prijzen .artKortingPrijsBedrag {font-size: 13px; color: #7e7e7e;} .artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs-voor {display: flex; align-items: center; gap: var(--padding-10); line-height: 1.95em;} .artikel.detail .detailinkollommen .rechts .blok .prijzen .prijs-voor .artKortingPrijsPercentage {display: inline-block; font-size: 12px; background: #A31248; border-radius: var(--border-radius); color: #FFF; padding: var(--padding-5); line-height: 1; text-transform: lowercase;} .artikel.detail .detailinkollommen .rechts .blok .prijzen .betaal-klarna {text-decoration: none; font-size: 13px;} .artikel.detail .detailinkollommen .rechts .blok .prijzen .betaal-klarna::before {content: ""; display: inline-block; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0NTIuOSAxMDEuMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDUyLjkgMTAxLjE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTc5LjcsMEg1Ny40YzAsMTguMy04LjQsMzUtMjMsNDZsLTguOCw2LjZsMzQuMiw0Ni42aDI4LjFMNTYuNCw1Ni4zQzcxLjMsNDEuNSw3OS43LDIxLjUsNzkuNywweiIvPgo8cmVjdCB3aWR0aD0iMjIuOCIgaGVpZ2h0PSI5OS4yIi8+CjxyZWN0IHg9Ijk0LjUiIHdpZHRoPSIyMS41IiBoZWlnaHQ9Ijk5LjIiLz4KPHBhdGggZD0iTTMwNC42LDI4LjdjLTguMiwwLTE2LDIuNS0yMS4yLDkuNnYtNy43SDI2M3Y2OC42aDIwLjd2LTM2YzAtMTAuNCw3LTE1LjUsMTUuNC0xNS41YzksMCwxNC4yLDUuNCwxNC4yLDE1LjR2MzYuMmgyMC41VjU1LjYKCUMzMzMuOCwzOS42LDMyMS4xLDI4LjcsMzA0LjYsMjguN3oiLz4KPHBhdGggZD0iTTE4MSwzMC42VjM1Yy01LjgtNC0xMi44LTYuMy0yMC40LTYuM2MtMjAsMC0zNi4yLDE2LjItMzYuMiwzNi4yczE2LjIsMzYuMiwzNi4yLDM2LjJjNy42LDAsMTQuNi0yLjMsMjAuNC02LjN2NC40aDIwLjUKCVYzMC42SDE4MXogTTE2Mi4zLDgyLjVjLTEwLjMsMC0xOC42LTcuOS0xOC42LTE3LjZzOC4zLTE3LjYsMTguNi0xNy42YzEwLjMsMCwxOC42LDcuOSwxOC42LDE3LjZTMTcyLjYsODIuNSwxNjIuMyw4Mi41eiIvPgo8cGF0aCBkPSJNMjMzLjMsMzkuNXYtOC45aC0yMXY2OC42aDIxLjF2LTMyYzAtMTAuOCwxMS43LTE2LjYsMTkuOC0xNi42YzAuMSwwLDAuMiwwLDAuMiwwdi0yMEMyNDUuMSwzMC42LDIzNy40LDM0LjIsMjMzLjMsMzkuNXoiCgkvPgo8cGF0aCBkPSJNMzk3LjYsMzAuNlYzNWMtNS44LTQtMTIuOC02LjMtMjAuNC02LjNjLTIwLDAtMzYuMiwxNi4yLTM2LjIsMzYuMnMxNi4yLDM2LjIsMzYuMiwzNi4yYzcuNiwwLDE0LjYtMi4zLDIwLjQtNi4zdjQuNGgyMC41CglWMzAuNkgzOTcuNnogTTM3OC45LDgyLjVjLTEwLjMsMC0xOC42LTcuOS0xOC42LTE3LjZzOC4zLTE3LjYsMTguNi0xNy42YzEwLjMsMCwxOC42LDcuOSwxOC42LDE3LjYKCUMzOTcuNiw3NC42LDM4OS4yLDgyLjUsMzc4LjksODIuNXoiLz4KPGc+Cgk8cGF0aCBkPSJNNDM0LDMyLjZjMC0xLTAuNy0xLjYtMS44LTEuNmgtMS45djUuMmgwLjl2LTEuOWgxbDAuOCwxLjloMWwtMC45LTIuMUM0MzMuNywzMy44LDQzNCwzMy4zLDQzNCwzMi42eiBNNDMyLjIsMzMuNGgtMXYtMS42CgkJaDFjMC42LDAsMC45LDAuMywwLjksMC44UzQzMi45LDMzLjQsNDMyLjIsMzMuNHoiLz4KCTxwYXRoIGQ9Ik00MzEuOSwyOC44Yy0yLjcsMC00LjksMi4yLTQuOSw0LjljMC4xLDIuNywyLjIsNC45LDQuOSw0LjlzNC45LTIuMiw0LjktNC45QzQzNi44LDMxLDQzNC42LDI4LjgsNDMxLjksMjguOHogTTQzMS45LDM3LjcKCQljLTIuMiwwLTMuOS0xLjgtMy45LTRjMC0yLjIsMS44LTQsMy45LTRjMi4yLDAsMy45LDEuOCwzLjksNEM0MzUuOCwzNS45LDQzNCwzNy43LDQzMS45LDM3Ljd6Ii8+CjwvZz4KPHBhdGggZD0iTTQ0MCw3NC45Yy03LjEsMC0xMi45LDUuOC0xMi45LDEyLjljMCw3LjEsNS44LDEyLjksMTIuOSwxMi45YzcuMSwwLDEyLjktNS44LDEyLjktMTIuOUM0NTIuOSw4MC42LDQ0Ny4xLDc0LjksNDQwLDc0Ljl6IgoJLz4KPC9zdmc+Cg==) center center no-repeat; width: 61px; height: 19px; margin-right: 5px; background-color: #ffafc8; background-size: 52px; border-radius: 5px; position: relative; top: 4px; background-size: 48px;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze {margin: 0;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .h3 {flex: 1 1 100%; font-size: 15px; grid-column: -1 / 1;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen {display: grid; grid-template-columns:repeat(auto-fill, minmax(min(76px, 100%), 1fr)); gap:5px; margin: 0;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen .artikel {width:100%; margin:0;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .artikel {border: 1px solid var(--border-color); border-radius: var(--border-radius); background: #FFF;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .artikel.actief {border: 2px solid var(--kleur1);} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .artikel .afbeeldingHouder img {mix-blend-mode: darken;} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze .artikel .kenmerkInfo {display: none;} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .h3 {flex: 1 1 100%; font-size: 15px;} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst {display: grid; grid-template-columns:repeat(auto-fill, minmax(min(80px, 100%), 1fr)); gap:5px;} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst .artikel {width: 100%; position: relative; box-shadow: none !important; padding: 0 !important; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: #FFF; box-sizing: border-box; overflow: hidden; margin:0;} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst .artikel.artikelSerieActief {border: 2px solid var(--kleur1);} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst .artikel .inner .inhoud {display: none;} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst .artikel .inner .afbeeldingHouder {width: 100%; position: relative; margin: 0;} .artikel.detail .detailinkollommen .rechts .blok .bestellen {display: grid; grid-gap: 10px; grid-template-columns: 1fr 50px;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop {display: grid; grid-template-columns: 150px 1fr; grid-gap: var(--padding-10); position: relative; width: 100%;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel {width: 100% !important; margin-right: 10px; box-sizing: border-box; background: var(--kleur2); border-radius: var(--border-radius); line-height: 1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.8);} .artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel:hover {background: #8a0f3c;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten {margin: 0;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a {margin: 0; display: flex; font-size: 15px; border: 1px solid var(--border-color); z-index: 1; background: #fafafa; text-align: center; border-radius: var(--border-radius); height: 48px; width: 48px; line-height: 1; text-decoration: none;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .toelichting {display: none;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .image {padding: 0; margin: auto;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .image i {font-size: 20px;} .artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten.aan a .image i {color: var(--kleur2);} .artikel.detail .detailinkollommen .rechts .blok .voorraad {font-size: 13px;} .artikel .voorraad .status .toelichting.positief::before, .artikel .voorraad .status .toelichting::before {font-weight:bold; content: "\f48b"; font-family: "Font Awesome 5 Pro"; color: var(--font-kleur); margin-right:10px;} .artikel .voorraad .status .toelichting.negatief::before {display: none;} .artikel.detail .detailinkollommen .rechts .blok ul.usp {margin: 0 0 1em 0; padding: 0; list-style: none;} .artikel.detail .detailinkollommen .rechts .blok ul.usp li a {padding: 0; padding-left: 25px; position: relative; text-decoration: none;} .artikel.detail .detailinkollommen .rechts .blok ul.usp li a strong {color: var(--kleur1);} .artikel.detail .detailinkollommen .rechts .blok ul.usp li a::before {content: "\f015"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; position: absolute; left: 0; font-size: 16px; font-weight: lighter;} .artikel.detail .detailinkollommen .rechts .blok ul.usp li a.bedenktijd::before {content: "\f2f7";} .artikel.detail .detailinkollommen .rechts .blok ul.usp li a.levering::before {content: "\f49d";} .artikel.detail .detailinkollommen .rechts .blok a.offerteAanvragen {text-decoration: none; font-weight: 500; cursor: pointer;} .artikel.detail .detailinkollommen .rechts .blok a.offerteAanvragen span {text-decoration: underline;} .artikel.detail .detailinkollommen .rechts .blok .beoordeling {text-decoration: none; display: flex; gap:10px; align-items: center;} .artikel.detail .detailinkollommen .vak.meebestellen {grid-area: d;} .artikel.detail .detailinkollommen .vak.meebestellen > h2 {font-size: 20px;} .artikel.detail .detailinkollommen .laatst-bekeken {grid-area: e;} .artikel.detail .detailinkollommen .laatst-bekeken .flickity-nav h2 {font-size: 20px;} .artikel.detail .detailinkollommen .laatst-bekeken .shopTegel {display: block;} .artikel.detail .detailinkollommen .laatst-bekeken .shopTegel .artikel {width: calc((100% - (var(--padding-30) * 4)) / 5); margin-right: var(--padding-30); display: block;} #extraSchermWinkelmand .artikel .labels {display: none;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding:20px} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .inhoud {align-items: center;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven {background: var(--kleur3);} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven::after {display: none;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .inhoud .h3 {color: var(--kleur1);} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .icoon {display: none;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven .afbeeldingHouder img {mix-blend-mode: multiply;} #extraSchermWinkelmand .schermWinkelMandje .knoppen {background-color: var(--kleur3);} #extraSchermWinkelmand .schermWinkelMandje .knoppen a.doorgaanKassa {background-color: var(--kleur2); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.8); width: auto; flex:1} #extraSchermWinkelmand .schermWinkelMandje .knoppen a.verderWinkelen {color: var(--font-kleur); text-decoration: underline; background:none; width: auto;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .prijzen {line-height: 1.25em; padding-right:15px; width:70px;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen {display: block !important; margin:0;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen a.wButBestel {background-color: var(--kleur1); padding:5px 15px; white-space: nowrap;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen a.wButBestel::before {font-family: "Font Awesome 5 Pro"; content: "\f067"; font-size: 16px; color: #fff; display: inline-block; margin-right:10px; position:relative; top:1px;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .bestellen .bestelknop input {display: none;} .fancybox-content.inhoud {position: fixed; top: 0; bottom: 0; max-width: 450px; min-width: 450px; right: 0; margin: 0 !important;} .blader_holder {border: 0; margin: var(--padding-20) 0 0 0; border-radius: var(--border-radius);padding: var(--padding-20); box-sizing: border-box; overflow: auto;} .blader_tabel1_n a {border: 0; background-color: var(--kleur3); border-radius: var(--border-radius); color: var(--font-kleur); font-size: 14px; font-weight: normal;} .blader_tabel1_s, .blader_tabel1_n:hover, .blader_tabel1_n:hover a {background-color: #ebf0f1; color: var(--fontkleur1) !important;} .blader_tabel1_n, .blader_tabel1_s {border: 0; border-radius: var(--border-radius); color: var(--kleur1) !important; font-size: 14px; height: 2.15em; line-height: 2.15em; width: 2.15em; font-weight: bold;} .pageFooterHolder {background: var(--kleur3);} .pageFooterHolder .pageFooter {color: var(--font-kleur); max-width: var(--max-width); padding: var(--padding-80) var(--padding-30);} .pageFooterHolder .pageFooter a {text-decoration: none; color: var(--font-kleur);} .pageFooterHolder .pageFooter ul {list-style: none; padding: 0; margin: 0;} .pageFooterKnoppenHolder {background: var(--kleur1);} .pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--max-width);} .kassaArtikelen .artikel .verwijderen a i {font-size: 16px; margin-top:5px;} .artikel .relatieBtwPrijs {display: none;} .stap .kassaArtikelen th {border-bottom: 1px solid var(--border-color); font-weight: normal; text-transform: none; font-size: 12px;} .stap .kassaArtikelen th.regelStuk, .kassaArtikelen .artikel td.regelStuk {display: none;} .kassaArtikelen .artikel .tekst a.kassaArtikelTitel {color: var(--font-kleur);} .kassainkollommen > .rechts .blok, .couponcodeHouder {border-radius: 0; margin-bottom: auto; padding: 30px; background-color: var(--kleur3);} .couponcodeHouder {padding-bottom:0;} .couponcodeHouder .couponcode #CouponCodeV {border-radius: var(--border-radius) 0 0 var(--border-radius); padding: 8px 15px; font-size: 14px; border-color:var(--border-color)} .couponcodeHouder .couponcode a.wButControleer {border-radius: 0 var(--border-radius) var(--border-radius) 0; background-color: var(--font-kleur); border: 1px solid var(--font-kleur); border-left: unset; color: #fff; font-size: 13px;} .totaalGewicht, tr.totaalInclBtw, .stap tr.totaalExclBtw, tr.totaalBtw, tr.totaalVerzendkosten .beschrijving .omschrijving {display: none;} .stap .totaalExclBtw td, .stap .totalen .totaalTeBetalen td {border-color: var(--border-color); font-size: 100%; color:var(--font-kleur)} .stap .totalen .totaalArtikelen, .stap .totalen .totaalExclBtw, .stap .totalen .totaalBtw {font-size: 13px;} .stap .totalen .stappenKnop {display: flex;} .stap .totalen .stappenKnop a {padding: 15px 25px; line-height: 1; background: var(--kleur1); border: 0; font-size: 14px; margin: 20px 0 0 auto; font-weight: normal;} .stap .totalen .stappenKnop a::before {display: none;} .stap.twee .links {display: grid; grid-template-columns: 1fr 1fr;margin:0;} .stap.twee .links > div {margin:0;} .stap.twee .resBestaandeklant .button {display: none;} .stap.twee .geslacht, .stap.twee .opmerkingen, .stap.twee .contactpersoon .tussenvoegsel {display: none;} .stap.twee .contactpersoon .voornaam, .stap.twee .contactpersoon .achternaam {width: 50%;} .stap.twee .links > div, .stap.drie .links > div {margin: 0; width: 100%; background: unset; } .stap.twee .links > div:last-child {padding: 0 20px 20px 20px;} .kassainkollommen > .rechts .blok.bestaandeKlant {margin: 0 20px 20px 20px; padding: 20px; background: #FFF;} .kassainkollommen > .rechts .blok.bestaandeKlant h2 {color: #000; font-size: 16px; font-weight: bold; margin-bottom: 15px;} .stap.twee .tekstNieuwAdres a {line-height: 1; font-size: 13px; background: var(--border-color); padding: 10px 15px; text-decoration: none; color: #000; border-radius: 0; font-family: "Poppins", Helvetica, Arial, sans-serif;} .stap .blokholder {background: #FFF; border-radius: 0; margin-bottom: 0;} .stap .blokholder>.titel {color:var(--font-kleur);} .stap .blokholder.afleverAdres {padding-bottom: 0;} /* .stap.drie #betaalMethodes .regel .bedrag {display: none;} */ .stap.twee #stap2_factuuruitklap, .stap.twee #stap2_bewaaraccount {margin-bottom: 0; padding: 0 20px 20px 20px; background-color: #FFF;} .stap .blokholder.algemeneGegevens {padding-bottom: 1px;} .stap.twee .telefoon .vast {width:100%; margin-right:0;} .stap.twee .landen label, .stap.twee .telefoon .mobiel {display: none;} .stap.twee textarea {height:46px;} .kassainkollommen > .rechts .sticky {position: relative; margin-bottom: 0; top: unset;} .kassainkollommen > .rechts .blok hr {background-color: var(--border-color); margin: 20px 0;} .stap.twee .bestaandAdres {border: 1px solid var(--border-color);} .stap.twee .bestaandAdres:hover {border: 1px solid var(--kleur1);} .stap.twee .blok .inloggen .knoppen a.kwijt {font-size: 13px; color: #787878; text-decoration: none;} .algemeneGegevens .nawVeld.checkboxVeld {display: none;} a.terugKnop {line-height: 1; font-size: 13px; background: var(--border-color); padding: 7px 15px; text-decoration: none;} a.terugKnop::before {content: "\f0d9"; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-right: 10px;} .typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before, input[type="radio"]:checked::before {color: var(--kleur1);} .typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label, input.correct, .correct {border-color: var(--kleur1);} input.correct, .correct {background-image: url('data:image/svg+xml;utf8,') !important;} .stap.twee .adres .geselecteerd {border: 1px solid var(--kleur1) !important;} .stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: var(--kleur1);} .stappenbalk .klaar a::before {background: var(--kleur1);} .stap.twee .blok.bestaandeKlant {display: none;} .stap.drie .regel {border: 1px solid var(--border-color); border-radius: 0;} .stap.drie .regel .inhoud .omschrijving {font-weight: normal;} .stap.drie .regel.actief {border: 1px solid var(--kleur1); background: rgb(239 127 102 / 5%);} .stap.drie .regel:hover {border: 1px solid var(--kleur1);} .stap.drie .links > div {max-width: 750px; margin:0 auto;} .stap.vier .gegevens .algemeen {display: none;} .stap.vier .factuurAfleverHouder .midden {width: 2%;} .stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {box-shadow: unset; background: #FBFBF9; width: 49%;} .stap.vier .totalen .vwHolder {margin-bottom:0} .stappenbalk .bezig::before {background-color: var(--kleur1);} .stappenbalk .klaar::after {border-color: var(--kleur1);} .totaalBetalingskosten {display: none;} .stap .totalen .stappenKnop a {flex:1} .stap.drie .regel .bedrag .gratis, .stap .totalen .bedrag .gratis {background: var(--kleur1);} .SMHolder {display: flex; gap: 20px;} .SMHolder .SMBlok {padding: var(--padding-50) var(--padding-30); display: block; cursor: pointer; text-align: center; transition: .3s all ease; user-select: none; flex: 1; position: relative; z-index: 2; box-sizing: border-box; background: var(--kleur3); text-decoration: none;} .SMHolder .SMBlok .snelTitel {position: absolute; top: 0; left: 0; margin: 0; background: var(--kleur1); width: 100%; color: #FFF; box-sizing: border-box; font-weight: normal;} .SMHolder .SMBlok:hover {opacity: .6;} .SMHolder .SMBlok em {display: block; margin: var(--padding-10) 0; font-size: 25px; font-weight: normal;} .SMHolder .SMBlok span {display: block; font-size: 14px; color: #888;} .bgegHolder {padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px} .bgegHolder .bgegBlok {padding:50px 30px;display:block;cursor:pointer;text-align:center;transition:.3s all ease;user-select:none;position:relative;z-index:2;box-sizing:border-box;background:#fafafa;text-decoration:none} .bgegHolder .bgegBlok p {margin:0} .bgegHolder .bgegBlok em {display:block;margin:10px 0;font-size:25px;font-weight:400} .bgegHolder .bgegBlok span {display:block;font-size:14px;color:#888} .kiyohHolder {display: grid; gap: var(--padding-20); grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr));} .kiyohHolder .kiyohReview {width: 100%; margin:0; border:0; transition: all .3s ease;} .kiyohHolder .kiyohReview:hover {background-color:#fff;} .kiyohHolder .kiyohReview .beoordeling .sterren {color:var(--kleur1);} .kiyohHolder .kiyohReview .score.score-0 {background: conic-gradient(var(--kleur1) 0%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-1 {background: conic-gradient(var(--kleur1) 10%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-2 {background: conic-gradient(var(--kleur1) 20%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-3 {background: conic-gradient(var(--kleur1) 30%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-4 {background: conic-gradient(var(--kleur1) 40%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-5 {background: conic-gradient(var(--kleur1) 50%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-6 {background: conic-gradient(var(--kleur1) 60%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-7 {background: conic-gradient(var(--kleur1) 70%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-8 {background: conic-gradient(var(--kleur1) 80%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-9 {background: conic-gradient(var(--kleur1) 90%,#f7f7f7 0);} .kiyohHolder .kiyohReview .score.score-10 {background: conic-gradient(var(--kleur1) 100%,#f7f7f7 0);} .kiyohHolder .kiyohReview:has(.score.score-0), .kiyohHolder .kiyohReview:has(.score.score-1), .kiyohHolder .kiyohReview:has(.score.score-2), .kiyohHolder .kiyohReview:has(.score.score-3), .kiyohHolder .kiyohReview:has(.score.score-4) {display: none;} a.maatkeuze {font-weight: normal; margin-left:0.5em; font-size:var(--body-font-size)} table.maatTabel {border-spacing: 0; padding:0; width: 100% !important; max-width: 800px; line-height: 1.35em;} table.maatTabel th {text-align:left; padding:5px; border-bottom: 1px solid #ccc; font-size: 12px; text-transform: uppercase;} table.maatTabel td {padding:5px 10px; border-bottom:1px solid #eee;} table.maatTabel td:first-of-type, table.maatTabel th:first-of-type {text-align: left; vertical-align: bottom; width:auto;} table.maatTabel tr td {background:#fff; transition: all .3s ease} table.maatTabel tr:last-of-type td {border-bottom:0;} table.maatTabel tr:hover td {background:#eee;} table.maatTabel p {margin:0;} .kenmerkMobielHouder.slide .filters .filterBovenkant {background: #FFF; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border-color);} .kenmerkMobielHouder.slide .filters .filterBovenkant .filtersSluiten {cursor: pointer; font-size: var(--h2-font-size); background: var(--kleur1); color: #FFF; padding: 7px 13px; line-height: 1; border-radius: 3px; border-bottom: 2px solid rgba(0,0,0,.2);} .kenmerkMobielHouder.slide .filters .filterknop a {display: block; position: absolute; border: 0; background-color: var(--kleur1); border-radius: 3px; text-align: center; padding: 15px; margin: 10px; text-decoration: none; width: calc(100% - 20px); box-sizing: border-box; color: #fff; z-index: 20; font-size: inherit; transition: none; line-height: 1; border-bottom: 2px solid rgba(0,0,0,.2)!important;} .kenmerkMobielHouder.slide .filters .filterknop a::before {content: "\f058"; font-family: "Font Awesome 5 Pro"; margin-right: 10px;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep {border-top: 0;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep::after {padding:16px; pointer-events: none;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel {font-size: 16px; font-weight: 400; text-transform: none; margin: 0; padding: 15px; line-height: 1;} .kenmerkMobielHouder.slide .filters .filterBovenkant .terugFilteren {display: inline-block; cursor: pointer; text-decoration: none; background: #fafafa; border: 1px solid #e2e2e2; padding: 10px 0; border-radius: 3px; color: #666; opacity: 0; width: 0; transition: .3s all ease; margin: auto 0;} .kenmerkMobielHouder.slide .filters.volgende .filterBovenkant .terugFilteren {padding: 10px 13px; margin-right: 10px;} .kenmerkMobielHouder.slide .filters .kenmerkgroep .kenmerken .kenmerk {padding: 0; margin: 0;} .kenmerkMobielHouder.slide .filters .kenmerkgroep .kenmerken .kenmerk .kenmerkAfbeelding {width: 16px; border-radius: 100%; position: relative; top: 2px; height: 16px !important; margin: auto 5px auto 0;} .kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen {flex: 1;} .kenmerkMobielHouder.slide .filters .filterBovenkant .alleFiltersWissen a {text-decoration: none; background: #fafafa; border: 1px solid #e2e2e2; padding: 7px 13px; border-radius: 3px; margin: 0; color: #666;} .kenmerkMobielHouder.slide .filters .kenmerkgroep .titel .groepActieveKenmerken {padding-top: 10px;} .kenmerkMobielHouder.slide .filters .kenmerkgroep .titel .groepActieveKenmerken:empty {display: none;} .kenmerkMobielHouder.slide .filters .kenmerkgroep a.filterGroepHerstel {position: absolute; top: 17px; right: 50px; text-decoration: none; background: #fafafa; border: 1px solid #e2e2e2; padding: 5px; color: inherit; border-radius: 3px; line-height: 1;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerken {padding: 10px 20px;} @media screen and (max-width: 1200px) { :root { --padding-5: 5px; --padding-10: 8px; --padding-15: 12px; --padding-20: 15px; --padding-30: 20px; --padding-40: 30px; --padding-50: 40px; --padding-80: 60px; --padding-100: 80px; } .vak.reviews div[class*="grid"] > div img {max-width: 100%;} .kassainkollommen > .rechts {width:300px} .shopTegel {grid-template-columns: 1fr 1fr 1fr;} } @media screen and (max-width: 900px) { :root { --padding-5: 5px; --padding-10: 5px; --padding-15: 8px; --padding-20: 10px; --padding-30: 15px; --padding-40: 20px; --padding-50: 25px; --padding-80: 40px; --padding-100: 50px; --body-font-size: 13px; --h1-font-size: 26px; --h2-font-size: 20px; --h3-font-size: 15px; --h5-font-size: 15px; } .resMenuHolderBg {z-index: 2;} .kenmerkMobielHouder.slide .filters {top:130px; height: calc(100% - 130px) !important;} .extrabovenkantHolder .extrabovenkant .usp {display: flex;} .extrabovenkantHolder .extrabovenkant .usp a {display: none;} a.logo {width: 160px; position: absolute; left:50%; transform: translateX(-50%); margin:0; min-width: unset;} .bovenkantHolder {position: unset; top: 0;} .bovenkantHolder .bovenkant {min-height: 60px;} .bovenkantHolder .bovenkant .shopitems {display: none;} .resMenuwinkelmandje #reswinkelMandjeAantal {display: inline-block; background-color: var(--kleur1); color: #FFF; padding: 0px 7px 0 7px; border-radius: 100%; line-height: 19px; top: -7px; right: -7px; width: auto} .bovenkantHolder .bovenkant .thuiswinkelWaarborg {margin: auto 10px auto auto; width:auto} .bovenkantHolder .bovenkant .thuiswinkelWaarborg img.naastElkaar {display:none;} .bovenkantHolder .bovenkant .thuiswinkelWaarborg img.onderElkaar {display: block; height:36px; width:auto;} .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {position: absolute; left:0;} .bovenkantHolder .bovenkant .zoekenToggle {display: none; position: absolute; left:50px; font-size:22px; font-weight: 100;} .bovenkantHolder .bovenkant .zoekenHolder {display: block; width: auto; position: absolute; left: 0; right: 0; top: 88px; padding: 15px 40px; background-color: #FFF; z-index: 3; max-width: none; pointer-events: all; } .bovenkantHolder .bovenkant .zoekenHolder.mandje {display: none;} .zoeken .veld #zoekWoordID {font-size: 13px; } .bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop::before {font-size: 15px;} .bovenkantHolder .bovenkant .resMenubalk {margin-left:0;} .bovenkantHolder .bovenkant .resMenuHolder {top:60px; padding:20px; max-width:75vw} .bovenkantHolder .bovenkant .resMenubalk .resMenubalkinhoud a.resMenucategorieknop .resMenucategorienaam {display: block; font-size: 10px; font-weight: 700; position: relative; text-transform: uppercase; text-align: center;} .bovenkantHolder .bovenkant .resMenubalk .resMenubalkinhoud a.resMenucategorieknop .resMenucategorienaam::before {font-family: "Font Awesome 5 Pro"; font-size: 18px; content: "\f0c9"; display: block; margin: 0 auto 2px; text-align: center;} .resMenuHolder {top: 100%;} .bovenkantHolder .bovenkant .resMenubloktitel {display: none} .resMenublokinhoud .resMenuItem a {border-bottom: 0px solid var(--border-color); line-height: 1; align-items: center; padding: 13px; font-size: 16px;} .resMenublokinhoud .resMenuItem a::after {content: "\f178"; font-family: "Font Awesome 5 Pro"; font-size: 13px; color: #b5b5b5; border: 1px solid transparent; width: 31px; height: 31px; right: 5px; top: 5px; position: absolute; box-sizing: border-box; text-align: center; line-height: 30px; border-radius: 3px;} .resMenublokinhoud .resMenuItem .openklapper::before {display: none;} .resMenublokinhoud .resMenuItem.inloggen a::before {content: ""; display: inline-block; background: url(/skin/images/user.svg) no-repeat; background-position: center; background-size: contain; width: 13px; filter: invert(1); height: 13px; top: 1px; position: relative; margin-right: 8px;} .resMenublokinhoud .resMenuItem.winkelmand a::before {content: ""; display: inline-block; background: url(/skin/images/shopping-cart.svg) no-repeat; background-position: center; background-size: contain; width: 15px; filter: invert(1); height: 15px; top: 1px; position: relative; margin-right: 8px;} .resMenublokinhoud .resMenuItem.favorieten a::before {content: ""; display: inline-block; background: url(/skin/images/favourite.svg) no-repeat; background-position: center; background-size: contain; width: 13px; filter: invert(1); height: 13px; top: 0; position: relative; margin-right: 8px;} .resMenublokinhoud .resMenuItem.favorieten a span {font-size: 11px; min-width: 15px; border-radius: 100%; border: 0; margin: auto 0 auto 10px; color: #FFF; background-color: var(--kleur1);} .resMenuinhoud {display: flex; flex-direction: column; height: 100%;} .resMenublok.een {border-top: 0px solid var(--border-color); order:2; margin-top:30px;} .resMenublokinhoud .resMenuItem.active > a {color: var(--kleur1); font-weight: bold;} .resMenublokinhoud .resMenuItem.active a::after {color: var(--kleur1)} .resMenublokinhoud .resMenuItem .laag1 a {padding: 13px 30px; font-size: 12px; color: #262626;} .resMenublokinhoud .resMenuItem .laag2 a {padding: 13px 50px;} #speedsearchResult { left: 0; top: 52px; right: 0; max-width: var(--max-width);} #speedsearchResult .houder {max-height: calc(100vh - 85px);} .winkelmenuHolder {display: none;} .flickity-nav .custom-nav {display: none;} .fancybox-content.inhoud {top: 30vh; bottom: 0; max-width: 100vw; min-width:100vw; right: 0; margin: 0 !important; left:0 !important; padding:var(--padding-40)} .art-Sheet {margin-top: 72px; padding-top: 0;} .art-Sheet:has(.stap) {margin-top: unset; padding-top: 30px;} .vak {padding: 0;} .artikel.detail .vak {padding:20px 0;} .vak.reviews {margin:unset; min-height: 340px;} .vak.reviews div[class*="grid"] > div img {max-width: 100%;} .vak.reviews .midden > div:first-child {display: none;} .vak.reviews div[class*="grid"] {grid-template-columns: 1fr;} .vak.mobielFlex {display: flex;flex-direction: column;} .vak.mobielFlex .mobielBoven {order: -1;} .productCarousel .artikel {width: calc((100% - (var(--padding-30) * 1)) / 2); margin-left: var(--padding-30);} .shopHeader {padding:0; background:transparent; margin-bottom:0;} .shopHeader > p {display: none;} .resCategorieen {display: none !important;} .shopTegel {grid-template-columns: 1fr 1fr;} .shopTegel .artKortingPrijsPercentage {transform: scale(0.8); transform-origin: top right;} .shopTegel .label {transform: scale(0.8); transform-origin: top left;} .shopSortOptie {position: sticky; *top:58px; top: 0; z-index:3; background-color: #fff; align-items: center; padding:10px 0;} .shopSortOptie .sorteerLijst {width: 100%; margin: 0 !important; position: relative;} .shopSortOptie .sorteerLijst select {width:100%; height:36px; padding-left:26px} .shopSortOptie .sorteerLijst::before {content: "\f0dc"; font-family: "Font Awesome 5 Pro"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #000;} .kenmerkMobielHouder {margin-right: 0; width: 100%; margin:0 !important;} .kenmerkMobielHouder.slide .toonFiltersKnop {background-color: var(--kleur1); margin:0;} .kenmerkMobielHouder.slide .toonFiltersKnop::before {content: "\f0b0"; font-family: "Font Awesome 5 Pro"; margin-right: 10px;} .artikel.detail .detailinkollommen {display: block;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery {margin:0;} .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .carousel-cell-groot .verhouding {height:250px; max-height:250px; padding-bottom:0; min-height: unset;} .artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery img {max-height: 40px !important; border:0;} .artikel.detail .aantalMinPlus {display: none;} .artikel.detail .detailinkollommen .rechts .blok .omschrijving h1 {font-size: var(--h3-font-size);} .artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop {display: block;} .artikel.detail .detailinkollommen .laatst-bekeken .shopTegel .artikel {width:calc((100% - (var(--padding-30) * 1)) / 2)} .artikel.detail .detailinkollommen .rechts .blok .SERIEcontainer .shopLijst {margin:0 ;display: grid; grid-template-columns:repeat(auto-fill, minmax(min(60px, 100%), 1fr));} .artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen {grid-template-columns: repeat(auto-fill, minmax(min(56px, 100%), 1fr));} .artikel.detail .detailinkollommen .rechts .blok .bestellen {padding:var(--padding-20); margin:0; background:#fff; z-index:5; position: fixed; bottom:0; left:0; right:0; box-shadow: var(--box-shadow-venster);} #extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding:0 20px;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel:last-child {border-bottom: 0 !important;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .inhoud {align-items: flex-start; gap:5px} .breadcrumbs {transform: scale(0.9); transform-origin: top left;} .stap.twee .links {grid-template-columns: 1fr;} .stap.twee .links > div:last-child {padding: 0} .kassainkollommen > .rechts {width: unset;} }