@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
body {font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;line-height: 1.5;color: #000;background: #f1f5f9;}
a { background-color: transparent; color: #9fc63b;transition: all 0.2s linear 0s; }
a:active, a:hover {outline: 0;color: #000;transition: all 0.2s linear 0s; }
h1, h2, h3, h4, h5, h6 {
  font-family: "Lato" !important, "Roboto", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: inherit;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.4; }
.error {color: #f00;}
.warning {background: #2199e8;color: #fefefe; padding: 0.2rem 0.5rem; margin: 0 0 0.5rem 0;}
.bggr {font-size: 3rem;margin: 0 0 0 1rem;padding: 0;}
.wttr {color: #fff;}

/* paddings */
.strtr {padding-top: 10rem;}
.contentpadz {padding: 3rem 1rem;}
.contentpadz_prod_detail {padding: 3rem 2rem;}
.nozzin {padding: 0;margin: 0;}
.hovermoi {opacity: 1; transition: all 0.3s linear 0s;}
.hovermoi:hover {opacity: 0.6; transition: all 0.3s linear 0s;cursor: pointer;}
.bg_white {background: #fff;}
.gen_message {margin: 0 ;}

/* topbar */
.sticky {width: 100%; z-index: 999;}
.reveal-overlay {z-index:999;}
.top-bar {background:#fff;transition: all 0.4s ease-in-out;padding-bottom: 0.5rem;-webkit-box-shadow: 0px 1px 1px #ccc;-moz-box-shadow: 0px 1px 1px #ccc;box-shadow: 0px 1px 1px #ccc; }
.title-bar {background:#fff;padding: 1rem 1rem; }
.title-bar-title {position: absolute;right: 1rem;top:0.8rem;}
.menu-icon::after {background: #9fc63b;box-shadow: 0 7px 0 #9fc63b, 0 14px 0 #9fc63b;}
.top-bar ul {background:#fff; }
.top-bar ul li {background:#fff;text-transform: uppercase;}
.top-bar ul li i {font-size: 1.5rem;color: #9fc63b;transition: all 0.2s linear 0s;}
.top-bar ul li sup {color: #9fc63b;transition: all 0.2s linear 0s;}
.top-bar ul li i:hover, .top-bar ul li sup:hover {color: #000;transition: all 0.2s linear 0s;}
.top-bar ul li a img {line-height: 1rem;margin-left: 0;}
.top-bar ul li a {color: #000;line-height: 2rem;text-transform: uppercase;font-weight: 700;padding-left: 0.5rem;}
.top-bar ul li:last-child {padding-right: 0;}
.top-bar ul li a:hover {color: #9fc63b;background: #fff; }
.top-bar ul li.active a {color: #9fc63b;background: #fff; }
.menu-text {color: inherit;line-height: 1;padding-top: 0;padding-bottom: 0;padding: 0rem; }
.top-bar ul li .menu-text:hover {background: none !important;}
.top-bar ul li .headsearch {border: 0px;font-size: 0.8rem;background: #f1f1f1;color: #111;}
.button.search {background-color: #9fc63b;color: #fff;border: 0px;margin-left: 0rem;}
.button.search:hover, .button.search:focus {background-color: #9fc63b;color: #fff; }

/* submenu */
.submenu_pane {background: #fff;border-bottom: 1px solid #f1f1f1;padding:1rem 0 0.5rem 0; margin: 0;}
.menu_sub li {font-size: 0.9rem;color: #9fc63b; }
.menu_sub a {color: #333;padding: 0; }
.menu_sub a:hover {color: #9fc63b; }
.menu_sub li.active a {color: #9fc63b;background: #fff;text-decoration: none; }

/* homepage new 2022 */
.content_home_intro {background: rgba(0,0,0,0.8);margin:0;padding: 8rem 0 4rem 0; }
.content_home_intro h1 {font-size: 4rem;color: #fff;}

.button.home {background-color: #fff;color: #333;font-size: 1rem; }
.button.home:hover, .button.home:focus {background-color: #333;color: #fff; }
.content_home_info {margin: 0;padding: 8rem 0 0rem 0; }
.content_home_info p {font-weight: 700; font-size: 2rem;margin: 0;padding: 0;}

.callout_start {margin: 4rem 0;padding: 2rem 2rem 1.5rem 2rem;position: relative;color: #0a0a0a;background-color: #fff;transition: all 0.3s linear 0s;border-radius: 1rem; }
.callout_start h2 {font-weight: 500;font-size: 1.2rem;}
.callout_start i {color: #9fc63b;font-size: 1.8rem;font-weight: 700;}
.callout_start a {color: #000;}




/* generic */
.content_home_blocks {margin: 0;padding: 0;}
.callout_home_block {margin: 0 0 0 0;padding: 2rem;position: relative;color: #0a0a0a;background-color: #fff;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1);height: 400px;transition: all 0.3s linear 0s; }
.callout_home_block_last {margin: 0 0 0 0;padding: 2rem;position: relative;color: #0a0a0a;background-color: #fff;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 0px solid rgba(0,0,0, 0.1);transition: all 0.3s linear 0s; }
.callout_home_block h2, .callout_home_block_last h2 {font-size: 1.5rem;}
.callout_home_block:hover, .callout_home_block_last:hover {background: #faf7f5;transition: all 0.3s linear 0s;}
/* video */
.callout_home_block_video {margin: 0 0 0 0;padding: 0;position: relative;color: #0a0a0a;background-color: #000;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1);height: 400px !important;}
.callout_home_block_video iframe {height: 400px !important; border: 0px solid red;  }
.callout_home_block_video iframe, .flex-video  {height: 400px !important; padding: 0; margin: 0;}

/* nieuwsbrief */
.callout_home_block_nieuwsbrief {margin: 0 0 0 0;padding: 1rem 4rem 0rem 2rem;position: relative;color: #0a0a0a;background-color: #fff;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1);height: 400px;transition: all 0.3s linear 0s; }
.callout_home_block_nieuwsbrief h2, .callout_home_block_last h2 {font-size: 1.5rem;}
.callout_home_block_nieuwsbrief:hover, .callout_home_block_last:hover {background: #faf7f5;transition: all 0.3s linear 0s;}
/*map*/
.callout_home_block_map {margin: 0 0 0 0;padding: 0;position: relative;color: #0a0a0a;background-color: #fff;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1);height: 400px; }
/*shortcut*/
.content_home_shortcuts {margin: 0;padding: 4rem 0; }
.callout_home {margin: 0 0 1rem 0;padding: 0.8rem;border: 1px solid rgba(0,0,0, 0.1);border-radius: 0;position: relative;color: #0a0a0a;background-color: #fff; opacity: 1;transition: all 0.3s linear 0s; }
/*actie*/
.callout_actie {margin: 0 0 0 0;padding: 2rem 2rem 2rem 2rem;position: relative;color: #fff;background-color: #9fc63b;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1); }
.callout_actie h2 {font-size: 1.5rem;}
.callout_actie p a {color: #fff;}
.callout_actie p a:hover {color: #000;}
.callout_actie_block {margin: 0 0 0 0;padding: 2rem;position: relative;color: #000;background-color: #fff;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1); }
.callout_actie_block h2 {font-size: 1.5rem;}
.callout_actie_block_small {margin: 0 0 0 0;padding: 2rem;position: relative;color: #000;background-color: #f1f1f1;border-bottom: 1px solid rgba(0,0,0, 0.1);border-right: 1px solid rgba(0,0,0, 0.1); }
/* over ons */
.block_overons {opacity: 1;transition: all 0.3s linear 0s;}
.block_overons:hover {opacity: 0.5; cursor: pointer;transition: all 0.3s linear 0s;}
.block_overons h2 {font-size: 1.5rem;}

/* credits */
.credits {background:#fff;margin: 3rem 0 0 0; padding: 3rem 0;color: #fff;font-size: 0.8rem;-webkit-box-shadow: 1px 0px 1px #ccc;-moz-box-shadow: 1px 0px 1px #ccc;box-shadow: 1px 0px 1px #ccc;  }
.credits h5 {font-size: 1.1rem;color: #000;}
.credits p { color: #000;line-height: 1.6rem;}
.credits a { color: #333;}
.credits a:hover { color: #9fc63b;}
.credits_bottom {background:#9fc63b;padding: 1rem 0 0 0;}
.credits_bottom p { color: #fff;margin-top: 0.5rem;font-size: 0.8rem;}
.credits_bottom a { color: #fff;}
.credits_bottom a:hover { color: #fff;}
.credits_r, .credits_bottom_r {text-align: right !important;}

/* buttons */
.button {text-transform: uppercase;font-weight: 700;}
.button_nomargin {margin-bottom: 0;}
.button_topmargin {margin-top: 1rem;margin-bottom: 0;}
.button.submit {background-color: #9fc63b;color: #fff; }
.button.submit:hover, .button.submit:focus {background-color: #adcf58;color: #fff; }
.button.white {background-color: #fff;color: #333; }
.button.white:hover, .button.white:focus {background-color: #333;color: #fff; }
.button.dark {background-color: #333;color: #fff; }
.button.dark:hover, .button.dark:focus {background-color: #fff;color: #333; }
.button.grey {background-color: #f1f1f1;color: #333; }
.button.grey:hover, .button.grey:focus {background-color: #000;color: #fff; }
.button.black {background-color: #000;color: #fff; }
.button.black:hover, .button.black:focus {background-color: #9fc63b;color: #fff; }
.button.next {background-color: #9fc63b;color: #fff; }
.button.next:hover, .button.next:focus {background-color: #333;color: #fff; }
.button.prev {background-color: #f1f1f1;color: #333; }
.button.prev:hover, .button.prev:focus {background-color: #333;color: #fff; }
.button.pay {background-color: #339900;color: #fff; }
.button.pay:hover, .button.pay:focus {background-color: #333;color: #fff; }




/* form */
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'],
textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  /*height: 2.4375rem;*/
  height: 2.53rem;
  padding: 0.5rem;
  border: 1px solid #cacaca;
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: #0a0a0a;
  background-color: #fefefe;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  border-radius: 0;
  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none; }
  [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus,
  textarea:focus {
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    outline: none;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out; }

/* specific forms */
#id_interesse-catering-van, #id_interesse-aankleding {margin-left: 0;margin-top: 0.5rem; list-style: none;}

ul#id_payment_provider {
  margin-left: 0;
  margin-top: 0.5rem;
  list-style: none;
}

/* stijn forms */
form small {float:right;color: #999;margin-top: -1.4rem;}
form small.error {margin-top: -1rem !important;border: 0px solid red; }
form div.help { color:#999; font-size: 80%; }
input.stijn-form-field-error {border: 2px solid #f04124; }
.alert-box {border-style: solid;border-width: 1px;display: block;font-weight: normal;margin-bottom: 1.25rem;position: relative;padding: 0.875rem 1.5rem 0.875rem 0.875rem;font-size: 0.8125rem;transition: opacity 300ms ease-out;background-color: #ff9900;border-color: #ff9900;color: #ffffff; }
.alert-box.success {background-color: #ff9900;border-color: #ff9900;color: #fff; }

/* check buttons */
button.check-button, button.check-button:hover, button.check-button:focus {background-color: #333;}
button.check-button-checked, button.check-button-checked:hover, button.check-button-checked:focus { background-color: #9fc63b;}
button.check-button-checked:before {content: "\f126";margin-right: 5px;font-family: "foundation-icons";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1rem;display: inline-block;text-decoration: inherit;}

/* tabs */
.tabs-title {float: left; }
.tabs-title > a {display: block;padding: 1.25rem 1.5rem;line-height: 1;font-size: 1rem; }
.tabs-title > a:hover {background: #fefefe; color: #ff9900; }
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {background: #e6e6e6;color: #000; }
/* pagination */
.pagination_padz {background: #fff;border-top: 1px solid #f1f1f1;padding:2rem 0; margin: 0; }
.pagination {margin-left: 0;margin-bottom: 0; }
.pagination a, .pagination button {color: #9fc63b;display: block;padding: 0.1875rem 0.625rem;border-radius: 0; }
.pagination a:hover, .pagination button:hover {background: #9fc63b; color: #fff; }
.pagination .current  {padding: 0.1875rem 0.625rem;background: #9fc63b; color: #fff !important; }
.pagination .current a  {padding: 0rem;background: #9fc63b;color: #fff !important; }
/* labels */
.label {display: inline-block;padding: 0.5rem 0.5rem;font-size: 1rem;line-height: 1;white-space: nowrap;cursor: default;border-radius: 0;background: #2199e8;color: #fefefe; }
.label.secondary {background: #777;color: #fefefe; }
.label.success {background: #3adb76;color: #fefefe; }
.label.warning {background: #ffae00;color: #fefefe; }
.label.alert, .label.error {background: #f00;color: #fff; }
.label.alert a, .label.error a { color: #fff;}
.label.black {background: rgba(0,0,0,0.7);color: #fff; }
.label.grey {background:rgba(0,0,0,0.2);color: #000; }
/* products */
.callout_list {margin: 0 0 1rem 0;padding: 0.8rem;border: 1px solid rgba(0,0,0, 0.1);border-radius: 0;position: relative;color: #0a0a0a;background-color: #fff; opacity: 1;transition: all 0.3s linear 0s; }
.callout_list:hover {cursor: pointer;opacity: 0.8;transition: all 0.3s linear 0s;}
.callout_list h2 {font-size: 1rem;font-weight: 700;}
.callout_list .label.black {position: absolute; left: 0.8rem; right: 0.8rem; top: 0.8rem; z-index: 1;}
.product_detail {background: #333; }
.callout_prod {margin: 0 0 1rem 0;padding: 0.8rem;border: 1px solid rgba(0,0,0, 0.1);border-radius: 0;position: relative;color: #0a0a0a;background-color: #fff; opacity: 1;transition: all 0.3s linear 0s; }
.badge.week {display: inline-block;padding: 1em 0.6rem;min-width: 3em;font-size: 1rem;text-align: center;border-radius: 50%;background: #9fc63b;color: #fff;font-size: 0.8rem; font-weight: 700;margin-bottom: 1rem;transition: background-color 300ms ease-out 0s;}
.badge.week_no {display: inline-block;padding: 1em 0.6rem;min-width: 3em;font-size: 1rem;text-align: center;border-radius: 50%;background: #f1f1f1;color: #ccc;font-size: 0.8rem; font-weight: 700;margin-bottom: 1rem;transition: background-color 300ms ease-out 0s; }
.badge.week:hover, .badge.week_no:hover {background: #000; cursor: pointer;}
/* producer */
.producer_list {opacity: 1;transition: all 0.3s linear 0s;}
.producer_list:hover {opacity: 0.5; cursor: pointer;transition: all 0.3s linear 0s;}
.producer_detail_products {padding: 3rem 0;background: #fff;}
/* klantenservice */
.callout_qa {margin: 0 0 1rem 0;padding: 1rem 1rem 0 1rem;border: 1px solid rgba(0,0,0, 0.1);border-radius: 0;position: relative;color: #0a0a0a;background-color: #fff; opacity: 1;transition: all 0.3s linear 0s; }
/* news */
.panelnewz_img_eerste {border-style: solid;border-width: 1px;border-color: #f1f1f1;margin-bottom: 2rem;padding: 1.25rem;background: #f69220;min-height: 480px;opacity: 1;cursor:pointer;}
.panelnewz_img_eerste h1 {font-size: 4rem;font-weight: 600;}
.panelnewz_img_eerste a h1, .panelnewz_img_eerste p, .panelnewz_img_eerste p a { color: #fff;text-shadow: 0px 0px 1px #000; }
.panelnewz_img_eerste:hover {opacity: 0.8;transition: all 0.2s linear 0s;}
.panelnewz_img_eerste:hover p a {color: #000;}
.panelnewz_img {border-style: solid;border-width: 1px;border-color: #f1f1f1;margin-bottom: 2rem;padding: 1.25rem;background: #f69220;min-height: 480px;opacity: 1;cursor:pointer;}
.panelnewz_img h2 {font-size: 2rem;font-weight: 600;}
.panelnewz_img a h2, .panelnewz_img p, .panelnewz_img p a { color: #fff;text-shadow: 0px 0px 1px #000; }
.panelnewz_img:hover {opacity: 0.8;transition: all 0.2s linear 0s;}
.panelnewz_img:hover p a {color: #000;}
.panelnewz {border-style: solid;border-width: 1px;border-color: #f1f1f1;margin-bottom: 2rem;padding: 1rem;background: #fff;min-height: 480px;opacity: 1;cursor:pointer; }
.panelnewz h2 {font-size: 1.2rem;font-weight: 600;margin: 1rem 0 1rem 0;}
.panelnewz:hover {opacity: 0.8;transition: all 0.2s linear 0s;}
.panelnewz:hover p a {color: #000;}
.panelnewz_top {border-style: solid;border-width: 1px;border-color: #f1f1f1;margin-bottom: 2rem;padding: 1.25rem;background: #fff;opacity: 1;cursor:pointer; }
.panelnewz_top:hover {opacity: 0.8;}
.panelnewz_top:hover p a {color: #000;}
.panelnewz_color {border-style: solid;border-width: 1px;border-color: #f1f1f1;margin-bottom: 2rem;padding: 1.25rem;background: #f69220;min-height: 480px;opacity: 1;cursor:pointer; }
.panelnewz_color h2 {font-size: 2rem;font-weight: 600;}
.panelnewz_color a h2, .panelnewz_color p, .panelnewz_color p a { color: #fff; }
.panelnewz_color:hover {opacity: 0.8;transition: all 0.2s linear 0s;}
.panelnewz_color:hover p a {color: #630;}
/* winkelwagen */
@keyframes blink-animation {0% { color: #9fc63b;} 50% { color: #000;} 100% { color: #9fc63b;} }
#cart-menu-item.animate a {animation-name: blink-animation;animation-duration: 1s;animation-iteration-count: 3;}
.grid_winkelwagen {padding: 2rem 2rem 1rem 2rem; }
.grid_winkelwagen_list {padding: 0 2rem 0rem 2rem; }
.grid_winkelwagen_item {padding: 1rem 0rem; margin-bottom: 1rem; background: #fff;}
.grid_winkelwagen_item p {margin: 0;padding: 0;}
.grid_winkelwagen_actie {padding: 0 1rem 2rem 1rem; }
.grid_winkelwagen_korting {padding: 1rem 0rem 0rem 0rem; margin-bottom: 1rem; background: #fff;}
.grid_winkelwagen_korting p {padding: 0.3rem 0rem 0rem 0.5rem;}
.grid_winkelwagen_active  {color: #9fc63b;}
.grid_winkelwagen_hub {padding: 1rem 0rem; margin-bottom: 1rem; background: #fff;}
.grid_winkelwagen_time {padding: 0 0rem;background: #fff;margin: 0 0 0.3rem 0;background: #f1f1f1;color: #000;}
.grid_winkelwagen_time:hover {background: #ff9900;color: #fff;cursor: pointer;}
.grid_winkelwagen_time .button {margin: 0; }
.grid_winkelwagen_time p {font-size: 1rem;margin: 0.3rem 0 0.3rem 0;line-height: 2.1rem;}
.grid_winkelwagen_time p a {color: #000;}
.grid_winkelwagen_time p a:hover {color: #fff;}
.grid_winkelwagen_time_active {color: #fff;background: #f90; font-weight: 700; }
.grid_winkelwagen_time_active a {color: #fff;}
.grid_winkelwagen_price {padding: 1rem 0rem 0rem 0rem; margin-bottom: 1rem; background: #fff;}
.grid_winkelwagen_ordered {padding: 1rem 0;background: #fff;margin-bottom: 0.3rem;background: #f1f1f1;}
.grid_winkelwagen_ordered p {font-size: 1rem;margin: 0.5rem 1rem 0.5rem 1rem;line-height: 2rem;}
.grid_winkelwagen_beheer {padding: 1rem 0rem;background: #fff;margin-bottom: 0.5rem;background: #f1f1f1;color: #000;}
.grid_winkelwagen_beheer:hover {background: #ccc;color: #fff;cursor: pointer;}
.grid_winkelwagen_message {padding: 1rem 1rem 1rem 1rem; margin-bottom: 1rem; background: #f00;}
.grid_detail_comments {padding: 0 2rem 2rem 2rem; border-bottom: 0px; }
.grid_detail_comments p {color: #333;font-size: 0.8rem;}
/* b2b */
/* side-nav */
.side-nav {display: block;margin: 0;padding:  0 0 0 0;list-style-type: none;list-style-position: outside;font-family: inherit; }
.side-nav li {margin: 0;font-size: 1rem;padding: 0.2rem 0;font-weight: normal;border-bottom: 1px dashed #ccc; }
.side-nav li a:not(.button) {display: block;color: #333;margin: 0;padding:0;  }
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {color: #9fc63b; }
.side-nav li.active > a:first-child:not(.button) {color: #9fc63b;}
.side-nav li.divider {border-top: 1px solid;height: 0;padding: 0;list-style: none;border-top-color: white; }
.side-nav li.heading {color: #000;font-size: 1rem;text-transform: uppercase;font-weight: 700; }

/*acties*/
.actie_bg_white { background: #fff; }
.actie_bg_white_form { background: #fff;border: 1px dashed #ccc; }
.actie_bg_black { background: #000; }
.actie_bg_lgrey { background: #f1f1f1; }
.actie_bg_lorange { background: #fff4e7; }

/* small */
@media screen and (max-width: 39.9375em) {
    .content_home_intro {height: auto;padding:0 0 1rem 0;}
    .callout_start {margin: 1rem 0 0 0 ;padding: 2rem 2rem 1.5rem 2rem; }
    .callout_start h2 {font-weight: 500;font-size: 1rem;}
    .credits, .credits_bottom {text-align: center !important;}
    .credits_r, .credits_bottom_r {text-align: center !important;}
	.content_home_intro .orbit-slide {height: 330px;padding: 1rem; }
	.content_home_intro_block h1 {color: #fff;font-size: 2rem;margin-bottom: 1rem;}
	.panelnewz_img_eerste h1 {font-size: 3rem;}
	.panelnewz_img h2 {font-size: 1.5rem;}
}

/* Medium and up */
@media screen and (min-width: 40em) {
	.top-bar ul li a {font-size: 0.9rem;}
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

.display-inline-block {
  display: inline-block;
}

.position-relative {
  position: relative;
}

/* Mark product as favorite */

input[type="checkbox"].favorite {
  display: none;
}

input[type="checkbox"].favorite + label i.add-favorite {
  display: initial;
  font-size: 20pt;
}

input[type="checkbox"].favorite + label i.remove-favorite {
  display: none;
  font-size: 20pt;
}

input[type="checkbox"].favorite:checked + label i.add-favorite {
  display: none;
}

input[type="checkbox"].favorite:checked + label i.remove-favorite {
  display: initial;
}

label.favorite.product-list {
  position: absolute;
  bottom: 0;
  right: 0;
}