body, html {
    height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Geologica", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
	  "slnt" 0,
	  "CRSV" 0,
	  "SHRP" 0;
}

h1, h2, h3 {
	font-weight: 600;
	color: #482664;
}

p {
	font-weight: 200;
}

.smile {
	background-image: url("images/kca-smile.png");
	background-size: 4.5em;
	background-repeat: no-repeat;
	padding: 0.5em 0 0.5em 1.4em;
}

div, section {
	margin: 0
}

h1, h2, h3, p {
	max-width: 60rem; 
}

#banner {
	background-color: #482664;
	overflow: hidden;
}

#banner.hero a {
	color: #fdc757;
}

#banner.hero a:hover {
	color: #389;
}

section {
	clear: both;
	padding: 1rem;
	position: relative;

	@media screen and (min-width: 800px) {
		padding: 1rem 2vw 2rem;
	}
	@media screen and (min-width: 1000px) {
		padding: 1rem 3vw  2rem;
	}
	@media screen and (min-width: 1200px) {
		padding: 1rem 4vw  2rem;
	}
	@media screen and (min-width: 1400px) {
		padding: 1rem 6vw  2rem;
	}
	@media screen and (min-width: 1600px) {
		padding: 1rem 9vw  2rem;
	}
	@media screen and (min-width: 1800px) {
		padding: 1rem 12vw  2rem;
	}
	@media screen and (min-width: 2000px) {
		padding: 1rem 15vw  2rem;
	}
	@media screen and (min-width: 2200px) {
		padding: 1rem 20vw 2rem;
	}
}

section#banner {
	padding: 0;
}

section#contact {
	padding-bottom: 0;
}

div.grey, section.grey {
	background-color: #eee
}

div.blue, section.blue {
	background-color: #389;
	color: #fff
}

div.blue p a, section.blue p a {
	color: #fdc757;
}

div.blue p a:hover, section.blue p a:hover {
	color: #ddd;
}

#content {
	position: relative;
}

/* IMAGES AND IMAGE LINKS */

img.full-width, a.image-link > img {
	width: 100%
}

a.image-link {
	display: block;
}

a.image-link > span {
	display:none;
}

.image-and-caption-gold {
	background: #fdc757;
	color: #482664;
	padding-bottom: 0.4rem;
	border-radius: 2rem;
	max-width: 150px !IMPORTANT;
	overflow: hidden;
	border: solid 8px #fdc757;
	text-align: center;
	text-decoration: none;
}

.image-and-caption-gold img {
	width: 100%;
	border-radius: 1.4rem;
}

a.image-and-caption-gold span {
	font-weight: 500;
	font-size: 1.2rem;
	padding: 0.2rem;
}

a.image-and-caption-gold:hover {
	background: #389;
	color: #fff;
	border-color: #389;
}

.tile-links {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
	gap:0;
}
.tile-links > div {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 250px;
	height: 100%;
	max-height: 250px;
	cursor: pointer;
}
.tile-links > div:after {
	content: ""; 
	display: block; 
	padding-top: 100%;
} 
.tile-links div:hover {
	transition: all 0.2s ease;
	filter: grayscale(100%);
}
.tile-links a {
	color: #fff;
	text-decoration: none;
	font-size: 1.3em;
	font-weight: 600;
	position: absolute; 
	bottom: 0;
	left:0;
	right: 0;
	padding: 0.3em 0.7em;
	}
.tile-links div:hover a {
	filter:drop-shadow(1px 1px 2px #000);
	transition: all 0.2s ease;
}

.assoc-links {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
	gap: 1em;
	column-gap: 1em;
	list-style: none;
	padding: 0;
}
.assoc-links > li {
	position: relative;
	margin: 0;
	cursor: pointer;
}
.assoc-links a {
	display: block;
	background-color: #389;
	text-align: center;
	width: 90%;
	height: 100%;
	color: #fff;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 400;
	padding: 0.3em 0.7em;
}
.assoc-links a:hover {
	background-color: #fdc757;
	color: #482664;
}
.assoc-links > li .grey {
	background-color: #eee;
	color: #389;
	border: 0.1px solid #389;
}

a#elearning-purchase {
	width: 9rem;
	display: block;
	flex-grow: 0;
	padding: 1rem;
}

/* FLOAT */

.float-right{
	float: right;
}

/* BUTTONS AND LINKS */

a:hover {
	transition: color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in; 
}
a.bluebutton {
	position: relative;
	display: inline-block;
	background: #389;
	padding: 0.7rem 1.3rem;
	border-radius: 1em;
	color: #fff !IMPORTANT;
	text-decoration: none;
}
a.bluebutton:hover {
	background: #fdc757 !IMPORTANT;
	color: #482664 !IMPORTANT;
}

