/* =========================================================
   LAND OF OPPORTUNITY
   University Advancement
   Bootstrap 5.1.3
   External reusable stylesheet

   Canonical component class names:
   Hero:        .loo-hero
   Students:    .loo-students
   Video:       .loo-video
   Impact:      .loo-impact
   Quotes:      .loo-quotes
   Legacy:      .loo-legacy
   Final CTA:   .loo-cta
   ========================================================= */

/* =========================================================
   1. VARIABLES / SHARED
   ========================================================= */

:root {
  --loo-red: #A1002F;
  --loo-black: #000000;
  --loo-white: #FFFFFF;
  --loo-light-gray: #E0E0E1;
  --loo-focus: #FFBF47;
}

#main-content > .col > p:has(+ section[class^="loo-"]) {
  margin: 0 !important;
  padding: 0 !important;
  height: 0;
  line-height: 0;
}

.loo-hero,
.loo-students,
.loo-video,
.loo-impact,
.loo-quotes,
.loo-legacy,
.loo-cta {
  box-sizing: border-box;
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

.loo-hero *,
.loo-hero *::before,
.loo-hero *::after,
.loo-students *,
.loo-students *::before,
.loo-students *::after,
.loo-video *,
.loo-video *::before,
.loo-video *::after,
.loo-impact *,
.loo-impact *::before,
.loo-impact *::after,
.loo-quotes *,
.loo-quotes *::before,
.loo-quotes *::after,
.loo-legacy *,
.loo-legacy *::before,
.loo-legacy *::after,
.loo-cta *,
.loo-cta *::before,
.loo-cta *::after {
  box-sizing: border-box;
}

.loo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 20px;
  border: 2px solid var(--loo-red);
  border-radius: 100px;
  background: transparent;
  color: var(--loo-white);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.loo-button:hover {
  background: var(--loo-red);
  color: var(--loo-white);
  text-decoration: none;
}

.loo-button:focus-visible,
.loo-video__trigger:focus-visible,
.loo-quotes .carousel-control-prev:focus-visible,
.loo-quotes .carousel-control-next:focus-visible,
.loo-quotes .carousel-indicators button:focus-visible {
  outline: 3px solid var(--loo-focus);
  outline-offset: 4px;
}


/* =========================================================
   2. HERO
   Canonical HTML classes:
   .loo-hero
   .loo-hero__row
   .loo-hero__content
   .loo-hero__title
   .loo-hero__title-highlight
   .loo-hero__text
   .loo-hero__art
   .loo-hero__graphic
   ========================================================= */

.loo-hero {
  overflow: hidden;
  background: var(--loo-black);
  color: var(--loo-white);
}

.loo-hero__row {
  min-height: 520px;
}

.loo-hero__content {
  position: relative;
  z-index: 2;
  padding: 4.5rem 0;
}

.loo-hero__title {
  margin: 0 0 2rem;
  color: var(--loo-white);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 5.625rem !important; /* 90px */
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
}

.loo-hero__title-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.loo-hero__title-highlight::after {
  content: "";
  position: absolute;
  left: -.04em;
  right: -.08em;
  bottom: .04em;
  height: .22em;
  background: var(--loo-red);
  z-index: -1;
}

.loo-hero__text {
  max-width: 42rem;
  margin-bottom: 1.75rem;
  color: var(--loo-white);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
}

.loo-hero__text p {
  margin: 0 0 1rem;
  color: inherit;
  font: inherit;
  line-height: inherit !important;
}

.loo-hero__text p:last-child {
  margin-bottom: 0;
}

.loo-hero__art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 420px;
  height: 100%;
}

.loo-hero__graphic {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  transform: translate3d(0, var(--loo-parallax-y, 0), 0);
}


/* =========================================================
   3. STUDENT STORIES
   ========================================================= */

.loo-students {
  padding: 5rem 0;
  background: var(--loo-white);
  color: var(--loo-black);
}

.loo-students__title {
  margin: 0 0 3.5rem;
  color: var(--loo-black);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.1;
  text-transform: none;
}

.loo-students__title-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.loo-students__title-highlight::after {
  content: "";
  position: absolute;
  left: -.03em;
  right: -.05em;
  bottom: .02em;
  height: .22em;
  background: var(--loo-light-gray);
  z-index: -1;
}

