/* Fonts. */


@font-face {
	font-family: Heebo;
	src: url(fonts/Heebo-Regular.ttf);
}
@font-face {
	font-family: Heebo;
	src: url(fonts/Heebo-Bold.ttf);
	font-weight: bold;
}
@font-face {
	font-family: Heebo-Medium;
	src: url(fonts/Heebo-Medium.ttf);
}
@font-face {
	font-family: Heebo-Black;
	src: url(fonts/Heebo-Black.ttf);
}
@font-face {
	font-family: Heebo-ExtraBold;
	src: url(fonts/Heebo-ExtraBold.ttf);
}
@font-face {
	font-family: Heebo-Light;
	src: url(fonts/Heebo-Light.ttf);
}
@font-face {
	font-family: Heebo-Thin;
	src: url(fonts/Heebo-Thin.ttf);
}





html {
	font-family: Heebo;
	color: #4A4A4A;
}

body {
	margin: 0;
	padding-bottom: 30px;
	min-width: 321px;
}

h2, h1.h1Variant {
	font-family: Heebo-Medium;
	font-size: 52px;
	line-height: 65px;
	font-weight: normal;
}

p {
	font-size: 16px;
	line-height: 25px;
}
p.center {
	text-align: center;
}

a {
	color: #004DFF;
	cursor: pointer;
	text-decoration: underline;
}
a:focus,
a:hover {
	outline: 2px solid #000;
}

span.hidden {
	width: 0px;
	height: 0px;
	position: absolute;
	left: -999999px;
	font-size: 0px;
}

@media only screen and (min-width: 320px) {
	body {
		overflow-x: hidden;
	}
	#optanon-minimize-wrapper #optanon-minimize-button {
		z-index: 99 !important;
	}
}





/* Preloader */

.image-loader{
	position: relative;
	left: 44%;
	display: none;
	max-width: 80px;
	height: 46px;
}
.image-loader .rect{
	position: relative;
	height: 80px;
	width: 80px;
	animation: rotating 1.7s linear infinite;
	margin-bottom: -80px;
}
.image-loader .rect .dot{
	position: absolute;
	left: 28px;
	top: 28px;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	background-color: #D7E2E9;
}
.image-loader .rect .dot.d_i{
	animation: dot_i 1.5s ease-in-out infinite;
}
.image-loader .rect .dot.d_ii{
	animation: dot_ii 1.5s ease-in-out infinite;
}
@keyframes rotating{
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes dot_i{
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(20px) scale(0.8);
	}
}
@keyframes dot_ii{
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20px) scale(0.8);
	}
}





/* Forms */

form {
	margin: 0;
	padding: 0;
	margin-top: 30px;
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
	margin-top: 60px;
}
fieldset:first-of-type {
	margin-top: 0;
}

fieldset p {
	font-size: 16px;
	line-height: 25px;
	margin: 0;
	padding: 0;
	margin-top: 5px;
	margin-bottom: 15px;
}

legend {
	font-family: Heebo;
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	padding: 0;
	margin-bottom: 10px;
}
fieldset.input legend {
	display: none;
}
fieldset.checkbox legend,
fieldset.radio legend {
	margin-bottom: 20px;
}

label {
	font-family: Heebo;
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	color: #4A4A4A;
}
fieldset.error label {
	color: #CC0029;
}
fieldset.input label {
	display: block;
	margin-bottom: 5px;
}
fieldset.checkbox label,
fieldset.radio label {
	font-size: 16px;
	line-height: 25px;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

input,
select,
textarea {
	color: #4A4A4A;
	font-family: Heebo;
	font-size: 16px;
	line-height: 26px;
	padding: 0px 20px 0px 20px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	width: calc(100% - 40px);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
	height: 60px;
	border: 1px solid #D7E2E9;
	background-color: #FFFFFF;
}

textarea {
	border: 1px solid #D7E2E9;
	background-color: #FFFFFF;
	padding: 20px;
	resize: vertical;
	min-height: 100px;
}

input[type="text"]:focus,
input[type="text"]:hover,
input[type="email"]:focus,
input[type="email"]:hover,
input[type="number"]:focus,
input[type="number"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
input[type="date"]:focus,
input[type="date"]:hover {
	outline: none;
	border: 1px solid #CAD5DD;
	box-shadow: 0px 0px 0px 1px #1D26B4;
}


/* Form item */

div.formItem {
	position: relative;
	margin-top: 50px;
	padding: 0;
}
div.formItem:first-of-type {
	margin-top: 0;
}
div.formItem label span.optional {
	font-size: 12px;
	margin-left: 15px;
	color: #999999;
	letter-spacing: .5px;
}
div.formItem .inline {
	display: inline-block;
}

/* Error message */
div.formItem p.error,
fieldset p.error {
	display: none;
	font-size: 16px;
	line-height: 25px;
	color: #CC0029;
	margin-top: 5px;
	position: absolute;
}
div.formItem.error p.error {
	display: block;
}

div.formItem.error input[type="text"],
div.formItem.error input[type="email"],
div.formItem.error input[type="number"],
div.formItem.error input[type="password"],
div.formItem.error input[type="date"],
div.formItem.error textarea {
	border: 1px solid #CC0029;
}

div.formItem > a {
	display: block;
	margin-top: 5px;
}


/* Text input with clickable icon/button (info, show pass ect.) */

div.formItem.icon button {
	position: absolute;
	top: 55px;
	right: 15px;
}
div.formItem.icon input[type="text"],
div.formItem.icon input[type="email"],
div.formItem.icon input[type="password"] {
	width: calc(100% - 75px);
	padding-right: 55px;
}



/* Checkbox */

fieldset.checkbox div {
	margin-top: 20px !important;
}
fieldset.checkbox div:first-of-type,
fieldset.checkbox.twocolumns div:nth-of-type(2) {
	margin-top: 0 !important;
}

fieldset.checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
fieldset.checkbox.twocolumns ul {
	column-count: 2;
	column-gap: 0;
}
fieldset.checkbox.twocolumns li {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 20px;
}

fieldset.checkbox.twocolumns div {
	display: inline-block;
	width: 49%;
}

input[type="checkbox"] {
	position: absolute; /* take it out of document flow */
	opacity: 0; /* hide it */
	outline: none;
}
/* Label */
input[type="checkbox"] + label {
	position: relative;
	cursor: pointer;
	padding: 0;
	font-size: 16px;
	line-height: 25px;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}
/* Box */
.checkboxes.nsn input[type="checkbox"] + label:before {
	border: 1px solid #A100FF;
}
.checkboxes.nsn input[type="checkbox"]:active + label:before {
	border: 2px solid #A100FF !important;
}
.checkboxes.nsn input[type="checkbox"]:checked + label:before {
	border-color: #A100FF;
	background-color: #fff;
}
input[type="checkbox"] + label:before {
	content: '';
	margin: 1px 21px 1px 1px;
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border: 1px solid #888;
	background-color: #FBFBFB;
}
fieldset.error input[type="checkbox"]:not([disabled]) + label:before {
	border: 2px solid #CC0029;
	margin: 0px 20px 0px 0px;
}
/* Box focus, hover */
input[type="checkbox"]:focus + label:before,
input[type="checkbox"]:hover + label:before {
	border: 2px solid #A100FF !important;
	margin: 0px 20px 0px 0px;
}
/* Box active */
input[type="checkbox"]:active + label:before {
	border: 2px solid #004DFF !important;
	margin: 0px 20px 0px 0px;
}
/* Box checked */
input[type="checkbox"]:checked + label:before {
	background-color: #004DFF;
	border-color: #004DFF;
}
input[type="checkbox"]:checked:focus + label:before,
input[type="checkbox"]:checked:hover + label:before {
	border-color: #000 !important;
}
/* Disabled state label */
input[type="checkbox"]:disabled + label {
	color: #C4CACF;
	cursor: auto;
	pointer-events: none;
}
/* Disabled box */
input[type="checkbox"]:disabled + label:before {
	box-shadow: none;
	border: 1px solid #DDDDDD;
	background-color: #FBFBFB;
	margin: 1px 21px 1px 1px;
	pointer-events: none;
}
/* Checkmark */
.checkboxes.nsn input[type="checkbox"]:checked + label:after {
	content: url('images/fjord/icons/checkbox-tick-purple.svg');
}
input[type="checkbox"]:checked + label:after {
	content: url('images/fjord/icons/checkbox-tick.svg');
	position: absolute;
	left: 8px;
	top: 7px;
}

@media only screen and (max-width: 700px) {
	#groupReportPage fieldset.checkbox.twocolumns ul {
		column-count: 1 !important;
		column-gap: 0;
	}
}



/* Checkbox card */

/* Container */
.checkboxes.nsn .checkboxCard {
	border: 1px solid #7500C0;
	outline: none;
}
.checkboxes.nsn .checkboxCard.checked {
	background-color: #8A00E0;
}
.checkboxes.nsn .checkboxCard.active {
	background-color: #8A00E0;
	border-color: black !important;
	outline: 1px solid black !important;
}
.checkboxes.nsn .checkboxCard.focus,
.checkboxes.nsn .checkboxCard:hover {
	border-color: black !important;
	outline: 1px solid black !important;
}
.checkboxCard {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 1px 22px 15px 1px;
	padding: 0;
	width: 330px;
	border: 1px solid #D7E2E9;
	background-color: #fff;
	min-height: 78px;
}
.checkboxCardHidden {
	display: none !important;
}
.checkboxCard.focus,
.checkboxCard:hover {
	border: 1px solid #A100FF;
	outline: 1px solid #A100FF;
}
.checkboxCard.active {
	border: 1px solid #1D26B4;
	outline: 1px solid #1D26B4;
}
/* Real checkbox */
.checkboxCard input[type="checkbox"] {
	cursor: pointer;
	min-width: 290px;
	width: 100%;
	max-width: 320px;
	margin: 0;
	margin-top: -1px;
}
.checkboxCard.large input[type="checkbox"] {
	height: 112px;
}
.checkboxCard.small input[type="checkbox"] {
	height: 62px;
}
/* Box */
.checkboxes.nsn .checkboxCard input[type="checkbox"] + label:before {
	top: -1px;
}
.checkboxes.nsn .checkboxCard.small input[type="checkbox"] + label:before {
	left: -45px;
}
.checkboxes.nsn .checkboxCard.small.twoLines input[type="checkbox"] + label:before {
	top: 11px;
}
.checkboxCard input[type="checkbox"] + label:before {
	position: absolute;
	top: 20px;
	width: 23px;
	height: 23px;
}
.checkboxCard.large input[type="checkbox"] + label:before {
	left: -46px;
}
.checkboxCard.small input[type="checkbox"] + label:before {
	left: -36px;
}
.checkboxCard input[type="checkbox"] + label:before {
	top: calc(50% - 15px) !important;
}
/* Checkmark */
.checkboxes.nsn .checkboxCard.small input[type="checkbox"]:checked + label:after {
	left: -41px;
	top: calc(50% - 15px);
}
.checkboxCard.large input[type="checkbox"]:checked + label:after {
	left: -41px;
	top: 2px;
}
.checkboxCard.small input[type="checkbox"]:checked + label:after {
	left: -31px;
	top: 2px;
}
.checkboxCard.twoLines input[type="checkbox"]:checked + label:after {
	top: 16px;
}
/* Label */
.checkboxes.nsn .checkboxCard.checked input[type="checkbox"] + label {
	color: #fff;
}
.checkboxes.nsn .checkboxCard.active input[type="checkbox"] + label {
	color: #fff;
}
.checkboxes.nsn .checkboxCard input[type="checkbox"] + label {
	color: #7500C0;
}
.checkboxes.nsn .checkboxCard.small input[type="checkbox"] + label {
	left: 60px;
	top: 26px;
	width: 75%;
	line-height: 24px;
}
.checkboxes.nsn .checkboxCard.small.twoLines input[type="checkbox"] + label {
	top: 6px;
}
.checkboxCard input[type="checkbox"] + label {
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 30px !important;
	color: #004DFF;
	margin-bottom: 18px;
}
.checkboxCard.large input[type="checkbox"] + label {
	left: 75px;
	top: 40px;
	width: 223px;
}
.checkboxCard.small input[type="checkbox"] + label {
	left: 50px;
	top: 15px;
	width: 265px;
}
@media only screen and (max-width: 1440px) {
	.checkboxCard.large input[type="checkbox"] + label {
		width: 195px;
	}
}
@media only screen and (max-width: 940px) {
	.checkboxCard.large input[type="checkbox"] + label {
		width: 223px;
	}
}
.checkboxCard.twoLines input[type="checkbox"] + label {
	top: 26px;
}
.checkboxCard.threeLines input[type="checkbox"] + label {
	top: 10px !important;
}



/* Radiobutton */

fieldset.radio div {
	margin-top: 20px !important;
}
fieldset.radio div:first-of-type,
fieldset.radio.twocolumns div:nth-of-type(2) {
	margin-top: 0 !important;
}

fieldset.radio.twocolumns div {
	display: inline-block;
	width: 49%;
}

fieldset.error input[type="radio"]:not([disabled]) + label:before {
	border: 2px solid #CC0029;
	background-color: #FFFFFF;
	margin: 0;
}

input[type="radio"] {
	position: absolute; /* take it out of document flow */
	opacity: 0; /* hide it */
}
input[type="radio"] + label {
	position: relative;
	padding-left: 44px;
	cursor: pointer;
	line-height: 34px;
	display: inline-block;
}
input[type="radio"]:disabled + label {
	color: #C4CACF;
	pointer-events: none;
}
input[type="radio"] + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border: 1px solid #DDDDDD;
	border-radius: 100%;
	background-color: #FBFBFB;
	margin: 1px;
}
input[type="radio"]:hover + label:before {
	border: 2px solid #CAD5DD !important;
	background-color: #FFFFFF;
	margin: 0;
}
input[type="radio"]:focus + label:before {
	border: 2px solid #A100FF !important;
	background-color: #FFFFFF;
	margin: 0;
}
input[type="radio"]:active + label:before {
	border: 4px solid #004DFF !important;
	background-color: #FFFFFF;
	margin: 0;
	width: 26px;
	height: 26px;
}
input[type="radio"] + label:after {
	content: '';
	width: 26px;
	height: 26px;
	background: #A100FF;
	position: absolute;
	top: 4px;
	left: 4px;
	border-radius: 100%;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
input[type="radio"]:not(:checked) + label:after {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}
input[type="radio"]:checked + label:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


/* Info message/tip to the input */

div.formItem div.tip {
	position: absolute;
	top: 0;
	right: -275px;
	width: 200px;
	border-radius: 3px;
	padding: 20px;
	background-color: #F3F3F3;
	display: none;
}
div.formItem div.tip::before {
	content: '';
	width: 0;
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 11px solid #F3F3F3;
	position: absolute;
	left: -11px;
	top: calc((100% - 8px) / 2);
}
div.formItem div.tip p {
	margin: 0;
}
@media only screen and (max-width: 1100px) {
	div.formItem div.tip {
		top: 110px;
		right: -2px;
		z-index: 99;
	}
	div.formItem div.tip::before {
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 11px solid #F3F3F3;
		position: absolute;
		top: -19px;
		left: 20px;
	}
}

/* Password requirement list */
div.formItem div.tip ul {
	margin: 0;
	margin-top: 10px;
	padding: 0;
	padding-left: 20px;
}
div.formItem div.tip ul li.valid {
	list-style: none;
}
div.formItem div.tip ul li.valid::before {
	content: '\2713';
	display: inline-block;
	margin-right: 7px;
	margin-left: -20px;
	color: #1d26b4;
	width: 13px;
}

div.button {
	text-align: center;
}
div.button.cancel {
	margin-top: 50px;
}





/* Buttons */

button,
a.button,
input[type="submit"] {
	cursor: pointer;
	font-family: Heebo;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
	text-decoration: none;
}
button[type="submit"],
input[type="submit"] {
	margin-top: 50px !important;
}
button:disabled,
a.button.disabled {
	opacity: .6;
	pointer-events: none;
}


/* Primary */

button.primary,
a.button.primary,
input[type="submit"] {
	display: block;
	margin: auto;
	height: 46px;
	min-width: 150px;
	padding: 0 40px 0 40px;
	border: none;
	background-color: #8A00E0;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}
a.button.primary,
button.button.primary {
	text-align: center;
	line-height: 46px;
}
button.primary.M,
a.button.primary.M,
input[type="submit"].M {
	width: 150px;
	padding: 0;
}
button.primary.L,
a.button.primary.L,
input[type="submit"].L {
	width: 240px;
}
button.primary.XL,
a.button.primary.XL,
input[type="submit"].XL {
	width: 330px;
}
button.primary:hover,
a.button.primary:hover,
input[type="submit"]:hover,
button.primary:focus,
a.button.primary:focus,
input[type="submit"]:focus {
	border: 2px solid #000;
	background-color: #8A00E0;
	box-shadow: 4px 4px 0 0 #000;
}
button.primary:active,
a.button.primary:active,
input[type="submit"]:active {
	box-shadow: 2px 2px 0 #000 !important;
}
button.primary:disabled,
a.button.primary.disabled,
input[type="submit"]:disabled {
	background-color: #D7E2E9;
	color: #000;
}

@media only screen and (max-width: 765px) {
	button.primary.XL,
	a.button.primary.XL,
	input[type="submit"].XL {
		width: min(100%, 330px);
	}
}


/* Secondary */

button.secondary,
a.button.secondary {
	min-width: 76px;
	padding: 14px 30px 14px 30px;
	border: 2px solid #A100FF;
	border-radius: 25px;
	color: #A100FF !important;
	font-size: 16px;
	line-height: 20px;
	background-color: #fff;
}
button.secondary:hover,
button.secondary:focus,
a.button.secondary:hover,
a.button.secondary:focus {
	background-color: rgba(161, 0 , 255, 0.18);
}


/* Small */

button.small,
a.button.small {
	min-width: 65px;
	padding: 7px 15px 7px 15px;
	border-radius: 25px;
	font-size: 16px;
	line-height: 14px;
	background-color: #fff;
}

/* Light */

button.small.light,
a.button.small.light {
	border: 2px solid #A100FF;
	color: #A100FF !important;
}
button.small.light:hover,
button.small.light:focus,
a.button.small.light:hover,
a.button.small.light:focus {
	background-color: rgba(161, 0 , 255, 0.18);
	color: #000 !important;
}

/* Update */

button.small.update,
a.button.small.update {
	border: 2px solid #004DFF;
	color: #004DFF !important;
}
button.small.update:hover,
button.small.update:focus,
a.button.small.update:hover,
a.button.small.update:focus {
	background-color: rgba(0, 77 , 255, 0.18);
}

/* Delete */

button.small.delete,
a.button.small.delete {
	border: 2px solid #CC0029;
	color: #CC0029 !important;
}
button.small.delete:hover,
button.small.delete:focus,
a.button.small.delete:hover,
a.button.small.delete:focus {
	background-color: rgba(220, 20 , 60, 0.15);
}
button.small.delete:active,
a.button.small.delete:active,
button.small.delete:hover,
button.small.delete:focus,
a.button.small.delete:hover,
a.button.small.delete:focus {
	background-color: rgba(220, 20 , 60, 1);
	color: #fff !important;
}


/* Header button (login, change country, etc.) */

button.header,
a.button.header {
	color: #460073;
	border: none;
	background-color: #fff;
	min-width: 125px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	display: block;
	margin-left: 15px;
	padding-left: 25px;
	padding-right: 25px;
	min-width: 75px;
}
button.header:disabled,
a.button.header.disabled {
	opacity: 1;
	color: #8A96A0;
	background-color: #D7E2E9;
}
button.header:focus,
a.button.header:focus,
button.header:hover,
a.button.header:hover {
	outline: 2px solid #fff;
	background-color: #460073;
	color: #fff !important;
}
#header.white button.header,
#header.white a.button.header {
	background-color: #460073;
	color: #fff;
}
#header.white button.header:focus,
#header.white a.button.header:focus {
	background-color: #fff;
	color: #460073;
	outline: 2px solid #460073;
}


