/* You can change this file
This css is for anything related to colours of main divs

Paste the brand colours you've been given here: 
    
#115811 - dark green
#c3d86e - light green

    */
:root {
	/* brand root colours */
	--dark-green: #115811;
	--light-green: #c3d86e;
	/* element colours */

	--brand-background:var(--dark-green);
	--brand-text-color:white;
	--main-color:white;
	--header-color:white;
	--header-background: var(--dark-green);
	--topnav-background:var(--dark-green);
	--topnav-color:white;
	--nav-background: transparent;
	--nav-color: white;
    --nav-hover-color: var(--light-green);
	--button-background: var(--light-green);
	--button-color: var(--dark-green);
	--footer-background: white;
	--footer-color: var(--dark-green);
}


.invert {
	filter: brightness(0) invert(1);
}

.has-background, .brand_colour {
	background: var(--brand-background);	
	color: var(--brand-text-color);
}

html, body, { 
color: var(--main-color); 
background: var(--dark-green);
 }

#main h1, #main h2 {
	color: var(--dark-green);
}

#page {
color: inherit;
}

/* Backgrounds */

#page {
background: inherit;    
}

#header { color: var(--header-color);
 background: var(--header-background); 
 }

#topnav {
background: var(--topnav-background);
color:var(--topnav-color);
}

#header > #page {
background: transparent !important;
}

#logo {
background: inherit;
}

#nav {
background: var(--nav-background); 
color: var(--nav-color); 
}

#nav li a {
background: transparent;    
color: var(--nav-color);   
}

#nav li a:hover {
    color: var(--nav-hover-color);
}

#galleryoverlay {
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

#gallery #page, #gallery {
	background: transparent;
}

#gallery #page #thirdblock #inset li {
	color:var(--dark-green);
	background:var(--light-green);
}

#gallery #fullblock {
   background: transparent;
	color: white;
}

#gallery #fullblock #thirdblock {
	background: white;
}

button, .wp-block-button {
   background: white;
   color: var(--button-color);
   border: 3px solid var(--light-green);
}

button.green {
   background: var(--button-background);
   color: var(--button-color);
   border: 3px solid var(--light-green);	
}

.has-background button, .has-background .wp-block-button, .has-background button a, .has-background .wp-block-button a{
	/* switched */
   color: var(--button-color);
   background: white;
   border: 0px solid var(--light-green);
}

.has-background .wp-block-button, .has-background button {
	border: 3px solid var(--light-green);
}

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}

#footer {
   background: var(--footer-background);
   color: var(--footer-color);
}

.has-white-color {
color: white !important;	
}