:root {
	/* Font choices */
	--font-body-face:Figtree,Arial,sans-serif;
	--font-body-weight:300;
	--font-title-face:Figtree,Arial,sans-serif;
	--font-title-weight:700;
	--font-title-transform:none;
	--font-title-spacing:normal;
	--font-menu-transform:none;

	/* Colour scheme */
	--colourwhite:#ffffff; /* White */
	--colourlightgrey:#d5d5d5; /* Light grey */
	--colourdarkgrey:#748091; /* Dark grey */
	--colourblack:#000000; /* Black */
	--colourgreen:#00ff00; /* Bright green for 'Yes' */
	--colourred:#ff0000; /* Bright red for 'No' or 'Error' */
	--themecolour1:#f06e20; /* orange */
	--themecolour1light:#f09340;
	--themecolour1dark:#d1530f;
	--themecolour2:#000033; /* dark blue */
	--themecolour2light:#24244d;
	--themecolour2dark:#xxx;
	--themecolour3:#005aa8; /* ultramarine */
	--themecolour3light:#xxx;
	--themecolour3dark:#xxx;
	--themecolour4:#20bc2b; /* green */
	--themecolour4light:#89e58b;
	--themecolour4dark:#xxx;
	--themecolour5:#xxx; /* xxx */
	--themecolour5light:#xxx;
	--themecolour5dark:#xxx;
	--themecolour6:#xxx; /* xxx */
	--themecolour6light:#xxx;
	--themecolour6dark:#xxx;
	--themecolour7:#xxx; /* xxx */
	--themecolour7light:#xxx;
	--themecolour7dark:#xxx;

	/* Other design parameters */
	--page-background-colour:#ffffff;
	--page-foreground-colour:#000000;
	--structural-border-radius:10px; /* Item blocks, image panels, accordion headers, video housings etc. */
	--structural-content-padding-vertical:100px; /* Min: 20px! Padding top and bottom of section content */
	--structural-grid-column-spacing:0.6rem; /* Gap between columns, blocks and similar elements */
	--input-border-radius:10px;
	--content-inset:0px; /* Margin around the header, footer and some blocks */
	--tallheader-height:60vh; /* Varies if the site has a custom header above the menu. Use 90vh if it doesn't */
	--overlaygradient-background-direction:90deg;
	--overlaygradient-background-start-pos:0%;
	--overlaygradient-background-start-colour:var(--themecolour1);
	--overlaygradient-background-end-pos:100%;
	--overlaygradient-background-end-colour:rgba(0, 0, 0, 0);
	--overlaygradient-opacity:1;
	--overlayimage-position:right bottom;
	--overlayimage-size:60%;
	--link-relaxed-colour:var(--colourlightgrey);
	--link-hover-colour:var(--colourwhite);
	--link-hover-decoration:underline;

	/* Buttons */
	--button-relaxed-colour-bg:var(--themecolour1);
	--button-relaxed-colour-fg:var(--colourwhite);
	--button-relaxed-border:none;
	/*--button-relaxed-shadows:none;*/
	--button-relaxed-shadows:0px 4px 10.4px 3px #00000040;
	--button-relaxed-right-bgimageurl:url(../site/furniture/icon-direction-right-colourwhite.png);
	--button-relaxed-left-bgimageurl:url(../site/furniture/icon-direction-left-colourwhite.png);
	--button-hover-colour-bg:var(--themecolour1);
	--button-hover-colour-fg:var(--colourwhite);
	--button-hover-border:none;
	--button-hover-shadows:none;
	/*--button-hover-shadows:0px 1px 3px 1px #00000040;*/
	/*--button-hover-translate:none;*/
	--button-hover-translate:translateY(2px);
	--button-border-radius:10px;
	--font-button-transform:uppercase;
	--font-button-size:1rem;
	--font-button-font:var(--font-body-face);

	/* Grid and carousel item blocks with image above text */
	--itemblocks-bgcolour:var(--themecolour1);
	--itemblocks-fgcolour:var(--colourblack);
	--itemblocks-bghovercolour:var(--themecolour2light);
	--itemblocks-fghovercolour:var(--colourwhite);

	/* CTA tab for 'explore', 'whats next' etc - if enabled */
	--stickytab-top:auto;
	--stickytab-right:0;
	--stickytab-bottom:0;
	--stickytab-left:auto;
	--stickytab-headerjustify:end; /* start or end for left or right title text */
	--stickytab-header-fgcolour:var(--themecolour2);
	--stickytab-header-bgcolour:var(--themecolour1);
	--stickytab-bgcolour:var(--themecolour2dark);

	/* Floating CTA button - if enabled */
	--ctafloater-top:100px;
	--ctafloater-right:0;
	--ctafloater-bottom:auto;
	--ctafloater-left:auto;
	--ctafloater-bgcolour:var(--themecolour2);
	--ctafloater-fgcolour:var(--colourwhite);

	/* Back to top button - if enabled */
	--backtotop-bottom:0; /* Probably should be the same as the bottom var for the CTA tab */
	--backtotop-bgcolour:var(--themecolour1dark);

	/* Menu/header and footer style */
	--headerfooter-border-radius:0px;
	--header-shadow:1px 8px 10.4px 3px #00000040; /* Also used for floating CTAs */
	/*--header-shadow:none; */ /* Also used for floating CTAs */
	--header-logo-height:50px;
	--mainlogo-padding:16px 30px 16px 30px;
	--headerbackgroundcolour:var(--themecolour1);
	--headerbackgroundcolourhover:var(--themecolour1dark);
	--menu-border-radius:10px;
	--menupadding-lr:15px;
	--menuentrycolour:var(--colourwhite);
	--menuentrycolourselected:var(--themecolour2);
	--footerbackgroundcolour:var(--themecolour2);
	--footerforegroundcolour:var(--colourwhite);
}