.loo-students__card {
  text-align: center;
	display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.loo-students__photo-wrap {
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.75rem;
}

.loo-students__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loo-students__quote,
.loo-students__meta {
  color: var(--loo-black);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.55;
}

.loo-students__meta p{
	font-size: 1rem !important;
}

.loo-students__quote {
  max-width: 23rem;
  margin: 0 auto 1.25rem;
  flex-grow: 1;
}

.loo-students__quote p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important;
}

.loo-students__quote p:last-child {
  margin-bottom: 0;
}

.loo-students__name {
  margin: 0 0 .25rem;
  color: var(--loo-black);
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35;
  margin-bottom: 0 !important;
  text-transform: none;
}

.loo-students__meta {
  margin: 0;
}


/* =========================================================
   4. VIDEO FEATURE
   ========================================================= */

.loo-video {
  padding: 3rem 0 6rem !important;
  background: var(--loo-white);
  color: var(--loo-black);
}

.loo-video__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 25px;
  background: var(--loo-black);
  cursor: pointer;
}

.loo-video__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Overlay across poster image */
.loo-video__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .25);
}

.loo-video__play {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--loo-white);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
}


/* "Transform Lives" */
.loo-video__play-text {
  position: absolute;
  left: 50%;
  top: 60%;
  z-index: 2;
  color: var(--loo-white);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%);
}


/* Highlighted word: Transform */
.loo-video__play-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* Red bar behind lower portion of Transform */
.loo-video__play-highlight::after {
  content: "";
  position: absolute;

  left: -.12em;
  right: -.12em;
  bottom: -.08em;

  height: .42em;

  background: var(--loo-red);

  z-index: -1;
}

.modal-title {
    margin-bottom: 0 !important;
    text-transform: none;
}


/* Large centered play circle */
.loo-video__play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 8rem;
  height: 8rem;

  border: .3rem solid rgba(255, 255, 255, .55);
  border-radius: 50%;

  background: rgba(255, 255, 255, .16);

  color: rgba(255, 255, 255, .72);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;

  transform: translate(-50%, -50%);

  /* Optical centering for triangle */
  padding-left: .35rem;
}


/* Right-side content */
.loo-video__content {
  max-width: 32rem;
}

.loo-video__title {
  margin: 0 0 1.5rem;
  color: var(--loo-black);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.05;
  text-transform: none;
}

.loo-video__text {
  color: var(--loo-black);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
}

.loo-video__text p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important; 
}

.loo-video__text p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   3B. BACKGROUND VIDEO FEATURE
   ========================================================= */

.loo-video-bg {
  position: relative;
  min-height: 42rem;
  overflow: hidden;
  background: #F2F2F4;
  color: var(--loo-black);
}


/* Background Video
   ========================================================= */

.loo-video-bg__media {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: 58%;
  overflow: hidden;
}

.loo-video-bg__video {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* Caption Styling
   ========================================================= */

.loo-video-bg__video::cue {
  color: #fff;
  background: rgba(0, 0, 0, .8);
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}


/* Overlay
   ========================================================= */

.loo-video-bg__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* Content
   ========================================================= */

.loo-video-bg__container {
  position: relative;
  z-index: 3;
}

.loo-video-bg__container > .row {
  min-height: 42rem;
}

.loo-video-bg__content {
  padding: 5rem 0;
}

.loo-video-bg .loo-video-bg__title {
  margin: 0 0 1.5rem;
  color: var(--loo-black);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.1;
  text-transform: none;
}

.loo-video-bg__text {
  color: var(--loo-black);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.loo-video-bg__text p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important;
}

.loo-video-bg__text p:last-child {
  margin-bottom: 0;
}


/* Video Controls
   ========================================================= */

.loo-video-bg__controls {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: .5rem;
}

.loo-video-bg__control {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  padding: 0;

  border: 2px solid var(--loo-white);
  border-radius: 50%;

  background: rgba(0, 0, 0, .65);
  color: var(--loo-white);

  font-family: Lato, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
}

.loo-video-bg__control:hover,
.loo-video-bg__control:focus {
  background: var(--loo-white);
  color: var(--loo-black);
}

.loo-video-bg__control:focus-visible {
  outline: 3px solid var(--loo-white);
  outline-offset: 4px;
}


/* Pause Icon
   ========================================================= */

.loo-video-bg__pause-icon {
  position: relative;
  display: block;
  width: .85rem;
  height: 1rem;
}

.loo-video-bg__pause-icon::before,
.loo-video-bg__pause-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: .25rem;
  height: 1rem;
  background: currentColor;
}

