:root {
  --color1: #4d7abd;
  --color2: #000000;
  --color3: #E9E7E2;
  --color4: #F7F6F4;
  --fontColor1: #000;
  --fontColor2: #4B4B4B;
  --borderColor1: #eaeaea;
  --borderColor2: #F7F6F4;
  --fontFamily1: "Exo", Helvetica, Arial, sans-serif;
  --bodyFontSize: 14px;
  --h1Size: 35px;
  --h2Size: 25px;
  --h3Size: 16px;
  --h4Size: 14px;
  --h5Size: 20px;
  --maxWidth: 1560px;
  --space5: 5px;
  --space10: 10px;
  --space15: 15px;
  --space20: 20px;
  --space25: 25px;
  --space30: 30px;
  --space40: 40px;
  --space50: 50px;
  --space80: 80px;
  --space100: 100px;
  --space200: 200px;
  --borderRadius1: 5px;
  --borderRadius2: 10px;
  --leftFr: 1fr;
  --rightFr: 1fr;
}

html{
  overflow-x: hidden;
}


body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor1); background: #FFF; font-size: var(--bodyFontSize); line-height: 1.85em;}
::selection {background: var(--color1); color: #FFF;}
  
textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-color: var(--borderColor1); border-radius: var(--borderRadius1); font-size: 16px; color: var(--fontColor1); padding: 10px;}

input[type="checkbox"]::before {font-weight: bold; color: var(--color3);}
input[type="checkbox"]:checked::before {color: var(--color1);}

input[type="radio"]::before {font-weight: bold; color: var(--color3);}
input[type="radio"]:checked::before {color: var(--color1);}

select {border-radius: var(--borderRadius1); border-color: var(--borderColor1); color: var(--fontColor1); font-size: 16px; padding: 10px 25px 10px 10px;}
  
.breadcrumbs {max-width: var(--maxWidth); margin: 0 auto; padding: var(--space30); box-sizing: border-box; font-weight: normal; font-size: 12px; color: var(--fontColor1);}
.breadcrumbs ol li a {color: var(--fontColor1) !important; display: flex; align-items: center;}
.breadcrumbs ol li a:hover {text-decoration: none;}
.breadcrumbs ol li a::after {content: "\f105"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor1); margin: auto var(--space10); font-weight: lighter; font-size: 14px;}
.breadcrumbs ol li.crumbSpace {display: none;}

.breadcrumbs + .art-Sheet {padding-top: 0;}

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: 600; color: var(--fontColor1); line-height: 1.35em; margin: 0 0 0.5em 0;}

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

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

h2 strong {display: block; font-weight: inherit; color: var(--color1);}

ul.vinkjes {padding: var(--padding-20); margin: 0; list-style: none;}
ul.vinkjes li {padding: 0; padding-left: 25px; position: relative;}
ul.vinkjes li a {text-decoration: none;}
ul.vinkjes li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: var(--color3); margin-right: 10px; position: absolute; left: 0;}

a.logo {margin: auto 0; outline: 0; transition: unset;}
a.logo img {width: 130px; margin: 0;}

