/* GENERAL USE STYLES */
#main p.homepage-text {
  font-size: 1.25em;
}

.max-1200 {
  max-width: 1200px;
}

/* VIDEO */
.hero-video-section {
  position: relative;
}

.hero-video-text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: auto auto;
  padding-left: 1em;
  padding-right: 1em;
  gap: 1em;
}

.hero-video-text-grid {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  display: grid;
  grid-template-columns: 90% auto;
}

.pursue-image {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
  margin-bottom: -3px;
}

.hero-video-text {
  max-width: 1200px;
}

#main .hero-video-text p {
  font-family: "Proxima Nova", "Source Sans Pro", sans-serif !important;
  font-size: 1.4em;
  line-height: 1.3;
}

#main .hero-video-text h2 {
  color: var(--bju-navy);
  font-family: "Proxima Nova", "Source Sans Pro", sans-serif !important;
}

.hero-video-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/home/header-chevron.svg'), linear-gradient(to right,
      #00B5EF 0%,
      #00B5EF 35%,
      rgba(0, 181, 239, 0) 80%,
      rgba(0, 181, 239, 0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left top;
  background-size: 50% auto, 100% 100%;
  z-index: 1;
}

.hero-video-container {
  background-color: var(--bju-cyan);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 600px;
  overflow: hidden;
  margin: 0 auto;
}

@media (min-width: 1500px) {
  .hero-video-container {
    max-height: 800px;
  }
}

.hero-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  margin-left: 25%;
}

#play-container {
  position: absolute;
  bottom: calc(50% - 40px);
  left: calc(78% - 50px);
  z-index: 3;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100px;
  padding: 0.3em;
  background-color: rgba(0, 181, 239, 0.7);
  border-radius: 50%;
}

.play-image {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(180deg);
}

.play-pause-toggle {
  height: 10%;
  width: 10%;
  z-index: 5;
}

.pause-button {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  bottom: 3%;
  right: 3%;
  z-index: 10;
}

.pause-button:hover {
  cursor: pointer;
}

.invisible {
  display: none;
}

.fancybox__viewport .overlay-text img {
  display: none;
}

.has-html5video .fancybox__content {
  width: 3000px;
  height: auto;
}


@media (max-width: 850px) {
  #main .hero-video-text p {
    margin-bottom: 0;
  }

  #main .hero-video-text h2 {
    margin-top: 0;
  }
}

@media (max-width: 800px) {
  #main .hero-video-text {
    padding-right: 1em;
  }

  #main .hero-video-text-grid {
    grid-template-columns: 100% auto;
    grid-column-end: span 3;
  }

  #main .hero-video-text p {
    font-size: 1.1em;
    line-height: 1.2;
    margin-bottom: 0;
    margin-right: 30%;
  }

  #main .hero-video-text h2 {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #main .hero-video-text-container {
    grid-template-columns: repeat(4, 1fr);
  }

  #main .pursue-image {
    grid-column-end: span 3;
  }
}

@media (max-width: 700px) {
  #main .hero-video-text h2 {
    font-size: 1.9em;
  }

  .hero-video-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        #00B5EF 0%,
        #00B5EF 35%,
        rgba(0, 181, 239, 0) 80%,
        rgba(0, 181, 239, 0) 100%);
    z-index: 1;
  }
}

@media (max-width: 650px) {
  #main .hero-video-text h2 {
    font-size: 1.7em;
  }
}

@media (max-width: 550px) {
  #main .hero-video-text p {
    display: none;
  }

  #main .hero-video-text h2 {
    /* font-size: 1.3em; */
  }

  #main .hero-video-text-container {
    gap: 0.5em;
  }

  #play-container {
    max-width: 60px;
    left: calc(78% - 30px);
  }

  .play-pause-toggle {
    height: 7%;
    width: 7%;
  }
}

@media (max-width: 450px) {
  #main .pause-button {
    display: none;
  }

  #main .pursue-image {
    grid-column-end: span 4;
  }

  #main .hero-cta-top-left {
    grid-column-end: span 4;
  }

  #main .hero-video-text h2 {
    font-size: 1.2em;
  }

  #main .hero-cta-top-right {
    display: block;
  }

  #main .hero-cta-buttons {
    display: block;
  }



  #play-container {
    bottom: calc(60% - 40px);
  }
}

/* HERO CTA */