.loo-video-bg__pause-icon::before {
  left: 0;
}

.loo-video-bg__pause-icon::after {
  right: 0;
}


/* Play Icon
   ========================================================= */

.loo-video-bg__play-icon {
  display: none;
  width: 0;
  height: 0;
  margin-left: .15rem;

  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
  border-left: .75rem solid currentColor;
}


/* Paused State
   ========================================================= */

.loo-video-bg__toggle.is-paused .loo-video-bg__pause-icon {
  display: none;
}

.loo-video-bg__toggle.is-paused .loo-video-bg__play-icon {
  display: block;
}


/* Sound Control
   ========================================================= */

.loo-video-bg__sound {
  position: relative;
}

.loo-video-bg__sound-label {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}

.loo-video-bg__sound-off {
  position: absolute;
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.loo-video-bg__sound:not(.is-muted) .loo-video-bg__sound-off {
  display: none;
}


/* Caption Control
   ========================================================= */

.loo-video-bg__cc {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.loo-video-bg__cc.is-active {
  background: var(--loo-white);
  color: var(--loo-black);
}

.loo-video-bg__cc.is-active:hover,
.loo-video-bg__cc.is-active:focus {
  background: var(--loo-white);
  color: var(--loo-black);
}


/* Tablet
   ========================================================= */

@media (max-width: 991.98px) {

  .loo-video-bg {
    min-height: 0;
  }

  .loo-video-bg__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .loo-video-bg__video {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
  }

  .loo-video-bg__shade {
    display: none;
  }

  .loo-video-bg__container > .row {
    min-height: 0;
  }

  .loo-video-bg__content {
    max-width: 40rem;
    padding: 4rem 0;
  }

  .loo-video-bg__controls {
    right: 1rem;
    bottom: 1rem;
  }

}


/* Mobile
   ========================================================= */

@media (max-width: 767.98px) {

  .loo-video-bg__content {
    padding: 3rem 0;
  }

  .loo-video-bg .loo-video-bg__title {
    font-size: 2.25rem !important;
  }

  /* Create space below video for controls */
  .loo-video-bg__media {
    overflow: visible;
    margin-bottom: 4rem;
  }

  /* Put controls below video instead of over it */
  .loo-video-bg__controls {
    top: 100%;
    right: 0;
    bottom: auto;
    left: 0;

    justify-content: center;

    padding: .75rem 1rem;
    background: #F2F2F4;
  }

  .loo-video-bg__control {
    width: 2.75rem;
    height: 2.75rem;
  }

}

/* =========================================================
   5. COUNTY MAP / IMPACT
   ========================================================= */

.loo-impact {
  overflow: hidden;
  padding: 5rem 0 6rem !important;
  background: var(--loo-black);
  color: var(--loo-white);
}

.loo-impact__content {
  position: relative;
  z-index: 2;
}

.loo-impact__title {
  margin: 0 0 1.5rem;
  color: var(--loo-white);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.05;
  text-transform: none;
}

.loo-impact__text {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: var(--loo-white);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
}

.loo-impact__text p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important;
}

.loo-impact__text p:last-child {
  margin-bottom: 0;
}

.loo-impact__map-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
	    padding: 3rem 0;
}

.loo-impact__map {
  display: block;
  width: 100%;
  height: auto;

  transform: translate3d(
    0,
    var(--loo-impact-parallax, 0),
    0
  );

  will-change: transform;
}


/* =========================================================
   6. QUOTE CAROUSEL
   ========================================================= */

.loo-quotes {
  position: relative;
  overflow: hidden;
  background-color: var(--loo-black);
  background-position: center;
  background-size: cover;
  color: var(--loo-white);
  padding: 0;
}

