:root {
  --color1: #007a4e;
  --color2: #0059a2;
  --color3: #E5EAF5;
  --fontColor: #000;
  --fontFamily1: "PT Sans", Helvetica, Arial, sans-serif;
  --bodyFontSize: 16px;
  --h1Size: 40px;
  --h2Size: 30px;
  --h3Size: 20px;
  --h5Size: 20px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --borderRadius1: 5px;
  --box-shadow-venster: 0 0 10px rgba(0, 0, 0, 0.1);
}


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

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

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); border: 1px solid #ECECEC; background-color: #FFF; color: #666;}

input[type="checkbox"]::before,
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {color: var(--color1); font-size: 15px;}

select {border: 1px solid #c4c4c4; color: var(--fontColor); border-radius: var(--borderRadius1); padding: 10px 25px 10px 10px;}

.breadcrumbs {display: none;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); font-weight: bold; color: var(--color1); line-height: 1.1em;}

h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size);}
h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); color: var(--fontColor); font-weight: 300;}

h1 + h5 {margin-top: -0.25em;}
h2 + h5 {margin-top: -0.25em;}

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

a.knop, .button, a.button, button.knop {position: relative; font-family: var(--fontFamily1); background-color: var(--color1); color: #FFF; border: 0; font-size: 15px; padding: 17px 30px; border-radius: var(--borderRadius1); line-height: 1; text-decoration: none !important;}
a.knop:hover, .button:hover, a.button:hover, button.knop:hover {background: var(--color2);}

a.knop.blauw {background: var(--color2);}

.extrabovenkantHolder {border-bottom: 1px solid #ECECEC;}
.extrabovenkantHolder .extrabovenkant  {gap: var(--space20); padding: 7px var(--space30); box-sizing: border-box;}

.extrabovenkantHolder .extrabovenkant .usp {margin-right: auto;}
.extrabovenkantHolder .extrabovenkant .usp > div {display: flex; align-items: center; gap: 10px;}
.extrabovenkantHolder .extrabovenkant .usp > div::before {content: "\f00c"; font-family: "Font Awesome 5 Pro";  font-size: 15px; font-weight: normal; color: #11A36E;}

.extrabovenkantHolder .extrabovenkant .beoordelingHolder {display: flex; gap: 10px; font-size: 13px;}
.extrabovenkantHolder .extrabovenkant .beoordelingHolder .sterren {display: flex; gap: 2px; color: #F8C541;}
.extrabovenkantHolder .extrabovenkant .beoordelingHolder .cijfer span {font-weight: bold;}

.extrabovenkantHolder .extrabovenkant li {list-style: none; margin: 0;}
.extrabovenkantHolder .extrabovenkant li a {text-decoration: none;}

.extrabovenkantHolder .extrabovenkant .boven ul {display: none;}

.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal {min-width: 38px; margin: auto 0 auto 10px; order: 2;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal ul {border-radius: 5px;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal ul li {padding: 0 15px 0 5px; position: relative;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal ul li.actief .afbeelding::before {display: none;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal ul li.actief::after {content: "\f078"; font-weight: bold; color: var(--fontColor); padding: 0 5px; font-family: "Font Awesome 5 Pro"; font-size: 9px; position: absolute;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal.open ul li.actief::after {color: #444;}
.extrabovenkantHolder .extrabovenkant .Taalkeuze_vlaggen.dropdownTaal ul li .afbeelding img {width: 100% !important; height: auto !important; max-width: 18px;}

.bovenkantHolder {position: sticky; top: 0; border: 0; background: var(--color3);}

.bovenkantHolder .winkelmenuHolder {background: var(--color1);}
.bovenkantHolder .winkelmenuHolder .winkelmenu {text-align: left; display: flex; gap: var(--space30);}
.bovenkantHolder .winkelmenuHolder .winkelmenu .separatorHouder {display: none;}
.bovenkantHolder .winkelmenuHolder .winkelmenu .rechts {margin-left: auto; display: flex; gap: var(--space30);}

.bovenkantHolder .winkelmenuHolder .art-menu li {*position: static;}
.bovenkantHolder .winkelmenuHolder .art-menu li a .t {color: #FFF; font-size: 15px; padding: 17px 0;}
.bovenkantHolder .winkelmenuHolder .art-menu li a .t::after {color: #FFF; font-weight: lighter; margin-left: 10px;}
.bovenkantHolder .winkelmenuHolder .art-menu li a .t:hover, .bovenkantHolder .winkelmenuHolder .art-menu li a.active .t {opacity: .5;}
.bovenkantHolder .winkelmenuHolder .art-menu li a .t.b2b {font-weight: bold;}

.bovenkantHolder .bovenkant {padding:18px var(--space30);}
.bovenkantHolder .bovenkant .zoekenHolder {margin: auto; width: 100%; max-width: 600px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken {width: 100%; border: 1px solid #ECECEC; background: #F7F7F7; border-radius: var(--borderRadius1);}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld {width: 100%;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID {padding: 13px; color: var(--fontColor);}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID:focus {color: var(--fontColor) !important;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {padding: 10px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop:before {font-weight: lighter; font-size: 20px; color: #454445;}

.bovenkantHolder .bovenkant .keurmerk {display: flex; gap: 10px; margin: auto 20px; line-height: 0;}
.bovenkantHolder .bovenkant .keurmerk img {width: 100% !important; height: auto !important; max-height: 35px;}

.hoverMenu  {right: 0; min-width: 250px; box-shadow: 0 70px 120px 0 rgb(0 0 0 / 10%); border: 0; border-radius: 0 0 4px 4px; padding:var(--space20); }

.hoverMenu .categorie {padding:0;}
.hoverMenu .categorie .kop {font-size: var(--h2Size); color: var(--color1);}
.hoverMenu .kolommen {display: grid; grid-template-columns: repeat(1, 1fr); gap: 5px; padding: var(--space10) 0 0 0; box-sizing: border-box;}
.hoverMenu .kolommen .kolom {width: 100%; margin:0; padding:0;}
.hoverMenu .kolommen .kolom a {font-size: inherit; color: var(--fontColor); display: block; padding:10px 15px; border-radius: 5px; background-color: var(--color3);}
.hoverMenu .kolommen .kolom a:hover {background-color: var(--color1); color:#fff; text-decoration: unset;}



/* .hoverMenu  {right: 0; width: 800px; box-shadow: 0 70px 120px 0 rgb(0 0 0 / 10%); border: 0; border-radius: 0 0 4px 4px;}
.hoverMenu .items {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space30); padding: var(--space30); box-sizing: border-box;}
.hoverMenu .items a.item {text-decoration: none; display: grid; gap: var(--space10); grid-template-columns:50px 1fr; transition: .3s all ease;}
.hoverMenu .items a.item .afbeelding {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #F7F7F7; border-radius: var(--borderRadius1); box-sizing: border-box; padding: 10px;}
 */


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

.winkelwagenHouder .winkelknop {background: unset; padding: 10px;}
.winkelwagenHouder .winkelknop .icoon::before {font-weight: lighter; color: var(--fontColor);  font-size: 22px; content: "\f290";}
.winkelwagenHouder .winkelknop .aantal {box-shadow: unset; background-color: var(--color2); padding:1px 6px 0 6px; border-radius: 100%; line-height: 17px; top: -10px; right: -10px; color: #FFF;}

.winkelwagenHouder .winkelwagen {border-radius: var(--borderRadius1);}
.winkelwagenHouder .winkelwagen .inhoud.artikelen .h3 {font-weight: bold; font-size: 20px; color: #555;}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--color2);}

.account li {border: 0;}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro";  font-size: 22px; font-weight: lighter; color: var(--fontColor); order: 2;}
.account .inloggenKnop, .account .mijnAccountKnop {display: flex; align-items: center; gap: 10px;}

.account .welkom {color: var(--fontColor); display: block; font-weight: normal; font-size: inherit;}


.account .welkom .bericht,
.account .mijnAccountKnop .titel,
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje, 
.account .favorietenKnop .favAantal {display: none;}
.account .openGeklapt .inloggenKnop, .account .openGeklapt .favorietenKnop, .account .openGeklapt .verlanglijstKnop, .account .openGeklapt .mijnAccountKnop {text-decoration: none;}

.account .houder {border-radius: var(--borderRadius1);}
.account .houder .houder1 {padding: 20px;}
.account .mijnAccount .houder .houder1 {padding: 20px 20px 10px 20px;}
.account .houder .houder1 a {text-decoration: none; margin: 0; font-size: 15px;}
.account .houder .houder1 .accountKop {font-weight: bold; font-size: 20px; color: #555;}
.account .houder .houder2 {background: unset; border: 0; padding: 0 20px 20px 20px;}
.account .houder .houder2 .registreer {color: #939393; font-size: 14px;}
.account .houder .houder2 .uitloggen a {font-family: inherit; font-size: 15px; background: var(--color2); padding: 15px 20px; border-radius: var(--borderRadius1); line-height: 1; font-weight: normal; text-decoration: none !important; color: #FFF; display: block; text-align: center;}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}
.account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro";  font-size: 22px; font-weight: normal; color: var(--fontColor);}
.account .inloggen .inlogKnop .wachtwoordKwijt a {color: #939393; font-size: 14px;}
.account .inloggen .cookie {margin-top: 10px; font-size: 14px;}
.account .inloggen .cookie label {display: flex; align-items: center;}

#speedsearchResult {left: 0; border-radius: var(--borderRadius1); max-width: 1520px; margin: 0 auto; padding: 0px; right: 0;}
#speedsearchResult .houder {overflow: auto; display:block; border-radius: var(--borderRadius1); border: 0; box-shadow: 0 20px 50px 0 rgba(0,0,0,0.20); font-size:inherit; width: 100%; box-sizing: border-box; padding: 20px;}
#speedsearchResult .houder .speedSearch {width: 100%;}
#speedsearchResult .houder .speedSearch ul li a {border:0; display: flex; border-radius: var(--borderRadius1);}
#speedsearchResult .houder .speedSearch ul li a .omschrijving {margin: auto 0; font-weight: normal;}
#speedsearchResult .houder .speedSearch ul li a strong {font-weight: bold; color: var(--color1);}
#speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {font-size:14px;}
#speedsearchResult .houder .speedSearch .resultaat {padding: 10px; margin: 0;  font-weight: bold; font-size: 17px;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {order:2; margin-left:auto;}
#speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {mix-blend-mode: darken;}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .knopAllesOnder a {padding: 15px 20px; border-radius: var(--borderRadius1); line-height: 1; border: 0; color: #fff; background: var(--color2); font-size: 15px; font-weight: normal;}
#speedsearchResult .houder .knopAllesOnder a:hover {background: var(--color1);}
.speedsearchLoader {display: none;}

section .inhoud, .vak .inhoud {padding: var(--space50) var(--space30);}
.vak .inhoud + .inhoud {padding-top: 0;}
.inhoud.minderPaddingBoven {padding-top: var(--space30);}

div[class*="grid"].center {align-items: center;}

.art-Sheet .art-sidebar1 {margin-right: var(--space30); padding-right: var(--space30);}
.art-Sheet .art-sidebar1::before {background: var(--color3); content: ""; top: -30px; bottom: -30px; right: 0; width: 50vw; position: absolute; z-index: -1;}

.art-Sheet .art-sidebar1 .filters .kenmerkgroep {background: unset; border: 0; padding: 0 0 var(--space20) 0;}
.art-Sheet .art-sidebar1 .filters .kenmerkgroep .kenmerken .kenmerk:hover {background-color: rgb(255 255 255 / 40%);}
.art-Sheet .art-sidebar1 .filters .actieveKenmerken {border: 0; padding: 0 0 20px 0;}
.art-Sheet .art-sidebar1 .filters .actiefKenmerk {background: #FFF;}

.shopSortOptie {padding: 0; border-radius: 0; border: 0; margin: 0 0 var(--space20) 0;}

.shopCategorieHolder .categorie {border-radius: var(--borderRadius1); border-color: #ECECEC; padding: 0; overflow: hidden;}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}
.shopCategorieHolder .categorie .titel {background: #F7F7F7; padding: var(--space15);}
.shopCategorieHolder .categorie .titel h2 {font-size: 15px; color: var(--fontColor);}

.shopLijst .artikel .prijzen {text-align: right;}
.shopLijst .artikel .prijzen .btwinfo {display: none;}
.shopLijst .artikel .bestellen .bestelknop {justify-content: right;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel {line-height: 0; background: var(--color1); display: flex; padding: 10px;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel span {display: none;}
.shopLijst .artikel .bestellen .bestelknop a.wButBestel::before {font-weight: lighter; color: #FFF; font-size: 20px; content: "\f290"; font-family: "Font Awesome 5 Pro"; margin: auto;}
.shopLijst .artikel .voorraad {display: block; background: var(--color3); padding: 5px 10px; line-height: 1; border-radius: var(--borderRadius1); font-size: 12px; font-weight: bold; width: fit-content; margin: 10px 0 0;}
.shopLijst .artikel .voorraad .aantalPos {color: var(--color1);}
.shopLijst .artikel .voorraad .aantalNeg {color: #FF0000;}

.shopTegel .artikel .inner {border-radius: var(--borderRadius1); border-color: #ECECEC; padding: 0; background: #F7F7F7; overflow: hidden;}
.shopTegel .artikel .inner:hover {box-shadow: unset;}
.shopTegel .artikel .inner .afbeeldingHouder {background: #FFF; margin: 0;}
.shopTegel .artikel .inner .omschrijving {padding: 15px; display: flex; flex-direction: column; flex: 1;}
.shopTegel .artikel .inner .omschrijving h2.titel a {color: var(--fontColor);}

.shopTegel .artikel .inner .omschrijving .meerinfo .voorraad {background: var(--color3); padding: 10px 20px; line-height: 1; border-radius: var(--borderRadius1); font-size: 14px; font-weight: bold; width: fit-content; margin: 10px 0 0;}
.shopTegel .artikel .inner .omschrijving .meerinfo .voorraad .aantalPos {color: var(--color1);}
.shopTegel .artikel .inner .omschrijving .meerinfo .voorraad .aantalNeg {color: #FF0000;}
.shopTegel .artikel .inner .omschrijving .meerinfo .artikelEenheid {text-transform: lowercase; display: inline-block;}

.shopTegel .artikel .inner .bestellen {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center;}
.shopTegel .artikel .inner .bestellen .bestelknop {margin-left: auto;}
.shopTegel .artikel .inner .bestellen .bestelknop input {width: 55px !important; border-radius: var(--borderRadius1) 0 0 var(--borderRadius1);}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color1); border-radius: 0 var(--borderRadius1) var(--borderRadius1) 0; width: unset; padding: 17px 20px;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel:hover {background-color:var(--color2)}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel::before {font-weight: lighter; color: #FFF; font-size: 20px; content: "\f290"; font-family: "Font Awesome 5 Pro"; margin: 0;}
.shopTegel .artikel .inner .bestellen .bestelknop a.wButBestel span {display: none;}

.shopTegel .artikel .inner .bestellen .prijzen {line-height: 1.35em;}
.shopTegel .artikel .inner .bestellen .prijzen .prijs {font-size: 20px;}
.shopTegel .artikel .inner .bestellen .prijzen .btwinfo {display: block; font-size: 13px; color: #999; display: none;}

.shopCompact .artikel .artikelnr {width: 120px;}
.shopCompact .artikel .bestellen {width: unset; min-width: unset;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel {font-size: 13px; padding: 8px 10px; display: flex; line-height: 1; background: var(--color1);}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel::after {font-weight: lighter; color: #FFF; font-size: 15px; content: "\f290"; font-family: "Font Awesome 5 Pro"; margin: auto;}
.shopCompact .artikel .bestellen .bestelknop a.wButBestel span {display: none;}
.shopCompact .artikel .bestellen .aantalMinPlus {margin: 0;}
.shopCompact .artikel .prijzen {font-size: 14px;}
.shopCompact .artikel .labels {transform:scale(0.6); transform-origin: top left;}
.shopCompact .artikel .btwinfo {display: none;}
.shopCompact .artikel .omschrijving .voorraad {display: block; background: var(--color3); padding: 5px 10px; line-height: 1; border-radius: var(--borderRadius1); font-size: 12px; font-weight: bold; width: fit-content; margin: 10px 0 0;}
.shopCompact .artikel .omschrijving .voorraad .aantalPos {color: var(--color1);}
.shopCompact .artikel .omschrijving .voorraad .aantalNeg {color: #FF0000;}

.shopTegel .shopDetailModernKenmerken, .shopLijst .shopDetailModernKenmerken, .shopCompact .shopDetailModernKenmerken {display: none;}

.productCarousel {margin: 0;}
.productCarousel .artikel {width: calc(25% - 20px); margin: 0 10px;}
.productCarousel .flickity-button {display: none;}

.artikel.detail .detailinkollommen {display: grid; margin: 0; grid-template-columns: 1fr 1fr; gap: 30px; grid-template-areas: "a b" "c b" "d b" "e b"; margin-bottom: 30px;}

.artikel.detail .artikelSerieActief .inner {border-color: var(--color1);}

.artikel.detail .detailinkollommen .links {margin: 0; width: 100%; grid-area: a;}
.artikel.detail .detailinkollommen .links .galleryHouder button {display: none;}

.artikel.detail .detailinkollommen .links .volledigGallery .carousel-cell-groot .verhouding {height:calc(100vh - 350px); max-height:600px; padding-bottom:0;}

.artikel.detail .detailinkollommen .rechts {margin: 0; width: 100%; grid-area: b; position: relative; position: sticky; top: 150px; margin-bottom: auto; padding: var(--space40); box-sizing: border-box; background: var(--color3); border-radius: var(--borderRadius1);}

.artikel.detail .detailinkollommen .rechts > .upselling {margin-top: var(--space40);}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPScatPlaatje {line-height: 0;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_trigger {box-shadow: unset; border: 0; background: #FFF; border-radius: var(--borderRadius1);}

.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer > div:last-child {display: none;}

.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact {display: grid; gap: var(--space10);}

.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel {border-radius: 4px; border: 2px solid #eee; padding: 5px 10px; box-sizing: border-box;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel:hover {border-color: var(--color1); background: #f2f2f2;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .favorieten {display: none;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .artikelnr, .artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .omschrijving .prijzen {display: none;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .afbeeldingHouder img {mix-blend-mode: darken;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .prijzen {margin: auto 10px auto auto;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .prijzen .prijs {font-size: 15px;}
.artikel.detail .detailinkollommen .rechts > .upselling .UPScontainer .UPSacc_container .shopCompact .artikel .bestellen .bestelknop {gap: 10px;}

.artikel.detail .detailinkollommen .rechts > .advies {display: grid ; grid-template-columns: 2fr 1fr; border-radius: var(--borderRadius1); gap: var(--space30); position: relative; padding: var(--space40); border: 0; background: var(--color1); color: #FFF; margin-top: var(--space40); box-sizing: border-box; display:none;}
.artikel.detail .detailinkollommen .rechts > .advies h2 {color: #FFF; font-size: 23px;}
.artikel.detail .detailinkollommen .rechts > .advies .afbeelding {line-height: 0; position: absolute; right: 0; bottom: 0;}
.artikel.detail .detailinkollommen .rechts > .advies .afbeelding img {height: 180px !important; object-fit: contain; width: 100% !important;}

.artikel.detail .detailinkollommen .rechts h1 {margin: 0 0 0.75em 0; font-size: 24px; color: var(--color1);}

.artikel.detail .detailinkollommen .rechts .kenmerkgroepKeuze {margin: 0 0 20px 0;}
.artikel.detail .detailinkollommen .rechts .kenmerkgroepKeuze:last-child {margin: 0;}
.artikel.detail .detailinkollommen .rechts .kenmerkgroepKeuze .h3 {color: var(--fontColor);}
.artikel.detail .detailinkollommen .rechts .kenmerkgroepKeuze .artikel {border-color: #E2E2E2; border-radius: var(--borderRadius1); background: #FFF; min-width: 90px; text-align: center;}
.artikel.detail .detailinkollommen .rechts .kenmerkgroepKeuze .artikel.actief {background: var(--color1); color: #FFF; border-color: var(--color1);}

.artikel.detail .detailinkollommen .rechts .prijsVoorraad {display: flex; margin: 20px 0; gap:5px; align-items: center;}
.artikel.detail .detailinkollommen .rechts .prijsVoorraad .voorraad {margin: 0 0 0 auto; background: #FFF; padding: 10px 20px; line-height: 1; border-radius: var(--borderRadius1); font-size: 14px; font-weight: bold;}
.artikel.detail .detailinkollommen .rechts .prijsVoorraad .voorraad .aantalPos {color: var(--color1);}
.artikel.detail .detailinkollommen .rechts .prijsVoorraad .voorraad .aantalNeg {color: #FF0000;}
.artikel.detail .detailinkollommen .rechts .prijsVoorraad .artikelEenheid {text-transform: lowercase; display: inline-block;}

.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop a.wButBestel {line-height: 1; background: var(--color1); width: 100%;}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop a.wButBestel:hover {background-color: var(--color2);}
.artikel.detail .detailinkollommen .rechts > .bestellen .bestelknop a.wButBestel::before {display: none;}

.artikel.detail .detailinkollommen .rechts .houdMeOpHoogteVoorraad {margin: var(--space30) 0; background: #FFF; border-radius: var(--borderRadius1);}

.artikel.detail .detailinkollommen .rechts .mijnBewaardeWinkelmandjeKnop a {display: block; margin: 10px 0 0 0; background: #f7f7f7; color: var(--fontColor1);}
.artikel.detail .detailinkollommen .rechts .mijnBewaardeWinkelmandjeKnop a:hover {background: var(--color2); color: #fff;}
.artikel.detail .detailinkollommen .rechts .mijnBewaardeWinkelmandjeKnop a .image {display: none;}

.artikel.detail .vak h2 {color: var(--fontColor); font-size: 23px;}

.artikel.detail .detailinkollommen .rechts > .meebestellen {margin: 40px 0;}
.artikel.detail .detailinkollommen .rechts > .meebestellen > h2 {font-size:24px;}
.artikel.detail .detailinkollommen .rechts > .meebestellen .shopTegel {grid-template-columns: 1fr 1fr 1fr;}
.artikel.detail .detailinkollommen .rechts > .meebestellen .shopTegel .artikel {zoom:.8}
.artikel.detail .detailinkollommen .rechts > .meebestellen .shopTegel .artikel .afbeeldingHouder .verhouding {display: block; padding-bottom: 75%;}
.artikel.detail .detailinkollommen .rechts > .meebestellen .shopTegel .artikel .bestellen .prijzen {margin: 0;}
.artikel.detail .detailinkollommen .rechts > .meebestellen .shopTegel .artikel .bestellen .prijzen .prijs {font-size: 16px;}


.artikel.detail .vak .inhoud {padding: 0;}

.artikel.detail .detailinkollommen .vak .inhoud {padding: 0; max-width: unset; margin: 0;}
.artikel.detail .detailinkollommen .vak .inhoud.lang {overflow: hidden; max-height: 200px; transition: .3s all ease;}
.artikel.detail .detailinkollommen .vak .inhoud.lang::after {content: ""; background: linear-gradient(0, #fff, hsla(0, 0%, 98%, 0)); bottom: 50px; display: block; height: 40px; left: 0; position: absolute; width: 100%;}
.artikel.detail .detailinkollommen .vak .inhoud.open {overflow: unset; max-height: unset;}
.artikel.detail .detailinkollommen .vak .inhoud.open::after {display: none;}

.artikel.detail .detailinkollommen .vak a.leesMeer {display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 500; position: relative; margin: var(--space20) 0; cursor: pointer;}
.artikel.detail .detailinkollommen .vak a.leesMeer span {
    position: relative;
    background: #FFF;
    cursor: pointer;
    border-bottom: 1px solid;
}

/* Pakken berekenen */
.artikel.detail .pakkenBerekenenM2 {padding: var(--space15); background:#FFF; border-radius: var(--borderRadius1); margin: var(--space20) 0;}
.artikel.detail .pakkenBerekenenM2 h3 {font-size: 16px;}
.artikel.detail .pakkenBerekenenM2 .formule {display: flex; align-items: center;}
.artikel.detail .pakkenBerekenenM2 .formule .nawVeld {margin: 0;}
.artikel.detail .pakkenBerekenenM2 .formule input[type=number] {background-color:#fff; border: 1px solid #ddd; margin:0;}
.artikel.detail .pakkenBerekenenM2 .formule #aantalM2    {width:100px}
.artikel.detail .pakkenBerekenenM2 .formule #snijverlies {width:100px}
.artikel.detail .pakkenBerekenenM2 .formule #aantalPakkenVoorM2Nodig {font-size: 17px; font-weight: bold; padding: 5px; color: #000;}
.artikel.detail .pakkenBerekenenM2 .formule .operator {font-size: 20px; font-weight: bold; padding: 5px;}
.artikel.detail h3 a.helpKnop {margin: 0 0 0 10px; font-weight: normal; font-size: 14px; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; background:#eee; border-radius: 500px; padding:5px 10px;}
.artikel.detail h3 a.helpKnop:hover {color:#fff; background: var(--color1);}
.artikel.detail h3 a.helpKnop::before {content: "\f05a"; font-family: "Font Awesome 5 Pro"; font-size: 12px; font-weight: bold;}

.artikel.detail .aantalM2PlusMinus div {position: absolute; right: 3px; padding: 0px; font-size: 18px; background: #f5f5f5; border-radius: var(--borderRadius1); top: 3px; text-align: center; line-height: 18px; font-weight: normal; width: 20px; font-family: Arial; height: 18px; color:#000; transition: all .3s ease; user-select: none; cursor:pointer}
.artikel.detail .aantalM2PlusMinus div:hover {color:#fff; background: #000;}
.artikel.detail .aantalM2PlusMinus .aantalM2minus {bottom: 3px; top: unset; line-height: 16px;}

.artikel.detail .uitkomstTotaal {line-height: 1;display: flex;align-items: center;}
.artikel.detail .uitkomstTotaal #uitkomstTotaalEuro {color: #000; font-weight: bold; align-items: center; margin-right: 20px;}
.artikel.detail .uitkomstTotaal #uitkomstTotaalPakken {margin-left: auto;}
.artikel.detail .m2prijs {font-size: 20px; font-weight: bold; margin-right: 20px;}
/* Einde pakken berekenen */

.shopDetailTabKenmerken {margin: 20px 0 0 0;}
.kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 1fr 1fr; color: #000; border: 0; font-size: 15px;}
.kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: normal; color: #8A8884; font-size: 15px;}
.kenmerkArt:nth-child(odd), .artikelGewicht:nth-child(odd) {background-color: #F5F5F5;}
.kenmerkArt .kenmerken .kenmerk {display: block;}
.kenmerkArt .kenmerken .kenmerk::after {display: none;}
.kenmerkArt.berekeningPer .kenmerken .kenmerk {display: flex;}
.kenmerkArt.berekeningPer .kenmerken .kenmerk .toevoeging {order:-1; color:inherit; margin-right:0.3em;}
.kenmerkArt.berekeningPer .kenmerken .kenmerk .toevoeging::before, .kenmerkArt.berekeningPer .kenmerken .kenmerk .toevoeging::after {display: none;}

#tabBijlagenInhoud {color: var(--fontkleur1);}
#tabBijlagenInhoud table {width: 100%; line-height: 55px;}
#tabBijlagenInhoud table tr {position: relative;}
#tabBijlagenInhoud td {border-bottom: 1px solid #E4E4E4;}
#tabBijlagenInhoud td.blg1 {width: 50px; position: static;}
#tabBijlagenInhoud td.blg1 a img {display: none;}
#tabBijlagenInhoud td.blg1 a {text-decoration: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block;}
#tabBijlagenInhoud td.blg1::before {content: "\f15b"; font-family: "Font Awesome 5 Pro"; font-size: 28px; color: var(--color1); font-weight: 100; padding: 13px 15px; margin-right: 12px;}
#tabBijlagenInhoud table .bijlageIcoon::after {font-size: 8px; background-color: var(--color1); color: #FFF; padding: 3px 5px; border-radius: var(--borderRadius1); position: absolute; left: 20px; bottom: 24px; display: block; line-height: 1em;}
#tabBijlagenInhoud table .bijlageIcoon.dwg::after {content: "DWG";}
#tabBijlagenInhoud table .bijlageIcoon.pdf::after {content: "PDF";}

.artikel .artikelnr {line-height: 1.95em;}
.artikel .artikelnr > .titel {display: none;}

.relatieBtwPrijs, .stap .gewicht {display: none !important;}
.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen .stappenKnop a {background: var(--color2);}
.kassainkollommen > .rechts .blok, .couponcodeHouder {background: #f7f7f7; border-radius: var(--borderRadius1);}
.kassaArtikelen .artikel td.aantallen {max-width: 120px;}
.kassaArtikelen .artikel .aantalMinPlus, .kassaArtikelen .artikel .aantalVolgorde {max-width: 130px !important;}


.stap.drie .links>div {width: 100%;}

.totaalVerzendkosten .omschrijving {line-height: 1.5em; display: block; *opacity: .7;}
.totaalVerzendkosten .omschrijving .bezorgmoment {font-weight: bold; display: block;}

.stappenbalk .bezig::before {background: var(--color2);}
.stappenbalk .bezig .naam {color: var(--color2);}

.stappenbalk .klaar a::before {background: var(--color1);}
.stappenbalk .klaar::after {border-color: var(--color1);}
.stap.vier .totalen .vwHolder .vwTonen {line-height: 1.45em;}

.stap .totalen .bedrag .gratis {display: none;}

.artikel .aantalMinPlus {display: grid; grid-template-columns: 1fr 50px 1fr; max-width: unset !important; border-radius: var(--borderRadius1); border-color: #ECECEC;}
.artikel .aantalMinPlus .min, .artikel .aantalMinPlus .plus {min-width: unset; padding: 5px 15px; line-height: 1; font-size: 14px;}
.artikel .aantalMinPlus .min {border-radius: var(--borderRadius1) 0 0 var(--borderRadius1) !important;}
.artikel .aantalMinPlus .plus {border-radius: 0 var(--borderRadius1) var(--borderRadius1) 0 !important;}

.pageFooterHolder {background: var(--color2);}
.pageFooterHolder .pageFooter .grid-3x {grid-template-columns: 5fr 2fr 2fr; gap: var(--space50);}
.pageFooterHolder .pageFooter .grid-3x .h2 {font-size: var(--h2Size);}

.pageFooterHolder .pageFooter .grid-3x .beoordelingHolder {display: flex; gap: 10px; font-size: 13px; margin: 40px 0 0 0;}
.pageFooterHolder .pageFooter .grid-3x .beoordelingHolder .sterren {display: flex; gap: 2px; color: #F8C541;}
.pageFooterHolder .pageFooter .grid-3x .beoordelingHolder .cijfer {font-weight: bold; font-size: 30px;}

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

.pageFooterKnoppenHolder {background: #FFF;}
.pageFooterKnoppenHolder .pageFooterKnoppen {font-size: inherit;}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu {margin: auto 0 auto auto; color: var(--fontColor);}
.pageFooterKnoppenHolder .pageFooterKnoppen .extramenu span {opacity: 0; margin: 0 5px;}

.tooltip .titel {padding: 5px 10px; background-color: var(--color3); border-radius: 100%; line-height: 1; color: var(--color1); margin: 0 0 0 10px;}
.tooltip .omschrijving {transform: unset;}

.inschrijvenKolom .blokholder > .titel {font-family: var(--fontFamily1); color: var(--fontColor); font-weight: bold; font-size: 18px; line-height: 1.35em; margin: 0 0 10px 0;}
#inschijfformulier_holder {display: block; box-sizing: border-box; max-width: 900px; margin: 0 auto; background: var(--color3); padding: 30px; border-radius: var(--borderRadius1);}
#inschijfformulier_holder .inschrijvenKolom {display: block;}
#inschijfformulier_holder .inschrijvenKolom .blokholder {background-color: unset; padding: 0; margin: 0; border: 0;}
#inschijfformulier_holder h3 {color: var(--color1);}
#inschijfformulier_holder .inschrijvenKolom > .rechts {width: 100%; margin: 0;}
#inschijfformulier_holder .inschrijvenKolom .blokholder.knopVersturen .button {padding: 15px; background: var(--color2); margin: 20px 0 0 0;}

.hulpPopup {width: 100%; max-width: 800px; height: auto !important; padding: 40px; box-sizing: border-box;}
.hulpPopup h2 {color: #555;}
.hulpPopup img {line-height: 0; width: 100% !important; height: auto !important;}
.hulpPopup ol li::marker {font-size: 24px; font-weight: bold; color: #555;}
.hulpPopup ol li h3 {color: var(--fontColor); font-size: 18px; font-weight: bold;}
.fancybox-close-small:hover {background: unset; color: var(--color1);}

.bovenkantHolder .bovenkant .resMenubalkinhoud a {color: var(--color1); font-size: 20px;}

.resMenuHolder {max-width: 100%; background: var(--color3);}
.resMenublokinhoud .resMenuItem a {padding: 12px 15px; color: var(--fontColor); font-size: 15px;}
.resMenublokinhoud .resMenuItem .laag1 a {padding-left: 30px; font-size: 13px;}

.filters {border-color: #ECECEC; border-radius: var(--borderRadius1);}
.filters .kenmerkgroep {background: #FFF; border-color: #ECECEC;}
.filters .kenmerkgroep a.titel {color: var(--color1);}

.mededeling {position: relative; background: var(--color3); max-width: 1580px; padding: 5px 30px; margin: 0 auto; width: 100%; box-sizing: border-box; font-size: 13px; text-align: center;}
.mededeling::before {position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); content: ""; background: var(--color3); z-index: -2;}
.mededeling p {margin: 0;}
.mededeling:empty {display: none;}

.uniekeForm {max-width: 900px; margin: 0 auto; background: var(--color3); padding: var(--space40); box-sizing: border-box; border-radius: var(--borderRadius1);}
.uniekeForm .formulier_textarea {margin: 5px 0;}
.uniekeForm a.knopVersturen {float: right; margin: var(--space10) 0 0 0;}

#extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding: var(--space20);}

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

  .productCarousel .artikel {width: calc(33.333% - 20px);}

  .pageFooterHolder .pageFooter .grid-3x {grid-template-columns: 1fr 1fr 1fr; gap: 30px;}

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

}

/* als het scrherm minimaal 1180 breed is en minder hoog dan 700px */
@media screen and (min-width: 1180px) and (max-height: 700px) {
  .artikel.detail .detailinkollommen .rechts {position: relative; top:unset}
}



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

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

  a.logo img {width: 150px;}

  .vak {padding: 0;}
  .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

  .bovenkantHolder {border-bottom: 1px solid #eee;}
  .bovenkantHolder .bovenkant {min-height: 50px;}
  .bovenkantHolder .bovenkant, .pageFooterKnoppenHolder .pageFooterKnoppen {padding: 10px 20px;}
  .bovenkantHolder .winkelmenuHolder, 
  .bovenkantHolder .bovenkant .keurmerk, 
  .extrabovenkantHolder {display: none;}
  .bovenkantHolder .bovenkant .zoekenHolder {margin: auto 20px;}

  .bovenkantHolder .bovenkant .zoekenHolder .zoeken {position: static;}

  .productCarousel .artikel {width: calc(50% - 20px);}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr; grid-template-areas: "a" "b" "c";}
  .artikel.detail .detailinkollommen .rechts {padding: 20px; position: relative; top: unset;}

  .pageFooterHolder .pageFooter .grid-3x {grid-template-columns: 1fr;}

    .artikel.detail .detailinkollommen .rechts > .advies {grid-template-columns: 1fr; gap: 0;}
  .artikel.detail .detailinkollommen .rechts > .advies .afbeelding {position: relative; bottom: -20px;}

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

  .productCarousel .artikel {width: 100%; margin: 0;}
  
}

/* Veranderingen sinds skin_default2 */
button {margin: 0; padding: 0; border: none; outline: none; background-color: unset; color: inherit; font: inherit; cursor: pointer; text-decoration: none;}
button:hover {text-decoration: none; background-color: transparent;}

.account {line-height: normal;}
.account .houder {padding: 20px; width: 400px; box-sizing: border-box; line-height: 1.95;}
.account .houder .h3 {color: #555;}
.account .inloggen, .account .mijnAccount {position: relative; padding: 0; border: none;}
.account .houder .knoppenHouder {display: flex;}
.account .houder .knoppenHouder {font-size: 15px;}
.account .houder .knoppenHouder .wachtwoordKwijt {margin: auto auto auto 10px}
.account .houder .knoppenHouder .wachtwoordKwijtKnop {color: #939393; font-size: 14px;}
.account .inloggenKnop, .account .mijnAccountKnop {padding: 10px 0 10px 10px}
.account .welkom {padding: 10px;}
.account .houder .houder1 {padding: 0 0 10px 0 !important;} 
.account .houder .houder2 {padding: 0 !important;}