/* 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: 
    
 black - #000000
white - #ffffff
light blue #40b2df
grey #525a58
pink #e3c3da
dark blue #6996af

Additional:

Background grey: #f4f4f4
    */
:root {
	/* brand root colours */
	--light-blue: #40b2df;
	--grey:#525a58;
	--pink:#e3c3da;
	--dark-blue: #6996af;
	--light-grey:#f4f4f4;
	--blue: #a6d6e4;
	--transparent-black: #00000070; /* var(--transparent-black) */
	/* element colours */
	
	--brand-background:	black;
	--brand-text-color: white;
	--main-color: black;
	--header-color: black;
	--header-background: white;
	--topnav-background: white;
	--topnav-color: black;
	--nav-background: transparent;
	--nav-color: black;
    --nav-hover-color: gray;
	--button-background: var(--light-blue);
	--button-color: black;
	--footer-background:var(--light-grey);
	--footer-color: black;
}

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

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


html, body, #main { color: var(--main-color); }

#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);*/
	border-bottom:3px solid var(--pink);
}



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

#gallery #thirdblock #thirdblock:nth-of-type(2) #sixthblock {
	background: var(--light-blue);
}

#pebbles {
	background:var(--blue);
	color:black;
}


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

.wp-block-button {
background: var(--pink);
   color: black;
   border-radius:var(--circular)!important;
}

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

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}

main {
	background: #f6f6f6;
}

main h2 {
	color: #333333;
}

main #twothirdsblock:nth-of-type(1) p, main #twothirdsblock:nth-of-type(1) label, main form table tbody select, main form table tbody span {
	color:#747474;
}

.field_required_asterisk {
	color: #790000;
	margin-left: 
}

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

#main h1.center {
	background: var(--pink);
	padding: 2%;
}