.headerflair{
	/*color:var(--themecolour1); Not used */
}


/* Header */
header{
	padding:40px;
	background-color:var(--themecolour2);
	color:var(--colourwhite);
}
header .bigger-inner{
	display:table;
	width:100%;
}
header .col1,
header .col2,
header .col3,
header .col4{
	display:table-cell;
	vertical-align:top;
}
header .col1{
	width:300px;
}
header .col2{
	width:calc(50% - 300px);
	vertical-align:bottom;
}
header .col3{
	width:20%;
	text-align:right;
	vertical-align:bottom;
}
header .col4{
	width:30%;
	text-align:right;
	vertical-align:bottom;
}
header .col1 img{
	width:250px;
	height:auto;
}
header .col3 img{
	width:200px;
	height:auto;
}
header h5{
	font-size:30px;
	line-height:30px;
}
header h4{
	font-size:48px;
	line-height:50px;
}
header h4 span,
header h5 span{
	color:var(--themecolour1);
}
header a{
	color:var(--colourwhite);
}
header a:hover{
	color:var(--themecolour1light);
}
@media only screen and (max-width:1280px){
	header .col2{
		display:none;
	}
	header .col3{
		width:calc(100% - 620px);
	}
	header .col4{
		width:280px;
	}
	header h5{
		font-size:20px;
		line-height:20px;
	}
	header h4{
		font-size:28px;
		line-height:30px;
	}
}
@media only screen and (max-width:900px){
	header .bigger-inner{
		display:block;
	}
	header .col1,
	header .col3,
	header .col4{
		display:block;
	}
	header .col1{
		float:left;
	}
	header .col3 img{
		width:150px;
		height:auto;
	}
	header .col3,
	header .col4{
		float:right;
		width:calc(100% - 300px);
	}
	header .col4{
		margin-top:30px;
	}
}
@media only screen and (max-width:640px){
	header{
		padding:20px;
	}
	header .col1{
		width:150px;
	}
	header .col1 img{
		width:100%;
		height:auto;
	}
	header .col3,
	header .col4{
		float:right;
		width:calc(100% - 150px);
	}
	header .col4{
		min-width:270px;
	}
	header .col3 img{
		width:100px;
	}
}
/* /Header */


/* Footer */
footer .footercolumns::after,
footer .col12::after,
footer .col34::after{
	display:block;
	content:' ';
	clear:both;
}
footer .col12,
footer .col34{
	float:left;
}
footer .col12{
	width:calc(100% - 500px);
}
footer .col34{
	width:500px;
}
footer .col1,
footer .col2,
footer .col3,
footer .col4{
	float:left;
}
footer .col1{
	width:20%;
}
footer .col2{
	width:80%;
}
footer .col3{
	width:350px;
}
footer .col4{
	width:150px;
	text-align:right;
}
footer .footercol{
	padding:40px 20px 0 0;
}
footer .col4 .footercol{
	padding-right:0;
}
footer img.logo{
	width:100%;
	max-width:82px;
	height:auto;
}
footer ul{
	margin:0;
}
footer ul.menu{
	margin-top:30px;
	margin-bottom:15px;
	list-style-type:none;
}
footer ul.menu li{
	font-size:1rem;
	color:var(--footerforegroundcolour);
	padding:0 10px 0 0;
}
footer ul.menu li a{
	white-space:nowrap;
	font-size:1rem;
}
footer .socialicons,
footer .affiliationicons{
	/*margin-top:20px;*/
}
footer .socialicons a,
footer .affiliationicons a{
	display:inline-block;
	margin:0 0 5px 5px !important;
	padding:0 !important;
}
footer .affiliationicons img{
	margin:0 10px 5px 0;
}
footer .socialicons img{
	width:30px;
	height:30px;
}
footer p,
footer a{
	color:var(--footerforegroundcolour);
}
footer a:hover{
	color:var(--footerforegroundcolour);
}
footer .copyright{
	z-index:3;
	position:relative;
}
footer .copyright a,
footer .copyright,
footer .smaller-text{
	font-size:0.7rem;
	line-height:1.3;
}
footer .copyright span{
	margin-left:20px;
}
@media screen and (max-width:1024px){
	footer .col12,
	footer .col34{
		float:none;
		width:100%;
	}
	footer .col1{
		width:100px;
	}
	footer .col2{
		width:calc(100% - 100px);
	}
	footer .col3{
		width:calc(100% - 150px);
	}
	footer .col4{
		width:150px;
	}
}
@media only screen and (max-width:550px){
	footer .footercol{
		padding-right:0;
	}
	footer .col3,
	footer .col4{
		float:none;
		width:100%;
	}
	footer .col3 img{
		width:calc(33% - 10px);
		max-width:100px;
		height:auto;
	}
}
/*- Footer */