/* TABS */
.tabcontainer {
	display: inline-flex;
	flex-wrap: wrap;
	background: #fff;
	border: 0.2px solid grey;
	border-radius: 5px;
	padding: 3px;
}
/* tabs (radiobox label) */
.tabcontainer label {
	margin: 0 2px 0 0; /* space between the tabs */
	padding: 15px;
	background: #389;
	font-weight: bold;
	color: #fff;
	border: 0.2px solid grey;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
/* page content of each tab */
.tabcontainer .tabcontent {
	width: 100%;
	background: #fff;
	border-top: 0.2px solid grey;
	order: 1;
	display: none;
	padding: 2px;
}
/* hides all content */
.tabcontainer input[type="radio"] {
	display: none;
}
/* change the style of the tab once checked */
.tabcontainer input[type="radio"]:checked + label {
	background: #fff;
	color: #482664;
	border-bottom: none;
}
/* shows tab content (checked radiobox div) */
.tabcontainer input[type="radio"]:checked + label + .tabcontent {
	display: block;
}
.tabcontainer input[type="radio"]:hover + label {
	cursor: pointer;
	background: #fdc757;
	color: #482664;
}

/* HERO SECTION (IMAGE/VIDEO) */

#banner.hero {
	position: relative;
	width: 100vw;
	height: 100vh;
	padding: 0;
	@media screen and (min-height: 500px) {
		height: 90vh;
	}
	@media screen and (orientation: portrait) and (min-height:460px) {
		height: 84vh;
	}
}

.hero-image:before {
	z-index: 1;
	content: "";
	position: absolute;
	top: 5vh;
	left: 0;
	width: 100%;
	height: 94.5%;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("images/hero/default-hero.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	overflow: hidden;
}

.vimeo-wrapper {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#banner.hero iframe {
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 50%;
    transform: translateX(-50%);
	width: 101vw;
	height: 56.8vw;

	 @media screen and (max-aspect-ratio: 16/9) {
		width: 188vw;
		height: 99vh;
	 }
}

.hero-content {
	position: absolute;
	bottom:0;
	margin: 0 5vw 5vh;
	color: #fff;
	z-index: 5;
}

.hero-content h1 {
	position: relative;
	font-weight: 200;
	font-size: 1.2rem;
	margin-bottom: 0;
	max-width: 80vw;
	color: #fff;
	@media screen and (min-width: 1400px) {
		left: 2rem;
	}
	@media screen and (min-width: 1600px) {
		left: 3rem;
	}
	@media screen and (min-width: 1800px) {
		left: 7rem;
	}
	@media screen and (min-width: 2000px) {
		left: 13rem;
	}
	@media screen and (min-width: 2200px) {
		left: 15rem;
	}
}

.hero-content h2 {
	position: relative;
	font-size: 1.8rem;
	font-weight: 500;
	margin-top: 0.2em;
	max-width: 70vw;
	color: #fff;
	@media screen and (min-width: 1400px) {
		left: 2rem;
	}
	@media screen and (min-width: 1600px) {
		left: 3rem;
	}
	@media screen and (min-width: 1800px) {
		left: 7rem;
	}
	@media screen and (min-width: 2000px) {
		left: 13rem;
	}
	@media screen and (min-width: 2200px) {
		left: 15rem;
	}

}

.hero-content a.bluebutton {
	font-size: 1.4rem;
}

#badge {
	width: 10vw;
	min-width: 100px;
	max-width: 320px;
	position: absolute;
	bottom: 2rem;
	right: 0.5rem;
	z-index: 4;
}

#badge.home-badge {
	bottom: 6rem;
}

@media (min-width: 470px) {
	.hero-content h2 {
		max-width: 55vw
	}
	#badge { 
		display:block;
		right: 1rem;
		width: 25vw
	}
	#badge.home-badge {
		bottom: 2rem;
	}
	
}

@media (min-width: 500px) {
	.hero-content h2 {
		max-width: 55vw
	}
}

@media (min-width: 500px) and (min-height: 500px) {
	.hero-content h2 {
		font-size: 2.1rem;
		max-width: 65vw
	}
}

@media (min-width: 700px) and (min-height: 700px) {
	.hero-content h1 {
		font-size: 1.8rem;
	}
	.hero-content h2 {
		font-size: 2.8rem;
		margin-top: 1rem;
	}
}

