/* 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: 
    
The Star Icon

Top (Blue): #00AEEF (Cyan Blue)

Right (Yellow/Gold): #FFD200 (Golden Yellow)

Bottom Right (Magenta/Pink): #EC008C (Process Magenta)

Bottom Left (Purple/Indigo): #662D91 (Deep Purple)

Left (Teal/Aqua): #00A99D (Persian Green)

The Typography

"STAGEWORKS": #808285 (Neutral Gray)

"STUDIOS": #231F20 (Rich Charcoal / Off-Black)
    */
:root {
	/* brand root colours */
	--blue:#00AEEF;
	--yellow:#FFD200;
	--pink:#EC008C;
	--purple:#662D91;
	--teal:#00A99D;
	--gray:#808285;
	--black:#231F20 ;
	/* element colours */
	
	--brand-background:	white;
	--brand-text-color: var(--blue);
	--main-color: black;
	--header-color: black;
	--header-background: transparent;
	--topnav-background: transparent;
	--topnav-color: var(--light-blue);
	--nav-background: transparent;
	--nav-color: var(--light-blue);
    --nav-hover-color: grey;
	--button-background: var(--blue);
	--button-color: white;
	--footer-background: white;
	--footer-color: var(--gray);
}

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

#sociallinks {color:var(--purple);}

#gallery, #video-gallery {
background: transparent; 
}

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

#gallery #halfblock button:nth-of-type(2), #video-gallery #halfblock button:nth-of-type(2) {
	background:#5ba7fa54;
}

#front #main, #black-strip {
	background:black;
	border-top:1px solid var(--light-blue);
	padding:1.5% 0;
}

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: white;
   background: var(--purple);
}

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}


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