:root {
  /* PRIMARY */
  --primary: #108388;
  --primary-light: #88C1C3;
  --primary-lighter: #DAECEC;
  --primary-dark: #0C676B;
  /* SECONDARY */
  --secondary-dark: #343436;
  --secondary: #58595B;
  --secondary-light: #818284;
  --secondary-lighter: #B3B3B4;
  /* ACCENT */
  --accent: #108388;
  /* NEUTRALs (old) */
  --neutral-darker: #486066;
  --neutral-dark: #707070;
  --neutral: #858B8C;
  --neutral-light: #ABB9BE;
  --neutral-lighter: #DDE0E0;
  --neutral-lightest: #F5F6F7;
  /* EXTREMEs */
  --black: #000000;
  --white: #ffffff;
  --transparent: transparent;
  /* TRANSPARENCY'S */
  --white-transparency-10: #FFFFFF10;
  --white-transparency-20: #FFFFFF20;
  --white-transparency-30: #FFFFFF30;
  --white-transparency-40: #FFFFFF40;
  --white-transparency-50: #FFFFFF50;
  --white-transparency-60: #FFFFFF60;
  --white-transparency-70: #FFFFFF70;
  --white-transparency-80: #FFFFFF80;
  --white-transparency-90: #FFFFFF90;
  --neutral-darker-transparency: #48606629;
  --primary-transparency: #00ADBB29;
  --secondary-transparency: #C2CC0029;
  /* OTHERs */
  --grayed-out: #BCC3C3;
  --gray-light: #EBE8E8;
  --danger: #dc3545;
  --pink: #F0569C;
  --pink-light: #FDE6F0;
  /* ALPHAs */
  --black-a: rgba(0, 0, 0, .3);
  --white-a: rgba(250, 250, 250, 0.4);
  /* SHADOWs */
  --shadow-bottom: 0px 18px 20px -20px var(--black-a);
  --shadow-right: 1.95px 0px 2.6px -1px var(--black-a);
  --shadow-bottom-right: 0px 0px 20px #00000029;
  --shadow: 0px 2px 3px #0000001C;
  --shadow-strong: 0px 0px 6px #0000009A;
  /* GRADIENTs*/
  --ltr: 90deg;
  --ttb: 0deg;
  --gradient-primary-ltr: var(--ltr), var(--primary) 0%, var(--primary-light) 100%;
  --gradient-primary-lighter-fade-ttb: var(--ttb), var(--white) 0%, var(--primary-lighter) 100%;
  --gradient-brand-ltr: var(--ltr), var(--secondary) 0%, var(--primary-light) 100%;
  --gradient-white-fade-ttb: var(--ttb), var(--white) 0%, var(--white-a) 100%;
  /** NEW UI KIT - NEUTRAL PALETTE */
  /*
  --neutral-light-100: #FFFFFF; 
  --neutral-light-200: #FAFAFA;
  --neutral-light-300: #F7F7F7;
  --neutral-light-400: #EFEFEF;
  --neutral-light-500: #E5E5E5;
  --neutral:           #DEDEDE;
  --neutral-dark-100:  #D6D6D6;
  --neutral-dark-200:  #898989;
  --neutral-dark-300:  #656565;
  --neutral-dark-400:  #555555;
  --neutral-dark-500:  #212529;
  */
  /** NEW UI KIT - SEMANTIC PALETTE */
  --info: #2764D8;
  --info-lighter: #2764D80D;
  --info-light: #B2C8F1;
  --info-dark: #184BAC;
  --error: #C60000;
  --error-lighter: #F9EFEF;
  --error-light: #EAA4A4;
  --error-dark: #A50000;
  --warning: #ED9B00;
  --warning-lighter: #FBF7EF;
  --warning-light: #F9DCA7;
  --warning-dark: #D98E00;
  --success: #008547;
  --success-lighter: #0085470D;
  --success-light: #A3D3BC;
  --success-dark: #006435;
}

body {
  color: var(--neutral-darker);
}

/* LINKs */
a {
  color: var(--neutral-darker);
}

a:hover {
  color: var(--secondary);
}

a:hover i {
  color: var(--neutral-darker);
}

a.hover-primary:hover {
  color: var(--primary);
}

a.hover-white:hover {
  color: var(--white);
}

/* FILL */
.fill-primary {
  fill: var(--primary);
}

.fill-primary-light {
  fill: var(--primary-light);
}

.fill-primary-lighter {
  fill: var(--primary-lighter);
}