@media (min-width: 1000px) and (min-height: 800px) {
	.hero-content h1 {
		font-size: 2.3rem;
	}
	.hero-content h2 {
		font-size: 3.2rem;
		margin-top: 1rem;
	}
}

@media (min-width: 1300px) and (min-height: 900px) {
	.hero-content h2 {
		font-size: 4rem;
	}
}
/* TWEAKS FOR SMALL SCREENS */

@media (max-height:400px) {
	.hero-content h2 {
		font-size: 1.3rem;
		max-width: 70vw;
	}
}

@media (max-width: 580px) and (max-height:800px) {
	.hero-content h1 {
		font-size: 1.1rem;
	}
	.hero-content h2 {
		font-size: 1.6rem;
		max-width: 70vw
	}
}

@media (max-width: 580px) and (max-height:650px) {
	.hero-content h2 {
		font-size: 1.3rem;
		max-width: 90vw;
	}
}

@media (max-width: 500px) and (max-height:500px) {
	.hero-content h1, .hero-content h2 {
		display: none
	}
}

/* LOGIN */

#login {
	position: absolute;
	font-weight: bold;
	top: 1rem;
	right: 1rem;
	display: inline-block;
    padding: 1rem 2rem;
    color: #fff !IMPORTANT;
    background-color: transparent;
    border: 2px solid #fff;
    text-align: center;
    outline: none;
    text-decoration: none;
    transition: color 0.1s ease-out, background-color 0.1s ease-out, border-color 0.1s ease-out;
	z-index: 10;
}

#login:hover, #login:active {
    background-color: #fdc757 !IMPORTANT;
    border-color: #fdc757 !IMPORTANT;
	color: #482664 !IMPORTANT;
}

/* NAVIGATION */

nav.pagemenu {
	font-weight: 400;
	font-size: 1.1rem;
	width: 100%;
	padding-bottom: 1rem;
	z-index: 2;

	@media screen and (min-width: 800px) {
		padding: 1rem 1vw 2rem;
	}
	@media screen and (min-width: 1000px) {
		padding: 1rem 1vw  2rem;
	}
	@media screen and (min-width: 1200px) {
		padding: 1rem 2vw  2rem;
	}
	@media screen and (min-width: 1400px) {
		padding: 1rem 3vw  2rem;
	}
	@media screen and (min-width: 1600px) {
		padding: 1rem 6vw  2rem;
	}
	@media screen and (min-width: 1800px) {
		padding: 1rem 9vw  2rem;
	}
	@media screen and (min-width: 2000px) {
		padding: 1rem 12vw  2rem;
	}
	@media screen and (min-width: 2200px) {
		padding: 1rem 15vw 2rem;
	}
}

#banner.hero nav.pagemenu {
	position: absolute;
	top: 0;
	background-image: linear-gradient(rgba(72,38,100,1) 30%, rgba(72, 38, 100, 0) 100%);
}

nav.pagemenu ul {
	list-style-type: none;
	margin: 0;
	margin-right: 8rem;
	padding:0;
}

nav.pagemenu li {
	display: block;
}

nav.pagemenu a {
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 0.2em 0.6em;
	border-top: solid 1px #fff;
	margin-left: 1em;
	cursor: pointer;
}

nav.pagemenu a:hover, nav.pagemenu a:active {
	background-color: #389;
	color: #fff !IMPORTANT;
}

#banner.hero nav.pagemenu a {
	color: #fff;
	border-color: #fff;
}

nav.pagemenu a.active, nav.pagemenu a.active:hover {
	background-color: rgb(256,256,256, 0.5) !IMPORTANT;
	color: #482664 !IMPORTANT;
}

.kca-logo {
	width: 9rem;
	height: 7rem;
	background-image: url("images/kca-logo-white-yellow.png");
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	border: none !IMPORTANT;
	margin-left: 0.5em !IMPORTANT;
	padding: 0 !IMPORTANT;
}

.kca-logo:hover {
	background-color: transparent !IMPORTANT
}

@media screen and (min-width: 580px) {
	#banner.hero nav.pagemenu {
		background-image: linear-gradient(rgba(72,38,100,1) 30%, rgba(0, 0, 0, 0) 100%);
		padding-bottom: 6rem;
	}

	nav.pagemenu ul {
		float: left;
		margin-top: 1.5em;
	}
	nav.pagemenu li {
		float: left;
		border: none;
		
	}
	nav.pagemenu a {
		border: none;
		padding: 0.2rem 0.8rem;
		margin: 0;
		margin-bottom: 0.3rem;
		background-color: transparent;
	}
	.kca-logo {
		background-color: transparent;
		width: 6em;
		height: 4em;
		margin-top: 0 !IMPORTANT;
		position: relative;
		top: -1.5em;
	}
}

