/* ==========================================================================
   Globals
   ========================================================================== */

/* ==========================================================================
   @fontface
   ========================================================================== */
 
@font-face {
   font-family: 'Neutraface Bold';
   src: url('../../assets/fonts/NeutraText-Bold.woff2') format('woff2'),
       url('../../assets/fonts/NeutraText-Bold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
 }

@font-face {
   font-family: 'Neutraface Demi';
   src: url('../../assets/fonts/NeutraText-Demi.woff2') format('woff2'),
       url('../../assets/fonts/NeutraText-Demi.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
 }

 @font-face {
   font-family: 'Neutraface Book';
     /* This file contained broken accented characters. */
    /*
       src: url('../../assets/fonts/NeutrafaceText-Book.woff2') format('woff2'),
           url('../../assets/fonts/NeutrafaceText-Book.woff') format('woff');
    */
   src: url('../../assets/fonts/NeutraText-Book.woff2') format('woff2'),
       url('../../assets/fonts/NeutraText-Book.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
 }

 @font-face {
   font-family: 'Poppins';
   src: url('../../assets/fonts/Poppins-Regular.woff2') format('woff2'),
       url('../../assets/fonts/Poppins-Regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
 }

/* ==========================================================================
   Variables
   ========================================================================== */

html {

/* Colours */

    --CelebrityBlue: #002859;
    --Tangerine: #E87435;
    --SolariumBlue: #299BE1;
    --Teal: #13818D;
    --Grey: #EEEEEE;
    --DarkGrey: #A4A4A7;
    --ErrorRed: #E12929;
    --White: #ffffff;
    --Black: #000000;
    
/* Fonts */
 
    --NeutrafaceBold: 'Neutraface Bold', sans-serif;
    --NeutrafaceDemi: 'Neutraface Demi', sans-serif;
    --NeutrafaceBook: 'Neutraface Book', 'Poppins', sans-serif;
    
}

/* ==========================================================================
   Global Typography
   ========================================================================== */
html, body {
width: 100%;
height: auto;
position: relative;
overscroll-behavior-y: none;
}

body {
    font-family: var(--NeutrafaceBook);
    font-weight: normal;
    font-style: normal;
    color: var(--CelebrityBlue);
    font-size: 16px;
	line-height: 140%;
    overflow-x: hidden;
    overscroll-behavior: none;
    font-feature-settings: 'lnum';
    -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

if-grid {
    width: 90%;
    margin: auto;
    max-width: 1600px;
}

/* All breakpoints */
@media only screen and (min-width: 576px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1200px) {}
@media only screen and (min-width: 1500px) {}

h1 {
    font-size: 32px;
    line-height: 116%;
    margin: 32px 0;
    font-family: var(--NeutrafaceBold);
}
h2 {
    font-size: 24px;
    line-height: 120%;
    margin: 24px 0 10px 0;
    font-family: var(--NeutrafaceBook);
}
h3 {
    font-size: 18px;
    line-height: 120%;
    margin: 24px 0 10px 0;
    font-family: var(--NeutrafaceBook);
}
h4 {
    font-size: 16px;
    line-height: 130%;
    margin: 24px 0 10px 0;
    font-family: var(--NeutrafaceBold);
}
h5 {
    font-size: 14px;
    line-height: 130%;
    margin: 16px 0 6px 0;
    font-family: var(--NeutrafaceBold);
}
h6 {
    font-size: 12px;
    line-height: 130%;
    margin: 16px 0 6px 0;
    font-family: var(--NeutrafaceBold);
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-feature-settings: 'lnum';
}

p {
    font-size: 16px;
    line-height: 150%;
    margin: 0 0 16px 0;
    font-feature-settings: 'lnum';
    font-family: var(--NeutrafaceBook);
}

a {
    color: inherit;
	text-decoration: none;
    background: linear-gradient(to right, rgba(0, 40, 89, 1), rgba(0, 40, 89, 1)), linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	background-size: 100% 0.1em, 0 0.1em;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
	transition: background-size 500ms;
}
a:hover {
    background-size: 0 0.1em, 100% 0.1em;
}
a:focus {
	background-size: 100% 0.1em, 0 0.1em;
}
a:focus-visible {
/*	background-size: 0 0.1em, 100% 0.1em;*/
    outline: 2px solid var(--CelebrityBlue);
}
ol {
    margin-left: 0px;
    padding-left: 35px;
}
ol li {
    padding-left: 5px;
}
ul {
    margin: 0 0 24px 0;
    list-style: disc;
}
li {
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 16px;
}
ul li::marker {
    font-size: 20px;
}
.bold-text {
    font-family: var(--NeutrafaceBold)!important;
}
.book-text {
    font-family: var(--NeutrafaceBook)!important;
}
sup {
    font-size: 0.5em;
    vertical-align: top;
}
::selection {
    background-color: var(--CelebrityBlue);
    color: #ffffff;
}

@media only screen and (min-width: 992px) {
    p {margin: 0 0 18px 0;}
    h1 {margin: 40px 0 24px 0;}
    h2 {margin: 24px 0 14px 0;}
    h3 {margin: 24px 0 14px 0;}
    h4 {margin: 24px 0 14px 0;}
    h5 {margin: 18px 0 8px 0;}
    h6 {margin: 18px 0 8px 0;}
    li {margin-bottom: 18px;}
}

@media only screen and (min-width: 1200px) {
    h1 {font-size: 46px; margin: 56px 0 24px 0;}
    h2 {font-size: 32px; margin: 24px 0 16px 0;}
    h3 {font-size: 24px; margin: 24px 0 16px 0;}
    h4 {font-size: 18px; margin: 24px 0 16px 0;}
    h5 {font-size: 16px; margin: 20px 0 10px 0;}
    h6 {font-size: 14px; margin: 20px 0 10px 0;}
    p {font-size: 18px; margin: 0 0 20px 0;}
    li {font-size: 18px; margin-bottom: 20px;}
    ul li::marker {
        font-size: 22px;
    }
}
@media only screen and (min-width: 1500px) {
    h1 {margin: 64px 0 32px 0;}
    p {font-size: 20px;}
    li {font-size: 20px;}
    ul li::marker {
        font-size: 24px;
    }
}

sup {
    display: inline-block;
    font-weight: normal;
    font-size: 10px;
    vertical-align: text-top;
}
strong {
    font-family: var(--NeutrafaceBold);
    font-weight: bold;
}
span {

}

/* ==========================================================================
   Reset
   ========================================================================== */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* REGULAR BUTTONS */

button {
    background-color: var(--Tangerine);
    color: var(--CelebrityBlue);
    border: 1px solid transparent;
    outline: transparent;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
    text-transform: uppercase;
    font-family: var(--NeutrafaceBook);
    font-size: 14px;
    letter-spacing: 0.8px;
    text-align: left;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older IE/Edge */
}
button:focus-visible {
    outline: 2px solid var(--CelebrityBlue);
}
button:hover {
    background-color: var(--CelebrityBlue);
    color: var(--Tangerine);
}
button:hover svg circle {
    fill: var(--Tangerine);
}
button:hover svg g path {
    stroke: var(--CelebrityBlue);
}
button:hover svg path {
    stroke: var(--CelebrityBlue);
}
button:hover h5 {
    color: var(--Tangerine);
}
.white-focus:focus-visible button {
    outline: 2px solid #ffffff;
}
@media only screen and (min-width: 576px) {
    button {
        width: auto;
        font-size: 16px;
        padding: 14px;
    }
}
button svg {
    width: 30px;
    height: 30px;
    margin-left: 14px;
    transform:rotate(180deg);
    overflow: visible;
    clip-path: none;
}
button svg circle{
    fill: var(--CelebrityBlue);
}
button svg g path {
    stroke: #ffffff;
}
button svg path {
    stroke: #ffffff;
}

button h5 {
    margin: 0;
    margin-top: 3px;
}

/* QUICK LINK BUTTONS */

.quick-link button {
    background-color: var(--Grey);
    color: var(--CelebrityBlue);
    border: 1px solid transparent;
    outline: transparent;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    cursor: pointer;
    width: 100%;
    transition: 0.5s;
    min-height: 70px;
}
.quick-link button:hover {
    background-color: var(--Tangerine);
}
.quick-link button:hover svg circle {
    fill: var(--CelebrityBlue);
}
.quick-link button:hover svg g path {
    stroke: var(--Grey);
}
.quick-link button svg {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    transform:rotate(180deg);
    overflow: visible;
    clip-path: none;
}
b.quick-link button svg circle{
    fill: var(--CelebrityBlue);
}
.quick-link button svg g path {
    stroke: var(--Grey);
}
.quick-link button p {
    margin: 0;
    font-family: var(--NeutrafaceDemi);
    text-align: left;
    line-height: 1.2;
}
.quick-link a:focus-visible button {
    outline: 2px solid var(--Tangerine);
}

/* ==========================================================================
   Form styling
   ========================================================================== */

input {
    font-size: 16px;
    line-height: 150%;
    font-feature-settings: 'lnum';
    font-family: var(--NeutrafaceBook);
    padding: 12px;
    box-sizing: border-box;
    outline: transparent;
    border: 1px solid var(--CelebrityBlue);
    transition: 0.25s;
    width: 100%;
    color: var(--CelebrityBlue);
}
input:focus {
    border: 1px solid var(--Tangerine);
}
.custom-select {
    position: relative;
}
.custom-select select {
    display: none;
}
.select-selected {
    background-color: #F3F3F3;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: url("../../assets/icons/dropdown.svg");
  top: 10px;
  right: 8px;
  width: 30px;
  height: 30px;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  transform: rotate(180deg);
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: rgba(0, 40, 89, 1);
  padding: 16px 12px;
  border: 1px solid transparent;
  border-color: transparent #F3F3F3 #F3F3F3 #F3F3F3;
  cursor: pointer;
  user-select: none;
}
.select-items div,.select-selected.select-arrow-active {
  color: rgba(0, 40, 89, 1);
  padding: 16px 12px;
  border: 1px solid transparent;
  border-color: transparent #d9d9d9 #d9d9d9 #d9d9d9;
  cursor: pointer;
  user-select: none;
}
.select-selected.select-arrow-active {
    background-color: #d9d9d9;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #F3F3F3;
}

/* ==========================================================================
   Nav Select
   ========================================================================== */
#nav-language-select {
    margin-bottom: 2em;
    max-width: 158px;
}
.nav-select {
    position: relative;
}
.select-items div:focus-visible {
    outline: 2px solid #ffffff;
}
.select-selected:focus-visible {
    outline: 2px solid #ffffff;
}
.nav-select select {
    display: none;
}
.nav-select .select-selected {
    background-color: var(--CelebrityBlue);
}
/*style the arrow inside the select element:*/
.nav-select .select-selected:after {
  position: absolute;
  content: url("../../assets/icons/dropdown.svg");
  top: 10px;
  right: 8px;
  width: 30px;
  height: 30px;
}
/*point the arrow upwards when the select box is open (active):*/
.nav-select .select-selected.select-arrow-active:after {
  transform: rotate(180deg);
}
/*style the items (options), including the selected item:*/
.nav-select .select-items div,.nav-select .select-selected {
  color: #FFFFFF;
  padding: 16px 12px;
  border: 1px solid transparent;
  border-color: #FFFFFF;
  cursor: pointer;
  user-select: none;
}
.nav-select .select-items div,.nav-select .select-selected.select-arrow-active {
  color: #FFFFFF;
  padding: 16px 12px;
  border: 1px solid transparent;
/*  border-color: #FFFFFF;*/
  cursor: pointer;
  user-select: none;
}
.nav-select .select-selected.select-arrow-active {
    background-color: var(--CelebrityBlue);
    border: 1px solid #ffffff;
}
/*style items (options):*/
.nav-select .select-items {
  position: absolute;
  background-color: var(--CelebrityBlue);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid #ffffff;
  border-top: transparent;
}
/*hide the items when the select box is closed:*/
.nav-select .select-hide {
  display: none;
}

.nav-select .select-items div:hover, .same-as-selected {
  background-color: rgba(255,255,255,0.08);
}

/* ==========================================================================
   Spacer elements
   ========================================================================== */
/* TOP */

.spacer-top-s {
    margin-top: 16px;
}
.spacer-top-m {
    margin-top: 16px;
}
.spacer-top-l {
    margin-top: 32px;
}
.spacer-top-xl {
    margin-top: 64px;
}

@media only screen and (min-width: 992px) {
    .spacer-top-m {
        margin-top: 32px;
    }
    .spacer-top-l {
        margin-top: 48px;
    }
    .spacer-top-xl {
        margin-top: 88px;
    }
}
@media only screen and (min-width: 1200px) {
    .spacer-top-s {
        margin-top: 32px;
    }
    .spacer-top-m {
        margin-top: 32px;
    }
    .spacer-top-l {
        margin-top: 64px;
    }
    .spacer-top-xl {
        margin-top: 120px;
    }
}

/* BOTTOM */

/* This one is specifically to optimise spacing on concurrent flipcard elements */ 
.spacer-bottom-xs {
    margin-bottom: 1em;
}
.spacer-bottom-s {
    margin-bottom: 16px;
}
.spacer-bottom-m {
    margin-bottom: 16px;
}
.spacer-bottom-l {
    margin-bottom: 32px;
}
.spacer-bottom-xl {
    margin-bottom: 64px;
}

@media only screen and (min-width: 992px) {
    .spacer-bottom-m {
        margin-bottom: 32px;
    }
    .spacer-bottom-l {
        margin-bottom: 48px;
    }
    .spacer-bottom-xl {
        margin-bottom: 88px;
    }
}
@media only screen and (min-width: 1200px) {
    .spacer-bottom-s {
        margin-bottom: 32px;
    }
    .spacer-bottom-m {
        margin-bottom: 32px;
    }
    .spacer-bottom-l {
        margin-bottom: 64px;
    }
    .spacer-bottom-xl {
        margin-bottom: 120px;
    }
}


/* ==========================================================================
   Header / Main Sticky Nav
   ========================================================================== */

header {
    background-color: var(--CelebrityBlue);
    color: #ffffff;
    width: 100%;
    position: fixed;
    user-select: none;
    -webkit-user-select: none;
    z-index: 10;
    top: 0;
}
header a {
    text-decoration: none;
    color: #ffffff;
    background: none;
}
.top-bar a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -6px;
}
header a {
    outline: transparent;
}
header a {
    outline: transparent;
}
.menu-links:focus-visible li {
    outline: 2px solid #ffffff;
}
.mobile-header-clear {
    height: 56px;
}

.logo {
    width: 120px;
    padding: 18px 20px 15px 20px;
}

.top-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    padding: 10px 20px;
    outline: transparent;
}

.hamburger .line {
    width: 22px;
    height: 1px;
    background-color: #ecf0f1;
    display: block;
    margin: 4px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(5px) rotate(45deg);
  -ms-transform: translateY(5px) rotate(45deg);
  -o-transform: translateY(5px) rotate(45deg);
  transform: translateY(5px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-5px) rotate(-45deg);
  -ms-transform: translateY(-5px) rotate(-45deg);
  -o-transform: translateY(-5px) rotate(-45deg);
  transform: translateY(-5px) rotate(-45deg);
}

.hamburger:hover{
    cursor: pointer;
}
.hamburger:focus-visible {
    outline: 2px solid #ffffff;
}

nav {
    padding: 20px;
    display: none;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

nav.is-active {
    display: block;
    opacity: 1;
    animation-name: nav-open;
    animation-duration: 0.5s;
    animation-timing-function: ease;
}
nav.is-active a {
    tabindex: 0;
}
@keyframes nav-open {
    from {
        opacity: 0;
        height: 0vh;
      }

    to {
        opacity: 1;
        height: 100vh;
    }
}

nav hr {
    border-top: 1px solid #33537A;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 30px 0 40px 0;
}

.primary-nav svg {
    width: 15px;
    height: 15px;
    margin-right: 10px; 
    transform: translateY(0.5px);
}

.primary-nav svg path {
    transition: 0.5s;
}

.primary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.primary-nav li {
    font-family: var(--NeutrafaceDemi);
    font-size: 18px;
    line-height: 110%;
    padding: 14px 0;
    display: flex;
    margin: 0;
}

.primary-nav li div {
    border-bottom: 1px solid transparent;
    display: flex;
    flex-basis: auto;
/*    align-items: center;*/
    transition: 0.5s;
}

.primary-nav li:hover div {
    border-bottom: 1px solid var(--Tangerine);
    color: var(--Tangerine);
    width: auto;
    display: inline-block;
    display: flex;
} 

.primary-nav li:hover svg path {
    fill: var(--Tangerine);
} 

.secondary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.secondary-nav li {
    font-family: var(--NeutrafaceBook);
    font-size: 16px;
    line-height: 110%;
    padding: 10px 0;
    margin: 0;
}

.secondary-nav li:hover {
    text-decoration: underline;
}

@media only screen and (min-width: 1200px) {
    .primary-nav li {
        padding: 16px 0;
    }
    .secondary-nav li {
        padding: 12px 0;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    width: 100%;
    margin: auto;
    position: relative;
    text-align: center;
    bottom: 0;
}

.footer-container {
    position: absolute;
    width: 100%;
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For older IE/Edge */
}

footer hr {
    border-top: 1px solid var(--CelebrityBlue);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.footer-logo {
    max-width: 188px;
    margin: 15px 0 5px 0;
}

footer p {
    font-size: 12px;
    margin: 15px 0;
}
/* ==========================================================================
   Login styles
   ========================================================================== */
.login-container {
    display: flex;
    flex-flow: row wrap;
}
.login-form {
    width: 100%;
    order: 2;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin: 2em 1em;
}
.login-form img {
    max-width: 200px;
    margin: 0.5em;
    -webkit-user-select: none;
    user-select: none;
}
.login-form h1 {
    
}
.login-form form {
    width: 100%;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.login-form form label {
    font-family: var(--NeutrafaceBold);
    font-size: 18px;
    width: 100%;
    display: block;
    max-width: 480px;
    text-align: left;
    margin: auto;
}
.login-form form input {
    width: 100%;
    padding: 16px 18px;
    margin: 10px 0 30px 0;
    display: inline-block;
    border: 1px solid var(--CelebrityBlue);
    color: var(--CelebrityBlue);
    border-radius: 0px;
    box-sizing: border-box;
    font-family: var(--NeutrafaceBook);
    font-size: 22px;
    max-width: 480px;
}
.login-form form input:focus {
    border: 1px solid var(--Tangerine);
    border-radius: 0px;
    outline: transparent;
}
.login-form form input:-webkit-autofill {
    color: var(--CelebrityBlue)!important;
    font-family: var(--NeutrafaceBook);
    font-size: 22px;
    -webkit-text-fill-color: var(--CelebrityBlue) !important;
}
.login-form form input::selection {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-family: var(--NeutrafaceBook);
    font-size: 22px;
}
.login-form button {
    margin: 2em;
}
.login-form button svg {
    margin-left: 50px;
}
.login-form p {
    
}
.login-image {
    width: 100%;
    order: 1;
}
.login-image img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    max-height: 200px;
}
@media only screen and (min-width: 576px) {
    .login-form form input {
        padding: 20px;
    }
    .login-form img {
        max-width: 245px;
        margin: 1em;
        max-width: 200px;
        margin: 0.5em;
        -webkit-user-select: none;
        user-select: none;
    }
}
@media only screen and (min-width: 768px) {
    .login-container {
        flex-flow: row;
        height: 100vh;
        overflow: hidden;
    }
    .login-form {
        flex: 1;
    }
    .login-image {
        flex: 1;
        order: 2;
    }
    .login-image img {
        height: 100vh;
        max-height: 100vh;
    }
}



/* ==========================================================================
   Usefuls
   ========================================================================== */
.hidden {
    display: none!important;
}

/* ==========================================================================
   Hero Element
   ========================================================================== */

.hero {
    width: 100%;
    height: 550px;
    background-image: url(../../assets/images/hero-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (min-width: 576px) {
    .hero {
        height: 680px;
    }
}
.hero-tint {
    background-image: linear-gradient(48deg, rgba(0, 0, 0, 0.80) 23.38%, rgba(0, 0, 0, 0.00) 73.8%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* ==========================================================================
   Card Element
   ========================================================================== */
.swiper-notification {
    opacity: 0;
}
.tier-card {
    height: 300px;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.tier-background {
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.tier-card h3 {
    margin: 0 15px 15px 15px;
}
.tier-card h5 {
    margin: 0 0 0 15px;
}
.tier-card p {
    font-size: 16px;
}
.tier-card:hover svg circle:first-of-type {
    fill: var(--Tangerine);
}
.tier-card:hover .tier-background {
    transform: scale(1.1);
}
.card-locked,
.card-locked * {
    pointer-events: none;
    touch-action: none;
    cursor: default;
    -webkit-touch-callout: none;
}
.card-locked svg path {
    stroke: #000000;
}
.card-locked svg rect {
    stroke: #000000;
}
.card-locked .tier-card-progress-line {
    width: 0;
}
.card-locked .tier-background {
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
.card-locked .card-tint {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
}
.card-locked .tier-card-progress {
    background: rgba(0, 0, 0, 0.40);
}
.card-locked .tier-card .tier-card-progress .tier-card-blur svg circle {
    pointer-events: none;
    touch-action: none;
    cursor: default;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.card-locked .tier-card .tier-card-progress .tier-card-blur svg circle:focus,
.card-locked .tier-card .tier-card-progress .tier-card-blur svg circle:focus-visible {
    pointer-events: none;
    touch-action: none;
    cursor: default;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.card-tint {
    background-image: linear-gradient(0deg, rgba(0, 11, 25, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
    width: 100%;
    height: 80%;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
}
.tier-card-progress-line {
    height: 1px;
    width: 100%;
    background: var(--DarkGrey);
}
.tier-card-progress {
    width: 100%;
    height: 20%;
    background: rgba(0, 11, 25, 0.40);
    position: absolute;
    bottom: 0;
    left: 0;
}
.card-progress-line {
    height: 1px;
    width: 50%;
    background: #ffffff;
}
.tier-card-blur {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: rgba(0, 11, 25, 0.10);
}
.tier-card-progress p {
    margin: 0 0 0 15px;;
}
.tier-carousel {
    color: #ffffff;
}
.tier-card {
    color: #ffffff;
}
.tier-card svg {
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 15px;
/*    transform: rotate(180deg);*/
    overflow: visible;
    clip-path: none;
}
.tier-card svg:nth-child(n+3) {
    transform: rotate(0deg);
}
/* ==========================================================================
   Generic hero element
   ========================================================================== */
.generic-hero {
    width: 100%;
    height: 200px;
    position: relative;
    background: var(--CelebrityBlue);
}
.generic-hero img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    opacity: 0.4;
}
@media only screen and (min-width: 992px) {
    .generic-hero img {height: 250px;}
    .generic-hero {height: 250px;}
}
@media only screen and (min-width: 1200px) {
    .generic-hero img {height: 275px;}
    .generic-hero {height: 275px;}
}
@media only screen and (min-width: 1500px) {
    .generic-hero img {height: 300px;}
    .generic-hero {height: 300px;}
}
.generic-title {
    color: #ffffff;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    margin: auto;
    display: flex;
    justify-content: center;
}
.generic-title h1 {
    margin: auto; 
}
.generic-title svg {
    transform: rotate(0deg)!important;
}
.generic-back {
    padding: 5px 20px; 
    width: 100%;
}
@media only screen and (min-width: 992px) {
    .generic-back {padding: 30px 20px;}
}

/* ==========================================================================
   Accordions
   ========================================================================== */
.accordion-container {
    gap: 0
}
.accordion-item {
    display: flex;
    flex-flow: column;
}
.accordion-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    background: rgba(238, 238, 238, 1);
    margin: 0 0 20px 0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.accordion-title:hover svg .bg {
    fill: var(--Tangerine);
}
.accordion-title:hover {
    background: rgba(238, 238, 238, 0.5);
}
.accordion-title h3 {
    margin: 0;
}
.accordion-title p {
    margin: 0;
}
.accordion-title:focus-visible {
    outline: 2px solid var(--Tangerine);
}
.accordion-title:focus-visible svg .bg {
    fill: var(--Tangerine);
}
@media only screen and (min-width: 1200px) {
    .accordion-title h3 {
        font-size: 20px;
    }
}
.accordion-toggle {
    padding-left: 20px;
}
.accordion-toggle svg {
    width: 30px;
    height: 30px;
}
.accordion-toggle.open svg {
    transform: rotate(180deg);
}
.accordion-toggle svg .bg {
    fill:#002859;
    transition: fill 0.2s ease;
}
.accordion-toggle svg .fg {
    fill:none;
    stroke:#fff;
    stroke-miterlimit:10;
    stroke-width:1.5px;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0px;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-bottom 0.5s ease;
}
.accordion-content p {
    padding: 0 20px 0 20px;
}
.accordion-content.open {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 20px;
}
/* ==========================================================================
   Back buttons
   ========================================================================== */
.back {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    min-height: 42px;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
    display: grid;
    grid-auto-flow: column;
    outline: transparent;
}
a:focus-visible .back {
    outline: 2px solid var(--Tangerine);
}
.course-hero-container .back:focus-visible {
    outline: 2px solid #ffffff;
}
.back svg {
    transform: rotate(180deg);
    width: 20px;
    height: 20px;
    overflow: visible;
    clip-path: none;
}
.back p {
    margin: 2px 0 0 0;
    font-size: 16px;
}
.back-container {
    top: 0!important;
    height: 100%!important;
    z-index: 2;
}

/* ==========================================================================
   Login Redirect page styles
   ========================================================================== */

.CelebInfo .terms {
    font-size: 12px;
    padding-top: 2em;
}
.RedirectSection {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-size: cover;
    position: fixed;
}
.CelebLearning {
    z-index: 10;
    text-align: center;
    width: 100%;
    margin: auto;
    position: fixed;
}
.CelebInfo {
    padding: 3em 2em 2em 2em;
    margin: 1em;
    max-width: 500px;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.CelebInfo h1 {
    font-size: 24px;
    margin-bottom: 10px;
}
.CelebInfo p {
    margin-bottom: 1em;
}
.CelebInfo button {
    width: fit-content;
}
.CelebInfo button a {
    background: none;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.CelebInfo img {
    max-width: 200px;
    user-select: none;
}
@media only screen and (min-width: 576px) {
    .CelebInfo {
        padding: 6em 5em 2em 5em;
        margin: auto;
    }
    .CelebInfo h1 {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .CelebInfo .terms {
        padding-top: 4em;
        font-size: 14px;
    }
    .CelebInfo p {
        margin-bottom: 2em;
        max-width: 510px;
    }
    .CelebInfo img {
        max-width: 300px;
    }
}
@media only screen and (min-width: 992px) {
    .CelebInfo {
        max-width: 800px;
    }
}
#slideshow {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    user-select: none;
}
#slideshow img {
    position:absolute;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    object-fit: cover;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 10s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 3s, 10s;
            transition-property: opacity, transform;
            transition-duration: 3s, 10s;
}
#slideshow img  {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}
#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}
#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}
#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}
#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 576px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {
    nav {
        display: block;
        flex: 6;
    }
    nav hr {
        max-width: 158px;
    }
    .top-bar {
        align-items: flex-start;
        flex: 1;
    }
    header {
        max-width: 188px;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .hamburger {
        display: none;
    }
    .logo {
        padding: 30px 20px 20px 20px;
        width: 140px;
    }
    section {
        margin-left: 188px;
    }
    .footer-container {
        width: calc(100% - 188px);
    }
    .mobile-header-clear {
        display: none;
    }
}
@media only screen and (min-width: 1200px) {
    header {
        max-width: 268px;
    }
    section {
        margin-left: 268px;
    }
    .footer-container {
        width: calc(100% - 268px);
    }
    .logo {
        width: 160px;
    }
}
@media only screen and (min-width: 1500px) {}