:root {
    /* Colours */
    --colour-black:        #000000;
    --colour-white:        #ffffff;
    --colour-grey:         #efefef;
    --colour-blue:         #2B255C;
    --colour-blue-90:      #362e65;
    --colour-blue-80:      #55517d;
    --colour-blue-60:      #807c9e;
    --colour-blue-40:      #aba7be;
    --colour-blue-20:      #d6d3df;
    --colour-blue-90a:      rgba( 43, 37, 92, 0.9 );
    --colour-blue-80a:      rgba( 43, 37, 92, 0.8 );
    --colour-blue-60a:      rgba( 43, 37, 92, 0.6 );
    --colour-blue-40a:      rgba( 43, 37, 92, 0.4 );
    --colour-blue-20a:      rgba( 43, 37, 92, 0.2 );
    --colour-blue-10a:      rgba( 43, 37, 92, 0.1 );
    --colour-turquoise:    #35B6B4;
    --colour-turquoise-80: #5dc5c3;
    --colour-turquoise-60: #86d3d2;
    --colour-turquoise-40: #86d3d2;
    --colour-turquoise-20: #d8f0f0;
    --colour-turquoise-80a: rgba( 53, 182, 180, 0.8 );
    --colour-turquoise-60a: rgba( 53, 182, 180, 0.6 );
    --colour-turquoise-40a: rgba( 53, 182, 180, 0.4 );
    --colour-turquoise-20a: rgba( 53, 182, 180, 0.2 );
    --colour-purple:       #662483;
    --colour-orange:       #dd674c;
    --colour-teal:         #49bed8;
    --colour-yellow:       #f5cf7a;
    --colour-brown:        #d4c1b2;
    --colour-taupe:        #e5dad1;

    /* Font sizes */
    --font-size-normal-mobile:  3.8vw;
    --font-size-normal-desktop: 1.36vw;
    --font-size-normal-fixed:   26.10px;
}