.loo-quotes__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .60);
}

.loo-quotes__container {
  position: relative;
  z-index: 1;
}

.loo-quotes__carousel {
  position: relative;
}

.loo-quotes__slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 440px;
  padding: 10rem 2rem 10rem;
}

.loo-quotes__quote {
   width: 100%;
    max-width: 79rem;
    margin: 0 auto;
    padding-left: 2rem;
    border-left: 10px solid var(--loo-red);
    color: var(--loo-white);
    font-size: 2.0625rem;
    font-weight: 700;
    line-height: 1.75;
    box-shadow: none;
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.loo-quotes__quote p {
  margin: 0;
  font: inherit;
  line-height: inherit !important;
}


/* Author / Link */

.loo-quotes__credit {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    width: 100%;
    max-width: 79rem;
    margin: 1rem auto 0;
    padding-left: calc(2rem + 10px);
    color: var(--loo-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.loo-quotes__author,
.loo-quotes__author-info {
  margin: 0;
  color: var(--loo-white);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.loo-quotes__author {
  font-style: normal;
}

.loo-quotes__author-info a {
  color: var(--loo-white);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.loo-quotes__author-info a:hover,
.loo-quotes__author-info a:focus {
  color: var(--loo-white);
  text-decoration-thickness: 2px;
}


/* Navigation Dots */

.loo-quotes__dots {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .65rem;
  transform: translateX(-50%);
}

.loo-quotes__dot {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: gray;
  cursor: pointer;
}

.loo-quotes__dot.active {
  background: var(--loo-white);
}

.loo-quotes__dot:hover,
.loo-quotes__dot:focus {
  background: rgba(255, 255, 255, .5);
}

.loo-quotes__dot.active:hover,
.loo-quotes__dot.active:focus {
  background: var(--loo-white);
}

.loo-quotes__dot:focus-visible {
  outline: 2px solid var(--loo-white);
  outline-offset: 4px;
}


/* =========================================================
   7. LEGACY / IMAGE COLLAGE
   ========================================================= */

.loo-legacy {
  padding: 6rem 0 !important;
  background: var(--loo-white);
  color: var(--loo-black);
}

.loo-legacy__collage {
  position: relative;
  max-width: 750px;
  padding-bottom: 5rem;
}

.loo-legacy__image {
  display: block;
  height: auto;
  border-radius: 25px;
}

.loo-legacy__image--large {
  width: 76%;
}

.loo-legacy__image--small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  border: 6px solid var(--loo-white);
}

.loo-legacy__content {
  max-width: 34rem;
}

.loo-legacy__title {
  margin: 0 0 1.5rem;
  color: var(--loo-black);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.05;
  text-transform: none;
}

.loo-legacy__text {
  color: var(--loo-black);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
}

.loo-legacy__text p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important;
}

.loo-legacy__text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   8. FINAL CTA
   ========================================================= */

.loo-cta {
  padding: 0 0 5rem;
  background: var(--loo-black);
  color: var(--loo-white);
}

.loo-cta__inner {
  overflow: hidden;
  padding: 3.5rem 4rem;
}

.loo-cta__title {
  margin: 0;
  color: var(--loo-white);
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.05;
  text-transform: none;
}

.loo-cta__title-highlight {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.loo-cta__title-highlight::after {
  content: "";
  position: absolute;
  left: -.03em;
  right: -.05em;
  bottom: .02em;
  height: 20px;
  background: var(--loo-red);
  z-index: -1;
}

.loo-cta__divider {
  width: 2px;
  height: 205px;
  margin: 0 auto;
  background: var(--loo-red);
}

.loo-cta__text {
  margin-bottom: 1.75rem;
  color: var(--loo-white);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
}

.loo-cta__text p {
  margin: 0 0 1rem;
  font: inherit;
  line-height: inherit !important;
}

.loo-cta__text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   9. RESPONSIVE
   Bootstrap 5.1.3 breakpoints
   ========================================================= */

@media (max-width: 991.98px) {

  .loo-hero__row {
    min-height: 0;
  }

  .loo-hero__content {
    padding: 3.5rem 0 2rem;
  }

  .loo-hero__title {
    font-size: 4.25rem !important;
  }

  .loo-hero__art {
    min-height: 0;
  }

  .loo-hero__graphic {
    max-width: 650px;
  }

  .loo-students,
  .loo-video,
  .loo-impact,
  .loo-legacy {
    padding: 4rem 0;
  }

  .loo-students__title,
  .loo-video__title,
  .loo-impact__title,
  .loo-legacy__title,
  .loo-cta__title {
    font-size: 2.5rem !important;
  }

  .loo-video__content,
  .loo-legacy__content {
    max-width: none;
  }

  .loo-quotes__slide {
    min-height: 400px;
  }

  .loo-quotes__quote {
    font-size: 1.8rem;
  }

  .loo-legacy__collage {
    margin: 0 auto;
  }

  .loo-cta__inner {
    padding: 3rem;
  }

  .loo-cta__divider {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .loo-hero__content {
    padding: 3rem 0 1.5rem;
  }

  .loo-hero__title {
    margin-bottom: 1.5rem;
    font-size: 3.5rem !important;
    line-height: 1;
  }

  .loo-hero__text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .loo-hero__art {
    padding-top: 1rem;
  }

  .loo-students,
  .loo-video,
  .loo-impact,
  .loo-legacy {
    padding: 3.5rem 0;
  }

  .loo-students__title,
  .loo-video__title,
  .loo-impact__title,
  .loo-legacy__title,
  .loo-cta__title {
    font-size: 2.25rem !important;
  }

  .loo-students__title {
    margin-bottom: 2.5rem;
  }

  .loo-students__card {
    max-width: 28rem;
    margin-right: auto;
    margin-left: auto;
  }
	
	 .loo-students .row {
    --bs-gutter-x: 1.5rem;
  }

  .loo-students .col,
  .loo-students__card,
  .loo-students__photo-wrap,
  .loo-students__quote,
  .loo-students__name,
  .loo-students__meta {
    min-width: 0;
    max-width: 100%;
  }


  .loo-video__play {
    flex-direction: column;
    gap: .75rem;
    font-size: 2.25rem;
    text-align: center;
  }

  .loo-video__play-icon {
    width: 60px;
    height: 60px;
  }

  .loo-impact__map-wrap {
    margin-top: 2.5rem;
  }

  .loo-quotes__slide {
    min-height: 0;
    padding: 4rem 1rem 6rem;
  }

  .loo-quotes__quote {
    padding-left: 1.25rem;
    border-left-width: 6px;
    font-size: 1.5rem;
  }

  .loo-quotes__credit {
    flex-wrap: wrap;
    padding-left: calc(1.25rem + 6px);
  }

  .loo-quotes__dots {
    bottom: 1.5rem;
  }


  .loo-legacy__collage {
    padding-bottom: 4rem;
  }

  .loo-cta {
    padding-bottom: 3.5rem;
  }

  .loo-cta__inner {
    padding: 2.5rem 2rem;
  }

  .loo-cta__text {
    margin-top: 1.75rem;
  }
}

@media (max-width: 575.98px) {

  .loo-hero__title {
    font-size: 2.75rem !important;
  }

  .loo-hero__content {
    padding-top: 2.5rem;
  }

  .loo-button {
    width: 100%;
  }

  .loo-students__title,
  .loo-video__title,
  .loo-impact__title,
  .loo-legacy__title,
  .loo-cta__title {
    font-size: 2rem !important;
  }

  .loo-students__photo-wrap {
    width: min(80vw, 250px);
  }

  .loo-video__trigger,
  .loo-legacy__image,
  .loo-cta__inner {
    border-radius: 18px;
  }

  .loo-quotes__slide {
    min-height: 460px;
  }

  .loo-quotes__quote {
    font-size: 1.3rem;
  }

  .loo-legacy__image--large {
    width: 82%;
  }

  .loo-legacy__image--small {
    width: 48%;
  }

  .loo-cta__inner {
    padding: 2rem 1.5rem;
  }

  .loo-cta__title-highlight::after {
    height: 14px;
  }
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .loo-button,
  .loo-video__trigger,
  .loo-quotes .carousel-item {
    transition: none !important;
  }

  .loo-quotes .carousel {
    scroll-behavior: auto;
  }
}