/* 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
navy - #161A32
light-blue - #5084B6
grey - #69727d
purple - #434866
dark-purple - #161A32
black - #333
    */
:root {
	/* brand root colours */
	--navy: #161A32; 
	--grey: #69727d;
	--black:  #333;
	--light-blue:#5084B6;
	--purple: #434866;
	--dark-purple: #161A32;
	--transparent-black: #00000070; /* var(--transparent-black) */
	/* element colours */
	
	--brand-background:	black;
	--brand-text-color: white;
	--main-color: black;
	--header-color: white;
	--header-background:var(--navy);
	--topnav-background: var(--navy);
	--topnav-color: white;
	--nav-background: transparent;
	--nav-color: white;
    --nav-hover-color: var(--gold);
	--button-background: var(--light-blue);
	--button-color: white;
	--footer-background:var(--navy);
	--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, #gallery #twothirdsblock, #long-gallery #twothirdsblock {
   background: transparent;
	color: white;
}

#gallery #twothirdsblock p:nth-of-type(2), #long-gallery #twothirdsblock p:nth-of-type(2) {
	color: var(--light-blue);
}

#front #main #fullblock:nth-of-type(1) {
	color:white;
}

#front #main #fullblock:nth-of-type(1) span,  #front #main #fullblock:nth-of-type(4) span, #front #main #fullblock:nth-of-type(4) #halfblock:nth-of-type(2) span{
	color:var(--light-blue);
}

.gradient {
	background:linear-gradient(316deg, var(--purple)0%, var( --dark-purple) 100%);
color:white;
}


#fullblock.gradient-image #halfblock #twothirdsblock {
	border-radius:20px;
	background:var(--light-blue);
	color:white;
}

#front #main #fullblock:nth-of-type(2) #twothirdsblock h2, #front #main #fullblock:nth-of-type(3) #twothirdsblock h2, #front #main #fullblock:nth-of-type(3) #twothirdsblock p{
	color:var(--black);
}

#front #main #fullblock:nth-of-type(5) #halfblock {
	color:white;
}

.wp-block-button {
	padding: 12px 20px !important;
	border-radius:var(--rounded)!important;
}

.wp-block-button:hover,  .has-background .wp-block-button:hover {
	    background: #b2b2b2!important;
}

button, .wp-block-button {
   background: var(--button-background);
   color: var(--button-color);
	font-weight:normal!important;
}

.has-background button, .has-background .wp-block-button {
	/* switched */
   background: var(--button-background);
   color: var(--button-color);
}

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}

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