/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/main.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Main SCSS imports */
/* Abstracts */
:root {
  /* Spaces */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-xxl: 4rem;
  --space: var(--space-m);
  /* Border radius */
  --border-radius: 16px;
  --border-radius-s: 8px;
  --border-radius-xs: 4px;
  --border-radius-button: 100px;
  /* Padding */
  --component-padding: 1.5rem 1.625rem; /* used in portal */
  /* Drop shadows */
  --drop-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
  --drop-shadow-text: 0 1px 0 rgb(0 0 0 / 32%); /* used in portal and APP */
  --drop-shadow-svg: drop-shadow(var(--drop-shadow-text));
  /* Colours */
  /* Teal (primary) variants */
  --color-teal-050: hsl(169deg 48% 90% / 100%); /* #daf2ee */
  --color-teal-100: hsl(169deg 47% 81% / 100%); /* #b6e5dc */
  --color-teal-200: hsl(169deg 47% 71% / 100%); /* #92d8cb */
  --color-teal-300: hsl(169deg 48% 62% / 100%); /* #6eccbb */
  --color-teal-400: hsl(169deg 47% 52% / 100%); /* #4abea9 */
  --color-teal-500: hsl(169deg 65% 42% / 100%); /* #26b298 */
  --color-teal-600: hsl(169deg 64% 35% / 100%); /* #20947f */
  --color-teal-700: hsl(169deg 65% 28% / 100%); /* #197766 contrast 5.50 on white, 5.02 on Ecru */
  --color-teal-800: hsl(169deg 65% 21% / 100%); /* #13594c */
  --color-teal-900: hsl(169deg 64% 14% / 100%); /* #0d3c33 */
  --color-teal: var(--color-teal-500);
  /* Plum (secondary) variants */
  --color-plum-050: hsl(324deg 49% 90% / 100%); /* #f2d9e8 */
  --color-plum-100: hsl(324deg 48% 80% / 100%); /* #e4b3d0 */
  --color-plum-200: hsl(324deg 49% 70% / 100%); /* #d88eba */
  --color-plum-300: hsl(324deg 49% 60% / 100%); /* #cb68a3 */
  --color-plum-400: hsl(324deg 49% 50% / 100%); /* #be428c */
  --color-plum-500: hsl(324deg 72% 40% / 100%); /* #b11d75 */
  --color-plum-600: hsl(324deg 72% 32% / 100%); /* #941862 */
  --color-plum-700: hsl(324deg 72% 27% / 100%); /* #76134e */
  --color-plum-800: hsl(324deg 71% 20% / 100%); /* #590f3b */
  --color-plum-900: hsl(324deg 71% 14% / 100%); /* #3b0a27 */
  --color-plum: var(--color-plum-500);
  /* Black (tertiary) variants */
  /* Using RGB as HSL values containing 0deg or 0 cause display error in Safari macOS 14.1, fixed in 15+ */
  --color-black-050: rgb(229 229 229 / 100%); /* #e5e5e5 */
  --color-black-100: rgb(204 204 204 / 100%); /* #ccc */
  --color-black-200: rgb(178 178 178 / 100%); /* #b2b2b2 */
  --color-black-300: rgb(153 153 153 / 100%); /* #999 */
  --color-black-400: rgb(127 127 127 / 100%); /* #7f7f7f */
  --color-black-500: rgb(102 102 102 / 100%); /* #666 */
  --color-black-600: rgb(77 77 77 / 100%); /* #4d4d4d */
  --color-black-700: rgb(51 51 51 / 100%); /* #333 */
  --color-black-800: rgb(26 26 26 / 100%); /* #1a1a1a */
  --color-black-900: rgb(0 0 0 / 100%); /* #000 */
  --color-black: var(--color-black-900);
  /* White variants */
  --color-white: rgb(255 255 255 / 100%); /* #fff, using rgb due to HSL Safari display error */
  --color-ecru: hsl(156deg 19% 95% / 100%); /* #eff4f2 */
  /* Primary variants */
  --color-primary: var(--color-teal);
  --color-secondary: var(--color-plum);
  --color-tertiary: var(--color-black);
  /* Current student */
  --color-current-student-green-050: hsl(159deg 37% 65% / 100%); /* #85c7b0 */
  --color-current-student-green-100: hsl(159deg 37% 47% / 100%); /* #4ca485 APP, Portal */
  --color-current-student-green-200: hsl(159deg 37% 44% / 100%); /* #479a7d */
  --color-current-student-green-300: hsl(159deg 37% 41% / 100%); /* #428f74 */
  --color-current-student-green-400: hsl(159deg 36% 35% / 100%); /* #397963 APP, contrast of 5.14 on white background */
  --color-current-student-green-500: hsl(159deg 36% 31% / 100%); /* #336c58 */
  /* ECU corporate blue */
  --color-blue: hsl(202deg 100% 35% / 100%); /* #0071b3 used in Portal and APP */
  --color-blue-dark: hsl(202deg 93% 21% / 100%); /* used in Portal and APP */
  /* Miscellanous */
  --addtocompare-heart-color: var(--color-secondary);
  --color-alert-red-600: hsl(11deg 68% 50% / 100%); /* #D54828 */
  --color-red: hsl(0deg 49% 51% / 100%); /* used in Portal and APP */
  --color-red-dark: hsl(360deg 58% 45% / 100%); /* used in Portal and APP */
  /* Typography
   If Barlow is unavailable the font stack will fallback to system fonts:
   Corbel (Microsoft Windows), Apple SD Gothic Neo (macOS, iOS), Roboto (Android).
  */
  --font-body: "Barlow", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-s: 0.8125rem;
  /* Logo size Vars */
  --logo-width: 91px;
  --logo-height: 72px;
}

/* Vendors */
.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.glide * {
  box-sizing: inherit;
}
.glide__track {
  overflow: hidden;
}
.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.glide__slides--dragging {
  user-select: none;
}
.glide__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide__bullets {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide--rtl {
  direction: rtl;
}

.autocomplete__wrapper {
  position: relative;
}

.autocomplete__hint,
.autocomplete__input {
  appearance: none;
  border: 2px solid #0b0c0c;
  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
  box-sizing: border-box;
  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
  line-height: 1.25;
  height: 2.5rem;
  width: 100%;
}

.autocomplete__input {
  background-color: transparent;
  position: relative;
}

.autocomplete__hint {
  color: #505a5f;
  position: absolute;
}

.autocomplete__input--default {
  padding: 5px;
}

.autocomplete__input--focused {
  outline: 3px solid #fd0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px;
}

.autocomplete__input--show-all-values {
  padding: 5px 35px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
  cursor: pointer;
}

.autocomplete__dropdown-arrow-down {
  z-index: -1;
  display: inline-block;
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  top: 10px;
}

.autocomplete__menu {
  background-color: #ffffff;
  border: 2px solid #0b0c0c;
  border-top: 0;
  color: #0b0c0c;
  margin: 0;
  max-height: 342px;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
  width: calc(100% - 4px);
}

.autocomplete__menu--visible {
  display: block;
}

.autocomplete__menu--hidden {
  display: none;
}

.autocomplete__menu--overlay {
  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
  left: 0;
  position: absolute;
  top: 100%;
  z-index: 100;
}

.autocomplete__menu--inline {
  position: relative;
}

.autocomplete__option {
  border-bottom: solid #b1b4b6;
  border-width: 1px 0;
  cursor: pointer;
  display: block;
  position: relative;
}

.autocomplete__option > * {
  pointer-events: none;
}

.autocomplete__option:first-of-type {
  border-top-width: 0;
}

.autocomplete__option:last-of-type {
  border-bottom-width: 0;
}

.autocomplete__option--odd {
  background-color: #f3f2f1;
}

.autocomplete__option--focused,
.autocomplete__option:hover {
  background-color: #1d70b8;
  border-color: #1d70b8;
  color: white;
  outline: none;
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .autocomplete__menu {
    border-color: FieldText;
  }
  .autocomplete__option {
    background-color: Field;
    color: FieldText;
  }
  .autocomplete__option--focused,
  .autocomplete__option:hover {
    forced-color-adjust: none; /* prevent backplate from obscuring text */
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
    background-color: SelectedItem;
    border-color: SelectedItem;
    color: SelectedItemText;
    outline-color: SelectedItemText;
  }
}
.autocomplete__option--no-results {
  background-color: #f3f2f1;
  color: #505a5f;
  cursor: not-allowed;
}

.autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
  font-size: 1rem;
  font-weight: 400;
}

.autocomplete__hint,
.autocomplete__option {
  padding: 5px;
}

@media (min-width: 641px) {
  .autocomplete__hint,
  .autocomplete__input,
  .autocomplete__option {
    font-size: 1.1875rem;
    line-height: 1.3157894737;
  }
}
/* Vendor extends */
.glide {
  display: flex;
  flex-wrap: wrap;
}

.glide__slideCount {
  margin: 0 0.5em;
}

.glide__arrows {
  height: 1.5rem;
  margin: -1.625rem 0 0 auto;
}
.glide__arrows--below {
  order: 1;
  margin: 0.5rem 0 0;
}

.glide__bullets {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.125rem;
  text-align: center;
}

.glide__bullet {
  font-size: 0.5rem;
  padding: 0 0.5rem;
  opacity: 0.24;
}
.glide__bullet--active, .glide__bullet:focus-visible {
  opacity: 1;
}
.glide__bullet:active {
  outline: none;
}
@media (hover) {
  .glide__bullet:hover {
    opacity: 0.48;
    cursor: pointer;
  }
}

.glide__track {
  transition: height 0.2s ease-in-out;
}

.glide__slides,
.glide__slide {
  margin-top: 0;
}

.glide__slide {
  margin-top: 0;
}
.glide__slide .fa-angle-right {
  vertical-align: middle;
  top: -0.0625rem;
}

.glide__slide ul {
  list-style-type: disc;
}

.glide--arrowsBeside {
  margin: 0 auto;
  width: calc(100% - 2 * 1.75rem);
}
.glide--arrowsBeside .glide__arrows {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
}
.glide--arrowsBeside .glide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.glide--arrowsBeside[data-bullets=true] .glide__arrow {
  margin-top: -0.8125rem;
}
@media (min-width: 50em) {
  .glide--arrowsBeside {
    width: calc(100% - 4rem);
  }
}
@media (min-width: 90em) {
  .glide--arrowsBeside {
    margin: 0 auto 0 0;
  }
}

.glide--arrowsBeside .glide__arrow--left {
  left: -1.75rem;
}
@media (min-width: 65em) {
  .glide--arrowsBeside .glide__arrow--left {
    left: -2rem;
  }
}
@media (min-width: 90em) {
  .glide--arrowsBeside .glide__arrow--left {
    left: -2.25rem;
  }
}

.glide--arrowsBeside .glide__arrow--right {
  right: -1.75rem;
}
@media (min-width: 65em) {
  .glide--arrowsBeside .glide__arrow--right {
    right: -2rem;
  }
}
@media (min-width: 90em) {
  .glide--arrowsBeside .glide__arrow--right {
    right: -2.25rem;
  }
}

.glide--whyECU {
  margin: 0 auto;
  max-width: calc(88rem - 9rem);
  /* stylelint-disable */
  /* stylelint-enable */
}
.glide--whyECU .glide__arrows {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
}
.glide--whyECU .glide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.glide--whyECU[data-bullets=true] .glide__arrow {
  margin-top: -0.8125rem;
}

.glide--whyECU .glide__bullets {
  margin-top: 1.5rem;
}
@media (min-width: 65em) {
  .glide--whyECU .glide__bullets {
    margin-top: 2.5rem;
  }
}

.glide--whyECU .glide__arrow--left {
  left: -1.75rem;
}
@media (min-width: 65em) {
  .glide--whyECU .glide__arrow--left {
    left: -3rem;
  }
}
@media (min-width: 90em) {
  .glide--whyECU .glide__arrow--left {
    left: -4.5rem;
  }
}

.glide--whyECU .glide__arrow--right {
  right: -1.75rem;
}
@media (min-width: 65em) {
  .glide--whyECU .glide__arrow--right {
    right: -3rem;
  }
}
@media (min-width: 90em) {
  .glide--whyECU .glide__arrow--right {
    right: -4.5rem;
  }
}

.glide--events {
  max-width: 74rem;
  margin: 3rem auto 0;
}
.glide--events .glide__slide {
  height: auto;
}
.glide--events .glide__bullets {
  margin-top: 2.25rem;
}
.glide--events.glide--arrowsBeside[data-bullets=true] .glide__arrow {
  margin-top: -1.35rem;
}

.glide--event {
  max-width: 42rem;
  margin: 3rem auto 0;
}

/* academic-progression, portal-2021 dependency */
.toastify {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: fixed;
  bottom: 1rem;
  left: calc(clamp(4vw, 50vw - 44rem, 50vw - 44rem) - 0.5rem);
  max-inline-size: fit-content;
  block-size: auto;
  margin-inline-start: auto;
  border-radius: 0.1875rem;
  padding: 0.3125rem 1rem;
  background: var(--color-black-600);
  color: var(--color-white);
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.1);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.15, 0.67, 0.75, 1);
  cursor: pointer;
  text-decoration: none;
  z-index: 25;
}

.toastify.on {
  opacity: 1;
}

.tippy-tooltip, .tippy-box {
  border-radius: 0.1875rem;
  background-color: var(--color-black);
  padding: 1.5rem;
  color: var(--color-white);
  font-size: 1rem;
}

.tippy-content > *:first-child {
  margin-top: 0;
}

/* academic-progression, portal-2021 dependency */
.modal__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  position: relative;
  max-width: 500px;
  max-height: 100vh;
  overflow-y: auto;
  border-radius: var(--border-radius-s);
  background-color: var(--color-black-800);
  padding: 1.5rem;
  color: var(--color-white);
}
.modal__container h3 {
  margin-top: 0;
}
.modal__container :focus-visible {
  outline-color: currentcolor;
}

.modal__container--image {
  max-width: 90%;
  padding: 0;
}

.modal__container--dataRecord {
  max-width: 90%;
  min-width: 50vw;
  padding: 1.5rem 1rem 1rem;
}

.modal__container--dataRecord h4 {
  font-size: 1.25rem;
}

.modal__header {
  padding-right: 2rem;
}

.modal__caption {
  padding: 1rem;
}

.modal__close {
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  z-index: 1;
}
@media (min-width: 37.5em) {
  .modal__close {
    right: 1.5rem;
  }
}

@keyframes mm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mm-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mm-slide-in {
  from {
    transform: translateY(15%), translate3d(0, 0, 0);
  } /* 1 */
  to {
    transform: translateY(0), translate3d(0, 0, 0);
  } /* 1 */
}
@keyframes mm-slide-out {
  from {
    transform: translateY(0), translate3d(0, 0, 0);
  } /* 1 */
  to {
    transform: translateY(-10%), translate3d(0, 0, 0);
  } /* 1 */
}
.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal .modal__container,
.modal .modal__overlay {
  will-change: transform;
  z-index: 10;
}