.fill-secondary {
  fill: var(--secondary);
}

.fill-secondary-light {
  fill: var(--secondary-light);
}

.fill-secondary-lighter {
  fill: var(--secondary-lighter);
}

.fill-neutral-darker {
  fill: var(--neutral-darker);
}

.fill-neutral-dark {
  fill: var(--neutral-dark);
}

.fill-neutral {
  fill: var(--neutral);
}

.fill-neutral-light {
  fill: var(--neutral-light);
}

.fill-neutral-lighter {
  fill: var(--neutral-lighter);
}

.fill-neutral-lightest {
  fill: var(--neutral-lightest);
}

.fill-black {
  fill: var(--black);
}

.fill-white {
  fill: var(--white);
}

.fill-black-a2 {
  fill: var(--black-a);
}

.fill-white-a2 {
  fill: var(--white-a);
}

@media screen and (min-width: 768px) {
  .md-fill-primary {
    fill: var(--primary);
  }
  .md-fill-primary-light {
    fill: var(--primary-light);
  }
  .md-fill-primary-lighter {
    fill: var(--primary-lighter);
  }
  .md-fill-secondary {
    fill: var(--secondary);
  }
  .md-fill-secondary-light {
    fill: var(--secondary-light);
  }
  .md-fill-secondary-lighter {
    fill: var(--secondary-lighter);
  }
  .md-fill-black-a2 {
    fill: var(--black-a);
  }
  .md-fill-neutral-darker {
    fill: var(--neutral-darker);
  }
  .md-fill-neutral-dark {
    fill: var(--neutral-dark);
  }
  .md-fill-neutral {
    fill: var(--neutral);
  }
  .md-fill-neutral-light {
    fill: var(--neutral-light);
  }
  .md-fill-neutral-lighter {
    fill: var(--neutral-lighter);
  }
  .md-fill-neutral-lightest {
    fill: var(--neutral-lightest);
  }
  .md-fill-white {
    fill: var(--white);
  }
}
@media screen and (min-width: 992px) {
  .lg-fill-primary {
    fill: var(--primary);
  }
  .lg-fill-primary-light {
    fill: var(--primary-light);
  }
  .lg-fill-primary-lighter {
    fill: var(--primary-lighter);
  }
  .lg-fill-secondary {
    fill: var(--secondary);
  }
  .lg-fill-secondary-light {
    fill: var(--secondary-light);
  }
  .lg-fill-secondary-lighter {
    fill: var(--secondary-lighter);
  }
  .lg-fill-black-a2 {
    fill: var(--black-a);
  }
  .lg-fill-neutral-darker {
    fill: var(--neutral-darker);
  }
  .lg-fill-neutral-dark {
    fill: var(--neutral-dark);
  }
  .lg-fill-neutral {
    fill: var(--neutral);
  }
  .lg-fill-neutral-light {
    fill: var(--neutral-light);
  }
  .lg-fill-neutral-lighter {
    fill: var(--neutral-lighter);
  }
  .lg-fill-neutral-lightest {
    fill: var(--neutral-lightest);
  }
  .lg-fill-white {
    fill: var(--white);
  }
}
@media screen and (min-width: 1200px) {
  .xl-fill-primary {
    fill: var(--primary);
  }
  .xl-fill-primary-light {
    fill: var(--primary-light);
  }
  .xl-fill-primary-lighter {
    fill: var(--primary-lighter);
  }
  .xl-fill-secondary {
    fill: var(--secondary);
  }
  .xl-fill-secondary-light {
    fill: var(--secondary-light);
  }
  .xl-fill-secondary-lighter {
    fill: var(--secondary-lighter);
  }
  .xl-fill-black-a2 {
    fill: var(--black-a);
  }
  .xl-fill-neutral-darker {
    fill: var(--neutral-darker);
  }
  .xl-fill-neutral-dark {
    fill: var(--neutral-dark);
  }
  .xl-fill-neutral {
    fill: var(--neutral);
  }
  .xl-fill-neutral-light {
    fill: var(--neutral-light);
  }
  .xl-fill-neutral-lighter {
    fill: var(--neutral-lighter);
  }
  .xl-fill-neutral-lightest {
    fill: var(--neutral-lightest);
  }
  .xl-fill-white {
    fill: var(--white);
  }
}
/* TEXT */
.color-primary {
  color: var(--primary);
}

.color-primary-light {
  color: var(--primary-light);
}

.color-primary-lighter {
  color: var(--primary-lighter);
}

.color-secondary {
  color: var(--secondary);
}

