@charset "utf-8";


article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main {display: block;}
figure{margin:40px 0 20px;}
html, body {font-size: 18px;line-height:36px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;font-family:"Montserrat regular", tahoma;margin:0;color:#222;height:100%;}
* {box-sizing:border-box; -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -webkit-overflow-scrolling: touch;}
   *:after, *:before { font-family: 'Font Awesome 6 Pro';font-weight:300;line-height: 100%;position: relative;font-size:22px;display:inline-block;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;box-sizing:border-box;}
   *:hover {-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
   :focus {outline: 0;}
   a {color:#d16491;}
p {margin:0 0 20px;line-height: 1.25rem;}
h1 {color: #d16491;position:relative;font-family: 'CormorantGaramond-SemiBold';text-shadow: 2px 2px 5px #d36b97d1;font-size: 3rem;padding: 0 0 60px;text-align: center;}
h1:before {content: ''; background: #ccc;height:1px;display: block; margin: 15px auto;position:absolute;bottom:0;width: 100%;left: 0; right: 0;}
h1:after {  content: '';    background: url(/images/ag_sieraden_sensatie_roze.webp) no-repeat #fff center center / auto 30px;    height: 30px;    display: block;    margin: 15px auto;    position: absolute;    bottom: -15px;    width: 75px;    left: 0;    right: 0;grayscale(0.8)}

.alert-wrapper {text-align:center;}
.visually-hidden {display:none;}
h2 {margin: 0 0 10px 0;}
h3 {margin:0 0 10px;font-size: 1rem;}
h4 {margin:0 0 10px;}
h6 {font-size:1.25rem;font-weight: normal;margin:0 0 20px;position:relative;}
.c2a {padding: 10px;  background: #d16491;  border-radius: 5px;  color: #fff;  cursor: pointer;  margin: 10px 0 0;  font-family: "Montserrat regular", tahoma;  text-decoration: none;}
.c2a:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
.mobileonly {display:none;}
body.fixed { overflow: hidden;}
ul.nobullets {list-style:none;padding:0;}
nav {background:pink;position:relative;z-index:100;    position: fixed;  width: 100%;}
nav:before {background:pink;height:36px;position: fixed; top:0;left:0;width:100%;content:'';z-index:100;}
div.mainmenu {display:inline-block; z-index: 1000;  position: relative;}
div.mainmenu ul {position:relative;margin: 0;padding:0 0 0 125px;}
div.mainmenu ul li {display:inline-block;vertical-align:top;}
div.mainmenu ul li.item-101 {position:absolute;z-index: 100;background: pink; padding: 10px; border-radius: 0 0 10px 10px;left:0;}
div.mainmenu ul li a {color:#222;text-decoration:none;display:block;padding:0 10px;font-size:.9rem;position:relative;text-align: left;}

div.mainmenu img {max-height:65px;width:auto; display: block;}
div.mainmenu ul.mod-menu__sub {display:none;position:absolute;z-index:100;background:#d16491;margin:0;height:auto;transition: none;padding:0;width: max-content;}
div.mainmenu ul.mod-menu__sub li {display:block;margin: 0;border-bottom: 1px solid rgba(255,255,255,0.2);}
div.mainmenu ul.mod-menu__sub li a {color:#fff;padding:20px;}
div.mainmenu ul.mod-menu__sub li a:after {content:''!important;}
div.mainmenu ul li.parent a:after {content: '\f0d7';position:relative;top: 3px; left: 5px;}
div.mainmenu ul.mod-menu__sub li a:hover {background:#5e9f82;}

form.mod-login, form.mod-login-logout {position: fixed;z-index: 11; background: rgba(255, 255, 255, 0.95); left: 0; right: 0; margin: 0 auto; max-width: 600px; padding: 40px; top: -500px; border-radius: 0 0 10px 10px; transition: top 1s ease-out;}
form.mod-login.active, form.mod-login-logout.active  {top:36px;}
#footer form.mod-login a {font-size: .8rem;text-decoration: none;color:#d16491}
span.close.login:before {content: '\f057';color: #222;  cursor: pointer;    position: absolute;  right: 20px;}
label.form-check-label {color:#222;}
ul.mod-login__options li {display:inline-block;vertical-align: top;margin:0 20px 0 0;}
input[type="text"], input[name="password"], input[name="password2"], textarea[name="comment"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], textarea#jform_comment, input[type="number"], input[type="datetime-local"], input[type="password"] {padding: 10px 20px;  width: 100%;  border: 2px solid #d5cdcd;  border-radius: 3px;  font-size: .9rem;  line-height: 100%;  font-family: "Montserrat regular", tahoma;  color: #000;margin:0 0 20px;vertical-align: top;}
textarea#jform_comment {height:100px;}
input[name="password"], input[name="password2"], body.reset input[type="password"], div.password-change input  {width:calc(100% - 45px);}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid red!important;  background-color: #ffe6e6!important;}
button.input-password-toggle {border:0;width: 40px;  background: #d5cdcd;  height: 44px;  border-radius: 3px;cursor:pointer;position:relative;}
button.input-password-toggle:before {content: '\f06e';color: rgba(255,255,255,1);}
button.input-password-toggle.active:before {content: '\f2a8';}
button[type="submit"], button[type="button"], button[type="reset"], a.button {padding: 10px 20px;   border: 2px solid #d5cdcd;background:#d16491;color:#fff;border: 0;  border-radius: 3px;cursor:pointer;font-family: "Montserrat regular", tahoma;text-decoration: none; font-size:.8rem;}
button[type="submit"]:hover, button[type="button"]:hover {background:#5e9f82;}
button.input-password-toggle {padding:0;}
span.useraccount {position:relative;z-index:200;font-size: .9rem;color:#fff;cursor:pointer;  float: right; margin: 0 40px 0 0;}
span.useraccount::before {content: '\f007';margin:0 10px 0 0;font-size:16px;}
ul.mod-login__options {padding:0;margin:20px 0 0 0;}
ul.mod-login__options li a, .com-users-login__options a {font-size:.8rem;text-decoration:none;}
.com-users-login__options a {display:inline-block;margin:20px 20px 0 0;}

a.email:before {content: '\f0e0';margin:0 10px 0 0;font-size:16px;}
a.telefoon:before {content: '\f095';margin:0 10px 0 0;font-size:16px;}
.openingstijden:before {content: '\f017';margin:0 10px 0 0;font-size:16px;}
.adres:before {content: '\f3c5';margin:0 10px 0 0;font-size:16px;}
.diensten:before {content: '\f7d9';margin:0 10px 0 0;font-size:16px;}
a.afspraak:before {content: '\f073';margin:0 10px 0 0;font-size:16px;}
header {position:relative;height: calc(45vh + 36px);}
.flex-viewport, ul.slides, ul.slides li {height:100%;margin:0;padding:0;z-index:10;position:relative;}
.slides_container {position:  absolute;width:100%;overflow: hidden;height:100%;  background: #d16491;z-index:7}
ul.slides > li > span {content:'';width:100%;height:100%;position:absolute;top:0;left:0;right:0;margin:auto;}
ul.slides li .contentcontainer {max-width: 1280px;color: #fff;margin: 0 auto;  position: absolute;  left: 0;  right: 0;  top: 50%;  transform: translateY(-50%);display: grid  ;      grid-template-columns: 50% 50%;      justify-items: center;      align-items: center;padding: 0 60px;}
ul.slides li .contentcontainer img {max-width:800px;height:auto;width: 100%;    max-height: 150px;}
ul.slides li .textcontainer {overflow:hidden;padding: 150px 100px 0;display:table-cell;vertical-align:top;}
ul.slides li .heading {text-shadow: 2px 2px rgba(0,0,0,0.5);font-size:2.5rem;line-height: 100%;margin: 0 0 10px;font-family:"Myriad W01 Sm Cnd";}
ul.slides li .text {max-width:1000px;font-size:1.5rem;line-height:28px;margin:0 0 60px;text-shadow: 2px 2px rgba(0,0,0,0.5);}
ul.slides li .textcontainer a {display: inline-block;text-decoration:none;color:#fff;border:1px solid #fff;padding:10px 20px;background:rgba(0,0,0,0.4);}
ul.slides li .textcontainer a:hover {background:rgba(15, 117, 188, 0.5);}
.flex-direction-nav li {font-size: 0;position:absolute;top:45%;left:5%;z-index:10;}
.flex-direction-nav li.flex-nav-next {right:5%;left: auto;}
.flex-direction-nav li a:before {content: '\f0d9';color: rgba(255,255,255,1);font-size:40px;}
.flex-direction-nav li.flex-nav-next a:before {content: '\f0da';}
.flex-direction-nav li a.flex-disabled {display:none;}
li.blur span.bg {filter:blur(3px);}

main#content, div.content-container, div.innernav {max-width:1280px;margin:0 auto;padding:60px;}
div.innernav {padding:0;}

ul.catlist {list-style:none;padding:0;display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; margin: 0;}
ul.catlist li {padding-top: 75%;position: relative;}
ul.catlist li a {position:absolute;top:0;left:0;width:100%;height:100%;text-decoration:none;}
ul.catlist li a div.content {width:100%;background: rgba(209, 100, 145, 0.9);   padding: 20px;  color: #fff;line-height: 1.5rem;}
ul.catlist li:nth-of-type(2n) a div.content {}
ul.catlist li a div.content span.title {color:#fff;font-size:2rem;margin:0 0 20px;}
ul.catlist li img {width:100%;height:auto;}
ul.catlist span.desc {display:block;}

ul.list.products {list-style:none;padding:0;display: grid;grid-template-columns: repeat(4, 1fr);  grid-gap: 40px;}
ul.list.products li {background: rgb(255 192 203 / 25%);  padding: 20px;    border-radius: 10px;position:relative;display: flex; flex-direction: column;}
ul.list.products li form {margin-top: auto;}
ul.list.products li:hover {box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
ul.list.products li a {text-decoration: none;color:#222}
ul.list.products li span.logo {position: absolute;  top: 25px;  right: 25px;  width: 40px;  height: 40px;  background: #e4ebe4;  border-radius: 100%;  padding: 5px;}
ul.list.products li span.logo img {width:100%;height:auto;display: block;}
ul.list.products li span.title {line-height: 100%;color: #d16491;font-family: 'CormorantGaramond-SemiBold';font-size: 1.25rem;display:block;margin:0 0 10px;}
ul.list.products li  div.imagecontainer {margin:0 0 10px;}
button.action {display: block;  width: 100%;  border: 0;  padding: 10px;  background: #d16491;  border-radius: 5px;  color: #fff;  cursor: pointer;  margin: 10px 0 0;  font-family: "Montserrat regular", tahoma;}
button.action:hover {background:#5e9f82;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
button.action.add2cart span, button.action.nostock span {line-height:22px;display:block;}
button.action.add2cart span:before {content: '\f217';vertical-align:top;margin-right:5px;}
button.action.nostock {background:#aaa;cursor:default;} 
button.action.nostock:hover {    box-shadow: none;}
button.action.nostock span:before {content: '\e0dd';vertical-align:top;margin-right:5px;}

span.sdesc {display:block;font-size: .9rem;line-height:1.5rem;}
div.imagecontainer img {width:100%;height:auto;display:block; border-radius: 5px;}
div.imagecontainer {position:relative}
div.logo {position: absolute;  width: 70px; right: 10px; top: 10px;background: rgba(255,255,255,0.9);  border-radius: 10px;  padding: 10px;}
div.logo img {width:100%;height:auto;}
div.filter-inner label {margin:0 30px 0 0;}
div.item-container.product div.content {display: grid;grid-template-columns: repeat(2, 1fr);  grid-gap: 40px;}

div.data-container label {width:100px;display:inline-block;vertical-align: top;;}
div.gallery {overflow:hidden}
div.gallery div.inner {  --qslides: 4;}
div.gallery div.inner {display: grid;grid-template-columns: repeat(var(--qslides), 1fr);grid-gap: 20px;}
div.gallery figure  {position: relative;margin: 0 20px 0 0; border-radius: 5px; image-rendering: pixelated;width: 100%;padding-top:75%; cursor:pointer;}
div.gallery figure video {position:absolute;bottom:0;height:100%;left:0;width:100%;}
form#add-to-cart-form {background: #eee;    padding: 20px;    border-radius: 10px;    border: 2px solid #ddd;}
form#add-to-cart-form button {width: calc(100% - 167px); display:inline-block;vertical-align: top;margin:0;}
form#add-to-cart-form label input { width: 60px;  margin: 0 20px;  height: 42px;  text-align: center;  border: 2px solid #ddd;  border-radius: 5px;padding: initial;}
form#add-to-cart-form label {width:auto;}


div.ajaxcart {display:inline-block;float:right;font-size: .9rem;color: #fff;}
div.ajaxcart  ul.cart-items {position:absolute;background: #5e9f82;   list-style: none;  padding: 20px;  top: 36px;  margin: 0;border-radius: 0 0 5px 5px;}
div#cartcontent {position:absolute;background: #5e9f82;padding: 20px;  top: -1000px;width: 100%; left: 0;transition: top .5s ease-out;z-index: 10;cursor: default; }
div#cartcontent.active {top: 36px;}
span#totalproducts {margin:0 0 0 5px;z-index: 100;  position: relative;display: block;}
span#totalproducts:before {content: '\f07a';font-size: .9rem;margin: 0 5px 0 0;}
div.ajaxcart.active {cursor:pointer;}
div.cartinner {max-width:1280px;margin:0 auto;}
table.cart {width:100%;max-width:800px;color:#fff;  border-collapse: collapse;float: right;}
table.cart .name {text-align:left;}
table.cart .quantity {text-align:center;width:100px;}
table.cart .total {text-align:right;width:100px;}
table.cart button {width:auto;}
table.cart .actie {text-align:left;width:75px;}
table.cart tr.productline td {border-bottom:1px solid #fff; padding: 0 0 20px;vertical-align: top;}

button.action.delete {background:#ccc}
button.action.delete:before {content: '\e2b4';font-size: .9rem;margin:0;}
table.cart tr.summary {position:relative;margin-top: 10px; display: block;}
table.cart a.c2a.afrekenen {position: absolute;padding: 10px 30px;}
a.c2a.afrekenen:before {content: '\f788';font-size: 1rem;margin:0 10px 0 0;}
th.verzendtext {font-size:.7rem;  width: 250px;}
div.cartimage img {width: 75px;  height: auto;  vertical-align: middle;  margin: 10px 20px 10px 0;  border: 3px solid #fff;  border-radius: 5px;}


div.attributes {margin:0 0 20px;}
div.usedcolors ul {list-style: none;padding:0;margin:0;}
div.usedcolors ul li {display: inline-block;margin:0 10px 0 0;}
div.usedcolors ul li span.hex {width:30px;height:30px;display:inline-block;vertical-align: top;margin:0 10px 0 0;border-radius:5px;border:1px solid #eee;}
div.desc ul {padding:0 0 0 15px;}
div#filters {text-align:right;}
span.filter-icon:before {content: '\f3f1'; background: #eee;  padding: 10px;  border-radius: 5px;  border: solid 1px #ddd;  cursor: pointer;}
span.filter-icon.active:before {}
div.filter-inner {margin:5px 0 0;display:none;text-align: left;  background: #eee;  padding: 20px;  border-radius: 5px 0 5px 5px;  border: 1px solid #ddd;}

label:has(input[data-filter="data-kleur"]:checked) {  border: 2px solid red;}

body.checkout header {background:pink;height: calc(30vh + 36px);}
div.grid2 {display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 20px;}
body.checkout div.error div.inner {background: #f70a6c;  margin: 0 0 20px;  padding: 10px 20px;  color: #fff;  border-radius: 5px;}
table.checkout {width:100%;}
table.checkout tr.productrow:nth-child(odd) {background-color: rgb(94 159 130 / 10%);}
table.checkout tr.productrow td {padding:0 10px;}
table.checkout tr th:last-child { padding:0 10px;}
table.checkout .name {text-align:left}
table.checkout .quantity {text-align:center;width:100px;}
table.checkout .prijs {text-align:right;}
table.checkout .total {text-align:right;}
body.checkout fieldset {margin:0 0 20px;}
.popup {font-size:.8rem}
button#placeorder {display:block;padding: 20px 40px;text-transform: uppercase;    font-family: "Montserrat regular", tahoma;margin:30px;}
button#placeorder:hover {background:#5e9f82;}
ul#ordertype {  list-style: none;  padding: 0;  margin: 0 0 30px;  width: 100%;  background: #fff;  border: 1px solid #ccc;  border-radius: 5px;  position: relative;  cursor: pointer;}
ul#ordertype .selected {  padding: 10px;  background: #f8f8f8;  border-bottom: 1px solid #ccc;}
ul#ordertype li:not(.selected) {  display: none;}
ul#ordertype.active li {  display: block;}
ul#ordertype li {  padding: 10px;  border-bottom: 1px solid #eee;  transition: background 0.3s ease;}
ul#ordertype li:last-child {  border-bottom: none;}
ul#ordertype li:hover {  background: #f4f4f4;}

ul.shipmethods, ul.paymentmethods {list-style:none;padding:0;margin:0; display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 40px;}
ul.paymentmethods {grid-template-columns: repeat(3, 1fr);}
ul.shipmethods li span.prijs {float:right;}
ul.shipmethods li label, ul.paymentmethods li label {background: #eee;  overflow: hidden;  display: block;  padding: 15px;  border-radius: 10px;}
ul.shipmethods li:has(input[type="radio"]:checked) label, ul.paymentmethods li:has(input[type="radio"]:checked) label {  background-color: pink; }
ul.shipmethods li label img.logo, ul.paymentmethods li label img {height: 40px;  width: auto;  vertical-align: middle;}
ul.shipmethods li.afhalen label:before {content:'\f54f';}
select.countries {  padding: 10px 20px;  width: 100%;  border: 2px solid #d5cdcd;  border-radius: 3px;  font-size: .9rem;  line-height: 20px;  font-family: "Montserrat regular", tahoma;  color: #000;  margin: 0 0 20px;  vertical-align: top;  appearance: none;   -webkit-appearance: none;  -moz-appearance: none; }
label.landen { position: relative; width: 100%;line-height: 40px;     display: block;}
label.landen::after {  content: '▼'; font-size: .8rem; color: #000; position: absolute; right: 10px;  top: 15px;  pointer-events: none; }

ul.adressenlijst {display: grid; grid-template-columns: repeat(3, 1fr);grid-gap: 40px; list-style: none;padding: 0;}
ul.adressenlijst li {background: #eee;overflow: hidden;display: block;padding: 15px;border-radius: 10px;}
ul.adressenlijst li small {display:block;}
ul.adressenlijst li label {display:block;height: 100%;}
ul.adressenlijst li label span {display: inline-block;    vertical-align: top;}
ul.adressenlijst li input {margin:0 20px 0 0;}
ul.adressenlijst li:has(input[type="radio"]:checked)  {  background-color: pink; }

div.order label {width: 250px;font-weight:bold; display: inline-block;  vertical-align: top;}
div.order div.addresses, div.orderinfo { display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 40px;}
div.order div.addresses > div {padding:20px;background: lch(60.51 28.21 162.79 / 0.05);  border: 2px solid #eee;  border-radius: 10px;  margin: 0 0 30px;}
div.orderinfo {padding: 20px;  background: lch(60.51 28.21 162.79 / 0.05);  border: 2px solid #eee;  border-radius: 10px;margin:0 0 30px;}
div.order div.addresses > div > div label {font-weight:normal;}
table.order.totals {width:100%;}
table.order.totals tfoot th {text-align:right;padding:0 20px 0 0}
table.order.totals tfoot td {text-align:right;}
table.order.totals tbody th {text-align:left;}
table.order.totals thead th {text-align:left;}
table.order.totals .total {text-align:right;}
div.orderitems {margin:0 0 30px;padding: 20px;  background: rgb(255 192 203 / 10%);  border: 2px solid #eee;  border-radius: 10px;margin:0 0 30px;}
div.orderitems img {width:75px;height:auto;vertical-align:middle;margin:0 20px 0 0;border: 3px solid pink; border-radius: 5px;}
table.order .btw * {font-size:.8rem;font-weight:normal;}
input[readonly], select:disabled {background:rgb(255 192 203 / 10%);cursor: no-drop;opacity:1;}

div.order-details-wrapper {  overflow-x: auto;  -webkit-overflow-scrolling: touch; }
div.order-details-wrapper ul {min-width:1160px;}
div.myorders ul{list-style: none;padding:0;}
div.myorders ul li { display: grid  ; grid-template-columns: 50px 150px 300px 1fr 180px 1fr;  grid-gap: 20px; text-align: left;}

button#save-account, button#cancel-account {display:none;margin:0 0 30px 0;}
button#cancel-account, button#address-cancel, button#address-cancel-new {margin-left:30px;}
button#edit-account {margin:0 0 30px;}
form#addressform {display:none;}
span.edit:before, span.delete:before {content: '\f044';    line-height: 30px;}
span.delete:before {content: '\e2ae';}
ul.addresses {list-style: none;padding:0;}
ul.addresses form {display:none;margin:20px;}
ul.addresses div.actions {float:right;}
ul.addresses div.actions span {background-color: #d16491;border-radius:5px;width:30px;height:30px;text-align:center;line-height:30px;vertical-align:middle;display:inline-block;color:#fff;cursor:pointer;margin:0 0 0 10px}
ul.addresses div.actions span:hover {background:#5e9f82}
ul.addresses li {padding:10px;}
ul.addresses li:nth-child(odd) {background: rgb(94 159 130 / 10%);}
ul.addresses li:nth-child(even) {background: rgb(94 159 130 / 5%);}
ul.addresses li div.line {display: grid; grid-template-columns: 50px calc(40% - 130px) calc(60% - 130px) 90px;  grid-gap: 40px;} 
h3.savedaddresses {margin-top:30px;}
body.reset fieldset, body.remind fieldset {border: 0;padding:0;}
button#add-address {float:right;}
div.password-change  {margin:0 0 40px;}
div.password-change fieldset {margin:0 0 20px;}
div.password-change fieldset:disabled input {background: rgb(255 192 203 / 10%);  cursor: no-drop;}
#password-save, #password-cancel {display:none;}
form.is-editing #password-edit {display:none;}
form.is-editing #password-save, form.is-editing #password-cancel {display:inline-block;}
form#my-account label {position:relative;}
label.insta:before, label.fb:before, label.phone:before, label.email:before {content: "\f16d";font-family: 'Font Awesome 6 Brands';position:absolute;left:10px;top: 12px;}
label.fb:before {content: "\f39e";} 
label.phone:before {content: "\f8d3";font-family: 'Font Awesome 6 Pro';top:10px;} 
label.email:before {content: "\f0e0";font-family: 'Font Awesome 6 Pro';top:5px;}
label.insta input, label.fb input,label.phone input,label.email input   {padding-left:40px;}

div.sharing div.heading { line-height: 100%;  text-align: center;}
div.sharing {background:pink;padding:40px;}
div.sharing div.heading {margin: 0 0 40px;}
div.sharing div.heading span {font-size: 26px;}
.social-share {  list-style: none;  padding: 0;  display: grid  ;      grid-template-columns: repeat(5, 1fr);      grid-gap: 40px;      max-width: 1280px;      margin: 0 auto;      align-items: center;}
.social-share li { justify-self: center;}
.social-share a {  display: inline-block;  font-size: 24px;  color: #333;  text-decoration: none;}
.sr-only {position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}
.fa-facebook:before { content: "\f39e";font-family: 'Font Awesome 6 Brands';}
.fa-instagram:before { content: "\f16d";font-family: 'Font Awesome 6 Brands';} 
.fa-twitter:before { content: "\e61b";font-family: 'Font Awesome 6 Brands';font-weight:400;} 
.fa-linkedin:before { content: "\f0e1";font-family: 'Font Awesome 6 Brands';font-weight:400;} 
.fa-pinterest:before { content: "\f231";font-family: 'Font Awesome 6 Brands';font-weight:400;} 
.fa-whatsapp:before { content: "\f232";font-family: 'Font Awesome 6 Brands';font-weight:400;} 
#jform_mobile {display:none;}


.loyalty-grid { display: grid;    grid-template-columns: 100px 1fr 2fr 120px;    gap: 0.5rem;    align-items: center;    margin-bottom: 2rem;    border-bottom: 2px solid #eee;    padding:20px;}
.loyalty-grid div.title {font-weight:bold;}
.loyalty-grid.header {    font-weight: bold;    background: #ffc0cb;    border-bottom: 1px solid #d16491;}
.loyalty-grid.row {    border-bottom: 1px solid #eee;   transition: background 0.2s;}
.loyalty-grid.inactive {    color: #aaa;    background: #f7f7f7;}
.loyalty-badge {    display: inline-block;    background: #5e9f82;    color: #fff;    border-radius: 12px;    padding: 2px 10px;    font-size: 0.95em;}
.loyalty-grid.inactive .loyalty-badge {    background: #ddd;    color: #888;}
.loyalty-points {        text-align: right; }
.status-indicator {    display: inline-block;    width: 10px;    height: 10px;    border-radius: 50%;    margin-right: 0;    vertical-align: middle;    background: #5e9f82;    border: 2px solid #5e9f82;    box-sizing: border-box;    transition: background 0.2s, border 0.2s, transform 0.22s cubic-bezier(.47,1.64,.41,.8), box-shadow 0.22s;}
.status-indicator.inactive {   background: #8b0f0f;    border-color: red;}
.status-indicator.active {    animation: pulse 1.3s infinite;}
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.3);}
    50% { transform: scale(1.20); box-shadow: 0 0 0 8px rgba(40, 167, 69, 0.05);}
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.3);}
}

.points-grid {    list-style: none;    margin: 0 0 1rem 0;    padding: 0;}
.points-grid.header,.points-grid.row {    display: grid;    grid-template-columns: 60px 100px 1.5fr 1fr 180px;    gap: 0.5rem;    align-items: center;    padding: 0 20px;}
.points-grid.header {    background: #f5f5f5;    font-weight: bold;    border-bottom: 2px solid #ddd;}
.points-grid.row {    border-bottom: 1px solid #eee;background:rgba(40, 167, 69, 0.3)}
.points-grid.row.points-negative {background:pink}
.points-grid.row.points-negative a {color:#222;}

fieldset.loyaltypoints {position: relative ;background: #ffc0cb26;}
fieldset.loyaltypoints label {display:block;}
span#points-discount { display:none;   margin: 0 0 0 30px;    width: 180px;    text-align: center;    background: #5e9f82;    color: #fff;    padding: 5px 10px;    border-radius: 5px;    position: absolute;    top: 10px;    right: 10px;transition: opacity 0.2s;}
input#points-slider {width:100%}
button#use-points-btn:disabled {background:gray;cursor:not-allowed;} 
input#slider-value {margin:0;}

#footer {background:#5e9f82;color:#fff;padding:40px;}
#footer a {color:#fff;text-decoration: none;}
#footer ul {list-style: none;padding:0;margin:0;}
#footer h6 {border-bottom: 1px solid #fff;padding: 0 0 30px;}
#footer h6:before {font-size:1.25rem;}
#footer div.grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10%;}
#contact {max-width:1280px;margin:0 auto;padding:40px;}
div.footerinner {display: grid;grid-template-columns: repeat(2, 1fr)}

div#slide2top {position: fixed;bottom: 2.5%;right: 2.5%;display: none;}
div#slide2top:before {content:'\f102';box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25);border-radius: 100%;background: #d16491;color: #fff;cursor:pointer;width:40px;text-align:center;height:40px;line-height:40px;}

div#lightboxed--cache { position: fixed; left: -99999999px; }
div#lightboxed--container { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgb(94 159 130 / 95%); z-index: 9001; }
div#lightboxed--stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
div#lightboxed--content { position: absolute; top: 0; left: 0; }
div#lightboxed--content .lightboxed--frame { position: absolute; top: 0; left: 0; }
div#lightboxed--content .lightboxed--frame img , div#lightboxed--content .lightboxed--frame iframe { position: absolute; top: 50%; left: 50%; max-width: 75%; max-height: 75%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: 0; border-radius: 20px;}
div#lightboxed--content .lightboxed--frame .lightboxed--caption { position: absolute; bottom: 0; right: 0; padding: 10px; background: #000; background: rgba(0,0,0,0.9); color: #fff!important; }
div#lightboxed--thumbs { display: none; position: absolute; bottom: 0; left: 50%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
div#lightboxed--thumbs .lightboxed--thumb { float: left; overflow: hidden; border-radius: 2px; cursor: pointer; }
div#lightboxed--thumbs .lightboxed--thumb .lightboxed--thumb_border { position: relative; width: 100%; height: 100%; background: #fff; background: rgba(255,255,255,0.4); transition: 500ms background;  }
div#lightboxed--thumbs .lightboxed--thumb.lightboxed--active .lightboxed--thumb_border { background: rgba(255,255,255,0.7); transition: 500ms background; }
div#lightboxed--thumbs .lightboxed--thumb img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
div#lightboxed--bttn_close { position: absolute; top: 10px; right: 10px; background: #d16491;width: 30px; height: 30px; border-radius: 100%; cursor: pointer; color: #fff;}
div#lightboxed--bttn_close:before {content:'\f00d';position: absolute;top: 50%;transform: translateY(-50%); right: 0; width: 30px; text-align: center;}
div#lightboxed--bttn_next { display: none; position: absolute; top: 50%; right: 10px; background: #d16491; width: 30px; height: 30px; border-radius: 100%; cursor: pointer; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff;}
div#lightboxed--bttn_prev { display: none; position: absolute; top: 50%; left: 10px; background: #d16491;width: 30px; height: 30px; border-radius: 100%; cursor: pointer; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff;}
div#lightboxed--bttn_next:before {content:'\f0da';transform: translateY(-50%);position: absolute; top: 50%;  width: 30px;text-align: center;font-weight: 600;}
div#lightboxed--bttn_prev:before {content:'\f0d9';transform: translateY(-50%);position: absolute; top: 50%;    width: 30px; text-align: center;font-weight: 600;}

.confirmation-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 15px rgba(0,0,0,.3);z-index:9999;text-align:center}.cancel-btn,.confirm-btn{padding:8px 15px;cursor:pointer}.confirmation-content p{margin-bottom:15px}.confirm-btn{background-color:#d16491;color:#fff;border:none;border-radius:4px}.cancel-btn{background-color:#ddd;color:#333;border:none;border-radius:4px;margin-left:10px}.confirm-btn:hover{background-color:#d16491}.cancel-btn:hover{background-color:#bbb}

div#system-message-container.add2cart {position: fixed;top: 0; left: 0; width: 100%; z-index: 100;}
div.alert-success {background: rgb(94 159 130 / 95%);}
div.alert-success div.inner {max-width:1280px;margin:0 auto;padding:40px;color: #fff;text-align:center;}
div#modal{position: fixed;  top: 0;  left: 0;  background: rgb(94 159 130 / 95%); z-index: 1005;  width: 100%;  height: 100%;display:none;}
div#modal span.close:before {content: '\f057';    position: fixed;  right: 20px;  top: 20px;  width: 40px;  height: 40px;  display: block;  color: #fff;  cursor: pointer;}
div.inner-modal{background: #fff;  position: fixed;  top: 50%;  transform: translateY(-50%);  width: 75%;  max-width: 800px;  margin: 0 auto;  padding: 30px;  left: 0;  right: 0;  border-radius: 10px;    max-height: 45%;overflow-Y: auto;}


div.randomproducts {padding:0 20px;margin:0 0 20px;}
div.randomproducts form {margin-top: auto;}
div.randomproducts div.heading {    text-align: center;  margin: 0 0 40px;  color: #d16491;  text-shadow: 2px 2px 5px #d36b97d1;  font-size: 2rem;}
.product-card {  display: flex;  flex-direction: column;  justify-content: flex-start;  padding: 10px;  border: 1px solid #ddd;  border-radius: 6px;  background: #f9f9f9;  text-align: center;height:100%;}
.product-card h4 {line-height:100%;color:#d16491;font-size:.9rem;}
.product-card p {margin:0;font-size:.9rem;}
.product-card img {margin:0 0 20px;}
.product-card div.logo {padding:5px;width:35px;right: 20px; top: 20px;}
.product-card div.logo img {margin:0px;}
.product-card a {text-decoration:none;color:#222;}
.flexslider { position: relative; margin: 0 auto; background: #fff; border: none; box-shadow: none; overflow: hidden; }
.flexslider .slides { display: flex; transition: transform 0.5s ease; }
.flexslider .slides > li { display: block; height: 100%; box-sizing: border-box; }
.flexslider .slides img { width: 100%; display: block; height: auto; }
.flex-direction-nav a { text-decoration: none; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; opacity: 0; z-index: 10; font-family: 'flexslider-icon'; font-size: 40px; color: rgba(0,0,0,0.8); transition: opacity 0.3s ease; }
.flexslider:hover .flex-direction-nav a { opacity: 0.7; }
.flexslider:hover .flex-direction-nav a:hover { opacity: 1; }
.flex-direction-nav a.flex-prev:before { content: '\\f001'; position: absolute; left: 10px; }
.flex-direction-nav a.flex-next:before { content: '\\f002'; position: absolute; right: 10px; }
.flex-direction-nav .flex-prev { left: 0; }
.flex-direction-nav .flex-next { right: 0; }
.flex-direction-nav .flex-disabled { opacity: 0 !important; cursor: default; z-index: -1; }
.flex-control-nav { text-align: center; margin:20px 0 0;line-height:100%; width: 100%; }
.flex-control-nav li { display: inline-block; margin: 0 5px; }
.flex-control-paging li a { width: 10px; height: 10px; display: block; background: rgba(0, 0, 0, 0.3); border-radius: 50%; text-indent: -9999px; cursor: pointer; transition: background 0.3s ease; }
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active { background: rgba(0, 0, 0, 0.7); }
.flex-control-thumbs { display: none; }
.flex-direction-nav {display:none;}

div.querycontainer {display: grid;grid-template-columns: repeat(2, 1fr);  grid-gap: 20px;margin:0 0 30px 0;}
div.querycontainer button {background: rgb(94 159 130 / 100%)}
div.querycontainer button:hover {background:#d16491;}
div.item-container.product form#add-to-cart-form {margin:0 0 10px;}
div.productvraag h3 {font-weight: normal;line-height: 1.5rem;}
div.productvraag h3 span {font-weight:bold}

form#ajaxFinderForm {position: absolute;    width: 100%;    top: 80px;    z-index: 98;    max-width: 800px;      right: calc((100% - 1280px) / 2);  padding: 20px;    border-radius: 10px;    background: rgba(255, 255, 255, 0.5);}
form#ajaxFinderForm input {  width: calc(100% - 119px);    margin: 0 20px 0 0;}
form#ajaxFinderForm button {  line-height: 44px; padding: 0 20px;}
div#ajaxFinderOverlay {display:none; background: rgb(94 159 130 / 95%); position: fixed;  top: 36px;    z-index: 99;    width: 100%;    height: calc(100% - 36px);}
div#ajaxFinderOverlay > div {width: 800px;    margin: 40px auto;    background: #fff;    padding: 40px;    border-radius: 10px;position: relative;overflow: auto;height: calc(100% - 80px);}
div#ajaxFinderOverlay  fieldset {display:none;}
button#finderOverlayClose{    position: absolute;    right: 10px;    top: 10px;    border: 0;    background: rgb(94 159 130 / 100%);    border-radius: 3px;color:#fff;cursor:pointer;}
div#ajaxFinderOverlay img {width:100%;height:auto;}
div#ajaxFinderOverlay a {text-decoration:none;}
.result__title-text { font-size: 1rem;}
div.desc-container.grid {display: grid;grid-template-columns: 25% auto;grid-gap: 40px;}
div.desc-container figure {margin:0;}
div.desc-container p, .result__taxonomy-item  {font-size:.9rem;}
div#search-results {margin:0;}
time.result__date {display:none;}
.result__taxonomy-item+.result__taxonomy-item:before { content: "•";color:#d16491;line-height: 36px;    margin: 0 10px;}
.result__item+.result__item {border-color:rgb(94 159 130 / 100%)}
div#ajaxFinderOverlay ul {list-style: none;padding:0;margin:0;}
li.result__item {border-bottom:1px dotted rgb(94 159 130 / 100%); margin:0  0 20px;padding:0 0 20px}
ul.result__taxonomy li {display:inline-block;vertical-align: top;}


div.events div.intro {margin:0 0 30px;}
div.events ul.grid {list-style: none!important;  display: grid;  grid-template-columns: repeat(4, 1fr);column-gap: 20px;row-gap: 40px;margin: 0 0 60px; padding: 0;}
div.events ul.grid li {position:relative;padding: 0;}
div.events ul.grid li a { text-decoration: none;width: 100%; height: 100%; overflow: hidden;border-bottom: 1px solid rgb(103 176 63 / 30%); display: block;padding: 0 0 10px;position: relative;}
div.events ul.grid li a .readmore:hover {color:#007f00;}
div.events ul.grid li a .readmore:after {content:'\f061';margin-left:5px; line-height: 36px;    vertical-align: top;    font-size: 18px;}
div.events ul.grid div.image {padding-top: 56.25%; border-radius: 20px 0 10px; margin: 0 0 20px;}
div.events ul.grid h4 {margin: 0; font-weight: normal;color:#222}
div.events ul.grid .dag:after {background:#444;}
div.events ul.grid a.verlopen:before, ul.grid a.actief:before {content:'Beëindigd';background: #d16491;font-family: 'Roboto', sans-serif;font-weight: normal;  font-size: 12px;  line-height: 16px;  color: #fff;   padding:5px 30px;  position: absolute;  top: 15px;  right: -25px;  transform: rotate(45deg); z-index: 9;}
div.events ul.grid a.actief:before {content:'Nu bezig!';background: #007f00;}
div.events.archief div.heading {margin:0 0 30px;font-weight:bold;font-size: 1.5rem;color:#5e9f82; border-bottom :1px solid #5e9f82;padding:0 0 30px}
div.start span, div.eind span, div.locatie span.loc {display:inline-block;vertical-align: top;}
div.image img {display:block;border-radius:20px 0 0;}
div.event.inner {display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 80px;padding-bottom: 40px;}
div.column2.left {border-radius: 20px 0 10px;overflow: hidden;}
.dag {font-weight: bold;font-size: 26px;position:relative;color:#222}
.dag:after {content:' ';height:1px;background:#fff;width:100%;position:absolute;left:40px;top:15px;}
.maand, div.events .readmore {color:#e91e63;text-transform: uppercase;font-size:13px;}
div.locatie span.loc:before {content:'\f3c5';margin:0 10px 0 2px;}
div.data {padding: 20px;background: rgb(94 159 130 / 10%); border-radius: 0 0 20px 0;}
div.event.inner {display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 80px;padding-bottom: 40px;}
span.tijd {display:inline-block;vertical-align:top;margin:0 0 0 10px;}
span.datum, span.loc {display:inline-block;vertical-align:top;margin:0 10px 0 0;}
span.datum:before {content:'\f073';    margin: 0 10px 0 2px}
span.datum.eind:before {content:'\f273'; }
div.data > div:not(:last-of-type) {border-bottom: 1px dotted hsl(153deg 26% 50% / 50%);  margin: 0 0 10px;    padding: 0 0 10px;}

div.registratieintro, div.mijn-spaarpunten div.intro {margin:0 0 30px;}
div.alert-danger {    background: #f7dddc;    border: 2px solid #d16491;    padding: 20px;    border-radius: 10px;margin:0 0 60px;}
div.alert-danger ul {margin:0;}


@font-face {
  font-family: 'CormorantGaramond-SemiBold';
  font-display: block;
  font-weight: 600;
  src: url("../webfonts/CormorantGaramond-SemiBold.ttf") format("truetype"); }

@font-face {
  font-family: 'Montserrat regular';
  font-display: block;
  font-weight: 100;
  src: url("../webfonts/Montserrat-Regular.ttf") format("truetype"); }


@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }


 @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
  
  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
  
  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }

  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
    
    @font-face {
      font-family: 'Font Awesome 6 Duotone';
      font-style: normal;
      font-weight: 900;
      font-display: block;
      src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }
      @font-face {
        font-family: 'Font Awesome 6 Sharp';
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url("../webfonts/fa-sharp-regular-400.woff2") format("woff2"), url("../webfonts/fa-sharp-regular-400.ttf") format("truetype"); }
        @font-face {
          font-family: 'Font Awesome 6 Sharp';
          font-style: normal;
          font-weight: 300;
          font-display: block;
          src: url("../webfonts/fa-sharp-light-300.woff2") format("woff2"), url("../webfonts/fa-sharp-light-300.ttf") format("truetype"); }

          @font-face {
            font-family: 'Font Awesome 6 Sharp';
            font-style: normal;
            font-weight: 900;
            font-display: block;
            src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }
    

  @-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}