/*** START dark mode ***/

/*
	exclude dark mode for:
	.wp-dark-mode-ignore - use this class on elements that we want to exclude from dark mode
	.esg-cc - home page - recent product - hover - options stripe black
	.ulp-overlay - desktop popup overlay
	.ulp-content - desktop popup container
	.ulp-window - desktop popup window
*/
html :not(.wp-dark-mode-ignore):not(.esg-cc):not(.ulp-overlay):not(.ulp-content):not(.ulp-window):not(mark):not(code):not(pre):not(ins):not(option):not(input):not(select):not(textarea):not(button):not(a):not(video):not(canvas):not(progress):not(iframe):not(svg):not(path):not(.mejs-iframe-overlay):not(.elementor-element-overlay):not(.elementor-background-overlay):not(.slider_wrap):not(rs-fullwidth-wrap):not(rs-module-wrap):not(rs-module):not(rs-slides):not(rs-slide):not(rs-sbg-px):not(rs-sbg-wrap):not(rs-sbg):not(rs-layer-wrap):not(rs-loop-wrap):not(rs-mask-wrap):not(rs-layer):not(rs-layer):not(img) {
    background-color: #000000 !important;
    /*background-color: #1b2836 !important;*/
    color: #fff !important;
    border-color: #459be6 !important;
    border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
}

html a:not(.wp-dark-mode-ignore),
html a *:not(.wp-dark-mode-ignore),
html a:active:not(.wp-dark-mode-ignore),
html a:active *:not(.wp-dark-mode-ignore),
html a:visited:not(.wp-dark-mode-ignore),
html a:visited *:not(.wp-dark-mode-ignore) {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #459be6 !important;
	border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
}

html button:not(#collapse-button):not(.search-toggle):not(.wp-dark-mode-ignore),
html iframe:not(.wp-dark-mode-ignore),
html iframe *:not(.wp-dark-mode-ignore),
html input:not(.wp-dark-mode-ignore),
html input[type="button"]:not(.wp-dark-mode-ignore),
html input[type="checkebox"]:not(.wp-dark-mode-ignore),
html input[type="date"]:not(.wp-dark-mode-ignore),
html input[type="datetime-local"]:not(.wp-dark-mode-ignore),
html input[type="email"]:not(.wp-dark-mode-ignore),
html input[type="image"]:not(.wp-dark-mode-ignore),
html input[type="month"]:not(.wp-dark-mode-ignore),
html input[type="number"]:not(.wp-dark-mode-ignore),
html input[type="range"]:not(.wp-dark-mode-ignore),
html input[type="reset"]:not(.wp-dark-mode-ignore),
html input[type="search"]:not(.wp-dark-mode-ignore),
html input[type="submit"]:not(.wp-dark-mode-ignore),
html input[type="tel"]:not(.wp-dark-mode-ignore),
html input[type="text"]:not(.wp-dark-mode-ignore),
html input[type="time"]:not(.wp-dark-mode-ignore),
html input[type="url"]:not(.wp-dark-mode-ignore),
html input[type="week"]:not(.wp-dark-mode-ignore),
html select:not(.wp-dark-mode-ignore),
html textarea:not(.wp-dark-mode-ignore),
html i:not(.wp-dark-mode-ignore) {
    background-color: #354250 !important;
    color: #fff !important;
    border-color: #459be6 !important;
	border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
}

html button:not(#collapse-button):not(.search-toggle) *,
html iframe *,
html iframe * *,
html input *,
html input[type="button"] *,
html input[type="checkebox"] *,
html input[type="date"] *,
html input[type="datetime-local"] *,
html input[type="email"] *,
html input[type="image"] *,
html input[type="month"] *,
html input[type="number"] *,
html input[type="range"] *,
html input[type="reset"] *,
html input[type="search"] *,
html input[type="submit"] *,
html input[type="tel"] *,
html input[type="text"] *,
html input[type="time"] *,
html input[type="url"] *,
html input[type="week"] *,
html select *,
html textarea *,
html i * {
    background: transparent !important;
    border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
}


/*** END Dark Mode ***/

/* START home page product hover overlay background for dark theme */
.esg-entry-cover .esg-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
}
#dont-ask-me-where-i-get-my-protein-from-slider .esg-entry-cover .esg-overlay {
    background-color: rgba(255, 255, 255, 0.65) !important;
}
/* END home page product hover overlay background for dark theme */

/* START to prevent the footer text from overlaping the bottop left golder stripe in smaller screens */
@media (max-width: 959px) {
    #text-2 {
        width: 50%;
        float: right;
    }
}

@media (max-width: 479px) {
    #text-2 {
        width: 100%;
        float: left;
        margin-bottom: 156px;
    }
}
/* END to prevent the footer text from overlaping the bottop left golder stripe in smaller screens */