.hero-cta-container {
  position: relative;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: auto auto;
  z-index: 10;
  gap: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

.hero-cta-bottom-left {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
}

.hero-cta-top-left img {
  padding-top: 1em;
}

.hero-cta-top-left a {
  margin-top: 2em !important;
}

.hero-cta-top-right {
  max-width: 100%;
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-cta-buttons {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5em;
}

#main .hero-cta-buttons p {
  margin-bottom: 0;
  /* padding-left: 0.5em;
  padding-right: 0.5em;
  margin-bottom: 0.5em; */
}

@media (max-width: 1100px) {
  .hero-cta-buttons {
    margin-top: 2em;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .hero-cta-top-left img {
    /* margin-top: -70px; */
  }
}

@media (max-width: 800px) {
  .hero-cta-top-left a {
    margin-top: 1em !important;
  }

  .hero-cta-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 0.5em;
    margin-bottom: 2em;
  }

  .hero-cta-top-left {
    grid-column-start: 1;
    grid-column-end: span 3;
    grid-row-start: 1;
    grid-row-end: span 1;
  }

  .hero-cta-bottom-left {
    grid-column-start: 2;
    grid-column-end: span 2;
    grid-row-start: 2;
    grid-row-end: span 1;
  }

  #main .promise-button {
    text-align: center;
  }

  #main .promise-button p {
    margin-bottom: 0;
  }

  .hero-cta-top-right {
    grid-column-start: 1;
    grid-column-end: span 4;
    grid-row-start: 3;
    grid-row-end: span 1;
  }

  .hero-cta-buttons {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    margin-top: 0;
  }

  @media (max-width: 480px) {
    .hero-cta-top-left img {
      padding-top: 0.5em;
    }

    .hero-cta-top-left {
      display: grid;
      grid-column-end: span 3;
    }
  }

}

/* BJU UP CLOSE */

#bjuc {
  position: relative;
}

#bottom-decoration {
  position: relative;
}

.bjuc-spacer {
  min-height: 500px;
}

.bjuc-transitions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: top;
  background-repeat: no-repeat;
  background-image: url("/images/home/up-close-top.svg");
  z-index: 5;
}

.bjuc-transitions::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url("/images/home/up-close-bottom.svg");
  z-index: 5;
}

.bjuc-background {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("/images/home/20240307bju-up-close-de18.jpg");
  background-repeat: no-repeat;
}

@supports (-webkit-touch-callout: none) {
  .bjuc-background {
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
  }
}

@media (max-width: 550px) {
  @supports (-webkit-touch-callout: none) {
    .bjuc-background {
      background-position: center top;
      background-attachment: scroll;
      background-image: url("/images/home/20240307bju-up-close-de18-mobile-new.jpg");
      background-size: auto 50%;
    }
  }
}

.bjuc-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(0, 27, 65, 0.5) 0%,
      rgba(0, 27, 65, 0.5) 40%,
      rgba(0, 27, 65, 1) 65%,
      rgba(0, 27, 65, 1) 100%);
  z-index: 1;
}

#bjuc p {
  color: var(--bju-white);
}

.bjuc-container {
  max-width: 45%;
  padding: 4em;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bjuc-content {
  padding-top: 8em;
}

.semibold {
  font-weight: 600 !important;
}

#bju-uc-image-container {
  position: relative;
  display: inline-block;
  margin-bottom: 0.5em !important;
}

#bju-uc-image {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 1400px) {
  .bjuc-spacer {
    min-height: 600px;
  }
}

@media (max-width: 1200px) {
  .bjuc-spacer {
    min-height: 400px;
  }
}

@media (max-width: 1000px) {
  .bjuc-container {
    padding: 1em;
    padding-right: 2em;
    max-width: 55%;
  }

  .bjuc-spacer {
    min-height: 300px;
  }

  .bjuc-background::after {
    background: linear-gradient(to right,
        rgba(0, 27, 65, 0.5) 0%,
        rgba(0, 27, 65, 0.5) 30%,
        rgba(0, 27, 65, 1) 55%,
        rgba(0, 27, 65, 1) 100%);
  }
}

@media (max-width: 550px) {
  .bjuc-background::after {
    background: linear-gradient(to bottom,
        rgba(0, 27, 65, 0.5) 0%,
        rgba(0, 27, 65, 0.5) 30%,
        rgba(0, 27, 65, 1) 45%,
        rgba(0, 27, 65, 1) 100%);
  }

  .bjuc-container {
    max-width: 100%;
    padding-left: 1em;
    padding-right: 1em;
  }

  .bjuc-content {
    padding-top: 20em;
  }

  .bjuc-spacer {
    min-height: 10em;
  }

}

/* PROGRAM SELECT (WHAT DO YOU WANT TO STUDY) */

