/* 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: 
    
blue : #224fb0
grey : #dfdfdf
light-grey: #eaeaea
dark-grey: #0c0c0c 
light-blue:#4171d8;
black
white

/* hover colour 
grey #616161 */


:root {
	/* brand root colours */
	--blue: #224fb0;
	--grey: #dfdfdf;
	--light-grey:#eaeaea;
	--light-blue:#4171d8;
	--dark-grey:#0c0c0c;
	/* element colours */
	
	--brand-background:	var(--light-grey);
	--brand-text-color: black;
	--main-color: black;
	--header-color: black;
	--header-background: var(--light-grey);
	--topnav-background: var(--grey);
	--topnav-color:black;
	--nav-background: transparent;
	--nav-color: white;
    --nav-hover-color: white;
	--button-background: var(--light-blue);
	--button-color:white;
	--footer-background: black;
	--footer-color: white;
}

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

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

#topnav #page #halfblock i, #topnav #page #halfblock:nth-of-type(1) p{
	color:var(--blue);
}

#header #fullblock:has(#navwrapper) {
	background:#161616;
}

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


#footer #sociallinks li:hover {
	background:var(--blue);
}

#logo {
background: inherit;
}

#nav li:active {
	color:var(--nav-hover-color);
	border-bottom:3px solid var(--blue);
}

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

#nav li:hover {
	border-bottom:3px solid var(--blue);
	background:#333333;
	 color: var(--nav-hover-color);
}

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



#gallery {
background: transparent; 
}

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

#gallery #halfblock button {
	background:transparent;
	border:1px solid white;
	border-radius:var(--square);
	margin-top:20px;

}

#gallery #fullblock p, #short-gallery #fullblock p{
	color:white;
	font-size: 2.4vw;
}

#front, #main {
	background:white;
}


#gallery button:hover {
	background:white!important;
	color:black;
}

button:hover, .wp-block-button:hover {
	background:var(--blue);
}

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

.blue-border {
border-top:1px solid var(--blue);}

/*.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;
}

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

#footer #fullblock:nth-of-type(1) {
	background:var(--dark-grey);
}