:root { --color1: #cc2222; --color2: #7fb923; --color3: #eee; --color4: #5b5044; --fontColor: #000; --borderColor: #ccc; } /* standaard terugzetten */ a.logo {line-height: revert; margin-right: revert;} .zoeken .veld {overflow: revert; z-index: revert;} img, .artikel .afbeeldingHouder img, .volledigGallery .carousel-cell-groot img {object-fit: revert;} .winkelwagenHouder .winkelknop .icoon, .shopCompact .artikel .col2, .shopCompact .artikel .prijzen {line-height: revert;} .winkelwagenHouder .winkelknop .icoon::before, .Taalkeuze_vlaggen ul li.actief .afbeelding::before, .sorteerKnoppen a .titel::before, .shopSortOptie a.actief.asc::after, .tooltip::after, #speedsearchResult .houder .speedSearch ul li a::after, #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail::after, .presentatieWijze a .titel::before {content: revert;} a.knop {line-height: revert; text-align: revert;} .Taalkeuze_vlaggen.dropdownTaal ul li {white-space: revert;} .h3, .winkelwagenHouder .winkelknop .titel, .filters .kenmerkgroep a.titel {font-weight: revert; line-height: revert;} .resMenuwinkelmandje #reswinkelMandjeAantal, .art-Sheet, .Taalkeuze_vlaggen.dropdownTaal ul li a, .shopAfdrukkenKnop .pdfKnop, .artikel .bestellen .bestelknop, .couponcodeHouder:empty, .stap .pdfKnop {display: revert;} .resMenubalk, .sorteerKnoppen a .icon {margin-bottom: revert; margin-left: revert; margin-top: revert;} .winkelwagenHouder .winkelknop {background-color: revert; border-radius: revert; margin-left: revert; padding: revert;} .bovenkantHolder {border-bottom: revert; border-top: revert; z-index: revert;} .Taalkeuze_vlaggen.dropdownTaal ul {border-bottom-left-radius: revert; border-bottom-right-radius: revert; max-height: revert; overflow: revert; position: revert;} .breadcrumbs ol li.crumbSpace {border: revert; height: revert; left: revert; margin-left: revert; margin-right: revert; overflow: revert; position: revert; top: revert; width: revert;} .resMenublokinhoud ul {line-height: inherit;} .art-menu li a .t {padding: revert;} .resMenubloktitel {border-bottom: revert; line-height: revert;} .account .houder .houder2 {padding: 15px 25px;} .zoeken {border: revert;} #speedsearchResult {z-index: revert;} .account .inloggenKnop {text-decoration-line: underline;} .account .inloggen .wachtwoord input {margin-bottom: revert;} select {cursor: revert;} .winkelwagenHouder .winkelknop .aantal {background-color: #7fb923; box-shadow: revert;} .pageFooterKnoppenHolder .pageFooterKnoppen {display: revert; font-size: revert; line-height: revert;} .art-Sheet .art-content {flex-basis: revert; flex-grow: revert;} .bovenkantHolder .bovenkant {display: revert; max-width: revert; min-height: revert; padding: 0px 20px;} button {cursor: revert; font-family: revert;} input[type="radio"]:checked::before, .stap .blokholder > .titel {font-weight: revert;} .resMenuHolder {max-width: revert;} .breadcrumbs ol {list-style-type: revert;} .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: revert;} .breadcrumbs {font-size: revert;} .zoeken .knop, .presentatieWijze a .icon {margin: revert;} .filters .kenmerkgroep .kenmerken label, .shopCategorieHolder .categorie a {overflow: revert;} .filters .kenmerkgroep .kenmerken .kenmerk input[type="checkbox"] {position: revert; top: revert;} .filters .kenmerkgroep .kenmerken label .aantal {color: #8f8f8f; font-size: revert; margin-top: 4px;} .artikel .labels .label {margin-left: revert; margin-top: revert;} .shopTegel .artikel .omschrijving h2.titel a {font-size: 15px; font-weight: 600;} .shopTegel .artikel .omschrijving h2.titel {-webkit-line-clamp: revert; font-size: 24px; font-weight: 600; overflow: revert;} .formuleHolder > .titel {color: revert; font-size: revert; line-height: revert; margin-bottom: revert;} .filters .kenmerkgroep .kenmerken .kenmerk {border-radius: revert; margin-left: revert; margin-right: revert; padding-left: 0px; padding-right: 0px;} .shopTegel .artikel .bestellen .bestelknop input {border-bottom-left-radius: 0px; border-top-left-radius: 0px;} .artikel .bestellen .bestelknop a.wButBestel {background-color: #7fb923; line-height: normal;} .formuleHolder {position: revert; z-index: revert;} .art-Sheet .art-sidebar1 {box-sizing: revert;} .artikel .labels {font-size: revert; left: revert; line-height: revert; top: revert;} .shopTegel .artikel .bestellen {margin-top: revert;} .artikel .artikelnr > .titel {margin-right: revert;} .presentatieWijze a {border-right: revert; padding-bottom: 5px !important; padding-top: 5px !important; position: revert; width: revert !important;} .resCategorieen {margin-bottom: revert; margin-left: revert; margin-right: revert; padding-left: revert; padding-right: revert;} .filters .actieveKenmerken {border-top: revert; box-sizing: revert; color: revert; line-height: revert; padding: revert;} .filters .beschikbaar, .filters .toelichting {color: revert; font-size: revert; font-weight: revert; margin-top: revert;} .shopSortOptie > *, .shopCompact .artikel .omschrijving, .shopCompact .artikel .artikelnr {margin-bottom: revert; margin-right: revert; margin-top: revert;} .sorteerKnoppen, .presentatieWijze {background-color: revert; border-radius: revert; box-sizing: revert;} .sorteerKnoppen a .titel {background-color: revert; border-radius: revert; bottom: revert; box-sizing: revert; color: revert; display: revert; font-size: revert; left: revert; line-height: revert; opacity: revert; padding: revert; pointer-events: revert; position: revert; transform: revert; white-space: revert;} .filters .kenmerkgroep .kenmerken {margin-left: 0px; margin-right: 0px;} .presentatieWijze a .titel {background-color: revert; border-radius: revert; bottom: revert; box-sizing: revert; color: revert; display: none; font-size: revert; left: revert; line-height: revert; opacity: revert; padding: revert; pointer-events: revert; position: revert; text-align: revert; white-space: revert;} .kenmerkMobielHouder .filters .filterknop a {border-radius: revert;} .resCategorieen ul li:last-child {margin-right: 10px;} .art-BlockHeader, .artikel .favorieten {position: revert;} .sorteerKnoppen a {border-right: revert; color: #666 !important; padding-bottom: 5px !important; padding-top: 5px !important; position: revert; width: revert !important;} .shopSortOptie {border: revert; border-radius: revert; display: revert; margin-bottom: revert; padding: 0px;} .shopSortOptie a.actief {color: #c22 !important;} .artikel .artikelnr {color: revert; font-size: revert;} a.button {text-align: revert;} .shopCompact .artikel a.link {bottom: revert; display: revert; left: revert; position: revert; right: revert; text-indent: revert; top: revert;} .shopCompact .artikel .bestellen {margin-bottom: revert; margin-top: revert; min-width: revert; width: revert; z-index: 2;} .shopCompact .artikel {display: revert; padding: revert;} .thumbnailGallery .carousel-cell img {max-width: 74px !important;} .artikel.detail h1, h2 + h5 {margin-bottom: 0.5em;} .h2, #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr {color: revert;} button.flickity-button {background-color: #f5f5f5;} .artikel.detail .shopDetailModernKenmerken {margin-bottom: revert; margin-top: revert;} .shopCategorieHolder .categorie .titel {padding: revert; position: revert;} .shopCategorieHolder .categorie .titel h2 {overflow: revert; text-overflow: revert; white-space: revert;} .liquid-slide-sjabloon .sliderWrapper {bottom: revert; left: revert; margin-left: revert; margin-right: revert; max-width: revert; position: revert; right: revert; top: revert; z-index: revert;} .liquid-slide-sjabloon .inhoud p:last-child {margin-bottom: 1em;} .liquid-slide-sjabloon .inhoud {background-color: revert; box-sizing: revert; padding: 10px 20px;} .shopCategorieHolder .categorie {border: revert; box-sizing: revert;} .shopCategorieHolder {column-gap: revert; display: revert; grid-template-columns: revert; row-gap: revert;} .account .openGeklapt .inloggenKnop {color: inherit;} .couponcodeHouder {background-color: revert; border-radius: revert; margin-bottom: revert; min-height: revert; padding: revert;} .stap .totalen .stappenKnop a {background-color: #7fb923; padding: 10px;} .winkelwagenHouder .winkelwagen .inhoud.totaal {display: revert; line-height: revert;} .stap .blokholder {background-color: revert; border-radius: revert; padding: revert;} .resMenuItem.favorieten a span {background-color: revert; border: revert; border-radius: revert; box-sizing: revert; line-height: revert; margin-bottom: revert; margin-left: revert; margin-top: revert; min-width: revert; padding: revert;} .resMenuItem.favorieten a {display: block;} .Taalkeuze_vlaggen.dropdownTaal.open ul {background-color: revert; box-shadow: revert; max-height: revert;} #speedsearchResult .houder .speedSearch ul li {margin-bottom: 0px; margin-left: 0px; margin-right: 0px;} #speedsearchResult .houder .speedSearch.artikelen ul li .artikelNr .nummer {text-transform: revert;} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail img {bottom: revert; height: 50px !important; left: revert; margin: revert; max-height: revert; max-width: revert; position: revert; right: revert; top: revert; width: auto !important;} #speedsearchResult .houder .speedSearch ul li a {border-bottom-color: #eee; border-left: revert; border-right: revert; border-top: revert; padding: 10px 0px;} #speedsearchResult .houder .speedSearch ul li a strong {border-bottom: revert; font-weight: revert; line-height: revert; position: revert;} #speedsearchResult .houder {border: revert; font-size: revert; line-height: revert; overflow-x: revert; width: revert;} #speedsearchResult .houder .speedSearch.artikelen ul li .thumbnail {float: right; margin-right: revert; position: revert;} #speedsearchResult .houder .speedSearch ul li:last-child {margin-bottom: 0px;} #speedsearchResult .houder .knopAllesOnder a {background-color: #7fb923; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;} #speedsearchResult .houder .speedSearch .resultaat {padding-left: 0px; padding-right: 0px; padding-top: 20px;} .account .houder, .account .openGeklapt .houder {transform: revert;} .Taalkeuze_vlaggen.dropdownTaal {height: revert; min-width: revert;} .shopTegel .artikel .bestellen .bestelknop a.wButBestel, table, input[type="text"], #speedsearchResult .houder .knopAllesOnder {width: revert;} .shopCompact .artikel .afbeeldingHouder {min-width: revert;} .artikel.detail .rechts .bestellen .bestelknop input {width: 70px !important;} .snelbestellenHolder .autocomplete-suggestions {left: revert; right: revert;} .filters {user-select: revert;} @media screen and (max-width: 1500px) { .bovenkantHolder .bovenkant {padding: 0px 20px;} } @media screen and (max-width: 1000px) { .shopTegel .artikel .omschrijving h2.titel {font-size: 32px;} } @media screen and (max-width: 900px) { input[type="text"], input[type="password"], input[type="email"], select, textarea, input[type="number"], input[type="tel"] {font-size: inherit;} .bovenkantHolder {position: relative; top: revert;} .bovenkantHolder .bovenkant {padding: 0px 20px;} h1, h2, h5 {clear: revert;} .FCK4kolTd {display: revert; width: 20%;} .winkelwagenHouder, .FCK4kolTdS, .art-nav, .shopCompact .artikel .artikelnr, .shopCompact .artikel .bestellen {display: revert;} .resMenubalk, .resCategorieen, .kenmerkMobielHouder {display: none;} .shopCompact .artikel {padding: revert;} .formulier_text {max-width: revert;} .liquid-slide-sjabloon .sliderWrapper {position: revert;} .vak {padding-bottom: revert; padding-top: revert;} .couponcodeHouder {margin-bottom: revert; padding: revert;} .stap .blokholder {margin-bottom: 20px;} #speedsearchResult {right: 0px;} } @media screen and (max-width: 760px) { a.logo {margin: 0px auto;} } @media screen and (max-width: 680px) { .pageFooterKnoppenHolder .pageFooterKnoppen {flex-direction: revert;} .shopSortOptie > * {margin: revert !important; width: revert;} .shopSortOptie {flex-wrap: revert;} .shopCompact {margin-left: revert; margin-right: revert;} .shopCategorieHolder {grid-template-columns: revert;} } @media screen and (max-width: 560px) { .sorteerKnoppen a {padding: 5px !important;} } /* basis */ body {overflow-y: scroll; color: var(--fontColor); font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, Sans-Serif;} #art-main {background: #FFF;} body > .laadtijd { background-color: #d21e1e; border-radius: 3px; bottom: 5px; color: #fff; cursor: default; display: block; font-size: 11px; font-style: normal; line-height: 1.25em; opacity: 0.9; padding: 4px 7px; position: fixed; right: 5px; z-index: 10; text-align: right; margin: 0; } body > .sessienr { border-radius: 3px; cursor: default; display: block; font-size: 11px; font-style: normal; line-height: 1.25em; opacity: 0.9; padding: 4px 7px; position: fixed; right: 5px; z-index: 10; text-align: right; margin: 0; } body > .sessienr {background-color: #f1f1f1; bottom: 29px; color: var(--fontColor);} .art-Sheet {background: #fff; max-width: 1200px; min-width: 1px; padding: 30px 20px;} .bovenkant .art-nav {right: 300px; margin: 0 auto; position: absolute; top: 13px;} .art-menu li a {padding: 5px 10px;} .art-menu li a .t {color: #FFF; font-size: 16px; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-weight: 600; margin: 0 7px; line-height: 30px;} .art-menu li a .t:hover {color: #FFF;} .art-menu li a.active .t {color: #FFF;} .art-menu li a .t:before { position: absolute; top: 40px; border-bottom: 3px solid rgba(255,255,255,.0); content: " "; display: block; width: 20px; left: 50%; margin-left: -10px; transition: all .3s ease; } .art-menu li a .t:hover:before {border-bottom: 3px solid #FFF;} .art-menu li a.active .t:before {border-bottom: 3px solid #FFF;} .art-menu ul {z-index: 10; box-shadow: 0 5px 5px rgba(0,0,0,.2);} .art-menu li li:hover > ul {top: 0;} .art-menu ul li a {font-weight: bold; width: 200px;} .art-menu ul li a::before {content: "\f054";} .art-menu ul li a:hover {background-color: var(--color3);} .art-menu ul li a.active {color: #d21e1e; font-weight: bold;} .art-menu ul li a.active:before {color: #d21e1e;} .winkelmenu {display: none;} .winkelmenu .art-nav {box-sizing: border-box; margin: 0 auto; max-width: 1200px; padding: 0 20px; position: relative; top: 0 !important;} .winkelmenu .art-nav li.separatorHouder {display: inline-block; line-height: 0;} .art-contentLayout {position: relative; max-width: 1200px; padding: 0;} .art-Block {padding: 0px; margin: 0px auto; z-index: 0; padding-top: 20px;} .art-BlockHeader {font-size: 22px; font-weight: 600; margin: 0 0 5px; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; line-height: 1.65em;} .art-BlockContent {position: relative; z-index: 0; margin: 0 auto; min-width: 1px; min-height: 1px;} .art-BlockContent-body {padding: 0; position: relative; z-index: 1;} .art-Post {margin: 20px 30px; position: relative; box-sizing: border-box;} .art-Post img {max-width: 100%; height: auto !important;} a, a:link, a:visited, a.visited {text-decoration: none; color: var(--color1);} .art-Post p > a[target="_blank"]:after, .art-Post p > a[href$= ".pdf"]:after { display: inline-block; margin-left: 3px; margin-right: 3px; font-family: "Font Awesome 5 Pro"; font-size: 100%; font-weight: normal; text-decoration: none !important; } .art-Post p > a[href$= ".pdf"]:after {content: "\f1c1";} .h2, h4, h5, h6, h4 a, h5 a, h6 a, h4 a:hover, h5 a:hover, h6 a:hover, h4 a:visited, h5 a:visited, h6 a:visited {margin: 0 0 .5em 0; line-height: 1.65em;} h1, h2, h3, h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover, h1 a:visited, h2 a:visited, h3 a:visited {margin: 0 0 .5em 0;} h1, h1 a, h1 a:visited, h1 a:hover {font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 36px; font-weight: 600; line-height: 1.25em;} h1 a:link {font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 36px; font-style: normal; font-weight: 600; line-height: 1.25em;} h2, h2 a, h2 a:visited, h2 a:hover {color: var(--fontColor); font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-weight: 600; line-height: 1.25em;} h2 a:link {color: var(--fontColor); font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-style: normal; font-weight: 600; line-height: 1.25em;} h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover { color: var(--fontColor); font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 20px; font-weight: 600; line-height: 1.25em; } h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {color: var(--fontColor); font-family: "Open Sans",Helvetica,Arial,sans-serif; font-size: 14px; font-weight: bold;} h5, h5 a, h5 a:visited, h5 a:hover {color: #777; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 18px;} h5 a:link {color: #777; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 18px; font-style: normal;} h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .h2 {font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 22px;} blockquote {font-family: "Open Sans", Georgia, Garamond, Helvetica Neue,Helvetica,Arial, Sans-Serif; font-style: normal; line-height: 1.5em;} blockquote p {font-family: "Playfair Display", "Open Sans", Helvetica, Arial, Sans-Serif;} hr {margin: 40px 0;} .art-contentLayout .art-content {position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: visible; width: 250px; z-index: 0;} .art-contentLayout .art-sidebar1 {position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 250px;} .art-contentLayout .art-sidebar2 {position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 250px;} .art-contentLayout .art-content-sidebar1 {position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 750px;} .art-contentLayout .art-content-sidebar2 {position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 750px;} .ccLinks {position: absolute; bottom: 0; top: 0; left: 0;} .ccRechts {position: absolute; bottom: 0; top: 0; right: 0;} .art-sidebar1 .art-Block {padding-right: 20px;} .art-sidebar2 .art-Block {padding-left: 20px;} .art-contentLayout .art-sidebar1 h2 {font-size: 22px; font-weight: normal; margin: 0 0 5px; font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .art-sidebar1 .FCK2kolTd, .art-sidebar1 .FCK3kolTd, .art-sidebar1 .FCK4kolTd, .art-sidebar1 .FCK5kolTd {width: 100%; display: block; margin-bottom: 15px;} .art-sidebar1 .FCK2kolTdS, .art-sidebar1 .FCK3kolTdS, .art-sidebar1 .FCK4kolTdS, .art-sidebar1 .FCK5kolTdS {display: none;} .art-sidebar2 .FCK2kolTd, .art-sidebar2 .FCK3kolTd, .art-sidebar2 .FCK4kolTd, .art-sidebar2 .FCK5kolTd {width: 100%; display: block; margin-bottom: 15px;} .art-sidebar2 .FCK2kolTdS, .art-sidebar2 .FCK3kolTdS, .art-sidebar2 .FCK4kolTdS, .art-sidebar2 .FCK5kolTdS {display: none;} /* webwinkel */ .shopSortOptieTable {width: 100%; margin: 10px 0px;} .shopSortPres a:hover {color: var(--color1);} .shopSortPres a.actief {color: var(--color1);} .shopSortOptie2 {text-align: center;} .shopSortOptie {text-align: center;} td.shopSortMaxPageA, td.shopSortMaxPageB, td.shopSortMaxPageC {display: none;} .shopSortOptieTable a {text-decoration: none; transition: all .3s ease;} .shopSortOptieTable a.actief {font-weight: bold; color: var(--color1); background: var(--color3);} .shopSortOptieTable a.actief.asc .titel::after {content: "\f0d7"; font-family: "Font Awesome 5 Pro"; margin-left: 5px; font-weight: normal;} .shopSortOptieTable a.actief.desc .titel::after {content: "\f0d8"; font-family: "Font Awesome 5 Pro"; margin-left: 5px; font-weight: normal;} .aantalPerPagina select {padding: 5px 25px 5px 10px;} .aantalPerPagina span {line-height: 31px; padding-right: 5px;} .presentatieWijze, .sorteerKnoppen {display: inline-block; vertical-align: middle; padding: 0; border: 1px solid var(--color3); overflow: hidden;} .presentatieWijze a {padding: 5px 10px; display: inline-block; line-height: 1.5em; color: #666;} .sorteerKnoppen a {display: inline-block; line-height: 1.5em; color: #666;} .sorteerKnoppen a {padding: 5px 10px;} .sorteerKnoppen a .icon {margin-right: .25em;} .presentatieWijze a:hover, .sorteerKnoppen a:hover {color: var(--color1); background: var(--color3);} .presentatieWijze .titel {display: none;} .presentatieWijze i {font-weight: bold;} .shopAfdrukkenKnop .pdfKnop {margin: 0 0 0 5px; padding: 0; text-align: right;} .shopAfdrukkenKnop .pdfKnop .button {padding: 8px; line-height: 1; text-align: center; min-width: 45px; border: 1px solid var(--color2);} .shopCategorieHolder .categorie {width: 33.3%; float: left;} .shopCategorieHolder .categorie .inner {position: relative; transition: all .3s ease; margin: 5px; overflow: hidden; cursor: pointer;} .shopCategorieHolder .categorie:nth-of-type(4n + 0) .inner {border-right: 0;} .shopCategorieHolder .categorie .inner:hover .afbeeldingHouder {filter: grayscale(0%); transform: scale(1.1);} .shopCategorieHolder .categorie .inner:hover a {background: rgba(0,0,0,0);} .shopCategorieHolder .categorie a {z-index: 10; background: rgba(0,0,0,.3);} .shopCategorieHolder .categorie .titel {display: table-cell; vertical-align: middle;} .shopCategorieHolder .categorie .titelHouder {display: table; position: absolute; top: 0; width: 100%; z-index: 10; vertical-align: middle; height: 260px;} .shopCategorieHolder .categorie .titel h2 { color: #fff; font-size: 21px; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; display: inline-block; padding: 4px 10px; transition: .3s all ease; } .shopCategorieHolder .afbeeldingHouder {height: 0; padding-bottom: 100%; transform: scale(1); transition: .3s all ease; background-size: cover;} .artikel .afbeelding {margin-bottom: 20px;} .artikel .labels {display: flex; flex-wrap: wrap; gap: 5px; margin: 10px;} .artikel .labels .label { display: block; position: relative; line-height: 1; border-radius: 4px; padding: 8px; font-size: 14px; text-transform: uppercase; margin-right: auto; } .artikel .labels .label.groen {color: #fff; background: var(--color2);} .artikel .labels .label.rood {color: #fff; background: #d21e1e;} .artikel .labels .label.geel {color: #fff; background: #ffdb51;} .artikel .labels .label.oranje {color: #fff; background: #ffa500;} .artikel .labels .label.zwart {color: #fff; background: var(--fontColor);} .artikel .labels .label.blauw {color: #FFF; background: #1E90FF;} .artikel .labels .label.violetred {color: #FFF; background: #FF3E96;} .artikel .labels img {width: 70px; height: 23px;} .artikel .artikelnr > .titel {padding-right: 0.3em;} .artikel .artikelnr > .nummer {white-space: nowrap;} .artikel .voorraad .status {border-spacing: 0;} .artikel .voorraad .status .image {vertical-align: middle; width: auto;} .artikel .voorraad .status .toelichting { background-color: #ff6a00; border-radius: 3px; color: #fff; line-height: 1em; padding: 8px 10px; display: table-cell; vertical-align: middle; font-size: 12px; font-weight: normal; width: auto; } .artikel .voorraad .status .negatief {background-color: #e10101;} .artikel .voorraad .status .positief {background-color: #64A43A;} .artikel .extraUitleg {margin: 0.25em 0;} .artikel .prijzen {margin: 0.25em 0; color: var(--fontColor); padding: 10px 0 0 0;} .artikel .prijzen .prijs {font-weight: normal; font-family: "Open Sans"; font-size: 14px;} .artikel .prijzen .voor {font-size: 120%;} .artikel .prijzen .vanaf {font-size: 12px;} .artikel .artikelEenheid {font-size: 12px; font-weight: normal;} .artikel .btwinfo, .artikel .artikelGroepPrijs {font-size: 12px; font-weight: normal; display: block;} .artikel .artikelBestelEenheid {font-size: 12px; font-weight: normal;} .artikel .bestellen {z-index: 2;} .artikel .bestellen .bestelknop input {width: 60px; margin-bottom: 0;} .artikel .favorieten {clear: both; font-size: 12px; margin: 0.25em 0 0 0;} .artikel .favorieten.aan i {font-weight: bold;} .artikel .verlang {clear: both; font-size: 12px;} .artikel .verlang .image img {position: relative; top: 2px;} .artikel .variatie {margin: 10px 0; max-width: 300px;} .artikel .variatie .mArt_holder {margin: 0 0 5px;} .artikel #extraVrachtkosten {display: inline-block; padding: 5px 10px; margin: 0.5em 0; background-color: var(--color3); border-radius: 5px;} .artikel #extraVrachtkosten a {text-decoration: none;} .relatieBtwPrijs {color: #666; display: inline-block; font-size: 11px; font-weight: normal;} .relatieBtwPrijs .exBtwToelichting {padding-left: 0.3em;} .relatieBtwTotaalPrijs {display: block; font-size: .8em; color: #666; font-weight: normal;} .relatieBtwTotaalPrijs .exBtwToelichting {padding-left: 0.3em;} .shopLijst .artikel {border: 1px solid var(--color3); padding: 5px 0;} .shopLijst .artikel > a {z-index: 0;} .shopLijst .artikel .inner {display: table; width: 100%; border-spacing: 5px;} .shopLijst .artikel .inner .col1, .shopLijst .artikel .inner .col2 {display: table-cell; vertical-align: middle;} .shopLijst .artikel .inner .col3 {display: table-cell;} .shopLijst .artikel .inner .col1 {width: 150px; padding-right: 10px;} .shopLijst .artikel .inner .col2 {width: auto; padding: 0px;} .shopLijst .artikel .inner .col3 {width: 130px; vertical-align: middle; text-align: right; padding-right: 15px;} .shopLijst .artikel .afbeeldingHouder .labels img {width: 50px; height: auto;} .shopLijst .artikel .omschrijving {margin: 0 0 10px;} .shopLijst .artikel .omschrijving h2.titel a {font-family: "Open Sans"; font-size: 14px;} .shopLijst .artikel .prijzen {font-size: 18px; margin: 0 0 10px;} .shopLijst .artikel .prijzen .van {font-size: 18px;} .shopLijst .artikel .prijzen .voor {font-size: 25px;} .shopLijst .artikel .bestellen {padding: 0;} .shopLijst .artikel .meerinfo {line-height: 1.5em; color: #aaa;} .shopLijst .artikel .bestelknop {border-spacing: 0; display: inline-table; position: relative;} .shopLijst .artikel .bestelknop input {display: table-cell; margin: 0; border-radius: 3px 0 0 3px; width: 32px;} .shopLijst .artikel .bestelknop .button {display: table-cell; margin: 0; border-radius: 0px 3px 3px 0px;} .shopTegel {grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));} .shopTegel .artikel {flex-direction: column; transition: all .3s ease; border-radius: 0; background: #FFF; border: 1px solid #eaeae7;} .shopTegel .artikel:hover {box-shadow: 0 0 40px -4px rgba(0, 0, 0, 0.2);} .shopTegel .artikel > a {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; text-indent: -9999px;} .shopTegel .artikel .meerinfo {padding: 0 10px 10px; text-align: center;} .shopLijst .labels, .shopTegel .labels {transform: scale(.7); transform-origin: top left;} .shopTegel .artikel .afbeeldingHouder .labels img {width: 50px; height: auto;} .shopTegel .artikel .omschrijving {padding: 10px;} .shopTegel .artikel .omschrijving h2 {margin: 0;} .shopTegel .artikel .omschrijving h2 a {font-size: 15px; margin: 0; line-height: 1.25em; display: block; text-align: center;} .shopTegel .artikel .omschrijving .artikelnr {font-size: 13px; text-align: center; color: #666;} .shopTegel .artikel .omschrijving .artikelnr .titel {display: none;} .shopTegel .artikel .bestellen .bestelknop {display: grid; grid-template-columns: 1fr 1fr;} .shopTegel .artikel .bestellen .bestelknop input {background: var(--color3); border: 1px solid #eaeae7; border-top: 1px solid var(--color3); width: 100%;} .shopTegel .artikel .bestelknop a.wButBestel { display: block; text-align: center; overflow: hidden; color: transparent; padding: 0; background: url(images/winkelwagenZwart.png); background-size: 26px; background-repeat: no-repeat; background-position: center; border: 0; } .shopTegel .artikel .favorieten {display: none; position: absolute; right: 1px; top: 1px;} .shopTegel .artikel .favorieten .toelichting {display: none;} .shopTegel .artikel .bestelHolder {display: grid; grid-template-columns: 1fr 2fr; width: 100%; border-top: 1px solid #eaeae7; box-sizing: border-box;} .shopTegel .artikel .bestelHolder.volledig {grid-template-columns: 1fr; height: 41px; line-height: 40px; text-align: center;} .shopTegel .artikel .prijzen {text-align: center; margin: auto 0; padding: 0;} .shopTegel .artikel .prijzen .voor {font-size: inherit; color: #d21e1e;} .shopTegel .artikel .voorraad {text-align: center;} .shopTegel .artikel .opDeHoogteHoudenKnop {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .shopCompact .artikel > a {display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; text-indent: -9999px;} .shopCompact .artikel .inner {border-spacing: 0; display: table; padding: 5px 0; table-layout: fixed; width: 100%;} .shopCompact .artikel .inner .col1, .shopCompact .artikel .inner .col2, .shopCompact .artikel .inner .col3 { display: table-cell; vertical-align: top; padding: 0 10px 0 0; } .shopCompact .artikel .inner .col4 {display: table-cell; vertical-align: top;} .shopCompact .artikel .inner .col1 {width: 100px;} .shopCompact .artikel .inner .col2 {width: auto;} .shopCompact .artikel .inner .col3 {width: 170px; white-space: nowrap;} .shopCompact .artikel .inner .col4 {width: 81px; padding: 0 0 0 10px; line-height: 1em;} .shopCompact .artikel .inner h2.titel, .shopCompact .artikel .inner h2.titel a { font-size: 13px; font-weight: normal; margin: 0; line-height: inherit; font-family: "Open Sans"; } .shopCompact .artikel .inner .merk {display: none;} .shopCompact .artikel .afbeeldingHouder { display: block; height: 0; margin: 0; opacity: 0; pointer-events: none; position: absolute; visibility: hidden; width: 0; top: 0; left: 0; } .shopCompact .artikel .afbeeldingHouder .labels img {width: 50px; height: auto;} .shopCompact h2.titel a {font-size: 14px;} .shopCompact .artikel .prijzen {margin: 0; padding: 0;} .shopCompact .artikel .bestellen input {line-height: 1em; padding: 4px; margin: 0; float: left;} .shopCompact .artikel .bestellen input {border-radius: 3px 0 0 3px; height: 22px; width: 58px;} .shopCompact .artikel .bestellen a.wButBestel {border-radius: 0 3px 3px 0; box-sizing: border-box; line-height: 0; padding: 11px 6px; top: 0 !important;} .shopCompact .artikel .bestellen a.wButBestel:before {content: "+";} .shopCompact .artikel .bestellen a.wButBestel span {display: none;} .shopCompact .artikel .favorieten {display: none;} .shopCompact .artikel .artikelnr {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;} .shopCompact .artikel .voorraad, .shopCompact .artikel .artikelEenheid {display: none;} .artikel.detail .links {float: left; width: 50%;} .artikel.detail .rechts {float: right; width: 45%; padding-left: 20px;} .artikel.detail .artikelTabs {clear: both; margin-top: 20px;} .artikel.detail h1 {text-decoration: none; font-size: 24px;} .artikel.detail .attentie {font-weight: bold; background: #fafafa; border: 1px solid var(--color3); padding: 10px; text-align: center; border-radius: 3px;} .artikel.detail .attentie p {margin-bottom: 0;} .artikel.detail .rechts .bestellen {margin: 10px 0 20px; padding: 10px 0;} .artikel.detail .bestelknop {display: inline-table; position: relative; border-spacing: 0;} .artikel.detail .bestellen .bestelknop input { display: table-cell; vertical-align: middle; border-radius: 3px 0px 0px 3px; height: 38px; position: relative; text-align: center; width: 70px; margin: 0px 0px 0px 0px; } .artikel.detail .bestellen .bestelknop .wButBestel { font-size: 14px; display: table-cell; vertical-align: middle; border-radius: 0px 3px 3px 0px; padding: 5px 20px; text-align: center; transition: .3s all ease; } .artikel.detail .bestellen .bestelknop .wButBestel::before {content: "\f07a";} .artikel.detail .displayprijs {display: block;} .artikel.detail .gekoppeldeCategorie {margin: 30px 0 10px;} .artikel.detail .artikelOmschrijving {margin-top: 30px;} .artikel.detail .kenmerkgroep {display: none;} .flickity-prev-next-button .flickity-button-icon {left: 35%; top: 35%; width: 30%; height: 30%;} .thumbnailGallery .carousel-cell img {max-width: 74px;} .thumbnailGallery .carousel-cell.is-selected img, .thumbnailGallery .carousel-cell-yt.is-selected img {border-color: #d21e1e;} .thumbnailGallery .flickity-button {padding: 0;} .kassaTitel {background-image: url('images/tabeltitel2.jpg'); font-weight: bold; height: 26px;} .kassaArtikelen {padding: 1px;} .shopNavigatie a.button {padding: 4px 20px; margin-bottom: 15px;} .artT4E_1, .artT4E_2 {padding-right: 15px; white-space: nowrap;} .lev1AA {height: 10px;} .lev1 {height: 26px;} .lev1A {height: 30px; width: 25px;} .lev1B {padding-top: 2px;} .lev1C {width: 100px; padding-right: 15px; text-align: right; font-weight: bold;} .lev1Ar, .lev1Br, .lev1Cr {height: 2px; border-bottom: 1px solid #BFBFBF;} .lev1Bb, .lev1Cb {border-top: 1px solid #BFBFBF; background-color: #EFEFEF;} .gewA {height: 21px; border-bottom: 1px solid #BFBFBF; border-left: 1px solid #BFBFBF; background-color: #EFEFEF; padding-top: 5px;} .nawA {height: 21px; width: 260px; padding-left: 5px; white-space: nowrap; font-size: 12px;} .lev4A {text-align: center;} .lev5A {width: 30px;} .lev10 {background-image: url('images/tabeltitel2.jpg'); width: 100%; height: 25px; padding-left: 5px; font-weight: bold;} .lev11 {width: 100%; padding-left: 5px; background-color: #EFEFEF;} .lev11A {width: 250px;} .lev12 {padding: 5px;} .lev12A {width: 100px; padding: 1px;} .lev12B {width: 150px; padding: 1px;} .lev13 {padding: 5px;} .lev13A {vertical-align: top;} .lev13B {height: 20px; text-align: left;} .tabsV2 .titels > div {padding: 10px 20px;} .tabsV2 .titels > div.actief {border-top: 3px solid var(--color1);} .tabsV2 .inhoud {clear: both; border: 1px solid var(--color3); padding: 20px; box-sizing: border-box; background: #fff; position: relative;} .tabsV2 .inhoud > div.actief {display: block;} .tabsV2 .inhoud > div {display: none;} ul.catMenu1ul {background: #fafafa; border: 1px solid #e2e2e2; padding: 5px 15px !important; border-radius: 3px;} .catMenu4ul, .catMenu5ul, .catMenu6ul {margin: 0 !important; list-style: none; padding: 0 !important;} .catMenuLink0li { color: var(--fontColor) !important; font-size: 15px; line-height: 1.5em; padding: 7px 0; margin: 0; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; border-top: 1px solid var(--color3); display: block; } .catMenuLink0liSel { font-size: 15px; font-weight: normal; line-height: 1.5em; padding: 7px 0; margin: 0; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; border-top: 1px solid var(--color3); display: block; } .catMenuLink0liSel, .catMenuLink0li:hover {color: var(--color1) !important;} .catMenuLink1li { color: var(--fontColor) !important; display: block; font-size: 15px; line-height: 1.5em; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; padding: 0; margin: 5px 0 5px 20px; } .catMenuLink1liSel { display: block; font-size: 15px; line-height: 1.5em; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; padding: 0; font-weight: normal; margin: 5px 0 5px 20px; } .catMenuLink1li::before, .catMenuLink1liSel::before { font-family: "Font Awesome 5 Pro"; content: "\f0da"; margin-right: 10px; left: 34px; position: absolute; color: var(--borderColor); } .catMenuLink1liSel, .catMenuLink1li:hover {color: var(--color1) !important;} .catMenuLink2li { color: var(--fontColor) !important; display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; padding: 0; margin: 5px 0; margin-left: 25px; } .catMenuLink2liSel { display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; padding: 0; margin: 5px 0; margin-left: 25px; } .catMenuLink2liSel, .catMenuLink2li:hover {color: var(--color1) !important;} .catMenuLink3li { color: var(--fontColor) !important; display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 35px; } .catMenuLink3liSel { display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 35px; } .catMenuLink3liSel, .catMenuLink3li:hover {color: var(--color1) !important;} .catMenuLink4li { color: var(--fontColor) !important; display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 45px; } .catMenuLink4liSel { display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 45px; } .catMenuLink4liSel, .catMenuLink4li:hover {color: var(--color1) !important;} .catMenuLink5li { color: var(--fontColor) !important; display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 55px; } .catMenuLink5liSel { display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 55px; } .catMenuLink5liSel, .catMenuLink5li:hover {color: var(--color1) !important;} .catMenuLink6li { color: var(--fontColor) !important; display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 65px; } .catMenuLink6liSel { display: block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; letter-spacing: .3px; font-size: 14px; line-height: 1.5em; text-decoration: none !important; padding: 0; font-weight: normal; margin: 5px 0; margin-left: 65px; } .catMenuLink6liSel, .catMenuLink6li:hover {color: var(--color1) !important;} .catMenu1ul li:first-child a {border: none;} .catMenu0liSel .catMenu1ul {padding-bottom: 10px !important; background: #fff;} li.catMenu0li.subsNietTonen ul, li.catMenu0liSel.subsNietTonen ul {display: none !important;} li.catMenu0li .alphabetisch li, li.catMenu0liSel.alphabetisch li {display: inline-block; margin-right: .25em; font-size: 20px;} li.catMenu0li .alphabetisch li a, li.catMenu0liSel.alphabetisch li a {display: inline; font-size: inherit;} li.catMenu0li .alphabetisch li::after, li.catMenu0liSel.alphabetisch li::after {content: ",";} .alphabetisch .catMenu1li:last-child::after, .alphabetisch .catMenu1liSel:last-child::after {display: none;} .alphabetisch .catMenuLink1li::before, .alphabetisch .catMenuLink1liSel::before {display: none;} .tooltip {cursor: pointer;} .tooltip::before {color: #d21e1e;} .WB-knop-Div {display: block;} .WB-knop {background: url("images/menuActive.png") repeat scroll -2px -2px transparent; height: 23px;} .WB-knop:hover {background-color: #333333; height: 23px;} .WB-knop-a {color: #fff !important; display: block; line-height: 1.2em; padding: 5px 10px; text-decoration: none !important; text-shadow: 0 1px 1px var(--fontColor);} .WB-knop-a:hover {color: #fff !important; text-decoration: none !important; text-shadow: 1px 1px 2px var(--fontColor);} .kopFactuuradres, .kopAfleveradres {background-image: url('images/tabeltitel2.jpg'); height: 25px; padding-left: 5px; font-weight: bold;} .kopieer {float: right; padding-right: 5px;} .fac2, .afl2 {padding: 2px; border-top: 1px solid #BFBFBF;} .nawFac, .nawAfl {height: 21px; width: 230px; padding-left: 5px;} .nawFac2, .nawAfl2 {width: 30px; vertical-align: top; padding-top: 6px;} .nawFac3, .nawAfl3 {padding-left: 5px;} .nawA2 {height: 5px;} .blokholder.accountWijzigen .titel {color: #d21e1e; margin: 20px 0;} .typeKlant input[type="radio"] + label:hover, .geslacht input[type="radio"] + label:hover {border-color: var(--color2);} .typeKlant input[type="radio"]:checked + label, .geslacht input[type="radio"]:checked + label {border-color: var(--color2);} .typeKlant input[type="radio"]:checked + label::before, .geslacht input[type="radio"]:checked + label::before {color: var(--color2);} .bedrijfsGegevens.zakelijkTonen {max-height: 300px;} .btwcontrole.goed {background: var(--color2);} .vatGegevens .btwGegevens { padding: 10px; line-height: 1.25em; background: #fff; border-radius: 3px; margin: 5px 0 0 10px; font-size: 12px; display: block; border: 1px solid var(--borderColor); color: var(--fontColor); } .adresHolder .kop {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .adresHolder .adressen .item.default {border: 2px solid var(--color2) !important;} .adresHolder .adressen .item.default:before {background: var(--color2);} .adresHolder .adressen .item.default .defaultTekst {background: var(--color2);} .adresHolder .adressen .item.open {z-index: 100;} .zoekenOrders {z-index: 13;} .zoekenOrders .veld {z-index: 10;} .zoekenOrders .veld input {width: 150px;} .zoekenOrders .knop {z-index: 10;} .mijnAccountOrderHolder .item a.link {display: block;} .mijnAccountOrderHolder .item .inhoud .omschrijving {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .mijnAccountOrderHolder .knoppen a { background-color: rgba(54, 82, 95, .1); color: #d21e1e; border-radius: 3px; display: inline-block; font-size: 12px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease 0s; line-height: normal; margin: 5px 5px 0 0; } .mijnAccountOrderHolder .knoppen a.activeren {background-color: #d21e1e; color: #fff;} .mijnAccountOrderHolder .knoppen a.verwijderen:hover {background-color: rgba(239, 104, 104, .1); color: #ef6868;} .mijnAccountOrderHolder .item .artikelen {margin: auto 0 auto auto;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder {margin: 5px;} .mijnAccountOrderHolder .item .artikelen .afbeeldingHouder.plusje .meeraantal {background: #d21e1e;} .mijnAccountOrderHolder.detail .omschrijving .titel {color: #d21e1e;} .mijnAccountOrderHolder.detail .omschrijving .knoppen a {margin: 0 0 0 5px;} .prAanb4 {color: var(--color1);} .taf1 {width: 150px;} #taf10 {width: 250px;} .tafHolder .kop {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .UPScatHeader {height: 52px; vertical-align: middle;} .UPScontainer {width: 100%; margin: 0 auto;} .UPScatPlaatje {padding: 0 0 0 12px; width: 90px;} .UPSacc_trigger { padding: 0; background-color: #fff; height: 52px; line-height: 34px; width: 100%; font-weight: bold; float: left; box-shadow: 0 1px 4px rgba(0,0,0,.1); margin: 10px 0; } .UPSacc_trigger a {text-decoration: none; display: block; padding: 0 0 0 1px;} .UPSactive {background-position: left bottom;} .UPSacc_container {overflow: hidden; clear: both;} .UPScontainer .active {box-shadow: 0 1px 4px rgba(0,0,0,.3);} .SERIEcontainer {margin-bottom: 30px;} .artikel.detail .SERIEcontainer .artikel {width: 25%; clear: none;} .artikel.detail .SERIEcontainer .artikel .omschrijving, .artikel.detail .SERIEcontainer .artikel .prijzen, .artikel.detail .SERIEcontainer .artikel .bestellen, .artikel.detail .SERIEcontainer .artikel .meerinfo { display: none; } .artikel.detail .SERIEcontainer .artikel .schaduw {display: none;} .artikel.detail .SERIEcontainer .artikel .inner {border: 0; box-shadow: none !important; padding: 5px;} .artikel.detail .SERIEcontainer .artikel .inner .labels {display: none;} .artikel.detail .SERIEcontainer .artikel .inner:hover {opacity: .7;} .artikel.detail .SERIEcontainer .bestelHolder {border-top: 0;} .tagSerieEigenInhoudDetail {margin-top: 20px; background: #fafafa; border: 1px solid var(--color3); padding: 8px 15px;} .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col1, .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col3, .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col4, .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .afbeeldingHouder, .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .favorieten, .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .afbeeldingHouder { display: none; } .tagSerieEigenInhoudDetail .shopCompact .artikel:hover {box-shadow: none;} .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col2 {padding: 0; display: block;} .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col2 .omschrijving {display: none;} .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col2 .aanvullendOmschrijving { padding: 5px 10px; border-radius: 3px; line-height: 1.25em; font-family: "Open Sans", Serif; transition: all .3s ease; } .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col2 .aanvullendOmschrijving::before { content: "\f466"; font-family: "Font Awesome 5 Pro"; margin-right: 8px; font-weight: normal; } .tagSerieEigenInhoudDetail .shopCompact .artikel .inner {display: inline-block; width: auto; padding: 0;} .tagSerieEigenInhoudDetail .shopCompact .artikel {padding: 0; border: 0; background: none;} .tagSerieEigenInhoudDetail .shopHolder .titelAantal {font-weight: bold; margin: 0 0 5px 10px; border-bottom: 1px solid var(--color3); padding-bottom: 5px;} .tagSerieEigenInhoudDetail .shopCompact .artikel .inner .col2 .aanvullendOmschrijving:hover {font-weight: bold;} .tagSerieEigenInhoudDetail .shopCompact .artikelSerieActief .inner .col2 .aanvullendOmschrijving {font-weight: bold;} .PaneelUser {float: right; font-size: 10px; font-style: italic; line-height: 1em; padding: 5px 0;} .inloggen3 {float: left;} .PaneelKnop1, .PaneelKnop2 {float: left; font-size: 10px; line-height: 12px; text-indent: 5px;} .PaneelKnopLink1, .PaneelKnopLink2 {text-decoration: none !important;} .PaneelTextField {width: 200px;} .PaneelKnop3, .PaneelKnop4, .PaneelKnop5, .PaneelKnop6 {position: relative;} .PaneelKnopLink3, .PaneelKnopLink4, .PaneelKnopLink5, .PaneelKnopLink6 {text-decoration: none !important; font-weight: bold !important; display: block;} .PaneelKnopImg3, .PaneelKnopImg4, .PaneelKnopImg5, .PaneelKnopImg6 {padding: 0 7px 0 0; position: relative; top: 2px;} .VOVIP {border: 1px solid #ddd; color: #555; display: block; margin: 5px 0;} .VOVTA {border: 1px solid #ddd; height: 40px; color: #555; display: block; margin-top: 10px;} .vrijveldVeldA {width: 202px;} .vrijveldVeldB {width: 202px;} .opmerkingVeld {width: 240px; font-size: 11px; border: 1px solid #BFBFBF;} .levAfbeelding1, .betAfbeelding1 {float: left; margin-right: 10px;} #pdf2 { width: 350px; height: 180px; position: absolute; top: 100px; left: 100px; overflow: hidden; visibility: hidden; z-index: 9991; margin: 15px; padding: 15px; border: 1px solid var(--borderColor); background-color: #fff; box-shadow: 0px 0px 15px var(--fontColor); } .pdf3 {margin: 0px; padding: 0px; border: 0;} .cadeauHolder {border: 1px solid var(--borderColor); padding: 15px;} .cadeauHolder .cadeauAfbeeldingHolder img {border: 1px solid var(--borderColor);} .cadeauHolder h2 {border-bottom: 1px solid var(--borderColor); margin: 10px 0 20px; padding: 0 0 10px;} .cadeauHolder .cadeauTextField, .cadeauHolder .cadeauTextArea {width: 240px;} .cadeauHolder .cadeauTextArea {height: 90px;} .cadeauHolder .cadeauBedrag span {font-size: 25px;} .cadeauHolder .cadeauBedrag .cadeauTextField {display: inline-block; font-size: 23px; padding: 5px; width: 216px;} #mollieKnop {background-color: #cfc; padding: 5px; font-weight: bold;} .shopLijst2ContentPrijs .vanaf, .shopLijst1Prijs1_1 .vanaf, .shopLijst1Prijs1_2 .vanaf {font-size: 10px; font-weight: normal;} .stappenbalk .bezig .naam {color: var(--color1);} .stappenbalk .bezig::before {background-color: var(--color1);} .stappenbalk .klaar::after {border-color: var(--color2);} .stappenbalk .klaar a::before {font-weight: bold; background-color: var(--color2);} .stappenKnop {margin-top: 10px;} .stappenKnop a.volgendeStap {width: 100%; display: block; text-align: center; padding: 10px; box-sizing: border-box; font-size: 15px; font-weight: bold;} .volgendeStap.disabled {opacity: .5; pointer-events: none;} .pdfKnop {margin: 0 20px 20px 0;} .stap .blokholder > .titel {font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 24px; margin: 10px 0 20px; padding: 0;} .stap .kassaArtikelen {margin-bottom: 20px; border-bottom: 2px solid #ddd;} .kassaArtikelen th {font-size: 90%; border-bottom: 2px solid #ddd;} .kassaArtikelen .regelTotaal {text-align: right;} .kassaArtikel td {border-bottom: 1px solid var(--color3); padding: 10px 0;} .kassaArtikel:last-child td {border-bottom: 0;} .kassaArtikel .regelTotaal {text-align: right; max-width: 100px; white-space: nowrap;} .kassaArtikel .regelTotaal .prijs {font-weight: bold; font-size: 14px; color: var(--fontColor); line-height: 1.4em;} .kassaArtikel .aantallen {text-align: center; padding-left: 10px; padding-right: 10px;} .kassaArtikel .aantallen input {width: 54px; text-align: center;} .kassaArtikel .aantallen .eenheid {display: block; margin: 0 0 5px;} .kassaArtikel .aantallen .verwijderen:hover a {color: #666;} .kassaArtikel .artikelPrijsEenheid {display: block;} .kassaArtikel .tekst {vertical-align: middle; hyphens: auto;} .kassaArtikel .tekst a.kassaArtikelTitel {text-decoration: none; color: var(--fontColor); display: block; line-height: 1.25em;} .kassaArtikel .verwijderKnop {padding-left: 10px; padding-right: 10px;} .kassaArtikel.gratis {color: var(--color2);} .kassaArtikel.gratis input {border: 0;} .kassaArtikel.gratis a.kassaArtikelTitel {color: var(--color2);} .kassaArtikel .kassaArtikelAfbeeldingHolder {vertical-align: middle; width: 100px; text-align: center; padding-right: 20px;} .kassaArtikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder img {width: auto !important; height: auto !important; max-width: 100%;} .kassaArtikel .tekst .voorraad .opVoorraad {margin-left: .25em;} .kassaArtikel .tekst .nietMeerLeverbaar { color: #d55929; border-radius: 3px; line-height: normal; padding: 5px 10px; display: inline-block; background-color: rgba(213, 89, 41, .1); } .kassaArtikel .tekst .opmerkingHolder {margin: 5px 0;} .kassaArtikel .tekst .variatie { line-height: 1.5em; font-size: 12px; margin: 10px 0px; background: var(--color3); display: inline-block; padding: 15px; border-radius: 3px; min-width: 150px; } .kassaArtikel .tekst .variatie .titel {font-weight: bold; color: var(--fontColor); display: block;} .kassaArtikel .tekst .variatie .eenheid {display: block; margin: 0 0 5px;} .kassaArtikel .tekst .variatie .eenheid:last-child {margin: 0;} .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde input {width: 40px !important; text-align: center;} .kassaArtikelen .kassaArtikel .regelVolgorde .eenheid {display: block; margin: 0 0 5px;} .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde {display: flex; background: #ddd; width: 90px; margin: 0 auto;} .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde > * { width: 33.333% !important; padding: 5px !important; box-sizing: border-box !important; margin: 0 !important; line-height: 1; display: flex; border-radius: 0 !important; transition: .3s all ease; color: var(--fontColor); border-color: #ddd !important; } .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde .down:hover, .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde .up:hover { cursor: pointer; background: #d0d0d0; } .kassaArtikelen .kassaArtikel .regelVolgorde .aantalVolgorde > * > i {margin: auto;} .kassaArtikel .kortingsbon .titel {margin-top: 7px; display: inline-block;} .winkelmandDelen {background: var(--color3); width: 48%; float: left; z-index: 1; padding: 30px; box-sizing: border-box; border-radius: 5px;} .winkelmandDelen .formulier .button {padding: 10px 12px; cursor: pointer;} .stap .totalen {background: var(--color3); width: 48%; float: right; z-index: 1; padding: 30px; box-sizing: border-box; border-radius: 5px;} .stap .totalen .bedrag span.gratis {display: none;} .stap .totalen .totaalRegel td, .stap .totalen .restantRegel td {border-top: 1px solid var(--borderColor); color: var(--fontColor); font-weight: bold; padding: 5px 0;} .stap .totalen .stappenKnop {padding: 0px; background: transparent; border: 0;} .stap .couponcode {display: inline-table; width: 100%; margin: 10px 0; background: #f5f5f5; box-sizing: border-box;} .stap .couponcode #CouponCodeV {display: table-cell; vertical-align: middle; margin: 0; border-radius: 3px 0 0 3px; text-transform: uppercase;} .stap .couponcode #CouponCodeV::placeholder {text-transform: none;} .stap .couponcode a.wButControleer {display: table-cell; vertical-align: middle; border-radius: 0 3px 3px 0; padding: 5px 12px; line-height: 1em; text-align: center;} .stap.een .knoppenHouder {display: flex;} a.button.winkemmandjeKnopMandjeLegen {margin: 0 20px 20px 20px;} .stap.twee .stap2_bestaandeKlant {background-color: #f5f5f5; border-radius: 3px; margin-bottom: 10px; margin-top: 10px; float: none !important; width: 100% !important;} .stap.twee .stap2_bestaandeKlant .content {padding: 15px;} .stap.twee .stap2_bestaandeKlant .titel {padding: 15px;} .stap.twee .stap2_bestaandeKlant .inloggen {float: left; width: 47%; position: relative; margin-right: 6%;} .stap.twee .stap2_bestaandeKlant .uitleg {float: left; width: 47%; position: relative;} .stap.twee .stap2_bestaandeKlant .uitleg {padding-top: 10px; margin-right: 0;} .stap.twee .stap2_naw .keuze {display: none;} .stap.twee .adres .geselecteerd {border: 2px solid var(--color2) !important;} .stap.twee .tekstNieuwAdres {padding: 5px; position: relative; z-index: 1;} .stap.twee .nieuwAdres.geselecteerd:before, .stap.twee .bestaandAdres.geselecteerd:before {background: var(--color2);} .nieuwAdres.postcodechecker .postPlaats .postcode, .nieuwAdres.postcodechecker .postPlaats .huisnummer {width: 50%;} .nieuwAdres.postcodechecker .straat .straatnaam {width: 100%; margin: 0 0 8px 0;} .stap.twee > .blokholder.algemeneGegevens {float: left;} .stap.twee > .blokholder, #stap2_factuuruitklap, #stap2_bewaaraccount {float: right; width: 48%; clear: right;} .stap.drie .blokholder {width: 48%; float: right;} .stap.drie .blokholder:first-of-type {float: left;} .stap.drie .regel .select {display: none !important;} .stap.drie .regel {padding: 10px 15px;} .stap.drie .regel.actief {border: 2px solid var(--color2);} .stap.drie .regel:before { opacity: 0; content: "\f00c"; position: absolute; right: 0; top: 0; padding: 4px; font-size: 12px; background: var(--color2); color: #fff; font-family: "Font Awesome 5 Pro"; line-height: 1em; border-bottom-left-radius: 3px; } .stap.drie .regel.actief:before {opacity: 1;} .stap.drie .regel .label {float: right; padding: 10px;} .stap.drie .regel > .omschrijving {font-weight: bold;} .stap.drie .currencyNietActief {background-color: #ff00001f;} .stap.drie .sendcloudResultaat.actief {border: 1px solid #e6e7e8;} .stap.vier .gegevens {background: var(--color3); padding: 20px; border-radius: 3px;} .stap.vier .vwHolder {margin-top: 10px; line-height: 1.5em;} .totalen .totaalGewicht {display: none;} .shopVerlanglijstEmailAdd .titel span, .shopVerlanglijstTekst .titel span {font-size: 16px; color: #999; font-weight: bold; padding-right: 3px;} .verlangStatus {float: right; width: 115px;} .widgetInloggen {display: block; padding: 0px; width: 95%;} .widgetInloggen .inloggen {float: left;} .widgetInloggen .vergeten {float: left; font-size: 11px; line-height: 22px; text-indent: 5px;} .widgetInloggen .vergeten a:link, .widgetInloggen .vergeten a:visited {color: #fff;} .productCarrousselHolder .jcarousel-clip {max-width: 905px;} .productCarrousel li {border: 1px solid #ddd; line-height: 1.25em; margin: 0 25px 0 0 !important; transition: all 0.3s ease 0s; width: 200px;} .productCarrousel li:hover {box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);} .productCarrousel li .inner a {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; text-indent: -9999px;} .productCarrousel li .afbeeldingHouder {width: 100%;} .productCarrousel li .shopLijst2LabelAanbieding2A, .productCarrousel li .shopLijst2LabelNieuw2A { left: 5px; position: absolute; top: 5px; z-index: 10; pointer-events: none; } .productCarrousel li .inhoud {padding: 10px;} .productCarrousel li .inhoud h2.titel {font-size: 14px; height: 40px; margin: 0 0 5px; overflow: hidden;} .productCarrousel li .inhoud .carrouselPrijsVan {font-size: 15px; text-decoration: line-through; color: #cfcfcf;} .productCarrousel li .inhoud .carrouselPrijsVoor {font-size: 15px; font-weight: normal;} .productCarrousel li .inhoud .artikelGroepPrijs {display: none;} .affiliateInstelling {padding: 15px 20px; border: 1px solid var(--borderColor); color: var(--fontColor); background-color: #fff; border-radius: 5px; margin-bottom: 20px;} .affiliateHolder {background-color: #fff; border: 1px solid var(--borderColor); border-radius: 5px; margin-bottom: 10px; overflow: hidden;} .affiliateHolder .titel {color: var(--fontColor); font-weight: bold; border-bottom: 1px solid var(--borderColor); padding: 5px 10px; background-color: var(--color3);} .affiliateHolder .content {padding: 5px;} .affiliateKopRow {width: 100%; border-spacing: 0; border-collapse: collapse; padding: 0;} .affiliateKopDatum, .affliateKopOrder, .affiliateKopCommissie {overflow: hidden; white-space: nowrap; padding: 0;} .affiliateKopDatum {width: 86px;} .affiliateKopCommissie {width: 120px; padding-right: 5px; text-align: right;} .affiliateRow {width: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px;} .affiliateRow tr:hover td {background-color: #fcfcfc;} .affiliateDatum, .affiliateOrder, .affiliateCommissie {font-size: 12px; overflow: hidden; white-space: nowrap; padding: 3px 5px;} .affiliateDatum {width: 82px; color: #bbb;} .affiliateOrder {font-weight: bold; color: var(--fontColor);} .affiliateCommissie {width: 120px; padding-right: 10px; text-align: right;} .affiliateTotaal {text-align: right; padding-right: 15px !important;} button.inloggenKnop, button.mijnAccountKnop, button.wachtwoordKwijtKnop { margin: 0; padding: 0; border: none; outline: none; background-color: #ffffff00 !important; color: #d21e1e; font: inherit; cursor: pointer; text-decoration: underline; } button.inloggenKnop:hover, button.mijnAccountKnop:hover {text-decoration: none; background-color: #fff0; color: #fff !important; text-shadow: none !important;} .accountHouder { display: block; width: 100%; background-color: #d21e1e; height: 30px; position: relative; color: #FFF; max-width: 1500px; box-shadow: 0 0px 12px 2px rgba(0,0,0,.2); } .accountHouder2 {margin: 0 auto; position: relative; padding: 0 20px; box-sizing: border-box;} .account { margin: 0; display: block; font-family: "Open Sans", Helvetica, Arial, sans-serif; right: 58px; position: absolute; line-height: 30px; background-color: rgba(0, 0, 0, 0.1); } .account .inloggen, .account .favorieten, .account .mijnAccount {float: left; margin: 0 0px; padding: 0 15px; position: relative;} .account .houder {max-height: 0; overflow: hidden; box-shadow: 0 4px 4px rgba(0,0,0,.2); top: 20px; width: 350px; transition: all 0.3s ease 0s; color: #666;} .account h2 {font-size: 17px; border-bottom: 1px solid var(--borderColor); margin-bottom: 10px; padding-bottom: 5px;} .account .h3, .account .accountKop {font-size: 17px; margin-bottom: 10px; padding-bottom: 5px; color: var(--fontColor);} .account .welkom {font-weight: normal; color: #FFF; float: left; padding: 0 15px;} .account .openGeklapt .houder {max-height: 500px; top: 30px;} .account .inloggenKnop, .account .favorietenKnop, .account .verlanglijstKnop, .account .mijnAccountKnop {transition: .3s all ease;} .account .openGeklapt .inloggenKnop, .account .openGeklapt .favorietenKnop, .account .openGeklapt .verlanglijstKnop, .account .openGeklapt .mijnAccountKnop {opacity: .6;} .account .inloggenKnop:hover, .account .favorietenKnop:hover, .account .verlanglijstKnop:hover, .account .mijnAccountKnop:hover {opacity: .6;} .account .content, .account .houder1, .account .houder2 {padding: 15px 25px;} .account .houder2 {background-color: #f5f5f5; border-top: 1px solid #ddd;} .account .inloggen .email input, .account .inloggen .wachtwoord input, .account .inloggen .wachtwoord2 input {padding: 10px; font-size: 13px;} .account .inloggen .email input {margin-bottom: 5px;} .account .inloggen .inlogKnop {padding-top: 3px;} .account .inloggen .wachtwoordKwijt {float: right; margin-top: 8px;} .account .verlanglijst .code input {padding: 5px 10px; font-size: 13px;} .winkelwagenHouder {position: absolute; right: 0px; top: 13px; transition: all .3s ease; color: #606060; padding: 5px;} .winkelwagenHouder .winkelknop {height: 30px; width: 35px; display: block;} .winkelwagenHouder .winkelknop:hover {color: var(--color1);} .winkelwagenHouder .winkelknop .bedrag {font-weight: bold; color: #666; font-size: 15px; white-space: nowrap; line-height: 30px;} .winkelwagenHouder .winkelknop .icoon { position: absolute; right: 10px; width: 30px; height: 30px; background-image: url(images/winkelwagen.png); background-repeat: no-repeat; } .winkelwagenHouder .winkelknop .aantal {background: var(--color2); border-radius: 50px; right: -10px; top: -5px;} .winkelwagenHouder .winkelwagen {top: 36px; background-color: var(--color3); right: 5px;} .winkelwagenHouder.openGeklapt .winkelwagen {height: auto; top: 46px;} .winkelwagenHouder .winkelwagen .inhoud.artikelen .winkelTitel {font-size: 17px; font-weight: bold; margin: 0 0 15px; color: var(--color1);} .winkelwagenHouder .winkelwagen .inhoud .prijs { float: right; font-weight: bold; font-size: 16px; padding: 10px; color: var(--fontColor); text-align: right; line-height: 1em; } .winkelwagenHouder .kassaArtikel .kassaArtikelAfbeeldingHolder {width: 50px; padding-right: 10px;} .winkelwagenHouder .kassaArtikel .regelStuk {display: none;} .winkelmandjeKnoppen {display: inline-block;} .winkelmandjeKnoppen a {margin-right: 10px;} .zoekVeld0 {display: table; width: 100%; border: 1px solid #ddd; box-sizing: border-box; border-radius: 3px;} .zoekVeld0 .zoekVeld0A {display: table-cell; z-index: 10; position: relative; overflow: hidden; border-radius: 3px 0 0 3px;} .zoekVeld0 .zoekVeld0A input { border: 0; box-shadow: none; padding: 10px; font-size: 14px; font-style: italic; border-radius: 0px; margin: 0; width: 100%; transition: all .3s ease; line-height: 1.1em; } .zoekVeld0 .zoekVeld0B { display: table-cell; color: #999; position: relative; padding: 5px 6px; transition: all .3s ease; cursor: pointer; z-index: 10; background-color: #fff; border-radius: 0 3px 3px 0; } .zoekVeld0 .zoekVeld0B a {text-decoration: none; color: #999;} .zoekVeld0 .zoekVeld0B a:before {content: "\f002"; font-family: "Font Awesome 5 Pro"; font-size: 16px;} .zoekVeld0 .zoekVeld0B a:hover {color: var(--color1);} .zoekVeld0 .zoekVeld0B img {display: none;} .zoeken {position: absolute; top: 12px; z-index: 15; right: 60px; width: 200px; display: table; background: #fff;} .zoeken .veld {display: table-cell;} .zoeken .veld #zoekWoordID { border: none; font-size: 14px; font-style: normal; border-radius: 3px 3px 0 0; margin: 0; width: 100%; transition: all .3s ease; line-height: 1; color: var(--color4); } .zoeken .knop {color: var(--color4); display: table-cell; padding: 0 15px; line-height: 40px; transition: all .3s ease; cursor: pointer;} .zoeken .knop:hover {color: #9892b3;} .zoeken.open {opacity: 1; pointer-events: all;} .zoekenTrigger { background: url(images/ZoekenIcoon.png); width: 30px; height: 30px; position: absolute; right: 50px; top: 20px; cursor: pointer; background-repeat: no-repeat; } #speedsearchResult {clear: both; left: -450px; top: 100%;} #speedsearchResult .houder {box-shadow: 0 50px 50px rgba(0, 0, 0, 0.4); border-radius: 0 0 3px 3px; max-height: calc(100vh - 90px);} #speedsearchResult .houder > ul:nth-child(2) {margin-top: 0;} .speedSearch {padding: 0 20px;} .speedSearch > ul {list-style: none; z-index: 100; padding: 0px; margin: 0;} .speedSearch.artikelen {border-top: 0;} .speedSearch > ul > li {padding: 0; margin: 0; color: #666; position: relative;} .speedSearch > ul > li a { background-color: #FFF; border-bottom: 1px solid var(--color3); color: var(--fontColor); display: block; overflow: hidden; padding: 10px 0; text-decoration: none; text-overflow: ellipsis; transition: all 0.2s ease 0s; white-space: nowrap; } .speedSearch ul li:last-child {border-bottom: 0;} .speedSearch ul li a strong {color: #d21e1e;} .speedSearch ul li .thumbnail {float: right; height: 50px; width: 50px; margin-left: 10px; text-align: center; overflow: hidden; border-radius: 3px;} .speedSearch ul li .thumbnail img {width: auto; height: 50px;} .speedSearch ul li .omschrijving {font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis;} .speedSearch ul li .artikelNr {font-size: 12px; line-height: 1.5em;} .speedSearch ul li .artikelNr .titel {margin-right: 5px;} .speedSearch .resultaat { background-color: #FFF; border-bottom: 1px solid var(--color3); font-size: 18px; font-weight: bold; margin: 0; padding: 20px 0px 10px; position: relative; } .speedSearch .resultaat .titel {font-family: "Open Sans"; color: var(--fontColor);} .speedSearch .resultaat .aantal {color: #d21e1e;} .speedSearch .resultaat a.knopAlles { color: #fff; border-radius: 3px; bottom: 12px; text-decoration: none; font-size: 12px; font-weight: normal; padding: 3px 10px; position: absolute; right: 10px; display: none; } .speedSearch .categorie ul {margin: 0; padding: 0; display: inline-block; list-style: none;} .speedSearch .categorie .titel {color: #aaa; margin-right: 5px; float: left; font-style: italic;} .speedsearchLoader {right: 53px; top: 15px; display: none;} .speedsearchLoader i {color: #757575;} .knopAllesOnder a { border-radius: 0 0 3px 3px; display: block; font-weight: bold; margin: 0; padding: 10px; text-align: center; text-decoration: none; color: #FFF; background: var(--color2); } .knopAllesOnder a:hover {background-color: #69981e;} .speedSearch > ul > li a:hover {background: #fafafa;} .speedsearchSluiten {display: none;} .filters {margin: 20px 20px 0 0; border-radius: 5px; border: 1px solid #e2e2e2; background: #fafafa; display: block; position: relative; z-index: 0;} .filters .filterknop {display: none;} .filters .kenmerkgroep {border-top: 1px solid #e2e2e2;} .filters .kenmerkgroep a.titel {font-size: 17px; margin: 0 0 5px;} .filters .kenmerkgroep a.titel:hover {color: #d21e1e;} .filters .kenmerkgroep li.kenmerk span.omschrijving {transition: .3s all ease;} .filters .kenmerkgroep li.kenmerk:hover span.omschrijving {color: #6f6f6f;} .filters .kenmerkgroep a.titel img {position: relative; top: 3px; margin-right: 3px; opacity: .5;} .filtersLinks .kenmerkgroep .kenmerken {padding: 0px; overflow: hidden; position: relative; margin-top: 0px; z-index: 10; max-height: 140px; height: auto; opacity: 1;} .filtersLinks .kenmerkgroep.open .kenmerken {height: 0; opacity: 0;} .filters ul.kenmerken {padding: 0; margin: 0; list-style: none; transition: .3s all ease;} .filters ul.kenmerken.open {max-height: none; overflow: hidden;} .filters .tonen { font-size: 13px; z-index: 100; position: relative; margin: 10px 0 0; color: var(--fontColor); font-weight: 500; cursor: pointer; transition: .3s all ease; text-decoration: underline; } .filters .tonen:hover {color: #d21e1e;} .filters .filterCheck label {padding: 0; display: block; cursor: pointer;} .filters .filterCheck label .aantal { line-height: 1; margin-top: 4px; min-width: 10px; padding: 3px 6px; text-align: center; vertical-align: baseline; white-space: nowrap; float: right; color: #8F8F8F; } .filters .filterCheck label .aantal::before {content: '(';} .filters .filterCheck label .aantal::after {content: ')';} .filters .filterCheck label.nietBeschikbaar {cursor: default;} .filters .toelichting {float: left; margin-left: 5px;} .filters .toelichting h2 {font-size: 15px;} .kenmerkgroepHouder .kenmerkgroep.standaardUitklappen .kenmerken {max-height: unset;} .kenmerkgroepHouder .kenmerkgroep.standaardUitklappen .tonen {display: none;} #actieveKenmerken {clear: both;} .actieveKenmerkenLijst {list-style: none;} .actieveKenmerkenLijst:after {content: ""; clear: both; float: none; position: relative; display: block;} .actiefKenmerk {background-color: #fff; border-radius: 3px; float: left; line-height: 1em; margin: 0 5px 5px 0; padding: 6px; font-size: 13px; font-weight: normal;} .actiefKenmerk img {position: relative; top: 3px; margin-right: 3px;} .actieveKenmerkenLijst { display: block; margin: 0; width: 100%; border-radius: 3px; text-align: right; box-sizing: border-box; font-weight: bold; color: var(--fontColor); border-top: 1px solid #e2e2e2; padding: 10px; background: #fafafa; } .actiefKenmerk a {text-decoration: none;} .actiefKenmerk a::before {font-family: "Font Awesome 5 Pro"; content: "\f00d"; color: #a51c18; margin-left: 5px;} .actiefKenmerk img {display: none;} .kenmerkAfbeelding {position: relative; margin-right: 3px; opacity: .5;} .artikelnrKenmerk {padding: 5px 0px; width: 100%; box-sizing: border-box; transition: all .3s ease; border-bottom: 1px solid var(--color3); display: flex;} .kenmerkArt .groep, .artikelGewicht .titel {min-width: 150px;} .artikelnrKenmerk .titel {min-width: 150px; color: #aaa; padding-right: 10px;} .kenmerkenaanwezigDetailTitel {margin-bottom: 15px;} .prijsFilterHolder .prijsfilterKnop {background: #d21e1e;} .prijsFilterHolder .noUi-target .noUi-base .noUi-connect {background: #d21e1e;} .dropdown .keuze {color: var(--color1); display: block; padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: bold;} .dropdown .keuze:before {content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: normal; float: right; transition: all .3s ease;} .dropdown:hover .keuze {box-shadow: 0 1px 5px rgba(0,0,0,.2); border-radius: 3px 3px 0 0;} .dropdown .keuze:hover:before {color: var(--color1);} .dropdown ul li a {padding: 4px 12px; clear: both;} .dropdown ul li.active a {background-color: var(--color1); color: #fff;} .supermenuTrigger i {margin: 0 5px 0 0;} .supermenuInhoud.open {box-shadow: 0 25px 70px 14px rgba(0, 0, 0, 0.25);} .leverdagSelectie .dropdown ul li a:hover {border: 2px solid var(--color1);} .leverdagSelectie .dropdown ul li.active a {border: 2px solid var(--color1); color: var(--color1);} .kentekenMeerdere tr:hover td {background-color: var(--color1);} #extraSchermWinkelmand .schermWinkelMandje .melding {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); max-width: 520px; min-width: 250px; overflow-y: scroll;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td {vertical-align: middle;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {width: 135px;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {vertical-align: middle; width: 100%; text-align: center; box-sizing: border-box;} #extraSchermWinkelmand .schermWinkelMandje .melding .icoon { background-color: #64a43a; border-radius: 50px; color: #fff; display: block; font-size: 13px; left: -10px; padding: 5px; position: absolute; top: -10px; border: 1px solid #fff; } #extraSchermWinkelmand .schermWinkelMandje .melding .afbeeldingHouder {line-height: 0; margin-right: 20px; position: relative;} #extraSchermWinkelmand .schermWinkelMandje .melding h2 {margin: 0; font-size: 16px;} #extraSchermWinkelmand .schermWinkelMandje .tweedeRijUit {display: none;} #extraSchermWinkelmand .schermWinkelMandje .knoppen {text-align: right; padding: 15px;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a { background: #bcbcbc; border-radius: 3px; color: #fff; display: inline-block; line-height: 1.25em; margin: 5px; padding: 7px 10px; text-decoration: none; transition: all 0.3s ease 0s; } #extraSchermWinkelmand .schermWinkelMandje .knoppen a:hover {background: var(--fontColor); color: #fff; transition: all .3s ease;} #extraSchermWinkelmand .schermWinkelMandje .knoppen a.bevestigen {background: var(--color1);} .schermWinkelMandje.meebestellenActief .melding .shopTegel .artikel {display: block; float: left; position: relative; width: 33.3333%;} .meldingBoven {background-color: var(--color3); border-bottom: 1px solid #dfdfdf; padding: 20px;} .meeBestellenTekst {padding: 20px;} #extraSchermWinkelmand .schermWinkelMandje .artikel {box-shadow: none !important;} .formuleHolder {margin-top: 20px;} .formuleHolder .titel {font-weight: bold; background: #ddd; padding: 10px 15px;} .formuleHolder .content {background: var(--color3); padding: 10px 15px;} .formuleHolder.reset .titel {display: none;} .winkelmenu .art-menu li {position: static;} .winkelmenu .art-menu li .t.hoverMenuActief::after {content: "\f078"; font-family: "Font Awesome 5 Pro"; display: inline-block; margin-left: .25em; font-size: 13px;} .hoverMenu {right: 0; width: 100%; border: 1px solid #ddd; box-shadow: 0 50px 50px rgba(0, 0, 0, 0.4);} .hoverMenu .categorie {padding: 30px; background-color: var(--color3); border-bottom: 1px solid #dfdfdf;} .hoverMenu .categorie .kop {color: var(--color1); font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 19px; font-style: normal; margin: 0 0 .5em 0;} .hoverMenu .kolommen {padding: 30px;} .hoverMenu .kolommen .kolom .titel {font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-size: 16px; font-weight: bold; margin-bottom: 5px;} .hoverMenu .kolommen .kolom .titel a {padding: 0; display: inline;} .hoverMenu .kolommen .kolom .titel a:hover {text-decoration: underline;} .hoverMenu .kolommen .kolom > ul { box-shadow: none; list-style-position: outside; list-style-type: disc; opacity: 1; position: static; visibility: visible; padding-left: 10px; } .hoverMenu .kolommen .kolom > ul li a {background: transparent !important; border: 0; width: auto; line-height: inherit; font-weight: normal;} .hoverMenu .kolommen .kolom > ul li a::before {display: none;} .hoverMenu .kolommen.kolommen3 .kolom {width: 33.3333%; float: left;} .hoverMenu .kolommen.kolommen4 .kolom {width: 25%; float: left;} .hoverMenu .kolommen.kolommen5 .kolom {width: 20%; float: left;} .shareKnoppen a.deelKnopje {padding: 8px; line-height: 1;} .snelbestellenHolder {background-color: var(--color3);} .snelbestellenHolder .autocomplete-suggestions {top: auto !important; box-shadow: 0 50px 50px rgba(0, 0, 0, 0.4);} .snelbestellenHolder button, .snelbestellenHolder .button {white-space: nowrap;} .lijstOpties .zoek .knop:hover {color: var(--color1);} table.lijst {margin: 0 0 20px;} table.lijst th {text-align: left; border-bottom: 1px solid var(--color3); padding: 5px 10px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #888;} .lijst tr.inactief td a {color: #aaa;} table.lijst tr.inactief td.omschrijving {text-decoration: line-through; color: #f00;} table.lijst td {border-bottom: 1px solid var(--color3); padding: 10px 10px; background: #fff; white-space: nowrap;} table.lijst td > .titel {font-weight: bold;} table.lijst td > .subtitel {color: #aaa;} table.lijst .bedrag {text-align: right; padding-right: 30px;} table.lijst tr:hover td {background: #fafafa;} table.lijst tr.inactief:hover td {background: #f1f1f1;} table.lijst td.id {width: 30px;} table.lijst td.knoppenHouder {font-size: 16px; line-height: 0; vertical-align: middle;} table.lijst td.knoppenHouder a {font-size: inherit; padding: 0 5px; position: relative;} table.lijst td.knoppenHouder a .tekst { background: var(--color1); border-radius: 3px; top: -125%; color: #fff; line-height: 1.25em; white-space: nowrap; padding: 5px 9px; position: absolute; transition: .3s all ease; left: 50%; font-size: 11px; transform: translateX(-50%); opacity: 0; pointer-events: none; font-weight: normal; } table.lijst td.knoppenHouder a .tekst::before { border: solid; border-color: var(--color1) transparent; border-width: 6px 6px 0px 6px; bottom: -4px; content: ""; position: absolute; transition: .3s all ease; left: 50%; transform: translateX(-50%); } table.lijst td.knoppenHouder a:hover .tekst {opacity: 1; pointer-events: all;} .dealerImportVeld input[type="file"] + label {background-color: var(--color1);} .dealerImportVeld input[type="file"]:focus + label, .dealerImportVeld input[type="file"] + label:hover {background-color: var(--color1);} .barcodescannerHouder.open {box-shadow: 0 10px 50px rgba(0,0,0,.3);} .accountHouder .valuta { max-height: 30px; overflow: hidden; top: 0; background: #bc1d1c; z-index: 11; transition: .3s all ease; display: block; position: absolute; cursor: pointer; right: 0; margin: 0; } .accountHouder .valuta:hover {max-height: 150px; box-shadow: 0 0px 50px -8px rgba(0,0,0,.25);} .accountHouder .valuta .titel {display: none;} .accountHouder .valuta ul {margin: 0; padding: 0; list-style: none;} .accountHouder .valuta ul li {padding: 0 8px; line-height: 30px;} .accountHouder .valuta ul li:last-child {border: 0;} .accountHouder .valuta ul li a {color: inherit; text-decoration: none;} .accountHouder .valuta ul li .symbool {float: right; margin-left: .25em;} .shopArtikel .wButBestel {background-color: var(--color1);} #fancy_inner img {pointer-events: none;} .art-Sheet img, #fancy_inner img {-webkit-user-select: none;} .inloggen_holder .inloggen_content .cookie label {display: flex; align-items: center; gap: 5px; margin: 10px 0 0 0;} .inloggen_holder .inloggen_content .cookie label input {width: unset; margin: 0;} /* carousel */ .jcarousel-item {height: 75px; line-height: 75px;} .jcarousel-next-horizontal, .jcarousel-prev-horizontal {right: 0px;} .jcarousel-prev-horizontal {left: 0px;} .jcarousel-container a.carouselLink {background: rgba(0, 0, 0, 0) url("../skin_default/images/spacer.gif") repeat scroll 0 0; text-indent: -9999px; z-index: 100;} /* galerij */ .ad-gallery .ad-image-wrapper .ad-image a {margin: auto;} /* slider */ .flickity-button {position: absolute; background: #f5f5f5; border: none; color: #333; min-width: unset;} .flickity-button:hover {cursor: pointer; opacity: 0.7; background: #f5f5f5;} .flickity-button:focus {outline: none;} .flickity-button:active {opacity: 0.6;} .flickity-button:disabled {opacity: 0; cursor: auto;} .flickity-prev-next-button {width: 35px; height: 35px;} .volledigGallery .flickity-prev-next-button .flickity-button-icon {position: absolute; left: 30%; top: 30%; width: 35%; height: 35%;} /* opmaak */ textarea, input[type="text"], input[type="password"], input[type="tel"], input[type="number"] {border: 1px solid #d6d6d6; border-radius: 0px; line-height: 1.5em;} input[type="email"] {border: 1px solid #d6d6d6; border-radius: 0px; color: #666; line-height: 1.5em;} input.verplicht, textarea.verplicht { background: #fff no-repeat scroll right 5px top 5px; background-size: 6px; background-image: url('data:image/svg+xml;utf8,'); } input.correct, .correct {border-color: var(--color2);} input.nietMeerVerplicht, .nietMeerVerplicht {background: #fff;} select {border: 1px solid var(--borderColor); line-height: 1.5em;} input[type="radio"]:checked::before {color: var(--color1);} input[type="checkbox"]:checked::before {color: var(--color1);} select {height: auto;} .copyright {display: inline-block; text-align: center; margin-right: 10px; font-weight: bold;} .slideshowBorder {border-color: var(--borderColor) !important;} body > .laadtijd {margin-right: .25em;} .CMSMenuLink1li {color: var(--fontColor) !important; font-family: "Open Sans", "Open Sans", Helvetica, Arial, sans-serif !important;} .CMSMenuLink1liSel {font-family: "Open Sans", "Open Sans", Helvetica, Arial, sans-serif !important;} .CMSMenuLink1liSel {color: var(--color1) !important; font-weight: normal;} .CMSMenuLink2li {color: var(--fontColor) !important; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important;} .CMSMenuLink2liSel {font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important;} .CMSMenuLink2liSel {color: var(--color1) !important; font-weight: normal;} .CMSMenuLink3li {color: var(--fontColor) !important; font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; font-size: 12px; margin: 2px 0;} .CMSMenuLink3liSel {font-family: "Open Sans", Helvetica, Arial, Sans-Serif !important; font-size: 12px;} .CMSMenuLink3liSel {color: var(--color1) !important;} .Taalkeuze_vlaggen { line-height: 30px; max-height: 30px; overflow: hidden; position: absolute; text-align: left; top: 0; transition: .3s all ease; margin: 0; z-index: 10; left: 130px; color: #FFF; font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, Sans-Serif; } .Taalkeuze_vlaggen.open {max-height: 2100px; box-shadow: 0 25px 70px 14px rgba(0, 0, 0, 0.25); background-color: #bc1d1c;} .Taalkeuze_vlaggen ul li {display: block; line-height: 1em;} .Taalkeuze_vlaggen ul li a {color: #FFF; text-decoration: none; font-size: 13px; transition: .3s all ease;} .Taalkeuze_vlaggen ul li a:hover {color: #e8a9a7;} .Taalkeuze_vlaggen ul li .afbeelding {top: 2px;} .Taalkeuze_vlaggen.dropdownTaal {max-height: 30px; overflow: hidden; font-size: 13px; transition: .3s all ease; display: inline-block; margin: 0 0 0 10px; top: 0;} .Taalkeuze_vlaggen.dropdownTaal ul li {background: #b71d1c; padding: 3px 8px;} .Taalkeuze_vlaggen.dropdownTaal.open {max-height: 150px; box-shadow: 0 0px 50px -8px rgba(0,0,0,.25); border-radius: 0 0 3px 3px; z-index: 15;} .faqHolder.actief .titel a {color: var(--color1);} .nieuws .bericht .titel a {font-family: "Open Sans", Helvetica, Arial, sans-serif;} .nieuws.lijst .bericht .nieuwsboven {border-left: 5px solid var(--color1);} .nieuws.widget .bericht .nieuwstitel a {font-family: "Open Sans", Helvetica, Arial, sans-serif;} .nieuws.widget .bericht > a {z-index: 100;} .inloggen_holder .inloggen_content {background-color: #f2f2f2;} .inloggen_holder .inloggen_content input {width: 100%; margin: 0 0 10px;} .nieuwWachtwoordHolder .nieuwWachtwoordContent {background-color: #f2f2f2;} .blader_holder {font-family: "Open sans",Helvetica Neue,Helvetica,Arial,sans-serif;} .blader_tabel1_n a {color: #737373; font-family: "Open sans",Helvetica Neue,Helvetica,Arial,sans-serif;} .blader_tabel1_s {background-color: var(--color2); border-color: var(--color2);} .formulier_holder {width: 100%;} .formulier_text {width: 100%; margin: 0;} .formulier_textarea {margin: 0;} .formulierVersturen a.button {float: right;} .inschrijfFormulier .invoer {display: flex;} .inschrijfFormulier tr:nth-child(2) .invoer {display: inline-block;} .inschrijfFormulier input#inschrijf_1 {margin-right: 8px;} .inschrijfFormulier input#inschrijf_2 {margin-right: 8px;} .inschrijfFormulier input#inschrijf_9 {margin-right: 8px;} .inschrijfFormulier input#inschrijf_10 {margin-right: 8px;} .inschrijfFormulier input#inschrijf_12 {margin-right: 8px;} .inschrijfFormulier input#inschrijf_5 {width: 100%;} a.logo {left: 15px; position: absolute; top: -35px; z-index: 12;} a.logo img {width: 100%; box-shadow: 0 0px 12px 2px rgba(0,0,0,.2);} .slogan { position: absolute; color: #FFF; font-size: 16px; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-weight: 600; margin: 0 12px; display: block; transition: all 0.3s ease 0s; line-height: 30px; top: 18px; left: 120px; } .breadcrumbs {display: block; line-height: 1.75em; z-index: 0; margin-bottom: 1em; margin-top: 1em;} .crumb {display: inline-block;} .crumbSpace {display: inline-block; padding: 0 7px 0;} a.crumbLink {color: #404040 !important; text-decoration: none;} a.crumbLink:hover {text-decoration: underline;} .bovenkantHolder {background-color: rgba(167, 149, 137, .9); box-shadow: 0 0px 27px 3px rgba(0,0,0,.1); max-width: 1500px;} .bovenkant {padding: 0 20px; margin: 0 auto; position: relative; height: 66px; box-sizing: border-box;} .extrabovenkant {background-color: var(--color1); position: relative;} .extrabovenkant .usps { color: #d1d1d1; display: block; font-size: 12px; font-weight: bold; margin: 0 auto; max-width: 1200px; padding: 10px; position: relative; text-align: center; z-index: 1; } .extrabovenkant .usps div { background: url("images/vinkje_wit.png") no-repeat scroll 0 3px rgba(0, 0, 0, 0); display: inline-block; font-family: "Open Sans", Helvetica, Arial, Sans-Serif; font-weight: bold; margin: 0 35px; padding-left: 22px; text-transform: uppercase; transition: .3s all ease; } .extrabovenkant .usps div:hover {color: #fff;} .HeaderHolder {line-height: 0;} .HeaderHolder img {width: 100% !important; height: auto !important;} .pageFooterHolder {background-color: var(--color4);} .pageFooterHolder .pageFooter {padding: 45px 20px 30px; position: relative; max-width: 1200px;} .pageFooterHolder a {color: #FFF;} .pageFooterHolder a:hover {opacity: .6;} .pageFooter h2, .pageFooter .h2 {font-size: 22px;} .pageFooter h3 {color: #fff; font-size: 22px;} .pageFooterKnoppenHolder {background-color: var(--color1);} .pageFooterKnoppenHolder .pageFooterKnoppen {position: relative; max-width: 1200px; padding: 10px 20px;} .pageFooterKnoppenHolder .pageFooterKnoppen a {color: #fff !important; text-decoration: none; font-size: 14px; opacity: 0.8; margin: 0 8px;} .pageFooterKnoppenHolder .pageFooterKnoppen span.seperator {opacity: 0.8;} .pageFooterKnoppen .socialFooter {float: right;} .pageFooterKnoppen .socialFooter a, .socialFooter img {font-size: 18px; vertical-align: middle; opacity: 1 !important; margin: 5px;} .pageFooterKnoppen .socialFooter a.facebook:hover {color: #365899 !important;} .pageFooterKnoppen .socialFooter a.twitter:hover {color: #1da1f2 !important;} .pageFooterKnoppen .socialFooter a.linkedin:hover {color: #00669a !important;} .Gv3 {display: table-cell;} .Gv3Thumb { background-color: #fff; box-shadow: 0 2px 3px var(--borderColor); display: table-cell; float: left; line-height: 0; margin: 7px; padding: 2px; position: relative; text-align: center; } .Gv3ThumbImg {background-color: #fff; display: table-cell; vertical-align: middle;} .Gv3Thumb .desc {font-size: 13px; font-weight: normal; color: var(--fontColor);} .Gv3Thumb .desc2 { position: absolute; bottom: 5px; left: 5px; background-color: #f5f5f5; border: 1px solid var(--borderColor); box-shadow: 1px 1px 3px var(--borderColor); padding: 2px 5px; } .button, button {background-color: var(--color2); border: 0px solid #fff; font-size: 15px; padding: 7px 30px;} a.button {background-color: var(--color2); border: 0px solid #fff; color: #fff; font-size: 15px; padding: 7px 30px;} a.button:hover, button:hover {background-color: #69981e;} a.button:active, button:active, a.button.active, button.active {border-color: #555; background-color: #555;} a.button.positive:hover, button.positive:hover, button.wButAccountOpslaan:hover, a.button.wButAccountOpslaan:hover { background-color: var(--color2); border-color: #498349; } a.button.positive:active, button.positive:active, a.button.positive.active, button.positive.active {background-color: var(--color2); border-color: #498349;} a.button.big, button.big {font-size: 16px; padding-left: 14px; padding-right: 17px;} a.button span.icon, button span.icon {float: left; height: 14px; left: -3px; margin: 0 5px 0 0; position: relative; top: -1px; width: 14px;} a.big.button span.icon, button.big span.icon {top: 0px;} a.knop {background-color: var(--color2); border: 0px solid #fff; color: #fff; font-size: 15px; padding: 7px 30px;} a.knop:hover {background-color: #69981e; color: #FFF;} a.knop:active {border: 0px solid #fff; top: 1px;} a.knop.grijs {background-color: var(--color3); color: #888;} .uploadFilename {width: 250px;} img.schaduwRechts {border: 4px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,.3); float: right; margin-left: 20px; margin-bottom: 20px;} img.schaduwLinks {border: 4px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,.3); float: right; margin-right: 20px; margin-bottom: 20px;} .imgLinks, .imgRechts {box-shadow: 0 5px 11px rgba(0, 0, 0, 0.3); margin-bottom: 40px; -webkit-transition: all ease .2s;} .imgLinks {float: left; margin-right: 30px;} .imgRechts {float: right; margin-left: 30px;} .slideshowNav {z-index: 10;} .slideshowNav .activeSlide {background-color: var(--color1);} .aLandingMenu { background: url("images/tree.png") no-repeat scroll 4px 4px transparent; height: 24px; padding: 0; position: absolute; top: 2px; width: 24px; z-index: 102; left: 600px; } .aLandingMenu:hover {background-color: #bc1d1c; box-shadow: 0 2px 4px rgba(0,0,0,.3);} .LandingMenu {background-color: #bc1d1c; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); border-radius: 0px 5px 5px 5px; top: 24px;} .LandingMenu li {padding: 3px 8px;} .LandingMenu li a {color: #FFF; font-size: 12px;} .LandingMenu li a:visited, .LandingMenu li a:hover {text-decoration: none; font-size: 12px; color: #e8a9a7;} .account_holder .melding {box-shadow: 0 2px 15px rgba(255, 255, 255, 0.3);} .relatieItem {display: table; float: left; height: 200px; margin: 10px 0 0 0; width: calc(50% - 5px);} .relatieItem:nth-child(2n + 1) {margin: 10px 10px 0px 0px;} .relatieItem .afbeelding {display: table-cell; vertical-align: top; width: 100px !important;} .relatieItem .relinfo {box-sizing: border-box; padding: 0px 10px; display: table-cell; vertical-align: top;} .relatieItem .bedrijfsnaam {color: var(--color1);} .relatieItem.detail .bedrijfsnaam {color: var(--color1);} .relatieItem.detail .website a {background-color: var(--color1);} .sitemap1 {margin: 30px auto; max-width: 1200px; padding: 20px; box-sizing: border-box;} .objCategorieen { padding: 15px; margin-bottom: 0; background: linear-gradient(to bottom, #f4f4f4 0%, #ddd 100%); background-color: var(--color3); border: 1px solid #ddd; border-bottom: 0; } .objCategorieen ul {margin: 0; padding: 0;} .objCategorieen ul li {float: left; margin-right: 10px; list-style: none inside; width: 23%; line-height: 1.65em;} .objCategorieen ul li a {font-weight: bold;} .objCategorieen ul li a:link, .objCategorieen ul li a:visited {font-weight: bold; text-decoration: none; color: #333;} .objCategorieen ul li a, .objCategorieen ul li a:hover {text-decoration: underline; color: var(--fontColor);} .objCategorieen ul li.selected {font-weight: bold; color: #fff;} .objCategorieen ul li.selected a { background: url("images/navActiveBg.png") repeat-x scroll 0 0 transparent; border-radius: 20px 20px 20px 20px; color: #fff !important; font-weight: bold; left: -9px; text-decoration: none; margin-right: -9px; padding: 3px 9px; position: relative; } .objCategorieen .objectCount {padding-left: 5px; color: #888;} .objControls {margin-bottom: 12px; padding: 6px 20px; background: linear-gradient(to bottom, #45484d 0%, var(--fontColor) 100%); background-color: #444;} .objControls .objPresentatie {float: left;} .objControls .objSortering {float: right;} .objControls .objSortering a {margin-left: 15px; color: var(--borderColor);} .objControls a {text-decoration: none;} .objControls .objSortering .selected {font-weight: bold; color: #fff;} .objPresentatie .shopSortOptieTable .objSortPres {padding-right: 2px;} .objPresentatie .shopSortOptieTable .objPrint {padding-left: 0;} .objectP1 { background-color: #fff; border: 1px solid var(--borderColor); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; display: block; float: left; height: 150px; margin-bottom: 12px; margin-right: 12px; padding: 10px; position: relative; width: 442px; } .objectP1:hover {box-shadow: 0 1px 2px rgba(0,0,0,.6); background-color: #fff;} .objectP1.laatste {margin-right: 0;} .objectP1 .label { background-color: #f00; color: #fff; font-size: 8px; font-weight: bold; line-height: 1em; padding: 3px 4px; position: absolute; text-transform: uppercase; transition: all 0.3s ease 0s; z-index: 1; } .objectP1:hover .label {opacity: 0;} .objectP1 .afbeelding {float: left;} .objectP1 .info {padding: 10px 10px 10px 20px; float: left;} .objectP1 .info {font-size: 13px;} .objectP1 .info .omschrijving {font-size: 18px; font-weight: bold;} .objectP1 .info .omschrijving a {color: var(--fontColor); text-decoration: none;} .objectP1 .info .nummer .titel {display: none;} .objectP1 .info .nummer .waarde {font-weight: bold;} .objectP1 .info .kenmerk1, .objectP1 .info .kenmerk2, .objectP1 .info .kenmerk3, .objectP1 .info .kenmerk4, .objectP1 .info .kenmerk5, .objectP1 .info .kenmerk6, .objectP1 .info .nummer { float: left; clear: both; } .objectP1 .info .kenmerk1 .titel, .objectP1 .info .kenmerk2 .titel, .objectP1 .info .kenmerk3 .titel, .objectP1 .info .kenmerk4 .titel, .objectP1 .info .kenmerk5 .titel, .objectP1 .info .kenmerk5 .titel { float: left; padding-right: 5px; width: 120px; } .objectP1 .info .kenmerk1 .waarde, .objectP1 .info .kenmerk2 .waarde, .objectP1 .info .kenmerk3 .waarde, .objectP1 .info .kenmerk4 .waarde, .objectP1 .info .kenmerk5 .waarde, .objectP1 .info .kenmerk5 .waarde { float: left; } .objectP1 .info .kenmerk1 .waarde {font-weight: bold;} .objectP1 .info .prijs { background-color: var(--fontColor); bottom: 10px; clear: both; color: #fff; float: left; font-size: 16px; font-weight: bold; padding: 2px 18px 2px 10px; position: absolute; right: 0; } .objectP2 {border: 0; width: 100%; padding: 10px; border-radius: 5px; background-color: #fff;} .objectP2 tr {background-color: #fff; transition: all .3s ease;} .objectP2 tr:hover {background-color: var(--color3); cursor: pointer;} .objectP2 .label { background-color: #f00; color: #fff; font-size: 8px; font-weight: bold; line-height: 1em; padding: 3px 4px; position: absolute; text-transform: uppercase; transition: all 0.3s ease 0s; z-index: 1; } .objectP2 td:hover .label {opacity: 0;} .objectP2 th {padding: 2px; text-align: left; background-color: #fff;} .objectP2 td {padding: 2px; text-align: left; border-bottom: 1px solid var(--color3);} .objectP3 {border: 0; width: 100%; padding: 10px; border-radius: 5px; background-color: #fff;} .objectP3 tr {background-color: #fff; transition: all .3s ease;} .objectP3 tr:hover {background-color: var(--color3); cursor: pointer;} .objectP3 .label { background-color: #f00; float: right; margin-left: 5px; margin-top: 3px; color: #fff; font-size: 8px; font-weight: bold; line-height: 1em; padding: 3px 4px; text-transform: uppercase; transition: all 0.3s ease 0s; z-index: 1; } .objectP3 th {padding: 2px; text-align: left; background-color: #fff;} .objectP3 td {padding: 2px; text-align: left; border-bottom: 1px solid var(--color3);} .objControls .controls a {margin-right: 15px; color: #fff;} .objControls .blader {float: right;} .objControls .overzicht {float: left;} .objControls .objPrintDetail {float: left;} .objectDetail {padding: 15px; background-color: #fff; border-radius: 5px;} .objectDetail .kop h1 {float: left;} .objectDetail .kop .label { background-color: #f00; color: #fff; float: right; font-size: 10px; font-weight: bold; line-height: 1em; margin-right: 20px; margin-top: 10px; padding: 3px 4px; text-transform: uppercase; transition: all 0.3s ease 0s; z-index: 1; } .objectDetail .kop .prijs {background-color: var(--fontColor); color: #fff; float: right; font-size: 18px; font-weight: bold; padding: 4px 9px;} .objectDetailHouder .links {width: 48%; vertical-align: top;} .objectDetailHouder .midden {width: 4%;} .objectDetailHouder .rechts {width: 48%; vertical-align: top;} .objectDetailHouder .kenmerken .titel {font-weight: bold; color: var(--fontColor); padding-top: 8px; border-bottom: 1px solid var(--color3);} .objectDetailHouder .kenmerken .titel3 {color: #999;} .objectDetailHouder .kenmerken .info {padding-top: 8px;} .objectDetailHouder .rechts .ad-gallery {width: 410px;} .objectDetailHouder .rechts .ad-gallery .ad-image-wrapper {width: 410px; height: 400px;} .objectDetailHouder .ad-gallery .ad-nav {margin-top: 10px;} .objectDetailHouder .ad-gallery .ad-nav .ad-thumbs {margin-left: 20px;} .objectDetailHouder .ad-gallery .ad-controls {display: none;} .objectDetailHouder .ad-gallery .ad-image-wrapper {overflow: visible;} .objectDetailHouder .ad-gallery .ad-image-wrapper .ad-image {border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);} .objectDetailHouder .rechts .objectEtalage {width: 410px; border-radius: 5px;} .objectDetailHouder .bijlagen .titel {font-weight: bold; color: var(--fontColor); border-bottom: 1px solid var(--color3);} .objectDetailHouder .bijlagen .icon {padding-bottom: 5px; padding-top: 5px; width: 60px;} #objInschrijfscherm { background-color: #FFC907; display: block; margin-bottom: 10px; max-height: 0; overflow: hidden; position: relative; top: -12px; transition: all 0.3s ease 0s; width: 100%; z-index: 10; color: var(--fontColor); } #objInschrijfscherm .inhoud {padding: 25px;} #objInschrijfscherm .links {float: left; width: 45%; margin-right: 5%;} #objInschrijfscherm .rechts {float: left; width: 40%; border-left: 1px solid var(--fontColor); padding-left: 20px;} #objInschrijfscherm #alertVoornaam {width: 120px;} #objInschrijfscherm #alertTV {width: 70px;} #objInschrijfscherm #alertAchternaam {width: 120px;} #objInschrijfscherm #alertEmail {width: 325px;} #objInschrijfscherm .sluitKnop {position: absolute; top: 10px; right: 10px;} .nietGevuld {color: #999;} .objMijnObjecten .attentie {background-color: var(--color3); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); float: none; margin-right: 2px; width: auto;} .objMijnObjecten .attentieTR {background-color: var(--color3);} .objMijnObjecten .attentieTR2 {background-color: var(--color3);} .objZoeken {float: left;} #objZoekWoordID {background: url("images/zoeken.png") no-repeat 103px 4px #fff; padding: 0 20px 0 5px; margin-right: 10px; width: 100px;} .meldingHouder .melding {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);} .meldingHouder .melding .knoppen a { background: var(--borderColor); border-radius: 3px; color: #fff; display: inline-block; line-height: 1.25em; margin: 5px; padding: 7px 10px; text-decoration: none; transition: all 0.3s ease 0s; } .meldingHouder .melding .knoppen a:hover {background: var(--fontColor); color: #fff; transition: all .3s ease;} .meldingHouder .melding .knoppen a.bevestigen {background: var(--color2);} .cookieMelding {z-index: 20;} .cookieMelding .inhoud .sluiten {background: #64d064;} .privacyMelding {box-shadow: 0 0 60px 5px rgba(0, 0, 0, 0.1);} .privacyMelding .inhoud .titel {font-family: "Open Sans", Helvetica, Arial, Sans-Serif;} .privacyMelding .knoppen a.knop {background: #aaa;} .popupHolder .popup {box-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);} .kiyohHolder .kiyohReview {background: #f5f5f5;} div[class*="grid"] {hyphens: auto;} .functieIcons { background-color: #fff; border: 5px solid #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); float: left; margin-right: 10px; margin-top: 2px; margin-bottom: 5px; border-radius: 3px; } .zoekEnMerkHolder {height: 50px; left: 400px; position: absolute; top: 37px; width: 360px;} .merkVeld {float: left; margin-right: 20px; position: relative; top: 10px;} .shopLijst2ContentBestelknop a.button {border: 0 solid !important; border-radius: 0 !important; padding: 8px 10px !important;} .beschrijving {width: 50%;} .vrijAdres .beschrijving {width: 400px;} .bladwijzer {background-color: #EFEFEF; border: 1px solid var(--borderColor); padding: 2px 5px; text-decoration: none !important;} .liquid-slide-sjabloon .inhoud {max-width: 100%; right: 0; margin: 0 auto; top: unset; bottom: 5%; text-align: center;} .liquid-slide-sjabloon .inhoud h2 {font-size: 45px; margin: 0; font-weight: normal; line-height: 1.25em;} .liquid-slide-sjabloon .inhoud h5 {color: #FFF; line-height: 1.95em; font-size: 24px;} .liquid-slide-sjabloon .inhoud h2 + h5 {margin-top: 0;} .heleSite {position: relative; margin: 0 auto; max-width: 1500px; overflow-x: hidden;} .vak.donker {background-color: rgba(167, 149, 137, 1);} .vak .inhoud {width: 100%; max-width: 1200px; position: relative; padding: 65px 20px;} .vak.overRotex { background-image: url(images/vakOverRotex.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; opacity: 1; transition: .3s all ease; } .vak.overRotex .inhoud {padding: 100px 10px; color: #FFF; max-width: 740px;} .vak.overRotex .inhoud h5, .vak.overRotex .inhoud h2 {color: #FFF;} .vak.inKort td.FCK2kolTd ul {list-style: none; padding: 0;} .vak.inKort td.FCK2kolTd ul li::before { content: "\f058"; font-family: "Font Awesome 5 Pro"; margin-right: 10px; color: var(--color1); left: 0; position: absolute; font-size: inherit; } .vak.inKort td.FCK2kolTd ul li {padding: 0; padding-left: 20px; position: relative;} .fixedboven {position: fixed; top: 0; z-index: 10; width: 100%;} .tijdlijn {width: 100%; display: block; position: relative; margin: 45px 0;} .tijdlijn:before {position: absolute; top: 0; bottom: 0; border-left: 3px solid #ddd; left: 50%; margin-left: -1px; content: " "; display: block;} .tijdlijn tbody, .tijdlijn tr {display: block;} .tijdlijn tr::after {clear: both; content: ""; display: block;} .tijdlijn tr td {width: 45%; box-sizing: border-box; display: block; clear: both; transition: all .3s ease; padding: 30px; text-align: right;} .tijdlijn tr td:before { content: ""; display: block; width: 20px; height: 20px; margin-top: 150px; margin-left: -9px; border: 3px solid #d21e1e; border-radius: 40px; background: #fff; left: 50%; position: absolute; transition: all .3s ease; box-sizing: border-box; } .tijdlijn tr td img {max-width: 100%; height: auto !important;} .tijdlijn tr td p:last-child {margin-bottom: 0;} .tijdlijn tr td h2 {color: var(--fontColor); font-size: 24px; font-family: "Open Sans";} .tijdlijn tr td h5 {color: #777; font-size: 16px; font-family: "Open Sans";} .tijdlijn tr:nth-child(even) td {float: right; text-align: left;} .tijdlijn td:hover:before {border: 10px solid #d21e1e;} .functieHouder {position: relative;} /* responsive */ .resMenubalk {padding: 0; position: fixed; top: 0; width: 100%; z-index: 100;} .resMenubalkinhoud { background-color: var(--color4); top: 0; left: 0; right: 0; padding: 10px 15px 10px 10px; z-index: 50; position: fixed; line-height: 1em; text-align: right; } .resMenubalkinhoud a {display: inline-block; text-decoration: none; position: relative; padding: 5px; line-height: 0; vertical-align: top; font-size: 20px; color: #fff;} .resMenubalkinhoud img {width: 20px; vertical-align: middle;} .resMenubalkinhoud .resMenucategorienaam { color: #ffffff; cursor: pointer; display: inline-block; font-size: 18px; font-weight: bold; margin: 0 0 0 10px; position: relative; text-decoration: none; top: -6px; } .resMenubalkinhoud .resZoeken.open {padding-top: 5px; padding-bottom: 5px;} .resMenubalkinhoud #menuopenen {margin-left: 10px;} .resMenuHolder {background-color: var(--color3); box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.2); height: calc(100vh - 49px); top: 49px; overflow-y: scroll;} .resMenubloktitel {background-color: #f2f2f2; font-size: 14px; padding: 7px 20px; text-align: center; padding-top: 20px;} .resMenublokinhoud .resMenuItem a { border-bottom: 1px solid var(--color3); padding: 8px 15px; font-weight: bold; color: #333; transition: background-color .3s ease; background-color: #FFF; text-align: center; } .resMenublokinhoud .resMenuItem.active > a {background-color: var(--color1); color: #fff;} .resMenublokinhoud .resMenuItem #respVerlangLijstCode {padding: 10px 0px; text-indent: 20px; font-size: 14px; border-bottom: 1px solid #dbdbdb;} .resMenuwinkelmandje #reswinkelMandjeAantal {background-color: var(--color2);} #aantal {background-color: var(--color2);} .openklapper {width: 39px; background: url("images/res_plus.svg") no-repeat scroll center center / 50% auto;} .openklapper.open {background: url("images/res_min.svg") no-repeat scroll center center / 50% auto;} .resMenuItemHolder {transition: .6s all ease;} .responsiveButton { position: relative; height: 26px; width: 26px; display: inline-block; background: no-repeat center center transparent; background-size: cover; margin: 5px 15px; padding: 0; } .responsiveButton .badge { border-radius: 30px; padding: 4px 6px; font-size: 12px; background-color: #0096D8; text-align: center; line-height: 1em; position: absolute; right: -10px; top: -4px; font-weight: bold; } a.responsiveButton {text-decoration: none; color: #fff; text-align: center;} #resonsiveBel {background-image: url("../skin_default/images/responsive/telefoon.png");} #resonsiveFavorieten {background-image: url("../skin_default/images/responsive/ster.png");} #resonsiveWinkelmandje {background-image: url("../skin_default/images/responsive/winkelwagen.png");} #resonsiveZoeken {background-image: url("../skin_default/images/responsive/zoeken.png");} .resCategorieen ul li {margin-right: 10px;} .resCategorieen ul li a {border: 2px solid var(--color3);} .resCategorieen ul li.actief a {background: var(--color3); border-color: #ddd;} .kenmerkMobielHouder {margin-bottom: 15px;} .kenmerkMobielHouder .toonFiltersKnop {background: #bc1d1c;} .kenmerkMobielHouder .filters .filterBovenkant .filtersSluiten {font-size: 25px; margin: 8px;} .kenmerkMobielHouder .filters .filterBovenkant .alleFiltersWissen {text-decoration: none; padding: 7px 13px;} .kenmerkMobielHouder .filters .filterBovenkant .alleFiltersWissen a {color: var(--fontColor); background: #fff; padding: 12px 13px;} .kenmerkMobielHouder .filters .filterknop a {background-color: #bc1d1c;} .kenmerkMobielHouder.standaard .toonFiltersKnop {background: #bc1d1c;} .kenmerkMobielHouder.accordion .toonFiltersKnop {background: #bc1d1c;} .kenmerkMobielHouder.accordion .filters .filterknop a {display: none; background-color: #bc1d1c; position: fixed;} .kenmerkMobielHouder.accordion .filters .filterBovenkant {background: #bc1d1c;} .kenmerkMobielHouder.accordion .filters .tonen {display: none;} .kenmerkMobielHouder.slide .toonFiltersKnop { text-decoration: none; width: 100%; box-sizing: border-box; line-height: 1.75em; border: 0; background: #bc1d1c; border-bottom: 2px solid #bc1d1c; margin: 0; } .kenmerkMobielHouder.slide .filters.open .filterknop {display: block;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep::after {padding: 19px 27px; z-index: -1;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .titel {font-size: 16px; margin: 0; padding: 15px; line-height: 1;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .tonen {display: none;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .kenmerken, .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep .prijsFilterHolder { height: 100%; } .kenmerkMobielHouder.slide .filters .kenmerkgroep a.filterGroepHerstel {background: #fafafa; border: 1px solid #e2e2e2;} .kenmerkMobielHouder.slide .filters .filterBovenkant {background: #bc1d1c; padding: 12px 15px;} .kenmerkMobielHouder.slide .filters .filterBovenkant .terugFilteren {background: #fafafa; padding: 7px 0px; color: var(--fontColor);} .kenmerkMobielHouder.slide .filters.volgende .filterBovenkant .terugFilteren {padding: 7px 13px;} .kenmerkMobielHouder.slide .filters .kenmerkgroepHouder .kenmerkgroep.open .kenmerken .kenmerk label {padding: 5px 0;} .kenmerkMobielHouder.slide .filters .filterknop a::before {content: "\f058"; font-family: "Font Awesome 5 Pro"; margin-right: 10px;} @media screen and (min-width: 1520px) { body {background: #dad6cb;} } @media screen and (max-width: 1200px) { .art-Sheet, .menuLaag2 .art-nav, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen, .SubfooterHolder, .usps, .vak.inhoud {max-width: 1000px;} .usps > div {margin: 0 6px;} .art-menu li a .t {margin: 0 5px;} } @media screen and (max-width: 1100px) { .slogan {font-size: 13px; max-width: 150px; line-height: 1.25em; top: 17px;} } @media screen and (max-width: 1000px) { .art-Sheet, .menuLaag2 .art-nav, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen, .SubfooterHolder, .vak.inhoud {max-width: 760px;} .FCK2kolTd {float: none; width: 100%; display: block;} .FCK2kolTdS {display: none !important;} .usps {max-width: 760px; padding: 5px 0;} .usps > div:nth-child(3) {display: none;} .ccRechts {display: none;} h2 {font-size: 32px;} h1 {font-size: 34px;} .art-contentLayout .art-sidebar2 .art-Block {padding: 0;} .ccLinks, .art-sidebar1 {display: none !important;} .art-contentLayout .art-content {width: 100% !important;} .shopCategorieHolder .categorie {width: 50%;} .artikel.detail .links, .artikel.detail .rechts {float: none; width: 100%; padding: 0;} .artikel.detail .links, .artikel.detail .rechts .kenmerkenResponsive {margin-top: 30px;} .stappenKnop, .offertePdf {border: 0 solid; bottom: 0; margin: 0; padding: 0; position: relative;} .stappenKnop .button, .offertePdf .button, .stap1_couponcode .button { padding: 11px 20px !important; text-align: center; width: calc(100% - 40px); font-weight: bold; border: 0 !important; } #kassa > div {width: 100%; float: none; margin: 0 0 10px 0px; padding: 0px;} .stap1_couponcode {box-sizing: border-box; padding: 10px !important;} #kassa .stap1_totalen .tabel {padding: 10px;} .productCarrousselHolder .jcarousel-clip {max-width: 675px;} .liquid-slide-sjabloon .sliderWrapper {background-color: #bbb6aa;} .liquid-slide-sjabloon .inhoud h2 {font-size: 34px;} .liquid-slide-sjabloon .inhoud p {display: none;} .stap2_bestaandeKlant .inloggen, .stap2_bestaandeKlant .uitleg {float: none; width: 100%;} .stap2_bestaandeKlant .inloggen .beschrijving, .stap2_bestaandeKlant .inloggen .invoer {display: block !important; width: 100% !important; padding: 0;} .stap .blokholder {padding: 15px 0;} .stap2_bestaandeKlant {padding: 15px !important;} .stap2_naw .factuurAfleverHouder h3 a {opacity: 1;} .art-menu li a .t {margin: 0; font-size: 16px;} .liquid-slide-sjabloon .inhoud {position: relative; max-width: none; left: 0; top: 0; font-size: 13px; padding: 20px;} .adresHolder .adressen .item {flex-basis: calc(50% - 10px);} .inschrijvenKolom {flex-direction: column;} .inschrijvenKolom > .rechts {width: 100%; margin: 0;} .detailOrderHolder {flex-direction: column;} .detailOrderHolder .detailOrderBlok {width: calc(100% - 20px);} .detailOrderHolder .detailOrderBlok table.lijst tr {background: unset; border: 0; padding: 5px; margin: 0;} .detailOrderHolder .detailOrderBlok table.lijst tr td {display: table-cell; border-bottom: 1px solid var(--color3);} } @media screen and (max-width: 760px) { .art-Sheet, .menuLaag2 .art-nav, .pageFooterHolder .pageFooter, .pageFooterKnoppenHolder .pageFooterKnoppen, .SubfooterHolder, .usps, .vak.inhoud {max-width: 550px;} .art-Post .FCK2kolTdS, .art-Post .FCK3kolTdS {display: none;} .art-Post .FCK2kolTd, .art-Post .FCK3kolTd {display: inline-block; margin: 0; padding: 0; vertical-align: top; width: 100% !important;} #cookieHolder .cookie {width: calc(100% - 40px); max-width: 100%; border-radius: 0px; left: auto; right: auto; bottom: 0;} .filters img {width: auto !important;} .kenmerkMobielHouder.accordion .filters.open .filterknop a {display: block;} .art-nav, .aLandingMenu, .account, .socialMedia, .art-sidebar1, .knoppenRechts, .footerTable .tussen, .winkelwagenHouder, .bovenkant .zoeken, .ccRechts, .ccLinks, .usps, .bovenkantHolder, .shopSortMaxPageC, .shopSortMaxPageA { display: none !important; } body {-webkit-text-size-adjust: none;} h1, h2, h3, h4, h5, h6 {clear: both;} #map-canvas, iframe {width: 100% !important; max-width: 100%;} .responsiveMenu {display: block;} .bovenkantHeader, .pageFooterHolder {width: 100%; overflow: hidden;} .responsiveKnop {display: block;} .bovenkantHolder, #art-main {min-width: 0; overflow: hidden; border-bottom: 0px solid;} .alleenResponsive {display: inline;} .art-Sheet .FCK2kolTdS, .art-Sheet .FCK3kolTdS, .art-Sheet .FCK4kolTdS, .art-Sheet .FCK5kolTdS {display: none;} .art-Sheet .FCK2kolTd, .art-Sheet .FCK3kolTd, .art-Sheet .FCK4kolTd, .art-Sheet .FCK5kolTd {width: 100%; display: block; margin-bottom: 15px;} .pageFooter .FCK2kolTd, .pageFooter .FCK3kolTd, .pageFooter .FCK4kolTd, .pageFooter .FCK5kolTd {width: 100%; display: block; margin-bottom: 15px;} .pageFooter .FCK2kolTdS, .pageFooter .FCK3kolTdS, .pageFooter .FCK4kolTdS, .pageFooter .FCK5kolTdS {display: none;} img.volledig, img.links-20, img.links-30, img.links-40, img.links-50, img.links-60, img.links-70, img.links-80, img.rechts-20, img.rechts-30, img.rechts-40, img.rechts-50, img.rechts-60, img.rechts-70, img.rechts-80 { clear: both; width: 100% !important; max-width: none !important; margin: 0 0 1em 0; } .HeaderHolder {width: 100%;} .logo {width: 210px; margin: 0 auto; z-index: 21; position: relative;} .bovenkant {width: 100%; height: 100px;} .art-Sheet {width: 100% !important; padding: 0;} .art-contentLayout {width: 100% !important;} .art-contentLayout .art-content {width: 100% !important;} .art-Post {width: 100% !important; margin: 0; padding: 10px;} .art-Post img {max-width: 100%; height: auto !important;} .art-contentLayout .art-sidebar2 {width: 100% !important;} .art-Block {padding: 5%; margin: 0;} .art-BlockContent-body {padding: 0; margin: 0;} .art-Block img {max-width: 100%; height: auto !important;} .FooterKnoppen {display: block; position: relative; top: auto; text-indent: -1000px; width: 100%;} .copyright {top: auto; left: auto; right: auto;} .pageFooterKnoppenHolder .pageFooterKnoppen {padding: 10px;} .pageFooterHolder .pageFooter {padding: 10px;} .sitemap1 .sitemap1ul a, .sitemap1 .sitemapWinkel a, .sitemap1 .sitemapMinisite a {text-decoration: none;} .sitemap1 .sitemap1ul li, .sitemap1 .sitemapWinkel li, .sitemap1 .sitemapMinisite li {display: block; float: none; width: auto;} ul.sitemap1ul, ul.sitemap1ul ul, ul.sitemap1ul ul ul, ul.sitemap1ul ul ul ul {margin: 0;} li.STPMenu1li {width: 100%; border: 0; list-style-type: none;} li.STPMenu2li {margin-left: 10px;} li.STPMenu3li {margin-left: 20px;} li.STPMenu4li {margin-left: 30px;} li.STPMenu5li {margin-left: 40px;} li.STPMenu6li {margin-left: 50px;} li.STPMenu7li {margin-left: 60px;} li.STPMenu8li {margin-left: 70px;} li.STPMenu9li {margin-left: 80px;} li.STPMenu10li {margin-left: 90px;} li.STPMenu2li a {font-size: 14px;} li.STPMenu3li a {font-size: 13px;} .Taalkeuze_vlaggen {left: auto; position: relative; right: auto; text-align: center; width: 100%;} .HeaderHolder .slideshowHolder, .HeaderHolder .slideshowHolder div {width: 100% !important;} .HeaderHolder .slideshowHolder div img {width: 100% !important; max-width: 100%; height: auto !important;} .homepage .deel1 {display: none;} .homepage .deel2 {padding-top: 0px;} .homepage .deel2 .links {float: none; margin-right: 0; display: block; width: auto;} .homepage .deel2 .links a {background-position: center center; background-size: 95% auto; height: 175px; margin: 0; width: 180px;} .homepage .deel2 .knoppen {display: none;} .homepage {width: 360px;} .nieuwsBlok, .twitterBlok {width: 90%; padding: 5%;} .nieuwsBlok {margin-top: 10px;} .twitterBlok .goTekstTwitter {display: none;} .widgetNieuws2Keiler {height: 6.6em;} .footerTable .td {display: block;} .openklapper h2 {font-size: 14px; white-space: nowrap;} .inloggen_holder {display: block; margin: 0 auto;} .inloggen_holder .sep {display: none;} .inloggen_holder .inloggen_content, .inloggen_holder .inloggen_beschrijving {border: 0; display: block;} .inloggen_holder .inloggen_beschrijving {padding: 0;} .inloggen_holder .inloggen_txtBlok {padding: 20px;} .shopCategorieHolder .categorie {width: 50%;} .shopLijst .artikel .inner .col1 {width: 85px;} .shopTegel .artikel .favorieten, .shopTegel .artikel .verlang, .shopTegel .artikel .formuleHolder, .shopTegel .artikel .prijsafspraakInLijst {display: none;} .shopCompact .artikel .inner {table-layout: auto;} .shopCompact .artikel .inner .col1 {display: none;} .shopCompact .artikel .inner .col3 {width: auto; padding: 0;} .shopCompact .artikel .inner .details {display: none;} .shopCompact .artikel .artikelEenheid {display: none;} .shopCompact .artikel .extrainfo {display: none;} .artikel.detail .ad-gallery .ad-nav {position: absolute; opacity: 0; height: 0; width: 0;} .artikel.detail .ad-gallery .ad-image-wrapper .ad-image {pointer-events: none;} .tabsV2 .titels {display: block;} .tabsV2 .titels > div {display: block; float: left; width: calc(50% - 10px); box-sizing: border-box; border-radius: 3px; border: 0; margin: 5px;} .tabsV2 .titels > div.actief {border: 0; background: var(--color1); color: #FFF;} .tabsV2 .inhoud {top: 5px;} .ad-gallery .ad-next .ad-next-image, .ad-gallery .ad-prev .ad-prev-image {display: block !important; opacity: 0.5 !important; background-color: #fff;} .shopSortOptieTable {margin: 15px 0;} .shopSortOptieTable td {display: inline-block; margin: 0 5px 5px 0;} .shopSortOptieTable .shopSortMaxPageB {display: none;} .shopSortOptieTable td.shopSortNiks {display: none;} .shopSortOptieTable td img {width: auto;} #tell-a-friend table {width: 100%;} #tell-a-friend td {display: block; width: 100%;} #tell-a-friend td textarea, #tell-a-friend td input {width: 100%;} .shopNavigatie {margin: 0 auto; height: auto;} .inschrijfformulier_table td {display: block;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td {display: block;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td:first-child {display: none;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen {padding: 0; width: 100%;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a {width: 50%; text-align: center; box-sizing: border-box; float: left; margin: 10px 0 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.doorgaanKassa {border-top-right-radius: 0; border-bottom-right-radius: 0;} #extraSchermWinkelmand .schermWinkelMandje .melding .meldingBoven td .knoppen a.verderWinkelen {border-top-left-radius: 0; border-bottom-left-radius: 0;} .stappenbalk {padding: 0 0 10px; text-align: center;} .stappenbalk li {margin: 0;} .stappenbalk li .naam {display: none;} .stappenKnop li a {font-size: 14px;} .stap.twee > .blokholder, #stap2_factuuruitklap, #stap2_bewaaraccount, .stap3_betaal.blokholder {float: none !important; width: 100% !important; padding: 0;} .snelbestellenHolder {padding: 10px;} .snelbestellenHolder .titel {display: block; width: 100%; padding: 0; margin: 0 0 5px;} .snelbestellenHolder .invoer {display: block;} .snelbestellenHolder .invoer .inputArtikelnr {display: block; width: 75%; float: left; padding: 0;} .snelbestellenHolder .invoer .inputAantal {display: block; width: 25%; float: left; padding: 0;} .snelbestellenHolder .invoer .inputArtikelnr input {width: 100%; margin: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;} .snelbestellenHolder .invoer .inputAantal input {width: 100%; margin: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;} #snelbestellenArtikelomschrijving {display: block; white-space: nowrap; max-width: 100%; width: 100%;} #snelbestellenPrijs {display: block; width: 100%; padding: 0; text-align: left;} .snelbestellenHolder .snelbestellenKnop {width: 100%; margin: 5px 0 0; display: block; text-align: left;} .snelbestellenHolder .autocomplete-suggestions {width: auto !important; left: 10px; right: 10px; top: 75px !important;} .snelbestellenHolder .omschrijving {width: auto; margin-right: .25em;} .stap .blokholder > .content {padding: 10px 0 0;} .stap1_artikelen table tr:first-child {display: none;} .stap1_couponcode .content {width: 100%; display: table;} .stap1_couponcode .titel {display: block; margin-bottom: 10px; margin-right: 0;} .blokholder.stap1_couponcode .content a.wButControleer {width: 100px;} .kassaArtikel {display: block; padding: 10px; margin-top: 10px; border-top: 1px solid #ddd; clear: both;} .kassaArtikelen th {display: none;} .kassaArtikel .regelStuk {display: none;} .kassaArtikel::after {content: ""; display: table; clear: both;} .pdfKnop {float: unset; margin-bottom: 15px;} .winkelmandDelen, .stap .totalen {width: 100%; float: unset; padding: 15px; margin: 0 0 10px;} .stap .totalen .stap1Totalen, .stap .totalen .totaalCadeaubon {width: 100%; float: unset; padding: 10px;} .stap select {font-size: 15px;} .stap.twee .stap2_bestaandeKlant .inloggen, .stap.twee .stap2_bestaandeKlant .uitleg {width: 100%; float: unset;} .stap.drie .blokholder {width: 100%; float: unset;} .stap.vier .factuurAfleverHouder .midden {width: 0;} .dropdown.dealerHolder .plaats {float: none;} .dropdown.dealerHolder .bedrijf {display: block;} .dropdown.dealerHolder .keuze .km {padding-right: 10px;} .stap.vier .gegevens {padding: 10px;} .stap.vier .factuurAfleverHouder .links, .stap.vier .factuurAfleverHouder .rechts {width: 100%; display: block; margin-top: 10px;} .stap.vier .factuurAfleverHouder .midden {display: none;} table.lijst tr:first-child {display: none;} table.lijst tr {display: block; margin: 0 0 10px; background: #fafafa; border-radius: 3px; padding: 10px; border: 1px solid var(--color3); position: relative;} table.lijst tr td {display: block; width: 100%; box-sizing: border-box; border: none; background: none !important; padding: 0;} table.lijst tr td #voorraadTT {float: none;} table.lijst tr td.bedrag {text-align: left; font-weight: bold;} table.lijst td.knoppenHouder {position: absolute; right: 0; top: 0; width: auto; padding: 10px; border-left: 1px solid var(--color3);} table.lijst td.knoppenHouder a {padding: 8px; display: block;} .adresHolder .adressen .item {flex-basis: 100%; margin: 0 0 5px;} .adresHolder .adressen .item.open {position: relative; left: auto; top: auto; right: auto; padding: 10px 15px; box-shadow: none;} .blokholder.accountWijzigen .content {padding: 0;} .blokholder.accountWijzigen .beschrijving, .blokholder.accountWijzigen .invoer {display: block; width: auto; padding: 0;} .blokholder.accountWijzigen .beschrijving {font-weight: bold;} .blokholder.accountWijzigen .invoer {padding-bottom: 10px;} a.barcodescannerLink {float: right;} .barcodescannerHouder.open {border-radius: 0; top: 0px; left: 0px; width: 100%; bottom: 0px; margin-left: 0;} #barcodeScannerCamera video {width: 100%; height: auto;} .cadeauHolder .cadeauAfbeeldingHolder img {max-width: 100%; height: auto !important;} .cadeauHolder .cadeauTextField, .cadeauHolder .cadeauTextArea {width: calc(100% - 10px);} .cadeauHolder .cadeauBedrag .cadeauTextField {width: 170px;} .cadeauHolderOpties > div {float: none !important;} .houderHome .tekst { bottom: 0; left: 0; width: 100%; position: relative; box-shadow: none; box-sizing: border-box; border-bottom: 1px solid var(--color3); padding: 10px; } .houderHome .tekst h1 {left: 0; top: 0; width: 100%; box-sizing: border-box; position: relative;} .pdfkeuzeholder {border-radius: 0; left: 0; margin: 0; max-width: 100%; padding: 20px 10px 10px; position: absolute; right: 0; top: 64px; width: auto;} .pdfkeuzeholder .pdfkeuze .inner .col1, .pdfkeuzeholder .pdfkeuze .inner .col2, .pdfkeuzeholder .pdfkeuze .inner .col3 { box-sizing: border-box; display: block !important; width: 100% !important; } .pdfkeuzeholder .pdfkeuze .inner .col2 {padding: 15px 0;} .productCarrousselHolder .jcarousel-clip {max-width: 445px;} .tijdlijn td { float: none !important; width: calc(100% - 25px) !important; margin-left: 25px; margin-bottom: 30px; padding: 0px !important; position: relative; text-align: left !important; } .tijdlijn:before {left: 5px;} .tijdlijn tr td:before {left: -20px; top: -5px;} .pageFooterKnoppenHolder .pageFooterKnoppen .seperator {display: none;} .pageFooterKnoppenHolder .pageFooterKnoppen a {text-decoration: none; color: inherit; display: block;} .copyright {position: relative; display: block;} .pageFooterKnoppen {text-align: center;} .pageFooterKnoppen .socialFooter a, .pageFooterKnoppen .socialFooter img {text-decoration: none; float: none; display: inline-block;} .socialFooter {float: none !important; margin-top: 10px;} .pageFooterKnoppenHolder .pageFooterKnoppen a {margin: 0 8px;} .vak.overRotex {background-attachment: unset; background-size: unset;} .vak.overRotex .inhoud {padding: 65px 20px;} .vak .inhoud {padding: 10px;} .fixedboven {top: 50px;} .Taalkeuze_vlaggen {margin: 0;} .accountHouder2 {padding: 0;} .liquid-slide-sjabloon .inhoud h2 + h5 {margin-bottom: 0;} #art-main {padding-top: 40px;} .shopTegel .artikel .bestelknop a.wButBestel {padding: 0 6px;} .shopCategorieHolder .categorie .titel h2 {font-size: 18px;} .shopCategorieHolder .categorie .titelHouder {height: unset; top: 20px;} .resMenubalkinhoud a.logoRes {position: absolute; padding: 0 5px; top: -4px; width: 75px; left: 0px; margin: 0;} a.logoRes img {width: 100%; height: auto; box-shadow: 0 0px 12px 2px rgba(0,0,0,.2);} .heleSite {overflow-x: unset;} a.button.pill.pdf {display: none;} .shopCategorieHolder .categorie .inner:hover a {background: rgba(0,0,0,.5);} .shopCategorieHolder .categorie .inner:hover .afbeeldingHouder {transform: scale(1);} .accountHouder {background-color: #5a4f43;} .artikel .bestellen .bestelknop input {width: 60px;} .resMenubalk, .resCategorieen, .kenmerkMobielHouder {display: block;} .mijnAccountOrderHolder .item {flex-direction: column;} .mijnAccountOrderHolder .item .artikelen {display: flex; width: auto; margin: -5px 0 0 0; padding: 0px 10px 10px;} .mijnAccountOrderHolder .item .pijl {display: none;} div[class*="grid"] {grid-template-columns: 1fr;} } @media screen and (max-width: 560px) { .productCarrousselHolder .jcarousel-clip {max-width: 215px;} .sorteerKnoppen a {padding: 5px;} } /* hand */ /* presentatieknoppen: de standaard zet kleur en pointer-events met !important */ .presentatieWijze a {color: #666 !important;} .presentatieWijze a.actief, .presentatieWijze a:hover {color: var(--color1) !important;} .presentatieWijze a .titel {pointer-events: auto;} /* formulieren */ input.formulier_text {width: 100%;} input:focus, textarea:focus, select:focus {color: #666 !important;} .zoeken .veld #zoekWoordID:focus {color: var(--color4) !important;} /* mandje */ .winkelwagenHouder .winkelwagen .inhoud.totaal .winkelmandjeKnoppen a.winkelmandjeKnopOfferte {margin-right: 0;} @media screen and (max-width: 900px) { .shopCompact .artikel .bestellen .bestelknop > input {width: 60px !important;} } /* home: stond als style in de extra code van de homepagina; :where houdt de specificiteit gelijk */ :where(body:has(.vak.overRotex)) .art-contentLayout, :where(body:has(.vak.overRotex)) .art-Sheet {max-width: 100% !important; padding: 0;} :where(body:has(.vak.overRotex)) .art-Post {margin: 0; padding: 0 !important;} :where(body:has(.vak.overRotex)) #art-main {padding-top: 0 !important;} :where(body:has(.vak.overRotex)) :is(h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover) {font-size: 34px;} /* wachtwoord aanpassen: stond als style in tekstblok 1520 */ :where(#art-main:has(.nieuwWachtwoordHolder)) :is(.art-contentLayout, .art-Sheet) {padding: 30px 20px !important; max-width: 1200px !important;} /* standaard bloemenbalk uit maatwerk.js: maten stonden inline op de afbeelding */ .HeaderHolder .headerStandaard {height: 163px !important; width: 1500px !important;} /* categorietegels: de standaard zet de afbeelding als img, de fork als achtergrond */ .shopCategorieHolder .categorie .afbeeldingHouder img {width: 100% !important; height: 100% !important; object-fit: cover; object-position: left top;} .shopCategorieHolder .categorie .titel {position: absolute; top: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 260px; pointer-events: none;} /* sitemap: lege menu-items niet tonen */ .sitemap1 li:has(> a:empty) {display: none;} @media screen and (max-width: 760px) { .shopCategorieHolder .categorie .titel {top: 20px; height: auto;} } /* offerte: opmaak van de standaard offertetemplates gelijk aan de oude */ .stap:has(.volgendeStap[onclick*="offerte("]) > .stappenbalk, .stap.twee .resBestaandeklant {display: none;} .stap .kassainkollommen > .rechts > .blok:first-child {order: -1; background: none; padding: 0;} .stap.een .kassainkollommen {flex-direction: column;} .stap.een .kassainkollommen > .rechts {display: contents;} .stap.een .kassainkollommen > .rechts .sticky {position: static; margin: 0;} .stap.een .kassainkollommen > .rechts .sticky .blok {display: flow-root; background: none; padding: 0; margin: 0;} .stap.een .knoppenHouder {margin: 20px 0 0;} .stap.twee .kassainkollommen {display: grid; grid-template-columns: 48% 48%; justify-content: space-between; align-items: start;} .stap.twee .kassainkollommen > .links, .stap.twee .kassainkollommen > .rechts {display: contents;} .stap.twee .kassainkollommen > .links > div {width: auto; margin: 0;} .stap.twee .kassainkollommen > .links .blokholder {display: flow-root;} .stap.twee .kassainkollommen > .rechts > .blok:first-child, .stap.twee .bestaandeKlant {grid-column: 1 / -1;} .stap.twee .kassainkollommen > .rechts > .sticky {grid-column: 2; position: static; margin: 0;} .stap.twee .kassainkollommen > .rechts .sticky .blok {background: none; padding: 0; margin: 0;} .stap.twee .kassainkollommen > .rechts .totalen {float: none; width: auto;} .stap.twee .bestaandeKlant {order: -1; display: grid; grid-template-columns: 47% 47%; column-gap: 6%; row-gap: 10px; align-items: start; background: #f5f5f5; padding: 15px 15px 29px; margin: 0 0 10px;} .stap.twee .bestaandeKlant h2 {grid-column: 1 / -1; font-size: 24px; font-weight: 400; line-height: 27.3px; margin: 0 0 45px;} .stap.twee .bestaandeKlant .inloggen, .stap.twee .bestaandeKlant .inloggen .knoppen {display: contents;} .stap.twee .bestaandeKlant .inloggen input {grid-column: 1; margin: 0;} .stap.twee .bestaandeKlant .inloggen .button {grid-column: 1; justify-self: start;} .stap.twee .bestaandeKlant .uitleg {grid-column: 2; grid-row: 2 / span 2;} .stap.twee .bestaandeKlant .uitleg:empty {display: none;} .stap.twee .bestaandeKlant .kwijt {grid-column: 2; grid-row: 4; justify-self: start; margin: 0; padding-top: 1px;} .stap.twee .bestaandeKlant .uitleg:empty + .inloggen .kwijt {grid-row: 2;} @media screen and (max-width: 1000px) { .stap.twee .bestaandeKlant {padding: 40px 30px;} } @media screen and (max-width: 760px) { .stap.twee .kassainkollommen {grid-template-columns: 100%;} .stap.twee .kassainkollommen > .links .blokholder {display: block; padding: 0; margin-bottom: 10px;} .stap.twee .kassainkollommen > .rechts > .sticky {grid-column: 1; margin-top: 10px;} .stap.twee .bestaandeKlant {grid-template-columns: 100%; margin: 10px 0 0;} .stap.twee .bestaandeKlant .uitleg {grid-column: 1; grid-row: 5;} .stap.twee .bestaandeKlant .kwijt, .stap.twee .bestaandeKlant .uitleg:empty + .inloggen .kwijt {grid-column: 1; grid-row: 6;} } /* einde offerte */ /* winkelmand */ .kassaArtikelen .artikel {line-height: inherit;} .kassaArtikelen .artikel td {padding: 10px 0;} .kassaArtikelen .artikel td.aantallen, .kassaArtikelen .artikel td.verwijderKnop {padding: 10px;} .kassaArtikelen .artikel td.regelStuk, .kassaArtikelen .artikel td.aantallen, .kassaArtikelen .artikel td.regelTotaal {vertical-align: middle;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder .verhouding {display: none;} .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder .afbeeldingHouder img {position: static; display: inline; max-height: none;} .stap .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder {width: 100px; padding-right: 20px;} .winkelwagen .kassaArtikelen .artikel .kassaArtikelAfbeeldingHolder {width: 50px; padding-right: 10px;} .kassaArtikelen .artikel .tekst a.kassaArtikelTitel {font-weight: 400;} .kassaArtikelen .artikel .artikelnr > .titel {display: inline; padding-right: 0;} .kassaArtikelen .artikel .relatieBtwPrijs {display: none;} .kassaArtikelen .artikel .aantalMinPlus .min, .kassaArtikelen .artikel .aantalMinPlus .plus {display: none;} .kassaArtikelen .artikel .aantalMinPlus {display: block; max-width: none; border: 0; background: none; margin: 0;} .kassaArtikelen .artikel .aantalMinPlus input {display: inline-block; padding: 8px 10px; border: 1px solid #d6d6d6; line-height: 1.5em; color: #666; background: #fff;} .winkelwagen .kassaArtikelen .artikel .verwijderKnop:empty {display: table-cell;} .winkelwagen .kassaArtikelen .artikel .aantalMinPlus input {width: auto; max-width: 35px; padding: 0; border: 0; color: inherit; background: none;} .winkelwagenHouder .kassaArtikelen .prijzen {color: inherit;} /* einde winkelmand */ /* kassa: de standaard kassatemplates zetten melding en totalen in een smalle rechterkolom */ .stap:is(.drie, .vier) .kassainkollommen {flex-direction: column;} .stap:is(.drie, .vier) .kassainkollommen > .rechts, .stap:is(.drie, .vier) .kassainkollommen > .rechts > .sticky {display: contents;} .stap:is(.drie, .vier) .kassainkollommen > .rechts .blok {background: none; padding: 0; margin: 0;} .stap:is(.drie, .vier) .kassainkollommen > .rechts .blok:not(:has(.totalen)) {order: -1;} .stap:is(.drie, .vier) .kassainkollommen > .rechts .blok:has(.totalen) {display: flow-root;} .stap.drie .kassainkollommen > .links {justify-content: space-between; margin: 0;} .stap.drie .kassainkollommen > .links > div {width: 48%; margin: 0;} .stap.drie .kassainkollommen > .links .blokholder {float: none; width: auto;} .stap.twee .kassainkollommen > .rechts > .sticky {display: contents;} .stap.twee .kassainkollommen > .rechts > .sticky > .blok {grid-column: 2;} .stap.twee .kassainkollommen > .rechts > .sticky > .blok:not(:has(.totalen)) {grid-column: 1 / -1; order: -1;} .stap.twee #stap2_factuuruitklap {float: none; width: auto;} .stap.een:not(:has(.volgendeStap[onclick*="offerte("])) .kassainkollommen > .rechts > .blok:first-child {margin-bottom: 0;} .stap.drie .totalenTabel :is(tr.totaalVerzendkosten, tr.totaalBetalingskosten) {display: none;} .stap.drie .regel.lever .inhoud {display: flex;} .stap .kassaArtikelen th {box-sizing: border-box;} .stap.een .kassaArtikelen th.regelStuk {width: 126px;} .stap.een .kassaArtikelen th.aantallen {width: 129px;} .stap.een .kassaArtikelen th.regelTotaal {width: 120px;} .stap.vier .kassaArtikelen th.regelStuk {width: 137px;} .stap.vier .kassaArtikelen th.aantallen {width: 123px;} .stap.vier .kassaArtikelen th.regelTotaal {width: 109px;} .stap.vier .kassaArtikelen tr.artikel td.regelTotaal {padding-right: 0;} .kassaArtikelen .artikel .artikelAanvullendeOmschrijving {display: none;} /* verwijderkruisje per regel onder het aantal: absoluut op de regel viel het over de regelvolgorde, en iPad-Safari zette alle kruisjes op een plek */ .stap .kassaArtikelen tr.artikel .verwijderen {display: block; margin-top: 8px; font-size: 18px; line-height: 1;} @media screen and (min-width: 761px) and (max-width: 1250px) { .kassaArtikelen th.regelStuk, .kassaArtikelen .artikel td.regelStuk {display: table-cell;} } @media screen and (max-width: 760px) { .stap.twee .kassainkollommen > .rechts > .sticky > .blok {grid-column: 1;} .stap.twee .kassainkollommen > .rechts > .sticky > .blok:not(:has(.totalen)) {grid-column: 1 / -1;} } @media screen and (max-width: 1000px) { #kassa > .stappenbalk {margin-bottom: 30px;} #kassa.stap.vier .totalen {width: 100%; float: none; margin: 0 0 10px; padding: 0;} } /* einde kassa */ /* mijn account orders: in een smalle lijst blijft elke order op een regel, zoals de standaard, en schuift de lijst horizontaal */ @container orderlijst (max-width: 960px) { .mijnOrdersLijst {overflow-x: auto; overscroll-behavior-x: contain;} .mijnOrdersTabel {width: max-content; min-width: 100%; grid-template-columns: repeat(9, auto) 1fr auto;} .mijnOrdersKopKnoppen {display: block;} .mijnOrdersCelKnoppen {grid-column: 10; padding-top: 10px; text-align: right;} .mijnOrdersCelKnoppen .mijnOrdersKnoppen {flex-wrap: nowrap; justify-content: flex-end;} .mijnOrdersUitklapHouder {flex-wrap: wrap;} .mijnOrdersUitklapHouder > .mijnOrdersUitklapPaneel {position: static; width: 100%;} .mijnOrdersUitklapInhoud {width: auto; margin-bottom: 4px;} } /* schuifhint uit maatwerk.js: zolang de lijst verder naar rechts kan, rechts een vervaging met een pijl */ .mijnOrdersLijstHouder {position: relative;} .mijnOrdersSchuifHint {display: none;} .mijnOrdersKanSchuiven .mijnOrdersSchuifHint {display: flex; align-items: center; justify-content: flex-end; position: absolute; top: 1px; right: 1px; bottom: 17px; width: 90px; padding-right: 12px; box-sizing: border-box; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 65%); border-radius: 0 5px 5px 0; text-decoration: none; cursor: pointer;} .mijnOrdersSchuifHint i {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color1); color: #fff; font-size: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);}