.eLearningQuizForm li {
    list-style-type: none;
    font-size: 3.8vw;
}
@media ( min-width: 768px ) {
    .eLearningQuizForm li {
        font-size: 1.36vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningQuizForm li {
        font-size: 26.10px;
    }
}

.eLearningQuizForm ul {
    padding-left: 0;
}
.eLearningQuizForm .formLabel {
    padding-top: 0;
    font-size: inherit;
}

.prettyLabelWrapper {
    display: inline-block;
    text-indent: 0;
    white-space: normal;
}

.declarationForm {
    margin-top: 0;
}
@media ( min-width: 768px ) {
    .declarationForm {
        margin-top: 1vw;
    }
}
@media ( min-width: 1921px ) {
    .declarationForm {
        margin-top: 19.2px;
    }
}

.pretty .state label {
    margin-top: -4vw;
}
@media ( min-width: 768px ) {
    .pretty .state label {
        margin-top: -0.73vw;
    }
}
@media ( min-width: 1921px ) {
    .pretty .state label {
        margin-top: -14.02px;
    }
}

.screen-reader-text {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

.skip-link {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    text-align:       center;
    background-color: var( --colour-blue-80 );
    color:            var( --colour-white   );
    padding:          0.5vw;
    translate:        0 -100%;
    transition:       translate 150ms ease-in-out;
    z-index:          10;
}

.skip-link:focus {
    translate: 0 0;
}

.hidden {
    display: none;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3.8vw;
}
@media print {
    body {
        font-size: 2vw;
        -webkit-print-color-adjust: exact;
    }
}

a {
    color: var( --colour-blue );
}
a:hover {
    color: var( --colour-teal );
}

.centerVertical {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.centerHorizontal {
    margin: 0;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centerBoth {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Classes for draftail extensions. */

.underline-text {
    display:         inline;
    text-decoration: underline;
}

.center-text {
    display:    block;
    text-align: center;
}

.left-text {
    display: block;
    text-align: left;
}

.right-text {
    display: block;
    text-align: right;
}

.indent-text {
    display: block;
    padding-left: 50px;
}

/* X-Small devices */

p {
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.breadcrumb {
    font-size: 2vw;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.hidden {
    display: none;
}


.mainContainer {
    width: 100%;
    max-width: 100% !important;
    position: relative;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
}

.innerContainer {
    padding-left: 9vw;
    padding-right: 9vw;
    width: 100%;
}

.innerContainer .innerContainer {
    padding-left: 0;
    padding-right: 0;
}

.addPaddingTop,
.addPaddingBoth {
    padding-top: 6vw;
}

.addPaddingBottom,
.addPaddingBoth {
    padding-bottom: 6vw;
}

.addMarginTop,
.addMarginBoth {
    margin-top: 6vw;
}

.addMarginBottom,
.addMarginBoth {
    margin-bottom: 6vw;
}

.bannerContainer {
    height:           35.6vw;
    background-color: var( --colour-blue  );
    color:            var( --colour-white );
}
@media print {
    .bannerContainer {
        display: none;
    }
}
.breadcrumbContainer {
    background-color: var( --colour-blue  );
    color:            var( --colour-white );
}
@media print {
    .breadcrumbContainer {
        display: none;
    }
}

.breadcrumbContainer a {
    color: var( --colour-teal );
    text-decoration: none;
}
.breadcrumbContainer a:hover {
    color: var( --colour-white );
}

.resourceNotes {
    margin-left: 3vw;
}


.tenderImage {
    width: 50vw;
}
.tableTitle {
    white-space: nowrap;
}

.bannerImages {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.bannerImages img {
    vertical-align: top;
}

.sponsorLogo {
    width: 18.3vw;
    height: auto;
    margin-left: 9vw;
    margin-bottom: 4.3vw;
    display: block;
}

.companyLogo {
    width: 79.4vw;
    height: auto;
    margin-left: 9vw;
    display: block;
}

.bannerMenu {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    height: auto;
    z-index: 5;
}

.bannerMenu .bannerMenuToggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 6.8vw;
    text-decoration: none;
    white-space: nowrap;
}

.bannerMenuImage {
    position: absolute;
    top: 0;
    right: 0;
    width: 48.7vw;
    height: auto;
}

.dropdown-menu {
    right: 0;
    border-top: 0;
    font-size: 2.5vw;
    min-width: initial;
    background-color: var( --colour-turquoise );
    padding: 0;
}

.dropdown_menu_icon {
    position: absolute;
    top: 2.5vw;
    right: 11vw;
    font-size: 4vw;
    color: var( --colour-blue );
}

/* Nav menu. */

nav {
	position: relative;
	margin: 1vw;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

/* nav ul li {
} */

.menu-item-active,
nav ul li a {
	display: block;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	padding-left: 1vw;
	padding-right: 1vw;
	color: var( --colour-white );
	text-decoration: none;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
}

nav ul li a:hover {
	background-color: inherit;
	color: var( --colour-blue );
}

nav ul li a .fa {
	width: 1vw;
	text-align: center;
	margin-right: 1vw;
	float:right;
}

nav ul ul {
	background-color: rgba(0, 0, 0, 0.2);
}

.sub-menu-item-active,
nav ul li ul li a {
	padding-left: 2vw;
}

/*
nav a:hover {
	background-color: rgba(255, 0, 0, 0.5);
}
*/

.sub-menu a {
    display: inline-block;
}

.sub-menu-icon {
    float: right;
}

.active .sub-menu-icon {
    margin-top: -4vw;
}
.ancestor .sub-menu-icon {
    margin-top: 1vw;
}
@media ( min-width: 768px ) {
    .active .sub-menu-icon {
        margin-top: -2.2vw;
    }
    .ancestor .sub-menu-icon {
        margin-top: 0.2vw;
    }
}
@media ( min-width: 1921px ) {
    .active .sub-menu-icon {
        margin-top: -42px;
    }
    .ancestor .sub-menu-icon {
        margin-top: 5.4px;
    }
}



textarea {
    width: 100%;
}

.captchaContainer2 {
    padding-top: 0.5vw;
    width: 100%;
    display: inline-block;
    height: 14vw;
}

.captchaContainer {
    width: 100%;
}

.g-recaptcha {
    max-width: 0px;
}

h5 {
    font-size: 4.5vw;
    color: var( --colour-teal );
    font-weight: bold;
}
h1 {
    font-size: 7.5vw;
    font-weight: bold;
}
h2 {
    font-size: 6.5vw;
    font-weight: bold;
}

.carousel-control-next,
.carousel-control-prev {
    width: 5vw;
    top: 11vw;
    align-items: start;
}
.carousel-indicators {
    margin-left: 0;
    margin-right: 0;
    justify-content: start;
    left: 9vw;
    bottom: 6vw;
}
.carousel-indicators [data-bs-target] {
    width: 1vw;
    height: 0.4vw;
}
.carousel {
    color: var( --colour-white );
}
.carousel a {
    color: var( --colour-teal );
}
.carousel a:hover {
    color: var( --colour-white );
}
.carouselButton {
    text-align: center;
}
.carouselRow {
    background-color: var( --colour-blue-90 );
}
.carouselTextCol,
.carouselImageCol {
    padding: 0;
}
.carouselTextCol {
    font-size: 4.5vw;
    padding: 10.4vw;
    text-align: left;
}
.carouselImageCol {
    background-color: var( --colour-white );
    position: relative;
}
.carouselImage {
    height: 65.2vw;
    width: 100vw;
    margin-bottom: 10.4vw;
}
.carouselOverlay {
    position: absolute;
    width: 195%;
    top: 0;
    right: 0;
}
.carouselImageOverlay {
    width: 100%;
}

/* Breakpoint to desktop view at this point */
/* md - Medium devices */
@media ( min-width: 768px ) {
    .carousel-control-next,
    .carousel-control-prev {
        top: 13.5vw;
    }
    .carousel-indicators {
        justify-content: center;
        left: 0;
        right: 26vw;
        bottom: 2vw;
    }
    .carousel-indicators [data-bs-target] {
        height: 0.2vw;
    }
    .carouselRow {
        background-color: transparent;
    }
    .carouselOverlay {
        position: relative;
        width: 100%;
        top: 0;
        right: 0;
    }
    .carouselImageOverlay {
        width: 100%;
    }
    .carouselTextCol {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1.6vw;
        padding: 0;
        margin-top: 4.5vw;
        margin-left: 7.2vw;
        max-width: 36vw;
        z-index: 1;
    }
    .carouselButton {
        text-align: start;
    }
    .carouselImageCol {
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
    .carouselImage {
        height: 33.4vw;
        width: 57vw;
    }
}

/* When we get to the max screen width. */
@media ( min-width: 1921px ) {
    .carousel-control-next,
    .carousel-control-prev {
        top: 259.2px;
    }
    .carousel-indicators {
        right: 499.20px;
        bottom: 38.40px;
    }
    .carousel-indicators [data-bs-target] {
        height: 3.88px;
    }
    .carouselTextCol {
        font-size: 30.72px;
        margin-top: 86.40px;
        margin-left: 138.24px;
        max-width: 691.2px;
    }
    .carouselImage {
        height: 641.27px;
        width: 1094.39px;
    }
}

.stakeholderCell {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}
.stakeholderImage {
    width: 50.2vw;
}
/* Breakpoint to desktop view at this point */
/* md - Medium devices */
@media ( min-width: 768px ) {
    .stakeholderCell {
        margin-top: 1vw;
        margin-bottom: 1vw;
    }
    .stakeholderImage {
        width: 20.06vw;
    }
}
/* When we get to the max screen width. */
@media ( min-width: 1921px ) {
    .stakeholderCell {
        margin-top: 19.2px;
        margin-bottom: 19.2px;
    }
    .stakeholderImage {
        width: 385px;
    }
}

.btn-primary {
    color:            var( --colour-blue   );
    background-color: var( --colour-orange );
    border-color:     var( --colour-teal   );
    border-radius: 1000px;
    font-size: 3.8vw;
    padding-left: 5vw;
    padding-right: 5vw;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var( --colour-blue   );
    color:            var( --colour-teal   );
    border-color:     var( --colour-orange );
}

.fadedContainer {
    background-color: var( --colour-white );
}

.fadedBackgroundCrop {
    overflow: hidden;
    text-indent: 0%;
}

.fadedBackgroundImage {
    width: 200%;
}

.fadedTextContainer {
    padding-left: 9vw;
    padding-right: 9vw;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.2;
}

.fadedTextContainer h1 {
    color: var( --colour-blue );
    font-size: 6.5vw;
}

/* Header block */

.greyHeader {
    color:            var( --colour-black );
    background-color: var( --colour-grey  );
}


/* Right hand image container */

.rightHandImageContainer {
    background-color: var( --colour-blue  );
    color:            var( --colour-white );
}
.rightHandImageContainer a {
    color: var( --colour-teal );
}
.rightHandImageContainer a:hover {
    color: var( --colour-white );
}

.rightHandTextContainer {
    padding-top: 9vw;
    padding-bottom: 0;
    padding-left: 9vw;
    padding-right: 9vw;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.2;
}

.rightHandTextContainer h1 {
    color:     var( --colour-white );
    font-size: 6.5vw;
}

.rightHandImageHolder {
    position: relative;
    padding-left: 9vw;
    padding-right: 9vw;
    padding-bottom: 9vw;
}

.rightHandImages img {
    padding-top: 3vw;
    padding-bottom: 1vw;
    width: 100%;
}


/* Left hand image block */

.leftHandImageContainer {
    background-color: var( --colour-blue-80 );
    color:            var( --colour-white   );
}

.leftHandTextContainer {
    padding-top: 9vw;
    padding-bottom: 9vw;
    padding-left: 9vw;
    padding-right: 9vw;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.2;
}

.leftHandTextContainer h1 {
    color:     var( --colour-white );
    font-size: 6.5vw;
}

.leftHandImageHolder {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.leftHandImage {
    width: 100%;
}

/* Form */

.formContainer,
.formContainerWhite {
    background-color: var( --colour-grey  );
    color:            var( --colour-black );
    padding-left:     9vw;
    padding-right:    9vw;
}

.formContainer {
    background-color: var( --colour-grey  );
    padding-top:      15vw;
    padding-bottom:   15vw;
}

.formContainerWhite {
    background-color: var( --colour-white  );
    padding-top:      0vw;
    padding-bottom:   0vw;
}

.formContainer h1 {
    color:     var( --colour-blue );
    font-size: 6.5vw;
}

.formLabel {
    display: block;
    width: 100%;
    padding-top: 3vw;
    font-size: 2.9vw;
}

.formField {
    display: block;
    width: 100%;
}

.formLabel > input,
.formField > input,
.formLabel > select,
.formField > select {
        width: 100%;
    font-size: 5.6vw;
}

.formButton {
    padding-top: 9.5vw;
}

.formButton > .btn-primary {
    padding-left: 8.2vw;
    padding-right: 8.2vw;
}

/* Socials */

.socialsContainer {
    font-size: 8vw;
}

.socialsContainer a {
    text-decoration: none;
}

.socialsContainer a:hover {
}

/* Sections */

.sectionsContainer {
    background-color: var( --colour-grey );
}

.imageContainer a {
    text-decoration: none;
    color: var( --colour-teal );
}

.imageContainer a:hover {
    color: var( --colour-blue );
}

/* Button block */

.buttonContainer .btn {
    width: auto;
}

/* Event */

.eventSummaryContainer {
}

.eventSummaryContainer a,
.eventListContainer a {
    text-decoration: none;
    color: var( --colour-blue );
}

.eventSummaryContainer a:hover,
.eventListContainer a:hover {
    color: var( --colour-blue );
}

.eventItemContainer a {
}
.eventItemContainer a:hover {
}

.resourceImageLarge {
    width: 100%;
}

.eventSummaryContainer .eventImageLarge,
.eventSummaryContainer .eventImageSmall,
.eventListContainer .eventImageLarge,
.eventItemContainer .eventImageLarge {
    width: 100%;
}

.eventListContainer .eventImageLarge {
    margin-bottom: 2vw;
}

.eventSummaryContainer .eventImageMedium,
.eventListContainer .eventImageMedium {
    float:  left;
    width: 50%;
    margin-right: 2vw;
    margin-bottom: 2vw;
}

.eventRegisterButton {
    text-align: center;
}

.resourceDate {
    text-align: left;
}

.resourceAttachment {
    margin-bottom: 6vw;
    text-decoration: none;
}

.resourceThumbnail {
    max-width: 50%;
}

.formFilter .formLabel{
    display: block;
    padding-top: 0;
}

.formFilter .formLabelInline{
    display: inline;
}

.formFilter select {
    width: auto;
    font-size: 3.8vw;
    display: inline-block;
}

.formFilter .formCheckBox {
    display: block;
    margin-bottom: 0.5em;
}


.orderInstructions {
    padding-top: 0.4vw;
}

.orderSelector {
    text-align: left;
    white-space: nowrap;
}

/* Social Protection */

.protectionListContainer .protectionItem a {
    text-decoration: none;
}

.protectionListContainer .protectionImage {
    width: 100%;
    height: auto;
}

.lifecycleCard {
    padding: 7vw;
}

.lifecycleCardRisk {
    background-color: var( --colour-blue-20 );
}

.lifecycleCardSolution {
    background-color: var( --colour-turquoise-20 );
}

.lifecycleCard .lifecycleImage {
    width: 26.7vw;
}

.lifecycleCard .lifecycleTitle {
    color: var( --colour-blue );
    font-size: 5.4vw;
    font-weight: bold;
    line-height: 1.1;
}

.lifecycleCard .lifecycleTitleRisk {
    color: var( --colour-blue );
}
.lifecycleCard .lifecycleTitleSolution {
    color: var( --colour-turquoise );
}

.lifecycleCard .lifecyclePoints {
    display: block;
    font-size: 3.3vw;
    margin-top: 5vw;
    padding-left: 3.5vw;
}

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


/* Footer */

.footerContainer {
    background-color: var( --colour-blue );
    color:            var( --colour-white );
    padding-left: 9vw;
    padding-right: 9vw;
    padding-top: 15vw;
    padding-bottom: 15vw;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.2;
}

.footerContainer ul {
    list-style: none;
    padding-left: 0;
}

.footerContainer a {
    color: var( --colour-teal );
}

.footerContainer a:hover {
    color: var( --colour-white );
}

@media print {
    .footerMenu {
        display: none;
    }
}

.footerImage {
    padding-top: 11.3vw;
    padding-bottom: 8.2vw;
    width:  29.5vw;
}

.footerText {
    font-size: 4.2vw;
}


.printPage {
    margin-top: 12vw;
    text-decoration: none;
    display: block;
}
@media ( min-width: 768px ) {
    .printPage {
        margin-top: 2.5vw;
    }
}
@media ( min-width: 1921px ) {
    .printPage {
        margin-top: 48px;
    }
}
@media print {
    .printPage {
        display: none;
    }
}

/* We don't do this one, same as mobile view. */
/* sm - Small */
@media ( min-width: 567px ) {
}

/* Breakpoint to desktop view at this point */
/* md - Medium devices */
@media ( min-width: 768px ) {
    body {
        font-size: 1.36vw;
    }

    .addPaddingTop,
    .addPaddingBoth {
        padding-top: 1.5vw;
    }

    .addPaddingBottom,
    .addPaddingBoth {
        padding-bottom: 1vw;
    }

    .breadcrumb {
        font-size: 1vw;
    }

    .innerContainer {
        padding-left: 7.2vw;
        padding-right: 7.2vw;
    }

    .innerContainer .innerContainer {
        padding-left: 0;
        padding-right: 0;
    }

    .bannerContainer {
        height: 8.7vw;
    }

    .sponsorLogo {
        width: 8.4vw;
        margin-left: 7.2vw;
        margin-right: 2.5vw;
        margin-bottom: 0;
        display: inline;
    }

    .companyLogo {
        width: 42.4vw;
        margin-left: 0;
        display: inline;
    }

    .bannerMenu .bannerMenuToggle {
        height: 2.7vw;
    }

    .bannerMenuImage {
        width: 19vw;
    }

    .dropdown-menu {
        font-size: 1vw;
    }

    .dropdown_menu_icon {
        top: 0.5vw;
        right: 3.5vw;
        font-size: 2vw;
    }

    .menu-item-active,
    nav ul li a {
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    h5 {
        font-size: 1.7vw;
    }

    h1 {
        font-size: 2.7vw;
    }

    h2 {
        font-size: 2.2vw;
    }

    .btn-primary {
        font-size: 1.2vw;
        padding-left: 1.6vw;
        padding-right: 1.6vw;
    }

    .fadedBackgroundImage {
        padding-right: 21vw;
        width: 100%;
    }

    .fadedTextContainer {
        font-size: 1.36vw;
        padding: 0;
        left: 43vw;
        width: 45vw;
        right: 0;
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .fadedTextContainer h1 {
        font-size: 2.8vw;
    }

    /* Right hand image block */

    .rightHandImageContainer {
        padding-top: 6.6vw;
        padding-bottom: 6.6vw;
    }

    .rightHandTextContainer {
        font-size: 1.36vw;
        padding-left: 7.2vw;
        padding-right: 0;
        width: 76vw;
        padding-top: 0;
    }

    .rightHandImageHolder {
        padding-left:  2.8vw;
        padding-right: 0;
        padding-bottom: 0;
        width: 18.4vw;
    }

    .rightHandImages {
        position: absolute;
        margin: 0;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .rightHandImages img {
        padding-top: 0.5vw;
        padding-bottom: 0.5vw;
        width: 13.5vw;
    }

    .rightHandTextContainer h1 {
        font-size: 2.8vw;
    }


    /* Left hand image block */

    .leftHandImageContainer {
        padding-top: 0;
        padding-bottom: 0;
    }

    .leftHandTextContainer {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 1.36vw;
        padding-top: 6.6vw;
        padding-bottom: 4vw;
        padding-left: 0.7vw;
        padding-right: 0;
        width: 28vw;
    }

    .leftHandImageHolder img {
        width: 66.2vw;
    }

    .leftHandTextContainer h1 {
        font-size: 2.8vw;
    }

    /* Form */

    .formContainer {
        padding-left: 7.2vw;
        padding-right: 7.2vw;
        padding-top: 5.1vw;
        padding-bottom: 5.1vw;
    }

    .formContainer h1 {
        font-size: 2.8vw;
    }

    .formLabel {
        font-size: 1.1vw;
        padding-top: 3.0vw;
        padding-bottom: 0.5vw;
    }

    .formLabel > input,
    .formField > input,
    .formLabel > select,
    .formField > select {
            font-size: 1.8vw;
    }

    .formButton {
        padding-top: 1.5vw;
    }

    .formButton > .btn-primary {
        padding-left: 3.3vw;
        padding-right: 3.3vw;
    }

    /* Social Protection */

    .protectionListContainer .protectionImage {
    }

    .lifecycleCard {
        background-color: var( --colour-blue-20 );
        margin-left: 0.8vw;
        margin-right: 0.8vw;
        padding: 1vw;
        text-align: center;
    }

    .lifecycleCard .lifecycleRiskImage,
    .lifecycleCard .lifecycleSolutionImage {
        width: 7vw;
        margin-top: 1vw;
    }

    .lifecycleCard .lifecycleRiskImage {
        display: inline;
    }

    .lifecycleCard .lifecycleSolutionImage {
        display: none;
    }

    .lifecycleCard .lifecycleTitle {
        color: var( --colour-blue );
        font-size: 1.5vw;
        padding-top: 2vw;
        font-weight: bold;
        line-height: 1.1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lifecycleCard .lifecyclePoints {
        margin-bottom: 2vw;
        margin-top: 0;
        padding-left: 0;
    }

    .lifecycleCard .lifecycleRiskPoints,
    .lifecycleCard .lifecycleSolutionPoints {
        display: block;
        text-align: left;
        font-size: 1vw;
        padding-left: 1vw;
        padding-top: 1vw;
        padding-bottom: 2vw;
    }
    .lifecycleCard .lifecycleRiskPoints {
        display: block;
    }
    .lifecycleCard .lifecycleSolutionPoints {
        display: none;
    }
    .lifecycleCard .lifecyclePoints li {
    }

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

    .lifecycleCardHover:hover {
        background-color: var( --colour-turquoise-20 );
    }

    .lifecycleCardHover:hover .lifecycleTitle {
        color: var( --colour-turquoise );
    }

    .lifecycleCardHover:hover .lifecycleRiskImage {
        display: none;
    }
    .lifecycleCardHover:hover .lifecycleSolutionImage {
        display: inline;
    }
    .lifecycleCardHover:hover .lifecycleRiskPoints {
        display: none;
    }
    .lifecycleCardHover:hover .lifecycleSolutionPoints {
        display: block;

    }


    /* Socials */

    .socialsContainer {
        font-size: 4vw;
    }

    /* Footer */

    .footerContainer {
        padding-left: 7.2vw;
        padding-right: 7.2vw;
        padding-top: 5.1vw;
        padding-bottom: 3.0vw;
        font-size: 1.6vw;
    }

    .footerContainer ul {
        padding-left: 0;
    }

    .footerImage {
        padding-top: 0;
        padding-bottom: 1.5vw;
        width:  35.6vw;
    }

    .footerText {
        font-size: 1.7vw;
    }

    /* Events */
    .resourceImageLarge {
        width: 66%;
    }
    
    .eventItemContainer .eventImageLarge {
        width: 66%;
    }

    .eventListContainer .eventImageLarge {
        float: left;
        width: 66%;
        margin-right: 1vw;
        margin-bottom: 2vw;
    }

    .eventSummaryContainer {
        padding-top: 3vw;
    }

    .eventSummaryContainer .eventImageMedium,
    .eventListContainer .eventImageMedium {
        width: 50%;
        margin-right: 1vw;
        margin-bottom: 2vw;
    }

    .eventSummaryContainer .eventImageSmall {
        width: 100%;
    }
    .eventSummaryContainer .eventImageMedium {
        width: 50%;
    }

    .eventRegisterButton {
        text-align: right;
    }

    .resourceDate {
        text-align: right;
    }

    .resourceAttachment {
        margin-bottom: 3vw;
    }

    .orderSelector {
        text-align: right;
    }

    /* Form filter */
    .formFilter select {
        font-size: 1.0vw;
    }
}

/* lg - Large devices */
@media ( min-width: 992px ) {
}

/* xl - Extra large */
@media ( min-width: 1200px ) {
}

/* xxl - Extra extra large */
@media ( min-width: 1400px ) {
    .mainContainer {
        max-width: 1920px !important;
    }
}

@media ( max-width: 1920px ) {
    /* For chrome to give a breakpoint */
}

/* When we get to the max screen width. */
@media ( min-width: 1921px ) {
    body {
        font-size: 26.10px;
    }

    .addPaddingTop,
    .addPaddingBoth {
        padding-top: 28.8px;
    }

    .addPaddingBottom,
    .addPaddingBoth {
        padding-bottom: 19.2px;
    }

    .bannerContainer {
        height: 166.94px;
    }

    .breadcrumb {
        font-size: 19.2px;
    }

    .innerContainer {
        padding-left: 138.17px;
        padding-right: 138.17px;
    }

    .innerContainer .innerContainer {
        padding-left: 0;
        padding-right: 0;
    }

    .sponsorLogo {
        width: 161.19px;
        margin-left: 138.17px;
        margin-right: 47.98px;
    }

    .companyLogo {
        width: 813.64px;
    }

    .bannerMenu .bannerMenuToggle {
        height: 51.84px;
    }

    .bannerMenuImage {
        width: 364.61px;
    }

    .dropdown-menu {
        font-size: 19.2px;
    }

    .dropdown_menu_icon {
        top: 9.60px;
        right: 67.2px;
        font-size: 38.4px;
    }

    .menu-item-active,
    nav ul li a {
        padding-top: 9.6px;
        padding-bottom: 9.6px;
        padding-left: 19.2px;
        padding-right: 19.2px;
    }

    h5 {
        font-size: 32.62px;
    }

    h1 {
        font-size: 51.81px;
    }

    h2 {
        font-size: 42.24px;
    }

    .btn-primary {
        font-size: 23.03px;
        padding-left: 30.70px;
        padding-right: 30.70px;
    }

    .fadedBackgroundImage {
        padding-right: 402.99px;
    }

    .fadedTextContainer {
        font-size: 26.10px;
        left: 825.17px;
        width: 863.55px;
    }

    .fadedTextContainer h1 {
        font-size: 53.73px;
    }

    /* Right hand image block */

    .rightHandImageContainer {
        padding-top: 126.65px;
        padding-bottom: 126.65px;
    }

    .rightHandTextContainer {
        font-size: 29.10px;
        padding-left: 138.17px;
        width: 1458.44px;
    }

    .rightHandImageHolder {
        padding-left: 53.732px;
        width: 353.09px;
    }

    .rightHandImageHolder img {
        bottom: 34.54px;
        left: 53.73px;
        width: 259.06px;
    }

    .rightHandTextContainer h1 {
        font-size: 53.73px;
    }

    /* Left hand image block */

    .leftHandImageContainer {
        padding-left: 10px;
    }

    .leftHandTextContainer {
        font-size: 26.10px;
        padding-top: 126.65px;
        padding-bottom: 76.76px;
        padding-left: 13.44px;
        width: 537.31px;
    }

    .leftHandImageHolder img {
        width: 1270.38px;
    }

    .leftHandTextContainer h1 {
        font-size: 53.73px;
    }

    /* Resource */

    .resourceAttachment {
        margin-bottom: 57.6px;
    }

    /* Form */

    .formContainer {
        padding-left: 138.17px;
        padding-right: 138.17px;
        padding-top: 97.87px;
        padding-bottom: 97.87px;
    }

    .formContainer h1 {
        font-size: 53.73px;
    }

    .formLabel {
        font-size: 21.11px;
        padding-top: 57.7px;
        padding-bottom: 9.60px;
    }

    .formLabel > input,
    .formField > input,
    .formLabel > select,
    .formField > select {
            font-size: 34.54px;
    }

    .formButton {
        padding-top: 28.8px;
    }

    .formButton > .btn-primary {
        padding-left: 63.33px;
        padding-right: 63.33px;
    }

    .captchaContainer2 {
        padding-top: 9.6pxvw;
        height: 268.80px;
    }

    /* Events */

    .eventSummaryContainer {
        padding-top: 57.6px;
    }

    /* Social Protection */

    .protectionListContainer .protectionImage {
        width: 500px;
        height: 250px;
    }

    /* Socials */

    .socialsContainer {
        font-size: 76.8px;
    }

    /* Footer */

    .footerContainer {
        padding-left: 138.17px;
        padding-right: 138.17px;
        padding-top: 97.87px;
        padding-bottom: 57.57px;
        font-size: 30.7px;
    }

    .footerImage {
        padding-bottom: 28.78px;
        width:  683.15px;
    }

    .footerText {
        font-size: 32.62px;
    }

    /* Form filter */
    .formFilter select {
        font-size: 19.2px;
    }
}



.eLearningMainHeadingBar {
    display:          inline-block;
    vertical-align:   text-bottom;
    background-color: var( --colour-blue );
    height:           15.0vw;
    width:            10%;
    margin-right:     3.75vw;
}
.eLearningMainHeading {
    text-transform: uppercase;
    display:        inline-block;
    font-weight:    bold;
    width:          80%;
    color:          var( --colour-blue );
    font-size:      7.5vw;
    padding-bottom: 3.75vw;
}
@media ( min-width: 768px ) {
    .eLearningMainHeadingBar {
        height:       5.4vw;
        width:        2.7vw;
        margin-right: 1.3vw;
    }
    .eLearningMainHeading {
        font-size:      2.7vw;
        padding-bottom: 1.3vw;
        width:          90%;
    }
}
@media ( min-width: 1921px ) {
    .eLearningMainHeadingBar {
        height:       103.62px;
        width:        51.81px;
        margin-right: 25.91px;
    }
    .eLearningMainHeading {
        font-size:      51.81px;
        padding-bottom: 25.91px;
    }
}

.eLearningQuestionErrorList {
    font-size: 6.5vw;
}
@media ( min-width: 768px ) {
    .eLearningQuestionErrorList {
        font-size: 2.2vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningQuestionErrorList {
        font-size: 42.24px;
    }
}


.eLearningSubHeading {
    font-size: 6.5vw;
    width: auto;
    line-height: unset;
    font-weight: bold;
    text-transform: uppercase;
    font-weight:    bold;
    display: inline-block;
    margin-left: -6.5vw;
    padding-left: 6.5vw;
    padding-right: 6.5vw;
    color:          var( --colour-white );
}
@media ( min-width: 768px ) {
    .eLearningSubHeading {
        font-size: 2.2vw;
        margin-left: -2.0vw;
        padding-left: 2.0vw;
        padding-right: 2.0vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningSubHeading {
        font-size: 42.24px;
        margin-left: -38.4px;
        padding-left: 38.4px;
        padding-right: 38.4px;
    }
}

.eLearningContainerBox {
    padding: 6vw 2vw;
}
@media ( min-width: 768px ) {
    .eLearningContainerBox {
        padding: 2vw 2vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningContainerBox {
        padding: 38.40px 38.40px;
    }
}

.eLearningContainerBoxBlue {
    background-color: var( --colour-blue );
    color: var( --colour-white );
    box-shadow: 0.5vw 0.5vw 1vw var( --colour-teal );
}
.eLearningContainerBoxBlue a {
    color: var( --colour-white );
}
.eLearningContainerBoxYellow {
    background-color: var( --colour-yellow );
    color: var( --colour-blue );
    box-shadow: 0.5vw 0.5vw 1vw var( --colour-teal );
}
.eLearningContainerBoxTaupe {
    background-color: var( --colour-taupe );
    color: var( --colour-white );
    box-shadow: 0.5vw 0.5vw 1vw var( --colour-teal );
}
.eLearningContainerBoxBlue a {
    color: var( --colour-white );
}

.textColourBlack {
    color: #000000 !important;
}
.textColourWhite {
    color: #ffffff !important;
}
.textColourOrange {
    color: #dd674c !important;
}
.textColourBlue {
    color: #2B255C !important;
}

a:has( sup ){
    text-decoration: none;
}
a sup {
    text-decoration: underline;
}

sub {
    vertical-align: sub;
}
sup {
    vertical-align: super;
}

sub,
sup {
    top: 0;
    font-size: 3vw;
}
@media ( min-width: 768px ) {
    sub,
    sup {
        font-size: 1vw;
    }
}
@media ( min-width: 1921px ) {
    sub,
    sup {
        font-size: 19.2px;
    }
}

.help_border {
    border-style: dashed;
    border-width: 1px;
    border-color: black;
    box-shadow: inset 0 0 1vw white;
}

.image_map_link:hover {
    cursor: zoom-in;
}


.eLearningText td {
    vertical-align: middle;
}
.eLearningText p:last-child {
    padding-bottom: 0;
}

.eLearningTextIconSmall {
    width: 10vw;
    margin-right: 2vw;
}
@media ( min-width: 768px ) {
    .eLearningTextIconSmall {
        width: 3vw;
        margin-right: 1vw;
        }
}
@media ( min-width: 1921px ) {
    .eLearningTextIconSmall {
        width: 57.60px;
        margin-right: 19.2px;
    }
}

.eLearningTextIconLarge {
    width: 20vw;
    margin-right: 1vw;
}
@media ( min-width: 768px ) {
    .eLearningTextIconLarge {
        width: 6vw;
        margin-right: 1vw;
        }
}
@media ( min-width: 1921px ) {
    .eLearningTextIconLarge {
        width: 115.20px;
        margin-right: 19.2px;
    }
}

.eLearningInfo {
    padding: 6vw 2vw;
}
@media ( min-width: 768px ) {
    .eLearningInfo {
        padding: 2vw 2vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningInfo {
        padding: 38.40px 38.40px;
    }
}

.eLearningInfoOverlay {
    position: absolute;
    overflow: hidden;
    font-size: 2vw;
    color: white;
}
@media ( min-width: 768px ) {
    .eLearningInfoOverlay {
        font-size: 1.7vw;
    }
}
@media ( min-width: 1921px ) {
    .eLearningInfoOverlay {
        font-size: 32.7px;
    }
}

.eLearningInfoBlue {
    background-color: var( --colour-blue );
    color: var( --colour-white );
}

.eLearningInfoYellow {
    background-color: var( --colour-yellow );
    color: var( --colour-blue );
}

.eLearningImageTextRevealRow {
    margin-bottom: 1vw;
}

.eLearningImageTextRevealTxt {
    padding-left: 2vw;
}

.eLearningImageTextRevealImg {
    margin-top: 2vw;
    margin-bottom: 2vw;
}
.eLearningImageTextRevealImg:hover {
    cursor: zoom-in;
}
@media ( min-width: 768px ) {
    .eLearningImageTextRevealImg {
        margin-top: 0;
        margin-bottom: 0;
    }
}
@media ( min-width: 1921px ) {
}

.eLearningImageTextRevealImg img {
    height: auto;
    width: 50%;
    text-align: center;
}
@media ( min-width: 768px ) {
    .eLearningImageTextRevealImg img {
        width: 100%;
    }
}
@media ( min-width: 1921px ) {
    .eLearningImageTextRevealImg img {
    }
}

.addMarginTop {
    margin-top: 1vw;
}
@media ( min-width: 768px ) {
    .addMarginTop {
        margin-top: 1vw;
    }
}
@media ( min-width: 1921px ) {
    .addMarginTop {
        margin-top: 1vw;
    }
}
.addMarginBottom {
    margin-bottom: 1vw;
}
@media ( min-width: 768px ) {
    .addMarginBottom {
        margin-bottom: 1vw;
    }
}
@media ( min-width: 1921px ) {
    .addMarginBottom {
        margin-bottom: 1vw;
    }
}

.eLearningContainerBackground {
    width: 100%;
    position: relative;
    display: inline-block;
}
.eLearningContainerBackgroundContent {
    position: absolute;
    text-wrap: balance;
}
.eLearningContainerBackgroundImage img {
    width: 100%;
}

.assistanceField {
    margin-bottom: 5vw;
}
@media ( min-width: 768px ) {
    .assistanceField {
        margin-bottom: 3.3vw;
    }
}
@media ( min-width: 1921px ) {
    .assistanceField {
        margin-bottom: 63.36px;
    }
}

@media ( min-width: 768px ) {
}
@media ( min-width: 1921px ) {
}