.color-secondary-light {
  color: var(--secondary-light);
}

.color-secondary-lighter {
  color: var(--secondary-lighter);
}

.color-accent {
  color: var(--accent);
}

.color-neutral-darker {
  color: var(--neutral-darker);
}

.color-neutral-dark {
  color: var(--neutral-dark);
}

.color-neutral {
  color: var(--neutral);
}

.color-neutral-light {
  color: var(--neutral-light);
}

.color-neutral-lighter {
  color: var(--neutral-lighter);
}

.color-neutral-lightest {
  color: var(--neutral-lightest);
}

.color-pink {
  color: var(--pink);
}

.color-pink-light {
  color: var(--pink-light);
}

.color-black {
  color: var(--black);
}

.color-white {
  color: var(--white);
}

.color-black-a2 {
  color: var(--black-a);
}

@media screen and (min-width: 768px) {
  .md-color-primary {
    color: var(--primary);
  }
  .md-color-primary-light {
    color: var(--primary-light);
  }
  .md-color-primary-lighter {
    color: var(--primary-lighter);
  }
  .md-color-secondary {
    color: var(--secondary);
  }
  .md-color-secondary-light {
    color: var(--secondary-light);
  }
  .md-color-secondary-lighter {
    color: var(--secondary-lighter);
  }
  .md-color-black-a2 {
    color: var(--black-a);
  }
  .md-color-neutral-darker {
    color: var(--neutral-darker);
  }
  .md-color-neutral-dark {
    color: var(--neutral-dark);
  }
  .md-color-neutral {
    color: var(--neutral);
  }
  .md-color-neutral-light {
    color: var(--neutral-light);
  }
  .md-color-neutral-lighter {
    color: var(--neutral-lighter);
  }
  .md-color-neutral-lightest {
    color: var(--neutral-lightest);
  }
  .md-color-white {
    color: var(--white);
  }
}
@media screen and (min-width: 992px) {
  .lg-color-primary {
    color: var(--primary);
  }
  .lg-color-primary-light {
    color: var(--primary-light);
  }
  .lg-color-primary-lighter {
    color: var(--primary-lighter);
  }
  .lg-color-secondary {
    color: var(--secondary);
  }
  .lg-color-secondary-light {
    color: var(--secondary-light);
  }
  .lg-color-secondary-lighter {
    color: var(--secondary-lighter);
  }
  .lg-color-black-a2 {
    color: var(--black-a);
  }
  .lg-color-neutral-darker {
    color: var(--neutral-darker);
  }
  .lg-color-neutral-dark {
    color: var(--neutral-dark);
  }
  .lg-color-neutral {
    color: var(--neutral);
  }
  .lg-color-neutral-light {
    color: var(--neutral-light);
  }
  .lg-color-neutral-lighter {
    color: var(--neutral-lighter);
  }
  .lg-color-neutral-lightest {
    color: var(--neutral-lightest);
  }
  .lg-color-white {
    color: var(--white);
  }
}
@media screen and (min-width: 1200px) {
  .xl-color-primary {
    color: var(--primary);
  }
  .xl-color-primary-light {
    color: var(--primary-light);
  }
  .xl-color-primary-lighter {
    color: var(--primary-lighter);
  }
  .xl-color-secondary {
    color: var(--secondary);
  }
  .xl-color-secondary-light {
    color: var(--secondary-light);
  }
  .xl-color-secondary-lighter {
    color: var(--secondary-lighter);
  }
  .xl-color-black-a2 {
    color: var(--black-a);
  }
  .xl-color-neutral-darker {
    color: var(--neutral-darker);
  }
  .xl-color-neutral-dark {
    color: var(--neutral-dark);
  }
  .xl-color-neutral {
    color: var(--neutral);
  }
  .xl-color-neutral-light {
    color: var(--neutral-light);
  }
  .xl-color-neutral-lighter {
    color: var(--neutral-lighter);
  }
  .xl-color-neutral-lightest {
    color: var(--neutral-lightest);
  }
  .xl-color-white {
    color: var(--white);
  }
}
@media screen and (max-width: 767.98px) {
  .background--gradient-primary-ltr {
    background: transparent linear-gradient(180deg, #4BA7B6 0%, #8AD6DD 100%) !important;
  }
}
/* BORDER */
.border-color-primary {
  border-color: var(--primary);
}

.border-color-primary-light {
  border-color: var(--primary-light);
}

.border-color-primary-lighter {
  border-color: var(--primary-lighter);
}

.border-color-secondary {
  border-color: var(--secondary);
}

.border-color-secondary-light {
  border-color: var(--secondary-light);
}

.border-color-secondary-lighter {
  border-color: var(--secondary-lighter);
}

.border-color-neutral-darker {
  border-color: var(--neutral-darker);
}

.border-color-neutral-dark {
  border-color: var(--neutral-dark);
}

.border-color-neutral {
  border-color: var(--neutral);
}

.border-color-neutral-light {
  border-color: var(--neutral-light);
}

.border-color-neutral-lighter {
  border-color: var(--neutral-lighter);
}

.border-color-neutral-lightest {
  border-color: var(--neutral-lightest);
}

.border-color-white {
  border-color: var(--white);
}

.border-color-black-a2 {
  border-color: var(--black-a);
}

/* BACKGROUND */
.background-primary {
  background-color: var(--primary);
}

.background-primary-light {
  background-color: var(--primary-light);
}

.background-primary-lighter {
  background-color: var(--primary-lighter);
}

.background-primary-dark {
  background-color: var(--primary-dark);
}

.background-secondary {
  background-color: var(--secondary);
}

.background-secondary-light {
  background-color: var(--secondary-light);
}

.background-secondary-lighter {
  background-color: var(--secondary-lighter);
}

.background-secondary-lighter {
  background-color: var(--secondary-lighter);
}

.background-black-a2 {
  background-color: var(--black-a);
}

.background-neutral-darker {
  background-color: var(--neutral-darker);
}

.background-neutral-dark {
  background-color: var(--neutral-dark);
}

.background-neutral {
  background-color: var(--neutral);
}

.background-neutral-light {
  background-color: var(--neutral-light);
}

.background-neutral-lighter {
  background-color: var(--neutral-lighter);
}

.background-neutral-lightest {
  background-color: var(--neutral-lightest);
}

.background-pink {
  background-color: var(--pink);
}

.background-pink-light {
  background-color: var(--pink-light);
}

.background-gray-light {
  background-color: var(--gray-light);
}

.background-white {
  background-color: var(--white);
}

.background-transparent {
  background-color: var(--transparent);
}

/* BGs */
/* GRADIENT */
.background--gradient-primary-ltr {
  background: -o-linear-gradient(var(--gradient-primary-ltr));
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-primary-ltr)));
  background: linear-gradient(var(--gradient-primary-ltr));
}

