/* --------- This file contains the styles for the LeadReference website, first created in March 2024 ----------- */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Condensed');

/* --------- Colour Scheme ----------- */

:root {
    /* main colors */
    --color-primary: #3a3c54; /* Slate */
	--color-primary-dark: #232644; /* Dark Slate */
	--color-primary-light: #585b79; /* Light Slate */
	--color-primary-lighter: #b5b6c6; /* Lighter Slate */

    --color-cta: #ffd55a; /* Yellow */
	--color-cta-dark: #f1b729; /* Dark Yellow */
	--color-cta-light: #f5de98; /* Light Yellow */
	
	--color-secondary: #53bc64; /* Green */
	--color-secondary-opt2: #2b80c6; /* Blue */	
	
	--color-bkgnd-dark: #222344; /* Dark Blue */
	
	--color-mid: #cbd1d9; /* Grey */
	--color-mid2: #a1a2b3; /* Grey 2 - lighter option of Grey */	
	--color-bkgnd-light: #eceff3; /* Light Grey */
	--color-bkgnd-light2: #cdd4dc; /* Light Grey 2 - darker version of Light Grey */
	
	/* main Padding */
	--standard-padding: 30px 8% 30px 8%;
	--smaller-padding: 15px 8% 15px 8%;
	--top-padding: 30px 8% 0px 8%;
	--bottom-padding: 0px 8% 30px 8%;
	--side-padding: 0px 8% 0px 8%;
	--topbot-padding: 30px 0 30px 0;
	--toponly-padding: 30px 0 0 0;
	--minimum-padding: 1px 8% 1px 8%;
}

@media (min-width: 740px) {
	:root {
		--standard-padding: 40px 8% 40px 8%;
		--smaller-padding: 20px 8% 20px 8%;
		--side-padding: 0px 8% 0px 8%;
		--top-padding: 40px 8% 0px 8%;
		--bottom-padding: 0px 8% 40px 8%;
		--topbot-padding: 40px 0 40px 0;
		--toponly-padding: 40px 0 0 0;
	}
}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	padding: 0;
	background: #fff;
}			

body, td {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
	color: var(--color-bkgnd-dark);
	line-height:1.5;
}

h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 2.4rem;
	font-weight: 500;
	line-height:1.5;
	margin-top: 0;
}

.blog-width h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 2.2rem;
	font-weight: 500;
	line-height:1.5;
	margin-top: 0;
}

h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 2rem;
	font-weight: 500;
	line-height:1.5;
	margin-top: 0;
	margin-bottom: 1.2rem;
}

h3 {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.8rem;
	font-weight: 500;
	line-height:1.5;
	margin-top: 0;
}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height:1.5;
	margin-top: 0;
}

.titletext {
	font-size: 1.8rem;
	margin-top: 2em;
	margin-bottom: 0.8em;
}

.bigtext {
	font-size: 1.8rem;
}

.biggertext {
	font-size: 2rem;
}

.smalltext {
	font-size: 1.4rem;
}

.ctatext {
	font-size: 2rem;
}

.highlight-text {
	font-size: 1.2em;
}

.textcoldark {
	color: var(--color-bkgnd-dark);
}

.textcolmid {
	color: var(--color-primary);
}

.textcolcta {
	color: var(--color-cta);
}

.textcol2 {
	color: var(--color-secondary);
}

.textcolwhite {
	color: #ffffff);
}

@media (min-width: 740px) {
	h1 {
		font-size: 2.8rem;
	}
	.blog-width h1 {
		font-size: 2.6rem;
	}
	h2 {
		font-size: 2.4rem;
	}
	h3 {
		font-size: 2rem;
	}
	h4 {
		font-size: 1.8rem;
	}
	.titletext {
	font-size: 2rem;
	}
	.bigtext {
		font-size: 2rem;
	}

	.biggertext {
		font-size: 2.4rem;
	}

	.ctatext {
		font-size: 2.4rem;
	}
	.highlight-text {
		font-size: 1.4em;
	}
}