#program-select {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#program-select-container {
  padding-top: 1em;
  z-index: 1;
}

.home #main #program-select h2 {
  padding-bottom: 0;
  text-align: right;
  margin-bottom: 0;
  color: var(--bju-faded-text);
}

#program-select-header-container {
  padding-right: 1em;
}

#study-content {
  max-width: 1200px;
  padding: 1em 1em 3em 1em;
}

#program-search-container {
  max-width: 690px;
  margin: 0 auto;
}

#programsearch {
  margin-top: 0.7em;
}

#study-content-right h3 {
  color: var(--bju-navy);
  text-shadow: none;
  font-size: 1.4em;
  text-align: left;
  margin-bottom: 0;
  font-weight: 600;
}

#study-content-right p {
  color: var(--bju-navy);
}

#study-content-right input {
  border: 1px solid var(--bju-home-orange);
}

#study-content-right #study-divider {
  margin: 1em 0;
  background-color: var(--bju-cyan);
  height: 3px;
  width: 65%;
}

#main p.stat {
  margin-bottom: .2em !important;
}

.infographics {
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url('/images/home/stats.svg');
}

.infographics .row {
  padding-top: 1em;
  padding-bottom: 1.5em;
}

#main figure.infographic figcaption p {
  font-family: "Proxima Nova", "Source Sans Pro", sans-serif;
  line-height: 1.3;
  margin-top: 0.7em;
}

/* FINANCIAL AID */

.financial-aid-background {
  background-color: var(--bju-cyan);
  position: relative;
}

.financial-aid-container {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 1em 5em 1em;
  z-index: 1;
}

.top-neg-3 {
  margin-top: -3em;
}

.home #main #financial-aid .financial-aid-container h2 {
  font-size: 3em;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
  .financial-aid-left {
    padding-top: 1em;
  }
}

#main #financial-aid p {
  margin-bottom: 0;
  padding-bottom: 1.5em;
}


@media screen and (max-width: 650px) {
  .home #main #experience-container h2 {
    margin-left: 0;
  }
}

@media (max-width: 1000px) {
  .top-neg-3 {
    margin-top: -1em;
  }
}

@media (max-width: 800px) {
  .top-neg-3 {
    margin-top: 0;
  }
}

@media (max-width: 550px) {
  .financial-aid-container {
    padding-bottom: 3em;
  }
}

/* MID-PAGE CTA */
#main #begin-your-journey {
  font-size: 3em !important;
}

@media (max-width: 480px) {
  #main .cta-section--mid>div h2 {
    padding-right: 0;
  }
}

/* EXPERIENCE - LEARNING IN ACTION */

#experience {
  background-color: var(--bju-navy);
  color: var(--bju-white);
  /* padding: 5em; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.experience-background {
  padding: 5em;
}

#experience ul li a::after {
  display: none;
}

#experience h2 {
  margin-top: 2em;
}

#experience-container {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.5em;
}

.home #main #experience-container h2 {
  margin-bottom: 0;
  margin-top: 0.5em;
  margin-left: 20%;
  color: rgba(130, 145, 166, 0.6);
}

#dont-just-learn {
  display: flex;
  justify-content: center;
  z-index: 2;
}

#dont-just-learn-content {
  padding: 1em;
  margin-bottom: 5%;
  margin-top: 5px;
}

#dont-just-learn-content h3 {
  font-weight: 600;
  color: var(--bju-cyan);
  font-size: 2.5em;
}

@media screen and (max-width: 1200px) {
  #dont-just-learn {
    padding: 1.5em 0;
    max-width: 800px;
  }

  #dont-just-learn-content {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 760px) {
  #dont-just-learn {
    padding: 0 0;
  }
}

#experience-carousel {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1200px) {
  .experience-background {
    padding-left: 1em;
    padding-right: 1em;
  }
}

@media (max-width: 1000px) {
  #dont-just-learn-content h3 {
    font-size: 2em;
  }
}

@media (max-width: 800px) {
  .experience-background {
    padding: 2em;
    padding-bottom: 3em;
  }

  #experience-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
  }

  #dont-just-learn {
    padding: 0;
  }

  #dont-just-learn-content {
    padding: 0;
  }
}

/* IMAGE CAROUSEL */
#main .image-carousel figcaption h4 {
  color: var(--bju-navy);
  font-size: 1.2em !important;
}

.image-carousel figure {
  position: relative;
  display: inline-block;
}

.image-carousel figcaption {
  background-color: var(--bju-cyan);
  padding: 0.8em 0.9em 0.5em 0.9em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@media screen and (max-width: 650px) {
  #main .image-carousel figcaption h4 {
    font-size: 1em !important;
  }
}