/* Flag button / country selector */

button.flag {
	width: 60px;
	height: 28px;
	border: none;
	background: none;
	position: relative;
	display: block;
}
button.flag::after {
	content: url('images/fjord/icons/arrow-drop-down_small.png');
	margin-left: 10px;
	position: absolute;
	top: 4px;
	left: 35px;
}
#header.white button.flag::after {
	content: url('images/fjord/icons/arrow-drop-down_small_black.png');
}
button.flag:focus,
button.flag:hover {
	outline: 2px solid #fff;
}
#header.white button.flag:focus {
	outline: 2px solid #460073;
}
button.flag img {
	position: absolute;
	top: 3px;
	left: 3px;
}


/* My profile button */

button.myProfile {
	background: none;
	border: none;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	padding-right: 15px;
	padding-top: 18px;
	padding-bottom: 18px;
}
button.myProfile::before {
	content: url('images/fjord/icons/my-profile.svg');
	position: relative;
	top: 2px;
	min-width: 50px;
	min-height: 50px;
}
button.myProfile:active::before,
button.myProfile:focus::before,
button.myProfile:hover::before {
	content: url('images/fjord/icons/my-profile_hover.svg');
}
button.myProfile::after {
	content: url('images/fjord/icons/arrow-drop-down_big.png');
	position: relative;
	top: -18px;
	left: 10px;
}


/* Icon button (popup close, form input info etc.) */

button.icon {
	width: 30px !important;
	height: 30px !important;
	border: none !important;
	background-repeat: no-repeat !important;
	background-position: 5px 5px !important;
	font-size: 0;
}
button.icon:hover,
button.icon:active,
button.icon:focus {
	background-repeat: no-repeat !important;
	background-position: 5px 5px !important;
	background-color: rgba(0, 77, 255, 0.11) !important;
	box-shadow: 0px 0px 0px 2px #004DFF !important;
}

/* Info (e.g. access code info) */

button.info {
	background: url('images/fjord/icons/question_mark.png');
}

/* Show/hide password */

button.pass {
	background: url('images/fjord/icons/view_password.png');
}


/* Close button (for dialogs) */

#modal button.close {
	background: url('images/fjord/icons/close.svg');
}
#modal button.close:hover {
	background: url('images/fjord/icons/close_hover.svg');
}
#modal button.close:active,
#modal button.close:focus,
#modal button.close:focus:hover {
	background: url('images/fjord/icons/close_focus.svg');
}
#modal button.close {
	position: absolute;
	top: 30px;
	right: 30px;
}


/* Link button (e.g. Read More, Load More) */

button.link,
a.button.link {
	color: #004DFF;
	font-size: 16px;
	line-height: 20px;
	padding: 5px;
	background: none;
	border: none;
	white-space: nowrap;
}
button.link:focus,
a.button.link:focus,
button.link:active,
a.button.link:active,
button.link:hover,
a.button.link:hover {
	box-shadow: 0px 0px 0px 2px #004DFF !important;
}
button.link:disabled,
a.button.link.disabled {
	color: #8A96A0;
	opacity: .5;
	pointer-events: none;
	box-shadow: none !important;
}


/* Download button */

button.download,
a.button.download {
	color: #004DFF;
	font-size: 16px;
	line-height: 20px;
	padding: 0px 15px 5px 15px;
	background: none;
	border: none;
	display: inline-block;
}
button.download::after,
a.button.download::after {
	content: url('images/fjord/icons/download.svg');
	position: relative;
	top: 5px;
	margin-left: 10px;
}
button.download:focus, button.download:active,
a.button.download:focus, a.button.download:active,
a.button.download:hover, a.button.download:hover {
	background-color: #F2F2F2;
	outline: 2px solid #004DFF;
}
button.download:disabled,
a.button.download.disabled {
	color: #8A96A0;
	opacity: .5;
	pointer-events: none;
	background: none;
}
button.download:disabled::after,
a.button.download.disabled::after {
	content: url('images/fjord/icons/download_disabled.svg');
}


/* Back button */

button.back,
a.button.back {
	padding: 0;
	background: none;
	border: none;
	width: 70px;
	height: 70px;
}
a.button.back {
	width: 68px;
	height: 68px;
}
button.back::after,
a.button.back::after {
	content: '';
	position: relative;
	top: 20px;
	left: 20px;
	display: block;
	height: 31px;
	width: 29px;
	background-size: 31px 29px;
	background-image: url('images/fjord/icons/back-arrow.svg');
	background-repeat: no-repeat;
}
button.back::after {
	top: 0px;
}
button.back:focus,
a.button.back:focus,
button.back:active,
a.button.back:active,
button.back:hover,
a.button.back:hover {
	box-shadow: inset 0px 0px 0px 4px #004DFF;
}
button.back:active,
a.button.back:active {
	background-color: rgba(0, 77, 255, 0.11) !important;
}
button.back:focus::after,
a.button.back:focus::after,
button.back:active::after,
a.button.back:active::after,
button.back:hover::after,
a.button.back:hover::after {
	background-image: url('images/fjord/icons/back-arrow_focus.svg');
}
button.back:disabled,
a.button.back.disabled {
	opacity: .5;
	pointer-events: none;
	box-shadow: none;
}





