@charset "UTF-8";
/* CJP Hero Carousel - adapted from homepage carousel.css
   All selectors renamed with cjp- prefix so nothing collides with
   the homepage hero, the news carousel, or existing CJP page styles. */

@keyframes cjp-tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes cjp-tostart {
  75% {
    left: 0;
  }
  95% {
    left: -200%;
  }
  98% {
    left: -200%;
  }
  99% {
    left: 0;
  }
}

@keyframes cjp-snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

/* Scoped to the CJP hero only. The homepage version applied these
   rules globally with *; keeping them inside #cjp-hero avoids
   side effects on the rest of the CJP page. */
#cjp-hero,
#cjp-hero * {
  box-sizing: border-box;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}

#cjp-hero *::-webkit-scrollbar {
  width: 0;
}

#cjp-hero *::-webkit-scrollbar-track {
  background: transparent;
}

#cjp-hero *::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

#cjp-hero ol,
#cjp-hero li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cjp-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1028 / 690;
  -ms-overflow-style: none;
  overflow: hidden;
}

.cjp-carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  overflow: hidden;
}

/* Keep scrollbar hiding for carousel viewport */
.cjp-carousel__viewport::-webkit-scrollbar {
  width: 0;
  display: none;
}

.cjp-carousel__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.cjp-carousel__viewport::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

.cjp-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  counter-increment: item;
  -ms-overflow-style: none;
  overflow: hidden;
}

.cjp-carousel__slide:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
  color: #fff;
  font-size: 2em;
}

.cjp-carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

.cjp-carousel__viewport,
.cjp-carousel__slide {
  height: 100%;
}

@media (hover: hover) {
  .cjp-carousel__snapper {
    animation-name: cjp-tonext, cjp-snap;
    animation-timing-function: ease;
    animation-duration: 4s;
/*    animation-iteration-count: infinite;*/
  }

  .cjp-carousel__slide:last-child .cjp-carousel__snapper {
    animation-name: cjp-tostart, cjp-snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cjp-carousel__snapper {
    animation-name: none;
  }
}

.cjp-carousel:hover .cjp-carousel__snapper,
.cjp-carousel:focus-within .cjp-carousel__snapper {
  animation-name: none;
}

.cjp-carousel__navigation,
nav.cjp-carousel__navigation {
  top: 566px !important;
  bottom: inherit;
  position: absolute;
  right: 0;
  left: 0;
  text-align: center;
  background: #ffffff70;
  display: none;
}

.cjp-carousel__navigation-list,
.cjp-carousel__navigation-item {
  display: inline-block;
}

.cjp-carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #005ca5;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.cjp-carousel::before,
.cjp-carousel::after,
.cjp-carousel__prev,
.cjp-carousel__next {
  position: absolute;
  top: 50%;
  margin-top: -2.5rem; /* half of 5rem arrow height */
  width: 3rem;
  height: 5rem;
/*   transform: translateY(-50%); */
  border-radius: 10%;
  font-size: 0;
  outline: 0;
}

.cjp-carousel::before,
.cjp-carousel__prev {
  left: 1rem;
}
.cjp-carousel::after,
.cjp-carousel__next {
  right: 1rem;
}

.cjp-carousel::before,
.cjp-carousel::after {
  content: '';
  z-index: 1;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}
.cjp-carousel::before {
  content: url(https://emu.edu/_resources/images/news-back-arrow.png);
}
.cjp-carousel::after {
  content: url(https://emu.edu/_resources/images/news-forward-arrow.png);
}

/* CJP Hero slider */
#cjp-hero .cjp-carousel__snapper {
  background-size: cover;
}
#cjp-hero h2 {
  color: #fff;
  font-size: 54px;
  text-transform: uppercase;
  line-height: 50px;
  margin-bottom: 10px;
}
#cjp-hero .cjp-caption {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 32px;
  margin-bottom: 10px;
}
#cjp-hero .cjp-hero-slider-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 640px;
  padding: 0 7%;
}
#cjp-hero button {
  background: #f6a719;
  text-transform: uppercase;
  width: inherit;
  border: none;
  padding: 10px 20px 30px;
  border-radius: 5px;
  color: #102c52;
  font-size: 15px;
  font-weight: bold;
  font-stretch: condensed;
  letter-spacing: .5px;
  box-shadow: 1px 1px 4px black;
}
#cjp-hero .cjp-slider-buttons a {
  margin-top: 20px;
  display: block;
  float: left;
}
#cjp-hero .cjp-slider-buttons button {
  background: #00441F;
  color: #FFF;
}
.cjp-hero-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*************** RESPONSIVE ****************/

@media only screen and (max-width: 767px) {
  section.cjp-carousel {
    max-width: 100%;
    padding: 0;
    aspect-ratio: auto;
    height: calc(67.12vw + 230px);
  }
  #cjp-hero .cjp-carousel__viewport,
  #cjp-hero .cjp-carousel__slide {
    height: calc(67.12vw + 230px);
    background: #00441F; /* CJP green panel */
  }
  /* Image sits on top, full width, locked to the 1028:690 ratio.
     Correctly sized images show in full; other sizes center-crop
     instead of breaking the slide height math. */
  .cjp-hero-slider-image img {
    height: 67.12vw;
  }
  /* Content stacks below the image on the solid background */
  #cjp-hero .cjp-hero-slider-content {
    position: relative;
    top: 15px;
    transform: none; /* cancel the desktop translateY(-50%) centering */
    max-width: 100%;
  }
  #cjp-hero h2 {
    font-size: 46px;
    line-height: 46px;
  }
  #cjp-hero .cjp-caption {
    display: none;
  }
  #cjp-hero .cjp-slider-buttons a {
    display: inline-block;
    float: none;
    margin-top: 10px;
    margin-right: 10px;
  }
  /* Green buttons would disappear on the green panel; use the CJP gold accent */
  #cjp-hero .cjp-slider-buttons button {
    background: #f6a719;
    color: #102c52;
  }
  /* Arrows: hide the section-level pseudo arrows, re-enable smaller and
     vertically centered on the image (image height = 67.12vw, so center = 33.56vw) */
  .cjp-carousel::before,
  .cjp-carousel::after {
    display: none;
  }
  #cjp-hero::before,
  #cjp-hero::after {
    display: block;
    top: calc(33.56vw - 24px);
    margin-top: 0;
    transform: scale(0.6);
  }
  #cjp-hero .cjp-carousel__prev,
  #cjp-hero .cjp-carousel__next {
    top: calc(33.56vw - 24px);
    margin-top: 0;
    height: 3rem;
  }
}

/* Remove the autoplay keyframes. */
.cjp-carousel__snapper,
.cjp-carousel__slide:last-child .cjp-carousel__snapper {
  animation: none !important;
}

/* Opt the carousel out of browser scroll anchoring so
   slide changes never trigger a compensating page scroll. */
.cjp-carousel,
.cjp-carousel * {
  overflow-anchor: none;
}

/* Neutralize the vertical anchor jump. */
#cjp-hero .cjp-carousel__slide,
#cjp-hero .cjp-carousel__snapper {
  scroll-margin-top: 100vh;
}