a.knop, .button, a.button, button {font-family: inherit; font-size: var(--bodyFontSize); padding: 15px 20px; border-radius: var(--borderRadius1); background: var(--color1); line-height: 1; font-weight: 600; text-decoration: none !important;}
a.knop:hover, .button:hover, a.button:hover, button:hover {background: #2f5040;}

.extrabovenkantHolder {background: var(--color2);}
.extrabovenkantHolder .extrabovenkant .art-nav {margin-left: auto;}
.extrabovenkantHolder .extrabovenkant .art-nav .art-menu li a .t {color: #FFF; font-size: 12px; font-weight: 500;}

.bovenkantHolder {border: 0; border-bottom: 1px solid var(--borderColor1);}
.bovenkantHolder .bovenkant {min-height: 88px; max-width: var(--maxWidth);}
.bovenkantHolder .bovenkant .art-nav {margin: auto var(--space30);}
.bovenkantHolder .bovenkant .art-nav .art-menu {display: flex; gap: var(--space15);}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t {font-size: var(--bodyFontSize); font-weight: 500; padding: 0;}
.bovenkantHolder .bovenkant .art-nav .art-menu li a .t:hover, .bovenkantHolder .bovenkant .art-nav .art-menu li a.active .t {color: var(--color1);}

.bovenkantHolder .bovenkant .zoekenHolder {width: 100%; max-width: 250px; margin: auto var(--space30) auto auto;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken {width: 100%; border: 0; background: var(--color3); border-radius: var(--borderRadius1);}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld {width: 100%;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID {padding: 10px; color: var(--fontColor1);}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID:focus {color: var(--fontColor1) !important;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .veld #zoekWoordID::placeholder {color: #bbb;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop {padding: 10px;}
.bovenkantHolder .bovenkant .zoekenHolder .zoeken .knop:before {font-weight: normal; font-size: var(--bodyFontSize); color: var(--fontColor1);}

#speedsearchResult .houder {border: 0; border-radius: var(--borderRadius2); padding: var(--space20); box-sizing: border-box;}
#speedsearchResult .houder .speedSearch ul {display: flex; flex-direction: column; gap: var(--space5);}
#speedsearchResult .houder .speedSearch ul li {margin: 0;}
#speedsearchResult .houder .speedSearch ul li a {border: 2px solid var(--borderColor2); border-radius: var(--borderRadius2); padding: 0; display: flex; align-items: center;}
#speedsearchResult .houder .speedSearch ul li .thumbnail {background: var(--color4);}
#speedsearchResult .houder .speedSearch ul li .thumbnail img {mix-blend-mode: darken;}

#speedsearchResult .houder .speedSearch .resultaat {padding: 0; font-weight: 600; color: var(--fontColor1); line-height: 1.35em; margin: 0 0 0.5em 0;}
#speedsearchResult .houder .speedSearch .resultaat a.knopAlles {display: none;}

#speedsearchResult .houder .knopAllesOnder a {background: var(--color1); color: #FFF; font-weight: 600; border-radius: var(--borderRadius1);}
#speedsearchResult .houder .knopAllesOnder a:hover {background: var(--color1);}

.speedsearchLoader {display: none;}

.account li {border: 0;}
.account .inloggenKnop::before, .account .mijnAccountKnop::before {content: "\f007"; font-family: "Font Awesome 5 Pro";  font-size: 20px; font-weight: lighter; color: var(--fontColor1);}
.account .welkom,
.account .favorietenKnop .titel, 
.account .favorietenKnop .haakje, 
.account .favorietenKnop .favAantal {display: none;}
.account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {text-decoration: none; color: unset;}
.account li.favorieten {padding: 10px;}
.account .favorietenKnop::before {content: "\f004"; font-family: "Font Awesome 5 Pro"; font-size: 20px; font-weight: lighter; color: var(--fontColor1); background: var(--color3); padding: var(--space10); border-radius: 100%; box-sizing: border-box;}

.account .inloggenKnop, .account .mijnAccountKnop {display: flex; align-items: center; gap: var(--space10); text-decoration: none !important;}
.account .inloggenKnop .titel, .account .mijnAccountKnop .titel {font-weight: 500; font-size: var(--bodyFontSize);}

.account .houder .accountKop {font-weight: bold; font-size: var(--h3Size);}
.account .houder {border-radius: var(--borderRadius2); border: 0; transform: translateY(0); overflow: hidden;}
.account .houder .houder2 {background: var(--color4); border-color: var(--borderColor1);}

.account .houder .inlogKnop {display: block;}
.account .houder .inlogKnop a.inlogKnop2 {display: block; width: 100%; box-sizing: border-box;}
.account .houder .inlogKnop .wachtwoordKwijt {margin: 10px 0;}
.account .houder .inlogKnop .wachtwoordKwijt a {text-decoration: none; color: #777;}

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

.winkelmandjeLeeg {border: 0; padding: var(--space20) 0; background: unset; text-align: center;}

.winkelwagenHouder .winkelwagen {border-radius: var(--borderRadius2); top: 100%; background: var(--color4);}
.winkelwagenHouder .winkelwagen .inhoud.totaal {border-top: 1px solid var(--borderColor1);}
.winkelwagenHouder .winkelwagen .inhoud.totaal .prijzen .prijs {font-size: var(--h3Size); color: var(--color1);}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopKassa {background: var(--color1);}
.winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkemmandjeKnopMandjeLegen {text-decoration: none; color: #777;}

.art-Sheet {max-width: var(--maxWidth); padding: var(--space50) var(--space30);}

section .inhoud, .vak > .inhoud {max-width: var(--maxWidth); padding: var(--space50) var(--space30);}

.inhoud.max700 {max-width: 700px;}
.inhoud.max900 {max-width: 900px;}
.inhoud.max1000 {max-width: 1000px;}

.vak .inhoud + .inhoud {padding-top: 0;}

.vak.grijs {background: var(--color3);}
.vak.groen {background: var(--color1);}

.vak.groen .inhoud, .vak.groen .inhoud h2 {color: #FFF;}
.vak.groen .inhoud a.knop {background: #FFF; color: var(--color1);}

.vak.maatwerk {background: #f2f2f2;}
.vak.maatwerk .inhoud {padding: var(--space80) var(--space30); position: relative; z-index: 1;}
.vak.maatwerk .inhoud::after {content: ""; position: absolute; right: 0; bottom: 0; background: url('/skin/images/alux-team.png') no-repeat right; height: 250px; width: 100%; pointer-events: none; background-size: contain; z-index: -1;}

.grid-2x {grid-template-columns: var(--leftFr) var(--rightFr);}

div[class*="grid"] {gap: var(--space30);}

div[class*="grid"].left-2fr {--leftFr: 2fr;}
div[class*="grid"].right-2fr {--rightFr: 2fr;}
div[class*="grid"].left-3fr {--leftFr: 3fr;}
div[class*="grid"].right-3fr {--rightFr: 3fr;}
div[class*="grid"].left-4fr {--leftFr: 4fr;}
div[class*="grid"].right-4fr {--rightFr: 4fr;}

div[class*="grid"].gap-50 {gap: var(--space50);}
div[class*="grid"].gap-80 {gap: var(--space80);}
div[class*="grid"].gap-100 {gap: var(--space100);}

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

img.radius {border-radius: var(--borderRadius2);}

.shopCategorieHolder {gap: var(--space30);}
.shopCategorieHolder .categorie {border: 0;}
.shopCategorieHolder .categorie:hover {box-shadow: unset;}

.shopCategorieHolder .categorie .afbeeldingHouder {background: var(--color4); border-radius: var(--borderRadius2);}
.shopCategorieHolder .categorie .afbeeldingHouder .verhouding {padding-bottom: 75%;}
.shopCategorieHolder .categorie .afbeeldingHouder img {mix-blend-mode: darken;}

.shopCategorieHolder .categorie .titel {padding: var(--space10) 0 0 0; text-align: left;}
.shopCategorieHolder .categorie .titel h2 {text-align: left; font-size: 16px; color: var(--fontColor1);}

.flickity-nav {display: flex; gap: var(--space30); align-items: center; margin: 0 0 var(--space20) 0;}
.flickity-nav h2 {margin: 0;}
.flickity-nav > div {position: relative; margin-left: auto; display: flex; gap: var(--space5);}
.flickity-nav > div .flickity-button {position: relative; opacity: 1; background: var(--color4); border-radius: var(--borderRadius1); width: 40px; height: 40px; 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 {display: none;}
.flickity-nav > div .flickity-button::before {content: "\f054"; font-family: "Font Awesome 5 Pro"; color: var(--fontColor1); font-size: 16px; font-weight: lighter;}
.flickity-nav > div .flickity-button.previous::before {content: "\f053";}

.art-sidebar1 .filters {border: 0; display: flex; flex-direction: column; gap: var(--space10)}
.art-sidebar1 .filters .kenmerkgroep {padding: 0; border: 0; margin: 0 0 var(--space20) 0;}
.art-sidebar1 .filters .kenmerkgroep:last-child {margin: 0;}
.art-sidebar1 .filters .kenmerkgroep a {padding: 0 0 var(--space15) 0; cursor: pointer; overflow: hidden; border-top: 0; position: relative; margin-top: 0; border-radius: 0; border-bottom: 1px solid var(--borderColor1);}
.art-sidebar1 .filters .kenmerkgroep a.titel {margin: 0; font-size: var(--bodyFontSize); position: relative; font-weight: 500; color: var(--fontColor1);}
.art-sidebar1 .filters .kenmerkgroep a.titel::after {content: "\f107"; font-family: "Font Awesome 5 Pro"; font-weight: normal; position: absolute; right: 5px; font-size: var(--bodyFontSize); 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: var(--space15) 0 0 0; opacity: 1; transition: .3s all ease; margin: 0; border-radius: 0;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken.gesloten {max-height: 130px;}
.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(--fontColor1); font-size: 14px; align-items: center; display: inline-block; margin: var(--space5) 0 0 0;}
.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: var(--space20); box-shadow: unset; border-radius: 0; padding: 0; order:-1;}
.art-sidebar1 .filters .actieveKenmerken:before {content: "Gekozen filters"; color:var(--fontColor1); font-size: var(--bodyFontSize); font-weight: 500; padding: 0 0 var(--space15) 0; margin: 0; display: block;}
.art-sidebar1 .filters .actieveKenmerken .actiefKenmerk {border-radius: var(--borderRadius1); background-color:var(--color4); color: var(--fontColor1);}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label .omschrijving {color: var(--fontColor2); margin-right: var(--space10); font-weight: normal; font-size: 14px;}
.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: var(--space5) 0 0 auto; }
.art-sidebar1 .filters .kenmerkgroep .kenmerken label {display: flex;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label.nietBeschikbaar {display: none;}
.art-sidebar1 .filters .kenmerkgroep .kenmerken label input {top: 5px !important; position: relative; margin: 0 var(--space10) 0 0;}

.shopSortOptie {padding: 0; border: 0; margin: 0 0 var(--space20) 0;}
.shopSortOptie .aantalPerPagina {margin-left: auto;}
.shopSortOptie .sorteerLijst {margin-right: 0;}

.productCarousel {margin: 0;}
.productCarousel .artikel {width: calc((100% - (var(--space30) * 4)) / 5); margin-left: var(--space30); margin-right: 0;}
.productCarousel .artikel .inner {transition: unset; border: 0; padding: 0; background: unset;}

.shopTegel {gap: var(--space30);}
.shopTegel .artikel .inner {border: 2px solid var(--borderColor2); border-radius: var(--borderRadius2); overflow: hidden; padding: 0;}
.shopTegel .artikel .inner:hover {box-shadow: unset;}
.shopTegel .artikel .inner .afbeeldingHouder {background: var(--color4); margin: 0;}
.shopTegel .artikel .inner .afbeeldingHouder img {mix-blend-mode: darken;}
.shopTegel .artikel .inner .afbeeldingHouder .verhouding {padding-bottom: 75%;}

.shopTegel .artikel .inner .omschrijving {padding: var(--space15); box-sizing: border-box; flex: 1; display: flex; flex-direction: column;}

.shopTegel .artikel .inner .omschrijving .rechtsboven .favorieten {margin: 0; z-index: 2;}
.shopTegel .artikel .inner .omschrijving .rechtsboven .favorieten a {background: unset; padding: var(--space15); border-radius: 0;}
.shopTegel .artikel .inner .omschrijving .rechtsboven .favorieten a i {font-weight: lighter; color: var(--fontColor1); font-size: 18px;}
.shopTegel .artikel .inner .omschrijving .rechtsboven .favorieten.aan a i {font-weight: bold;}

.shopTegel .artikel .inner .omschrijving .prijzen {margin-top: auto; padding-top: var(--space10); line-height: 1.5em;}

.shopTegel .artikel .inner .omschrijving .bestellen .bestelknop {gap: var(--space10);}
.shopTegel .artikel .inner .omschrijving .bestellen .bestelknop a.wButBestel {line-height: 1; padding: var(--space10); background: var(--color1); display: flex; align-items: center; width: unset; margin-left: auto; font-weight: lighter;}
.shopTegel .artikel .inner .omschrijving .bestellen .bestelknop a.wButBestel::before {content: "\f290"; font-size: 20px; font-weight: lighter; font-family: "Font Awesome 5 Pro"; margin: auto;}
.shopTegel .artikel .inner .omschrijving .bestellen .bestelknop a.wButBestel span {display: none;}
.shopTegel .artikel .inner .omschrijving .bestellen .bestelknop input {width: 100%;}

.shopLijst {display: flex; flex-direction: column; gap: var(--space10); margin: 0;}
.shopLijst .artikel {border: 2px solid var(--borderColor2); border-radius: var(--borderRadius2); padding: 0; margin: 0;}
.shopLijst .artikel:hover {box-shadow: unset;}

.shopLijst .artikel .inner .afbeeldingHouder {width: 145px; margin: 0; background: var(--color4);}
.shopLijst .artikel .inner .afbeeldingHouder img {mix-blend-mode: darken;}

.shopLijst .artikel .inner .inhoud {padding: var(--space15); margin: 0; gap: var(--space10);}

.shopLijst .artikel .inner .inhoud .omschrijving {margin: auto 0;}
.shopLijst .artikel .inner .inhoud .omschrijving h2 {font-size: 14px;}

.shopLijst .artikel .inner .inhoud .prijzen {width: unset; margin: 0; line-height: 1.5em; margin: var(--space10) 0 0 0;}
.shopLijst .artikel .inner .inhoud .bestellen {margin: auto 0 auto auto;}
.shopLijst .artikel .inner .inhoud .bestellen .bestelknop input {width: 45px !important; border-radius: var(--borderRadius1);}
.shopLijst .artikel .inner .inhoud .bestellen .bestelknop a.wButBestel {line-height: 1; padding: var(--space10); background: var(--color1); display: flex; align-items: center; margin-left: var(--space10); font-weight: lighter;}
.shopLijst .artikel .inner .inhoud .bestellen .bestelknop a.wButBestel::before {content: "\f290"; font-size: 20px; font-weight: lighter; font-family: "Font Awesome 5 Pro"; margin: auto;}
.shopLijst .artikel .inner .inhoud .bestellen .bestelknop a.wButBestel span {display: none;}

.artikel.detail .detailinkollommen {margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space100);}
.artikel.detail .detailinkollommen .links, .artikel.detail .detailinkollommen .rechts {width: 100%; margin: 0;}

.artikel.detail .detailinkollommen .rechts .blok {display: flex; flex-direction: column; gap: var(--space10);}

.artikel.detail .detailinkollommen .rechts .blok .shopNavigatie {margin: 0 0 var(--space10) 0;display: flex; gap: var(--space30); justify-content: right;}
.artikel.detail .detailinkollommen .rechts .blok .shopNavigatie > div {flex: 0;}
.artikel.detail .detailinkollommen .rechts .blok .shopNavigatie .button {background: unset; padding: 0; color: var(--fontColor1); font-weight: normal;}

.artikel.detail .detailinkollommen .rechts .blok .omschrijving h1 {font-size: var(--h1Size); margin: 0 0 0.25em 0;}
.artikel.detail .detailinkollommen .rechts .blok .omschrijving p:last-of-type {margin: 0;}

.artikel.detail .detailinkollommen .rechts .blok .formuleHolder {background: var(--color4); padding: var(--space30); box-sizing: border-box; border-radius: var(--borderRadius2);}
.artikel.detail .detailinkollommen .rechts .blok .formuleHolder:has(h3:empty) {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .formuleHolder .formuleInputVeld {width: 100%; margin: 0;}
.artikel.detail .detailinkollommen .rechts .blok .formuleHolder .totaalFormuleVariatiePrijs {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .formuleHolder .formuleMeerprijs {color: #777; font-size: 12px;}
.artikel.detail .detailinkollommen .rechts .blok .prijzen .exclBtwPrijs .prijs {font-size: var(--h2Size) !important;}

.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.tags .artikel {border-color: var(--borderColor1); background: var(--color4); border-radius: var(--borderRadius1);}
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.tags .artikel.actief {border-color: var(--color1);}

.artikel.detail .detailinkollommen .rechts .blok .bestellen {display: grid; grid-template-columns: 1fr 50px; gap: var(--space10);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop {gap: var(--space10);}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel {line-height: 1; border: 0; display: block; background: var(--color1); width: 100%;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop a.wButBestel::before {display: none;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .bestelknop input {margin-right: 0; width: 100% !important;}

.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten {background: #FFF; border: 1px solid var(--borderColor1); border-radius: var(--borderRadius1); padding: 5px; box-sizing: border-box; margin: 0 ;display: grid; align-items: center; text-align: center;}

.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a {margin: auto; line-height: 0;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .image {padding: 0;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .image i {font-size: 20px; font-weight: lighter; transition: .3s all ease;}

.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten:hover a .image i,
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten.aan a .image i {color: var(--fontColor1); font-weight: bold;}
.artikel.detail .detailinkollommen .rechts .blok .bestellen .favorieten a .toelichting {display: none;}

.artikel.detail .detailinkollommen .rechts .blok #tabArtikelOmschrijvingInhoud .leesMeer {display: block; margin: 0 auto; max-width: 160px; cursor: pointer;}
.artikel.detail .detailinkollommen .rechts .blok #tabArtikelOmschrijvingInhoud > .tabExtra.lang {overflow: hidden; max-height: 85px; transition: .2s all ease; position: relative; }
.artikel.detail .detailinkollommen .rechts .blok #tabArtikelOmschrijvingInhoud > .tabExtra.lang::after {background: linear-gradient(0deg, var(--color3), hsla(0, 0%, 100%, 0)); left: 0; right: 0; transition: opacity .3s cubic-bezier(.39,.575,.565,1); bottom: 0; content: ""; height: 4rem; position: absolute;}
.artikel.detail .detailinkollommen .rechts .blok #tabArtikelOmschrijvingInhoud > .tabExtra.lang.open {overflow: unset; max-height: unset;}
.artikel.detail .detailinkollommen .rechts .blok #tabArtikelOmschrijvingInhoud > .tabExtra.lang.open::after {display: none;}

.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen {margin: 0;}
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen .artikel {border-color: var(--borderColor1); background: var(--color4); border-radius: var(--borderRadius1);}
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen .artikel.actief {border-color: var(--color1);}
.artikel.detail .detailinkollommen .rechts .blok .kenmerkgroepKeuze.afbeeldingen .artikel img {mix-blend-mode: darken;}

.artikel.detail .detailinkollommen.informatie .links {display: flex; flex-direction: column; gap: var(--space40);}
.artikel.detail .detailinkollommen.informatie .links .shopDetailModernKenmerken {margin: 0;}

.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery {background: #FFF; border-radius: var(--borderRadius2);}
.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .verhouding {height: calc(100vh - 350px); padding-bottom: 0; max-height: 450px;}
.artikel.detail .detailinkollommen .links .afbeelding .volledigGallery button {opacity: 1; background: #f2f2f2; width: 40px; height: 40px; padding: 0; border-radius: var(--borderRadius1);}
.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(--fontColor1);}
.artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery button {display: none;}
.artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery .carousel-cell img {border-color: var(--borderColor1); border-radius: var(--borderRadius2);}
.artikel.detail .detailinkollommen .links .afbeelding .thumbnailGallery .carousel-cell.is-selected img {border-color: var(--color1);}

.dropdown .keuze {padding: var(--space10); border-radius: var(--borderRadius1); border-color: var(--borderColor1);}
.dropdown.openGeklapt .keuze {border-radius: var(--borderRadius1) var(--borderRadius1) 0 0;}

.dropdown ul {border-radius: 0 0 var(--borderRadius1) var(--borderRadius1); box-shadow: unset; border: 1px solid var(--borderColor1); border-top: 0; border-bottom: 0; box-sizing: border-box;}
.dropdown ul li a {padding: var(--space10); box-sizing: border-box; background: #FFF;}
.dropdown ul li a:hover {background: #FFF;}
.dropdown ul li.active a {color: var(--color1); font-weight: 600; background: #FFF; border-bottom: 1px solid var(--borderColor1);}


.artikel .bestellen .bestelknop > .aantalMinPlus {margin-right: 0; display: flex; background: #fff; border: 1px solid var(--borderColor1); border-radius: var(--borderRadius1); width: 100% !important; box-sizing: border-box; overflow: hidden;}
.artikel .bestellen .bestelknop input {margin: 0; width: 100% !important; border-radius: var(--borderRadius1) 0 0 var(--borderRadius1); border-color: var(--borderColor1);}
.artikel .aantalMinPlus > *, .artikel .aantalVolgorde > * {width: 100% !important; padding: 8px 0;}
.artikel .aantalMinPlus {font-family: var(--font-family1);}

.artikel .exclBtwPrijs {display: flex; align-items: center; color: var(--color1); font-weight: 600;}
.artikel .exclBtwPrijs .van {margin-right: 0.25em; color: #777; font-weight: normal; font-size: 13px;}
.artikel .exclBtwPrijs .prijs {font-size: var(--bodyFontSize) !important; color: var(--color1);}
.artikel .exclBtwPrijs .btwinfo {font-size: 12px; color: #777; margin-left: 0.25em; font-weight: normal;}

.artikel .inclBtwPrijs {display: flex; align-items: center;}
.artikel .inclBtwPrijs .prijs {font-weight: normal; font-size: 12px !important; color: #777;}
.artikel .inclBtwPrijs .btwinfo {font-size: 12px; color: #777; margin-left: 0.25em;}

.kenmerkArt, .artikelGewicht, .EANnummer {display: grid; padding: 7px 15px; grid-template-columns: 1fr 1fr; color: var(--fontColor1); border: 0;}
.kenmerkArt .groep, .artikelGewicht .titel, .EANnummer .toelichting {font-weight: normal; color: var(--fontColor2);}
.kenmerkArt:nth-child(odd), .EANholder {background: var(--color4);}
.kenmerkArt .kenmerken .kenmerk .kenmerkPlaatje {display: none;}

#tabBijlagenInhoud {font-size: 14px; color: var(--fontColor1);}
#tabBijlagenInhoud table {width: 100%; line-height: 55px;}
#tabBijlagenInhoud table tr {position: relative;}
#tabBijlagenInhoud td {border-bottom: 1px solid var(--borderColor1);}
#tabBijlagenInhoud td.blg1 {width: 50px; position: static;}
#tabBijlagenInhoud td.blg1::before {content: "\f15b"; font-family: "Font Awesome 5 Pro"; font-size: 32px; color: var(--fontColor1); font-weight: lighter; margin-right: var(--space15);}
#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;}

.bijlageIcoon::after {font-size: 8px; background-color: #0078D7; color: #FFF; padding: 3px 5px; border-radius: var(--borderRadius1); position: absolute; left: 10px; bottom: 24px; display: block; line-height: 1em;}
.bijlageIcoon.pdf::after {content: "PDF";}
.bijlageIcoon.STEP::after {content: "STP";}
.bijlageIcoon.zip::after {content: "ZIP";}

#extraSchermWinkelmand .schermWinkelMandje .melding {min-width: 550px; border-radius: var(--borderRadius2);}
#extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven::after {background: var(--color1);}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst {padding: var(--space20); box-sizing: border-box;}
#extraSchermWinkelmand .schermWinkelMandje .shopLijst .artikel .inner .afbeeldingHouder {max-width: 90px; margin: 0;}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a {background: var(--color2);}
#extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {background: var(--color1);}

.kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: 600; color: var(--fontColor1);}
.kassaArtikelen .artikel td.regelStuk .prijzen > div , .kassaArtikelen .artikel td.regelTotaal .prijzen > div {justify-content: right;}

.stap .totalen .stappenKnop a {background: var(--color1); font-weight: 600;}
.stap .totalen .totaalTeBetalen td {font-size: 100%;}
.stap .totalen table tr.totaalVerzendkosten .beschrijving .omschrijving,
.stap .totalen table tr.totaalBetalingskosten .beschrijving .omschrijving {display: none;}

.snelbestellenHolder {background: var(--color4); border-radius: var(--borderRadius2);}

.kassainkollommen .knoppenHouder a.button.winkemmandjeKnopMandjeLegen {background: var(--color2);}

.kassainkollommen > .rechts .blok {background: var(--color4); border-radius: var(--borderRadius2);}

.stap .blokholder {background-color: var(--color4); border-radius: var(--borderRadius2);}
.stap .blokholder > .titel {font-weight: 600;}

.stappenbalk .klaar::after {border-color: var(--color1);}
.stappenbalk .klaar a::before {background: var(--color1);}

.stap.twee .adres .geselecteerd {border-color: var(--color1) !important;}
.stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: var(--color1);}

.stap.drie .regel {border-radius: var(--borderRadius1); border-color: var(--borderColor1);}
.stap.drie .regel.actief {border-color: var(--color1); background: #009d630a;}
.stap.drie .regel .inhoud .omschrijving {font-weight: 600; font-size: 13px;}
.stap.drie .regel .inhoud .omschrijvingExtra {font-size: 11px; color: #777; margin: var(--space5) 0; line-height: 1.5em;}
.stap.drie .regel .inhoud .omschrijvingExtra:empty {display: none;}
.stap.drie .regel .bedrag {font-weight: 600; font-size: 12px;}

.stap.drie .regel .label {min-width: 30px; max-width: 30px;}
.stap.drie .regel .label img {mix-blend-mode: darken;}

.stap.vier .stap4Gegevens.blokholder {display: none;}

.typeKlant input[type="radio"]:checked+label::before, .geslacht input[type="radio"]:checked+label::before {color: var(--color1);}
.typeKlant input[type="radio"]:checked+label, .geslacht input[type="radio"]:checked+label {border-color: var(--color1);}

.pageFooterHolder {background: var(--color3);}
.pageFooterHolder .pageFooter {color: var(--fontColor1); max-width: var(--maxWidth); padding: var(--space50) var(--space30);}
.pageFooterHolder .pageFooter .h2 {color: var(--fontColor1); font-size: 16px;}
.pageFooterHolder .pageFooter a {text-decoration: none; color: var(--fontColor1);}

.pageFooterKnoppenHolder {background: var(--color4);}
.pageFooterKnoppenHolder .pageFooterKnoppen {max-width: var(--maxWidth); padding: var(--space15) var(--space30); color: var(--fontColor1); text-align: center;}
.pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; margin: auto; font-size: 12px;}

.resMenubloktitel {background: var(--color4); border-color: var(--borderColor1); font-weight: 600;}
.resMenublokinhoud .resMenuItem a {border-color: var(--borderColor1);}

.kenmerkMobielHouder.accordion .toonFiltersKnop {background: var(--color1); border-radius: var(--borderRadius1); padding: 15px 20px; font-weight: 600; font-size: var(--bodyFontSize); line-height: 1;}

.kenmerkMobielHouder.accordion .filters .filterBovenkant {background: var(--color4); color: var(--fontColor1); padding: var(--space15) var(--space30); box-sizing: border-box; border-bottom: 1px solid var(--borderColor1); display: grid; grid-template-columns: 1fr 1fr;}
.kenmerkMobielHouder.accordion .filters .filterBovenkant .filtersSluiten {margin-left: auto;}
.kenmerkMobielHouder.accordion .filters .filterBovenkant .filtersSluiten i {font-weight: lighter;}
.kenmerkMobielHouder.accordion .filters .filterBovenkant .alleFiltersWissen a {background: var(--color2); border-radius: var(--borderRadius1); color: #FFF; white-space: nowrap; margin: auto 0;}

.kenmerkMobielHouder.accordion .filters .kenmerkgroepHouder {padding: var(--space30); box-sizing: border-box;}

.kenmerkMobielHouder.accordion .filters .kenmerkgroep {border: 0; padding: 0;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep .titel {padding: var(--space20) 0; background: unset; border: 0; border-radius: 0; border-bottom: 1px solid var(--borderColor1); margin: 0; font-size: var(--bodyFontSize); position: relative; font-weight: 500; color: var(--fontColor1);}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep .titel::after {margin: auto 0 auto auto; top: unset; font-size: 18px; font-weight: lighter; z-index: -1;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep .titel .groepActieveKenmerken:empty {display: none;}

.kenmerkMobielHouder.accordion .filters .kenmerkgroep .kenmerken {border: 0; margin: 0; padding: 0;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep .kenmerken .kenmerk {padding: 0; margin: 0; border-radius: 0;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep.open .kenmerken {border: 0; margin: 0; padding: 15px 0;}
.kenmerkMobielHouder.accordion .filters .kenmerkgroep a.filterGroepHerstel {right: 0; background: var(--color3); border-radius: var(--borderRadius1);}

.kenmerkMobielHouder.accordion .filters .filterknop a {background: var(--color1); border-radius: var(--borderRadius1); padding: 15px 20px; font-weight: 600; font-size: var(--bodyFontSize); line-height: 1; border: 0; width: calc(100% - 40px); margin: 20px; box-sizing: border-box;}

.Taalkeuze_vlaggen ul li.actief {color: #FFF; opacity: 1; font-weight: bold;}
.Taalkeuze_vlaggen ul li a {color: #FFF; text-decoration: none; opacity: .7;}
.Taalkeuze_vlaggen ul li .omschrijving {display: block;}

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

    :root {
      --space50: 30px;
    } 

}


@media screen and (max-width: 900px) {
  
  :root {
    --h1Size: 22px;
    --h2Size: 18px;
    --h3Size: 16px;
    --h4Size: 16px;
    --h5Size: 20px;
    --space5: 5px;
    --space10: 10px;
    --space15: 10px;
    --space20: 20px;
    --space25: 20px;
    --space30: 20px;
    --space40: 20px;
    --space50: 20px;
    --space80: 30px;
    --space100: 30px;
    --space200: 100px;
  } 
  
  a.logo {margin: auto 15px auto 0;}
  a.logo img {width: 90px;}

  .art-Sheet {padding-top: var(--space50) !important;}

  .vak {padding: 0;}

  .vak.maatwerk .inhoud::after {display: none;}

  .productCarousel .artikel {width: calc((100% - (var(--space30) * 1)) / 2);}

  .bovenkantHolder .bovenkant .zoekenHolder {margin: auto; max-width: 150px;}

  .artikel.detail .detailinkollommen .links .afbeelding .volledigGallery .verhouding {height: calc(100vh - 200px); max-height: 300px;}

  .breadcrumbs {display: none;}

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

  .shopSortOptie {margin: 0;}


}


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

  .grid-4x {grid-template-columns: 1fr 1fr;}

  .productCarousel .artikel {width: calc((100% - (var(--space30) * 0)) / 1);}

  .artikel.detail .detailinkollommen {grid-template-columns: 1fr;}


}