/*   
Theme Name: Nibble
Author: Third System
Version: 1.0.2
*/
:root{
    --brand-color : #6B3077;
    --light-color : #ffffff;
}

header img{
    object-fit: contain;
}
header h1 a, header #logo a, #footer-logo{
    background-size: contain;
}
.page-id-29 header h1 a, .page-id-29 header #logo a, #footer-logo{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("./css/Nibble-Simply-White-with-purple-dot.png");
}

.page-id-29 header nav ul li a:hover, 
header nav ul li.current a, 
header nav ul li a:hover,
.full-width-header .wrapper h1,
.panel h4,
.full-width-header .wrapper h1,
p a{
    color: var(--brand-color);
}

.flavour-copy h3, .flavour-copy h4, .flavour-copy h5, .flavour-copy h6,.parallax-content h2,
#graph h4{
    color: var(--light-color);
}

.ellipse{
    background-color: var(--brand-color);
}
.scrolledabit .ellipse-content.faded{
    color: var(--light-color);
}

.box-link.black:hover, .button:hover, .single-product .single_add_to_cart_button.button:hover{
    background-color: var(--light-color);
    color: var(--brand-color)!important;
    border-color: var(--brand-color);
}
.box-link:hover{
    background-color: var(--light-color);
}
.flavours-intro{
    border-color: var(--brand-color);
}

.parallax-parent .box-link.yellow,
    .panel.white .box-link.yellow,
    .graph-copy .box-link.yellow,
        .box-link.yellow, .woocommerce-page.woocommerce-lost-password .button, .wc-proceed-to-checkout .button, .wpcf7-submit, #customer_login .button, .return-to-shop .button, #place_order{
    background-color: var(--brand-color);
    color: var(--light-color)!important;
    border-color: var(--brand-color);
}
.graph-copy .box-link.yellow:hover,
.parallax-parent .box-link.yellow:hover,
.panel.white .box-link.yellow:hover,
.box-link.yellow:hover, #customer_login .button:hover, #place_order:hover, .woocommerce-page.woocommerce-lost-password .button:hover{
    background-color: var(--light-color);
    color: var(--brand-color)!important;
}

.footer-mailing form button{
    background-color: var(--brand-color)!important;
    color: var(--light-color)!important;
    border-color: var(--brand-color)!important;  
}

.footer-mailing form button:hover{
    background-color: var(--light-color)!important;
    color: var(--brand-color)!important;
}