.background--gradient-primary-fade-ttb {
  background: -o-linear-gradient(var(--gradient-primary-fade-ttb));
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-primary-fade-ttb)));
  background: linear-gradient(var(--gradient-primary-fade-ttb));
}

.background--gradient-brand-ltr {
  background: -o-linear-gradient(var(--gradient-brand-ltr));
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-brand-ltr)));
  background: linear-gradient(var(--gradient-brand-ltr));
}

.background--gradient-white-fade-ttb {
  background: -o-linear-gradient(var(--gradient-white-fade-ttb));
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-white-fade-ttb)));
  background: linear-gradient(var(--gradient-white-fade-ttb));
}

.background--gradient-primary-lighter-fade-ttb {
  background: -o-linear-gradient(var(--gradient-primary-lighter-fade-ttb));
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-primary-lighter-fade-ttb)));
  background: linear-gradient(var(--gradient-primary-lighter-fade-ttb));
}

/* ::before */
.before--top-primary-lighter::before {
  background-color: var(--primary-lighter);
  top: 0;
  height: 20rem;
}

.before--bottom-primary-lighter::before {
  background-color: var(--primary-lighter);
  bottom: 0;
  top: 50%;
}

.before--top-white-cut::before {
  background-color: var(--white);
  top: 0;
  bottom: 70%;
}

.before--top-white-cut-2::before {
  background-color: var(--white);
  top: 0;
  bottom: 85%;
}

.before--bottom-white-cut::before {
  background-color: var(--white);
  bottom: 0;
  top: 70%;
}

@media screen and (min-width: 992px) {
  .background-cover-homepage::before {
    background: -o-linear-gradient(bottom, var(--primary-lighter) 0%, var(--primary-lighter) 30%, var(--black-a) 30%, var(--black-a) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--primary-lighter)), color-stop(30%, var(--primary-lighter)), color-stop(30%, var(--black-a)), to(var(--black-a)));
    background: linear-gradient(0deg, var(--primary-lighter) 0%, var(--primary-lighter) 30%, var(--black-a) 30%, var(--black-a) 100%);
  }
}
.zoom-pop:hover .background-zoom-pop {
  background-color: var(--neutral-lightest);
}