@media screen and (max-width: 550px) {
  #main .image-carousel figcaption h4 {
    font-size: 1.1em !important;
  }

  #main .image-carousel figcaption {
    min-height: 85px;
  }

  #main .carousel-buttons {
    align-items: flex-start;
    padding-top: 10px;
  }
}

.carousel-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 100px;
}

.carousel-buttons div {
  padding: 0 0.3em;
}

.carousel-buttons .next-button {
  padding: 0 0 0 0.3em;
}

.carousel-buttons:hover {
  cursor: pointer;
}

.svg-button {
  cursor: pointer;
  transition: fill 0.3s ease;
  width: 29px;
  height: 29px;
  fill: var(--bju-navy);
}

.svg-button:hover {
  fill: var(--bju-white);
}

/* PROMISE */

.homepage-crest {
  display: flex;
  justify-content: center;
}

.homepage-crest img {
  max-width: 100px;
  margin-top: -100px;
  padding-bottom: 2em;
  z-index: 10;
}

#promise {
  padding: 0 0 5em 0;
}

.promise-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pursue-heading-container {
  padding: 1em;
  max-width: 1200px;
}

.pursue-heading-container img {
  display: block;
  width: 100%;
  height: 6em;
}

@media (max-width: 800px) {
  .pursue-heading-container img {
    height: 3em;
  }
}

@media (max-width: 600px) {
  .pursue-heading-container img {
    height: 1.5em;
  }
}

.scroll-area {
  margin-bottom: 1.5em;
  overflow: hidden;
  position: relative;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  will-change: transform;
  width: 100%;
}

.marquee-content {
  display: inline-block;
  /* animation: scroll-left 20s linear infinite; */
}

#marquee-1 {
  transform: translateX(-150vw);
}

#marquee-2 {
  transform: translateX(-150vw);
}

#marquee-3 {
  transform: translateX(-150vw);
}

/* 
@media (max-width: 800px) {
  #marquee-1 {
    transform: translateX(-150vw);
  }
} */

.marquee h3 {
  display: inline-block;
  color: var(--bju-cyan) !important;
  margin: 0 !important;
  padding: 0 1em;
}

@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1000px) {
  .homepage-crest img {
    margin-top: -50px;

  }

  #main #promise h2 {
    letter-spacing: 0.2em;
  }
}

@media (max-width: 800px) {
  #main .marquee h3 {
    font-size: 1.2em;
  }

  #main #promise h2 {
    letter-spacing: 0.1em;
    font-size: 1.8em;
  }
}

@media (max-width: 550px) {
  .homepage-crest img {
    margin-top: 0;
  }

  #main #promise h2 {
    font-size: 1.5em;
  }
}

@media (max-width: 480px) {
  #main #promise h2 {
    font-size: 1.3em;
  }
}

@media (max-width: 400px) {
  #main #promise h2 {
    font-size: 1.2em;
  }
}

/* BOTTOM IMAGE */
.bottom-image-container {
  position: relative;
  display: inline-block;
  background-color: var(--bju-cyan);
  padding-bottom: 3em;
  /* Why do we need this negative margin? */
  margin-bottom: -10px;
}

.white-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  /* adjust height */
  background: white;
  clip-path: polygon(49.5% -1%, 101% 101%, 101% -1%);
  z-index: 2;
  pointer-events: none;
  /* So it doesn't block clicks */
}

.white-overlay-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  /* adjust height */
  background: white;
  clip-path: polygon(-1% -1%, 50.5% -1%, -1% 101%);
  z-index: 2;
  pointer-events: none;
  /* So it doesn't block clicks */
}

.bottom-image-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* BOTTOM TRIANGLE SHAPE */

:root {
  --triangle-width: 100px;
  --triangle-height: 65px;
}

.bottom-triangle::after {
  content: "";
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: var(--triangle-width) solid transparent;
  border-right: var(--triangle-width) solid transparent;
  border-bottom: var(--triangle-height) solid white;
  z-index: 5;
}

.bottom-triangle__right::after {
  left: 78%;
}

.bottom-triangle__center::after {
  left: 50%;
}

.bottom-triangle__left::after {
  left: 22%;
}

@media (max-width: 800px) {
  :root {
    --triangle-width: 60px;
    --triangle-height: 40px;
  }
}

@media (max-width: 480px) {
  :root {
    --triangle-width: 45px;
    --triangle-height: 30px;
  }

}

@media (max-width: 800px) {
  #main .bottom-triangle__no-mobile::after {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

img.transition {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}