/* 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: 
    
    #000000 black
    #edb200 yellow
    #d30000 red

*/
:root {
	--yellow: #edb200; /* var(--yellow) */
    --red: #d30000; /* var(--red) */
	--gray: #353535; /* var(--gray) */
	--header-background: black;
	--topnav-background: var(--gray);
	--topnav-color: white;
	--transparent-black: #00000070; /* var(--transparent-black) */
	--purple: #871bff; /* var(--purple) */
	--orange: #e68a1c; /* var(--orange) */
	--green: #09e002; /* var(--green) */
}
#main { color: var(--gray); }

.gray { background: #dedede !important; }

html, body ,
#header ,
#footer { color: var(--gray);
 background: white; 
 }
 
div.brand_colour {
    background: var(--yellow) !important;
    color: black !important;
}

#page {
color: inherit;
}

/* Backgrounds */

#page {
background: inherit;    
}

#header {
background: var(--header-background); 
background-size: 100% 100%;       
}

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

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

#logo {
background: inherit;
}

#nav {
background: transparent; 
color: white; 
}

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

#nav li a:hover {
    color: var(--gray);
}

#gallery {
background: white; 
}

#gallery #halfblock {
    background: var(--transparent-black);	
	color: white;
}

button {
   background: var(--red);
   color: white;
}

#main {
background: white;
}

.section_banner {
color:  white;
}

#halfblock {
background: inherit;
}

#thirdblock {
    background: inherit;
}

#footer {
    background: #2f2f2f; /* gray */
}

.black {
    background: black !important;
    color: white !important;
}

#mobilenav li{
	color:var(--yellow);
}