/* Component/page content main container */


.mainContainer {
	width: 100%;
	min-width: 1440px;
	position: relative;
}
.mainContainer > div {
	width: 1440px;
	margin: auto;
}
@media only screen and (max-width: 1440px) {
	.mainContainer {
		min-width: 940px;
	}
	.mainContainer > div {
		width: 940px;
	}
}
@media only screen and (max-width: 940px) {
	.mainContainer {
		min-width: 765px;
	}
	.mainContainer > div {
		width: 765px;
	}
}
@media only screen and (max-width: 765px) {
	.mainContainer {
		min-width: 290px;
		width: 100%;
	}
	.mainContainer > div {
		min-width: 290px;
		width: 100%;
	}
}





/* Notifications */

#notificationContainer {
	position: absolute;
	z-index: 8;
}
#notificationContainer div {
	position: absolute;
	width: 100%;
}
#notificationContainer div.error {
	background-color: #CC0029;
}
#notificationContainer div.success {
	background-color: #00B383;
}
#notificationContainer div.info {
	background-color: #3F4AF7;
}
#notificationContainer div.warning {
	background-color: #FF9F00;
}

#notificationContainer p {
	text-align: center;
	color: #fff;
	font-family: Heebo;
	font-size: 32px;
	line-height: 48px;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 20px;
	max-width: 1110px;
}
#notificationContainer div.error p {
	font-size: 20px;
	line-height: 30px;
}
#notificationContainer div.error a {
	color: inherit;
	text-decoration: underline;
}

@media only screen and (max-width: 1440px) {
	#notificationContainer p {
		max-width: 940px;
	}
}
@media only screen and (max-width: 940px) {
	#notificationContainer p {
		max-width: 765px;
	}
}




/* Modal dials */

#modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1440px;
	height: 100px;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}
@media only screen and (max-width: 1440px) {
	#modal {
		min-width: 940px;
	}
}
@media only screen and (max-width: 940px) {
	#modal {
		min-width: 765px;
	}
}
@media only screen and (max-width: 765px) {
	#modal {
		min-width: 290px;
	}
}

#modal > div {
	position: absolute;
	background-color: #fff;
	margin: auto;
	border-radius: 4px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	display: none;
}

#modal p.title {
	font-family: Heebo-Medium;
	font-size: 32px;
	padding: 0;
	margin: 0;
	margin-bottom: 45px;
}


/* Country selector */

#countrySelector {
	max-width: 470px;
	padding: 30px;
}

#countrySelector a {
	display: inline-block;
	vertical-align: middle;
	width: 215px;
	margin: 0 30px 17px 0;
	padding: 0;
	opacity: 0.8;
	font-family: Heebo;
	font-size: 16px;
	line-height: 25px;
	text-decoration: none;
	outline: none;
	color: inherit;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#countrySelector a:nth-child(even) {
	margin-right: 0;
}
#countrySelector a:active,
#countrySelector a:focus,
#countrySelector a:hover {
	box-shadow: 0px 0px 0px 2px #A100FF;
	background-color: #F3F3F3;
}

#countrySelector a img {
	display: inline-block;
	vertical-align: middle;
	margin: 3px 0px 3px 3px;
	padding: 0;
	margin-right: 10px;
	width: 30px;
	height: 23px;
}
@media only screen and (max-width: 535px) {
	#countrySelector a {
		display: block;
		margin: auto !important;
		margin-bottom: 13px !important;
	}
	#countrySelector p {
		max-width: 250px;
	}
}





/* Header */


#header {
	position: relative;
	background-color: #460073;
	min-height: 100px;
	color: #fff;
	z-index: 9;
}
#header > div {
	background-color: #460073;
	position: relative;
}

#header.white {
	background: none;
}
#header.white > div {
	background: none;
}

#header ul#accessibilityControls {
	display: block;
	position: absolute;
}
#header ul#accessibilityControls li a {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-clip-path: inset(100%);
	clip-path: inset(100%);
	-webkit-clip: rect(1px,1px,1px,1px);
	clip: rect(1px,1px,1px,1px);
	outline: 2px solid #fff;
	padding: 7px;
	background-color: #460073;
	z-index: 1;
}
#header ul#accessibilityControls li a:focus {
	width: auto;
	height: auto;
	overflow: visible;
	position: relative;
	text-decoration: underline;
	-webkit-clip-path: none;
	clip-path: none;
	-webkit-clip: none;
	clip: none;
}

#logo {
	position: relative;
	top: 18px;
	left: 50px;
	width: 360px;
	min-height: 50px;
	display: block;
	font-family: Heebo;
}
#logo a,
#logo.logoNoLink span:first-child {
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	font-size: 26px;
	outline: none;
}

#logo span {
	display: block;
	min-height: 60px;
}

#logo a:focus,
#logo a:hover {
	outline: 2px solid #fff;
}

#header.white #logo a {
	color: #460073;
}
#header.white #logo a:focus,
#header.white #logo a:hover {
	outline: 2px solid #460073;
}

@media only screen and (max-width: 1440px) {
	#logo a,
	#logo.logoNoLink span:first-child {
		font-size: 20px;
	}
}
@media only screen and (max-width: 940px) {
	#logo a,
	#logo.logoNoLink span:first-child {
		font-size: 16px;
	}
	#header.loggedIn {
		min-height: 180px;
	}
}
@media only screen and (max-width: 765px) {
	#logo {
		width: 210px;
		display: inline-block;
	}
	#header {
		padding-bottom: 8px;
	}
}
#logo span:last-child {
	font-size: 16px;
	font-weight: 400;
	display: block;
	color: #fff;
	margin-top: 0px;
}
#header.white #logo span {
	color: #460073;
}
@media only screen and (max-width: 940px) {
	#logo span:last-child {
		font-size: 11px;
	}
	#logo span:last-child::after {
		transform: scale(.7);
		margin-left: -7px !important;
		margin-top: -8px !important;
	}
}
#logo span:last-child::after {
	content: url(images/fjord/logo-header.png);
	display: inline-block;
	position: absolute;
	margin-left: 6px;
	margin-top: -5px;
}
#header.white #logo span::after {
	content: url(images/fjord/logo-header_purple.png);
}

/* Search bar */

#searchContainer {
	background-color: #fff !important;
	position: relative;
	top: 29px;
	width: 100%;
	border-bottom: 1px solid #D7E2E9;
	color: #4A4A4A;
	font-size: 20px;
    transition: max-height 0.3s ease-in-out;
	overflow: hidden;
	max-height: 0;
	visibility: hidden;
}
#searchContainer.expanded {
	max-height: 800px;
	transition: max-height 0.5s ease-in-out;
	visibility: visible;
}
#searchContainer > div {
	max-width: 1035px;
	margin: auto;
}
#searchContainer p {
	font-size: inherit;
}

#searchBar {
	position: relative;
	padding-top: 30px;
	padding-bottom: 30px;
}
#searchBar::before {
	content: url(images/fjord/icons/search_dark.png);
	position: absolute;
	top: 49px;
	left: 20px;
	z-index: 999;
}

#searchBar input {
	padding-left: 55px;
	width: calc(100% - 120px);
	font-size: 18px;
}
#searchBar input::placeholder {
	color: #8A96A0;
}

#searchBtn {
	position: absolute;
	top: 46px;
	right: 60px;
}

#searchClearBtn {
	background: url(images/fjord/icons/search_clear.png);
	background-repeat: no-repeat;
	font-size: 0;
	border: none;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 45px;
	right: 0px;
}

#searchResult {
	position: relative;
	left: 56px;
}

#searchResult p.title:not(:first-child) {
	margin-top: 40px;
}

@media only screen and (max-width: 1440px) {
	#searchContainer > div {
		max-width: 900px;
	}
}
@media only screen and (max-width: 940px) {
	#searchContainer > div {
		max-width: 720px;
	}
}


/* Country info */

#header #countryInfo {
	color: inherit;
	position: absolute;
	top: 28px;
	right: 50px;
	padding: 0;
	margin: 0;
}
#header.login #countryInfo {
	right: 30px;
}
#header #countryInfo p {
	font-family: Heebo;
	font-size: 20px;
	line-height: 0px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
}
#header.white #countryInfo p {
	color: #000;
}

#countryInfo .countryName {
	font-weight: bold;
}

@media only screen and (max-width: 1440px) {
	#countryInfo .info {
		display: none;
	}
}
@media only screen and (max-width: 940px) {
	#countryInfo button.header {
		display: none;
	}
}
@media only screen and (max-width: 765px) {
	#countryInfo button.header {
		display: none;
	}
	#header #countryInfo {
		color: inherit;
		position: relative;
		top: 0;
		padding: 0;
		margin: 0;
		margin-left: 50px;
		right: 0;
		display: inline-block;
	}
	#header.login #countryInfo {
		right: 0px;
	}
}

#countryInfo button,
#countryInfo a.button {
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
}


/* User controls/menu */

#userControls {
	position: absolute;
	top: 0px;
	right: 50px;
}

#userControls img {
	display: inline-block;
	vertical-align: middle;
}

#header ul {
	display: inline-block;
	font-family: Heebo;
	font-weight: bold;
	font-size: 16px;
	list-style: none;
	margin: 0;
	margin-right: -30px;
}
#header li {
	display: inline-block;
	margin-right: 30px;
	margin-top: 4px;
}
@media only screen and (max-width: 1440px) {
	#userControls > nav > ul > li {
		margin-right: 23px;
	}
	#userControls > nav > ul {
		margin-right: -60px;
	}
}
@media only screen and (max-width: 940px) {
	#userControls {
		top: 80px;
	}
	#userControls > nav > ul > li {
		margin-right: 30px;
	}
	#userControls > nav > ul {
		margin-right: -30px;
	}
}
@media only screen and (max-width: 765px) {
	#userControls {
		position: relative;
		top: 0;
		right: unset;
		margin: auto;
	}
}
@media only screen and (max-width: 320px) {
	#userControls > nav > ul {
		margin-right: 30px !important;
	}
}

/* Navigation dropdown */

#naviDropdown {
	width: 240px;
	position: absolute;
	right: 0px;
	top: 100px;
	background-color: #460073;
	display: none;
	margin: 0 !important;
	padding: 0 !important;
}
#naviDropdown ul {
	padding: 0;
	margin: 0;
	width: 100%;
}
#naviDropdown li {
	display: block;
	width: 100%;
	height: 50px;
}
#naviDropdown li.logout a {
	opacity: .5;
}
#naviDropdown li a {
	display: block;
	padding: 10px 0px 0px 20px !important;
	margin: 0 !important;
	font-size: 16px;
	font-weight: bold;
	line-height: 30px;
	border: none !important;
}
#naviDropdown li a:hover,
#naviDropdown li a:active,
#naviDropdown li a:focus {
	opacity: 1;
	outline: none !important;
}
@media only screen and (max-width: 410px) {
	#naviDropdown {
		top: 200px;
	}
}
@media only screen and (max-width: 340px) {
	#naviDropdown {
		top: 295px;
	}
}





/* Header & footer menu links */


#header ul a,
#footerLinks ul a,
#footer ul a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	outline: none;
}
#header li a {
	padding: 34px 0px 34px 0px;
	white-space: nowrap;
}
#footer li a {
	padding: 22px 0px 22px 0px;
	white-space: nowrap;
	text-decoration: underline;
}
#footer li a {
	position: relative;
	top: 5px;
}
#footerLinks li a {
	text-decoration: underline;
}
/* #footerLinks li a:focus::after,
#footerLinks li a:hover::after,
#footerLinks li a.selected::after,
#footer li a:focus::after,
#footer li a:hover::after,
#footer li a.selected::after, */
#header #mainMenu li a:focus::after,
#header #mainMenu li a:hover::after,
#header #mainMenu li a.selected::after {
	background-color: #fff;
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	margin-top: -3px;
}
#header #mainMenu li a:focus,
#header #mainMenu li button:focus,
#footerLinks li a:focus,
#footerLinks li a:hover,
#footer li a:focus,
#footer li a:hover {
	outline: 2px solid #fff;
}
#header a.selected,
#footerLinks a.selected,
#footer a.selected {
	pointer-events: none;
}
#header li a.search {
	font-weight: normal;
}
#header li a.search::before {
	content: url('images/fjord/icons/search.png');
	position: relative;
	top: 1px;
	margin-right: 8px;
}




#footers {
	padding-top: 30px;
	background-color: #5A5A5A;
	min-width: 320px;
}