@media (min-width: 1000px) {
	h1 {
		font-size: 3.4rem;
	}
	.blog-width h1 {
		font-size: 3.2rem;
	}
	h2 {
		font-size: 2.8rem;
	}
	h3 {
		font-size: 2.3rem;
	}
	h4 {
		font-size: 2rem;
	}
	.titletext {
	font-size: 2.2rem;
	}
	.bigtext {
		font-size: 2.2rem;
	}

	.biggertext {
		font-size: 2.8rem;
	}

	.ctatext {
		font-size: 2.8rem;
	}
}

@media (min-width: 1400px) {
	h1 {
		font-size: 4rem;
	}
	.blog-width h1 {
		font-size: 3.7rem;
	}
	h2 {
		font-size: 3.2rem;
	}
	h3 {
		font-size: 2.7rem;
	}
	h4 {
		font-size: 2.2rem;
	}
	.titletext {
	font-size: 2.6rem;
	}
	.bigtext {
		font-size: 2.6rem;
	}

	.biggertext {
		font-size: 3.2rem;
	}

	.ctatext {
		font-size: 3.2rem;
	}
}

.oncolour {
	color: #fff;
}

.textcentre {
	text-align: center;
}

.textleft {
	text-align: left;
}

.textright {
	text-align: right;
}

.standardlist li {
	margin-top: 0;
	margin-bottom: 1em;
}

.contentpic {
	width: 100%;
	height: auto;
}

.incontentpic {
	width: 100%;
	max-width: 400px;
	height: auto;
}

.bigcirclepic {
	width: 100%;
	max-width: 600px;
	height: auto;
}

@media (min-width: 1150px) {
	.contentpic {
		width: 100%;
		height: 100%;
	}
	.imgcover {
		object-fit: cover;
	}
}

.nomargin {
	margin: 0;
}

.videoframe {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.no-break {
	white-space: nowrap;
}

.bold-highlight {
	font-weight: 700;
	/* color: var(--color-cta-dark); */
	font-size: 1.1em;
}

.subtitle {
    font-size: 0.8em;
}

/* --------- Main Structure ----------- */

header, section, footer, aside, nav, main, article, figure {
    display: block;
	box-sizing: border-box;
} /* to make older browsers display html5 elements correctly */

#wrapper {  /* This is the background for all content and also ensures that the footer sticks to the bottom of the screen */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	min-height: 100vh;
}

header {
	box-sizing: border-box;
	width: 100%;
	background-color: var(--color-bkgnd-dark);
	color: #fff;	
}

main {
	box-sizing: border-box;
	width: 100%;
	flex-grow: 1;	
}

footer {
	box-sizing: border-box;
	width: 100%;
	background-color: var(--color-bkgnd-dark);
	color: #fff;	
}

header, main, footer {
    flex-shrink: 0;
}

/*------- HEADER ------------------------------------------- */	

/* ------- Contact bar --------- */

#contact-bar {
	box-sizing: border-box;
	padding: 15px 15px 1px 15px;
	text-align: center;
}

#contact-bar-inner {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto 0 auto;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;
}

#header-logo {
	box-sizing: border-box;
	text-align: left;
	padding: 0px;
}

#header-logo img {
	width: 250px;
	height: auto;
}

#contact-bar-text {
	display: none;
	box-sizing: border-box;
	flex-grow: 1;
	text-align: right;
	font-size: 16px;
	color: #fff;
	display: none;
}

.contact-bar-seperator {
	color: #464b79;
	padding: 0 6px;
	font-weight: bold;
}

#contact-bar-text a {
	text-decoration: none;
	color: #fff;
	-webkit-transition: all 0.50s ease-out;
	transition: all 0.50s ease-out;
}

#contact-bar-text a:hover {
	text-decoration: none;
	color: #ffd55a;
}

@media (min-width: 750px) {
	#contact-bar {
		padding: 20px 30px 1px 30px;
	}
	#contact-bar-text {
		display: block;
	}
}

/* ------- Nav bar --------- */

#headernav {
	box-sizing:border-box;
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	gap: 10px;
	background-color: var(--color-bkgnd-dark);
	position: -webkit-sticky;
    position: sticky;
    top: 0px;
	z-index: 10;
	padding: 8px 0 0 0;
}