.zoom-pop:hover .background-zoom-pop-dark {
  background-color: var(--neutral-lighter);
}

/* SHADOW */
.shadow-bottom {
  -webkit-box-shadow: var(--shadow-bottom);
  box-shadow: var(--shadow-bottom);
}

.shadow-right {
  -webkit-box-shadow: var(--shadow-right);
  box-shadow: var(--shadow-right);
}

.shadow-bottom-right {
  -webkit-box-shadow: var(--shadow-bottom-right);
  box-shadow: var(--shadow-bottom-right);
}

.text-shadow-bottom {
  text-shadow: var(--shadow-bottom);
}

.text-shadow-bottom-right {
  text-shadow: var(--shadow-bottom-right);
}

@media screen and (min-width: 768px) {
  .shadow-md-bottom {
    -webkit-box-shadow: var(--shadow-bottom);
    box-shadow: var(--shadow-bottom);
  }
  .shadow-md-bottom-right {
    -webkit-box-shadow: var(--shadow-bottom-right);
    box-shadow: var(--shadow-bottom-right);
  }
}
/* BUTTONs */
.button:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* FORMs */
.wpcf7-not-valid {
  border-color: var(--bs-danger);
}

/* SLIDER */
.splide-full .splide__pagination__page.is-active,
.splide-carousel .splide__pagination__page.is-active {
  background: var(--neutral-darker);
}

.splide-mobile .splide__pagination__page.is-active,
.splide-testimonials .splide__pagination__page.is-active {
  background: var(--white);
}

/* ACCORDIONs */
#faqsAccordion .level-1 > button.accordion-button:not(.collapsed) {
  background-color: var(--primary);
  color: var(--white);
}

#faqsAccordion .level-1 > button.accordion-button:not(.collapsed) i {
  color: var(--white);
}

#faqsAccordion .level-2 > button.accordion-button:not(.collapsed) {
  background-color: var(--white);
  color: var(--neutral-darker);
  -webkit-box-shadow: none;
  box-shadow: none;
}

#faqsAccordion .level-2 > button.accordion-button:not(.collapsed) i {
  color: var(--neutral-darker);
}

#searchRecipes button.accordion-button {
  background-color: var(--white);
}

#searchRecipes .accordion-item {
  border-color: var(--black-a);
}

#searchRecipes .accordion-item .accordion-body > div {
  display: flex;
  align-items: center;
  height: 2rem;
}

#searchRecipes .accordion-item .accordion-button > div > p:nth-child(2) {
  white-space: nowrap;
  text-overflow: ellipsis;
}

#searchRecipes .accordion-item .accordion-body > div:hover,
#searchRecipes .accordion-item .accordion-body > div.active {
  background-color: var(--neutral-lightest);
}

#searchRecipes .accordion-item.active,
#footerForm.active {
  border-color: var(--primary);
  -webkit-box-shadow: var(--shadow-bottom-right);
  box-shadow: var(--shadow-bottom-right);
}

#footerForm {
  border-color: var(--white);
}

#footerAccordion .icon-border:hover {
  background-color: var(--secondary);
}

/* PAGINATION */
.page-numbers {
  color: var(--neutral-darker);
}

.page-numbers:first-child,
.page-numbers:last-child {
  background-color: var(--neutral-lightest);
}

.page-numbers.current {
  background-color: var(--primary);
}

.page-numbers:hover {
  background-color: var(--primary-light);
}

.page-numbers:hover,
.page-numbers:hover i,
.page-numbers.current {
  color: var(--white);
}

/* WOOCOMMERCE */
#woocommerce-MyAccount-navigation .is-active {
  background-color: var(--grayed-out);
}

.category-menu-item:hover > .category-menu-link,
.category-menu-item.active > .category-menu-link {
  color: var(--white);
  background: var(--primary);
}

.product-card:hover {
  -webkit-box-shadow: var(--shadow-bottom-right);
  box-shadow: var(--shadow-bottom-right);
}

.price del {
  color: var(--neutral-light);
}

.woocommerce-product-gallery__trigger {
  background-color: var(--white);
}

.woocommerce table.shop_table_responsive tr td:before,
.woocommerce-page table.shop_table_responsive tr td:before {
  color: var(--neutral);
}

.required {
  color: var(--danger);
}

/* woocommerce lightbox magnifying glass */
.pswp__bg {
  background: rgba(0, 0, 0, 0.7);
}