/* Pre-footer (links) */


#footerLinks {
	position: relative;
	background-color: #5A5A5A;
	min-height: 225px;
	color: #fff;
}
#footerLinks > div {
	background-color: #5A5A5A;
}

#footerLinksContent {
	width: 1050px;
	margin: auto;
	position: relative;
}
@media only screen and (max-width: 1440px) {
	#footerLinksContent {
		width: 880px;
	}
}
@media only screen and (max-width: 940px) {
	#footerLinksContent {
		width: 705px;
	}
}
@media only screen and (max-width: 765px) {
	#footerLinksContent,
	#footerContent {
		width: 100%;
	}
}
#footerLinksContent .logo {
	position: relative;
	display: inline-block;
	left: min(40px, 4%);
	margin-bottom: 20px;
}
#footerLinksContent .logo img {
	top: 25px;
	left: 0px;
	width: 164px;
	height: 43px;
}

#footerLinks p.title {
	font-family: Heebo-Medium;
	font-size: 16px;
	line-height: 16px;
	margin: 0;
	margin-bottom: 15px;
	min-width: 130px;
	max-width: 150px;
}

#footerLinks ul {
	margin: 0;
	padding: 0;
	font-family: Heebo;
	font-size: 14px;
	line-height: 20px;
	list-style: none;
	min-width: 130px;
	max-width: 150px;
	position: relative;
	top: 5px;
}

#footerLinks li {
	margin-bottom: 6px;
}
#footerLinks li:last-child {
	margin-bottom: 0;
}

#footerLinksContent #menus {
	float: right;
	padding-bottom: 10px;
	margin-left: 10px;
}
#footerLinks .menu {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 40px;
	padding-left: 10px;
	margin-bottom: 40px !important;
}
@media only screen and (max-width: 1440px) {
	#footerLinks .menu {
		margin-left: 50px;
	}
}
@media only screen and (max-width: 940px) {
	#footerLinks .menu {
		margin-left: 0;
	}
}
@media only screen and (max-width: 765px) {
	#footerLinksContent .logo {
		margin-right: 50px;
		margin-bottom: 30px;
	}
}
#footerLinks .menu:first-of-type {
	margin: 0;
}





/* Footer */


#footer {
	background-color: #5A5A5A;
	color: #fff;
	font-family: Heebo;
	font-size: 16px;
	clear: both;
}
#footer > div {
	background-color: #5A5A5A;
	border-top: 1px solid rgba(255, 255, 255, .35);
	overflow: hidden;
}

#footerContent {
	width: 1050px;
	margin: auto;
	position: relative;
}
@media only screen and (max-width: 1440px) {
	#footerContent {
		width: 880px;
	}
}
@media only screen and (max-width: 940px) {
	#footerContent {
		width: 705px;
	}
}
@media only screen and (max-width: 765px) {
	#footerContent {
		left: min(40px, 4%);
		min-width: 290px;
		width: 100%;
	}
}


#footer .copyrights {
	opacity: 0.8;
	margin-top: 28px;
}


#footer ul {
	font-family: Heebo-Medium;
	list-style: none;
	margin: 0;
	float: right;
	clear: right;
}
#footer li {
	display: inline-block;
	margin-right: 33px;
	white-space: nowrap;
}
#footer li:last-child {
	margin: 0;
}

#footer p {
	display: inline-block;
}



/* Cards / tiles (activity packs, courses, modules) */

/* Advisor support/marketing materials */

.assetTile {
	position: relative;
	display: inline-block;
	vertical-align: top;
	border: 2px solid #D7E2E9;
	border-top: none;
	width: 210px;
	min-height: 222px;
	padding: 15px;
	text-decoration: none;
	color: #4A4A4A;
	outline: none;
	margin-right: 20px;
	margin-bottom: 30px;
	background-color: #fff;
}
.assetTile::before {
	content: '';
	display: block;
	width: 244px;
	height: 10px;
	background-color: #A100FF;
	position: absolute;
	top: 0px;
	left: -2px;
}
.assetTile::after {
	content: url('images/fjord/icons/download.svg');
	position: absolute;
	right: 15px;
	bottom: 10px;
}
.assetTile:hover {
	border: 2px solid #8A96A0;
	border-top: none;
}
.assetTile:hover::after {
	bottom: 14px;
}
.assetTileHidden {
	display: none !important;
	opacity: 0;
}

.assetTile span {
	display: block;
}
.assetTile span:first-of-type { /* Title */
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
	margin-top: 5px;
	min-height: 55px;
}
.assetTile span:nth-of-type(2) { /* Sub title */
	font-size: 16px;
	line-height: 26px;
	margin-top: 10px;
	margin-bottom: 10px;
}





/* Module tile links */

a.moduleTile {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 326px;
	min-height: 485px;
	border: 2px solid #D7E2E9;
	color: #000;
	text-decoration: none;
	outline: none;
	margin-right: 26px;
	margin-bottom: 20px;
	background-color: #fff;
}
a.moduleTileHidden {
	display: none !important;
	opacity: 0;
}
a.moduleTile img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 326px;
}
@media only screen and (max-width: 1440px) {
	a.moduleTile {
		width: 400px;
		min-height: 465px;
	}
	a.moduleTile img {
		width: 400px;
	}
	a.moduleTile::before {
		content: url('images/fjord/module-img-mask-wide.svg') !important;
	}
}
@media only screen and (max-width: 940px) {
	a.moduleTile {
		width: 326px;
	}
	a.moduleTile img {
		width: 326px;
	}
	a.moduleTile::before {
		content: url('images/fjord/module-img-mask.svg') !important;
	}
}

a.moduleTile::before {
	content: url('images/fjord/module-img-mask.svg');
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
a.moduleTile span.start {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 30px;
	padding-top: 10px;
	background-color: #8A00E0;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
}
a.moduleTile:hover,
a.moduleTile:active,
a.moduleTile:focus {
	border: 2px solid #000;
}

a.moduleTile div.text {
	position: relative;
	top: 225px;
	margin-bottom: 310px;
}
a.moduleTile div.text span {
	position: relative;
	display: block;
}

a.moduleTile span.title { /* Title */
	left: 20px;
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	max-width: 290px;
}
a.moduleTile span.subTitle { /* Sub title */
	left: 20px;
	font-size: 16px;
	line-height: 25px;
	width: calc(100% - 40px);
	margin-top: 10px;
}
a.moduleTile span.progress { /* Progress bar */
	width: 38px;
	height: 15px;
	position: absolute;
	left: 10px;
	bottom: 55px;
}
a.moduleTile span.duration { /* Duration */
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	color: rgba(74, 74, 74, 0.6);
	position: absolute;
	right: 15px;
	bottom: 45px;
}
a.moduleTile span.breadcrumb { /* Breadcrumb */
	left: 20px;
	top: 200px;
	font-size: 10px;
	line-height: 15px;
	font-weight: bold;
	max-width: 290px;
	position: absolute;
	z-index: 2;
}




/* Progress bar (module started/completed indicator) */

span.progress {
	color: transparent;
	display: block;
	width: 50px;
	height: 18px;
	background-color: #949494;
}
span.progress::before {
	content: '';
	display: block;
	width: 15%;
	height: 100%;
	background-color: #011FDF;
}
span.progress.started::before {
	width: 50%;
}
span.progress.completed::before {
	width: 100%;
}





/* Reference point tile links */

a.refpointTile {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 330px;
	min-height: 335px;
	border: 2px solid #F2F2F2;
	outline: none;
	margin-right: 20px;
	text-decoration: none !important;
}
@media only screen and (max-width: 1440px) {
	a.refpointTile {
		width: 280px;
	}
	a.refpointTile::after {
		left: 190px !important;
		top: 98px !important;
	}
	a.refpointTile:hover::after {
		top: 82px !important;
	}
	a.refpointTile span:nth-of-type(2) {
		top: 180px !important;
		margin-bottom: 185px !important;
	}
}
@media only screen and (max-width: 940px) {
	a.refpointTile {
		width: 330px;
		margin-bottom: 10px !important;
	}
	a.refpointTile::after {
		left: 217px !important;
		top: 113px !important;
	}
	a.refpointTile:hover::after {
		top: 98px !important;
	}
	a.refpointTile span:nth-of-type(2) {
		top: 195px !important;
		margin-bottom: 200px !important;
	}
}
@media only screen and (max-width: 765px) {
	a.refpointTile {
		margin: auto !important;
		margin-bottom: 10px !important;
		display: block;
		min-width: 300px;
		max-width: 330px;
		width: 100%;
	}
	a.refpointTile::after {
		left: calc(100% - 90px) !important;
	}
}
a.refpointTile:last-of-type {
	margin-right: 0px;
}
a.refpointTile::before {
	content: '';
	background: url('images/fjord/ref-point-link_bgd.png');
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100%;
}
a.refpointTile::after {
	content: url('images/fjord/ref-point-link_start-btn.png');
	position: absolute;
	left: 217px;
	top: 113px;
}

a.refpointTile:hover {
	border-color: #000;
}
a.refpointTile:hover::after {
	top: 98px;
}

a.refpointTile:active,
a.refpointTile:focus {
	border-color: #000;
}

a.refpointTile span:first-of-type {
	display: block;
	position: absolute;
	left: 16px;
	top: 20px;
	color: #fff;
	font-size: 32px;
	font-weight: bold;
	line-height: 32px;
	width: calc(100% - 40px);
}

a.refpointTile span:nth-of-type(2) {
	display: block;
	position: relative;
	left: 20px;
	top: 200px;
	margin-bottom: 200px;
	font-size: 16px;
	line-height: 25px;
	color: #4A4A4A;
	width: calc(100% - 40px);
}





/* Course tile links */

a.courseTile {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 330px;
	min-height: 560px;
	background-color: #F2F2F2;
	outline: none;
	text-decoration: none;
	border: 2px solid transparent;
	margin: 0 20px 20px 0;
	padding-bottom: 15px;
}

a.courseTileHidden {
	display: none !important;
	opacity: 0;
}
@media only screen and (max-width: 1440px) {
	a.courseTile {
		width: 280px;
	}
	a.courseTile div.heading {
		background: url('images/fjord/course-tile-bgd_small.svg');
	}
	a.courseTile span.goals {
		line-height: 21px !important;
	}
	a.courseTile div.goals span {
		margin-left: 48px !important;
		width: calc(100% - 60px) !important;
	}
	a.courseTile div.goals::before {
		margin-left: 8px !important;
	}
}
@media only screen and (max-width: 940px) {
	a.courseTile {
		width: 330px;
	}
	a.courseTile div.heading {
		background: url('images/fjord/course-tile-bgd.svg');
	}
	a.courseTile span.goals {
		line-height: 30px !important;
		background-color: #460073 !important;
	}
}
@media only screen and (max-width: 765px) {
	a.courseTile {
		width: 280px;
		display: block;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	a.courseTile:last-of-type {
		margin: auto !important;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}
	a.courseTile div.heading {
		background: url('images/fjord/course-tile-bgd_small.svg');
	}
	a.courseTile span.goals {
		line-height: 21px !important;
	}
	a.courseTile div.goals span {
		margin-left: 48px !important;
		width: calc(100% - 60px) !important;
	}
	a.courseTile div.goals::before {
		margin-left: 8px !important;
	}
}
a.courseTile:last-of-type {
	margin-right: 0;
}
a.courseTile div.heading {
	background: url('images/fjord/course-tile-bgd.svg');
	background-repeat: no-repeat;
	background-color: #8A00E0;
	width: 100%;
	min-height: 266px;
}
a.courseTile.blue div.heading {
	background-color: #004DFF;
}
a.courseTile span.start {
	text-transform: uppercase;
	text-align: center;
	padding-top: 9px;
	display: block;
	background-color: #8A00E0;
	width: 100%;
	height: 31px;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}
a.courseTile.blue span.start {
	background-color: #004DFF;
}
a.courseTile:focus,
a.courseTile:active,
a.courseTile:hover {
	border: 2px solid #000;
	transform: translate3d(0,-5px,0);
	box-shadow: 10px 10px 0px 0px #D7E2E9;
	transition: all 0.15s ease-in-out 0s;
}

a.courseTile span.moduleCount {
	right: 25px;
	top: 55px;
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	color: #fff;
	width: calc(100% - 20px);
	display: inline-block;
	text-align: right;
	padding-right: 20px;
	padding-top: 10px;
}

a.courseTile span.title {
	left: 20px;
	font-size: 32px;
	line-height: 37px;
	color: #fff;
	margin-left: 20px;
	margin-top: 5px;
	display: block;
}

a.courseTile span.description {
	display: block;
	margin-left: 20px;
	margin-top: 15px;
	padding-bottom: 10px;
	width: calc(100% - 40px);
	font-size: 16px;
	line-height: 25px;
	color: #fff;
}

a.courseTile div.goals {
	font-size: 16px;
	line-height: 30px;
	color: #000;
	position: relative;
	padding-top: 25px;
	margin-bottom: 25px;
}
a.courseTile div.goals::before {
	content: url('images/fjord/course-tile-bullets.png');
	display: block;
	position: absolute;
	margin-left: 15px;
}
a.courseTile div.goals span {
	position: relative;
	margin-left: 55px;
	margin-bottom: 10px;
	width: calc(100% - 65px);
	display: inline-block;
	min-height: 60px;
}





/* Small card links (ref zone, activity packs) */

a.progressCard,
a.activityPackCard,
a.refZoneCard {
	position: relative;
	display: inline-block;
	width: 330px;
	min-height: 80px;
	height: 70px;
	font-size: 16px;
	font-weight: bold;
	color: #4A4A4A;
	text-decoration: none;
	outline: none;
	margin-bottom: 10px;
	margin-right: 25px;
}
a.refZoneCard:nth-of-type(3n) {
	margin-right: 0px;
}
@media only screen and (max-width: 1440px) {
	a.refZoneCard:nth-of-type(3n) {
		margin-right: 25px;
	}
	a.refZoneCard:nth-of-type(2n) {
		margin-right: 0px;
	}
	a.progressCard span.title {
		max-width: 205px !important;
	}
}
@media only screen and (max-width: 940px) {
	a.progressCard span.title {
		max-width: 175px !important;
	}
}
a.progressCard:hover,
a.activityPackCard:hover,
a.refZoneCard:hover {
	background-color: #F3F3F3;
	outline: 2px solid #A100FF;
}
a.progressCard:focus,
a.activityPackCard:focus,
a.refZoneCard:focus {
	outline: 2px solid #A100FF;
}
a.progressCard:active,
a.activityPackCard:active,
a.refZoneCard:active {
	outline: 2px solid #004DFF;
}

/* Progress card */

a.progressCard span.progress {
	position: absolute;
	left: 12px;
	top: 20px;
}
a.progressCard span.title {
	position: relative;
	left: 75px;
	top: 5px;
	max-width: 250px;
	height: 48px;
	display: table-cell;
	vertical-align: middle;
	line-height: 24px;
}

a.progressCard span.score {
	position: relative;
	left: 75px;
	top: 0px;
	font-weight: normal;
}

/* Activity pack card */

a.activityPackCard::before {
	content: url(images/fjord/icons/download.svg);
	position: absolute;
	left: 25px;
	top: 25px;
}
a.activityPackCard span {
	width: 250px;
	position: absolute;
	left: 65px;
	top: 24px;
}

/* Reference zone card */

a.refZoneCard:hover::after,
a.refZoneCard:focus::after,
a.refZoneCard:active::after {
	content: url(images/fjord/icons/play.svg);
	position: absolute;
	left: 275px;
	top: 17px;
}
a.refZoneCard span.title {
	position: absolute;
	left: 24px;
	top: 12px;
	width: 240px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
a.refZoneCard span.time {
	position: absolute;
	left: 24px;
	top: 37px;
	font-weight: normal;
	color: #696969;
}





/* Page main content */


#body {
	
}
#body > div {
	min-height: 500px;
	position: relative;
}


/* Breadcrumb trail */

#breadcrumb {
	position: relative;
	display: block;
	min-height: 0 !important;
	max-width: 1050px;
	margin: auto;
	margin-top: 60px !important;
}
@media only screen and (max-width: 1440px) {
	#breadcrumb {
		width: 690px;
	}
}
@media only screen and (max-width: 940px) {
	#breadcrumb {
		width: 660px;
	}
}
@media only screen and (max-width: 765px) {
	#breadcrumb {
		min-width: 290px;
		width: calc(100% - max(8%, 30px));
	}
}