#main-nav {
	order: 2;
	flex-grow: 1;
	box-sizing: border-box;
	width: 100%;
	color: #fff;
	margin: 0 auto 0 auto;
	padding: 0 0 2px 0;
	text-align: center;
}

#login-btns {
	order: 1;
	box-sizing: border-box;
	text-align: right;
	width: 100%;
	max-width: 100%;
	padding: 8px 30px 6px 0;
}

@media (min-width: 750px) {
	#login-btns {
		order: 1;
		box-sizing: border-box;
		text-align: right;
		width: 100%;
		max-width: 100%;
		padding: 6px 30px 12px 0;
	}
}

@media (min-width: 1220px) {
	#headernav {
		box-sizing:border-box;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 10px;
		background-color: var(--color-bkgnd-dark);
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
		z-index: 10;
		padding: 8px 20px 0 20px;
	}
	#main-nav {
		order: 1;
		text-align: left;	
	}

	#login-btns {
		order: 2;
		box-sizing: border-box;
		text-align: right;
		width: 100%;
		max-width: 350px;
		padding: 6px 0 12px 0;
	}	
}

@media (min-width: 1300px) {
	#main-nav {
		margin: 0 -175px 0 0;
		text-align: center;	
	}
}

a.navbtn {
	box-sizing:border-box;
	padding: 5px 15px;
	margin-left: 10px;
	background: var(--color-cta);
	text-decoration: none;
	color: var(--color-primary-dark);
	font-weight: bold;
	font-size: 16px;
	border-radius: 30px;
}

a.navbtn:hover {
	background: var(--color-primary-lighter);
	color: #fff;
}

a.navfpbtn {
	box-sizing:border-box;
	padding: 5px 15px;
	background: var(--color-secondary);
	text-decoration: none;
	color: var(--color-primary-dark);
	font-weight: bold;
	font-size: 16px;
	border-radius: 30px;
}

a.navfpbtn:hover {
	background: var(--color-primary-lighter);
	color: #fff;
}

/*------- FOOTER ------------------------------------------- */

.footertext {
	font-size: 1.4rem;
}

.innerFooter {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding-right: 0px;
	margin: 0 auto;
}

.footerMenu {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto 20px auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	align-items: stretch;
	gap: 40px 60px;
}

.footerMenu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: normal;
	list-style-type: none;
}

.footerMenu ul a {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

.footerMenu ul a:hover {
	color: #ffd55a;
	text-decoration: none;
}

.footerMenu li {
	margin-bottom: 5px;
}

.socialMedia {
	flex-grow: 2;
}

.footerLogos {
	width: 100%;
	margin: 20px 0;
}

.footerLogos p {
	padding: 10px;
	margin: 0;
	text-align: center;
}

.footerLogos img {
	margin: 10px;
	vertical-align: middle;
	width: auto;
	height: 110px;
	border: none;
}

.footerLogos img.award-logo {
	margin: 10px;
	height: 70px;
}

.footerTitle {
	color: #ffffff;
	border-bottom: 2px solid #ffd55a;
	padding-bottom: 5px;
	margin-bottom: 5px;
	font-size: 1.2em;
}

#copyright {
	text-align: center;
}

#copyright a {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}

#copyright a:hover {
	color: #ffd55a;
	text-decoration: none;
}

.socialMedia {
	box-sizing: border-box;
	width: 100%;
	position: static;
	text-align: center;
}

.socialMedia ul {
	width: 100%;
	margin: 0;
	padding: 0;
	font-weight: normal;
	list-style-type: none;
}

.socialMedia li {
	display: inline-block;
	padding: 10px;
}

.socialMedia img {
	width: 40px;
	height: auto;
	opacity: 1;
}

.socialMedia img:hover {
	width: 40px;
	height: auto;
	opacity: 0.5;
}

