:root {
    /* BLUEs */
    --primary: #00ADBB;
    --primary-light: #C1DEE2;
    --primary-lighter: #ECF4F5;
    --primary-dark: #479DA7;

    /* GREENs */
    --secondary-dark: #AEB700;
    --secondary: #C2CC00;
    --secondary-light: #DCE08E;
    --secondary-lighter: #F0F1D2;

    /* ACCENT */
    --accent: #EF346D;

    /* 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: 2px 3px 4px 2px var(--black-a);


    --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);
}

.woocommerce .alert a:hover {
    color: var(--neutral);
}

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 rgb(13 110 253 / 25%);
            box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 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,.7);
}