#breadcrumb p,
#breadcrumb a {
	color: #004DFF;
}

#breadcrumb a::after {
	content: '>';
	display: inline-block;
	margin-left: 7px;
	margin-right: 7px;
}





/* Top (blue) info banner */

#topInfoBanner {
	color: #fff;
	background-color: #004DFF;
	min-height: 150px;
	text-align: center;
	padding-top: 50px;
	overflow: auto;
}

#topInfoBanner h1.h1Variant {
	font-size: 52px;
	line-height: 65px;
	padding: 0;
	margin: 0;
}

@media only screen and (max-width: 765px) {
	#topInfoBanner {
		height: unset;
	}
	#topInfoBanner p,
	#topInfoBanner h1.h1Variant {
		padding-bottom: 20px;
		margin-bottom: 0px;
		width: 90%;
		left: 5%;
		position: relative;
	}
}


/* Registration page */

#registerPage,
#resetPassPage,
#updateAccountPage,
#groupReportPage,
#emailProgressPage {
	width: calc(100% - min(8%, 60px));
	max-width: 600px;
	margin-top: 80px;
	margin-bottom: 80px;
	font-family: Heebo;
}

#registerPage h1 {
	text-align: left;
}
#resetPassPage h1,
#updateAccountPage h1,
#facilitationMaterialsPage h1,
#groupReportPage h1,
#emailProgressPage h1 {
	text-align: center;
}

#registerPage p.title,
#resetPassPage p.title,
#updateAccountPage p.title {
	font-size: 20px;
	line-height: 35px;
	text-align: left;
}

#registerPage #terms,
#resetPassPage #terms,
#updateAccountPage #terms {
	margin-top: 25px;
}

#registerPage button[type="submit"],
#resetPassPage button[type="submit"],
#updateAccountPage button[type="submit"],
#emailProgressPage button[type="submit"] {
	width: 100%;
}

/* Align vertically checkboxs' two line label and prevent text float. */
/* Opt out checkbox label */
#registerPage fieldset.checkbox input[type="checkbox"] + label,
#updateAccountPage fieldset.checkbox input[type="checkbox"] + label {
	display: block;
	width: 100%;
}
/* Opt out checkbox 'tick' box */
#registerPage fieldset.checkbox input[type="checkbox"] + label:before,
#updateAccountPage fieldset.checkbox input[type="checkbox"] + label:before {
	display: block;
	float: left;
	margin-top: 8px;
}
/* Tick */
#registerPage input[type="checkbox"]:checked + label:after,
#updateAccountPage input[type="checkbox"]:checked + label:after {
	top: 15px;
}



/* Registration page - learner step 2 */

#regFormLearnerStep2 fieldset {
	margin-left: 90px;
}





/* Registration email confirmation page */

#registrationConfirmationPage {
	width: 690px;
	margin-top: 80px;
}




/* MFA page */

#mfaForm img {
	display: block;
	margin: auto;
	margin-bottom: 50px;
}





/* No Access Code page */

#noAccessCodePage {
	width: 690px;
	margin-top: 31px;
	margin-bottom: 105px;
	font-family: Heebo;
}

#noAccessCodePage h1 {
	font-size: 32px;
	line-height: 50px;
	font-family: Heebo-Medium;
	font-weight: normal;
	margin-bottom: 29px;
}

#noAccessCodePage p {
	font-size: 20px;
	line-height: 35px;
	margin: 0;
}

#noAccessCodePage p em {
	font-style: unset;
	font-weight: bold;
}

#noAccessCodePage #defaultAccessCode {
	font-weight: bold;
	font-size: 52px;
	line-height: 76px;
	margin-top: 20px;
	margin-bottom: 20px;
}

#noAccessCodePage #furtherHelp {
	margin-top: 35px;
}





/* Block of text pages like accessibility statement, privacy policy, technical requirements etc... */

.textPage {
	width: 690px !important;
	margin-bottom: 105px !important;
}
@media only screen and (max-width: 940px) {
	.textPage {
		width: 660px !important;
	}
}
@media only screen and (max-width: 765px) {
	.textPage {
		min-width: 290px;
		width: calc(100% - max(8%, 30px)) !important;
		margin: auto;
	}
}

.textPage:not(#privacyPolicyPage) h1 {
	font-size: 32px;
	line-height: 50px;
	font-family: 'Heebo-Medium';
	font-weight: normal;
	margin-bottom: 29px;
}

.textPage:not(#privacyPolicyPage) h2 {
	font-size: 19px;
	font-weight: 550;
	font-family: 'Heebo';
	line-height: unset;
}




/* Privacy policy page */

#privacyPolicyPage table {
	width: 100%;
	border-collapse: collapse;
}
#privacyPolicyPage table th {
	font-weight: bold;
}
#privacyPolicyPage table th,
#privacyPolicyPage table td {
	width: 50%;
	text-align: left;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
#privacyPolicyPage table td,
#privacyPolicyPage table th {
	border-top: 1px solid #979797;
	border-right: 1px solid #979797;
	padding: 15px 10px 15px 10px;
}
#privacyPolicyPage table td:last-child,
#privacyPolicyPage table th:last-child {
	border-right: none;
}
#privacyPolicyPage h2 {
	font-size: 32px;
	line-height: 50px;
	font-family: 'Heebo-Medium';
	font-weight: normal;
	margin-bottom: 29px;
}





/* Login page */

#loginPage,
#forgotPassPage {
	min-height: 830px !important;
	position: absolute;
	top: -100px;
}

#loginPage h1,
#loginPage h2,
#forgotPassPage h1,
#forgotPassPage h2 {
	font-size: 32px;
	line-height: 37px;
}
#loginPage h3,
#forgotPassPage h3 {
	font-size: 20px;
	font-weight: normal;
	line-height: 35px;
}

#loginPage button.primary,
#forgotPassPage button.primary {
	width: 100%;
}

#loginPage > div,
#forgotPassPage > div {
	width: 50%;
	min-height: 930px;
	float: left;
}

#loginPage > div > div,
#forgotPassPage > div > div {
	width: 440px;
	position: relative;
	top: 140px;
}
@media only screen and (max-width: 1440px) {
	#loginPage > div > div,
	#forgotPassPage > div > div {
		width: 355px;
	}
}
@media only screen and (max-width: 940px) {
	#loginPage > div > div,
	#forgotPassPage > div > div {
		width: 284px;
	}
	#header #changeCountryBtn {
		display: none;
	}
}

#loginPage p.error,
#forgotPassPage p.error {
	color: #CC0029;
}

/* Left half */

#loginPage #login > div,
#forgotPassPage #resetPass > div {
	left: 50px;
}
@media only screen and (max-width: 1440px) {
	#loginPage #login > div,
	#forgotPassPage #resetPass > div {
		left: 70px;
	}
}
@media only screen and (max-width: 940px) {
	#loginPage #login > div,
	#forgotPassPage #resetPass > div {
		left: 27px;
	}
}
@media only screen and (max-width: 765px) {
	#forgotPassPage #resetPass {
		float: unset;
		width: 100%;
		height: 700px;
	}
	#loginPage #login > div,
	#forgotPassPage #resetPass > div {
		left: min(2%, 27px);
		min-width: 280px;
		width: calc(100% - 20px);
		max-width: 680px;
		margin: auto;
	}
	#loginForm {
		width: calc(100% - min(4%, 30px));
	}
	#loginPage {
		margin: auto !important;
		max-width: 680px;
	}
}

#loginMoreInfo {
	margin-top: 40px;
	border-top: 1px solid #E4F1FD;
}

#submitBtn {
	margin-top: 50px !important;
}

/* Right half */
#loginPage #newVisitor,
#forgotPassPage #newVisitor {
	background-image: url(images/fjord/login-page-bgd.jpg);
	background-repeat: no-repeat;
}

#loginPage #newVisitor > div,
#forgotPassPage #newVisitor > div {
	left: 90px;
}
@media only screen and (max-width: 1440px) {
	#loginPage #newVisitor > div,
	#forgotPassPage #newVisitor > div {
		left: 45px;
	}
}
@media only screen and (max-width: 940px) {
	#loginPage #newVisitor > div,
	#forgotPassPage #newVisitor > div {
		left: 50px;
	}
}
@media only screen and (max-width: 765px) {
	#loginPage #login {
		width: 100%;
		margin-bottom: -27px;
		float: unset;
	}
	#forgotPassPage,
	#loginPage {
		height: unset;
	}
	#forgotPassPage #newVisitor {
		max-width: 680px;
		margin: auto;
		margin-bottom: -100px;
	}
	#forgotPassPage #newVisitor,
	#loginPage #newVisitor {
		width: 100%;
		float: unset;
		margin-bottom: -100px;
	}
	#loginPage #newVisitor > div,
	#forgotPassPage #newVisitor > div {
		left: min(3%, 27px);
		min-width: 280px;
		width: calc(100% - min(3%, 27px));
		max-width: 680px;
	}
	#loginPage #newVisitor > div a,
	#forgotPassPage #newVisitor > div a {
		margin-right: min(4%, 20px);
	}
}

