/* * Custom code goes here. * A template should always ship with an empty custom.css */ /*sticky footer*/ html, body { margin: 0; height: calc(100% - 85px); } body#product { min-height: calc(100vh - 85px); } main { min-height: calc(100vh - 85px); display: flex; flex-direction: column; } #wrapper { flex: 1; } #footer { margin-top: auto; } .flexbox{ display: flex; } .flexbox.flex-justify{ justify-content: space-between; } .header-banner{ background: #000; } .header-banner > div{ padding: 8px 0 0 0; } .header-banner .header-jozephine{ background: url("../img/jozephine-bg.jpg") no-repeat 100% 50% #222227; height: 84px; } .header-banner .header-sjefs{ background: #463c10; background: url("../img/jozephine-bg.jpg") no-repeat 100% 50% #222227; height: 84px; } /* temp */ #amazzing_filter{ background: none; } #amazzing_filter .af_filter .af_subtitle, #amazzing_filter .af_filter h5.af_subtitle, #amazzing_filter h1{ font-size: 2rem; font-weight: 600; text-align: center; } #amazzing_filter{ box-shadow: none; } #amazzing_filter .title_block{ display: none; } #amazzing_filter h5.af_subtitle { } #amazzing_filter .selectedFilters{ } #amazzing_filter .block_content{ } #amazzing_filter.animation-ready .block_content{ } #amazzing_filter .selectedFilters{ } #amazzing_filter #af_form{ } #amazzing_filter .selectedFilters .cf{ display: none!important; } #amazzing_filter .selectedFilters .clearAll a.icon-eraser.all{ display: block; width: 100%; background: #BB5D38; color: #fff; text-align: center; } #amazzing_filter .selectedFilters .clearAll a.icon-eraser.all:before { content: ''; } #amazzing_filter .af_subtitle_heading{ } #amazzing_filter .af_filter.f75 .af_subtitle_heading{ } #amazzing_filter .af_filter{ border: none; padding: 0; background: none; } #amazzing_filter .af_filter ul{ } #amazzing_filter .af_filter.f75{ } #amazzing_filter .af_filter_content li{ } #amazzing_filter .group-custom{ } #amazzing_filter .name{ } .af_filter.expandable .toggle-cut-off{ display: none; } #amazzing_filter .af_filter .af_filter_content li input[type="checkbox"] + span.name::before, #amazzing_filter .af_filter .af_filter_content li input[type="checkbox"]:checked + span.name::before{ letter-spacing: 3px; content: ''; } #amazzing_filter .af_filter .af_filter_content li input[type="checkbox"] + span.name{ } #amazzing_filter .col:first-child { } #amazzing_filter .af_filter .af_filter_content{ } /* temp */ #amazzing_filter .af_filter_content li.item-f-77{ display: none; } #amazzing_filter .af_filter_content li.item-f-75, #amazzing_filter .af_filter_content li.item-f-76, #amazzing_filter .af_filter_content li.item-f-319, #amazzing_filter .af_filter_content li.item-f-320, #amazzing_filter .af_filter_content li.item-f-321, #amazzing_filter .af_filter_content li.item-f-958, #amazzing_filter .af_filter_content li.item-f-959, #amazzing_filter .af_filter_content li.item-f-1656, #amazzing_filter .af_filter_content li.item-f-1787, #amazzing_filter .af_filter_content li.item-f-2034, #amazzing_filter .af_filter_content li.item-f-2410 { } #amazzing_filter.animation-ready .af_filter_content li.item-f-75, #amazzing_filter.animation-ready .af_filter_content li.item-f-76, #amazzing_filter.animation-ready .af_filter_content li.item-f-319, #amazzing_filter.animation-ready .af_filter_content li.item-f-320, #amazzing_filter.animation-ready .af_filter_content li.item-f-321, #amazzing_filter.animation-ready .af_filter_content li.item-f-958, #amazzing_filter.animation-ready .af_filter_content li.item-f-959, #amazzing_filter.animation-ready .af_filter_content li.item-f-1656, #amazzing_filter.animation-ready .af_filter_content li.item-f-1787, #amazzing_filter.animation-ready .af_filter_content li.item-f-2034, #amazzing_filter.animation-ready .af_filter_content li.item-f-2410 { } @media screen and (min-width: 992px) and (max-width: 1561px) { #amazzing_filter.animation-ready .group-custom > div{ } } #amazzing_filter .af_filter .af_filter_content li.item-f-75 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-76 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-319 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-320 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-321 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-958 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-959 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-1656 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-1787 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-2034 .count, #amazzing_filter .af_filter .af_filter_content li.item-f-2410 .count { display: none; } #amazzing_filter .af_filter .af_filter_content li.item-f-75 label, #amazzing_filter .af_filter .af_filter_content li.item-f-76 label, #amazzing_filter .af_filter .af_filter_content li.item-f-319 label, #amazzing_filter .af_filter .af_filter_content li.item-f-320 label, #amazzing_filter .af_filter .af_filter_content li.item-f-321 label, #amazzing_filter .af_filter .af_filter_content li.item-f-958 label, #amazzing_filter .af_filter .af_filter_content li.item-f-959 label, #amazzing_filter .af_filter .af_filter_content li.item-f-1656 label, #amazzing_filter .af_filter .af_filter_content li.item-f-1787 label, #amazzing_filter .af_filter .af_filter_content li.item-f-2034 label, #amazzing_filter .af_filter .af_filter_content li.item-f-2410 label { } /* Container */ .af_filter_content ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; padding: 10px 0; list-style: none; justify-items: center; } @media (max-width: 992px) { .af_filter_content ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .af_filter_content ul { grid-template-columns: repeat(1, 1fr); } } /* Item */ .af_filter_content li { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 170px; } /* Hide checkbox */ .af_filter_content input[type="checkbox"] { display: none; } /* Card (label) */ .af-checkbox-label { display: flex; flex-direction: column; align-items: center; cursor: pointer; width: 100%; } /* Circle */ .af-checkbox-label .name { display: block; width: 140px; height: 140px; border-radius: 50%; background-color: #fff; background-size: 70%; background-repeat: no-repeat; background-position: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: all 0.3s ease; } /* Description (pill) */ .af-checkbox-label .desc { margin-top: 16px; padding: 4px 8px; line-height: 1; background: #fff; border-radius: 30px; font-size: 14px; color: #333; box-shadow: 0 6px 9px rgba(0,0,0,0.1); transition: all 0.3s ease; text-align: center; display: flex; width: 100%; height: 40px; align-items: center; align-content: center; justify-content: center; } /* Hover */ .af-checkbox-label:hover .name { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.12); } .af-checkbox-label:hover .desc { background: #e0e0e0; } /* Checked state */ .af_filter_content input[type="checkbox"]:checked + .name { box-shadow: 0 0 0 4px #434343 inset, 0 12px 25px rgba(0,0,0,0.15); } .af_filter_content input[type="checkbox"]:checked ~ .desc { background: #434343; color: #fff; } #amazzing_filter .af_filter_content li.item-f-75 span.name, #amazzing_filter .af_filter_content li.item-f-76 span.name, #amazzing_filter .af_filter_content li.item-f-319 span.name, #amazzing_filter .af_filter_content li.item-f-320 span.name, #amazzing_filter .af_filter_content li.item-f-321 span.name, #amazzing_filter .af_filter_content li.item-f-958 span.name, #amazzing_filter .af_filter_content li.item-f-959 span.name, #amazzing_filter .af_filter_content li.item-f-1656 span.name, #amazzing_filter .af_filter_content li.item-f-1787 span.name, #amazzing_filter .af_filter_content li.item-f-2034 span.name, #amazzing_filter .af_filter_content li.item-f-2410 span.name, #amazzing_filter .af_filter_content li.item-f-3034 span.name, #amazzing_filter .af_filter_content li.item-f-2661 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Jozephine span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Sjefs span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-PrivateLabel span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-ButchersCo span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Gustave span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephinePLANTBASED span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-SjefsPLANTBASED span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephineLOWCARB span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-PastaMaviglia span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-NonnaLucia span.name { text-indent: -5000px; background-image: url("../img/Logo_Jozephine.png"); background-repeat: no-repeat; background-size: 100%; background-position: center; } #amazzing_filter .af_filter_content li.item-f-76 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Sjefs span.name { background-image: url("../img/sjefs_logo.png") ; } #amazzing_filter .af_filter_content li.item-f-319 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-ButchersCo span.name { background-image: url("../img/butchersco_logo.png") ; } #amazzing_filter .af_filter_content li.item-f-320 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Gustave span.name { background-image: url("../img/gustave_logo.png") ; } #amazzing_filter .af_filter_content li.item-f-321 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-PrivateLabel span.name { background-image: url("../img/privatelabel_logo.png") ; } #amazzing_filter .af_filter_content li.item-f-958 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephinePLANTBASED span.name { background-image: url("../img/Logo_Jozephine_Plant_based-Groen.png") ; } #amazzing_filter .af_filter_content li.item-f-959 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-SjefsPLANTBASED span.name { background-image: url("../img/sjefs_nm.png") ; } #amazzing_filter .af_filter_content li.item-f-1656 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephineLOWCARB span.name { background-image: url("../img/JozephineLOWCARB.png") ; } #amazzing_filter .af_filter_content li.item-f-1787 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-PastaMaviglia span.name { background-image: url("../img/pastamaviglia.png") ; } #amazzing_filter .af_filter_content li.item-f-2034 span.name { background-image: url("../img/atelier_maurice_black.png") ; } #amazzing_filter .af_filter_content li.item-f-2410 span.name, #amazzing_filter.filters-productpage .af_filter_content li.item-f-NonnaLucia span.name { background-image: url("../img/nonna_lucia.png") ; } #amazzing_filter .af_filter_content li.item-f-3034 span.name, #amazzing_filter .af_filter_content li.item-f-2661 span.name { background-image: url("../img/maurice_logo.png") ; } #amazzing_filter.filters-productpage .af_filter_content li.item-f-Jozephine span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Sjefs span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-ButchersCo span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-Gustave span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-PrivateLabel span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephinePLANTBASED span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-SjefsPLANTBASED span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-JozephineLOWCARB span.count #amazzing_filter.filters-productpage .af_filter_content li.item-f-PastaMaviglia span.count, #amazzing_filter.filters-productpage .af_filter_content li.item-f-NonnaLucia span.count { } #amazzing_filter .selectedFilters{ display: none; } /* datepicker custom */ /* Current day*/ .ui-datepicker-unselectable.ui-state-disabled.undefined.ui-datepicker-today{ opacity: 1; } .ui-datepicker-unselectable.ui-state-disabled.undefined.ui-datepicker-today span{ /*color: #333!important; border-color: #F4F4F4 !important; background: #fafafa !important;*/ }/* .ui-state-default.ui-state-hover{ background: transparent!important; border-color: transparent!important; } */ td:not(.ui-state-disabled) .ui-state-default{ background: #7fad7c !important; border-color: #7fad7c!important; text-align: center!important; color: #fff!important; } td:not(.ui-state-disabled) .ui-state-active{ /* background: #eb6209 !important; border-color: #eb6209!important; color: #fff!important;*/ } .ui-datepicker-calendar td span{ text-align: center!important; } #quantity_wanted{ text-align: center; } .justify-content-md-center, .justify-content-sm-center , .justify-content-xs-center , .justify-content-lg-center { justify-content: center !important; display: flex; } /* #js-product-list , .products-block */ /*TouchSpin*/ .input-group.bootstrap-touchspin, .input-group.bootstrap-touchspin, .touchspin-horizontal .input-group.bootstrap-touchspin { display: flex; } .input-group.bootstrap-touchspin .input-group-btn, .input-group.bootstrap-touchspin .input-group-btn, .touchspin-horizontal .input-group.bootstrap-touchspin .input-group-btn { width: 40px; height:40px; } .bootstrap-touchspin .btn.btn-touchspin, .bootstrap-touchspin .btn.btn-touchspin, .touchspin-horizontal .bootstrap-touchspin .btn.btn-touchspin { background: #BB5D38; color: #fff; width: 40px; height:40px; } .bootstrap-touchspin .btn-touchspin:hover, .bootstrap-touchspin .btn-touchspin:hover, .touchspin-horizontal .bootstrap-touchspin .btn-touchspin:hover { background: #BB5D38; color: #fff; } .btn.btn-touchspin, .btn.btn-touchspin, .touchspin-horizontal .btn.btn-touchspin { height:40px; } /* replace horizontal + - by icons */ .btn.btn-touchspin.js-touchspin{ position: relative; right: 9999px; } .btn.btn-touchspin.js-touchspin:after{ position: absolute; display: block; top: 0px; right: -9999px; text-align: center; content:"\E313"; font-family: 'Material Icons'; vertical-align: baseline; color: #333; height:40px; width: 40px; background: #e4e4e4; font-size: 1.1rem; line-height: 40px; } .btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up:after{ content:"\E316"; } /* touchspin in speedview */ #js-product-list.speed-view .bootstrap-touchspin input.form-control, #js-product-list.speed-view .bootstrap-touchspin input.input-group{ height:30px; } #js-product-list.speed-view .btn{ height:30px; padding: 0 1rem; line-height:30px; } #js-product-list.speed-view .bootstrap-touchspin .btn.btn-touchspin{ background: #E4E4E4; color: #444; height:30px; margin: 0; } #js-product-list.speed-view .btn.btn-touchspin.js-touchspin:after{ height:30px; line-height:30px; } /* BT */ .btn:focus,.btn:active:focus,.btn.active:focus, .btn.focus,.btn:active.focus,.btn.active.focus { outline: none; } /*temp*/ #product .btn.favorite{ height: 44px; background: none; } /*BT modal*/ .modal-body { padding: 0 10px 10px 10px; } .modal-header { padding: 15px 15px 15px 15px; border: none; } .modal-body #planner_modal .sub_cart_header{ margin: 0; } .language-selector.dropdown.js-dropdown .expand-more{ color: #fff!important; } .language-selector.dropdown a.dropdown-item{ color: #000; } .ui-datepicker-current-day.ui-datepicker-today a{ background: #434343 !important; border-color: #434343 !important; color: #fff !important; } /* scrolltop */ #scrollTopBtn{ position: fixed; right: 24px; bottom: 124px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #ffffff; color: #6b6b6b; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 20px rgba(0,0,0,0.06); transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease; z-index: 9999; display: none; } #scrollTopBtn.show{ opacity: 1; visibility: visible; } #scrollTopBtn:hover{ transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.10), 0 12px 24px rgba(0,0,0,0.10); } #scrollTopBtn:active{ transform: translateY(0); } #scrollTopBtn svg, #scrollTopBtn i{ pointer-events: none; } @media (max-width: 768px){ #scrollTopBtn{ display: none !important; } }