:root {
	/* Font choices */
	--font-body-face: Figtree, Arial, sans-serif;
	--font-body-weight: 300;
	--font-body-size: 1rem;
	--font-body-lineheight: 1.4rem;
	--font-title-face: Figtree, Arial, sans-serif;
	--font-title-weight: 700;
	--font-title-size-h1: 2.7rem;
	--font-title-lineheight-h1: 2.7rem;
	--font-title-size-h2: 2.5rem;
	--font-title-lineheight-h2: 2.5rem;
	--font-title-size-h3: 1.8rem;
	--font-title-lineheight-h3: 1.8rem;
	--font-title-size-h456: 1.2rem;
	--font-title-lineheight-h456: 1.2rem;
	--font-title-transform: none;
	--font-title-spacing: normal;
	--font-menu-transform: none;

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

	/* Other design parameters */
	--page-background-colour: #ffffff;
	--page-foreground-colour: #000000;
	/* Item blocks, image panels, accordion headers, video housings etc. */
	--structural-border-radius: 10px;
	/* Min: 20px! Padding top and bottom of section content */
	--structural-content-padding-vertical: 100px;
	/* Min: 20px! Padding either side of main inner and text blocks */
	--structural-content-padding-horizontal: 40px;
	/* Gap between columns, blocks and similar elements */
	--structural-grid-column-spacing: 0.6rem;
	--input-border-radius: 10px;
	--input-relaxed-colour-bg: var(--themecolour1);
	--input-relaxed-colour-fg: var(--colourblack);
	--input-hover-colour-bg: var(--themecolour1light);
	--input-hover-colour-fg: var(--colourblack);
	/* Margin around the header, footer and some blocks */
	--content-inset: 0px;
	/* Varies if the site has a custom header above the menu. Use 90vh if it doesn't */
	--tallheader-height: 60vh;
	--overlaygradient-background-direction: 90deg;
	--overlaygradient-background-start-pos: 0%;
	--overlaygradient-background-start-colour: var(--themecolour2dark);
	--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(../app_furniture/icon-navigation.php?img=direction&dir=right&col=themecolour2);
	--button-relaxed-left-bgimageurl: url(../app_furniture/icon-navigation.php?img=direction&dir=left&col=themecolour2);
	--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;
	/* start or end for left or right title text */
	--stickytab-headerjustify: end;
	--stickytab-header-fgcolour: var(--themecolour2);
	--stickytab-header-bgcolour: var(--themecolour1);
	--stickytab-bgcolour: var(--themecolour2dark);

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

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

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

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


/* Header */
header {
	padding: 40px;
	background-color: var(--colourwhite);
	color: var(--themecolour2dark);
}

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: 15%;
	text-align: right;
	vertical-align: bottom;
}

header .col4 {
	width: 35%;
	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;
	margin: 0;
}

header h4 {
	font-size: 48px;
	line-height: 50px;
	margin: 0;
}

header h4 span,
header h5 span {
	color: var(--themecolour2light);
}

header a {
	color: var(--themecolour2light);
}

header a:hover {
	color: var(--themecolour2dark);
}

@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 h3,
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 */