#loginPage #newVisitor h3,
#forgotPassPage #newVisitor h3 {
	margin-bottom: 200px;
}





/* Forgot password page */

#forgotPassPage #resetPass h1,
#forgotPassPage #resetPass h2 {
	margin-bottom: 0;
}

#resetPassPageHeader {
	background-color: #fff;
	z-index: 9;
	position: relative;
}





/* Update account page */

#updateAccountPage #emailPref {
	border-top: 1px solid #D7E2E9;
	margin-top: 30px;
}

#updateAccountPage #closeAcc p {
	margin-bottom: 30px;
}

#updateAccountPage #profilePref > div {
	position: relative;
	margin-bottom: 50px;
}
#updateAccountPage #profilePref p {
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	padding: 5px;
	padding-left: 0;
	margin: 0;
}
#updateAccountPage #profilePref a.button.link {
	margin: 0;
	position: absolute;
	right: 0;
	top: 3px;
}

#closeAccPopup {
	max-width: 470px;
	min-height: 240px;
	padding: 30px;
}
#closeAccPopup div.button {
	text-align: center;
	margin-top: 30px;
}
#closeAccButton {
	margin: 0 !important;
}





/* About page */

#aboutPage{
	position: relative;
}
#aboutPage p {
	font-size: 20px;
	line-height: 35px;
}
#aboutPage h3 {
	font-size: 32px;
	line-height: 50px;
	font-weight: normal;
	margin-top: 0px;
}
#aboutPage a.button.download {
	margin-bottom: 30px;
}

#aboutPage #top {
	height: 470px;
	background-image: url(images/fjord/about-top.jpg);
	background-repeat: no-repeat;
}
#aboutPage #top h1 {
	width: 420px;
	position: absolute;
	left: 195px;
	top: 80px;
	color: #000;
}
#aboutPage div.section > div {
	width: 510px;
	display: inline-block;
	vertical-align: top;
}
#aboutPage div.section > div:first-child {
	margin-left: 195px;
	margin-right: 25px;
}
#aboutPage div.section div.image {
	position: relative;
	overflow: hidden;
}
#aboutPage div.section h2 {
	margin-top: 20px;
}


#aboutPage #section1 {
	padding-top: 50px;
	padding-bottom: 0;
}
#aboutPage #section1 div.image {
	top: -50px;
}
#aboutPage #section1 div.image img {
	margin-top: 50px;
	width: 510px;
}
#aboutPage #section1 div.image::before {
	content: '';
	background: url(images/fjord/about-side-1-wave.svg);
	background-repeat: no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100%;
}


#aboutPage #section2 {
	background-color: #F2F2F2;
	padding-top: 50px;
	padding-bottom: 100px;
	max-height: 500px;
}
#aboutPage #section2 div.image {
	margin-top: 10px;
	max-height: 510px;
}
#aboutPage #section2 div.image::before {
	content: '';
	background: url(images/fjord/about-side-2-wave.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 220px;
	width: 100%;
	height: 357px;
	background-size: 100%;
	z-index: 9;
}
#aboutPage #section2 div.image img {
	position: relative;
	top: -220px;
	width: 511px;
}
#aboutPage #section2 p {
	max-width: 420px;
	margin-top: 60px;
}


@media only screen and (max-width: 1440px) {
	#aboutPage #top {
		background-position: -355px 0;
	}
	#aboutPage #top h1 {
		left: 70px;
	}
	#aboutPage div.section > div {
		width: 430px;
	}
	#aboutPage div.section > div:first-child {
		margin-left: 30px;
		margin-right: 20px;
	}
	#aboutPage #section1 div.image {
		top: 0px;
	}
	#aboutPage #section1 div.image img {
		width: 430px;
	}
	#aboutPage #section2 div.image {
		max-height: 520px;
	}
	#aboutPage #section2 div.image img {
		width: 430px;
		top: -200px;
	}
	#aboutPage #section2 div.image::before {
		top: 240px;
	}
}
@media only screen and (max-width: 940px) {
	#aboutPage #top {
		background-position: -420px 0;
	}
	#aboutPage #top h1 {
		left: 35px;
	}
	#aboutPage div.section > div {
		width: 345px;
	}
	#aboutPage div.section > div:first-child {
		margin-left: 30px;
		margin-right: 20px;
	}
	#aboutPage #section1 div.image {
		top: 120px;
	}
	#aboutPage #section1 div.image img {
		width: 517.500px;
	}
	#aboutPage #section2 div.image img {
		width: 396.750px;
		left: -30px;
	}
	#aboutPage #section2 div.image::before {
		top: 300px;
	}
}
@media only screen and (max-width: 765px) {
	#aboutPage .content {
		margin: auto !important;
		margin-left: 20px !important;
		min-width: 290px !important;
		width: calc(100% - 40px) !important;
		display: block !important;
	}
	#aboutPage .image {
		top: 0 !important;
		display: block !important;
		max-width: 535px !important;
		width: calc(100% - 40px) !important;
		margin: auto !important;
		margin-bottom: 25px !important;
		height: unset !important;
	}
	#aboutPage .section {
		max-height: unset !important;
	}
	#aboutPage #section2 div.image img {
		width: 560px;
	}
	#aboutPage #section2 div.image::before {
		top: 285px;
	}
	#aboutPage #top h1 {
		width: 100% !important;
		word-break: break-word;
	}
}





/* Reference zone page. */
/* Activity packs page */

#refZonePage h2,
#activityPacksPage h2 {
	font-size: 32px;
	line-height: 50px;
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
	font-family: 'Heebo';
}

#refZonePage .section,
#activityPacksPage .section {
	background-color: #EAEAEA;
	border-bottom: 1px solid #D7E2E9;
	padding: 40px 195px 40px 195px;
	position: relative;
}
#activityPacksPage .section {
	background-color: #fff;
	padding: 40px 115px 40px 385px;
}
#refZonePage .section:last-of-type,
#activityPacksPage .section:last-of-type {
	padding-bottom: 80px;
}

#refZonePage .section img {
	display: inline-block;
	vertical-align: middle;
	position: absolute;
	top: 70px;
	left: 530px;
	width: 182px;
	height: 42px;
}

#activityPacksPage ul {
	column-count: 2;
	column-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 710px;
}
#activityPacksPage li {
	display: inline-block;
	margin: 0;
	padding: 0;
	margin-top: 2px;
}

@media only screen and (max-width: 1440px) {
	#refZonePage .section,
	#activityPacksPage .section {
		padding: 40px 115px 40px 125px;
	}
}
@media only screen and (max-width: 940px) {
	#refZonePage .section,
	#activityPacksPage .section {
		padding: 40px 35px 40px 35px;
	}
}
@media only screen and (max-width: 765px) {
	#refZonePage .section {
		padding: 0;
	}
	#refZonePage .section div.title {
		display: table;
		margin: auto;
		padding-left: min(4%, 20px);
		padding-right: min(2%, 10px);
	}
	#refZonePage .section h2 {
		margin-right: 20px;
		margin-bottom: 0px;
	}
	#refZonePage .section img {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		left: unset;
		top: 15px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	#refZonePage div.content {
		margin-top: 40px;
	}
	a.refZoneCard {
		display: block;
		margin: auto !important;
		min-width: 280px;
		width: 100%;
		max-width: 330px;
	}
	a.refZoneCard:hover::after {
		left: unset;
		right: 10px;
	}
	#activityPacksPage ul  {
		width: unset;
		column-count: 1;
	}
	#activityPacksPage li {
		width: 100%;
		height: unset;
	}
	.activityPackCard {
		width: 100% !important;
		display: block !important;
		height: unset !important;
		overflow: hidden;
	}
	#activityPacksPage .section {
		padding-left: min(4%, 20px);
		padding-right: min(4%, 20px);
	}
	#activityPacksPage .section .content {
		min-width: 220px;
		width: 100% !important;
		max-width: 330px;
		margin: auto;
	}
	#activityPacksPage .section h2 {
		text-align: center;
		width: 100%;
	}
	.activityPackCard span {
		position: relative !important;
		width: calc(100% - 66px) !important;
		display: block;
		padding-bottom: 34px;
	}
}





/* Course overview page */

#courseOverviewPage {
	max-width: 1050px;
}

#courseOverviewPage .tiles {
	margin-bottom: 100px;
	width: 1076px;
}

#courseOverviewPage h1 {
	margin-bottom: 0;
}
#courseOverviewPage p.description {
	max-width: 510px;
	margin-bottom: 50px;
}

@media only screen and (max-width: 1440px) {
	#courseOverviewPage {
		max-width: 840px;
	}
	#courseOverviewPage .tiles {
		width: 866px;
	}
}
@media only screen and (max-width: 940px) {
	#courseOverviewPage {
		max-width: 690px;
	}
	#courseOverviewPage .tiles {
		width: 716px;
	}
}
@media only screen and (max-width: 765px) {
	#courseOverviewPage,
	#courseOverviewPage .tiles {
		min-width: 290px;
		width: 100%;
		max-width: 690px;
	}
	#courseOverviewPage p.description,
	#courseOverviewPage h1 {
		padding-left: min(4%, 20px);
		padding-right: min(4%, 20px);
	}
}





/*
 * Tips section (More tips from experts and participants)
 * Courses section (link tiles to courses)
 */

#tipsSection {
	padding-top: 10px;
	padding-bottom: 90px;
}
#tipsSection h3 {
	font-size: 32px;
	line-height: 50px;
	font-weight: normal;
	text-align: center;
}
#tipsSection div.link {
	text-align: center;
}

#coursesSection > h1 {
	font-size: 52px;
	text-align: center;
	color: #7500C0;
}

#coursesSection div.buttons,
#tipsSection div.buttons {
	width: 100%;
	max-width: 1073px;
	margin: auto;
	margin-bottom: 30px;
	padding-left: 22px;
}

#coursesSection div.buttons {
	margin-bottom: 80px;
}

#coursesSection div.buttons h2, #coursesSection div.buttons h3 {
	margin-top: 0;
	color: #000;
}

#coursesSection div.buttons #nonAcademySeeMoreBtn {
	margin-top: 30px;
}

#optionalSection {
	padding: 0px 22px;
}
#optionalSection h3 {
	font-size: 32px;
	line-height: 50px;
	font-weight: normal;
	text-align: center;
}
#optionalSection p {
	text-align: center;
}

@media only screen and (max-width: 940px) {
	#coursesSection,
	#tipsSection {
		padding-left: 15px;
	}
	#coursesSection div.buttons,
	#tipsSection div.buttons {
		max-width: 720px;
	}
}
@media only screen and (max-width: 765px) {
	#coursesSection,
	#tipsSection {
		padding-left: 0;
		width: 100%;
	}
	#coursesSection div.buttons,
	#tipsSection div.buttons {
		padding-left: 0;
	}
	div.buttons > h2 {
		text-align: center;
		margin-left: min(40px, 2%);
		margin-right: min(40px, 2%);
	}
	div.buttons > span {
		margin-left: min(40px, 4%);
	}
}
#coursesSection .link {
	text-align: center;
	margin-bottom: 30px;
}





/* Pre-assessment questions/modules component */
/* Popular topics/modules component */

#recommendedModulesProgress h1 {
	font-size: 32px;
    line-height: 50px;
	font-weight: normal;
}
#progressContainer h2 {
	font-size: 32px;
    line-height: 48px;
	font-weight: normal;
}

#recommendedModulesProgress div.progress p {
	position: relative;
	font-size: 16px;
	line-height: 26px;
	text-align: left;
	top: 8px;
	margin: 0;
}

#recommendedModulesProgress #progressBar {
	position: relative;
	background-color: #D7E2E9;
	height: 30px;
}
#recommendedModulesProgress #progressBar > div {
	position: relative;
	background-color: #3F4AF7;
	height: 100%;
	width: 0%;
	-webkit-transition: width .8s;
	transition: width .8s;
}
#recommendedModulesProgress #progressBar p {
	position: absolute;
	margin: 0;
	top: 3px;
	right: 15px;
}
#recommendedModulesProgress div.title {
	position: relative;
}

#recommendedModulesProgress div.buttons {
	background-color: #f2f2f2;
	margin-top: 40px;
}
#recommendedModulesProgress div.buttons a {
	display: inline-block;
	vertical-align: top;
	position: relative;
	min-width: 240px;
}
#recommendedModulesProgress #emailProgressBtn {
	float: right;
}