@media screen and (min-width: 1200px) {
	nav.pagemenu {
		font-size: 1.4rem;
	}
	nav.pagemenu a {
		padding: 0.2rem 1.2rem
	}
	#login {
		top: 1.5rem;
		right: 3rem;
	}
	#badge {
		right: 1rem;
	}
}
@media screen and (min-width: 1400px) {
	nav.pagemenu {
		font-size: 1.6rem;
	}
	.kca-logo {
		margin-right: 3rem !IMPORTANT;
	}
	#login {
		top: 2rem;
		right: 5rem;
	}
	#badge {
		right: 2rem;
	}
	.hero-content a.bluebutton {
		left: 1rem;
	}
}

@media screen and (min-width: 1600px) {
	#login {
		top: 2rem;
		right: 8rem;
	}
	#badge {
		right: 5rem;
	}
	.hero-content a.bluebutton {
		left: 3rem;
	}
}
@media screen and (min-width: 1800px) {
	#login {
		top: 2rem;
		right: 13rem;
	}
	#badge {
		right: 8rem;
	}
	.hero-content a.bluebutton {
		left: 7rem;
	}
}
@media screen and (min-width: 2000px) {
	#login {
		top: 2rem;
		right: 17rem;
	}
	#badge {
		right: 13rem;
	}
	.hero-content a.bluebutton {
		left: 13rem;
	}
}
@media screen and (min-width: 2200px) {
	#login {
		top: 2rem;
		right: 21rem;
	}
	#badge {
		right: 15rem;
	}
	.hero-content a.bluebutton {
		left: 15rem;
	}
}

/* FOOTER */

footer {
	background-color: #482664;
	color: #fff;
	padding-bottom: 2em;
}

footer a.bluebutton {
	background-color: #fdc757 !IMPORTANT;
	color: #482664 !IMPORTANT
}

footer a.bluebutton:hover {
	background-color: #a9c !IMPORTANT;
}

#contact {
	display: grid;
	column-gap: 2em;
	grid-template-columns: auto auto;
}

#legals {
	font-size: 0.8em;
}

.socials {
	margin-bottom: 1rem;
}

.socials a, socials a:visited {
	display: inline-block;
	background: url("images/linkedin-button.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 2em;
	margin: 1em 1em 0 0.5em;
	color: #fdc757 !IMPORTANT
}

.socials a:hover, .socials a:visited:hover {
	color: #a9c !IMPORTANT
}

.socials a.social-facebook {
	background: url("images/facebook-button.png");
	background-repeat: no-repeat;
	background-size: contain;
}

.accreditation img {
	position: relative;
	float: right;
	margin: 0 0 1em 0.5em;
	top: 0;
	right: 0;
	width: 20vw;
	max-width: 120px;
	max-height: 120px;
	@media screen and (max-width: 300px ) {
		display: none;
	}
	@media screen and (max-width: 450px ) {
		width: 40vw;
		min-width: 60px;
	}
	@media screen and (max-width: 650px ) {
		float:left;
	}
	@media screen and (max-width: 1600px ) {
		width: 100%;
	}
  }

@media screen and (max-width: 500px) {
	#contact {
		grid-template-columns: auto;
	}
}

/* FEEDBACK QUOTES */
div.feedback-quotes {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(22%, 1fr) );
	column-gap: 2em;
	row-gap: 0;
	padding: 0; 
}

div.feedback-quotes p {
	padding: 1em 5em;
	background-color: transparent;
	color: #482664;
	position: relative;
	margin: 0;
}

div.feedback-quotes p:before {
	content: open-quote;
	position: absolute;
	top: -0.3em;
	left: 0.2em	;
}

div.feedback-quotes p:after {
	content: close-quote;
	position: absolute;
	top: -0.3em;
	right: 0.3em;
}

div.feedback-quotes p:before, div.feedback-quotes > p:after {
	display: inline-block;	
	color: #fdc757;
	font-size: 6em;
}

div.feedback-quotes em {
	font-style: italic;
	font-size: 0.75em;
}

@media screen and (max-width: 800px) {
	div.feedback-quotes {
		grid-template-columns: repeat( auto-fit, minmax(50%, 1fr) );
	}
	div.feedback-quotes > p:nth-child(n+2) {
		display:none;
	}
}

@media screen and (max-width: 1300px ) {
	div.feedback-quotes {
		grid-template-columns: repeat( auto-fit, minmax(33%, 1fr) );
	}
	div.feedback-quotes > p {
		display: block;
	}
	div.feedback-quotes > p:nth-child(n+3) {
		display:none;
	}
}