/* START footer bg for dark theme */
.footer_wrap_inner {
    background-color: black!important;
}
/* END footer bg for dark theme */

/* START top menu bar color */
.scheme_original .menu_main_nav > li > a {
    color: #D2Ac60!important;
}
/* START top menu bar color */

/* START top menu bar active item */
.scheme_original .menu_main_nav > li.current-menu-item > a {
    font-weight: bold!important;
    font-size: 1.2em!important;
    margin-top: -6px!important;
    margin-bottom: -9px!important;
    padding-bottom: 13px;
    color: #E4CD9F!important;
    border-color: #E4CD9F!important;
}
/* START top menu bar active item */

/** START desktop popup overlay background color in dark theme **/
.ulp-overlay {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* START about us page - section */
.sc_item_title {
    background-color: transparent!important;
    color: pink!important;
    
    /* Fallback: Set a background color. */
    background-color: red;

    /* Create the gradient. */
    background-image: linear-gradient(90deg, #d2ac60, #d2ac60, #d2ac60, #e4cda1, #d2ac60, #d2ac60, #d2ac60);

    /* Set the background size and repeat properties. */
    background-size: cover;
    background-repeat: no-repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

#page-id-902 > .sc_title {
    display: inline-block;
    font-size: 29px!important;
    margin-top: 2em;
}

.sc_title {
    background-color: transparent!important;
    color: pink!important;
    
    /* Fallback: Set a background color. */
    background-color: red;

    /* Create the gradient. */
    background-image: linear-gradient(90deg, #d2ac60, #d2ac60, #e4cda1, #e4cda1, #d2ac60, #d2ac60);

    /* Set the background size and repeat properties. */
    background-size: cover;
    background-repeat: no-repeat;

    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
}

.sc_item_title:after {
    content: ""!important;
}

.sc_column_item {
    text-align: center;
}

.sc_column_item > div {
    text-align: justify;
}

.large-text {
    font-size: 22px!important;
    line-height: 27px;
}

button.sc_emailer_button.icon-symbol {
    background-color: transparent!important; 
    color: white!important; 
}

button.search_submit.icon-search {
    background-color: transparent!important; 
}

.scheme_original .top_panel_middle .sidebar_cart:after,
.scheme_original .search_wrap .search_results:after {
    background-color: black!important;
    border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
}

.scheme_original .top_panel_cart_button:before {
    background-color: #d2ac60!important;
}

/* END about us page - section */

/* START shop page */
.woocommerce-loop-product__title>a,
.widget_title, /* category list title item */
.cat-item>a { /* category list item */
    color: #d2ac60!important;
    background-color: transparent!important;
}

.scheme_original .top_panel_style_1 .top_panel_middle .contact_icon:before {
    color: #d2ac60!important;
}

.woocommerce-ordering:after {
    background-color: transparent!important;
}

.scheme_original .hover_icon:before {
    color: #d2ac60!important;
}

.scheme_original .scroll_to_top {
    background-color: #d2ac60!important;
}

.scheme_original .scroll_to_top:hover {
    background-color: #A8894C!important;
}

/* END shop page */

/* START top bar menu dropdown */
.scheme_original .top_panel_inner_style_1 .menu_main_nav > li ul, .scheme_original .top_panel_inner_style_2 .menu_main_nav > li ul, .scheme_original .menu_main_nav > li ul {
    background-color: black !important;
    border-color: #459be6 !important;
    border-image: linear-gradient(45deg, #a4a5a7, white, #a4a5a7, white, #a4a5a7, white, #a4a5a7) 1 !important;
    border-width: 1px;
}

.scheme_original .top_panel_inner_style_1 .menu_main_nav > li ul li a, .scheme_original .top_panel_inner_style_2 .menu_main_nav > li ul li a, .scheme_original .menu_main_nav > li ul li a {
    color: #ffffff!important;
    padding-top: 6px!important;
}

.scheme_original .menu_main_nav > li ul li a:hover, .scheme_original .top_panel_inner_style_1 .menu_main_nav > li ul li a:hover, .scheme_original .top_panel_inner_style_1 .menu_main_nav > li ul li.current-menu-item > a, .scheme_original .top_panel_inner_style_1 .menu_main_nav > li ul li.current-menu-ancestor > a, .scheme_original .top_panel_inner_style_2 .menu_main_nav > li ul li a:hover, .scheme_original .top_panel_inner_style_2 .menu_main_nav > li ul li.current-menu-item > a, .scheme_original .top_panel_inner_style_2 .menu_main_nav > li ul li.current-menu-ancestor > a {
    color: #d2ac60!important;
}

/* END top bar menu dropdown */