.modal[aria-hidden=false] .modal__overlay {
  animation: mm-fade-in 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal[aria-hidden=false] .modal__container {
  animation: mm-slide-in 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.modal[aria-hidden=true] .modal__overlay {
  animation: mm-fade-out 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal[aria-hidden=true] .modal__container {
  animation: mm-slide-out 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* academic-progression, portal-2021 dependency */
.g-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.125rem;
}
.ecu-forms .g-recaptcha, .featureCard .g-recaptcha {
  justify-content: flex-start;
}

/* academic-progression, portal-2021 dependency */
.st-custom-button {
  cursor: pointer;
}

.autocomplete__wrapper {
  flex-grow: 1;
}

.autocomplete__hint, .autocomplete__input {
  border: 0;
  background-color: var(--color-black-800);
  border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  padding: 1rem 1.3125rem;
  line-height: 1.5rem;
  width: 100% !important;
  height: 100%;
}

.autocomplete__input:focus, .autocomplete__input--focused {
  outline: 0;
  box-shadow: none;
}

.autocomplete__hint, .autocomplete__option {
  display: flex;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 0;
  align-items: center;
  text-align: left;
}

.autocomplete__option--odd {
  background-color: transparent;
}

.autocomplete__option--focused, .autocomplete__option:hover {
  background-color: var(--color-white);
  color: var(--color-black-800);
  border-radius: var(--border-radius-s);
}

.autocomplete__title {
  text-decoration: underline;
}

.autocomplete__category {
  margin-left: auto !important;
  color: var(--color-black-300);
  width: 20% !important;
  min-width: 10ch;
  text-align: right;
  display: none;
}
@media (min-width: 37.5em) {
  .autocomplete__category {
    display: block;
  }
}

.autocomplete__option--focused .autocomplete__category, .autocomplete__option:hover .autocomplete__category {
  color: var(--color-black-600);
}

.autocomplete__menu--overlay {
  top: calc(100% + 0.625rem);
  width: calc(100% + 3.5rem);
  right: 0;
  border-radius: var(--border-radius-s);
  box-shadow: none;
  border: 0;
  padding: 1.5rem 1.25rem;
  background-color: var(--color-black-700);
  color: var(--color-white);
}
.heroCourseSearch__form .autocomplete__menu--overlay {
  border-radius: 0.1875rem;
  background-image: linear-gradient(to bottom, var(--color-black-500), var(--color-black-500) 40%, var(--color-black-600));
  padding: 0.5rem;
  box-shadow: 0 44px 44px -24px hsla(0, 0%, 0%, 0.3);
}

/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
:where(nav li)::before {
  content: "​";
  float: left;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where([type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy=true i]) {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
:where([aria-controls]) {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */
:where(button, input, select, textarea) {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(select) {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%274%27%3E%3Cpath d=%27M4 0h6L7 4%27/%3E%3C/svg%3E") no-repeat right center/1em;
  border-radius: 0;
  padding-right: 1em;
}

/**
 * Don't show the arrow for multiple choice selects
 */
:where(select[multiple]) {
  background-image: none;
}

/**
 * Remove the border and padding in all browsers (opinionated).
 */
:where([type=color i], [type=range i]) {
  border-width: 0;
  padding: 0;
}

/**
 * Use the default user interface font in all browsers (opinionated).
 */
html {
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */
code,
kbd,
samp,
pre {
  font-family: ui-monospace, "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

button {
  padding: 0;
  border: 0;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
}

:where(nav li)::before {
  position: absolute;
}

/**
 * Override sanitize weight for bold to account for new Lexend weights
 */
:where(b, strong) {
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}

:focus-visible {
  outline: 0.25rem solid var(--color-primary);
  outline-offset: 0.25rem;
}

body {
  background-color: var(--color-ecru);
}

img {
  max-width: 100%;
  height: auto;
}

.videoResponsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
  background: var(--color-black);
}
.videoResponsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}
.videoResponsive img {
  object-fit: cover;
  display: block;
  inset: 0;
  margin: auto !important;
  max-width: 100%;
  width: 100%;
  position: absolute;
  border: 0;
  height: auto;
  cursor: pointer;
  transition: 0.4s all;
}
.videoResponsive img:hover {
  filter: brightness(75%);
}
.videoResponsive .play {
  height: 4.5rem;
  width: 4.5rem;
  left: 50%;
  top: 50%;
  margin-left: -2.25rem;
  margin-top: -2.25rem;
  position: absolute;
  background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"49\" fill=\"%2326b298\"/><path fill=\"%23fff\" d=\"M74.1 50.2 34.9 73.7V26.6z\"/></svg>");
  cursor: pointer;
}

body {
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}

a {
  color: currentcolor;
}

p {
  margin: 0.5rem 0 0 0;
  width: auto;
  max-width: 80ch;
}

ul, ol {
  padding-left: 1.5em;
  margin: 0.25rem 0 0 0;
}

li {
  padding-left: 0;
  margin: 0.5rem 0 0;
}

small {
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}

h1 {
  font-size: 2.75rem;
  line-height: 1.27em;
  margin: 0;
}

h2, h3, h4 {
  margin: 1.375rem 0 0;
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}

h2 {
  font-size: 1.625rem;
  line-height: 1.25em;
}

h3 {
  font-size: 23.04px;
  line-height: 29.95px;
}

h4 {
  font-size: 1rem;
  line-height: 1.5em;
}

/* 
Campaign heading styles, previously Integral CF Bold, switched to Barlow for Feb 2025
Used in Footer (World Ready, APP, Portal)
*/
.base__strongHeading {
  position: relative;
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}
.base__strongHeading--corporate {
  color: var(--color-teal-700); /* MUS category headings, contrast 5.50 on white, 5.02 on Ecru */
}

.base__strongHeading--xl {
  margin: 0;
  font-size: 1.7812rem;
  line-height: 1.1228em;
}
@media (min-width: 37.5em) {
  .base__strongHeading--xl {
    font-size: 2.375rem;
    line-height: 1.0526em;
  }
}
@media (min-width: 65em) {
  .base__strongHeading--xl {
    font-size: 3.25rem;
    line-height: 1em;
  }
}

.base__strongHeading--large {
  margin: 0;
  font-size: 1.7812rem;
  line-height: 1.1228em;
}
@media (min-width: 65em) {
  .base__strongHeading--large {
    font-size: 2.8125rem;
    line-height: 1.0666em;
  }
}

.base__strongHeading--medium {
  margin: 1.375rem 0 0 0;
  font-size: 1.25rem;
  line-height: 1.2em;
}
@media (min-width: 65em) {
  .base__strongHeading--medium {
    font-size: 1.7812rem;
    line-height: 1.1228em;
  }
}

.base__strongHeading--small {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.125em;
}

.base__heading {
  position: relative;
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}
.base__heading--corporate {
  color: var(--color-teal-700); /* MUS, contrast 5.50 on white, 5.02 on Ecru */
}

.base__heading--large,
.base__heading--largeMobile {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.1428em;
  letter-spacing: 0;
}

@media (min-width: 65em) {
  .base__heading--large {
    font-size: 2.5rem;
    line-height: 1.2em;
    letter-spacing: 0;
  }
}

.base__heading--medium,
.base__heading--mediumMobile {
  margin: 1.375rem 0 0;
  font-size: 1.25rem;
  line-height: 1.2em;
  letter-spacing: 0;
}

@media (min-width: 65em) {
  .base__heading--medium {
    font-size: 23.04px;
    line-height: 29.95px;
    letter-spacing: 0;
  }
}

.base__heading--small {
  margin: 1.375rem 0 0;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
}
@media (min-width: 65em) {
  .base__heading--small {
    font-size: 1.125rem;
    line-height: 1.3333em;
    letter-spacing: 0;
  }
}

.base__heading--xs {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
}

.base__heading--xxs {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.base__heading--marginTop {
  margin-top: 1.875rem;
}

.base__ul {
  padding-left: 1.75em;
  list-style-type: none;
  max-width: calc(80ch - 2em);
}
.base__ul li {
  position: relative;
}
.base__ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.375em;
  left: -1.5em;
  height: 0.85em;
  width: 0.85em;
  background-image: url("https://www.ecu.edu.au/__data/assets/file/0004/814540/icon__chevronRight.svg");
}
.base__ul--circle li::before {
  background-image: url("https://www.ecu.edu.au/__data/assets/file/0005/814541/icon__checkCircle.svg");
}
.studySection--blackGradient .base__ul li::before, .studySection--dark .base__ul li::before {
  filter: invert(1);
}

.base__listColumn {
  max-width: 100%;
}
.base__listColumn li {
  break-inside: avoid;
}
@media (min-width: 37.5em) {
  .base__listColumn {
    column-count: 2;
    column-gap: 3rem;
  }
}

.base__link {
  text-decoration: underline;
}

.base__link--bold {
  font-weight: 500;
}

.base__link--withIcon {
  text-decoration: none;
}
.base__link--withIcon span {
  text-decoration: underline;
}

.base__linkHighlight a {
  color: hsl(19, 100%, 34%);
}

.base__linkHighlight--darkUI a {
  color: hsl(19, 100%, 50%);
}

.base__font--blueberry {
  font-weight: 500;
  max-width: 42rem;
  font-size: 0.8331rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}

.base__font--strawberry {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.base__font--plum {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1.44rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.base__font--apple {
  font-weight: 500;
  max-width: 42rem;
  font-size: 2.0625rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2121;
  letter-spacing: 0;
}

.base__font--grapefruit {
  font-weight: 500;
  max-width: 42rem;
  font-size: 2.0625rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2121;
  letter-spacing: 0;
}
@media (min-width: 37.5em) {
  .base__font--grapefruit {
    font-size: 2.625rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.1428;
    letter-spacing: 0;
  }
}

.base__font--watermelon {
  font-weight: 500;
  max-width: 42rem;
  font-size: 2.0625rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.2121;
  letter-spacing: 0;
}
@media (min-width: 37.5em) {
  .base__font--watermelon {
    font-size: 2.9863rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
}

.base__articleFont {
  font-size: 1.125rem;
  line-height: 1.555;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.base__bodyFont {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 400;
}

.base__bodyFont--bold {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}

.base__bodyFont--small {
  font-size: var(--font-s);
  line-height: 1.5384;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.56em;
}

.base__font--research {
  color: var(--color-primary); /* World Class, used on black/ dark graident card backgrounds */
}

.base__font--bold {
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}

.siteHeader {
  padding-right: 4vw;
  padding-left: 4vw;
  background-color: hsl(40, 10%, 92%);
}
@media (min-width: 90em) {
  .siteHeader {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.siteHeader--currentStudents {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space);
}
.header--hero .siteHeader {
  background-color: transparent;
  color: var(--color-white);
}
@media print {
  .siteHeader {
    display: none;
  }
}

.siteHeader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.siteHeader__logo {
  height: var(--logo-height);
  width: var(--logo-width);
  align-self: flex-start;
  margin-right: auto;
  z-index: 4;
}
.siteHeader__logo:focus-visible {
  outline: none;
}
.siteHeader__logo img {
  position: relative;
  top: 0;
  left: 0;
  transition: width 0.5s cubic-bezier(0.15, 0.67, 0.75, 1), height 0.5s cubic-bezier(0.15, 0.67, 0.75, 1), max-width 0.5s cubic-bezier(0.15, 0.67, 0.75, 1), max-height 0.5s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.siteHeader__logo:focus-visible img {
  outline: 0.25rem solid var(--color-primary);
  outline-offset: 0.25rem;
}

.siteHeader__buttons {
  display: flex;
  align-items: center;
}

.siteHeader__iconWrapper {
  block-size: 2.75rem;
  inline-size: 2.75rem;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
  text-decoration: none;
  margin-right: 0.75rem;
}
.siteHeader__iconWrapper:last-of-type {
  margin-right: 0;
}
.siteHeader__iconWrapper .fa-layers {
  font-size: 1.25rem;
  vertical-align: 0;
}
@media (min-width: 22em) {
  .siteHeader__iconWrapper {
    margin-right: 1.25rem;
  }
}

@media (min-width: 64.0625em) {
  .header--myUniStart .siteHeader__iconWrapper {
    display: none;
  }
}

.siteHeader__iconText {
  margin-top: 0.625rem;
  font-size: var(--font-s);
  line-height: 1;
}

.button.siteHeader__button {
  display: none;
  margin: 0 1.25rem 0 0;
}
@media (min-width: 37.5em) {
  .button.siteHeader__button {
    display: inline-block;
  }
}

.header--hero .button--outline.siteHeader__button {
  border-color: var(--color-black-400);
}

.header--scrolled .button.siteHeader__enquireButton {
  display: inline-block;
}

@media (min-width: 37.5em) {
  .button.siteHeader__button:last-of-type {
    margin-right: 2.5rem;
  }
}

.siteHeader__inlineNavigation {
  display: none;
  transition: opacity 0.5s cubic-bezier(0.15, 0.67, 0.75, 1);
}
@media (min-width: 64.0625em) {
  .siteHeader__inlineNavigation {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
.siteHeader__inlineNavigation--hidden {
  opacity: 0;
  visibility: hidden;
}
.siteHeader__inlineNavigation a {
  padding: 20px 0;
  text-decoration: none;
}
.header--hero .siteHeader__inlineNavigation {
  font-weight: 500;
  letter-spacing: 0;
}

.siteHeader__inlineNavigationItem {
  display: inline-block;
  margin: 0 1.0625rem 0 0;
}
.siteHeader__inlineNavigationItem:last-of-type {
  margin-right: 2.25rem;
}
@media (min-width: 90em) {
  .siteHeader__inlineNavigationItem {
    margin-right: 2.5rem;
  }
}
.siteHeader__inlineNavigationItem--active {
  border-bottom: 0.125rem solid var(--color-primary);
  font-weight: 500;
  letter-spacing: 0;
}

.siteHeader__hamburger {
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
}
.siteHeader__hamburger .fa-bars {
  opacity: 1;
  transition: 0.4s opacity ease-in-out;
}
.siteHeader__hamburger .fa-times,
.siteHeader__hamburger .fa-xmark {
  opacity: 0;
  transition: 0.4s opacity ease-in-out;
}

.siteHeader__hamburger--active .fa-bars {
  opacity: 0;
}
.siteHeader__hamburger--active .fa-times,
.siteHeader__hamburger--active .fa-xmark {
  opacity: 1;
}

.siteHeader__error {
  display: none;
}

.sitePreHeader {
  padding-right: 4vw;
  padding-left: 4vw;
  height: 2.9375rem;
  background-color: var(--color-black-800);
  color: hsl(40, 10%, 92%);
  transition: height 0.4s cubic-bezier(0.15, 0.67, 0.75, 1), opacity 0.3s cubic-bezier(0.15, 0.67, 0.75, 0.4), visibility 0.3s cubic-bezier(0.15, 0.67, 0.75, 0.4);
}
@media (min-width: 90em) {
  .sitePreHeader {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.header--hero .sitePreHeader {
  background-color: transparent;
  color: var(--color-white);
}
@media (min-width: 37.5em) {
  .sitePreHeader {
    height: 2.3125rem;
  }
}

.sitePreHeader__links {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 -0.5rem 0 0;
  padding: 0;
  font-size: 0.875rem;
}
.sitePreHeader__links .svg-inline--fa {
  top: -0.0625em;
  margin-left: 0.25rem;
  font-size: 1.125rem;
}
.sitePreHeader__links :focus-visible {
  outline-offset: -0.25rem;
}

.sitePreHeader__links li {
  display: none;
  align-items: center;
  margin: 0;
}
.sitePreHeader__links li:last-child {
  display: flex;
}
@media (min-width: 37.5em) {
  .sitePreHeader__links li {
    display: flex;
  }
}

.sitePreHeader__links a {
  display: flex;
  align-items: center;
  padding: 0.875rem 0.5rem 0.75rem;
  text-decoration: none;
}
@media (min-width: 37.5em) {
  .sitePreHeader__links a {
    padding: 0.5625rem 0.5rem 0.4375rem;
  }
}

.sitePreHeader__link--tabletUp {
  display: none;
}
@media (min-width: 37.5em) {
  .sitePreHeader__link--tabletUp {
    display: flex;
  }
}

.sitePreHeader__separator {
  height: 2.3125rem;
  margin: 0 0.5rem;
  padding: 0.5rem 0;
  color: var(--color-black-600);
  transition: height 0.3s cubic-bezier(0.15, 0.67, 0.75, 1), opacity 0.2s cubic-bezier(0.15, 0.67, 0.75, 0.4), visibility 0.2s cubic-bezier(0.15, 0.67, 0.75, 0.4), color 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
}
.header:not(.header--hero) {
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.1);
}

.header--scrolled {
  background-color: var(--color-black);
  /* stylelint-disable */
  /* stylelint-enable */
}
.header--scrolled.header--hero {
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, 0.1);
  transition: box-shadow 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.header--scrolled .siteHeader--currentStudents {
  padding-block: 0;
  transition: padding 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.header--scrolled .sitePreHeader {
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.header--scrolled .sitePreHeader__separator {
  height: 0;
  opacity: 0;
  visibility: hidden;
  color: transparent;
}
.header--scrolled .siteHeader__logo img {
  inline-size: var(--logo-width);
  block-size: var(--logo-height);
  padding: var(--space-s);
}
.header--scrolled + .siteNav {
  top: 4.5rem;
}

.formBody {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 42rem;
}
.formBody h2, .formBody p {
  flex-basis: 100%;
}
.formBody h2 {
  text-align: center;
}

.formItem {
  margin: 0 0 1.125rem;
  width: 100%;
}

@media (min-width: 37.5em) {
  .formItem--half {
    width: calc(50% - 0.75rem);
  }
}

@media (min-width: 65em) {
  .formItem--inline {
    width: calc(50% - 1rem);
  }
}

.form__input {
  display: inherit;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-white);
  color: hsl(0, 0%, 5%);
  border: 0.25rem solid var(--color-white);
  font-weight: 500;
}
.form__input[type=checkbox] {
  padding: 0;
}
.form__input:focus-visible {
  outline-offset: -0.25rem;
}
.form__input.error {
  border: 0.25rem solid hsl(19, 100%, 34%);
}

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

.form__error {
  text-align: left;
  font-weight: 500;
  color: hsl(19, 100%, 34%);
}

.form__privacy {
  text-align: center;
  margin-bottom: 1.5rem;
}
.form__privacy h1, .form__privacy h2, .form__privacy h3, .form__privacy h4 {
  margin-left: auto;
  margin-right: auto;
}

.selectField {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: hsl(40, 10%, 94%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27292.4%27 height=%27292.4%27%3E%3Cpath fill=%27%230c0c0c%27 d=%27M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, repeat;
  background-position: right 1.25rem top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  font-weight: 500;
}
.selectField::-ms-expand {
  display: none;
}
.selectField option {
  font-weight: 400;
}
.selectField--bordered {
  border: 0.125rem solid hsl(208, 12%, 53%);
  background-color: transparent;
  margin: 0;
  padding: 0.5rem 1rem;
  width: 65%;
}

.inputRadio {
  position: absolute;
  top: 0.5rem;
  opacity: 0;
  pointer-events: none;
}
.inputRadio + .inputRadio__label {
  display: block;
  position: relative;
  margin: 0.5rem 0 0;
  padding-left: 2rem;
  transition: all 0.2s ease-in;
}
.inputRadio + .inputRadio__label::before,
.inputRadio + .inputRadio__label::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25em;
  width: 1em;
  height: 1em;
  z-index: 0;
  transition: all 0.2s ease-in;
  border-radius: 50%;
}
.inputRadio + .inputRadio__label::before {
  border-color: var(--color-black);
  border-style: solid;
  border-width: 0.125rem;
}
.inputRadio + .inputRadio__label::after {
  transform: scale(0);
}
.inputRadio:checked + .inputRadio__label::after {
  background-color: var(--color-black);
  transform: scale(0.9);
}
.inputRadio:focus-visible + .inputRadio__label {
  outline: 0.25rem solid hsl(19, 100%, 50%);
  outline-offset: 0.25rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  margin: 1.125rem 0 0;
}
.checkbox input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
}
.checkbox input[type=checkbox]:focus-visible ~ label {
  outline: 0.25rem solid hsl(19, 100%, 50%);
  outline-offset: 0.25rem;
}
.studySection--gradient .checkbox input[type=checkbox]:focus-visible ~ label {
  outline-color: var(--color-black);
}
.checkbox.checkbox--hide {
  display: none;
}
.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 1.2rem;
  width: 1.2rem;
  border-color: var(--color-white);
  background-color: var(--color-black);
  border-style: solid;
  border-width: 0.0625rem;
  left: 0;
  top: 0.0625rem;
}
.checkbox label::after {
  content: none;
  display: inline-block;
  position: absolute;
  left: 0.25rem;
  top: 0.375rem;
  height: 0.375rem;
  width: 0.75rem;
  border-color: var(--color-white);
  border-style: solid;
  border-width: 0 0 0.125rem 0.125rem;
  transform: rotate(-45deg);
}
.checkbox--outline label::before {
  border-color: var(--color-black-400);
  background-color: var(--color-white);
  border-radius: 0.1875rem;
}
.checkbox--outline label::after {
  border-color: var(--color-black);
}
.checkbox input[type=checkbox] + label::after {
  transition: all 0.2s ease-in;
}
.checkbox input[type=checkbox]:checked + label::after {
  content: "";
  transition: all 0.2s ease-in;
}
.checkbox--outline input[type=checkbox]:checked + label::before {
  background-color: var(--color-black-400);
}
.checkbox--outline input[type=checkbox]:checked + label::after {
  border-color: var(--color-white);
}

/* Global Footer
 * ========================================================================== */
.siteFooter {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 2;
  background-color: var(--color-black);
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}
.siteFooter ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.siteFooter li {
  display: flex;
}
.siteFooter h2 {
  margin: 0 0 1.5rem;
}
@media print {
  .siteFooter {
    display: none;
  }
}

.siteFooter__inner {
  padding-right: 4vw;
  padding-left: 4vw;
  display: grid;
  grid-template-areas: "contact" "connect" "essential";
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 90em) {
  .siteFooter__inner {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media (min-width: 37.5em) {
  .siteFooter__inner {
    grid-template-areas: "contact contact" "connect essential";
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}
@media (min-width: 50em) {
  .siteFooter__inner {
    grid-template-areas: "contact contact" "connect essential";
    grid-template-rows: auto auto;
    grid-template-columns: 28rem 1fr;
    gap: 0;
  }
}
@media (min-width: 65em) {
  .siteFooter__inner {
    grid-template-areas: "contact connect" "contact essential";
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 20.6875rem;
    gap: 0 2rem;
    padding-top: 5.75rem;
    padding-bottom: 4.5rem;
  }
}

.siteFooter__contact {
  grid-area: contact;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.siteFooter__contact h3 {
  margin: 0 0 1.1875rem;
}
.siteFooter__contact li {
  margin-bottom: 1rem;
}
.siteFooter__contact .svg-inline--fa {
  margin-right: 1rem;
}

.siteFooter__contactColumn {
  flex-basis: 100%;
  margin-bottom: 2rem;
}
@media (min-width: 37.5em) {
  .siteFooter__contactColumn {
    flex: 1 1 50%;
  }
}
@media (min-width: 50em) {
  .siteFooter__contactColumn {
    flex: 1 1 calc(33.3333333333% - 1.5rem);
  }
}

@media (min-width: 50em) {
  .siteFooter__contactColumn:nth-of-type(2),
  .siteFooter__contactColumn:nth-of-type(3) {
    max-width: 12rem;
    margin-right: 2rem;
  }
}
@media (min-width: 65em) {
  .siteFooter__contactColumn:nth-of-type(2),
  .siteFooter__contactColumn:nth-of-type(3) {
    max-width: 15.5rem;
  }
}

.siteFooter__contact br {
  display: none;
}
@media (min-width: 65em) {
  .siteFooter__contact br {
    display: block;
  }
}

.siteFooter__contactColumn--openingTimes h3 {
  margin: 0 0 0.5rem;
}
.siteFooter__contactColumn--openingTimes p {
  margin: 0 0 0.875rem;
}
.siteFooter__contactColumn--openingTimes .svg-inline--fa {
  top: 0.0625rem;
  margin-right: 0.25rem;
}
@media (min-width: 37.5em) {
  .siteFooter__contactColumn--openingTimes {
    flex: 3 3 100%;
    margin-bottom: 2.6875rem;
  }
}

.siteFooter__connect {
  grid-area: connect;
  margin-bottom: 2rem;
}
.siteFooter__connect li {
  display: inline-block;
  margin: 0 1rem 0 0;
}
.siteFooter__connect a {
  display: block;
}
@media (min-width: 65em) {
  .siteFooter__connect {
    margin-bottom: 7rem;
  }
}

.siteFooter__essential {
  grid-area: essential;
}

.siteFooter__additionalLinks {
  padding-right: 4vw;
  padding-left: 4vw;
  background-color: var(--color-black);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
@media (min-width: 90em) {
  .siteFooter__additionalLinks {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.siteFooter__additionalLinks ul {
  margin: 0 auto;
}
.siteFooter__additionalLinks li {
  display: inline-block;
  margin: 0 1rem 0 0;
  padding: 0;
}

.siteFooter__recognition {
  padding-right: 4vw;
  padding-left: 4vw;
  background-color: var(--color-black);
  padding-top: 0;
  padding-bottom: 0;
}
@media (min-width: 90em) {
  .siteFooter__recognition {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.siteFooter__recognition .glide__slide {
  justify-content: center;
}
@media (min-width: 65em) {
  .siteFooter__recognition {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

.bannerSection {
  padding-right: 4vw;
  padding-left: 4vw;
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}
@media (min-width: 90em) {
  .bannerSection {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.bannerSection p {
  max-width: 46ch;
  margin: 0.5rem auto 0;
}
.bannerSection .base__font--strawberry,
.bannerSection .base__font--plum,
.bannerSection .base__font--grapefruit {
  margin-right: auto;
  margin-left: auto;
}
.bannerSection .cardList {
  text-align: left;
}
.bannerSection .categoryPills {
  justify-content: center;
  margin-bottom: 1rem;
}
.bannerSection .fa-angle-right {
  color: hsl(19, 100%, 42%);
}
.bannerSection .button:last-of-type {
  margin-right: 0;
}
.bannerSection--corporate p {
  margin: 0 auto 1rem;
}
.bannerSection--light {
  background-color: var(--color-white);
}
.bannerSection--dark {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient(145deg, hsl(210, 15%, 21%) -19.75%, hsl(208, 38%, 9%) 87%);
  color: var(--color-white);
}
.bannerSection--darkY {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient(180deg, hsl(208, 32%, 19%) 0%, hsl(208, 33%, 15%) 100%);
  color: var(--color-white);
}
.bannerSection--dark .card {
  color: var(--color-black);
}
@media (min-width: 37.5em) {
  .bannerSection {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media (min-width: 65em) {
  .bannerSection {
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
  }
}

.bannerSection > p {
  max-width: 67ch;
  padding: 0 1.75rem;
}
@media (min-width: 37.5em) {
  .bannerSection > p {
    padding: 0 2rem;
  }
}
@media (min-width: 50em) {
  .bannerSection > p {
    padding: 0;
  }
}

@supports (display: grid) {
  @media (min-width: 65em) {
    .futureStudentsWrapper .bannerSection {
      padding-right: 30vw;
    }
  }
  @media (min-width: 90em) {
    .futureStudentsWrapper .bannerSection {
      padding-left: calc(50vw - 36.5rem);
      padding-right: calc(50vw - 21.5em);
      padding-right: clamp(30vw, calc(50vw - 21.5em), calc(50vw - 21.5em));
    }
  }
}

@media (min-width: 50em) {
  .bannerSection--overlap {
    margin: -1rem 0;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
  }
}

.bannerSection--overlapTop {
  z-index: 1;
  padding-top: 0;
}

.bannerSection--overlapBottom {
  padding-bottom: 0;
}

@media (min-width: 50em) {
  .bannerSection--overlapBottom + .bannerSection {
    padding-top: calc(2 * 4rem);
  }
}
@media (min-width: 65em) {
  .bannerSection--overlapBottom + .bannerSection {
    padding-top: calc(4rem + 4.75rem);
  }
}

@media (min-width: 50em) {
  .bannerSection--overlapBottom + .testimonials {
    padding-top: calc(4 * 4rem);
    padding-top: calc(4 * 4rem);
  }
}
@media (min-width: 65em) {
  .bannerSection--overlapBottom + .testimonials {
    padding-top: calc(4 * 4.75rem);
    padding-top: calc(4 * 4.75rem);
  }
}
@media (min-width: 90em) {
  .bannerSection--overlapBottom + .testimonials {
    padding-top: calc(4 * 6rem);
    padding-top: calc(4 * 6rem);
  }
}

@media (min-width: 50em) {
  .bannerSection--overlapBottom + .whyECU {
    padding-top: calc(4rem * 2);
  }
}

.bannerSection--hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  padding: 0;
}

.contentWrapper {
  padding-right: 4vw;
  padding-left: 4vw;
  position: relative;
}
@media (min-width: 90em) {
  .contentWrapper {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}

.featurePanel + .contentWrapper {
  margin-top: 3rem;
}

.contentWrapper--article {
  margin-bottom: 3rem;
  border-radius: var(--border-radius-s);
  background-color: var(--color-white);
  padding: 2rem 4vw;
}
@media (min-width: 50em) {
  .contentWrapper--article {
    margin-right: 4vw;
    margin-left: 4vw;
  }
}
@media (min-width: 90em) {
  .contentWrapper--article {
    margin-right: calc(50vw - 44rem);
    margin-left: calc(50vw - 44rem);
    margin-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    margin-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media (min-width: 50em) {
  .contentWrapper--article {
    box-shadow: 0 44px 44px -24px hsla(0, 0%, 0%, 0.3);
  }
}
@media (min-width: 64.0625em) {
  .contentWrapper--article {
    margin-bottom: 6rem;
    padding: 4.5rem 3rem;
    padding: 4.5rem clamp(3rem, 4vw, 4.5rem);
  }
}

.contentWrapper--shiftUp {
  margin-top: -0.5rem;
}
@media (min-width: 50em) {
  .contentWrapper--shiftUp {
    margin-top: -4rem;
  }
}
@media (min-width: 64.0625em) {
  .contentWrapper--shiftUp {
    margin-top: -4.75rem;
  }
}
@media print {
  .contentWrapper--shiftUp {
    margin-top: 0;
  }
}

.contentWrapper--marginBottom {
  margin-bottom: 2.5rem;
}
@media (min-width: 37.5em) {
  .contentWrapper--marginBottom {
    margin-bottom: 4rem;
  }
}

.futureStudentsWrapper {
  position: relative;
}

@media (min-width: 50em) {
  .featurePanel + .futureStudentsWrapper {
    margin-top: 1.5rem;
  }
}
@supports (display: grid) {
  @media (min-width: 65em) {
    .featurePanel + .futureStudentsWrapper {
      margin-top: 0;
    }
  }
}

@supports (display: grid) {
  @media (min-width: 65em) {
    .futureStudentsWrapper {
      /* autoprefixer: off */
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: auto;
    }
    .futureStudentsWrapper .studySection {
      /* autoprefixer: ignore next */
      grid-column: 1/2;
    }
  }
}
.accordion {
  margin: 0.5rem 0 0;
  padding: 0;
  max-width: 50rem;
  list-style: none;
}
.accordion--wide {
  max-width: 60rem;
}
.myUniStart .accordion {
  max-width: 100%;
}
.accordion + * {
  margin-top: 3rem;
}

.accordion__item {
  border-bottom: 0.125rem solid hsl(208, 12%, 53%);
  margin: 0;
  padding: 0;
}
.accordion__item svg {
  block-size: 1em; /* force size of Font Awesome icon */
}
@media print {
  .accordion__item {
    break-inside: avoid !important;
  }
}

.accordion__title {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em 2rem 0.8em 0;
  max-width: 100%;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
  z-index: 1;
}
.accordion__title::before, .accordion__title::after {
  top: 50%;
  transform: translateY(-50%);
  content: "";
  display: block;
  position: absolute;
  background-color: currentcolor;
}
.accordion__title::before {
  right: 0.4375rem;
  width: 0.75rem;
  height: 0.125rem;
}
.accordion__title::after {
  right: 0.75rem;
  width: 0.125rem;
  height: 0.75rem;
  transition: height 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.accordion__title--open::after {
  transition: height 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
  height: 0;
}

.accordion__body {
  position: relative;
  height: 0;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.accordion__body ul {
  list-style-type: disc;
}
.accordion__body ul.base__ul {
  list-style-type: none;
}
.accordion__body * {
  height: 0;
  line-height: 0;
  transition: visibility 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.accordion__body table {
  display: none;
}
.accordion__body--open {
  visibility: visible;
  opacity: 1;
  height: auto;
  padding: 0 0 0.5rem;
  transition: all 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.accordion__body--open * {
  height: auto;
  line-height: inherit;
  transition: visibility 0.2s cubic-bezier(0.15, 0.67, 0.75, 1);
}
.accordion__body--open table {
  display: table;
}
.accordion__body--open h4 {
  position: relative;
  font-weight: 500;
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
}
.accordion__body:not(.accordion__body--open) * {
  margin: 0;
}

@media print {
  .accordion__body {
    border-bottom: 0.0625rem solid hsl(208, 12%, 53%);
    height: auto;
    visibility: visible;
    opacity: 1;
    padding: 1em 0;
  }
  .accordion__body * {
    height: auto;
    line-height: inherit;
  }
  .accordion__body table {
    display: table;
  }
  .accordion__item {
    border-bottom: 0;
  }
}
.accordion__count {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  width: 2rem;
  color: hsl(19, 100%, 34%);
  font-size: 0.875rem;
  line-height: 1;
  text-align: center;
}
.studySection--mushroomLight .accordion__count {
  color: hsl(19, 100%, 27%);
}

.accordion__count::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  background-color: hsl(40, 10%, 92%);
  border-radius: 100%;
  transform: translateY(-50%);
  z-index: -1;
  width: 2rem;
  height: 2rem;
}
.studySection--mushroomLight .accordion__count::after {
  background-color: hsl(42, 10%, 84%);
}

.articleNote, .articleImportant {
  border: 0;
  padding: 1.5rem 1.5rem 1px;
}
.articleNote p, .articleImportant p {
  font-size: 1.125rem;
  line-height: 1.555;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
@media (min-width: 37.5em) {
  .articleNote, .articleImportant {
    border: 0.125rem solid var(--color-ecru);
    border-radius: var(--border-radius-s);
  }
}

.articleImportant h3 {
  color: var(--color-red);
}

.articleTip {
  padding: 1.5rem 1.5rem 1px;
}
.articleTip p {
  font-size: 1.125rem;
  line-height: 1.555;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
@media (min-width: 37.5em) {
  .articleTip {
    background-color: var(--color-black-050);
    border-radius: var(--border-radius-s);
    border-left-color: var(--color-current-student-green-100);
    border-left-style: solid;
    border-left-width: 0.5rem;
  }
}

.articleQuote {
  display: flex;
  padding: 1.5rem 1.5rem 0.5rem;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 37.5em) {
  .articleQuote {
    background-color: var(--color-black-050);
    border-radius: var(--border-radius-s);
  }
}
.articleQuote p {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 100% !important;
}
.articleQuote__quotation {
  color: var(--color-black-100);
  margin-right: 0.75rem;
}
.articleQuote__quotation .slds-icon {
  top: auto;
}

.studySection .articleNote p, .studySection .articleImportant p {
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
}

/* Funnelback autocomplete */
.ui-autocomplete {
  margin: 0;
  padding: 0.5rem 0;
  background-color: #f6f5f4;
  max-width: calc(100% - 2 * 1rem);
  list-style-type: none;
  box-shadow: none;
}
.ui-autocomplete h2 {
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
  margin: 0;
  padding: 0.5em;
}
.ui-autocomplete li {
  margin: 0;
}
.ui-autocomplete .ui-state-focus {
  background-color: hsl(40, 10%, 92%);
  color: hsl(19, 100%, 34%);
}
@media (min-width: 37.5em) {
  .ui-autocomplete {
    max-width: calc(100% - 2 * 1.5rem);
  }
}
@media (min-width: 65em) {
  .ui-autocomplete {
    max-width: 50rem;
  }
}

.ui-autocomplete a {
  display: block;
  padding: 0.5em 1em;
}
@media (min-width: 65em) {
  .ui-autocomplete a {
    padding: 0.75em 1em;
  }
}

.ui-autocomplete-category {
  background-color: hsl(40, 10%, 92%);
}

.ui-helper-hidden-accessible {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}
.ui-helper-hidden-accessible:active, .ui-helper-hidden-accessible:focus-visible {
  clip-path: auto; /* 2 */
  height: auto;
  margin: 0;
  overflow: visible;
  position: static; /* 2 */
  width: auto;
  white-space: inherit;
}

.courseSearchResultsPage .ui-autocomplete {
  background-color: var(--color-white);
}

.courseSearchResultsPage .ui-autocomplete-category {
  background-color: var(--color-white);
}

.badge {
  background-image: linear-gradient(155deg, hsl(19, 100%, 50%), hsl(19, 100%, 50%) 40%, hsl(349, 85%, 56%));
  display: inline-block;
  position: relative;
  vertical-align: 0.125rem;
  margin-right: 0.5rem;
  border-radius: 0.1875rem;
  padding: 0.1875rem 0.1875rem 0.125rem 0.25rem;
  font-weight: 500;
  font-size: 0.625rem;
  color: var(--color-white);
  text-shadow: var(--drop-shadow-text);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
}
.badge :focus-visible {
  outline-color: var(--color-white);
}

.badge--partTime {
  border: 0.0625rem solid var(--color-black-800);
  margin-left: 0.25rem;
  margin-right: 0;
  background: transparent;
  color: var(--color-black-800);
  text-shadow: none;
}

.badge--fullTime {
  border: 0.0625rem solid var(--color-black-800);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  background: var(--color-black-800);
  text-shadow: none;
}

.contentHighlight .badge--partTime {
  border: 0.0625rem solid var(--color-white);
  color: var(--color-white);
}
.contentHighlight .badge--fullTime {
  border: 0.0625rem solid var(--color-white);
  background: var(--color-white);
  color: var(--color-black-800);
}

.bannerContent {
  position: relative;
}
.bannerContent p {
  margin-top: 0.5rem;
  max-width: 46ch;
}
.bannerContent--wide p {
  max-width: 67ch;
}

.breadcrumb {
  font-size: 0.875rem;
  text-decoration: none;
  opacity: 0.8;
}
.breadcrumb span {
  margin-bottom: 2px;
  border-bottom: 1px solid currentcolor;
}
.breadcrumb + .breadcrumb::before {
  padding: 0 0.5rem;
  content: "/ ";
}

.button {
  border: 0.125rem solid currentcolor;
  display: inline-block;
  position: relative;
  margin: 1.125rem 1rem 0 0;
  border-radius: 0;
  padding: 0.3125rem 1rem;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-weight: 500; /* Confirmed with UI Designer (JF) use 500 weight */
}
.button--outlineBlack {
  border-color: var(--color-black-400);
}
.button--withIcon {
  padding-left: 1.0625rem;
  padding-right: 1.0625rem;
}
.button--textOnly {
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
p .button {
  margin-top: calc(1.125rem - 0.5rem);
}
.formInput .button {
  margin-top: 0;
}
.button--reset {
  color: var(--color-teal-700); /* contrast 5.50 on white, 5.02 on Ecru */
}

.button--light {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-black);
}

.button--dark {
  border-color: var(--color-black-800);
  background-color: var(--color-black-800);
  color: var(--color-white);
}

.button--orange {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
  background: var(--color-primary); /* MVP switch */
  padding: 0.4375rem 1.125rem;
  color: var(--color-black); /* MVP switch */
}
.button--orange.button--withIcon {
  padding-left: 1.1875rem;
  padding-right: 1.1875rem;
}

.button--yellow {
  border: 0;
  background-color: var(--color-primary);
  padding: 0.4375rem 1.125rem;
  color: var(--color-black);
}

.button--orangeOutline {
  border-color: var(--color-teal-700);
  color: var(--color-teal-700); /* contrast 5.50 on white, 5.02 on Ecru */
}

/* Apply button, introduced Feb 25 as part of MVP */
.button--plum {
  border: 0;
  background: var(--color-plum);
  padding: 0.4375rem 1.125rem;
  color: var(--color-white);
}
.button--plum.button--withIcon {
  padding-left: 1.1875rem;
  padding-right: 1.1875rem;
}

.button--white {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-primary);
  text-shadow: none;
}

/* used in APP/ Portal, styles are overridden in APP */
.button--green {
  border-color: var(--color-current-student-green-100);
  background-color: var(--color-current-student-green-100);
  color: var(--color-white); /* white text without drop shadow provides 3.02 contrast, black is 6.96, drop shadow added to increase contrast */
  text-shadow: var(--drop-shadow-text);
}

/* used in APP/ Portal, styles are overridden in APP */
.button--blue {
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-white); /* white text provides 5.23 contrast, black is 4.01 */
  text-shadow: var(--drop-shadow-text);
}

.button__iconEnd {
  margin-left: 0.3125em;
}
.button--textOnly .button__iconEnd {
  margin-left: 0.25em;
}

.button__iconStart {
  margin-right: 0.3125em;
}
.button--textOnly .button__iconStart {
  margin-right: 0.25em;
}

@media (max-width: 22em) {
  .buttonWrapper {
    display: flex;
    flex-direction: column;
  }
  .buttonWrapper .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
  }
}
.card {
  position: relative;
  width: 100%;
  box-shadow: 0 44px 44px -24px hsla(0, 0%, 0%, 0.3);
  margin: 1.125rem 0 0;
  border-radius: var(--border-radius-s);
  background-color: var(--color-white);
  padding: 1.5rem 1.75rem;
  overflow: hidden;
}
.card > *:first-child {
  margin-top: 0;
}
.card .base__heading,
.card p {
  max-width: 100%;
}
.card img,
.card .videoResponsive {
  width: 100%;
  border-radius: 0.1875rem;
}
.studySection--light .card {
  background-color: hsl(40, 10%, 94%);
}
.bannerSection--light .card {
  background-color: var(--color-black-050);
}
.card--contained {
  padding: 0;
}
.card--contained img {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
}
.card--open {
  box-shadow: unset;
  background-color: transparent !important;
  padding: 0;
}
@media print {
  .card {
    box-shadow: none;
  }
}

.card__text {
  padding: 1.5rem 1.75rem;
}
.card__text > *:first-child {
  margin-top: 0;
}
@media print {
  .card__text {
    padding: 0.5rem 0 0;
  }
}

.card__highlight {
  position: absolute;
  top: 10rem;
  width: 100%;
  height: 2rem;
  background-color: var(--color-primary);
  padding: 0.5625rem 1.75rem 0.4375rem;
  color: var(--color-black);
  font-weight: 500;
  line-height: 1;
}
@media print {
  .card__highlight {
    position: relative;
    margin-top: 0.25rem;
    padding-left: 0;
    padding-right: 0;
  }
}

.card__modalTrigger {
  cursor: pointer;
}

.card__icon,
li .card__icon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  color: var(--color-white);
  filter: var(--drop-shadow-svg);
}

.card__image {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
}

.card__courseInformation {
  padding: 0;
  list-style-type: none;
}
.card__courseInformation li {
  margin-top: 0.125rem;
}
.card__courseInformation span {
  font-weight: 500;
}

.cardList {
  position: relative;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  max-width: 50rem;
  margin: 1.125rem auto 0;
  padding: 0;
}
.cardList > * {
  align-self: center;
}
.cardList--category {
  border-top: 0.0625rem solid var(--color-black-200);
  padding-top: 1.375rem;
}
.cardList--research .card {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-black);
  color: var(--color-white);
}
.cardList--research .card__text {
  border-top: 0.125rem solid var(--color-primary);
}

/* autoprefixer: off */
@supports (display: grid) {
  .cardList {
    max-width: 88rem;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    gap: 2rem;
  }
  @media (min-width: 37.5em) {
    .cardList {
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (min-width: 65em) {
    .cardList {
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }
  }
  .cardList > * {
    align-self: initial;
  }
  .cardList .card,
  .cardList .featurePanel {
    margin-top: 0;
  }
  /* Related articles, displayed in `articleAside` on News and World Class article pages

  @example html
  <div class="cardList cardList--relatedArticles">
   <article 
    class="featureCard featureCard--withBackground"
    style="background-image: linear-gradient({rgba}, {rgba}, url({url});">
     <p class="base__font--blueberry base__font--research">{strapline}e</p>
     <h3 class="base__font--strawberry"><a href="{url}">{title}</a></h3>
   </article>
  </div>

  */
  .cardList--relatedArticles {
    /* autoprefixer: ignore next */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-template-rows: unset;
    grid-auto-rows: minmax(11.375rem, max-content);
    gap: 0.625rem;
  }
  .cardList--relatedArticles .base__font--strawberry {
    margin-bottom: 0;
  }
  .cardList--articleExcerpts {
    gap: 1rem;
  }
  @media (min-width: 50em) {
    .cardList--articleExcerpts {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 90em) {
    .cardList--articleExcerpts {
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }
  }
  .cardList--panelGrid {
    gap: 1rem;
    grid-template-rows: unset;
    grid-auto-rows: minmax(15.8125rem, auto);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
    margin-top: 0;
  }
  @media (min-width: 50em) {
    .cardList--panelGrid {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: unset;
    }
  }
  @media (min-width: 90em) {
    .cardList--panelGrid {
      gap: 2rem;
    }
  }
  @media (min-width: 37.5em) {
    .cardList--featurePanelGrid {
      grid-auto-rows: minmax(21.5rem, auto);
    }
  }
  @media (min-width: 65em) {
    .cardList--featureGrid {
      grid-auto-rows: minmax(21.5rem, auto);
    }
  }
  .cardList--wide {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .cardList--ultraWide {
    grid-template-rows: auto;
    grid-template-columns: 100%;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  @media (min-width: 37.5em) {
    .cardList--ultraWide {
      grid-template-rows: auto;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 65em) {
    .cardList--ultraWide {
      grid-template-rows: auto;
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .cardList--videoGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  @media (min-width: 37.5em) {
    .cardList--videoGrid {
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      gap: 1.125rem 2rem;
    }
  }
  .cardList--panelGrid .card--medium,
  .cardList--panelGrid .featureCard--medium,
  .cardList--panelGrid .card--large,
  .cardList--panelGrid .featureCard--large,
  .cardList--panelGrid .card--studyArea,
  .cardList--panelGrid .featurePanel {
    grid-column: span 2;
  }
  @media (min-width: 50em) {
    .cardList--panelGrid .card,
    .cardList--panelGrid .featureCard {
      grid-column: span 2;
    }
    .cardList--panelGrid .card--tall {
      grid-column: span 3;
      grid-row: span 3;
    }
    .cardList--panelGrid .card--medium,
    .cardList--panelGrid .featureCard--medium {
      grid-column: span 3;
    }
    .cardList--panelGrid .card--large,
    .cardList--panelGrid .featureCard--large {
      grid-column: span 4;
    }
    .cardList--panelGrid .featurePanel {
      grid-column: span 6;
    }
  }
}
.cardList__span {
  text-align: center;
}
@supports (display: grid) {
  .cardList__span > *:first-child {
    margin-top: 0;
  }
}
@media (min-width: 37.5em) {
  .cardList__span {
    /* autoprefixer: ignore next */
    grid-column: 1/3;
  }
}

.cardList--ultraWide ~ .button {
  margin-top: 2.5rem;
}

.checkPills {
  display: flex;
  flex-wrap: wrap;
}

.checkPill {
  font-size: 0.875rem;
  display: block;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  text-align: center;
  transition: 0.2s all ease-in-out;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.checkPill .svg-inline--fa {
  color: currentcolor !important;
}
.checkPill label {
  border: 0.125rem solid transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  cursor: pointer;
  user-select: none;
  padding: 0.25rem 1.25rem;
  background-color: var(--color-white);
  color: var(--color-black);
  border-radius: 6.25rem;
  display: block;
  line-height: 1.5rem;
  font-weight: 500;
}
.checkPill input[type=checkbox] {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.checkPill input[type=checkbox]:checked ~ label {
  background-color: transparent;
  background-image: linear-gradient(145deg, hsl(210, 15%, 21%) -19.75%, hsl(208, 38%, 9%) 87%);
  border-color: var(--color-black);
  color: var(--color-white);
  padding: 0.25rem 0.6rem 0.25rem 1.25rem;
}

.checkPill input[type=checkbox]:focus ~ label,
.checkPill input[type=checkbox]:hover ~ label,
.checkPill input[type=checkbox]:checked:hover ~ label,
.checkPill input[type=checkbox]:checked:focus ~ label {
  border-color: hsl(19, 100%, 50%);
}

.checkPill__toggleItem {
  border-bottom: 0.125rem solid hsl(42, 10%, 84%);
  display: flex;
  flex-basis: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.125rem;
  padding-bottom: 1.25rem;
}
.checkPill__toggleItem h3,
.checkPill__toggleItem .contextToggle {
  margin: 0;
}
.checkPill__toggleItem .contextToggle__switch {
  margin-right: 0;
}
.checkPill__toggleItem [class^=contextToggle--] {
  min-width: 3ch;
  width: auto;
}

.contentHighlight {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 2.5rem 0 0;
  border-radius: var(--border-radius);
  background-color: var(--color-black-800);
  padding: 2rem 4vw;
  color: var(--color-white);
}
@media (min-width: 65em) {
  .contentHighlight {
    margin: 6rem 0 0;
    padding: 4.5rem clamp(4vw, 4vw, 6rem) 6rem;
  }
}
.contentHighlight--withBackground {
  background-size: cover;
  text-shadow: var(--drop-shadow-text);
}
.contentHighlight--short {
  margin-top: 3rem;
}

.developerToolbar {
  position: fixed;
  inset-block-start: 7rem;
  inset-inline-end: var(--space-l);
  inline-size: 10rem;
  background-color: var(--color-teal-200);
  border-radius: var(--border-radius-s);
  color: var(--color-tertiary);
  padding: 0.5rem;
  z-index: 11; /* Sit above `header` (10) and `site-overlay` (9) */
}
.developerToolbar p,
.developerToolbar label {
  display: none;
}

.externalLink {
  vertical-align: -0.0625em;
  margin: 0 0.75em 0 0.5em;
  font-size: 0.75em;
}

.featureCard {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  gap: 0 3rem;
  box-shadow: 0 44px 44px -24px hsla(0, 0%, 0%, 0.3);
  border-radius: var(--border-radius-s);
  background-color: var(--color-black-800);
  background-image: linear-gradient(145deg, hsl(210, 15%, 21%) -19.75%, hsl(208, 38%, 9%) 87%);
  padding: 2rem;
  color: var(--color-white);
  /* Apply background image to card using inline style

  @example html - Usage
  <div
    class="featureCard featureCard--withBackground"
     style="background-image:
      linear-gradient(to right, rgba(0, 0, 0, 0.77), 
      rgba(0, 0, 0, 0.38) 40%),
      url({image-path});
    ">
    {content}
  </div>
  */
  /* autoprefixer: ignore next */
  align-content: center;
}
.featureCard--dark {
  background-color: var(--color-black-700);
  background-image: unset;
}
.featureCard--light {
  background-color: var(--color-white);
  background-image: unset;
  color: var(--color-black);
}
.featureCard--withBackground {
  align-content: end;
  background-size: cover;
  text-shadow: var(--drop-shadow-text); /* improve contrast when overlaid on image background */
}
.featureCard--form h2 {
  text-align: center;
}

@media (min-width: 65em) {
  .featureCard--inline {
    grid-template-rows: min-content;
    grid-template-columns: 1fr 2fr;
  }
  .featureCard--inline .base__heading {
    margin-top: 0;
  }
}
.featureCard__testimonialImage {
  position: absolute;
  left: 0.5rem;
  bottom: 0;
  height: calc(100% - 1.5rem);
  width: calc(25% - 0.5rem);
  object-fit: contain;
  object-position: bottom;
}
@media (min-width: 50em) {
  .featureCard__testimonialImage {
    width: calc(40% - 1rem);
  }
}

.featureCard__form {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.featureCard__form .button {
  width: 100%;
  margin-right: 0;
}

.featurePanel {
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 50rem;
  margin: 3rem auto 0;
  border-radius: var(--border-radius-s);
  text-align: left;
  overflow: hidden;
  background-color: var(--color-primary);
  color: var(--color-black);
}
.featurePanel p {
  max-width: 43ch;
  margin-left: initial;
}
@media (min-width: 65em) {
  .featurePanel {
    box-shadow: 0 44px 44px -24px hsla(0, 0%, 0%, 0.3);
  }
}

.featurePanel--shiftUp {
  margin-top: 0;
}
@media (min-width: 50em) {
  .featurePanel--shiftUp {
    margin-top: -4rem;
  }
}
@media (min-width: 65em) {
  .featurePanel--shiftUp {
    margin-top: -4.75rem;
  }
}

.featurePanel--floated {
  max-width: 88rem;
  border-radius: 0;
}
@media (min-width: 50em) {
  .featurePanel--floated {
    margin-right: 4vw;
    margin-left: 4vw;
  }
}
@media (min-width: 90em) {
  .featurePanel--floated {
    margin-right: calc(50vw - 44rem);
    margin-left: calc(50vw - 44rem);
    margin-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    margin-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media (min-width: 50em) {
  .featurePanel--floated {
    border-radius: var(--border-radius-s);
  }
}

.featurePanel__excerpt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 1.5rem 1.75rem;
}
.featurePanel__excerpt > *:first-child {
  margin-top: 0;
}
@media (min-width: 50em) {
  .featurePanel__excerpt {
    padding: 2.5rem;
  }
}

.featurePanel__excerpt--banner {
  justify-content: center;
  align-self: center;
}
@media (min-width: 65em) {
  .featurePanel__excerpt--banner {
    padding: 4.5rem;
  }
}

@supports (display: grid) {
  .featurePanel {
    max-width: 88rem;
    /* autoprefixer: off */
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(15.8125rem, auto);
  }
  .featurePanel--banner {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
  }
  @media (min-width: 50em) {
    .featurePanel--banner {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(16rem, auto);
    }
  }
  @media (min-width: 90em) {
    .featurePanel--banner {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(16rem, 21.5rem);
    }
  }
  .featurePanel__heroImage {
    align-self: stretch;
  }
  @media (min-width: 50em) {
    .featurePanel__heroImage img,
    .featurePanel__heroImage source {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}
.heroBanner {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -7.4375rem;
  background-color: var(--color-black);
  background-size: cover;
  background-position: top center;
  padding: 7.4375rem 2rem 0;
  color: var(--color-white);
}
@media (min-width: 50em) {
  .heroBanner {
    padding-right: 4vw;
    padding-left: 4vw;
  }
}
@media (min-width: 90em) {
  .heroBanner {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media (min-width: 37.5em) {
  .heroBanner {
    margin-top: -6.8125rem;
    padding-top: 6.8125rem;
  }
}

/** Adjust padding on pages where succeeding section overlaps `heroBanner`
 * Use in conjuction with `--futureStudents` modifier
 * Used throughout future students, APP, feature articles and World Class research
 */
@media (min-width: 50em) {
  .heroBanner--overlapped {
    padding-bottom: 4rem;
  }
}
@media (min-width: 65em) {
  .heroBanner--overlapped {
    padding-bottom: 4.75rem;
  }
}

/* World Class research articles. Apply gradient border to bottom of image */
@media (min-width: 50em) {
  .heroBanner--research {
    border-bottom: 0.5rem solid var(--color-primary);
  }
}

/* World Class research articles, My Uni Start. Apply gradient border to bottom of image */
.heroBanner--withBackground {
  text-shadow: var(--drop-shadow-text); /* improve contrast when overlaid on image background */
}

.heroBanner--withBackground::before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  background-image: linear-gradient(180deg, var(--color-black) -5%, rgba(0, 0, 0, 0.4) 40%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)); /* tried var(--color-black) and var(--color-black), worked in serve, did not work once built */
}

.heroBanner__breadcrumbs {
  z-index: 1;
  width: 100%;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}
@media (min-width: 37.5em) {
  .heroBanner__breadcrumbs {
    font-size: 1rem;
  }
}

.heroBanner__intro {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 42rem;
  align-self: center;
  padding: 4rem 0 2rem;
}
@media (min-width: 65em) {
  .heroBanner__intro {
    margin: 0 auto 0 4.25rem;
    padding: 7.25rem 0 4rem;
  }
}
.heroBanner--futureStudents .heroBanner__intro, .heroBanner__intro--login {
  align-self: start;
}
.heroBanner__intro .bannerContent {
  margin-top: 0.5rem;
}

@media (min-width: 65em) {
  .heroBanner__intro--wide {
    max-width: 50rem;
  }
}

.heroBanner__breadcrumbs + .heroBanner__intro {
  padding-top: 1.5rem;
}
@media (min-width: 65em) {
  .heroBanner__breadcrumbs + .heroBanner__intro {
    padding-top: 4rem;
  }
}

.heroBanner__content {
  grid-area: content;
}
@media (min-width: 37.5em) {
  .heroBanner__content {
    padding-left: 1.125rem;
  }
}

@media (min-width: 37.5em) {
  .heroBanner__content > div {
    margin-left: -1.125rem;
    padding-left: 1.125rem;
    border-left: 0.0625rem solid var(--color-white);
  }
}

@supports (display: grid) {
  .heroBanner {
    display: grid;
    grid-template-areas: "breadcrumbs" "intro";
    grid-template-columns: 100%;
    grid-template-rows: min-content 1fr;
  }
  .heroBanner__breadcrumbs {
    grid-area: breadcrumbs;
  }
  .heroBanner__intro {
    /* autoprefixer: ignore next */
    grid-area: intro;
  }
}
.iconOnLeft {
  margin-right: 0.4em;
}
.button--textOnly .iconOnLeft {
  margin-right: 0.375em;
}

.leadGen .base__heading {
  padding-right: 2rem;
}

.leadGen__formWrapper,
.leadGen__confirmation {
  position: relative;
}

@media (min-width: 37.5em) {
  .leadGen__form,
  .entryPathwayLeadGen__form {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

.leadGen__input {
  display: inherit;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  background-color: #f6f5f4;
  color: hsl(0, 0%, 5%);
}

.leadGen__textArea {
  display: inherit;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  background-color: #f6f5f4;
  color: hsl(0, 0%, 5%);
}

.leadGen__checkbox {
  width: 100%;
}
.leadGen__checkbox label::before {
  border-color: var(--color-white);
  background-color: var(--color-white);
}
.leadGen__checkbox label::after {
  border-color: var(--color-black);
}

.leadGen__button input {
  width: 100%;
}

.leadGen__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.form-group {
  position: relative;
}
@media (min-width: 37.5em) {
  .form-group {
    width: calc(50% - 2rem);
  }
}
.form-group .pristine-error {
  font-weight: 400;
}
.leadGen__formWrapper .form-group {
  margin-bottom: 1rem;
}

.leadGen__form .form-group .pristine-error {
  position: relative;
  right: auto;
}

.leadGen__form .selectField,
.entryPathwayLeadGen__form .selectField {
  width: 100%;
  min-width: auto; /* override `.selectField` */
  font-weight: 400;
}

.leadGen__form .selectField:invalid,
.leadGen__form .selectField option[value=""],
.entryPathwayLeadGen__form .selectField:invalid,
.entryPathwayLeadGen__form .selectField option[value=""] {
  color: var(--color-black-400);
}

.loader {
  padding-right: 4vw;
  padding-left: 4vw;
  margin: 25vh auto;
  color: var(--color-white);
  font-size: 4rem;
  text-align: center;
}
@media (min-width: 90em) {
  .loader {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.loader .base__font--apple, .loader .base__bodyFont, .loader .base__bodyFont--bold {
  margin-left: auto;
  margin-right: auto;
}

.courseCompareSection .loader {
  color: var(--color-black-800);
}

.notification {
  padding-right: 4vw;
  padding-left: 4vw;
  background-image: linear-gradient(to right, hsl(19, 100%, 50%), hsl(19, 100%, 50%) 40%, hsl(349, 85%, 56%));
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--color-white);
  text-shadow: var(--drop-shadow-text);
  z-index: 20;
}
@media (min-width: 90em) {
  .notification {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.notification :focus-visible {
  outline-color: var(--color-white);
}
.notification--alert {
  background-image: linear-gradient(to right, hsl(39, 100%, 74%), hsl(39, 100%, 74%) 40%, hsl(40, 100%, 67%));
  color: var(--color-black);
  text-shadow: none;
}
.notification--alert :focus-visible {
  outline-color: var(--color-black);
}
.notification--info {
  background-image: linear-gradient(to right, hsl(202, 100%, 35%), hsl(202, 100%, 35%) 40%, hsl(202, 93%, 21%));
}
.notification--info :focus-visible {
  outline-color: var(--color-white);
}
.notification svg {
  filter: var(--drop-shadow-svg);
  font-size: 1.2em;
}

.notification__close {
  display: inline-flex;
  margin: -0.5rem -0.625rem -0.5rem 0;
  padding: 0.625rem;
}
.notification__close:focus-visible {
  outline-offset: 0;
}

.notification__text {
  display: flex;
  margin: 0 auto;
  font-weight: 500;
}

.siteOverlay {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 80vh;
  background-color: var(--color-black-700);
  color: var(--color-white);
  transition: top 0.5s cubic-bezier(0.15, 0.67, 0.75, 1);
  z-index: 9;
  overflow-y: scroll;
}

.siteOverlay__bg {
  position: fixed;
  inset: 0;
  z-index: 4;
  background-color: var(--color-black);
}

.siteOverlay__inner {
  height: 100%;
}

.overlayContainer {
  width: 100%;
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--border-radius-s);
  background-color: var(--color-black-600);
}
.overlayContainer iframe {
  width: 100%;
}
.overlayContainer .button {
  width: 100%;
  border: 0;
  margin: 0 0 1.5rem;
}

.pageInfo .modal__container h1, .pageInfo .modal__container h2, .pageInfo .modal__container h3, .pageInfo .modal__container h4, .pageInfo .modal__container h5 {
  margin-top: 0;
  margin-bottom: 0;
}
.pageInfo .modal__container h2 {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1.44rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.pageInfo .modal__container h3 {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: 0;
}
.pageInfo .modal__container h4 {
  font-size: 1rem;
  font-weight: 500;
}

.pageInfo .modal__body > div {
  margin-bottom: 1rem;
}

.pageInfo__details {
  display: flex;
  flex-wrap: wrap;
}
.pageInfo__details > * {
  flex: 1 0 50%;
  margin-bottom: 1rem;
}

@media (min-width: 65em) {
  .pageInfo__details > * {
    flex: 1 0 auto;
    margin-bottom: 0;
  }
}
.searchForm {
  display: flex;
  width: 100%;
  max-width: 42rem;
  margin-top: 2.25rem;
  transition: opacity 0.5s cubic-bezier(0.15, 0.67, 0.75, 1);
  color: var(--color-black);
}
.searchResults__page .searchForm {
  opacity: 0;
}

.searchInput,
.searchForm .autocomplete__hint,
.searchForm .autocomplete__input {
  margin: 0;
  padding: 1rem 1.3125rem;
  border: 0;
  border-radius: 0.1875rem 0 0 0.1875rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: 500;
  flex-basis: 90%;
  box-sizing: border-box;
}
.searchInput.error,
.searchForm .autocomplete__hint.error,
.searchForm .autocomplete__input.error {
  border: 0.25rem solid hsl(19, 100%, 34%);
}

.searchForm--tab {
  flex-wrap: wrap;
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  height: fit-content;
  padding: 1.5rem 4vw 0;
}
@media (min-width: 64.0625em) {
  .searchForm--tab {
    padding: 0;
  }
}
.searchForm--tab .autocomplete__wrapper {
  flex-basis: calc(100% - 3.5rem);
}
.searchForm--tab .autocomplete__menu--hidden {
  display: none;
}
.searchForm--tab .autocomplete__menu--overlay {
  background-color: rgba(26, 26, 26, 0.35);
}
.searchForm--tab .searchInput,
.searchForm--tab .autocomplete__hint,
.searchForm--tab .autocomplete__input {
  border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
}

.searchForm__label {
  margin-bottom: 1.25rem;
  flex-basis: 100%;
  text-align: center;
  color: var(--color-white);
}

.searchResults__page {
  background-color: hsl(40, 10%, 96%);
  min-height: 100vh;
}

.searchResults {
  padding-right: 4vw;
  padding-left: 4vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "overview" "backTo" "actions" "filter" "result" "related";
  padding-top: 1.5rem;
  padding-bottom: 4.375rem;
}
@media (min-width: 90em) {
  .searchResults {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
.searchResults > * {
  align-self: start;
}
@media (min-width: 65em) {
  .searchResults {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: "backTo backTo overview overview overview overview actions actions" "filter filter filter result result result result result" " . . . related related related related related";
    gap: 1.25rem 2rem;
    padding-top: 1.25rem;
  }
}

.searchResults__backTo {
  grid-area: backTo;
  align-self: center;
  display: flex;
}

.searchResults__backTo .button {
  flex-basis: 100%;
  margin: 0;
}
@media (min-width: 65em) {
  .searchResults__backTo .button {
    flex-basis: auto;
    border: 0;
    padding: 0;
    text-decoration: underline;
  }
}

.searchResults__overview {
  display: none;
  grid-area: overview;
  text-align: center;
  margin: 0 auto;
  padding: 0.5rem 0;
}
@media (min-width: 65em) {
  .searchResults__overview {
    display: block;
  }
}

.searchResults__termHeader {
  font-weight: 500;
}

.searchResults__actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
@media (min-width: 65em) {
  .searchResults__actions {
    align-items: flex-end;
    margin-bottom: 0;
  }
}

.searchResults__actions--sortBy {
  align-items: center;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 1.125rem;
}
@media (min-width: 65em) {
  .searchResults__actions--sortBy {
    justify-content: flex-end;
    margin-top: 0;
  }
}

.searchResults__actions--sortBy label {
  margin-right: 1ch;
}

.searchResults__actions .button {
  margin-right: 0;
}
@media (min-width: 65em) {
  .searchResults__actions .button {
    margin: 0;
  }
}

.searchResults__limitBy {
  display: flex;
  grid-area: backTo;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  gap: 1ch;
}
@media (min-width: 65em) {
  .searchResults__limitBy {
    justify-content: flex-start;
  }
}

.searchResults__filters {
  grid-area: filter;
  background-color: hsl(40, 10%, 94%);
  padding: 1.75rem 2rem;
  position: fixed;
  z-index: 10;
  left: 0;
  width: 100vw;
  height: 100vh;
  top: 0;
  transition: 0.4s left ease-in-out;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
  place-content: flex-start space-between;
}
@media (min-width: 65em) {
  .searchResults__filters {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: fit-content;
    overflow: auto;
    border-radius: var(--border-radius-s);
    z-index: auto;
  }
}
.searchResults__page .searchResults__filters {
  background-color: var(--color-white);
}

.searchResults__filters--mobileHidden {
  left: -100vw;
}
@media (min-width: 65em) {
  .searchResults__filters--mobileHidden {
    left: auto;
  }
}

@media (min-width: 65em) {
  .searchResults__filterButton {
    display: none;
  }
}

.searchResults__actions--sortBy .searchResults__filterButton {
  flex-basis: 100%;
}

.searchResults__filtersClose {
  font-size: 2rem;
}
@media (min-width: 65em) {
  .searchResults__filtersClose {
    display: none;
  }
}

.searchResults__filterSection {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding-bottom: 1.5rem;
}
.searchResults__filterSection:not(:first-of-type) {
  border-top: 1px solid var(--color-black-100);
}

.searchResults__filterSection h3 {
  margin-top: 1.5rem;
  flex-basis: 65%;
}

.searchResults__filterSection h3 + .base__link {
  flex-basis: 35%;
  align-self: end;
  text-align: right;
}

.searchResults__filtersList {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.searchResults__filtersList .checkbox {
  margin: 0;
}

.searchResults__results {
  grid-area: result;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}

.searchResults__results--full {
  grid-column: 1/9;
}

@media (min-width: 65em) {
  .searchResults__results--fullNarrow {
    grid-column: 3/7;
  }
}

.searchResults__results--none {
  grid-column: 3/7;
}
.searchResults__results--none p, .searchResults__results--none ul {
  flex-basis: 100%;
}
.searchResults__results--none ul {
  margin-left: 2ch;
  max-width: 80ch;
}

.searchResults__resultWrapper--img {
  display: flex;
}

.searchResults__resultWrapper--img img {
  display: none;
}
@media (min-width: 37.5em) {
  .searchResults__resultWrapper--img img {
    display: block;
    width: 32%;
    flex-shrink: 0;
    border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
    object-fit: cover;
  }
}

.searchResults__result {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-white);
  border-radius: var(--border-radius-s);
  padding: 1.5rem 1.75rem;
}
.searchResults__result > * {
  flex-basis: 100%;
}
.searchResults__result > *:first-child {
  margin-top: 0;
}
.searchResults__result time {
  margin: 0;
}

.searchResults__result h3 {
  flex-basis: 75%;
}
@media (min-width: 37.5em) {
  .searchResults__result h3 {
    flex-basis: 85%;
  }
}

@media (min-width: 37.5em) {
  .searchResults__resultWrapper--img .searchResults__result {
    border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
  }
}

.searchResults__result--noResults {
  display: block;
  text-align: center;
}
.searchResults__result--noResults ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}
.searchResults__result--noResults li {
  margin-top: 0;
}

.searchResults__courseTitle a {
  margin: 0 0.5rem 0 0;
}

.searchResult__description {
  margin-top: 0.5rem;
}
.searchResult__description > *:first-child {
  margin-top: 0;
}

.searchResult__cta {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-flow: column wrap;
}
.searchResult__cta.button:last-child {
  margin-right: 0;
}
@media (min-width: 65em) {
  .searchResult__cta {
    flex-direction: row;
    align-items: center;
  }
}

.searchResult__moreDetails {
  text-align: left;
}

.searchResult__notice {
  background-image: linear-gradient(155deg, hsl(19, 100%, 50%), hsl(19, 100%, 50%) 40%, hsl(349, 85%, 56%));
  color: var(--color-white);
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
  font-weight: 500;
  padding: 0.5rem 1rem;
}
.searchResult__notice :focus-visible {
  outline-color: var(--color-white);
}
.searchResult__notice + .searchResults__result {
  border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
}

.searchResult__table {
  font-weight: 500;
  width: 100%;
  margin-top: 1rem;
}
.searchResult__table tr:not(:first-of-type) {
  border-top: 1px solid var(--color-black-100);
}
.searchResult__table td {
  padding: 0.25rem 0;
}
.searchResult__table th {
  font-weight: 400;
  text-align: left;
  width: 12ch;
}

.searchResults__relatedResults {
  grid-area: related;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-black-200);
  padding-top: 0.5rem;
  padding-bottom: 1.875rem;
}
.searchResults__relatedResults h1, .searchResults__relatedResults h2, .searchResults__relatedResults h3, .searchResults__relatedResults h4, .searchResults__relatedResults h5 {
  flex-basis: 100%;
}

.searchResults__relatedColumn {
  flex-basis: 50%;
  margin-top: 1rem;
}
.searchResults__relatedColumn ul {
  list-style-type: none;
  padding: 0;
}

.searchResults .pagination {
  display: flex;
  justify-content: center;
}
.searchResults .pagination li:not(:first-of-type) {
  margin-left: 1ch;
}

.searchSubmit {
  z-index: 1;
  order: 1;
  flex-basis: 3.5rem;
  flex-shrink: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  border-radius: 0 0.1875rem 0.1875rem 0;
  font-size: 1.125rem;
}
.searchForm--tab .searchSubmit {
  border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
}
.searchSubmit--gradient {
  background-image: linear-gradient(to right, hsl(19, 100%, 50%), hsl(19, 100%, 50%) 40%, hsl(349, 85%, 56%));
}
.searchSubmit--gradient :focus-visible {
  outline-color: var(--color-white);
}
.searchSubmit--gradient svg {
  filter: var(--drop-shadow-svg);
}

.searchTabs {
  display: flex;
  justify-content: center;
  width: 100%;
  background-image: linear-gradient(103deg, var(--color-black-600) 2%, var(--color-black-700) 100%);
}

.searchTabs__list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
@media (min-width: 37.5em) {
  .searchTabs__list {
    flex-direction: row;
    width: auto;
    text-align: unset;
  }
}

.searchTab {
  margin: 0;
  background-image: linear-gradient(103deg, var(--color-black-600) 2%, var(--color-black-700) 100%);
  padding: 0;
  color: var(--color-white);
}

.searchTab__link {
  display: block;
  position: relative;
  padding: 1rem 2rem;
  color: var(--color-white);
  font-weight: 500;
}
.searchTab__link:focus-visible {
  outline-offset: -0.25rem;
}

.searchTab--active .searchTab__link {
  background-color: var(--color-black-800);
}
.searchTab--active .searchTab__link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.375rem;
  background-color: hsl(19, 100%, 50%);
}

.skipLinks {
  left: -999px;
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
.skipLinks:focus-visible, .skipLinks:active {
  color: var(--color-white);
  background-color: var(--color-black-800);
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  width: 18rem;
  height: auto;
  overflow: auto;
  padding: 0.5rem;
  text-align: center;
  z-index: 21;
}

.table-responsive {
  width: 100%;
  max-width: 60rem;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.table {
  margin: 0.5rem 0 0;
  width: 100%;
}
.table a,
.table a:visited {
  color: hsl(19, 100%, 34%);
}
.table caption {
  margin: 0.5rem 0 0.5rem;
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
  text-align: left;
  font-weight: 500;
}
.table th {
  vertical-align: middle;
  text-align: left;
}
.table td {
  vertical-align: top;
}
.table .table__col {
  min-width: 10rem;
}
.table .unit,
.table .points,
.table .table__colNarrow {
  min-width: 7.5em;
}
.table .unit,
.table .points {
  width: 20%;
}
.table .description {
  width: 60%;
  min-width: 16em;
}
.table--white {
  border-color: var(--color-white);
}

.table__icon {
  margin-left: 0.25em;
  text-decoration: none;
}

.table-bordered th,
.table-bordered td {
  border: 0.0625rem solid var(--color-black-800);
  padding: 0.25rem 0.5rem;
  overflow-wrap: normal;
}
@media (min-width: 50em) {
  .table-bordered th,
  .table-bordered td {
    padding: 0.75em 0.5rem;
  }
}

.table--white.table-bordered th, .table--white.table-bordered td {
  border-color: var(--color-white);
}

.tabs {
  display: grid;
  grid-template-areas: "tablist" "tabcontent";
  grid-template-columns: 100%;
  grid-template-rows: 3.9375rem auto;
}

.tabs--navigation {
  grid-template-areas: "tablist tablist" "tabcontent quicklinks";
  grid-template-columns: auto minmax(150px, 25%);
  height: 100%;
}

.tabs [role=tablist] {
  grid-area: tablist;
  background-color: var(--color-black);
  padding-left: calc(50vw - 44rem);
  margin: 0 0 1px; /* prevent outline */
  list-style: none;
  display: flex;
  gap: 0.25rem;
}
.tabs [role=tablist] li[role=presentation] {
  margin-top: 0;
}

.tabs [role=tab] {
  padding: 1rem 2.5rem;
  margin-bottom: 0;
  display: block;
  text-decoration: none;
}
.tabs [role=tab][aria-selected=true] {
  background-color: var(--color-black-700);
  border-radius: 1rem 1rem 0 0;
  position: relative;
}
.tabs [role=tab]:focus-visible {
  outline-offset: -0.25rem;
}
.tabs [role=tab][aria-selected=true]::after {
  content: "";
  width: calc(100% - 5rem);
  height: 0.25rem;
  position: absolute;
  bottom: 0;
  left: 2.5rem;
  background-color: var(--color-primary);
}

.tabs--navigation [role=tabpanel] {
  padding-left: 2.5rem;
  padding-left: clamp(2.5rem, 50vw - 41.5rem, 50vw - 41.5rem);
}

.tabs [role=tabpanel] {
  grid-area: tabcontent;
  padding-block: 3rem;
  height: calc(100% - 4rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  grid-auto-rows: min-content;
  gap: var(--section-block-s);
  overflow-y: scroll;
  z-index: 1;
}
.tabs [role=tabpanel]:focus-visible {
  outline-offset: -0.25rem;
}

[data-name=search_overlay] .tabs [role=tabpanel] {
  overflow-y: initial;
}

.tabs__list {
  min-width: 16rem;
  width: 25%;
}
.tabs__list ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.tabs__list li {
  margin-bottom: 0.75rem;
}
.tabs__list a {
  max-width: 15rem;
  display: block;
}
@media (min-width: 64.0625em) {
  .tabs__list {
    min-width: unset;
    width: 95%;
    padding-bottom: 2rem;
  }
}

.tab__quickLinks {
  background-color: var(--color-black);
  padding-top: 1.5rem;
}
.tab__quickLinks li {
  margin-bottom: 0.75rem;
}
@media (min-width: 64.0625em) {
  .tab__quickLinks {
    background-color: transparent;
    padding: 0;
  }
}

.tabs .tab__quickLinks {
  grid-area: quicklinks;
  background-color: var(--color-black-600);
  padding: 3rem 0 3rem 2rem;
}
.tabs .tab__quickLinks ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.tab__accordion {
  max-width: 100vw;
  margin: 0;
}

.tab__accordion .accordion__body--open {
  display: flex;
  overflow-x: scroll;
  padding: 1.5rem;
  transition: all 0.2s ease-in, padding 0s;
}
.tab__accordion .accordion__body--open .tabs__list {
  background-color: var(--color-black-600);
  padding: 2rem;
  margin-right: 1.5rem;
  border-radius: 0.5rem;
}

.tab__accordion .accordion__title {
  padding: 2rem 1.5rem;
  max-width: 100%;
}
.tab__accordion .accordion__title::before {
  right: 1.5rem;
}
.tab__accordion .accordion__title::after {
  right: 1.75rem;
}

.testimonials {
  background-color: var(--color-black-050);
}
.testimonials .glide {
  max-width: 62rem;
}

@media (min-width: 37.5em) {
  .testimonials__content {
    display: grid;
    grid-template-areas: ". figure";
    grid-template-columns: 3fr 2fr;
    gap: 2rem;
    margin-top: 2rem;
  }
}
@media (min-width: 65em) {
  .testimonials__content {
    grid-template-areas: ". figure";
    grid-template-columns: minmax(auto, 32.5rem) minmax(auto, 25rem);
    gap: 4rem;
  }
}
@media (min-width: 90em) {
  .testimonials__content {
    grid-template-areas: ". figure";
    grid-template-columns: minmax(auto, 32.5rem) minmax(auto, 25rem);
  }
}

@media (min-width: 37.5em) {
  .testimonials__blockquote {
    margin: 0;
  }
}

@media (min-width: 37.5em) {
  .testimonials__content .card {
    grid-area: figure;
    margin-top: 0;
  }
}

.toolTip {
  margin-left: 0.5rem;
  font-size: 1rem; /* 1 */
  vertical-align: baseline;
}

.uniSpeak {
  margin-top: 2.5rem;
  background-color: var(--color-white);
  padding-left: 4vw;
  padding-right: 4vw;
  overflow: visible;
}
@media (min-width: 90em) {
  .uniSpeak {
    padding-left: 4.25rem;
    padding-right: 4.25rem;
  }
}
@media print {
  .uniSpeak {
    margin-top: 0;
  }
}

.uniSpeak__header {
  position: relative;
  display: grid;
  grid-template-areas: "title" "pseudoTitle" "introText";
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-left: -4vw;
  margin-right: -4vw;
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
  background-image: linear-gradient(35deg, var(--color-black-800), var(--color-black-700));
  padding: 8rem 4vw 2rem;
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 50em) {
  .uniSpeak__header {
    grid-template-areas: "title pseudoTitle" "title introText";
    gap: 1rem 17rem;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: repeat(2, 1fr);
    padding: 2rem 1rem;
  }
}
@media (min-width: 90em) {
  .uniSpeak__header {
    grid-template-areas: "title pseudoTitle" "title introText";
    gap: 1rem 24rem;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: repeat(2, 1fr);
    margin-left: -4.25rem;
    margin-right: -4.25rem;
  }
}
@media print {
  .uniSpeak__header {
    display: block;
    padding: 0;
  }
}

.uniSpeak__header::after {
  content: "";
  display: block;
  position: absolute;
  top: -2.5rem;
  height: 20rem;
  width: 90vw;
  max-width: 368px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0004/1099039/unispeak-header-2025.png");
  background-size: contain;
  background-position: center top;
}
@media (min-width: 50em) {
  .uniSpeak__header::after {
    transform: translateX(0);
    top: unset;
    left: 3rem;
    bottom: 0;
    height: 220px;
    width: 235px;
    background-size: cover;
  }
}
@media (min-width: 90em) {
  .uniSpeak__header::after {
    left: 3.25rem;
    height: 15.5rem;
    width: 20.3864rem;
  }
}
@media print {
  .uniSpeak__header::after {
    display: none;
  }
}

.uniSpeak__title {
  grid-area: title;
  height: fit-content;
  z-index: 1;
  margin: 0;
  color: var(--color-primary);
}
@media (min-width: 50em) {
  .uniSpeak__title {
    transform-origin: center;
    transform: rotate(270deg);
    margin: 2em -2em;
    padding: 0;
    text-align: center;
  }
}
@media print {
  .uniSpeak__title {
    transform: none;
  }
}

.uniSpeak__seperator {
  display: inline-block;
  font-size: 0.8em;
  margin: 0 0.3rem;
}

/* Quote marks 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 24">
  <path fill="#fff" d="M1.41926 24c-.37736 0-.679247-.1132-.905662-.3396-.150943-.3019-.150943-.6415 0-1.0189L8.66454.90566C8.89096.301885 9.30605 0 9.90983 0H16.023c.3774 0 .6415.113208.7925.339625.2264.226416.3019.528302.2264.905655l-6 21.73582C10.891 23.6604 10.4759 24 9.79662 24H1.41926Zm16.86794 0c-.3774 0-.6793-.1132-.9057-.3396-.1509-.3019-.1509-.6415 0-1.0189L25.4193.90566C25.6457.301885 26.0608 0 26.6645 0h6.1133c.3773 0 .6415.113208.7924.339625.2264.226416.3019.528302.2264.905655L27.9098 22.9811c-.1509.6793-.566 1.0189-1.2453 1.0189h-8.3773Z"/>
</svg>

*/
.uniSpeak__pseudoTitle {
  --blockquote-inline-size: 1.0417em;
  position: relative;
  grid-area: pseudoTitle;
  line-height: 0.9644; /* matches Figma 96.44% */
  margin: 0;
  z-index: 1;
  align-self: end;
}
.uniSpeak__pseudoTitle::before, .uniSpeak__pseudoTitle::after {
  content: "";
  display: inline-block;
  position: relative;
  opacity: 0.24;
  width: var(--blockquote-inline-size);
  height: 0.7817rem;
  background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 34 24\"><path fill=\"%23fff\" d=\"M1.41926 24c-.37736 0-.679247-.1132-.905662-.3396-.150943-.3019-.150943-.6415 0-1.0189L8.66454.90566C8.89096.301885 9.30605 0 9.90983 0H16.023c.3774 0 .6415.113208.7925.339625.2264.226416.3019.528302.2264.905655l-6 21.73582C10.891 23.6604 10.4759 24 9.79662 24H1.41926Zm16.86794 0c-.3774 0-.6793-.1132-.9057-.3396-.1509-.3019-.1509-.6415 0-1.0189L25.4193.90566C25.6457.301885 26.0608 0 26.6645 0h6.1133c.3773 0 .6415.113208.7924.339625.2264.226416.3019.528302.2264.905655L27.9098 22.9811c-.1509.6793-.566 1.0189-1.2453 1.0189h-8.3773Z\"/></svg>"); /* svgbackgrounds.com/tools/svg-to-css */
}
.uniSpeak__pseudoTitle::before {
  top: -0.3em;
  margin-left: calc(-1 * var(--blockquote-inline-size));
  padding-right: var(--blockquote-inline-size);
}
.uniSpeak__pseudoTitle::after {
  transform: rotate(180deg);
  left: 0.2em;
}
@media print {
  .uniSpeak__pseudoTitle::before, .uniSpeak__pseudoTitle::after,
  .uniSpeak__pseudoTitle br {
    display: none;
  }
}

.uniSpeak__introText {
  grid-area: introText;
  align-self: start;
  border-left: 0.25rem solid var(--color-primary);
  font-weight: 500;
  padding-left: 0.75rem;
  max-width: 25rem;
  z-index: 1;
}
@media print {
  .uniSpeak__introText {
    max-width: 100%;
  }
}

.uniSpeak__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1.375rem;
  padding-bottom: 1.875rem;
}
@media (min-width: 50em) {
  .uniSpeak__content {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
}
@media print {
  .uniSpeak__content {
    padding: 0;
  }
}

.strapline {
  display: none;
}
.strapline::before {
  content: "";
  display: block;
  position: absolute;
  top: 9.5rem;
  left: 50%;
  height: 3.75rem;
  width: 0.0625rem;
  background-color: currentcolor;
}
.strapline--left {
  left: 2rem;
  transform: scale(-1) translateY(calc(-50% + 3.75rem));
}
.strapline--right {
  right: 2rem;
  transform: translateY(calc(-50% + 0.5rem));
}
@media (min-width: 65em) {
  .strapline {
    display: block;
    position: absolute;
    top: 50%;
    mix-blend-mode: luminosity;
    margin-top: 0;
    color: var(--color-black-400);
    line-height: 1;
    writing-mode: vertical-lr;
  }
}

.gdprBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-black-800);
  z-index: 1000;
  color: var(--color-white);
  padding: 2rem 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gdprBanner p {
  margin: 0;
  max-width: 76%;
}

.pill {
  border-radius: 6.25rem;
  padding: 0.5rem 0.625rem 0.5rem 1rem;
  background-color: var(--color-white);
  color: var(--color-black);
  white-space: nowrap;
  margin-right: 0.5rem;
  margin-bottom: 0;
}
.pill--dark {
  background-color: var(--color-black-600);
  color: var(--color-white);
}
.pill .svg-inline--fa {
  top: 0;
  margin-left: 0.375rem;
  font-size: 0.875rem;
}

.pill__list {
  display: flex;
  list-style-type: none;
  overflow-x: scroll;
  margin: 0 0 0 0.5rem;
  padding-left: 0;
  padding-bottom: 2rem;
}
.pill__list li {
  margin-bottom: 0;
}

.ecu-forms fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}
.ecu-forms legend {
  display: none;
}
.ecu-forms .form-group {
  margin: 0;
  width: 100%;
}
.ecu-forms .control-label {
  display: block;
  font-size: 1.125rem;
  margin-top: 1.125rem;
}
.ecu-forms .control-label.xSubmit {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}
.ecu-forms .control-label.xSubmit:active, .ecu-forms .control-label.xSubmit:focus-visible {
  clip-path: auto; /* 2 */
  height: auto;
  margin: 0;
  overflow: visible;
  position: static; /* 2 */
  width: auto;
  white-space: inherit;
}
.ecu-forms input[type=text], .ecu-forms input[type=email], .ecu-forms input[type=tel], .ecu-forms textarea {
  display: inherit;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  background-color: #f6f5f4;
  color: hsl(0, 0%, 5%);
}
.ecu-forms select[multiple=multiple] {
  display: inherit;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  padding: 0.75rem 1rem;
  background-color: #f6f5f4;
  color: hsl(0, 0%, 5%);
  padding: 0;
}
.ecu-forms select[multiple=multiple] option {
  padding: 1em;
}
.ecu-forms input[type=submit] {
  display: inline-block;
  position: relative;
  margin: 1.125rem 1rem 0 0;
  border-radius: var(--border-radius-button);
  border-style: solid;
  border-width: 0.125em;
  padding: 0.4375rem 1rem 0.3125rem;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  border-color: var(--color-black-800);
  background-color: var(--color-black-800);
  color: var(--color-white);
}
.ecu-forms .pristine-error, .ecu-forms .form-error {
  color: hsl(19, 100%, 50%);
  padding: 1rem 0;
  font-size: 1.25rem;
}
.ecu-forms .pristine-error {
  padding-top: 0.5rem;
  font-size: 1em;
}
.ecu-forms .has-danger input, .ecu-forms .has-danger textarea, .ecu-forms .has-danger select[multiple=multiple] {
  border: 0.0625rem solid hsl(19, 100%, 50%);
}
.ecu-forms label.radio {
  display: block;
  margin: 0.5rem 0 0;
}
.ecu-forms label.radio.inline {
  display: inline-block;
  margin-right: 1rem;
}
.ecu-forms label.radio input {
  margin-right: 0.5rem;
}
.ecu-forms .fa-star {
  margin-left: 0.5rem;
}
.ecu-forms .checkbox input[type=checkbox] {
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0.25rem 0.5rem 0 0;
}

.securityNotification {
  display: flex;
  padding: 1rem 0;
  border-top: 1px solid var(--color-black-800);
  border-bottom: 1px solid var(--color-black-800);
}
.securityNotification__lock {
  height: 3rem;
  width: auto !important;
  margin-right: 1rem;
}

.securityNotification ~ p {
  margin-top: 1.125rem;
}

.fs-form-background {
  margin: 1.125rem 0 0;
}

@media (min-width: 65em) {
  .fs-form-background {
    max-width: 75vw;
  }
}
@media (min-width: 90em) {
  .fs-form-background {
    max-width: 50vw;
  }
}
.remove-from-view {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}
.remove-from-view:active, .remove-from-view:focus-visible {
  clip-path: auto; /* 2 */
  height: auto;
  margin: 0;
  overflow: visible;
  position: static; /* 2 */
  width: auto;
  white-space: inherit;
}

.formSubmission {
  display: flex;
  flex-wrap: wrap;
}

.formSubmission .span7 {
  flex-basis: 100%;
}
@media (min-width: 65em) {
  .formSubmission .span7 {
    flex-basis: 55%;
  }
}

.formSubmission .span5 {
  flex-basis: 100%;
}
@media (min-width: 65em) {
  .formSubmission .span5 {
    flex-basis: 45%;
  }
}

.formSubmission .custom-shares {
  margin: 1rem 0;
}

.formSubmission .custom-shares ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.formSubmission .custom-shares li {
  margin: 0 0.5em;
}

.formSubmission .open-day-facebook {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.formSubmission .open-day-facebook h3 {
  width: 100%;
}

.formSubmission .open-day-facebook svg {
  margin-right: 1rem;
}

.formSubmission .open-day-info ul {
  list-style: none;
  padding: 0;
}

.ecu-forms .form-half-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 37.5em) {
  .ecu-forms .form-group-half {
    width: calc(50% - 1rem);
  }
}

.ecu-forms .radioWrapper {
  display: flex;
  margin-bottom: 1rem;
}
.ecu-forms .radioWrapper label {
  margin-left: 1rem;
}

.ecu-forms .eventType {
  display: flex;
  align-items: baseline;
}
.ecu-forms .eventType label {
  margin-right: 1rem;
}

.ecu-forms .noSessionWarning strong {
  font-size: 1.125rem;
}

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

@supports (display: grid) {
  @media (min-width: 65em) {
    .contextToggleWrapper {
      background-color: var(--color-black-050);
    }
    .contextToggleWrapper .aside {
      top: calc(4.5rem + 9.5rem);
    }
  }
}
@media (min-width: 64.0625em) {
  .contentWrapper--featureArticle {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-columns: minmax(0, 1fr) clamp(24rem, 40%, 30.875rem);
    gap: 0;
  }
}

.articleAside {
  margin: 3rem auto 0;
  border-top: 0.0625rem solid var(--color-black-100);
  padding-top: 1.5rem;
  max-width: 42rem;
}
.articleAside hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 0.0625rem solid var(--color-black-100);
}
.articleAside p {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
@media (min-width: 64.0625em) {
  .articleAside {
    height: 100%;
    margin: 0 0 0 3rem;
    margin-left: clamp(3rem, 4vw, 4.5rem);
    border-top: 0;
    border-left: 0.0625rem solid var(--color-black-100);
    padding: 0 0 0 3rem;
    padding-left: clamp(3rem, 4vw, 4.5rem);
  }
}

.articleAside__shareCount {
  display: flex;
  justify-content: space-between;
}
.articleAside__shareCount span {
  font-size: var(--font-s);
  line-height: 1.5384;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.56em;
}

.articleAside__share {
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}
.articleAside__share li {
  display: inline-block;
  margin: 0 1.5rem 0 0;
}
.articleAside__share li .svg-inline--fa {
  top: 0;
}

.articleFeatured {
  /* autoprefixer: off */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.65rem, 1fr));
  gap: 1.5rem;
}

.articleFeatured__author {
  /* autoprefixer: off */
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
}
.articleFeatured__author p {
  margin-bottom: 0;
}

.articleFeatured__portrait {
  border-radius: 0.1875rem;
}

.articleContent {
  position: relative;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
}
.articleContent h2:not(.base__font--strawberry) {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1.44rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin-top: 3rem;
}
.articleContent .featureCard h2,
.articleContent > div:first-child h2:first-child {
  margin-top: 0;
}
.articleContent h3 {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.articleContent h4 {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1rem;
}
.articleContent p,
.articleContent ul,
.articleContent ol {
  font-size: 1.125rem;
  line-height: 1.555;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.articleContent li {
  position: relative;
}
.articleContent .articleImportant,
.articleContent .articleNote,
.articleContent .articleQuote,
.articleContent .articleTip {
  margin-bottom: 1.5rem;
}
.articleContent .table {
  margin: 0 0 1.5rem;
}
.articleContent .glide__title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.articleContent .glide__arrows {
  flex-shrink: 0;
  margin: 0 0 1rem 1rem;
}
.articleContent .card {
  margin: 0 0 2.5em;
}
.articleContent .card img,
.articleContent .card .videoResponsive {
  border-radius: var(--border-radius-s);
}

.articleContent__caption,
.articleContent__caption p {
  font-size: var(--font-s);
  line-height: 1.5384;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1.56em;
  margin-top: 1rem;
}

.articleContent__keyPoints {
  margin: 0 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--color-black-100);
  border-bottom: 0.0625rem solid var(--color-black-100);
}
.articleContent__keyPoints ul {
  list-style-type: none;
  padding-left: 1.1875rem;
}
.articleContent__keyPoints li::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  left: -1rem;
  top: 0.6em;
  background-color: var(--color-primary);
}

.categoryPills {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: calc(100% + 0.25rem);
  padding: 0;
  margin: -0.5rem 0 0 -0.25rem;
  list-style-type: none;
}

.categoryPill {
  margin: 0.5rem 0 0 0.25rem;
  text-align: center;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0;
}
.categoryPill input {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.categoryPill label {
  display: block;
}
.categoryPill a {
  text-decoration: none;
}
.categoryPill--static,
.categoryPill label {
  border: 0.0625rem solid var(--color-black);
  border-radius: 6.25rem;
  padding: 0.125rem 1.25rem;
}
.categoryPill--active,
.categoryPill input:checked + label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-black);
  color: var(--color-white);
}

.categorySection {
  padding-bottom: 2rem;
}
.categorySection .button {
  margin: 2rem 0 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 65em) {
  .categorySection {
    padding-bottom: 3.5rem;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    left: -2rem;
  }
  80% {
    opacity: 1;
    left: 1px;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes arrow-slide-in {
  0% {
    left: -6rem;
  }
  80% {
    left: 1px;
  }
  100% {
    left: 0;
  }
}
@keyframes pop-out {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pop-out-small {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* My Uni Start landing page */
.contentWrapper--orientation {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 100%;
  gap: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 4.5rem;
}
@media (min-width: 37.5em) {
  .contentWrapper--orientation {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4.5rem;
  }
}
@media (min-width: 64.0625em) {
  .contentWrapper--orientation {
    grid-template-rows: repeat(3, auto);
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem 6.5rem;
    padding-top: 4.75rem;
  }
}
@media print {
  .contentWrapper--orientation {
    display: block;
    padding: 0 0 1rem;
  }
}

.currentStudents__wrapper {
  padding-right: 4vw;
  padding-left: 4vw;
  position: relative;
}
@media (min-width: 90em) {
  .currentStudents__wrapper {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}

.currentStudents__wrapper--flexContent {
  margin-top: -0.5rem;
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 37.5em) {
  .currentStudents__wrapper--flexContent {
    padding-right: 4vw;
    padding-left: 4vw;
  }
}
@media (min-width: 90em) {
  .currentStudents__wrapper--flexContent {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media (min-width: 50em) {
  .currentStudents__wrapper--flexContent {
    margin-top: -4rem;
  }
}
@media (min-width: 64.0625em) {
  .currentStudents__wrapper--flexContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -4.75rem;
  }
}
@media print {
  .currentStudents__wrapper--flexContent {
    margin-top: 0;
  }
}

.currentStudents__inner {
  position: relative;
  margin: 0 0 2rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
@media (min-width: 50em) {
  .currentStudents__inner {
    margin-bottom: 3rem;
  }
}
@media (min-width: 64.0625em) {
  .currentStudents__inner {
    flex-basis: 70%;
    border-radius: var(--border-radius);
  }
}
@media (min-width: 65em) {
  .currentStudents__inner {
    margin-bottom: 5.5rem;
  }
}
@media print {
  .currentStudents__inner {
    flex-basis: 100%;
    margin-bottom: 1rem;
  }
}

.article {
  height: fit-content;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background-color: var(--color-white);
  padding: 3.5rem 4vw;
}
.article img {
  margin: 1.125rem 0 0;
}
.article--glossary h2 {
  margin: 0;
  padding-bottom: 1rem;
  color: var(--color-primary);
}
@media (min-width: 50em) {
  .article {
    border-radius: var(--border-radius);
  }
}
@media (min-width: 90em) {
  .article {
    padding-left: 4.25rem;
    padding-right: 4.25rem;
  }
}

.article--glossary .accordion {
  border-top: 0.125rem solid hsl(208, 12%, 53%);
  margin-top: 0;
  margin-bottom: 3rem;
}

.article__note {
  padding: 1.5rem;
  margin: 1.125rem -4vw 0;
  background-color: var(--color-ecru);
}
.article__note > *:first-child {
  margin-top: 0;
}
@media (min-width: 37.5em) {
  .article__note {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-s);
    border: 0.125rem solid var(--color-ecru);
    background-color: transparent;
  }
}
.article__note--important {
  border: 0;
  background-color: var(--color-ecru);
}
.article__note--activationError {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 0;
  background-color: var(--color-black-800);
  color: var(--color-white);
}
.article__note--success {
  border-color: var(--color-current-student-green-100);
  background-color: var(--color-white);
}
.article__note--success svg {
  color: var(--color-current-student-green-100);
}

.article__note--important .article__noteTitle {
  color: var(--color-alert-red-600);
}
.article__note--activationError .article__noteTitle {
  color: hsl(19, 100%, 50%);
}

.myUniStart__important.myUniStart__important--activationError {
  padding: 1.5rem;
  margin: 1.125rem -4vw 0;
  background-color: var(--color-black-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-white);
}
.myUniStart__important.myUniStart__important--activationError > *:first-child {
  margin-top: 0;
}
@media (min-width: 37.5em) {
  .myUniStart__important.myUniStart__important--activationError {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-s);
  }
}

.myUniStart__importantHead {
  position: relative;
  font-weight: 500;
  margin: 1.375rem 0 0;
  color: hsl(19, 100%, 50%);
  font-size: 1rem;
  line-height: 1.5em;
  letter-spacing: 0;
}
@media (min-width: 65em) {
  .myUniStart__importantHead {
    font-size: 1.125rem;
    line-height: 1.3333em;
    letter-spacing: 0;
  }
}

.articleExcerpts {
  padding: 2rem 4vw 1rem;
  background: var(--color-ecru);
}
.articleExcerpts h2 {
  margin: 0 auto -0.5rem;
}
.articleExcerpts .card img {
  height: 12rem;
  object-fit: cover;
}
@media (min-width: 90em) {
  .articleExcerpts {
    padding: 2.5rem 4.25rem 1rem;
  }
}

.articleExcerpts--secondary {
  background-color: var(--color-white);
  padding-bottom: 2rem;
}
.articleExcerpts--secondary .card {
  background-color: var(--color-ecru);
}
@media print {
  .articleExcerpts--secondary {
    display: none;
  }
}
@media (min-width: 50em) {
  .articleExcerpts--secondary {
    padding-bottom: 5rem;
  }
}

@supports (display: grid) {
  /* autoprefixer: off */
  @media (min-width: 37.5em) {
    .articleExcerpts .card:last-child:nth-of-type(odd) {
      grid-column: 1/3;
      width: calc(50% - 1rem);
      margin: 0 auto;
    }
  }
  @media (min-width: 65em) {
    .articleExcerpts .card:last-child:nth-of-type(odd) {
      width: calc(50% - 1.5rem);
    }
  }
}
.articleNavigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  top: -2rem;
  margin-bottom: 0.5rem;
  padding: 0 0 0 1rem;
}
.articleNavigation .svg-inline--fa {
  position: relative;
  left: -0.5rem;
}
@media (min-width: 50em) {
  .articleNavigation {
    top: -3rem;
  }
}
@media (min-width: 64.0625em) {
  .articleNavigation {
    top: -5.5rem;
  }
}
@media print {
  .articleNavigation {
    display: none;
  }
}

.articleNavigation__next .svg-inline--fa {
  left: unset;
  right: -0.5rem;
}
.articleNavigation__next:only-child {
  margin-left: auto;
}

.breakout {
  margin-top: 1.5rem;
}
@media (min-width: 50em) {
  .breakout {
    margin-top: 2.5rem;
  }
}

.breakout__header {
  margin: 0 -4vw 2rem;
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0007/832552/breakout-header.jpg");
  background-size: cover;
  background-color: var(--color-black-800);
  padding: 2rem 4vw;
  color: var(--color-white);
}
@media (min-width: 90em) {
  .breakout__header {
    margin: 0 -4.25rem 3.5rem;
    padding-right: 4.25rem;
    padding-left: 4.25rem;
  }
}
.breakout__header h2 {
  margin: 0;
}
.breakout__header--essential {
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0005/873428/breakout-header-essentials.jpg");
}
.breakout__header--courseInduction {
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0007/873430/breakout-header-courseinduction.jpg");
}
.breakout__header--studySkills {
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0008/873431/breakout-header-studyskills.jpg");
}
.breakout__header--wellness {
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0009/873432/breakout-header-wellness.jpg");
}
.breakout__header--full {
  background-image: url("https://www.ecu.edu.au/__data/assets/image/0010/873433/breakout-header-full.jpg");
}

.checklist {
  position: fixed;
  top: 4.125rem;
  left: 100vw;
  width: 100%;
  max-width: 100vw;
  height: calc(100vh - 4.125rem);
  flex-basis: 100vw;
  overflow: scroll;
  transform-style: preserve-3d;
  transition: left 0.4s ease-in-out;
  background-color: var(--color-black-600);
  color: var(--color-white);
  z-index: 1;
}
@media (min-width: 37.5em) {
  .checklist {
    max-width: 400px;
  }
}
@media (min-width: 64.0625em) {
  .checklist {
    margin: 0;
    top: 0;
    position: relative;
    left: auto;
    flex-basis: 25%;
    width: auto;
    height: fit-content;
    margin-bottom: 3rem;
    border-radius: var(--border-radius);
    padding-bottom: 0.75rem;
    overflow: hidden;
  }
}
@media (min-width: 65em) {
  .checklist {
    margin-bottom: 5.5rem;
  }
}
@media print {
  .checklist {
    display: none;
  }
}

.checklist--active {
  width: 100%;
  left: 0;
}
@media (min-width: 37.5em) and (max-width: 64.0625em) {
  .checklist--active {
    left: calc(100vw - 400px);
  }
}

.checklist__header {
  position: relative;
  background-color: var(--color-white);
  padding: 1.75rem 1rem 2.25rem;
  text-align: center;
}
.checklist__header h2 {
  margin: 0;
}
.checklist__header p {
  margin: 0.625rem 0 0;
  color: var(--color-black);
}

.checklist__headerArrow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.25rem;
  color: var(--color-black-600);
}

.checklist .accordion {
  margin: 0;
  text-shadow: var(--drop-shadow-text);
}

.checklist .accordion__item {
  border-bottom: 0;
  background-color: var(--color-black-700);
}

.checklist .accordion__title {
  background: linear-gradient(to top, var(--color-black-700), var(--color-black-600));
  padding: 1rem 3rem 1rem 1.5rem;
  line-height: 1.3;
  color: var(--color-primary);
  z-index: inherit;
}
.checklist .accordion__title::before {
  right: 1.3125rem;
  width: 0.875rem;
}
.checklist .accordion__title::after {
  right: 1.675rem;
  height: 0.875rem;
}
.checklist .accordion__title span {
  display: block;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
}

.checklist .accordion__body--open {
  padding: 0;
}

.checklist__steps {
  margin: 0;
  padding: 0;
  list-style-type: none !important;
}

.checklist__step {
  display: flex;
  position: relative;
  margin: 0;
  background-color: var(--color-black-500);
  padding: 1.25rem 1.5rem;
  transition: 0.2s all ease-in-out;
}
.checklist__step--checked {
  background-color: var(--color-black-600);
  transition: 0.2s all ease-in-out;
}
.checklist__step--active {
  border-left: 0.25rem solid var(--color-primary);
  padding-left: 1.25rem;
  transition: 0.2s all ease-in-out;
}

.checklistIcon {
  position: relative;
  overflow: visible !important;
  order: -1;
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.625rem;
}

.checklistIcon__disabled {
  fill: var(--color-black-600);
}

.checklistIcon__checked {
  opacity: 0;
  transform: scale(0);
  transition: 0.2s all ease-in-out;
  transform-origin: center;
}
.checklist__step--checked .checklistIcon__checked {
  opacity: 1;
  transform: scale(1);
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-name: pop-out-small;
  animation-duration: 0.5s;
  fill: var(--color-primary);
}

.checklistIcon__checkmark {
  opacity: 0;
  transform: scale(0);
  transition: 0.2s all ease-in-out;
  transform-origin: center;
}
.checklist__step--checked .checklistIcon__checkmark {
  opacity: 1;
  transform: scale(1);
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-name: pop-out;
  animation-duration: 0.4s;
  fill: var(--color-white);
}

.checklist__stepTitle,
.accordion__body--open .checklist__stepTitle {
  margin-top: 0;
}

.checklist__registerNotificationWrap {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 26, 26, 0.7);
  z-index: 1;
}
@media (min-width: 64.0625em) {
  .checklist__registerNotificationWrap {
    border-radius: var(--border-radius);
  }
}

.checklist__registerNotification {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 90%;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  padding: 2.425rem 1.5rem;
  color: var(--color-black);
}
.checklist__registerNotification h2 {
  margin-top: 0;
}
.checklist__registerNotification .button {
  border-color: var(--color-black); /* change border color instead of zeroing out border then adjusting padding */
  background: var(--color-black);
  color: var(--color-white);
}

.checklistTrigger__notification {
  border: 0.1875rem solid var(--color-black-800);
  display: block;
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: hsl(19, 100%, 50%);
  color: var(--color-white);
  font-size: 0.5125rem;
  text-align: center;
  padding-top: 0.05rem;
  top: -0.25rem;
  right: 0.25rem;
}

.events {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-s);
  height: 100%;
  text-align: left;
  color: var(--color-black);
}
@media (min-width: 37.5em) {
  .events {
    flex-direction: row;
  }
}

.events__container {
  flex-basis: 100%;
  padding: 1.5rem 1.75rem;
  border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
  background-image: linear-gradient(90deg, hsl(40, 10%, 94%) 0%, hsl(40, 10%, 92%) 100%);
}
.events__container .base__heading {
  margin-top: 0;
}
.events__container .button {
  margin-right: 0;
  float: right;
}
@media (min-width: 37.5em) {
  .events__container {
    border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
  }
}

.events__calendar {
  border-radius: var(--border-radius-s) var(--border-radius-s) 0 0;
  background-color: var(--color-white);
  padding: 0.5rem 1.75rem;
  font-weight: 500;
}
@media (min-width: 37.5em) {
  .events__calendar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 4rem;
    flex-shrink: 0;
    border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
    padding: 1.625rem 0;
  }
}

.events__day {
  margin-top: 0;
  color: var(--color-red);
}

.events__date {
  margin: 0 0.125rem;
}
@media (min-width: 37.5em) {
  .events__date {
    font-size: 1.375rem;
    line-height: 1.27em;
    letter-spacing: 0;
  }
}

.events__month {
  margin-top: 0;
  text-transform: uppercase;
}
@media (min-width: 37.5em) {
  .events__month {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}

/* Event details */
.eventDetails {
  display: flex;
  flex-wrap: wrap; /* time and venue on seperate lines as needed */
  gap: 0 0.75rem;
}
.eventDetails span {
  display: flex; /* prevent text from spilling underneath icon */
  align-items: center; /* center icon (prevent browser discrepancies) */
}

.eventItem {
  padding: 1.5rem;
  margin: 1.125rem -4vw 0;
  background-color: var(--color-ecru);
}
.eventItem > *:first-child {
  margin-top: 0;
}
@media (min-width: 37.5em) {
  .eventItem {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-s);
  }
}

/* used on https://wwwqa.ecu.edu.au/my-uni-start/enrolling/course-and-enrolment-information
  from Funnelback?
*/
.file-size-text {
  font-size: var(--font-s);
}

/* My Uni Start home and categories */
.heroBanner--landing h1 {
  display: inline;
  z-index: 1;
}
.heroBanner--landing span {
  animation: slide-in 1.2s ease-in-out 0.333s both;
  z-index: 1;
  vertical-align: baseline;
}

.heroBanner__icon {
  display: none;
}
@media (min-width: 22em) {
  .heroBanner__icon {
    display: inline;
    animation: arrow-slide-in 1.2s ease-in-out 0.333s both;
    z-index: -1;
    position: relative;
    height: 0.7125em;
    width: 1.425em;
    margin-left: -0.5em;
    color: var(--color-primary);
    vertical-align: baseline;
  }
}

.heroBanner__icon-1 {
  animation: fade-in 1s ease-in-out 0.2664s both;
}

.heroBanner__icon-2 {
  animation: fade-in 1s ease-in-out 0.5328s both;
}

.heroBanner__icon-3 {
  animation: fade-in 1s ease-in-out 0.7992s both;
}

.loginForm {
  position: absolute;
  background: hsl(40, 10%, 92%);
  padding: 1.625rem 1.5rem;
  right: 50%;
  transform: translateX(50%);
  width: 100vw;
  color: var(--color-black);
  box-shadow: 0 2px 44px 0 rgba(28, 28, 27, 0.24);
  transition: 0.5s all ease-in-out;
  margin-top: -100px;
  opacity: 0;
  visibility: hidden;
}
.loginForm--visible {
  margin-top: auto;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 37.5em) {
  .loginForm {
    border-radius: var(--border-radius-s);
    width: 60vw;
    margin-top: 1rem;
  }
}
@media (min-width: 64.0625em) {
  .loginForm {
    width: 26rem;
    transform: none;
    right: 4vw;
  }
}
@media (min-width: 90em) {
  .loginForm {
    right: calc(50vw - 44rem);
    right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}

@media (min-width: 64.0625em) {
  .loginForm::before {
    content: "";
    position: absolute;
    right: 1.75rem;
    top: -0.8rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 1rem 1rem;
    border-color: transparent transparent hsl(40, 10%, 92%) transparent;
  }
}

.mobileMenuWrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100vw;
  width: 100vw;
  background-color: var(--color-black-800);
  color: var(--color-white);
  z-index: 9;
  transition: left 0.4s ease-in-out;
}
.mobileMenuWrap--active {
  left: 0;
}
@media (min-width: 64.0625em) {
  .mobileMenuWrap {
    display: none;
  }
}

.mobileMenu {
  display: flex;
  flex-direction: column;
  padding: 25vh 2.25rem;
}

.mobileMenu__item {
  margin-top: 1.125rem;
}
.mobileMenu__item a {
  text-decoration: none;
}

.profile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 3.3rem;
  margin-right: 0.75rem;
}
.profile[disabled] {
  opacity: 0.32;
}
.header--scrolled .profile {
  padding: 0;
}

.profile__icon {
  border-radius: 50%;
  block-size: 2.5rem;
  inline-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  text-align: center;
}
.profile__icon span {
  font-size: 1.125rem;
  line-height: 1em;
}
.profile__icon svg {
  block-size: 2.5rem;
  inline-size: 2.5rem;
  color: var(--color-white); /* white svg on primary background */
}

.profile--inactive .profile__icon {
  background-color: var(--color-primary); /* change backgound colour when user is logged out */
}

.myUniStart__body .profile__icon {
  color: var(--color-primary);
}

.profile__name {
  font-size: 1rem;
  display: none;
  transition: all 0.5s ease-in-out;
  max-height: 2rem;
}
@media (min-width: 64.0625em) {
  .profile__name {
    display: inline-block;
  }
}
.header--scrolled .profile__name {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}

.profile__arrow {
  position: absolute;
  right: -0.75rem;
  height: 1rem;
}
@media (min-width: 64.0625em) {
  .profile__arrow {
    top: 1.5rem;
  }
}
.header--scrolled .profile__arrow {
  top: 0.8rem;
}

.stepOverview {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  margin-bottom: 1.375rem;
}
@media print {
  .stepOverview {
    break-inside: avoid;
  }
}

@media (min-width: 37.5em) {
  .stepOverview:nth-of-type(odd) {
    justify-self: end;
  }
}
.stepOverview img {
  order: -1;
  max-width: 75%;
}
@media (min-width: 37.5em) {
  .stepOverview img {
    object-fit: contain;
    height: 16.5rem;
    max-width: 100%;
  }
}
@media (min-width: 64.0625em) {
  .stepOverview img {
    height: 22.5rem;
  }
}
@media print {
  .stepOverview img {
    height: 4rem;
  }
}

.stepOverviewIntro {
  font-weight: 500;
}
@media (min-width: 37.5em) {
  .stepOverviewIntro {
    grid-column: 1/3;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
@media print {
  .stepOverviewIntro {
    margin-bottom: 1.5rem;
    text-align: left;
  }
}

.welcomeBanner {
  padding-right: 4vw;
  padding-left: 4vw;
  padding-top: 2.65rem;
  padding-bottom: 2.65rem;
  background-color: var(--color-primary);
  color: var(--color-black); /* increase contrast on primary background */
}
@media (min-width: 90em) {
  .welcomeBanner {
    padding-right: calc(50vw - 44rem);
    padding-left: calc(50vw - 44rem);
    padding-right: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
    padding-left: clamp(4vw, calc(50vw - 44rem), calc(50vw - 44rem));
  }
}
@media print {
  .welcomeBanner {
    padding: 0 0 1rem;
  }
}
.welcomeBanner .button--orange {
  background-color: var(--color-black);
  color: var(--color-white);
}

.welcomeBanner__wrapper {
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
}
.welcomeBanner__wrapper h2 {
  margin-top: 0;
}
@media (min-width: 50em) {
  .welcomeBanner__wrapper {
    padding-left: 20rem;
  }
}

@media (min-width: 50em) {
  .welcomeBanner__checklist {
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(14, 24, 32, 0) 0%, rgba(14, 24, 32, 0) 20%, hsl(208, 38%, 9%) 95%), url("https://www.ecu.edu.au/__data/assets/image/0003/1099038/checklist-2025.png");
    background-size: cover;
    background-position: 0 0;
    left: 0;
    bottom: -2.65rem;
    height: 18rem;
    width: 16rem;
  }
}
@media (min-width: 65em) {
  .welcomeBanner__checklist {
    height: 20.125rem;
  }
}

.myUniStart__body {
  background: var(--color-ecru);
  color: var(--color-black-600);
}

@media (min-width: 65em) {
  .myUniStart__dualColumns {
    columns: 2;
    column-gap: 5rem;
  }
}

.myUniStart__registration {
  margin: 0 auto;
  padding: 3.5rem 4vw;
  text-align: center;
}
.myUniStart__registration hr {
  width: 80%;
  margin: 1.125rem auto 0;
  height: 2px;
  border: 0;
  background-color: hsl(44, 10%, 75%);
}
.myUniStart__registration .pristine-error {
  width: 100%;
  text-align: left;
}
.myUniStart__registration .g-recaptcha {
  margin-top: 1.125rem;
}
.myUniStart__registration .button {
  margin-right: 0;
}
@media (min-width: 37.5em) {
  .myUniStart__registration {
    width: 55vw;
    min-width: 375px;
    padding: 10vh 0;
  }
}

.myUniStart__registrationHolder h2,
.myUniStart__registrationFeedback h2 {
  margin-top: 0;
}
.myUniStart__registrationHolder p,
.myUniStart__registrationFeedback p {
  margin-left: auto;
  margin-right: auto;
}

.myUniStart__registration--processing {
  padding: 20vh 0;
}

.myUniStart__registrationForm {
  margin: 0 auto;
}
.myUniStart__registrationForm input[type=text],
.myUniStart__registrationForm input[type=email] {
  background-color: var(--color-white);
  border-radius: 0.1875rem;
}
.myUniStart__registrationForm input[type=radio] {
  transform: scale(1.3);
  margin: 0.8rem 0.4rem;
}
.myUniStart__registrationForm .button--orange {
  width: 100%;
}
.myUniStart__registrationForm .selectWrap {
  position: relative;
}
@media (min-width: 50em) {
  .myUniStart__registrationForm {
    width: 80%;
    max-width: 33.125rem;
  }
}

.myUniStart__registrationForm .selectWrap svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .myUniStart__registrationForm .selectWrap svg {
    display: none;
  }
}

.myUniStart__registrationHidden {
  display: none;
}

.formInput {
  margin: 1.125rem 0 0;
}
.formInput label {
  display: block;
  text-align: left;
  padding: 0;
  margin-bottom: 0.2rem;
}
.formInput input, .formInput select {
  appearance: none;
  width: 100%;
  border-width: 0;
  border-radius: 0.1875rem;
  background-color: var(--color-white);
  padding: 0.8rem 1.25rem;
}
.formInput input[type=submit] {
  width: fit-content;
  border-radius: var(--border-radius-button);
  background: var(--color-primary);
  font-weight: 500;
}
.formInput input ~ span {
  display: block;
  margin-top: 0.25rem;
}

/* rcoObject - accept offer RCO
===================================================== */
.myUniStart__rcoObject {
  padding: 1.5rem;
  margin: 1.125rem -4vw 0;
  background-color: var(--color-ecru);
}
.myUniStart__rcoObject > *:first-child {
  margin-top: 0;
}
@media (min-width: 37.5em) {
  .myUniStart__rcoObject {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--border-radius-s);
  }
}
.myUniStart__rcoObject h2 {
  font-size: 1.375rem;
}
.myUniStart__rcoObject fieldset {
  margin: 0;
  border: 0;
  padding: 0;
}
.myUniStart__rcoObject label {
  font-weight: 400;
  color: var(--color-black-800);
}

.myUniStart__contentColumnWrap {
  display: flex;
  flex-wrap: wrap;
}

.myUniStart__contentColumn {
  flex-basis: 100%;
  margin-right: 0;
  flex-grow: 1;
}
@media (min-width: 64.0625em) {
  .myUniStart__contentColumn {
    flex-basis: 0;
  }
}

@media (min-width: 64.0625em) {
  .myUniStart__contentColumn:not(:last-of-type) {
    margin-right: 2rem;
  }
}

.myUniStart__deferForm input[type=text],
.myUniStart__deferForm input[type=email],
.myUniStart__deferForm textarea {
  background-color: var(--color-white);
}

.myUniStart__deferForm .pristine-error {
  display: unset;
  position: unset;
}
@media (max-width: 37.5em) {
  .myUniStart__deferForm .control-group,
  .myUniStart__deferForm p {
    width: 88%;
  }
  .myUniStart__deferForm .control-label {
    font-size: 1rem;
  }
  .myUniStart__deferForm .g-recaptcha {
    transform: scale(0.8);
  }
}

.myUniStart__body .deactivateItems {
  display: none;
}

@media print {
  * {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--color-black) !important;
    box-shadow: none !important;
    columns: auto !important;
  }
  /* Article content */
  .articleWrapper {
    padding: 1rem 0;
  }
  .articleWrapper h1,
  .articleWrapper h2,
  .articleWrapper h3,
  .articleWrapper h4,
  .articleWrapper h5 {
    break-inside: avoid;
  }
  .articleWrapper img {
    display: none;
  }
  .myUniStart__important {
    border: 0.125rem solid hsl(19, 100%, 34%);
  }
  .myUniStart .button--orange {
    color: var(--color-black-600);
    border-color: var(--color-black-600);
    text-shadow: none;
    background-image: none;
  }
  /* Article Excerpts */
  .card__text,
  .card__highlight {
    padding: 0.5rem 0;
  }
  .card::after {
    box-shadow: none;
  }
  /* Hide internal links */
  a[href^="#"] {
    display: none;
  }
  /* Append external links */
  a[href^="http://"], a[href^="https://"] {
    overflow-wrap: break-word;
    color: var(--color-black-600);
  }
  a[href^="http://"]::after, a[href^="https://"]::after {
    content: " (" attr(href) ")";
  }
}
.blockquote {
  position: relative;
  padding: 1.5rem 1.5rem 0.5rem 4.5rem;
  margin-block: 2.5rem;
  margin-inline: 0;
}
@media (min-width: 37.5em) {
  .blockquote {
    background-color: var(--color-ecru);
    border-radius: var(--border-radius-s);
  }
}
.blockquote p {
  font-weight: 500;
  max-width: 42rem;
  font-size: 1.44rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  letter-spacing: 0;
  max-width: 100% !important;
}
.blockquote footer {
  margin-bottom: 1rem;
}
.blockquote cite {
  font-weight: 400;
  font-style: unset;
}

/*
Uses background svg for background image
https://www.svgbackgrounds.com/tools/svg-to-css
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 24" fill="none">
  <path d="M1.42 24c-.378 0-.68-.113-.906-.34-.151-.302-.151-.641 0-1.018L8.664.905C8.892.302 9.307 0 9.91 0h6.113c.377 0 .642.113.793.34.226.226.301.528.226.905l-6 21.736c-.151.68-.566 1.019-1.245 1.019H1.419Zm16.867 0c-.377 0-.68-.113-.905-.34-.151-.302-.151-.641 0-1.018L25.419.905C25.646.302 26.061 0 26.664 0h6.114c.377 0 .641.113.792.34.227.226.302.528.227.905L27.91 22.981c-.151.68-.566 1.019-1.245 1.019h-8.378Z" fill="#fff"/>
</svg>

*/
.blockquote::before {
  content: "";
  display: block;
  position: absolute;
  left: 1.5rem;
  top: 1.5em;
  inline-size: 2.089rem;
  block-size: 1.5rem;
  background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 34 24\" fill=\"none\"><path d=\"M1.42 24c-.378 0-.68-.113-.906-.34-.151-.302-.151-.641 0-1.018L8.664.905C8.892.302 9.307 0 9.91 0h6.113c.377 0 .642.113.793.34.226.226.301.528.226.905l-6 21.736c-.151.68-.566 1.019-1.245 1.019H1.419Zm16.867 0c-.377 0-.68-.113-.905-.34-.151-.302-.151-.641 0-1.018L25.419.905C25.646.302 26.061 0 26.664 0h6.114c.377 0 .641.113.792.34.227.226.302.528.227.905L27.91 22.981c-.151.68-.566 1.019-1.245 1.019h-8.378Z\" fill=\"%23b6e5dc\"/></svg>");
  background-size: contain;
}
@media (min-width: 37.5em) {
  .blockquote::before {
    background-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 34 24\" fill=\"none\"><path d=\"M1.42 24c-.378 0-.68-.113-.906-.34-.151-.302-.151-.641 0-1.018L8.664.905C8.892.302 9.307 0 9.91 0h6.113c.377 0 .642.113.793.34.226.226.301.528.226.905l-6 21.736c-.151.68-.566 1.019-1.245 1.019H1.419Zm16.867 0c-.377 0-.68-.113-.905-.34-.151-.302-.151-.641 0-1.018L25.419.905C25.646.302 26.061 0 26.664 0h6.114c.377 0 .641.113.792.34.227.226.302.528.227.905L27.91 22.981c-.151.68-.566 1.019-1.245 1.019h-8.378Z\" fill=\"%23fff\"/></svg>");
  }
}

.contentHighlight--infographics {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  margin: 0 0 2rem;
  padding: 1rem 0;
}
@media (min-width: 65em) {
  .contentHighlight--infographics {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }
}

.infographic {
  flex: 1 1 10rem;
  margin: 1rem 1.5rem;
  text-align: center;
}
.infographic:only-child {
  flex-basis: 100%;
}
@media (min-width: 37.5em) {
  .infographic {
    flex-basis: 15rem;
    flex-grow: 0;
  }
  .infographic:only-child {
    flex-basis: 20rem;
  }
}
@media (min-width: 65em) {
  .infographic {
    margin: 1rem 2.25rem;
  }
}

.infographic__image {
  max-height: 12rem;
}
.infographic__image:not(.infographic__image--noCaption) {
  width: 50%;
}

.infographic__caption {
  margin-top: 1rem;
}

@media (min-width: 37.5em) {
  .accordion--uniSpeak {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
}

.accordion__span ul {
  padding: 0;
  margin-left: 0;
  list-style-type: none;
}
@media (min-width: 37.5em) {
  .accordion__span {
    width: calc(50% - 1em);
  }
}

.visuallyHidden {
  border: 0;
  clip-path: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}
.visuallyHidden:active, .visuallyHidden:focus-visible {
  clip-path: auto; /* 2 */
  height: auto;
  margin: 0;
  overflow: visible;
  position: static; /* 2 */
  width: auto;
  white-space: inherit;
}

a > svg {
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
}

/* stylelint-disable */
#acceptOffer .formInput:last-of-type {
  margin-bottom: 1.3rem;
}

#accountForm .ecu-forms-label {
  font-size: 1rem;
}

#passwordForm h3:not(:first-of-type) {
  margin-top: 3rem;
}

#passwordForm .control-label {
  font-size: 1rem;
}

#passwordForm input[type=checkbox] {
  transform: scale(2);
  margin: 0.5rem 0.5rem 0;
}

#passwordForm .selectWrap {
  position: relative;
}
#passwordForm .selectWrap svg {
  position: absolute;
  right: 1rem;
  top: 20%;
  transform: translateY(-20%);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #passwordForm .selectWrap svg {
    display: none;
  }
}

#passwordForm #challengeA1,
#passwordForm #challengeA2,
#passwordForm #challengeA3 {
  margin-top: 1.125rem;
}

#passwordForm .formTermsConditions {
  margin-top: 1.125rem;
}

#accountForm button#xSubmit,
#passwordForm button#xSubmit {
  margin: 0;
  width: fit-content;
}

#passwordForm button#xCancel {
  margin: 1.125rem 0 0;
  width: 100%;
  font-weight: 500;
}

.formError .formErrorContent {
  font-weight: 500;
  width: 200px;
  font-size: 1rem;
  background-color: var(--color-black-600);
  color: var(--color-white);
  padding: 0.5rem;
  border: none;
}

.formError .formErrorArrow div {
  display: none;
}

.personIdformError {
  margin-top: -4rem;
  margin-left: -7rem;
}

.dateOfBirthformError {
  margin-top: -7rem;
  margin-left: -7rem;
}

#passwordForm .challengeA1formError .formErrorContent {
  margin-left: -5rem;
  margin-top: -0.9rem;
}

#passwordForm .challengeA2formError .formErrorContent {
  margin-left: -5rem;
  margin-top: -0.9rem;
}

#passwordForm .challengeA3formError .formErrorContent {
  margin-left: -5rem;
  margin-top: -0.9rem;
}

#passwordForm .passwordformError .formErrorContent {
  margin-left: -5rem;
  margin-top: -2.8rem;
  width: 15rem;
}

#passwordForm .confirmPasswordformError .formErrorContent {
  margin-left: -5rem;
  margin-top: -2.8rem;
  width: 15rem;
}

#passwordForm .confirmTAndCformError .formErrorContent {
  margin-left: 1.5rem;
  margin-top: -1.5rem;
  width: 15rem;
}

/* stylelint-enable */