@media screen and (max-width: 2000px ) {
	div.feedback-quotes {
		grid-template-columns: repeat( auto-fit, minmax(20%, 1fr) );
	}
	div.feedback-quotes > p {
		display: block;
	}
	div.feedback-quotes > p:nth-child(n+4) {
		display:none;
	}
}

/* CALLBACK FORM */

section#callback {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 0;
	width: 40em;
	max-width: 75vw;
	z-index: 20;
	color: #fff;
}
section#callback h2 {
	background: none;
	font-weight: 400;
	margin: 0 !IMPORTANT;
	padding: 0.5em 2em 0.5em 1.2em;
	color: #fff;
	float: right;
	background-color: #389;
	border-radius: 1.2em 0 0 0;
	@media (max-width:500px) {
		font-size: 1.2rem;
	}
	@media (max-width:350px) {
		font-size: 1.1rem;
	}
}

section#callback h2:hover {
	cursor: pointer;
	color: #ccc;
}

form#callback-form, div#callback-confirmation {
	display: none;
	position: relative;
	clear: both;
	background-color: #389;
	padding: 1em 1.5em;
}

#callback-form input, #callback-form textarea, #callback-form select {
	width: 38em;
	max-width: 95%;
	margin-bottom: 0.6em;
	margin-right: 0.6em;
	font-size: 1em;
	font-family: "Geologica", sans-serif;
	font-weight: 300;
}

#callback-form input.name {
	width: 12em;
}

#callback-form input.telephone {
	width: 8em;
}

#callback-form input.email {
	width: 20em;
}

#callback-form select {
	width: auto;
	margin-top: 1em;
	margin-bottom: 1.5em;
}

#callback-form textarea {
	height: 7em;
	resize: none;
}

#callback-form input.submit, #callback-form input.cancel {
	width: auto;
	background-color: #fdc757;
	border: none;
	padding: 0.4em 0.8em;
}

#callback-form input.submit:hover, #callback-form input.cancel:hover {
	cursor: pointer;
	background-color: #ae883b;
}

#callback-form input.cancel {
	width: 3.6em;
}

/* DEBUGGING */

div.debug {
	border: 4px solid #fdc757;
	background-color: #f9f9f9;
	padding: 0 1.3em 0.5em;
	height:100%;
	text-align : left;
	font-family: Arial, Helvetica, sans-serif;
	font-size : 0.8em;
	color: #000;
}

h4.toggle, h3.toggle, a.toggle {
	display: block;
	margin-bottom: 0.8em;
	cursor: pointer;
}
a.toggle {
	color: #4F0163;
	font-size: 1rem;
	text-decoration: none;
	font-weight: 300;
}

h4.toggle:hover, h3.toggle:hover, a.toggle:hover {
	color: #389
}

h4.toggle.gold:hover, h3.toggle.gold:hover {
	color: #482664
}

h4.toggle:before, h3.toggle:before, a.toggle:before, a.toggle-above:before {
	content: '>>> '
}

h4.toggle.open:before, h3.toggle.open:before, a.toggle.open:before, a.toggle-above.open:before {
	content: '<<< '
}

table.rowstripe > tr:nth-child(odd), table.rowstripe > tbody > tr:nth-child(odd) {
	background-color: #f0f0e6;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	}

tr.list-header, tr.repeated-header, .list-table th {
	/* font-weight: bold; */
	color: #482664;
	background-color: transparent !IMPORTANT;
	}

tr.flagrow {
	background-color: #000 !IMPORTANT;
	color: #fff;
	font-weight: bold;
	}

tr.flagrow td:first-child {padding-left: 6px;}

tr.flagrow a, tr.flagrow a:visited {color: #fff;}

tr.flagrow a:hover {color: #fdc757;}

td.border-all, table.border-all > tr > td, table.border-all > tr > th {
	border: solid 1px #ccc;
	padding: 0.5em 1.5em;
}

/* TYPE COLOURS AND STYLES */

.green { color:green !IMPORTANT }

.yellow, a.yellow, a.yellow:visited {
	color: #fdc757 !IMPORTANT
}

a.yellow:hover, a.yellow:visited:hover {
	color: #999 !IMPORTANT
}

.strong, .bold { font-weight: 700  !IMPORTANT }

.underlined {
	text-decoration: underline;
}

/* GENERAL/UTILITY */

.clear { clear:both; }

*{scroll-behavior: smooth;}

section.jsonly { display: none; }

.js section.jsonly { display: block; }