div.preAssessmentQuestions {
	background-color: #f2f2f2;
	padding-top: 40px;
	padding-bottom: 50px;
}
div.preAssessmentQuestions p,
#recommendedModulesProgress div.title p {
	font-size: 32px;
	line-height: 50px;
	text-align: center;
	margin: 0;
	margin-bottom: 25px;
}
#recommendedModulesProgress div.title p {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	margin-right: 20px;
}

div.preAssessmentQuestions div.title p {
	text-align: center;
	font-size: 32px;
	line-height: 50px;
	color: #7500C0;
	font-weight: bold;
	margin: 0;
}
div.preAssessmentQuestions p {
	font-size: 20px;
	line-height: 35px;
	text-align: center;
	margin: 0 0 50px 0;
	color: #000;
}
#preAssessmentQuestionsStep1 div.image-loader {
	position: relative;
	top: -65px;
}

#preAssessmentQuestionsStep1 div.checkboxes,
#preAssessmentQuestionsStep2 div.checkboxes {
	width: 100%;
	max-width: 1080px;
	margin: auto;
	margin-bottom: 30px;
	padding-left: 22px;
}
#preAssessmentQuestionsStep1 div.link,
#preAssessmentQuestionsStep2 div.link {
	text-align: center;
	margin-bottom: 25px;
}

#preAssessmentQuestionsStep2 {
	display: none;
}
#preAssessmentQuestionsStep2 button {
	display: inline-block;
	vertical-align: middle;
}
#preAssessmentQuestionsStep2 button.back {
	margin-right: 40px;
	margin-left: 440px;
}
#preAssessmentQuestionsStep2 div.image-loader {
	position: relative;
	top: -75px;
}

#preAssessmentModules,
#recommendedModulesProgress,
#popularModules {
	padding-top: 40px;
	padding-left: 195px;
	padding-right: 195px;
	padding-bottom: 70px;
	display: none;
	background-color: #f2f2f2;
}
#recommendedModulesProgress {
	padding-bottom: 30px;
}

#preAssessmentModules div.link {
	text-align: center;
}


#emailCertBtn:hover {
	margin-bottom: -4px;
}





#preAssessmentModules .tiles,
#popularModules .tiles {
	width: 1076px;
}

#preAssessmentModules a.moduleTile {
	opacity: 0;
}

#preAssessmentModules div.image-loader {
	top: -55px;
}

#popularModules div.title p {
	text-align: center;
	font-size: 32px;
	line-height: 50px;
	color: #7500C0;
	font-weight: bold;
}

#changePreAssBtn {
	margin-top: 10px;
	vertical-align: top;
}

@media only screen and (max-width: 1440px) {
	#preAssessmentModules,
	#recommendedModulesProgress,
	#popularModules {
		padding-left: 50px;
		padding-right: 50px;
	}
	#preAssessmentModules .tiles,
	#popularModules .tiles {
		width: 864px !important;
	}
	#preAssessmentQuestionsStep2 button.back {
		margin-left: 190px;
	}
	#preAssessmentQuestionsStep1 div.checkboxes,
	#preAssessmentQuestionsStep2 div.checkboxes {
		width: 714px !important;
	}
	#recommendedModulesProgress #emailProgressBtn {
		width: 150px;
	}
}
@media only screen and (max-width: 940px) {
	#preAssessmentModules,
	#recommendedModulesProgress,
	#popularModules {
		padding-left: 38px;
		padding-right: 38px;
	}
	#preAssessmentModules .tiles,
	#popularModules .tiles {
		width: 716px !important;
	}
	#preAssessmentQuestionsStep2 button.back {
		margin-left: 100px;
	}
	#recommendedModulesProgress #emailProgressBtn {
		width: 150px;
		display: block;
		position: relative;
		margin-left: 0px;
		margin-bottom: 45px;
	}
}
@media only screen and (max-width: 765px) {
	#preAssessmentModules,
	#recommendedModulesProgress,
	#popularModules {
		padding-left: 0;
		padding-right: 0;
	}
	#preAssessmentModules .tiles,
	#popularModules .tiles {
		width: 100% !important;
	}
	#preAssessmentQuestionsStep2 button {
		display: block;
		margin: auto;
	}
	#preAssessmentQuestionsStep2 button.back {
		display: block;
		margin: auto;
	}
	#preAssessmentQuestionsStep1 div.checkboxes,
	#preAssessmentQuestionsStep2 div.checkboxes {
		width: 100% !important;
		padding-left: 0;
	}
	.checkboxCard {
		display: block;
		margin: auto;
		margin-bottom: 22px;
		max-width: 100%;
	}
	#recommendedModulesProgress #emailProgressBtn {
		width: 140px;
		display: block;
		position: relative;
		margin-left: 0px;
		margin-bottom: 45px;
	}
	.moduleTile {
		display: block !important;
		margin: auto !important;
		margin-bottom: 20px !important;
		min-width: 290px !important;
		width: 100% !important;
		max-width: 320px !important;
		overflow: hidden;
	}
	a.moduleTile img {
		max-width: 320px !important;
	}
	#recommendedModulesProgress div.title {
		margin-left: min(40px, 4%);
	}
	#changePreAssBtn {
		margin-bottom: 20px;
	}
}
@media only screen and (max-width: 666px) {
	#recommendedModulesProgress #emailProgressBtn {
		float: unset;
	}
	#recommendedModulesProgress a.button {
		margin: auto !important;
		margin-bottom: 25px !important;
		position: relative;
		display: block !important;
		width: 300px !important;
	}
	#recommendedModulesProgress a.button:hover {
		margin-bottom: 21px !important;
	}
}
@media only screen and (max-width: 380px) {
	#recommendedModulesProgress div.buttons a {
		padding: 0 calc(50% - 160px) 0 calc(50% - 160px);
	}
}

/* Progress component */

#progressContainer {
	padding-top: 40px;
	padding-left: 195px;
	padding-right: 195px;
	padding-bottom: 70px;
}

div.progressComponent {
	width: 347px;
	display: inline-block;
	vertical-align: top;
}

div.progressComponent p.title {
	font-size: 32px;
	line-height: 48px;
	margin: 0;
	margin-bottom: 30px;
}

/* Doughnut chart */

div.progressComponent .donutChart {
	position: relative;
	float: left;
	margin-bottom: 30px;
}

div.progressComponent .donutChart p {
	text-align: center;
	position: absolute;
	top: 43px;
	left: 2px;
	width: 100%;
	font-size: 36px;
	color: #000;
	width: 180px;
}
div.progressComponent a.progressCard {
	width: inherit;
}
div.progressComponent .donutChart svg {
	position: relative;
	transform: rotate(-90deg);
	width: 180px;
	height: 180px;
}
div.progressComponent .donutChart svg.fgd {
	z-index: 9;
}
div.progressComponent .donutChart svg.bgd {
	position: absolute;
	left: 0;
}

div.progressComponent .donutChart .circle_animation {
	stroke-dasharray: 470;
	stroke-dashoffset: 470;
}

@media only screen and (max-width: 1440px) {
	#progressContainer {
		padding-left: 45px;
		padding-right: 45px;
	}
	div.progressComponent {
		width: 280px;
	}
}
@media only screen and (max-width: 940px) {
	#progressContainer {
		padding-left: 5px;
		padding-right: 5px;
	}
	div.progressComponent {
		width: 250px;
	}
}
@media only screen and (max-width: 765px) {
	div.progress {
		width: calc(100% - min(8%, 40px));
		left: min(4%, 20px);
		position: relative;
	}
}





/* Home (landing/index) page */

#homePage #topBanner {
	height: 540px;
	max-height: 540px;
	background-color: tomato;
	position: relative;
	top: -35px;
	background: url(images/fjord/home_top_bgd.jpg);
	background-repeat: no-repeat !important;
	margin-bottom: -35px;
}
#homePage.referrerWelcomePage #topBanner {
	margin-bottom: -10px;
}
#homePage #topBanner::after {
	content: '';
	background: url(images/fjord/home_top_wave.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 85px;
	position: absolute;
	left: 0;
	top: 456px;
}
#homePage.referrerWelcomePage #topBanner::after {
	content: '';
	background: none;
	width: 0;
	height: 0;
}

#homePage #topBanner h1 {
	position: relative;
	top: 80px;
	left: 196px;
	max-width: 510px;
	font-size: 52px;
	line-height: 65px;
	color: #000;
}
#homePage.referrerWelcomePage #topBanner h1 {
	top: 20px;
}

#homePage h2 {
	text-align: center;
    color: #7500C0;
}

#homePage h3 {
	font-family: Heebo-Medium;
    font-size: 52px;
    line-height: 65px;
    font-weight: normal;
	color: #000;
}
#homePage #topBanner p {
	position: relative;
	top: 60px;
	left: 196px;
	max-width: 510px;
	font-size: 20px;
	line-height: 35px;
	color: #000;
}
#homePage.referrerWelcomePage #topBanner p {
	top: 20px;
}
#homePage #topBanner a {
	position: relative;
	top: 60px;
	left: -275px;
	width: 420px;
	z-index: 9;
}
#homePage.referrerWelcomePage #topBanner button {
	position: relative;
	top: 40px;
	left: 196px;
	width: 500px;
	margin: 0;
}

#homePage #about {
	border-bottom: 1px solid #D8D8D8;
	min-height: 410px;
	position: relative;
}
#homePage #about div.text {
	display: inline-block;
	vertical-align: top;
	position: relative;
	left: 195px;
	top: 35px;
	margin-bottom: 60px;
	z-index: 9;
}
#homePage #about p {
	max-width: 420px;
	line-height: 30px;
}
#homePage #about p.title {
	font-size: 32px;
	line-height: 50px;
	max-width: 330px;
}
#homePage #about video {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}
#homePage #about #videoContainer {
	position: absolute;
	right: 235px;
	top: 70px;
	width: 470px;
}
#homePage #about #videoContainer img,
#homePage #about #videoContainer video {
	width: 470px;
}

#homePage #topBanner span {
	position: absolute;
	top: 110px;
	left: 196px;
}

#homePage #topBanner.nsn h1 {
	top: 120px;
	max-width: 520px;
}

#homePage #topBanner.nsn p {
	top: 90px;
}

#homePage #topBanner.nsn a {
	top: 90px;
}

@media only screen and (max-width: 1440px) {
	#homePage #topBanner {
		background-position-x: -200px;
	}
	#homePage #topBanner::after {
		top: 486px;
	}
	#homePage #topBanner h1,
	#homePage #topBanner p,
	#homePage #topBanner a,
	#homePage.referrerWelcomePage #topBanner button,
	#homePage #topBanner span {
		left: 122px;
	}
	#homePage #topBanner a {
		margin-left: 0;
	}
	#homePage #about div.text {
		left: 30px;
	}
	#homePage #about #videoContainer {
		right: 55px;
	}
	#homePage #about #videoContainer {
		width: 430px;
	}
	#homePage #about #videoContainer img,
	#homePage #about #videoContainer video {
		width: 430px;
	}
}
@media only screen and (max-width: 940px) {
	#homePage #topBanner {
		background: url(images/fjord/home_top_bgd-small.jpg);
	}
	#homePage #topBanner::after {
		top: 496px;
	}
	#homePage #topBanner h1,
	#homePage #topBanner p,
	#homePage #topBanner a,
	#homePage.referrerWelcomePage #topBanner button,
	#homePage #topBanner span {
		left: 40px;
	}
	#homePage #about {
		margin-left: min(40px, 2%) !important;
		margin-right: min(40px, 2%) !important;
	}
	#homePage #about div.text {
		left: 0 !important;
		min-width: 290px !important;
		max-width: 470px !important;
		width: 100% !important;
		display: block;
		margin: auto;
		margin-bottom: 60px;
	}
	#homePage #about #videoContainer {
		left: 0 !important;
		top: unset;
		right: unset;
		min-width: 290px !important;
		max-width: 470px !important;
		width: 100% !important;
		margin: auto;
		margin-bottom: 20px;
		position: relative;
	}
	#homePage #about #videoContainer img,
	#homePage #about #videoContainer video {
		min-width: 290px !important;
		max-width: 470px !important;
		width: 100% !important;
	}
}
@media only screen and (max-width: 765px) {
	#homePage #topBanner {
		background: url(images/fjord/home_top_bgd-small.jpg);
		background-position-x: 70%;
		min-width: 290px !important;
		width: 100%;
		height: 522px;
		min-height: 560px;
	}
	#homePage #topBanner::after {
		top: 500px;
	}
	#homePage #topBanner h1,
	#homePage #topBanner p,
	#homePage #topBanner a,
	#homePage #topBanner span {
		left: min(40px, 4%);
		min-width: calc(290px - min(40px, 4%)) !important;
		max-width: 60%;
	}
	#homePage #topBanner a {
		margin: auto;
	}
	#topBanner .button {
		left: 0 !important;
	}
	#homePage #topBanner a.primary {
		min-width: min(100%, 110px) !important;
		width: 60% !important;
	}
	#homePage #about div.text {
		left: 40px;
		width: 345px;
	}
	#homePage #about #videoContainer {
		top: 0px;
		width: 345px;
		left: 35px;
		position: relative;
		margin-bottom: 20px;
	}
	#homePage #about #videoContainer img,
	#homePage #about #videoContainer video {
		width: 345px;
	}
}
@media only screen and (max-width: 460px) {
	#topBanner .button {
		top: 5px !important;
		max-width: 100% !important;
	}
}



