/* 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: 
#1eabc7 - Light blue
#39729b - blue
#8ed5f4 - blue-overlay
#0c3c60 - dark-blue
#d1e0eb - gray


    */
:root {
	/* brand root colours */
	--dark-blue: #0c3c60;
	--gray:#d1e0eb;
	--light-blue:#1eabc7;
	--blue:#39729b;
	--blue-overlay:#8ed5f4;
	--green:#19af54;
	--transparent-black: #00000070; 
	/* element colours */
	
	--brand-background:	black;
	--brand-text-color: white;
	--main-color: black;
	--header-color:var(--dark-blue);
	--header-background:white;
	--topnav-background:transparent;
	--topnav-color:var(--dark-blue);
	--nav-background: transparent;
	--nav-color:var(--dark-blue);
    --nav-hover-color: var(--gray);
	--button-background: var(--gray);
	--button-color: black;
	--footer-background:var(--dark-blue);
	--footer-color: white;
}

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

#gallery {
background: transparent; 
}

#gallery #halfblock, #long-gallery #halfblock {
   background: transparent;
	color: white;
}

#blue-strip {
background:#1eabc7c7;
padding:10px 0;
font-size:20px;}

button, .wp-block-button {
   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-background);
   background: var(--button-color);
   border: 3px solid var(--light-green);
}

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}

.wp-block-columns.coloured-blocks .wp-block-column .wp-block-button {
	font-size:14px!important;
	padding:10px 40px;
	text-transform:uppercase;
	background:white;
	font-weight:500;
}

.wp-block-columns.coloured-blocks .wp-block-column .wp-block-button a:hover {
color:white!important}

.wp-block-columns.coloured-blocks .wp-block-column .wp-block-button a {
background:inherit;
}

.wp-block-columns.coloured-blocks .wp-block-column:first-of-type .wp-block-button a {
	color:#1073b8;
}

.wp-block-columns.coloured-blocks .wp-block-column:first-of-type .wp-block-button:hover {
background:var(--green);
}

.wp-block-columns.coloured-blocks .wp-block-column:nth-of-type(2) .wp-block-button a {
	color:#8ed5f4;
}

.wp-block-columns.coloured-blocks .wp-block-column:nth-of-type(2) .wp-block-button:hover {
	background:#1073b8;
}

.wp-block-columns.coloured-blocks .wp-block-column:last-of-type .wp-block-button a {
color:var(--green);}

.wp-block-columns.coloured-blocks .wp-block-column:last-of-type .wp-block-button:hover {
	background:#8ed5f4;
}

.wp-block-column.services-block.blue-overlay .wp-block-column .wp-block-cover .wp-block-cover__inner-container {
	background:#1073b8db;
}

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

#footer #thirdblock p:nth-of-type(1) {
	color:var(--purple);
}