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

/* ==========================================================================
   @fontface
   ========================================================================== */
 
@font-face {
    font-family: 'Kapra';
    src: url('../../assets/fonts/Kapra.woff2') format('woff2'),
        url('../../assets/fonts/Kapra.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: 'Darwin Regular';
    src: url('../../assets/fonts/Darwin.woff2') format('woff2'),
        url('../../assets/fonts/Darwin.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Darwin Italic';
    src: url('../../assets/fonts/Darwin-Italic.woff2') format('woff2'),
        url('../../assets/fonts/Darwin-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Darwin Light';
    src: url('../../assets/fonts/Darwin-Light.woff2') format('woff2'),
        url('../../assets/fonts/Darwin-Light.woff') format('woff');
    font-weight: 250;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Darwin Light Italic';
    src: url('../../assets/fonts/Darwin-LightItalic.woff2') format('woff2'),
        url('../../assets/fonts/Darwin-LightItalic.woff') format('woff');
    font-weight: 250;
    font-style: italic;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Darwin Bold';
    src: url('../../assets/fonts/Darwin-Bold.woff2') format('woff2'),
        url('../../assets/fonts/Darwin-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Darwin Bold Italic';
    src: url('../../assets/fonts/Darwin-BoldItalic.woff2') format('woff2'),
        url('../../assets/fonts/Darwin-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


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

html {

/* Colours */

    --RoyalBlue: #001669;
    --Blue1: #00D5FF;
    --Blue2: #0080FF;
    --Green1: #BAFF00;
    --Green2: #1AFF2D;
    --Yellow1: #FFFF1A;
    --Yellow2: #FFEA00;
    --Orange1: #FF8000;
    --Orange2: #FF6900;
    --Pink1: #FF66E5;
    --Pink2: #FF0DB2;
    --Violet1: #B580FF;
    --Violet2: #8833FF;
    --White: #ffffff;
    --Black: #000000;

/* Themes/Gradients */
    
    --Lagoon: linear-gradient(180deg, #00D5FF 0%, #1AFF2D 100%);
    --Sunrise: linear-gradient(180deg, #FF6900 0%, #FFEA00 100%);
    --Sorbet: linear-gradient(180deg, #FF0DB2 0%, #FFEA00 100%);
    --Sunset: linear-gradient(180deg, #FF0DB2 0%, #FF6900 100%);
    --Ultraviolet: linear-gradient(180deg, #83F 0%, #FF0DB2 100%);
    --Ocean: linear-gradient(180deg, #00D5FF 0%, #0080FF 100%);
    --Cosmos: linear-gradient(180deg, #83F 0%, #0080FF 100%);

/* Fonts */
 
    --Kapra: 'Kapra', sans-serif;
    --DarwinLight: 'Darwin Light', sans-serif;
    --Darwin: 'Darwin Regular', sans-serif;
    --DarwinBold: 'Darwin Bold', sans-serif;
    
}

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

body {
    font-family: var(--DarwinLight);
    color: var(--RoyalBlue);
    font-size: 16px;
	line-height: 150%;
    overflow-x: hidden;
    overscroll-behavior: none;
    line-height: 150%;
    min-height: 100dvh;
}

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

if-cell.flex {
    display: flex;
    flex-flow: column;
}

/* 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: 42px;
    margin: 32px 0;
    line-height: 80%;
}
h2 {
    font-size: 32px;
    margin: 24px 0 10px 0;
    line-height: 90%;
}
h3 {
    font-size: 24px;
    margin: 24px 0 10px 0;
    line-height: 90%;
}
h4 {
    font-size: 18px;
    margin: 24px 0 10px 0;
    line-height: 100%;
}
h5 {
    font-family: var(--DarwinBold);
    font-size: 18px;
    line-height: 150%;
    margin: 0 0 8px 0;
}
h1, h2, h3, h4 {
    font-family: var(--Kapra);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: normal;
}
p {
    font-size: 16px;
    line-height: 150%;
    margin: 0 0 16px 0;
    font-family: var(--DarwinLight);
}
p.meta {
    font-size: 14px;
}
a {
    color: inherit;
}
.course-content-container a {
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .course-content-container a:hover {
        text-decoration: none;
    }
}
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;
}
::selection {
    background-color: var(--RoyalBlue);
    color: #ffffff;
}
h1 sup.reg-mark {
    font-size: 22px;
}
h2 sup.reg-mark {
    font-size: 18px;
}
.course-tracker-text h3 sup.reg-mark {
    font-size: 11px;
}
.course-tracker-text h3 sup.sm-mark {
    font-size: 12px;
}
h3 sup.reg-mark {
    font-size: 12px;
}
a sup.reg-mark {
    font-size: 10px;
}
.sm-mark {
    font-size: 0.5em;
}
@media only screen and (min-width: 992px) {
    p {margin: 0 0 18px 0;}
    h1 {font-size: 56px; margin: 40px 0 24px 0;}
    h1 sup.reg-mark {font-size: 30px;}
    h2 {margin: 24px 0 14px 0;}
    h2 sup.reg-mark {font-size: 18px;}
    h3 {margin: 24px 0 14px 0;}
    h3 sup.reg-mark {font-size: 14px;}
    h4 {margin: 24px 0 14px 0;}
    li {margin-bottom: 18px;}
}

@media only screen and (min-width: 1200px) {
    h1 {font-size: 80px; margin: 56px 0 24px 0;}
    h1 sup.reg-mark {font-size: 44px;}
    h2 {font-size: 58px; margin: 24px 0 16px 0;}
    h2 sup.reg-mark {font-size: 30px;}
    h3 {font-size: 32px; margin: 24px 0 16px 0;}
    h3 sup.reg-mark {font-size: 18px;}
    h4 {font-size: 24px; margin: 24px 0 16px 0;}
    h5 {font-size: 22px;}
    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;}
    ul li::marker {
        font-size: 24px;
    }
}

sup {
    line-height: 0;
}
strong {
    font-family: var(--DarwinBold);
    font-weight: bold;
}
em {
    font-style: italic;
}
span {

}
section.bento {
    padding: 26px;
    border-radius: 20px;
    background: var(--White);
    box-sizing: border-box;
    box-shadow: 0 4px 12px 0 rgba(0, 40, 89, 0.12);
}
section .bento {
    padding: 26px;
    border-radius: 20px;
    background: var(--White);
    box-sizing: border-box;
    box-shadow: 0 4px 12px 0 rgba(0, 40, 89, 0.12);
}
.bento img {
    border-radius: 20px;
}
@media only screen and (min-width: 992px) {
    section.bento {
        padding: 32px;
        border-radius: 32px;
    }
    section .bento {
        padding: 32px;
        border-radius: 32px;
    }
    .bento img {
        border-radius: 32px;
    }
}
/* ==========================================================================
   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;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:focus-visible {
    outline: 2px solid var(--RoyalBlue);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
a {
    text-decoration: none;
}
a.button, button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--Yellow2);
    color: var(--RoyalBlue);
    padding: 14px 20px 12px 20px;
    width: fit-content;
    font-family: var(--DarwinBold);
    font-size: 16px;
    border: 2px solid transparent;
    transition: 0.3s background ease, 0.3s color ease;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    a.button:hover, button:hover {
        background: var(--RoyalBlue);
        color: var(--Yellow2);
    }
}
a.button:focus-visible, button:focus-visible {
    outline: 2px solid var(--RoyalBlue);
}
@media only screen and (min-width: 992px) {
    a.button, button {
        padding: 18px 30px 16px 30px;
    } 
}
@media only screen and (min-width: 1200px) {
     a.button, button {
        font-size: 18px;
    } 
}
/* ==========================================================================
   Form styling
   ========================================================================== */

input {
    font-size: 16px;
    line-height: 150%;
    font-family: var(--DarwinLight);
    padding: 12px;
    box-sizing: border-box;
    outline: transparent;
    border: 2px solid transparent;
    width: 100%;
    color: var(--RoyalBlue);
    background: #F2F3F8;
    border-radius: 16px;
    margin-bottom: 16px;
}
input:focus {
    outline: 2px solid var(--RoyalBlue);
    border-radius: 16px;
}
label {
    margin: 8px 0;
    font-family: var(--DarwinBold);
}
.custom-select {
    position: relative;
    font-family: 'Darwin Bold';
}
.custom-select select {
    display: none;
}
.select-selected {
    background-color: rgba(242, 243, 248, 0.85);
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: url("../../assets/icons/dropdown.svg");
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}
/*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 12px 12px;
  border: 1px solid transparent;
  border-color: transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}
.select-items div,.select-selected.select-arrow-active {
  color: rgba(0, 40, 89, 1);
  padding: 16px 12px 12px 12px;
  border: 1px solid transparent;
  border-color: transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}
.select-selected.select-arrow-active {
    background-color: rgba(242, 243, 248, 0.85);
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 8px;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.same-as-selected {
background-color: rgba(242, 243, 248, 0.5);
}
@media (hover: hover) and (pointer: fine) {
    .select-items div:hover {
    background-color: rgba(242, 243, 248, 0.5);
    }
}
/* ==========================================================================
   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(--RoyalBlue);
}
/*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(--RoyalBlue);
    border: 1px solid #ffffff;
}
/*style items (options):*/
.nav-select .select-items {
  position: absolute;
  background-color: var(--RoyalBlue);
  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;
}
.same-as-selected {
background-color: rgba(255,255,255,0.08);
}
@media (hover: hover) and (pointer: fine) {
    .nav-select .select-items div:hover {
    background-color: rgba(255,255,255,0.08);
    }
}
/* ==========================================================================
   Spacer elements
   ========================================================================== */
/* TOP */

.spacer-top-grid {
    margin-top: 1em;
}
.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-grid {
    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;
    }
}
/* ==========================================================================
   Dashboard theming
   ========================================================================== */
body.lagoon {
    background: linear-gradient(180deg, #00D5FF 50%, #1AFF2D 100%);
    background-repeat: no-repeat;
}
body.sunrise {
    background: linear-gradient(180deg, #FF6900 50%, #FFEA00 100%);
    background-repeat: no-repeat;
}
body.sunset {
    background: linear-gradient(180deg, #FF0DB2 50%, #FF6900 100%);
    background-repeat: no-repeat;
}
body.sorbet {
    background: linear-gradient(180deg, #FF0DB2 50%, #FFEA00 100%); 
    background-repeat: no-repeat;  
}
body.ultraviolet {
    background: linear-gradient(180deg, #83F 50%, #FF0DB2 100%);
    background-repeat: no-repeat;
}
body.ocean {
    background: linear-gradient(180deg, #00D5FF 50%, #0080FF 100%);
    background-repeat: no-repeat;
}
body.cosmos {
    background: linear-gradient(180deg, #83F 50%, #0080FF 100%);
    background-repeat: no-repeat;
}
/* ==========================================================================
   Header / Main Sticky Nav
   ========================================================================== */

header {
    width: 100%;
    position: fixed;
    user-select: none;
    -webkit-user-select: none;
    z-index: 10;
    top: 0;
}
header a, .menu-links.popout, .menu-links.hover {
    text-decoration: none;
    color: var(--RoyalBlue);
    background: none;
    outline: transparent;
}
header .top-bar a {
    height: 50px;
    border-radius: 10px;
}
.top-bar a:focus-visible {
    outline: 2px solid var(--RoyalBlue);
    outline-offset: -6px;
}
.menu-links:focus-visible li {
    outline: 2px solid var(--Pink2);
    border-radius: 8px;
}
#course-popout:focus-visible .popout-container a li {
    outline: 2px solid transparent;
}
.popout-container a.locked {
    color: #767676;
    pointer-events: none;
    text-decoration: none;
}
#course-popout:has(a.locked) {
    cursor: default !important;
}
@media (hover: hover) and (pointer: fine) {
    #course-popout:hover:has(a.locked) {
        cursor: default !important;
    }
}
.popout-container a.locked,
.popout-container a.locked *,
.popout-container a.locked li {
    cursor: default !important;
    pointer-events: none;
}
.top-bar a:focus-visible {
    outline: 2px solid transparent;
}
.top-bar a:focus-visible img {
    outline: 2px solid var(--Pink2);
    border-radius: 12px;
    outline-offset: -5px;
}
.top-bar a img.desktop {
    display: none;
}
.top-bar a img.mobile {
    display: block;
    width: 142px;
}
.mobile-header-clear {
    height: 56px;
}
.logo {
    width: 30px;
    height: 30px;
    padding: 10px;
    box-sizing: content-box;
}
.top-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background: var(--White);
    margin: 10px 10px 0 10px;
    border-radius: 10px;
    transition: 0.3s border-radius ease-in-out;
}
.top-bar.is-active {
    border-radius: 10px 10px 0 0;
}
.menu-links {
    cursor: pointer;
    position: relative;
}
.menu-links.popout:focus-visible {
    outline: transparent;
}
.popout-visual {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.22,1,.36,1) .0s;
    isolation: isolate;
    pointer-events: none;  
}
.hover-visual {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.22,1,.36,1) .0s;
    isolation: isolate;
    pointer-events: none;  
}
.menu-links.popout.is-open .popout-visual {
  opacity: 1;
  transition: opacity .65s cubic-bezier(.22,1,.36,1) .05s;
  pointer-events: auto;
}
.menu-links .mobile-chev svg {
    transition: 0.3s transform ease;
}
.menu-links.popout.is-open .mobile-chev svg {
    transform: rotate(180deg);
}
.popout-container {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 230px;
    border-radius: 0;
    margin: 0px -26px;
    gap: 8px;
    padding: 20px 20px 4px 20px;
    left: 72px;
    top: 0;
    background: var(--RoyalBlue);
    color: var(--White);
}
.hover-container {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 230px;
    border-radius: 0;
    margin: 0px -26px;
    gap: 8px;
    padding: 20px 20px 4px 20px;
    left: 72px;
    top: 0;
    background: var(--RoyalBlue);
    color: var(--White);
}
.popout-container a {
    color: var(--White);
}
.popout-container a:focus-visible {
    outline: 2px solid transparent;
}
.popout-container a:focus-visible li {
    outline: 2px solid var(--Pink2);
    border-radius: 4px;
    outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
    .popout-container a:hover li {
        border-bottom: 1px solid var(--White);
    }
}
.popout-container a li {
    font-size: 18px;
    font-family: var(--DarwinLight);
    padding: 3px 0 0 0;
    margin-bottom: 16px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
}
.primary-nav .hover-container li {
    font-size: 18px;
    font-family: var(--DarwinLight);
    padding: 3px 0 0 0;
    margin-bottom: 16px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s ease;
    color: var(--White);
}
.popout-arrow {
    position: absolute;
    right: 6px;
    width: 12px;
    height: 12px;
    top: 56px;
    border-radius: 0 2px 0 0;
    transform: rotate(-45deg);
    background: var(--RoyalBlue);
}
.hover-arrow {
    position: absolute;
    right: 6px;
    width: 12px;
    height: 12px;
    top: 56px;
    border-radius: 0 2px 0 0;
    transform: rotate(-45deg);
    background: var(--RoyalBlue);
}
.menu-links.popout .popout-container { pointer-events: none; }
.menu-links.popout.is-open .popout-container { pointer-events: auto; }
.menu-links.popout.is-open .popout-container,
.menu-links.popout.is-open .popout-arrow {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .menu-links.hover:hover .hover-arrow {
    opacity: 1;
    }
}
.ham-button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    border: 2px solid #E5FBFF;
    border-radius: 10px;
    margin: 5px;
    padding: 6px 15px;
    cursor: pointer;
    transition: 0.3s background ease-in-out, 0.3s color ease-in-out, 0.3s border ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
    .ham-button:hover {
        background: var(--RoyalBlue);
        color: var(--White);
        border: 2px solid var(--RoyalBlue);
    }
}
.ham-button:focus-visible {
    outline: 2px solid var(--Pink2);
    border: 2px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
    .ham-button:hover .hamburger .line {
        background-color: var(--White);
    }
}
.ham-button p {
    margin: 2px 0 0 0;
    font-size: 14px;
    font-family: var(--Darwin);
}
.hamburger {
    padding: 0 0 0 15px;
    outline: transparent;
}
.hamburger .line {
    width: 17px;
    height: 2px;
    border-radius: 10px;
    background-color: var(--RoyalBlue);
    display: block;
    margin: 3px 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);
}
nav {
    margin: 0 10px 10px 10px;
    display: none;
    height: 100dvh;
    box-sizing: border-box;
    overflow: visible;
    background: var(--White);
    border-radius: 0 0 10px 10px;
    padding: 26px;
}

nav.is-active {
    display: block;
    opacity: 1;
    animation-name: nav-open;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    overflow-y: scroll;
}
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 var(--RoyalBlue);
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 30px 0 40px 0;
}
.primary-nav svg {
    padding: 4px;
}
.primary-nav svg path {
    transition: 0.5s;
}
.primary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.primary-nav li {
    font-family: var(--Darwin);
    font-size: 22px;
    line-height: 110%;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}
.primary-nav li .nav-title {
    border-bottom: 1px solid transparent;
    display: flex;
    flex-basis: auto;
    align-items: center;
}
.nav-title p {
    margin: 0;
    font-size: 22px;
    padding-top: 4px;
}
.primary-nav li .nav-icon {
    margin-right: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: var(--White);
    border-radius: 8px;
    transition: 0.5s;
}
@media (hover: hover) and (pointer: fine) {
    .primary-nav li:hover .mobile-chev svg path {
        fill: var(--RoyalBlue);
    }
    .primary-nav li:hover svg path {
        fill: var(--White);
    }
    .primary-nav li:hover .nav-icon {
        background: var(--RoyalBlue);
    } 
}
.secondary-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.secondary-nav li {
    font-family: var(--DarwinLight);
    font-size: 18px;
    line-height: 110%;
    padding: 10px 0;
    margin: 0;
}
@media (hover: hover) and (pointer: fine) {
    .secondary-nav li:hover {
        text-decoration: underline;
    }
}
.full-desktop-logo {
    display: none;
    position: absolute;
    width: 90%;
    top: 48px;
    left: 5%;
    z-index: 2;
}
section.dash-section {
    position: relative;
}
.full-desktop-logo .logo {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 0;
    margin: auto;
    max-width: 1600px;
}
/* This is a lil exception for the mobile popouts */
@media (max-width: 991.98px) {
  .popout-container {
    overflow: hidden;              
    max-height: 0;     
    padding: 0;
    transition: max-height .65s cubic-bezier(.22,1,.36,1) .0s, padding .5s ease .2s;
    will-change: max-height, padding;
  }
  .hover-container {
    overflow: hidden;              
    max-height: 0;     
    padding: 0;
    transition: max-height .65s cubic-bezier(.22,1,.36,1) .0s, padding .5s ease .2s;
    will-change: max-height, padding;
  }
  .menu-links.popout.is-open .popout-container {
    padding: 34px 34px 8px 34px;
    max-height: 60vh;
    transition: padding .05s ease 0s, max-height .65s cubic-bezier(.22,1,.36,1) .05s;
  }
}
@media only screen and (min-width: 992px) {
    .logo {
        width: 58px;
        height: 58px;
        padding: 32px 20px;
    }
    .top-bar a img.desktop {
        display: block;
    }
    .top-bar a img.mobile {
        display: none;
    }
    header {
        background: var(--White);
    }
    header .top-bar a {
        height: auto;
    }
    .full-desktop-logo {
        display: block;
    }
    .top-bar {
        background: none;
        margin: 0;
        border-radius: 0;
    }
    .menu-links.hover:hover .hover-visual {
        opacity: 1;
        transition: opacity .65s cubic-bezier(.22,1,.36,1) .05s;
        pointer-events: auto;
    }
    .menu-links.hover:hover .mobile-chev svg {
        transform: rotate(180deg);
    }
    .popout-container {
        position: absolute;
        border-radius: 0 8px 8px 0;
        margin: 0;
        top: -8px;
    }
    .popout-arrow {
        top: 16px;
        left: 66px;
        right: unset;
        border-radius: 2px 0 0 0;    
    }
    .hover-container {
        position: absolute;
        border-radius: 0 8px 8px 0;
        margin: 0;
        top: -8px;
    }
    .hover-arrow {
        top: 16px;
        left: 66px;
        right: unset;
        border-radius: 2px 0 0 0;    
    }
    .secondary-nav {
        display: none;
    }
    nav hr {
        display: none;
    }
    .nav-title p {
        display: none;
    }
    .mobile-chev {
        display: none;
    }
    .primary-nav li {
        padding: 8px;
    }
    .primary-nav li .nav-icon {
        margin-right: 0;
    }
}

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

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

.footer-container {
    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(--RoyalBlue);
    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;
}
footer p a {
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    footer p a:hover {
        text-decoration: none;
    }
}
/* ==========================================================================
   Coming soon styles
   ========================================================================== */
.coming-soon-hero .hero {
    height: 50dvh;
    max-height: 50vh;
}
.coming-soon-hero .hero-grad {
    bottom: -2px;
}
.coming-soon .terms {
    font-size: 14px;
    text-align: center; 
}
.coming-soon {
    min-height: 50dvh;
}
.coming-soon if-grid {
    height: 100%;
    grid-row-gap: 32px;
}
.coming-soon .RoyalInfo {
    height: 100%;
    justify-content: center;
}
.coming-soon .RoyalInfo h1 {
    margin-top: 32px;
}
.coming-soon .RoyalInfo img {
    margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
    .coming-soon .RoyalInfo h1 {
        margin-top: 60px;
    }
}
/* ==========================================================================
   Login styles
   ========================================================================== */
.redirectSection.login .redirectBG {
    background: var(--Sorbet);
}    
.redirectSection.login form {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    max-width: 400px;
}
.redirectSection.login form button {
    width: 100%;
}
.redirectSection.login .RoyalInfo {
    position: relative;
    padding-top: 56px;
}
.redirectSection.login .RoyalInfo img {
    position: absolute;
    margin: auto;
    top: 16px;
}
.redirectSection.login p a {
    text-decoration: underline;
    font-family: var(--DarwinBold);
}
@media (hover: hover) and (pointer: fine) {
    .redirectSection.login p a:hover {
        text-decoration: none;
    }
}
@media only screen and (min-width: 568px) {
    label {
        margin: 16px 0;
    }  
}
@media only screen and (min-width: 992px) {
    .redirectSection.login .RoyalInfo img {
        top: 60px;
    }
}
/* ==========================================================================
   Usefuls
   ========================================================================== */
.hidden {
    display: none!important;
}

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

.hero {
    width: 100%;
    height: 550px;
    position: relative;
    overflow: hidden;
}
.hero-bg, .hero-fg, .hero-graphic {
    position: absolute;
    width: 100%;
    height: 100%;
    will-change: transform;
}
.hero-bg img, .hero-fg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.hero-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-graphic img {
    width: 45%;
    max-width: 450px;
}
.hero-grad {
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: 0;
    left: 0;
    will-change: transform;
}
.hero-bg    { z-index: 1; }
.hero-grad  { z-index: 2; }
.hero-graphic { z-index: 3; }
.hero-fg    { z-index: 4; }
body.lagoon .hero-grad {
    background: linear-gradient(0deg, rgba(0, 213, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.sunrise .hero-grad {
    background: linear-gradient(0deg,rgba(255, 105, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.sorbet .hero-grad {
    background: linear-gradient(0deg,rgba(255, 13, 178, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.sunset .hero-grad {
    background: linear-gradient(0deg,rgba(255, 13, 178, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.ultraviolet .hero-grad {
    background: linear-gradient(0deg,rgba(136, 51, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.ocean .hero-grad {
    background: linear-gradient(0deg,rgba(0, 213, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
body.cosmos .hero-grad {
    background: linear-gradient(0deg,rgba(136, 51, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.dashboard-hero-swap img {
    display: none;
}
body.lagoon .dashboard-hero-swap img.lagoon {
    display: block;
}
body.sunrise .dashboard-hero-swap img.sunrise {
    display: block;
}
body.sorbet .dashboard-hero-swap img.sorbet {
    display: block;
}
body.sunset .dashboard-hero-swap img.sunset {
    display: block;
}
body.ultraviolet .dashboard-hero-swap img.ultraviolet {
    display: block;
}
body.ocean .dashboard-hero-swap img.ocean {
    display: block;
}
body.cosmos .dashboard-hero-swap img.cosmos {
    display: block;
}
@media only screen and (min-width: 576px) {
    .hero {
        height: 680px;
    }
}
@media only screen and (min-width: 768px) {
    .hero-graphic img {
        width: 35%;
    }
}
@media only screen and (min-width: 992px) {
    .hero-graphic img {
        width: 30%;
    }
}
@media only screen and (min-width: 1200px) {
    .hero-graphic img {
        width: 25%;
    }
}
/* ==========================================================================
   Card Element
   ========================================================================== */
.swiper-notification {
    opacity: 0;
}
.tier-carousel.no-nav .main-carousel-left,
.tier-carousel.no-nav .main-carousel-right {
    display: none !important;
}
.tier-card-list {
    width: 100%;
}
.tier-card {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    margin-bottom: 16px;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.tier-link {
    display: flex;
    flex-flow: column;
}
.tier-link:focus-visible {
    border: 3px solid var(--Pink2);
    border-radius: 11px;
    outline: transparent;
}
.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-tint {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}
.tier-card-blur {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tier-card-progress.complete {
    background-color: var(--Green2);
}
.tier-card-blur svg {
    border: 1.5px solid var(--RoyalBlue);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    padding: 1.5px 0 0 1.5px;
}
.card-locked .tier-tint {
    opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
    .tier-card:hover svg circle:first-of-type {
        fill: var(--Tangerine);
    }
    .tier-card:hover .tier-background {
        transform: scale(1.1);
    }
}
.card-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}
.card-locked,
.card-locked * {
    pointer-events: none;
    touch-action: none;
    cursor: default;
    -webkit-touch-callout: none;
    color: #767676;
}
.card-locked .card-extra .card-label p {
    color: var(--RoyalBlue);
}
.card-locked .tier-card-progress.complete h4 {
    color: var(--RoyalBlue);
}
.tier-card svg:nth-child(n+3) {
    transform: rotate(0deg);
}
.tier-card-progress {
    position: absolute;
    background: var(--White);
    bottom: 4px;
    left: 4px;
    border-radius: 4px;
    padding: 10px 10px 8px 10px;
    display: flex;
    flex-flow: row nowrap;
}
.tier-card-progress h4 {
    margin: 0;
    font-size: 20px;
}
.tier-link h3 {
    margin-top: 0;
}
.tier-card-progress p {
    margin: 0;
}
.tier-card-progress .complete-check {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.card-title .lock {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    margin-right: 8px;
    margin-top: 2px;
}
.tier-card-progress .complete-check {
    background: var(--Green2);
    padding: 2px;
    margin-right: 8px;
}
.card-locked.tier-link .lock {
    display: flex;
}
.card-extra {
    display: flex;
    flex-flow: row;
    gap: 8px;
}
.card-label {
    background: var(--Yellow2);
    border-radius: 4px;
    padding: 4px 12px 2px 12px;
    width: fit-content;
    margin-bottom: 16px;
    display: none;
}
.card-extra.achievement .card-label {
    margin-bottom: 0;
}
.card-extra.new .card-label.new-flag {
    background: var(--Yellow2);
    display: flex;
}
.card-extra.update .card-label.updated-flag {
    background: var(--Blue1);
    display: flex;
}
.card-label p {
    font-size: 14px;
    margin: 0;
}
.card-label.new p.new {
    display: flex;
}
.card-label.update p.update {
    display: flex;
}
/* ==========================================================================
   Generic hero element
   ========================================================================== */
.generic-hero {
    width: 100%;
    height: 200px;
    position: relative;
    background: var(--RoyalBlue);
}
.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;}
}

/* ==========================================================================
   FAQ & Accordions
   ========================================================================== */
.faq-intro {
    text-align: center;
}
.faq-intro p {
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}
.faq-intro p a {
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .faq-intro p a:hover {
        text-decoration: none;
    }
}
.accordion-container {
    gap: 0
}
.accordion-section:not(:first-child) {
    margin-top: 32px;
}
.accordion-section p:last-child {
    margin-bottom: 0;
}
.accordion-container.rewards .accordion-item {
    pointer-events: none;
}
.accordion-container.rewards .accordion-item.unlocked {
    background: var(--Yellow2);
    color: var(--RoyalBlue);
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .accordion-container.rewards .accordion-item.unlocked:hover {
        background: var(--RoyalBlue);
        color: var(--White);
    }
}
.accordion-container.rewards .accordion-item.unlocked.open {
    background: var(--RoyalBlue);
    color: var(--White);
}
.accordion-container.rewards .accordion-item.unlocked .accordion-lock svg {
    display: none;
}
.accordion-container.profile .accordion-item.unlocked {
    background: var(--Yellow2);
    color: var(--RoyalBlue);
    pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
    .accordion-container.profile .accordion-item.unlocked:hover {
        background: var(--RoyalBlue);
        color: var(--White);
    }
}
.accordion-container.profile .accordion-item.unlocked.open {
    background: var(--RoyalBlue);
    color: var(--White);
}
.accordion-container.profile .accordion-item.unlocked .accordion-lock svg {
    display: none;
}
.accordion-lock {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.accordion-lock svg {
    margin-right: 8px;
    margin-top: 2px;
}
.accordion-item {
    display: flex;
    flex-flow: column;
    background: #F2F3F8;
    margin: 0 0 20px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.accordion-item.open {
    background: var(--RoyalBlue);
    color: var(--White);
}
@media (hover: hover) and (pointer: fine) {
    .accordion-item:hover {
        background: var(--RoyalBlue);
        color: var(--White);
    }
}
.accordion-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;  
}
.accordion-title h3 {
    margin: 0;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 100%;
}
.accordion-title h3 p {
    font-family: var(--Karpa);
    font-size: clamp(24px, 2vw, 32px);
    line-height: 100%;
}
.accordion-title p {
    margin: 0;
}
.accordion-toggle {
    padding-left: 20px;
    display: flex;
}
.accordion-toggle svg {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}
.accordion-toggle.open svg {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0px;
    padding: 0 20px 0 20px;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-bottom 0.5s ease;
}
.accordion-content p {
    margin: 0;
}
.accordion-content p a {
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .accordion-content p a:hover {
        text-decoration: none;
    }
}
.accordion-content a.button {
    margin-top: 16px;
}
@media (hover: hover) and (pointer: fine) {
    .accordion-content a.button:hover {
        background: var(--White);
        color: var(--RoyalBlue);
    }
}
.accordion-content.open {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 20px;
}
.accordion-section {
    text-align: center;
    margin-bottom: 16px;
    text-wrap: balance;
}
@media only screen and (min-width: 768px) {
    .accordion-item {
        border-radius: 16px;
    }
}
@media only screen and (min-width: 1200px) {
    .accordion-section {
        text-align: center;
        margin-bottom: 32px;
    }
}
/* ==========================================================================
   Back buttons
   ========================================================================== */
.back {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
    display: grid;
    grid-auto-flow: column;
    outline: transparent;
    background: var(--White);
    padding: 8px 16px;
    border-radius: 24px;
    transition: all 0.3s ease;
}
.back svg path {
    transition: fill 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
    .back:hover {
        background: var(--RoyalBlue);
        color: var(--White);
    }
    .back:hover svg path {
        fill: var(--White);
    }
}
.back:focus-visible {
    outline: 2px solid var(--Pink2);
}
a:focus-visible .back {
    outline: 2px solid var(--Pink2);
}
.course-hero-container .back:focus-visible {
    outline: 2px solid #ffffff;
}
.back svg {
    width: 10px;
    height: 10px;
}
.back p {
    margin: 2px 0 0 0;
    font-size: 14px;
    font-family: var(--DarwinLight);
}
.back-container {
    top: 0!important;
    height: 100%!important;
    z-index: 2;
}
.hero .tab .back {
    position: relative;
    width: fit-content;
    z-index: 2;
    margin-top: 32px;
    display: none;
}
@media only screen and (min-width: 992px) {
    .hero .tab .back {
        display: flex;
    }
}


/* ==========================================================================
Login redirect page styles
========================================================================== */

.RoyalInfo .terms {
    font-size: 14px;
    margin-top: 1em;
}
.redirectSection {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-size: cover;
    position: fixed;
}
.RoyalLearning {
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
}
.RoyalLearning if-grid {
    max-width: unset;
    width: 100%;
    height: 100%;
}
.redirectInfo {
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 32px;
}
.RoyalInfo {
    padding: 26px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    background: var(--White);
    border-radius: 16px;
    height: 100%;
}
.RoyalInfo h1, .RoyalInfo p {
    text-wrap: balance;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.RoyalInfo a.button {
    margin-top: 1em;
}
.RoyalInfo img {
    max-width: 200px;
    user-select: none;
    margin-bottom: 1em;
}
.RoyalInfo div {
    display: flex;
    flex-flow: column;
    align-items: center;
}
.redirectBG {
    height: 100%;
    background: var(--Cosmos);
}
.redirectBG if-grid {
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
}
.redirectImg {
    width: 100%;
    height: 100%;
    max-height: 30dvh;
}
.redirectImg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.redirectSection.login .RoyalInfo {
    justify-content: center;
}
@media only screen and (min-width: 576px) {
    .RoyalInfo {
        height: 72dvh;
    }
}
@media only screen and (min-width: 992px) {
    .RoyalInfo {
        border-radius: 32px;
        height: 100%;
        padding: 32px;
    }
    .redirectImg {
        max-height: 100dvh;
    }
    .RoyalInfo .terms {
        font-size: 16px;
        margin-top: 3em;
    }
    .RoyalInfo img {
        max-width: 300px;
        margin-bottom: 3em;
    }
}
/* ==========================================================================
   404 Page
========================================================================== */
@media only screen and (min-width: 576px) {
    .course-secondary-hero.error-hero .hero {
        height: 400px;
    }
}
.error-page {
    text-align: center;
}
.error-page h1 {
    margin-top: 16px;
}
.error-page a.button {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}
.error-page p {
    text-wrap: balance;
    margin: 32px 0;
}
/* ==========================================================================
   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;
        padding: 0;
    }
    nav hr {
        max-width: 158px;
    }
    .top-bar {
        align-items: flex-start;
        height: 122px;
    }
    header {
        max-width: 100px;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-start;
        box-shadow: 0 4px 12px 0 rgba(0, 40, 89, 0.12);
    }
    .ham-button {
        display: none;
    }
    section {
        margin-left: 100px;
    }
    .footer-container {
        width: calc(100% - 100px);
    }
    .mobile-header-clear {
        display: none;
    }
}
@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 1500px) {}



/* === Autofill fix === */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--RoyalBlue) !important;
  /* Paint your background in the padding box so it “wins” visually */
  box-shadow: 0 0 0 1000px #F2F3F8 inset !important;
}
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--RoyalBlue) !important;
  box-shadow: 0 0 0 1000px #F2F3F8 inset !important;
}

/* Firefox */
input:autofill {
  color: var(--RoyalBlue) !important;
  box-shadow: 0 0 0 1000px #F2F3F8 inset;
}