/* CSS Document */

/*
colours
========================
Purple #7d4d81
Pink #d56f94
Orange #ce695c
Green #40adac
Cream #f7f6f1
Blue #74bacf
Background Blue #c1c1c1

$blue:				#74bacf;
$green:				#40adac;
$yellow:			#e9ca68;
$purple:			#7d4d81;
$red:				#ce695c;
$pink:				#d56f94;
$grey:				#4a4e4f;
$light-grey:		#c1c1c1;
$mid-grey:			#7b7b7b;
$warm-grey:			#f7f6f1;
$bg:				#fcfbf9;
$line:				#e9e9e9;

$blue--dark:		#74bacf;
$green--dark:		#40adac;
$yellow--dark:		#d2b55a;
$purple--dark:		#69406c;
$red--dark:			#ce695c;
$pink--dark:		#bd6384;
$grey--dark:		#313435;

*/



h1,h2,h3,h4,p,ul,ol,
.learning-content__nav,
.learning-content__button,
.learning-content__accordian,
.learning-content__accordian-heading,
.learning-content__accordian-content,
.learning-content__inline-list,
.learning-content__quick-check,
.learning-content__test-complete,
.learning-content__test-fail,
.click-drag {
	margin-bottom: 18px;
}

h1,h2,h3,h4 { padding-top: 9px; color: #d56f94; font-weight: normal; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; font-weight: bold; }

ul,ol { margin-left: 72px; }

fieldset { border: 0; margin: 0; }

.learning-content { min-width: 900px; max-width: 900px; width: 900px; margin: auto; }

.learning-content__nav { display: table; width: 100%; margin-left: 0; background: #74bacf; border: 5px solid #74bacf; border-radius: 6px; list-style: none; }
.learning-content__nav li { display: table-cell; width: 85px; }
.learning-content__nav a { display: block; text-align: center; text-decoration: none; line-height: 35px; color: white; }
.learning-content__nav .current { background: white; color: #74bacf; font-weight: bold; border-radius: 6px; }

.learning-content__button { display: inline-block; padding: 9px 18px; background: #74bacf; color: white; text-decoration: none; border-radius: 6px; cursor: pointer; }
.learning-content__button--advert { display: inline-block; padding: 9px 18px; background: #44b9b8; color: white; text-decoration: none; border-radius: 6px; cursor: pointer; }
.learning-content__button--test { background: #40adac; /* float: right; */ }
.learning-content__button--more { background: #ce695c; float: right; margin-top: 9px; margin-bottom: 0; }
.learning-content__button--more--advert { background: #44b9b8; float: right; margin-top: 9px; margin-bottom: 0; }
.learning-content__button--check { background: #40adac; border: 0; font-size: 18px; }
.learning-content__button--print { background: white; color: #74bacf; float: right; }

.learning-content__module { font-size: 36px; }

.learning-content__accordian { border: 5px solid #ce695c; background: #ce695c; padding: 9px 9px 0; }
.learning-content__accordian-heading,
.learning-content__accordian-content { background: white; padding: 0 18px 1px; min-height: 64px; clear: both; }
.learning-content__accordian-content { xdisplay: none; margin-top: -18px; }

.learning-content__accordian--advert { border: 5px solid #44b9b8; background: #44b9b8; padding: 9px 9px 0; text-align: left; }
.learning-content__accordian-heading--advert,
.learning-content__accordian-content { background: white; padding: 0 18px 1px; min-height: 64px; clear: both; }
.learning-content__accordian-heading--advert h3 { color: #44b9b8; text-align: left; }

.learning-content__table-grid { display: table; width: 100%; margin-left: 0; list-style: none; }
.learning-content__table-grid li { display: inline-table; width: 45%; padding: 9px; border: 5px solid #7d4d81; vertical-align: top; }

.learning-content__inline-list { list-style: none; margin: 0; }
.learning-content__inline-list > li { float: left; }

.learning-content__feature{ background: #e9ca68; padding: 18px; border-radius: 10px; }
.learning-content__text-with-audio { position: relative; }
.learning-content__audio-controls { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin-left: 16px; }
.learning-content__audio-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 5px 0; padding: 6px 8px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #111; font-size: 14px; font-weight: 400; box-shadow: none; text-align: center; backdrop-filter: blur(4px); cursor: pointer; }
.learning-content__audio-button[hidden] { display: none; }
.learning-content__audio-button-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; }
.learning-content__audio-icon { display: block; width: 14px; height: 14px; }
.learning-content__audio-icon--resume { display: none; }
.learning-content__audio-icon--pause { display: none; }
.learning-content__audio-button.is-playing .learning-content__audio-icon--read { display: none; }
.learning-content__audio-button.is-playing .learning-content__audio-icon--pause { display: block; }
.learning-content__audio-button.is-resume .learning-content__audio-icon--read,
.learning-content__audio-button.is-resume .learning-content__audio-icon--pause { display: none; }
.learning-content__audio-button.is-resume .learning-content__audio-icon--resume { display: block; }
.learning-content__audio-button-label { display: inline-block; text-align: center; }
.learning-content__audio-progress { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; border-radius: 999px; background: rgba(116, 186, 207, 0.25); overflow: hidden; }
.learning-content__audio-progress-bar { display: block; width: 100%; height: 0; border-radius: 999px; background: #74bacf; }
.learning-content__audio-copy { min-width: 0; padding-left: 16px; }

.learning-content__quick-check { background: #f7f6f1; padding: 18px; }
.question ul { list-style: none; }

.learning-content__question { clear: both; display: block; margin-bottom: 9px; margin-left: 36px; cursor: pointer; }
.learning-content__answer-option { float: left; margin-top: -28px; margin-left: 9px; }

.learning-link { display: block; font-size: 0.8em; padding: 5px 10px; background-color: #f1f1f1; margin-top: 32px; }

.correct { color: #40adac; }
.correct:before { content: "\2714 "; }
.incorrect { color: red; }
.correct,
.incorrect { width: auto; }
.incorrect:before { content: "\2718 "; }
.correct:before,
.incorrect:before { display:inline-block; margin-left: -36px; margin-right: 9px; }

dfn { position: relative; font-style: normal; border-bottom: 1px dotted black; cursor: pointer; }
dfn:after { content: ' ? '; background: black; color: white; font-size: 12px; padding: 2px; margin: 3px; border-radius: 50%; vertical-align: middle; font-weight: bold; }

.showtooltip { cursor: pointer; }
.tooltip { display: none; background: black; background: rgba(0,0,0,0.8); color: white; font-size: 14px; max-width: 500px; min-width: 100px; position: absolute; padding: 9px; cursor: pointer;
border-radius: 10px; z-index: 10; }
.tooltip ul {
	margin-left: 0;
	list-style-position: inside;
	list-style-type: square;
}
.tooltip:before {
	content: '';
	position: absolute;
	left: 15px;
	top: -10px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid black;
	border-bottom: 10px solid rgba(0,0,0,0.8);
}
.tooltip--left:before {
	left: auto;
	right: -20px;
	top: 10px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid black;
	border-left: 10px solid rgba(0,0,0,0.8);
}
.tooltip--right:before {
	left: -20px;
	top: 10px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid black;
	border-right: 10px solid rgba(0,0,0,0.8);
}
.tooltip--last:before {
	left: auto;
	right: 15px;
}

.cards { margin: 0 0 0 -18px; padding: 0; list-style: none; }
.cards:before,
.cards:after { content: ""; display: table; }
.cards:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.cards { zoom:1; }

.card {
	position: relative;
	float: left;
	width: 250px;
	height: 236px;
	margin: 18px;
	text-align: center;
	color: white;
	cursor: pointer;

	-webkit-perspective: 800px;
	   -moz-perspective: 800px;
	     -o-perspective: 800px;
		 	perspective: 800px;
}

.front,
.back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 224px;
	height: 240px;
	background: #d56f94;
	padding: 18px;
}

.front,
.back,
.flip .back {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
			transform: rotateX(0deg) rotateY(0deg);

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
			transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
			backface-visibility: hidden;

	/* -- transition is the magic sauce for animation -- */
	-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}

.front { line-height: 200px; color: white; font-size: 72px; font-weight: bold; }
.front--small { font-size: 24px; line-height: 1; padding-top: 90px; }

.flip .front {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
			transform: rotateY(180deg);
}

.back {
	border: 1px solid #d56f94;
	background: white;
	color: #d56f94;

	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
			transform: rotateY(-179deg);
}
.verbose { font-size: 18px; }


.click-drag,
.multi-click-drag { display: table; width: 100%; }
.drag-from-container,
.drag-to-container { display: table-cell; }

.drag-from-header,
.drag-to-header { width: 350px; margin: 0; color: white; font-size: 18px; font-weight: bold; text-align: center; padding: 9px; background: #d56f94; }
.drag-to-header { background: #40adac; }
.multi-click-drag .drag-from-header,
.multi-click-drag .drag-to-header { width: 275px; }

.drag-from,
.drag-to { overflow: visible; width: 350px; margin: 0; list-style: none; padding: 9px; background: #f7f6f1; }
.drag-to { overflow: auto; min-height: 72px; padding-bottom: 54px; }
.multi-click-drag .drag-from,
.multi-click-drag .drag-to { width: 275px; }

.drag-from li,
.drag-to li { position: relative; margin-bottom: 9px; padding: 9px 9px 9px 36px; background: white; font-size: 14px; }
.drag-to li { padding-left: 9px; color: #40adac; }
.drag-from li:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 27px; height: 100%; background: #ccc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAs0lEQVRYCe2USwrAIAxES0/g0Xr/TY9i80BBRBcRdKQ4IH4SnTjGXNfBmAKPbXutxdQYs7YEEGXiul8SBLetifMc21QEOz2T9XpXALfLexNnZO7dHtt0yJOQGxJEqQTjJT8A8gMUkD6BPAnL5IumRtmwTUWw00vC1tgVwKmELrmSszwJiUP6DUdU+98e6RPIk5Bq1ypArGGbimCn98jzuiuAUwldciVneRISh/Qbjqi2754PrQuIM3YYI7EAAAAASUVORK5CYII=) no-repeat center center;  }
.click-drag-success { background: #40adac; padding-bottom: 9px; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }


.missing-words {
	display: inline-block;
	vertical-align: middle;
	border: solid 1px #dddddd;
	margin-bottom: 24px;
}

.missing-words .click-drag,
.missing-words .multi-click-drag { display: block; width: 100%; }
.missing-words .drag-from-container,
.missing-words .drag-to-container { display: inline-block; vertical-align: middle; }

.missing-words .drag-from-container,
.missing-words .drag-from {
	width: 100%;
}

.missing-words .matcher {
	margin: 24px;
}

.missing-words .drag-to,
.missing-words .drag-land {
	min-height: 48px;
	padding-bottom: 9px;
	min-width: 150px;
	width: auto;
}

.missing-words .drag-to {
	background-color: white;
	border: solid 1px #dddddd;
}

.missing-words .drag-to.click-drag-success {
	min-height: 0;
	min-width: 0;
	width: auto;
	background-color: #40adac;
	border: 0;
	padding: 1px;
}

.missing-words .drag-from {
	display: block;
	padding: 12px 24px 8px;
}
.missing-words .drag-instruction {
	font-size: 15px;
	font-weight: bold;
	color: #999;
	margin-bottom: 9px;
}

.missing-words .drag-from-container span {
	margin-bottom: 4px;
}


.missing-words .drag-from span,
.missing-words .drag-to span { display: inline-block; position: relative; padding: 9px 9px 9px 9px; background: white; cursor: pointer; }
.missing-words .drag-to span { padding: 3px 9px; color: #40adac;  }
.missing-words .drag-from span:before { content: ' '; display: relative;  left: 0; top: 0;  height: 100%; background: #ccc center center;  }





.learning-content__test-complete { background: #40adac; padding: 18px; border-radius: 10px; color: white; }
.learning-content__test-fail { background: #f7f6f1; padding: 18px; border-radius: 10px; }
.learning-content__test-complete .learning-content__button,
.learning-content__test-fail .learning-content__button { margin-bottom: 0; }
.learning-content--test fieldset { border-bottom: 2px solid #ccc; padding-bottom: 32px; margin-bottom: 32px; }
.learning-content--test fieldset:last-child { border: 0; }
.learning-content--test fieldset > p { color: #74bacf; font-weight: bold; }

#footer ul { margin: 0; }
#footer h3 { font-size: 15px; color: #444; }

/* Clearfix */

/* For modern browsers */
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }


/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

img.center { display: block; margin: 0 auto; }
img.left { float: left; margin: 0 18px 18px 0; }
img.right { float: right; margin: 0 0 18px 18px; }

.diagram {
	position: relative;
	width: 700px;
	height: 600px;
	margin: 30px auto;
}
.diagram__hub {
	position: absolute;
	left: 300px;
	top: 200px;
	height: 100px;
	width: 100px;
	background: #00B9FC;
	border-radius: 50%;
	line-height: 100px;
	text-align: center;
}
.diagram__spoke {
	position: absolute;
	width: 200px;
	height: auto;
	border: 1px solid;
	text-align: center;
	padding: 10px;
}
.diagram__spoke--1 {
	top: 50px;
	left: 50px;
}
.diagram__spoke--2 {
	top: 50px;
	right: 50px;
}
.diagram__spoke--3 {
	bottom: 0;
	left: 250px;
}
.diagram__spoke:after {
	position: absolute;
	display: block;
	content: '';
	width: 100px;
	height: 50px;
	background: url(/site/img/arrow.png) no-repeat;
	background-size: 100px 50px
}
.diagram__spoke--1:after {
	top: 0;
	left: 250px;
}
.diagram__spoke--2:after {
	-ms-transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	transform: rotate(120deg);
	top: 320px;
	right: 50px;
}
.diagram__spoke--3:after {
	-ms-transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	transform: rotate(240deg);
	top: 50px;
	left: -150px;
}
.diagram .tooltip {
	left: 20px !important;
}

.bubble {
	padding: 1em 2em;
	border: 1px solid black;
	border-radius: 5px;
	position: relative;
	margin-top: 3.5em;
}

.has-down-arrow img {
	height: 50px;
	width: 50px;
	position: absolute;
	left: 193.5px;
	top: -3em;
}

.has-down-arrow-last-child img {
	height: 50px;
	width: 50px;
	position: absolute;
	left: 116.5px;
	top: -3em;
}

.has-left-arrow img {
	height: 50px;
	width: 50px;
	position: absolute;
	left: 116.5px;
	top: -3em;
	transform: rotate(45deg) scale(1) skew(1deg) translate(0px);
}

.has-right-arrow img {
	height: 50px;
	width: 50px;
	position: absolute;
	left: 116.5px;
	top: -3em;
	-webkit-transform: rotate(-45deg) scale(1) skew(1deg) translate(0px);
      -ms-transform: rotate(-45deg) scale(1) skew(1deg) translate(0px);
          transform: rotate(-45deg) scale(1) skew(1deg) translate(0px);
}

a { word-wrap: break-word; }

/*
.bubble:before {
	content: "";
	background-image: url(/photos/learning/RCD/arrow.png);
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	top: -4em;
}*/

.c-advert {
	padding: 24px;
	background-color: #40ADAC;
	text-align: center;
}

.c-advert .c-advert__heading {
	color: white;
}

.c-advert__standfirst {
	color: white;
	text-align: center;
}

.c-example {
	display: inline-block;
	margin: 0 auto;
	background-color: #44b9b8;
	margin-bottom: 24px;
}

.c-example__text {
	color: white;
	font-style: italic;
}

.base {
	display: block;
	position: relative;
	width: 100%;
	height: 125px;
	line-height: 125px;
	margin-bottom: 25px;
	background: #74bacf;
	color: white;
	font-size: 20px;
	font-weight: bold;
	text-align: center;

}
.example {
	border: 2px solid #d56f94;
	padding: 1em;
	font-style: italic;
	margin-bottom: 1em;
}

blockquote {
	font-size: 0.9em;
	font-style: italic;
	padding-left: 2em;
	border-left: 3px solid #f7f6f1;
}

.c-sticky-alert {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.c-sticky-alert__status {
	display: block;
	width: 100%;
	text-align: center;
	padding: $unit--small;
	color: white;
	font-weight: 900;
}

.c-sticky-alert__status--success {
	background-color: green;
}

.c-sticky-alert__status--warning,
.c-sticky-alert__status--fail {
	background-color: red;
}

ul.flexed {
	display: flex;
	flex-wrap: nowrap;
}
ul.flexed > li {
	margin: 0 1em;
	text-align: center;
	flex: 1;
}
.c-header-image {
	background-size: cover
	background-repeat: no-repeat;
	margin-bottom: 1.5em;
}
.c-header-image__image {
	display: block;
	margin: 0 auto;
}
.clearboth {
	clear: both;
}

.question_select {
	width: 100%;
	margin-bottom: 1em;
}
.grid--middle .grid__item {
	vertical-align: middle;
}
.u-mv {
	margin-top: 1em;
	margin-bottom: 1em;
}

.question_select {
	display: block;
	font-size: 16px;
	font-family: "freight-sans-pro", sans-serif;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	margin-bottom: 1em;
	border: 1px solid #ccc;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
	background-repeat: no-repeat;
	background-position: right .7em top 50%;
	background-size: .65em auto;
}
.question_select::-ms-expand {
	display: none;
}
.question_select:hover {
	border-color: #888;
}
.question_select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.question_select option {
	font-weight:normal;
}