@media (min-width: 1000px) {

	.innerFooter {
		width: 80%;
		padding-right: 60px;
	}
	.socialMedia {
		width: 50px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.socialMedia li {
		display: block;
		padding: 5px;
	}
}

@media (min-width: 1400px) {
	.innerFooter {
		width: 70%;
		padding-right: 60px;
	}
}

/*------- General ------------------------------------------- */

.dark-txt {
	color: var(--color-primary-dark);
}

.standard-padding {
	padding: var(--standard-padding);
}

.smaller-padding {
	padding: var(--smaller-padding);
}

.top-padding {
	padding: var(--top-padding);
}

.bottom-padding {
	padding: var(--bottom-padding);
}

.side-padding {
	padding: var(--side-padding);
}

.topbot-padding {
	padding: var(--topbot-padding);
}

.toponly-padding {
	padding: var(--toponly-padding);
}

.minimum-padding {
	padding: var(--minimum-padding);
}

.secondary-divider {
	border-bottom: 20px solid var(--color-secondary);
}

.dark-divider {
	border-bottom: 20px solid var(--color-bkgnd-dark);
}

.whitebkgnd {
	background-color: #fff;
}

.lightbkgnd {
	background-color: var(--color-bkgnd-light);
}

.lightbkgnd2 {
	background-color: var(--color-bkgnd-light2);
}

.midbkgnd {
	background-color: var(--color-primary);
}

.midlightbkgnd {
	background-color: var(--color-primary-light);
}

.midlightbkgnd2 {
	background-color: var(--color-mid2);
}

.darkbkgnd {
	background-color: var(--color-bkgnd-dark);
}

.ctabkgnd {
	background-color: var(--color-secondary);
}

.altcolourbkgnd {
	background-color: var(--color-cta);
}

.circlebkgnd {
	background: #eceff3;
}

@media (min-width: 1272px) {
	.circlebkgnd {
		background: #eceff3 url(../images/grey-circle-bkgnd.svg) no-repeat;
		background-size: 100% auto;
		background-position: center;
	}
}

.vh-centre {
	display: grid;
    place-items: center;
	width: 100%;
    height: 100%;
}

.content-block {
	display: inline-block;
}

.oncolour {
	color: #fff;
}

.textcentre {
	text-align: center;
}

.textleft {
	text-align: left;
}

.textright {
	text-align: right;
}

.standardlist li {
	margin-top: 0;
	margin-bottom: 1em;
}

.page-header {
	box-sizing: border-box;
	width: 100%;
	min-height: 120px;
	text-align: left;
	margin: 0;
	padding: 6vw 8% 4vw 8%;
	background: var(--color-primary) url(../images/blank-page-header.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.page-header-text {
	box-sizing: border-box;
	width: 75%;
	text-align: left;
}

.page-header-title {
	padding: 0 0 0.6vw 0;
	font-size: 7vw;
	color: #ffd55a;
	font-weight: normal;
	line-height: 1.2;
	margin: 0;
}

.page-header-title-small {
	display: none;
	font-size: 1.8vw;
	color: #fff;
	font-weight: normal;
	margin: 0 0 0 0;
	padding: 1.5vw 0vw 0vw 0vw;
}

.page-header p.buttonP {
	display: none;
	margin: 0 0 0 0;
	padding: 2.5vw 0vw 2.5vw 0vw;
}

@media (min-width: 480px) {
	.page-header-title {
		font-size: 6vw;
	}
	.page-header {
		min-height: 145px;
	}
}

@media (min-width: 600px) {
	.page-header-title {
		font-size: 5vw;
	}
	.page-header {
		min-height: 170px;
	}
}

@media (min-width: 700px) {
	.page-header {
		min-height: 220px;
	}
}

@media (min-width: 890px) {
	.titlebutton {
		display: block;
	}
	.page-header {
		min-height: 245px;
		padding: 4.5vw 8% 2.5vw 8%;
	}
	.page-header-text {
		width: 50%;
	}
	.page-header-title {
		font-size: 3vw;
	}
	.page-header-title-small {
		display: block;
		padding: 1.5vw 0vw 0vw 0vw;
	}
	.page-header p.buttonP {
		display: block;
	}
}

@media (min-width: 1000px) {
	.page-header {
		min-height: 270px;
	}
}

@media (min-width: 1100px) {
		min-height: 295px;
	}
}

@media (min-width: 1200px) {
	.page-header {
		min-height: 320px;
	}
}

@media (min-width: 1300px) {
	.page-header {
		min-height: 345px;
	}
}

@media (min-width: 1400px) {
	.page-header {
		min-height: 370px;
	}
}

@media (min-width: 1500px) {
	.page-header {
		min-height: 395px;
	}
}

@media (min-width: 1600px) {
	.page-header {
		min-height: 420px;
	}
}

@media (min-width: 1700px) {
	.page-header {
		min-height: 445px;
	}
}

@media (min-width: 1900px) {
	.page-header {
		min-height: 470px;
	}
}

@media (min-width: 2200px) {
	.page-header {
		min-height: 570px;
	}
}

@media (min-width: 2500px) {
	.page-header {
		min-height: 620px;
	}
}

.contentlist li {
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}

.content-width {
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/*------- Buttons and Links ------------------------------------------- */

a {
	text-decoration: none;
	color: var(--color-secondary);
	font-weight: bold;
}
	
a:hover {
	text-decoration: none;
	color: var(--color-cta);
}

a.anchor {					/* This moves anchor tags below the fixed header */
	margin-top: -65px;      /* Size of fixed header */
	padding-bottom: 65px; 
	display: block;
}

.altcolourbkgnd a {
	text-decoration: none;
	color: var(--color-secondary);
	font-weight: bold;
}
	
.altcolourbkgnd a:hover {
	text-decoration: none;
	color: var(--color-primary);
}

.buttonP {
	box-sizing: border-box;
	margin-top: 2em;
	margin-bottom: 2em;
}

.buttonP-topmargin {
	box-sizing: border-box;
	margin-top: 2em;
	margin-bottom: 0em;
}

a.cta {
	display: inline-block;
	padding: 6px 16px;
	background: var(--color-cta);
	text-decoration: none;
	color: var(--color-primary-dark);
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	border-radius: 80px;
}

a.cta:hover {
	background: var(--color-primary);
	color: #fff;
}

.oncolour a.cta:hover {
	background: var(--color-primary-lighter);
	color: #fff;
}

.index-header-title-btn a.cta {
	display: inline-block;
	padding: 8px 18px;
	background: var(--color-cta);
	text-decoration: none;
	color: var(--color-primary-dark);
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	border-radius: 80px;
}

a.more-txt-btn {
	display: inline-block;
	padding: 6px 50px 6px 16px;
	text-decoration: none;
	background: var(--color-secondary) url('../images/arrow-circle-right.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 80px;
}

a.more-txt-btn:hover {
	background: var(--color-primary) url('../images/arrow-circle-right.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

.oncolour a.more-txt-btn:hover {
	background: var(--color-primary-lighter) url('../images/arrow-circle-right.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

a.download-btn {
	display: inline-block;
	padding: 6px 50px 6px 15px;
	text-decoration: none;
	background: var(--color-secondary) url('../images/download-circle-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 80px;
}

a.download-btn:hover {
	background: var(--color-primary) url('../images/download-circle-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

.oncolour a.download-btn:hover {
	background: var(--color-primary-lighter) url('../images/download-circle-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

.ctabkgnd a.download-btn {
	display: inline-block;
	padding: 6px 50px 6px 15px;
	text-decoration: none;
	background: var(--color-cta) url('../images/download-circle-slate.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 14px;
	border-radius: 80px;
}

.ctabkgnd a.download-btn:hover {
	background: var(--color-primary) url('../images/download-circle-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

a.back-btn {
	display: inline-block;
	padding: 6px 15px 6px 50px;
	text-decoration: none;
	background: var(--color-secondary) url('../images/arrow-circle-left.svg') no-repeat center left 3px;
	background-size: auto 82%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 80px;
}

a.back-btn:hover {
	background: var(--color-primary) url('../images/arrow-circle-left.svg') no-repeat center left 3px;
	background-size: auto 82%;
	color: #fff;
}

a.section-btn {
	box-sizing: border-box;
	display: inline-block;
	padding: 6px 50px 6px 15px;
	text-decoration: none;
	background: var(--color-secondary) url('../images/arrow-circle-down-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 80px;
}

a.section-btn:hover {
	background: var(--color-primary) url('../images/arrow-circle-down-white.svg') no-repeat center right 3px;
	background-size: auto 82%;
	color: #fff;
}

@media (min-width: 500px) {
	a.cta {
		display: inline-block;
		padding: 8px 20px;
		background: var(--color-cta);
		text-decoration: none;
		color: var(--color-primary-dark);
		font-weight: bold;
		font-size: 16px;
		text-align: center;
		border-radius: 80px;
	}
	a.more-txt-btn {
		display: inline-block;
		padding: 8px 60px 8px 20px;
		text-decoration: none;
		background: var(--color-secondary) url('../images/arrow-circle-right.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		border-radius: 80px;
	}

	a.more-txt-btn:hover {
		background: var(--color-primary) url('../images/arrow-circle-right.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
	}

	.oncolour a.more-txt-btn:hover {
		background: var(--color-primary-lighter) url('../images/arrow-circle-right.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
	}

	a.download-btn {
		display: inline-block;
		padding: 8px 60px 8px 20px;
		text-decoration: none;
		background: var(--color-secondary) url('../images/download-circle-white.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		border-radius: 80px;
	}

	a.download-btn:hover {
		background: var(--color-primary) url('../images/download-circle-white.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
	}
	
	.oncolour a.download-btn:hover {
		background: var(--color-primary-lighter) url('../images/download-circle-white.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
	}
	
	.ctabkgnd a.download-btn {
		display: inline-block;
		padding: 8px 60px 8px 20px;
		text-decoration: none;
		background: var(--color-cta) url('../images/download-circle-slate.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: var(--color-primary);
		font-weight: bold;
		font-size: 16px;
		border-radius: 80px;
	}

	.ctabkgnd a.download-btn:hover {
		background: var(--color-primary) url('../images/download-circle-white.svg') no-repeat center right 4px;
		background-size: auto 80%;
		color: #fff;
	}

	a.back-btn {
		display: inline-block;
		padding: 8px 20px 8px 60px;
		text-decoration: none;
		background: var(--color-secondary) url('../images/arrow-circle-left.svg') no-repeat center left 4px;
		background-size: auto 80%;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		border-radius: 80px;
	}

	a.back-btn:hover {
		background: var(--color-primary) url('../images/arrow-circle-left.svg') no-repeat center left 4px;
		background-size: auto 80%;
		color: #fff;
	}
}

@media (min-width: 890px) {
	.index-header-title-btn a.cta {
		display: inline-block;
		padding: 8px 20px;
		background: var(--color-cta);
		text-decoration: none;
		color: var(--color-primary-dark);
		font-weight: bold;
		font-size: 1.5vw;
		text-align: center;
		border-radius: 80px;
	}
}

@media (min-width: 1500px) {
	.index-header-title-btn a.cta {
		display: inline-block;
		padding: 8px 20px;
		background: var(--color-cta);
		text-decoration: none;
		color: var(--color-primary-dark);
		font-weight: bold;
		font-size: 1.3vw;
		text-align: center;
		border-radius: 80px;
	}
}

/* ------- Section Buttons --------- */

.section-buttons {
	box-sizing: border-box;
	width: 100%;
	padding: 30px 0;
	display: flex;
	flex-flow: column wrap;
	gap: 20px;
	justify-content: center;
}

.section-buttons a.section-btn {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1000%;
}

@media (min-width: 800px) {
	.section-buttons {
		flex-flow: row wrap;
	}
	.section-buttons a.section-btn {
		flex: 1 0 45%;
		max-width: 45%;
	}
}

@media (min-width: 1170px) {
	.section-buttons a.section-btn {
		flex: 1 0 30%;
		max-width: 30%;
	}
}

@media (min-width: 1700px) {
	.section-buttons a.section-btn {
		flex: 1 0 20%;
		max-width: 20%;
	}
}


/* ------- Split Screen --------- */

.split-screen {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	overflow: clip;
	overflow-clip-margin: border-box;
}

.split-screen-buttons {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
}

.no-break {
	flex-flow: column wrap;
}

@media (min-width: 750px) {
	.no-break {
		flex-flow: row nowrap;
	}
}

.split2 {
	box-sizing: border-box;
	flex-basis: auto;
	overflow: clip;
	overflow-clip-margin: border-box;
}

.split2centre {
	box-sizing: border-box;
	flex-basis: auto;
	text-align: center;
	overflow: clip;
	overflow-clip-margin: border-box;
}

.split-screen-buttons .split2centre {
	box-sizing: border-box;
	flex: 0 1 300px;
	text-align: center;
}

.split-screen-buttons .split2centre.textleft {
	text-align: left;
}

.split-screen-buttons .split2centre.textright {
	text-align: right;
}

.splitpic {
	box-sizing: border-box;
	line-height: 0;
	order: -1;
}

.splittext {
	box-sizing: border-box;
	order: -1;
}


@media (min-width: 1272px) {
	.split-screen {
		flex-flow: row wrap;
	}
	.split2 {
		flex-basis: 50%;
	}
	.split2centre {
		flex-basis: 50%;
	}
	.splitpic {
		order: 0;
	}
	.splittext {
		order: 0;
	}
}

/* ------- Index Header --------- */

#index-header {
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 5vw 0 5vw 0;
	background: #fff url(../images/index-header.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.index-header-text {
	box-sizing: border-box;
	width: 56%;
	text-align: left;
}

.index-header-title {
	padding: 0 0 1vw 4vw;
	font-size: 4.5vw;
	color: #ffd55a;
	font-weight: normal;
	line-height: 1.2;
	margin: 0;
}

.index-header-title-small {
	display: none;
	font-size: 1.8vw;
	color: #fff;
	font-weight: normal;
	margin: 0 0 0 0;
	padding: 2.5vw 0vw 0vw 4vw;
}

.index-header-title-btn {
	font-size: 16px;
	color: #fff;
	font-weight: normal;
	margin: 0 0 0 0;
	padding: 2.5vw 0vw 0vw 4vw;
}

@media (min-width: 890px) {
	#index-header {
		padding: 4vw 0 4vw 0;
	}
	.index-header-title {
		padding: 0 0 1vw 4vw;
		font-size: 3.5vw;
	}
	.index-header-title-small {
		display: block;
		font-size: 1.5vw;
		color: #fff;
		font-weight: normal;
		margin: 0 0 0 0;
		padding: 2vw 0vw 0vw 4vw;
	}
	.index-header-title-btn {
		display: block;
		font-size: 1.5vw;
		color: #fff;
		font-weight: normal;
		margin: 0 0 0 0;
		padding: 2vw 0vw 0vw 4vw;
	}
}

@media (min-width: 1500px) {
	.index-header-title {
		padding: 0 0 1vw 4vw;
		font-size: 3vw;
	}
	.index-header-title-small {
		display: block;
		font-size: 1.3vw;
		color: #fff;
		font-weight: normal;
		margin: 0 0 0 0;
		padding: 2vw 0vw 0vw 4vw;
	}
	.index-header-title-btn {
		display: block;
		font-size: 1.3vw;
		color: #fff;
		font-weight: normal;
		margin: 0 0 0 0;
		padding: 2vw 0vw 0vw 4vw;
	}
}

.secondary-bkgnd {
	background-color: var(--color-secondary);
	color: #fff;
}

.bluecircle-bkgnd {
	background-color: var(--color-primary);
	background-image: url("../images/blue-circle-bkgnd.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.whitecircle-bkgnd {
	background-color: #fff;
	background-image: url("../images/white-circle-bkgnd.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.productwrapper {
	box-sizing: border-box;
	width: 100%;
	margin: 40px auto 20px auto;
	padding: 0 0 40px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	gap: 20px 50px;	
}

.productbox {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	padding-bottom: 60px;
	background: rgba(250, 250, 250, 0);
}

.nopics .productbox {
	box-sizing: border-box;
	width: 100%;
	position: relative;
	padding-bottom: 60px;
	background: none;
}

.productpic {
	box-sizing: border-box;
	width: 100%;
	height:auto;
	margin: 0;
	padding: 0;
	display: block;
}

.product-title {
	font-size: 2.2rem;
	margin: 0 0 1em 0;
}

.nopics .product-title {
	font-size: 2.2rem;
	margin: 1.5em 0 1em 0;
}

.product-text {
	padding: 30px 30px 30px 30px;
}

.nopics {
	gap: 20px 50px;
}

.producticon {
	box-sizing: border-box;
	width: auto;
	height: 60px;
	vertical-align: middle;
	padding: 0 20px 0 0;
}

.productbox p.buttonP {
	box-sizing: border-box;
	position: absolute;
	bottom: 30px;
	left: 30px;
	margin: 0;
}

.productwrapper.nopics .productbox p.buttonP {
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	left: 0px;
	margin: 0;
}

@media (min-width: 800px) {
	.productwrapper {
		gap: 30px 30px;
	}
	.productbox {
		max-width: 280px;
	}

	.productpic {
		max-width: 280px;
	}
	.nopics .product-title {
		font-size: 1.9rem;
		margin: 1.5em 0 1em 0;
	}
}

@media (min-width: 1300px) {
	.productwrapper {
		gap:40px 40px;
	}
	.productbox {
		max-width: 320px;
	}

	.productpic {
		max-width: 320px;
	}
	.nopics .product-title {
		font-size: 2.1rem;
		margin: 1.5em 0 1em 0;
	}
}

@media (min-width: 1500px) {
	.productwrapper {
		gap: 40px 40px;
	}
	.productbox {
		max-width: 350px;
	}

	.productpic {
		max-width: 350px;
	}
	.nopics .product-title {
		font-size: 2.1rem;
		margin: 1.5em 0 1em 0;
	}
}

@media (min-width: 1800px) {
	.productwrapper {
		gap: 50px 50px;
	}
	.productbox {
		max-width: 450px;
	}

	.productpic {
		max-width: 450px;
	}
	.nopics .product-title {
		font-size: 2.2rem;
		margin: 1.5em 0 1em 0;
	}
}

@media (min-width: 2200px) {
	.productwrapper {
		gap: 60px 80px;
	}
	.productbox {
		max-width: 500px;
	}

	.productpic {
		max-width: 500px;
	}
	.nopics .product-title {
		font-size: 2.4rem;
		margin: 1.5em 0 1em 0;
	}
}

/* ------- FAQs --------- */

dl.faqs dt {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 2em;
}

dl.faqs dd {
	margin-inline-start: 0px;
	margin-top: 1em;
}

.totop {
	box-sizing: border-box;
	text-align: right;
	padding: 1px;
	padding: 0 0 10px 0;
}

.totop-box {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	text-align: center;
	margin-left: auto;	
}

.totop-box a {
	box-sizing: border-box;
	display: inline-block;
	width: 40px;
	height: 40px;	
	background: url('../images/arrow-circle-totop.svg') no-repeat center;
	background-size: 100%;
	text-decoration: none;
	text-align: center;
	margin: 0;
	padding: 0;
}

.totop-box a:hover {
	background: url('../images/arrow-circle-totop-blue.svg') no-repeat center;
	background-size: 100%;
}

/* ------- Accordion Styles --------- */

.accordion {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 30px auto 10px auto;
}

.accordion .accordion-item {
	box-sizing: border-box;
  padding-bottom: 20px;
}

.accordion button {
	box-sizing: border-box;
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 50px 1em 2em;
  color: #fff;
  background: var(--color-secondary);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 400;
  border: none;
  outline: none;
  border-radius: 80px;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #fff;
  background: var(--color-primary);
}
/*
.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
*/
.accordion button:focus[aria-expanded='false'] {
  background: var(--color-secondary);
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
  font-size: 1.2em;
}

.accordion button .icon {
	box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  border: none;
}

.accordion button .icon::before {
	box-sizing: border-box;
  display: block;
  position: absolute;
  content: '';
  background: url('../images/circle-down.svg') no-repeat center;
  background-size: 100%;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.accordion button .icon::after {
	box-sizing: border-box;
  display: none;
  position: absolute;
  content: '';
  background: url('../images/circle-up.svg') no-repeat center;
  background-size: 100%;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
}
.accordion button[aria-expanded='true'] .icon::before {
  display: none;
}

.accordion button[aria-expanded='true'] {
  color: #fff;
}
.accordion button[aria-expanded='true'] .icon::after {
  display: block;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 2000px;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  box-sizing: border-box;
  opacity: 0;
  max-height: 0;
  padding: 0 30px;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content dl.faqs dt {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 2em;
}

.accordion .accordion-content dl.faqs dd {
	margin-inline-start: 0px;
	margin-top: 1em;
}