/* New Skills Now */

.nsnIcon {
	background-color: #8A00E0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 2px 10px 0 10px;
	left: 100px;
}

#homePage #topBanner .nsnIcon {
	top: 90px !important;
}





/* Advisor home page */

#advisorPage .reportBanner {
	position: relative;
	min-height: 140px;
	background-color: #004DFF;
	padding-top: 20px;
}
#advisorPage .reportBanner p {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	max-width: 600px;
	position: relative;
	left: 195px;
}
#advisorPage .reportBanner p.title {
	font-size: 20px;
	font-weight: bold;
	
}
#advisorPage .reportBanner p.text {
	margin-bottom: 20px;
	margin-top: 20px;
}
#advisorPage .reportBanner a {
	width: 220px;
	font-size: 16px;
	color: #3F4AF7;
	position: absolute;
	right: 195px;
	top: 55px;
	min-height: 28px;
	height: unset;
}


#advisorPage .preRegBanner {
	background-color: #460073;
}
#advisorPage .preRegBanner a {
	color: #460073;
}


#advisorPage #topBanner {
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
	min-height: 390px;
}

#advisorPage #topBanner div.image {
	position: relative;
	left: 195px;
	width: 420px;
}
#advisorPage #topBanner div.image img {
	width: 420px;
}

#advisorPage #topBanner div.image::after {
	content: '';
	background: url(images/fjord/advisor-home_wave.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 142px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#advisorPage #topBanner div.text {
	position: absolute;
	top: 0;
	left: 645px;
	max-width: 510px;
	height: 100%;
}
#advisorPage #topBanner h1 {
	font-size: 52px;
	line-height: 65px;
}
#advisorPage #topBanner p {
	margin-top: 70px;
}

#advisorPage #topBanner a.coursesBtn {
	width: 180px;
	position: absolute;
	left: 0;
	bottom: 100px;
}
#advisorPage #topBanner a.packsBtn {
	position: absolute;
	left: 300px;
	bottom: 107px;
}

#advisorPage div.tiles {
	background-color: #f2f2f2;
	padding: 50px 145px 20px 195px;
}
#advisorPage div.tiles p {
	font-size: 32px;
	line-height: 45px;
	margin: 0;
	margin-bottom: 20px;
}
#advisorPage div.tiles p:not(:first-child) {
	margin-top: 50px;
}

#advisorPage #cert {
	min-height: 460px;
	position: relative;
	background-color: #E9E9E9;
}
#advisorPage #cert > div {
	position: relative;
	width: calc(50% - 10px);
	min-height: 460px;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
#advisorPage #cert div.left {
	padding-left: 195px;
	padding-top: 20px;
	width: calc(50% - 195px);
	background-color: #fff;
}
#advisorPage #cert div.right {
	background-color: #E9E9E9;
}
#advisorPage #cert div.right img {
	position: relative;
	top: 55px;
	left: 15px;
	box-shadow: 0px 2px 14px 5px rgba(0, 0, 0, .1);
	width: calc(100% - 30px) !important;
	max-width: 530px;
}
#advisorPage #cert p.title {
	font-size: 32px;
	line-height: 37px;
	font-family: Heebo-Medium;
}
#advisorPage #cert p {
	line-height: 30px;
}

#advisorPage .assetTile::before {
	background-color: #004DFF;
}

#facilitationMaterialsPage div.tiles {
	padding: 0px 145px 20px 195px;
}

#facilitationMaterialsPage div.tiles p {
	font-size: 32px;
	line-height: 45px;
	margin: 0;
	margin-bottom: 20px;
}

#facilitationMaterialsPage div.tiles p:not(:first-child) {
	margin-top: 50px;
}

#facilitationMaterialsPage .assetTile::before {
	background-color: #004DFF;
}

@media only screen and (max-width: 1440px) {
	#advisorPage .reportBanner p {
		left: 50px;
		max-width: 570px;
	}
	#advisorPage .reportBanner a {
		right: 50px;
		width: 200px;
	}
	#advisorPage #topBanner div.image {
		left: 50px;
		width: 300px;
	}
	#advisorPage #topBanner div.image img {
		width: 300px;
		height: 100%;
	}
	#advisorPage #topBanner div.image::after {
		top: 210px;
	}
	#advisorPage #topBanner div.text {
		left: unset;
		right: 50px;
	}
	#advisorPage #topBanner p {
		margin-top: 40px;
	}
	#advisorPage div.tiles {
		padding-left: 80px;
		padding-right: 50px;
	}
	#advisorPage #cert div.left {
		padding-left: 50px;
		width: calc(50% - 50px);
	}
	#advisorPage #cert div.right img {
		width: 375px;
		top: 100px;
	}
	#facilitationMaterialsPage div.tiles {
		padding-left: 80px;
		padding-right: 50px;
	}
}
@media only screen and (max-width: 940px) {
	#advisorPage .reportBanner {
		min-height: 200px;
	}
	#advisorPage .reportBanner p {
		text-align: center;
		max-width: 660px;
	}
	#advisorPage .reportBanner a {
		left: 240px;
		top: -10px;
		width: 220px;
		text-align: center;
		position: relative;
	}
	#advisorPage #topBanner {
		min-height: 320px;
	}
	#advisorPage #topBanner div.image {
		left: 20px;
		width: 200px;
		overflow: hidden;
	}
	#advisorPage #topBanner div.image img {
		position: relative;
		width: 300px;
		left: -100px;
	}
	#advisorPage #topBanner div.image::after {
		top: 240px;
		width: 102%;
	}
	#advisorPage #topBanner div.text {
		left: unset;
		right: 20px;
		width: 500px;
	}
	#advisorPage #topBanner p {
		margin-top: 40px;
	}
	#advisorPage #topBanner a.coursesBtn {
		bottom: 60px;
	}
	#advisorPage #topBanner a.packsBtn {
		bottom: 67px;
	}
	#advisorPage div.tiles {
		padding-left: 125px;
		padding-right: 50px;
	}
	#advisorPage div.tiles p {
		text-align: center;
		width: 765px;
		position: relative;
		left: -125px;
	}
	#advisorPage #cert div.left {
		padding-top: 0;
	}
	#advisorPage #cert div.right img {
		width: 330px;
		top: 120px;
	}
	#facilitationMaterialsPage div.tiles {
		padding-left: 125px;
		padding-right: 50px;
	}
	#facilitationMaterialsPage div.tiles p {
		text-align: center;
		width: 765px;
		position: relative;
		left: -125px;
	}
}
@media only screen and (max-width: 765px) {
	#advisorPage .reportBanner {
		width: 100%;
		height: unset;
	}
	#advisorPage .reportBanner p {
		margin: auto;
		min-width: 280px;
		width: calc(100% - min(4%, 25px));
		left: 0;
	}
	#advisorPage .reportBanner p:not(.title) {
		margin-bottom: 70px;
	}
	#advisorPage .reportBanner a {
		position: relative;
		margin: auto;
		left: unset;
		right: unset;
		top: -20px;
		display: block;
	}
	
	#advisorPage #topBanner {
		min-width: 280px;
		width: 100% !important;
	}
	#advisorPage #topBanner .image {
		margin: auto;
		width: 300px !important;
		left: 0 !important;
	}
	#advisorPage #topBanner .image::after {
		top: 210px !important;
	}
	#advisorPage #topBanner .image img {
		left: 0 !important;
	}
	#advisorPage #topBanner .text h1 {
		word-wrap: break-word;
	}
	#advisorPage #topBanner .text {
		position: relative !important;
		right: unset !important;
		left: unset !important;
		margin: auto;
		width: calc(100% - 20px) !important;
		max-width: unset !important;
		text-align: center !important;
	}
	#advisorPage #topBanner p {
		margin-top: 0 !important;
		width: 100% !important;
	}
	#advisorPage #topBanner a {
		position: relative !important;
		bottom: unset !important;
		margin: auto !important;
		left: unset !important;
		display: block !important;
		margin-top: 20px !important;
		text-align: center;
	}
	#advisorPage #topBanner .coursesBtn:hover {
		margin-bottom: -4px !important;
	}

	#advisorPage div.tiles {
		padding-left: 0;
		padding-right: 0;
	}
	#advisorPage div.tiles p {
		width: calc(100% - min(6%, 20px));
		left: min(3%, 10px);
	}
	.assetTile {
		margin: auto;
		margin-bottom: 30px;
		display: block;
	}
	#advisorPage #cert {
		height: unset;
	}
	#advisorPage #cert div.left {
		float: unset;
		width: 100%;
		margin: auto;
		padding-left: unset;
		text-align: center;
		height: unset;
		padding-bottom: 30px;
	}
	#advisorPage #cert div.right {
		height: unset;
		width: 100%;
		float: unset;
		margin: auto;
		position: relative;
		padding-bottom: 40px;
	}
	#advisorPage #cert div.right img {
		top: 20px;
		width: calc(100% - 100px);
		margin: auto;
		left: unset;
		display: block;
	}
	#facilitationMaterialsPage div.tiles {
		padding-left: 0;
		padding-right: 0;
	}
	#facilitationMaterialsPage div.tiles p {
		width: calc(100% - min(6%, 20px));
		left: min(3%, 10px);
	}
}





/* Progress page */

#progressPage #recommendedModulesProgress {
	display: block;
}

#progressPage a.button {
	white-space: nowrap;
}





/* Group report page */

#groupReportPage {
	max-width: 635px;
}

#groupReportPage fieldset {
	margin-top: 50px;
	margin-bottom: 50px;
}

#groupReportPage fieldset.input legend,
#groupReportPage p.legend {
	display: unset;
	font-size: 26px;
	font-weight: normal;
	line-height: 30px;
}

#groupReportPage fieldset.checkbox.twocolumns label {
	white-space: nowrap;
}
#groupReportPage fieldset.checkbox li {
	min-width: 317px;
}

#groupReportPage textarea {
	height: unset;
	min-height: 26px;
	max-height: 700px;
}

@media only screen and (max-width: 350px) {
	#groupReportPage fieldset.checkbox.twocolumns label {
		white-space: normal;
		max-width: calc(100% - 80px);
		padding-left: 55px;
		text-indent: -55px;
	}
	#groupReportPage fieldset legend {
		white-space: normal;
		max-width: calc(100% - 40px);
	}
}





/* User pre-registration page */

#groupReportPage div.buttons button {
	margin-bottom: 10px;
	margin-right: 15px;
}




/* Download certificate page */

#downloadCertBtn {
	margin-top: 30px !important;
}



/* (Advisor) Download certificate page */

h1.acordion {
	cursor: pointer;
	background-color: #f2f2f2;
}
h1.acordion:hover {
	background-color: #8A00E0;
	color: #FFFFFF;
	background-color: #8A00E0;
	box-shadow: 4px 4px 0 0 #000;
}
h1.acordion.selected {
	background-color: #8A00E0;
	color: #FFFFFF;
}
h1.acordion a {
	text-decoration: none;
	color: inherit;
	border: none;
	outline: none;
}

div#cert a {
	max-width: 70%;
	margin: 0;
}



/* FAQs page */

#faqPage div.item {
	margin-top: 8px;
}

#faqPage div.item > div {
	display: none;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #f2f2f2;
	margin-top: 20px;
	margin-bottom: 20px;
}

#faqPage button {
	color: #004DFF;
	background: none;
	border: none;
	text-transform: none;
	text-decoration: underline;
	text-align: left;
	font-weight: normal;
	font-size: 16px;
	padding: 0;
}

#faqPage button:active,
#faqPage button:focus,
#faqPage button:hover {
	outline: 2px solid #000;
}