:root { --color1: #105585; --color2: #105585; --color3: #000000; --color4: #eee; --color5: #aa2123; --fontFamily1: "Raleway", Helvetica, Arial, Sans-Serif; --fontFamily2: "Source Sans Pro", Helvetica, Arial, Sans-Serif; --bodyFontSize: ; --h1Size: 30px; --h2Size: 22px; --h5Size: 18px; --space10: 10px; --space15: 15px; --space20: 20px; --space30: 30px; --space40: 40px; --space50: 50px; --space80: 80px; --space100: 100px; } body {font-family: var(--fontFamily2); background: #fff;} ::selection {background: #000; color: #FFF;} textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {color: var(--color2); border-radius: 4px; border: 1px solid #cbd4dd;} input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {color: var(--color1);} h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover, h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: "Work Sans", Helvetica, Arial, sans-serif; color: var(--color2);} h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-family: var(--fontFamily1); font-size: var(--h1Size);} h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-family: var(--fontFamily1); font-size: var(--h2Size); font-weight: 600;} h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {color: #7a94a4; font-size: var(--h5Size); font-weight: normal;} h1 {font-weight: 900;} h1 + h5 {margin-top: -0.70em; margin-bottom: 1em;} h2 + h5 {margin-top: -0.70em; margin-bottom: 1em;} a.logo {margin: auto 0; outline: 0;} a.logo img {width: 220px; margin-right:10px} header {box-shadow: 0 0 3px 0 rgb(0 49 82 / 20%); border-bottom: 1px solid #e3e9ed; position: sticky; top: 0; z-index: 10;} .extrabovenkantHolder {background: var(--color4); border:0;} .extrabovenkantHolder .extrabovenkant .slogan {padding: 0; margin: auto auto auto 0;} .extrabovenkantHolder .extrabovenkant .slogan a {text-decoration: none; color: #FFF; font-size: 12px;} .extrabovenkantHolder .extrabovenkant .slogan a i {margin-right: 5px;} .bovenkantHolder .winkelmenu {display: flex; gap: 30px;} .bovenkantHolder .winkelmenu .rechts {margin-left: auto; gap: 30px; display: flex;} .bovenkantHolder .winkelmenu li {position: static; margin:0;} .bovenkantHolder .winkelmenu li .t.hoverMenuActief::after {margin: auto auto auto 10px; color: #7a94a4;} .extrabovenkantHolder .extrabovenkant .uspHolder {display: grid; margin: auto 0; grid-template-columns: 1fr; padding: 0; gap: 20px;} .extrabovenkantHolder .extrabovenkant .uspHolder .usp {color: #FFF; flex: 1; font-weight: 500; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .extrabovenkantHolder .extrabovenkant .uspHolder .usp::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; color: var(--color5); margin-right: 10px;} .bovenkantHolder {background: var(--color1); border: 0;} .winkelmenuHolder {background: var(--color4);} .art-menu ul {visibility: visible; position: static; opacity: 1; box-shadow: none; border:0;} .art-menu li {margin-right:20px;} .art-menu li.separatorHouder {display: none;} .art-menu li a .t {padding: 15px 0; font-weight: 600; color: #ccc; font-size: 15px;} .art-menu li a .t:hover, .art-menu li a.active .t {color: #fff;} .art-menu.winkelmenu li a .t {color:var(--color1)} .art-menu.winkelmenu li a .t:hover, .art-menu.winkelmenu li a.active .t {color: #000;} a.knop, .button, a.button, button {font-family: inherit; font-size: 15px; padding: 10px 15px; border-radius: 4px; background: var(--color5); line-height: 1; font-weight: 700; text-decoration: none !important;} .shopNavigatie .button, button {background-color: #aaa;} section.grijs, .vak.grijs {background: #eff6fb;} .inhoud.max1200 {max-width: 1200px; margin-left: auto; margin-right: auto;} .bovenkantHolder .bovenkant .zoekenHolder {margin: auto; margin-right:30px;} .zoeken {background: #FFF; border: 0; border-radius: 3px; min-width: 200px;} .zoeken .veld {width: 100%;} .zoeken .veld #zoekWoordID {padding: 11px; color: #bac3cd;} .zoeken .veld #zoekWoordID:focus {color: #253491 !important;} .zoeken .knop:before {font-weight: normal; font-size: 22px; color: #94a3b8;} .speedsearchResultBg {background: unset !important;} #speedsearchResult {border-radius: 3px; max-width: 1520px; margin: 0 auto; padding: 0px;} #speedsearchResult .houder {display:block; border-radius: 3px; border: 0; width: 650px; box-shadow: 0 20px 50px 0 rgba(0,0,0,0.20); font-size:inherit; box-sizing: border-box; padding: 20px;} .speedSearch.categorie {order:1;} .speedSearch.artikelen {width: 100%;} .speedsearchLoader {display: none;} #speedsearchResult .houder .speedSearch ul li a {border:0; display: flex; border-radius: 4px;} #speedsearchResult .houder .speedSearch ul li a .omschrijving {margin: auto 0; font-weight: normal;} #speedsearchResult .houder .speedSearch ul li a strong {font-weight: bold; color: var(--color1);} #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size:14px;} #speedsearchResult .houder .speedSearch .resultaat {padding: 10px; margin: 0; color: var(--color2); font-weight: bold; font-size: 17px;} #speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;} #speedsearchResult .houder .speedSearch ul li a:hover {background: rgb(15 140 207 / 7%);} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: darken;} #speedsearchResult .houder .speedSearch ul li {margin: 0;} #speedsearchResult .houder .knopAllesOnder a {padding: 15px 20px; border-radius: 4px; line-height: 1; background: var(--color5); border: 0; color: #fff; font-size: 16px; font-weight: 600;} #speedsearchResult .houder .knopAllesOnder a:hover {background: #444;} .winkelwagenHouder .winkelknop {background: unset; padding: 10px;} .winkelwagenHouder .winkelknop .icoon::before {font-weight: lighter; color: #FFF; font-size: 22px; content: "\f290";} .winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: #FFF; color: #000; padding:1px 6px 0 6px; border-radius: 100%; line-height: 17px; top: -10px; right: -10px;} .winkelwagenHouder .winkelknop .aantal {color: var(--color1);} .pageFooterHolder {background-color: var(--color1);} .pageFooterKnoppenHolder {background-color: var(--color3); border:0;} .pageFooter h2, .pageFooter .h2 {font-size: 18px; font-weight: 700;} .pageFooterHolder .pageFooter {font-size: 15px;} .pageFooterHolder a {text-decoration: none;} .pageFooterHolder a > em {color: #FFF !important; font-size: 18px; margin-right: 5px;} .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {opacity: .5; margin-right: 10px;} .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a:hover {opacity: 1;} .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {display: none;} .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: .5;} .shopSortOptie {border: 0; padding: 0; margin: 20px 0;} .shopSortOptie a.actief {color: var(--color1)!important; background: var(--color4);} .shopSortOptie > .pdfKnop {margin-left:20px;} /* .shopSortOptie .aantalPerPagina {display: none;} */ .shopSortOptie .sorteerLijst {margin: auto 0 auto auto;} .artikel .bestellen .bestelknop input {margin-right:0;} .shopCategorieHolder .categorie {border-radius: 4px; border: 2px solid var(--color4); transition: .3s all ease;} .shopCategorieHolder .categorie:hover {box-shadow: unset; border-color: var(--color1); background: var(--color4);} .shopCategorieHolder .categorie .inner {display:flex; flex-direction: column; height:100%;} .shopCategorieHolder .categorie .titel {background: var(--color4); border-radius: 0 0 4px 4px; flex-grow: 1;} .shopCategorieHolder .categorie .titel h2 {font-weight: 600; color: var(--color2); font-size: 15px; text-overflow: unset; white-space: unset;} .shopCategorieHolder .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;} .shopCategorieHolder .afbeeldingHouder .verhouding {padding-bottom: 75%;} .shopLijst .artikel .bestellen {margin-left:auto; min-width: 240px;} .shopLijst .artikel .prijzen {width: auto;} .shopLijst .artikel .prijzen .btwinfo {display: inline-block} .shopLijst .artikel .bestellen {margin: auto 0 auto auto !important;} .shopLijst .artikel .bestellen .bestelknop {width: 100% !important;} .shopLijst .artikel .bestellen .bestelknop a.wButBestel {margin: 0;} .shopTegel .artikel .inner {border-radius: 4px; border: 2px solid #eee;} .shopTegel .artikel .inner:hover {box-shadow: unset; border-color: var(--color1); background: var(--color4);} .shopTegel .artikel .inner .afbeeldingHouder .verhouding {padding-bottom: 75%;} .shopTegel .artikel .inner .afbeeldingHouder img {border-radius: 4px 4px 0 0; mix-blend-mode: darken;} .shopTegel .artikel .omschrijving h2.titel a {color: var(--color2);} .shopTegel .artikel .inner .prijzen {line-height: 1.5em; margin: 15px 0 0 0;} .shopTegel .artikel .inner .prijzen .prijs {font-size: 17px; color: var(--color2);} .shopTegel .artikel .inner .prijzen .van {opacity: 1; color: #7a94a4;} .shopTegel .artikel .inner .rechtsboven div a {font-size: 20px; } .shopTegel .artikel .inner .rechtsboven div.aan a {color: var(--color5);} .shopTegel .artikel .inner .rechtsboven div a i {font-weight: normal;} .shopTegel .artikel .inner .rechtsboven div.aan a i {font-weight: bold;} .shopTegel .artikel .inner .meerinfo {margin-top:5px; margin-bottom:auto;} .shopTegel .artikel .inner .kenmerkArt {padding:3px; font-size:12px; letter-spacing: -0.05em; grid-template-columns: 1fr 1fr;} .productCarousel .artikel {width: calc(25% - 15px); } .shopCompact .artikel .artikelnr {width: 80px;} .shopCompact .artikel .bestellen {width: unset; min-width: unset;} .shopCompact .artikel .bestellen .bestelknop a.wButBestel {font-size: 13px; padding: 8px 10px;} .shopCompact .artikel .prijzen {font-size: 14px;} .artikel .bestellen .bestelknop a.wButBestel {background-color: var(--color5); line-height: 1em !important;} .artikel.detail .shopDetailModernKenmerken {margin: 0;} .kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 5px 15px; line-height:1.35em; grid-template-columns: 1fr 2fr; color: #000; border: 0; font-size: 15px;} .kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: bold; color: #000;} .kenmerkArt:nth-child(odd), .artikelGewicht:nth-child(odd) {background-color: #f1f5f9;} .kenmerkArt .kenmerken .kenmerk {display: flex;} .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje {order:3; z-index:5; text-align: right; margin-left:auto; width:20px; transform-origin: right; line-height: 0; transition: all .3s ease} .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje:hover {transform:scale(5);} .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje:hover img {border-radius: 1px;} .kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje img {margin-left:10px; width:100% !important; height:auto !important; border-radius: 5px;} .kenmerkArt .kenmerken .kenmerk .toevoeging {margin-left: auto;} .kenmerkArt .kenmerken .kenmerk .toevoeging::before, .kenmerkArt .kenmerken .kenmerk .toevoeging::after, .kenmerkArt .kenmerken .kenmerk::after {display: none;} .kenmerkgroepKeuze.tags .artikel.actief {border-color: var(--color1); background: var(--color4);} .kenmerkgroepKeuze.afbeeldingen .artikel img {mix-blend-mode: darken;} .kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: var(--color1); background: var(--color4);} .art-sidebar1 .filters {border: 0;} .art-sidebar1 .filters .kenmerkgroep {padding: 0; border: 0; margin: 0 0 15px 0;} .art-sidebar1 .filters .kenmerkgroep:last-child {margin: 0;} .art-sidebar1 .filters .kenmerkgroep a {padding: 10px 15px; cursor: pointer; overflow: hidden; border-top: 0; background: var(--color4); border-radius: 5px; margin: 0; position: relative; font-size: 15px; color: var(--color1); display: flex; align-items: center;} .art-sidebar1 .filters .kenmerkgroep a.titel::after {content: "\f0d7"; font-family: "Font Awesome 5 Pro"; font-weight: bold; font-size: 17px; transition: .3s all ease; background: #FFF; border-radius: 5px; padding: 3px 6px; box-sizing: border-box; line-height: 1; margin-left: auto;} .art-sidebar1 .filters .kenmerkgroep a.titel.open::after {transform: rotate(180deg);} .art-sidebar1 .filters .kenmerkgroep .kenmerken {padding: 0 15px; z-index: 1; background: var(--color4); overflow: hidden; line-height: 1; position: relative; margin-top: 0; height: 0; opacity: 0; transition: .3s all ease; margin: 0; top: -3px; border-radius: 0 0 5px 5px;} .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk {padding: 5px;} .art-sidebar1 .filters .kenmerkgroep.open .kenmerken {height: auto; opacity: 1; padding: 15px;} .art-sidebar1 .filters .actieveKenmerken {padding: 0; margin: 20px 0 0 0; border: 0; color: var(--color3);} .art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {background-color: var(--color4);} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .omschrijving {font-size: 16px;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .kenmerkAfbeelding {display: none;} .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: #FFF;} .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"] {top: 0;} .art-sidebar1 .filters .kenmerkgroep .kenmerken label .aantal {float: unset;} .artikel.detail .detailinkollommen {display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0;} .artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {margin: 0; width: 100%;} .artikel.detail .bestellen {display: flex; margin: 20px 0;} .artikel.detail .bestellen .bestelknop {width: 90%;} .artikel.detail .bestellen .favorieten {margin: 0;} .artikel.detail .bestellen .favorieten a {display: block; line-height: 1; color: rgb(255 165 0 / 50%); padding: 12px 15px; font-size: 20px; border: 1px solid #cbd4dd; border-radius: 4px; font-weight: 600;} .artikel.detail .bestellen .favorieten.aan a {color: #ffa500;} .artikel.detail .bestellen .favorieten .image {padding: 0;} .artikel.detail .bestellen .favorieten .image i {font-weight: bold;} .artikel.detail .bestellen .bestelknop a.wButBestel {width: 100% !important; font-weight: bold; margin-right: 10px; padding: 9px; box-sizing: border-box; border-radius: 4px;} .artikel.detail .bestellen .bestelknop .wButBestel::before {display: none;} .artikel.detail .prijzen {margin: 15px 0;} .artikel.detail .prijzen .prijs {color: var(--color2); font-size: 20px;} .artikel.detail .links > .vak {margin: 30px 0;} .artikel.detail .vak.meebestellen {position: relative;} .artikel.detail .vak.meebestellen::after {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #f1f5f9; z-index: -1;} .artikel.detail .vak.meebestellen .inhoud {padding: 30px 0; margin: 50px 0;} .artikel.detail .vak.meebestellen .inhoud .h3 {font-size: 22px; font-weight: 600;} .artikel.detail .detailinkollommen .rechts .artikelInfo {position: sticky; top: 175px; max-width: 600px;} .artikel.detail .formuleHolder {background: #f1f5f9; margin: 20px 0; border-radius: 5px;} .artikel.detail .formuleHolder.reset {display: none;} .artikel.detail .formuleHolder > .titel {background-color: var(--color1); color: #FFF; padding: 10px 20px; border-radius: 5px 5px 0 0; margin: 0; font-size: 15px;} .artikel.detail .formuleHolder label {font-size: 13px; font-weight: bold; color: var(--color2);} .artikel.detail .formuleHolder .content {padding: 20px; box-sizing: border-box;} .artikel.detail .formuleHolder .content .formuleMeerprijs {color: #7a94a4; font-size: 12px; font-weight: 400;} .artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs {display: flex; align-items: center; margin: 20px 0 0 0;} .artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs .prijs {color: var(--color2); font-size: 20px; font-weight: bold;} .artikel.detail .formuleHolder .content .totaalFormuleVariatiePrijs .toelichting {font-size: 14px; margin-right: 10px;} .artikel.detail .voorraad .status .toelichting {background: #f1f5f9; border-radius: 5px; color: var(--color1); font-size: 13px; padding: 10px; font-weight: bold;} .artikel.detail .voorraad .status .toelichting::before {content: "\f111"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; font-weight: bold; color: var(--color1); font-size: 7px; vertical-align: middle;} .artikel.detail .voorraad .status .toelichting.positief {background: #e9fbee; color: var(--color5);} .artikel.detail .voorraad .status .toelichting.positief::before {color: var(--color5);} .artikel.detail .voorraad .status .toelichting.negatief {background: #f8ecec; color: #c05252;} .artikel.detail .voorraad .status .toelichting.negatief::before {color: #c05252;} .volledigGallery .carousel-cell-groot .verhouding {padding-bottom: 75%;} .thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: var(--color1);} .winkelwagenHouder .winkelwagen {border-radius: 4px; width: 600px;} .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--color5);} .kassaArtikelen .artikel .tekst a.kassaArtikelTitel {color: var(--color2); font-size: 14px;} .artikel .artikelnr {font-size: 13px;} .prijzen .prijs {color: var(--color2);} .prijzen .relatieBtwPrijs {opacity:.7} .artikel .aantalMinPlus {border-color: #cbd4dd; border-radius: 4px;} .artikel .labels .label {background: #0595ee; color: #FFF;} .artikel .labels .label img {width: 45px;} .kassaArtikelen .artikel .aantallen input {border-radius: 4px !important;} .kassaArtikelen .artikel .tekst .meerinfo .voorraad {display: none;} .stap .totalen .totaalTeBetalen td {font-size: 100%;} .kassainkollommen > .rechts .blok, .couponcodeHouder {border: 1px solid var(--color1); background: var(--color4); border-radius: 4px;} .stap .totaalExclBtw td {font-weight: 600; color: var(--color2);} .kassainkollommen > .rechts .blok .totalen {font-size: 14px;} .stap .totalen .stappenKnop a {padding: 15px 20px; background: var(--color5);} .stap .totalen .totaalTeBetalen td {color: var(--color2); font-size: 16px;} .stap .totalen .totaalArtikelen .bedragExclusiefRelatie .relatieBtwPrijs {display: none;} .stap .totalen .bedrag .gratis {background-color: var(--color5);} .stappenbalk .bezig::before {background-color: var(--color1);} .stappenbalk .bezig .naam {color: var(--color1);} .stappenbalk .klaar::after {border-color: var(--color5);} .stappenbalk .klaar a::before {background-color: var(--color5);} .kassainkollommen > .rechts .blok.bestaandeKlant h2 {font-size: 18px;} .kassainkollommen>.rechts .sticky {top: 170px;} .stap .blokholder {border-radius: 0; padding: 0; background: transparent;} .stap .blokholder > .titel {color: var(--color2); margin-bottom: 5px;} .stap.twee .links>div, .stap.drie .links>div {width: 100%; margin: 0;} .stap.twee .links, .stap.drie .links {margin: 0; display: grid; gap: 20px;} .stap.twee .adres .geselecteerd {border: 2px solid var(--color5) !important;} .stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: var(--color5);} .stap.twee .tekstNieuwAdres a {font-family: inherit; font-size: 15px; padding: 15px 20px; border-radius: 4px; margin-bottom: 10px; background: var(--color5); line-height: 1; font-weight: 700; text-decoration: none !important;} .typeKlant input[type="radio"]+label::before, .geslacht input[type="radio"]+label::before {top: 16px;} .typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {color: var(--color5);} .typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color: var(--color5); color: var(--color2);} .typeKlant input[type="radio"]+label:hover, .geslacht input[type="radio"]+label:hover {border-color: var(--color5);} .stap.drie .regel .bedrag .gratis {background-color: var(--color5);} .stap.drie .regel.actief {border: 2px solid var(--color5) !important; background-color: #FFF !important;} .stap.drie .regel.actief input[type="radio"]:checked::before {color: var(--color5);} .inschrijvenKolom .contactpersoon .voornaam {width: 50%;} .inschrijvenKolom .contactpersoon .tussenvoegsel {display: none;} .inschrijvenKolom .contactpersoon .achternaam {width: 50%;} #inschijfformulier_holder .valutakeuze label {font-weight: bold;} #inschijfformulier_holder .valutakeuze label::after {font-weight:normal; line-height:1.45em; content:"Please choose the correct currency, once your account is setup you cannot change this setting. You must register a second account, with a second email address to change the currency."; display:block; margin-bottom:5px;} .bovenkantHolder .bovenkant .resMenubalkinhoud {display: flex;} .bovenkantHolder .bovenkant .resMenubalkinhoud a {color: #FFF;} .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop {order: 1;} .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop i, .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje i {display: none;} .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenucategorieknop::before {font-weight: lighter; color: #FFF; font-size: 22px; content: "\f0c9"; font-family: "Font Awesome 5 Pro";} .bovenkantHolder .bovenkant .resMenubalkinhoud a.resMenuwinkelmandje::before {font-weight: lighter; color: #FFF; font-size: 22px; content: "\f290"; font-family: "Font Awesome 5 Pro";} .resMenubloktitel {background-color: rgb(15 140 207 / 10%); border-bottom: 1px solid #eee; color: #000; text-transform: none; font-size: 15px; font-weight: 600; padding: 10px 15px;} .resMenublokinhoud .resMenuItem.active > a {color: var(--color1);} .resMenublokinhoud .resMenuItem a {border-bottom: 1px solid #eee; color: var(--color2);} .resMenuItem.favorieten a span, .resMenuItem.verlanglijst a span {border: 2px solid var(--color1); background: var(--color4); font-size: 13px; font-weight: 600;} .hoverMenu {left: 0; right: 0; width: 100%; box-shadow: 0 70px 120px 0 rgb(0 0 0 / 10%); border: 1px solid #eee; border-radius: 0 0 4px 4px;} .hoverMenu .categorie {padding: 25px 25px 0; display: none;} .hoverMenu .kolommen {padding: 30px; display: flex; flex-wrap: wrap; min-height: 200px;} .hoverMenu .kolommen .kolom {min-width: 180px; padding: 0; margin-right:20px; width:auto;} .hoverMenu .kolommen .kolom a {font-size: 14px; color: var(--color2);} .hoverMenu .kolommen .kolom ul li a::before {display: none;} .hoverMenu .kolommen .kolom a:hover {text-decoration: none; color: var(--color1); padding-right:0;} .hoverMenu .kolommen .kolom .afbeelding {width: 100%; max-width: 150px; line-height: 0; margin: 0 0 20px; position: relative;} .hoverMenu .kolommen .kolom .afbeelding a img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 90%; max-width: 90%; margin: auto; height: auto !important; width: auto !important;} .hoverMenu .kolommen .kolom .afbeelding .verhouding {display: block; padding-bottom: 100%;} .hoverMenu .kolommen .kolom .titel a {font-size: 17px; font-weight: 600; color: var(--color2); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 0 0 10px 0;} .hoverMenu .kolommen .kolom > ul li a {line-height: 1.35em; padding:5px 0; } .hoverMenu .kolommen .kolom > ul.gesloten {max-height: 150px; overflow: hidden;} .hoverMenu .kolommen .kolom > ul.open {max-height: 100%;} .hoverMenu .kolommen .kolom .tonen {color: var(--fontkleur); cursor: pointer; padding: 5px 0; text-decoration: underline; font-weight: 500; margin-bottom:20px;} .blader_holder {margin-top: 20px; overflow: auto; border: 0; padding: 0;} .blader_tabel1 {width: auto;} .blader_holder table {table-layout: fixed; margin: 0 auto; border: 1px solid #e2e2e2; border-radius: 0; overflow: hidden;} .blader_holder table td {vertical-align: middle; line-height: 1; padding: 0;} .blader_holder table td a, .blader_holder table td .blader_tabel1_s {display: block; border: 0; font-size: 13px; border-radius: 0; height: 24px; border-right: 1px solid #e2e2e2; width: 32px; text-align: center; line-height: 1; padding-top: 10px; margin: 0; text-decoration: none; color: #b7b7b7;} .blader_tabel1_n, .blader_tabel1_s {border: 0; border-radius: 0; height: unset; font-size: inherit; line-height: 1; width: 100%;} .blader_holder table td:last-child a, .blader_holder table td:last-child .blader_tabel1_s, .blader_holder table td:last-child img {border-right: 0;} .blader_holder table td a img {padding: 0; border: 0; vertical-align: top; display: inline-block; width: 13px;} .blader_holder table td > img {display: none;} .blader_tabel1_n:hover, .blader_holder table td a:hover {background-color: #f1f5f9; color: var(--color1);} .blader_tabel1_n:hover a {background-color: #f1f5f9; color: var(--color1);} .blader_holder table td .blader_tabel1_s {background-color: var(--color1);} /* Prijsafspraken en kortingstabellen */ .kortTab1 {font-size: 15px; width: 100%; line-height: 1.75em;} .kortTab1 th {text-align: left;} .kortTab1 td {vertical-align: top;} .kortTab1 td.aantallen, .kortTab1 td.prijsNaKorting {white-space: nowrap; padding: 0;} .kortTab1 td.toelichting {text-align: center;} .kortTab1 td.prijsNaKorting {text-align: right; color: var(--color5);} .kortTab2 {font-weight: bold; border-bottom:1px solid #e2e2e2; padding-top: 5px;} .kortTab1 .prijsNaKorting {font-weight: bold;} .prijsAfspraakHolder {margin: 20px 0; transition: .3s all ease; border-radius: 5px; background: #f1f5f9;} .prijsAfspraakHolder.open {max-height: 100vh;} .kortTab1 {width:100%; font-size: 14px;} .kortTab2 {font-weight: bold; border-bottom:1px solid #BFBFBF; display: none;} .kortTab1 .prijsNaKorting {font-weight: bold; color: #6AB65D;} .kortTab1 th {display: none;} .kortTab1 td {border-bottom: 1px solid #ddd; padding: 5px 20px !important;} .kortTab1 tr:last-child td {border: 0;} .prijsafspraakLos .kortTab1 .toelichting {display: none;} .prijsafspraakLos .kortTab1 .toelichting span {display: none;} .prijsafspraakLos .kortTab1 {width: 100%; color: #111111;} .prijsafspraakInLijst {display: none;} .prijsafspraakInLijst .kortTab1 .toelichting {display: none;} .prijsafspraakInLijst .kortTab1 .toelichting span {display: none;} .prijsafspraakInLijst .kortTab1 {width: auto;} .prijsafspraakKnop {box-sizing: border-box;background: #f1f5f9;font-weight: bold;position: relative;background-color: var(--color1);color: #FFF;padding: 10px 20px;border-radius: 5px 5px 0 0;margin: 0;font-size: 15px;line-height: 1.35em;} #tabPrijsafspraakPercentageInhoud br {display: none;} /* Einde prijsafspraken en kortingstabellen */ #tabBijlagenInhoud {font-size: 14px; color: #333;} #tabBijlagenInhoud table {width: auto; line-height: 55px;} #tabBijlagenInhoud td.blg1 a img {display: none;} #tabBijlagenInhoud td.blg1 a {text-decoration: none;} #tabBijlagenInhoud td.blg1 a::before {content: "\f33d"; font-family: "Font Awesome 5 Pro"; font-size: 18px; color: var(--color1); font-weight: normal; border: 1px solid #ddd; background: #FFF; border-radius: 50%; padding: 13px 15px; margin-right: 12px;} .tabsV2 .inhoud img {max-width:100%;} .configurator .tekstblokBoven h2 {font-size:32px;} .configuratieOptie .optie .afbeelding {position: relative;} .configuratieOptie .optie .afbeelding img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto; height: auto!important; width: auto!important;} .configuratieOptie .optie .afbeelding .verhouding {padding-bottom: 75%;} .configuratieOptie .optie::before {z-index: 2;} .configuratieTotaal {border: 2px solid var(--color2); position: sticky; top:100px; bottom:-3px; background: #f1f5f9; display:block; left:0; right:0; padding: 20px; z-index:50; border-radius:3px; align-items: center;} .configuratieTotaal .totaalPrijs { display: flex; gap:20px; flex-grow: 1; } .configuratieTotaal .totaalPrijs .uitleg {font-weight: bold; font-size: 17px; } .configuratieTotaal .totaalPrijs #configuratieTotaalPrijsInc {display: none;} .configuratieTotaal .totaalPrijs .prijs {font-size: 18px; margin-left: auto; font-weight: bold; color: var(--color2);} .configuratieTotaal .totaalPrijs .btw {color: #a9a9a9; font-size: 12px; line-height: 1; display: none;} .configuratieTotaal .bestellen {margin: auto 0;} .configuratieTotaal .wrappert { display: flex; gap: 30px; width:100%;} .verzameldeArtikelen ul:empty{display:none} .verzameldeArtikelen ul {list-style: none; padding: 0; margin: 0;} .configuratieOptie .detailKnop {z-index: 21;} .bestelmatrixHolder {margin-top: 30px;} .bestelmatrixHolder table tr th .artikel {display: block; text-align: center;} .bestelmatrixHolder table tr th .artikel .afbeeldingHouder .verhouding {padding-bottom: 35%;} .bestelmatrixHolder table tr td {text-align: center; vertical-align: top;} .bestelmatrixHolder table tr td:first-child {vertical-align: middle;} .bestelmatrixHolder table tr td .artikel {position: relative;} .bestelmatrixHolder table tr td .artikel .afbeeldingHouder {width: 100px;} .bestelmatrixHolder table tr td .artikel .bestellen .bestelknop .aantalMinPlus {margin: 0 auto; max-width: 100px !important;} .bestelmatrixHolder .artikel .bestellen .bestelknop input {margin-right:0;} .bestelmatrixHolder .artikel .aantalMinPlus .min, .bestelmatrixHolder .artikel .aantalMinPlus .plus {display: block;} .bestelmatrixHolder table tr td .artikel .artikelnr > .titel {display: none;} .bestelmatrixHolder table tr td .artikel .tooltip {position: absolute; left: 0; top: 0; line-height: 1;} .bestelmatrixHolder table tr td .artikel .tooltip .omschrijving {left: 0; transform: translateX(0%); width: 250px;} .bestelmatrixHolder table tr td .artikel .tooltip .titel {background: unset; padding: 0; margin: 0;} .bestelmatrixHolder table tr td .artikel .tooltip .titel i {font-size: 18px ; color: #E4D4C9;} .bestelmatrixHolder table tr td .artikel .alInWinkelmand:empty {display: none;} .bestelmatrixHolder .knoppen {margin: 0;} .bestelmatrixHolder table tr td .artikel .alInWinkelmand::after {content: ""; display: inline-block; background: url(images/cart.svg) no-repeat; background-position: center; background-size: contain; width: 15px; height: 17px; vertical-align: middle; margin-left: 8px; position: relative; bottom: 2px;} .bestelmatrixHolder span[id*="bestelmatrixAsYAantalArtikelen"] {position:absolute; right:0; top:50%; transform:translateY(-50%); font-weight:bold;} .bestelmatrixHolder .artikel .afbeeldingHouder .verhouding {padding-bottom:100%;} .bestelmatrixHolder table .artikel .kenmerkInfo {position: absolute; z-index: 2; left: 5px; top: 5px; } .bestelmatrixHolder table .artikel .kenmerkInfo .kenmerkAfbeelding {position: relative; line-height: 0;} .bestelmatrixHolder table .artikel .kenmerkInfo .kenmerkAfbeelding img {border-radius: 50px; overflow: hidden; max-width: 15px; border: 2px solid #fff;} .bestelmatrixHolder table .artikel .kenmerkInfo .kenmerkAfbeelding .titel {position: absolute; bottom: -30px; transform-origin: center; transition: .3s ease 0s; padding: 5px 9px; background: #000; color: #fff; font-size: 12px; line-height: 1.25em; border-radius: 3px; opacity: 0; pointer-events: none; text-align: center; display: inline-block; box-sizing: border-box; white-space: nowrap; left: 50%; transform: translateX(-50%);} .bestelmatrixHolder table .artikel .kenmerkInfo .kenmerkAfbeelding:hover .titel {opacity: 1;} .bestelmatrixHolder table .artikel .kenmerkInfo .kenmerkAfbeelding .titel::before {content: ""; width: 8px; height: 8px; background: inherit; position: absolute; left: -50%; right: -50%; margin: 0 auto; top: -3px; transform: rotate(45deg); z-index: -1;} .bestelmatrixHolder table tr td .artikel h2.titel, .bestelmatrixHolder .artikel .artikelnr, .bestelmatrixHolder table tr td .artikel .bestellen .bestelknop .alInWinkelmand {display: none;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding: 20px; box-sizing: border-box;} #extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .inhoud .bestellen {display: block;} .art-Sheet .art-sidebar1 .linksContact {background: #EEE; padding: 30px; box-sizing: border-box; border-radius: 5px;} .specs {margin-bottom:30px;} .specs th {color:#000; text-align: left; padding:8px 10px; border-bottom:2px solid #ddd; line-height:1.35em;} .specs td {padding:8px 10px; transition: all .3s ease; background:rgba(0,0,0,0); border-bottom:1px solid #eee; line-height:1.35em;} .specs tr:hover td {background:rgba(0,0,0,0.05);} .formulier_holder.uniekeForm {max-width: 800px; margin: 40px auto; background: #eee; padding: 30px; box-sizing: border-box; border-radius: 5px;} .formulier_holder.uniekeForm a.knopVersturen {float: right; margin: 10px 0 0 0;} @media screen and (max-width: 1250px) { .productCarousel .artikel {width: calc(33.333% - 15px);} } @media screen and (max-width: 900px) { :root{ --space10: 5px; --space15: 5px; --space20: 10px; --space30: 15px; --space40: 20px; --space50: 25px; --space80: 40px; --space100: 50px; } a.logo img {width: 90px;} .bovenkantHolder .bovenkant {min-height: 0;} .zoeken {min-width: 100%; position: static;} #speedsearchResult {right: 0; top: 100%; left: 0;} #speedsearchResult .houder {padding: 10px; width: 100%;} .zoeken .knop {padding: 8px;} .zoeken .veld #zoekWoordID {padding: 8px;} .zoeken .knop:before {font-size: 16px;} .artikel.detail .detailinkollommen {grid-template-columns: 1fr; gap: 0;} .artikel.detail .detailinkollommen .rechts .artikelInfo {max-width: 100%; position: relative; top: unset;} .artikel.detail .links > .vak {padding: 0;} .configuratieOptie {grid-template-columns: 1fr; margin-bottom: 20px;} .liquid-slide-sjabloon .sliderWrapper {background-color: var(--color1);} .productCarousel .artikel {width: calc(50% - 15px);} } @media screen and (max-width: 680px) { .productCarousel .artikel {width: 100%; margin: 0;} }