/**
 * @file
 * Carousel component styles for HSF theme.
 */

.slick-carousel__media {}

.slick-carousel__media-image {
  position: relative;
  display: inline-block;
  width: auto;
  height: 200px;
  line-height: 196px;
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
}
@media all and (min-width: 735px) {
  .slick-carousel__media-image {
    height: 400px;
    line-height: 396px;
  }
}
@media all and (min-width: 1200px) {
  .slick-carousel__media-image {
    height: 605px;
    line-height: 600px;
  }
}
.slick-carousel__media-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  transition: background-color .4s ease;
}
.slick-current .slick-carousel__media-overlay {
  background-color: rgba(0,0,0,0);
}
.slick-carousel--full-screen .slick-carousel__media-overlay {
  display: none;
}

.slick-carousel__media-image img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 100vh;
  max-height: 200px;
}

@media all and (min-width: 735px) {
  .slick-carousel__media-image img {
    max-height: 400px;
  }
}
@media all and (min-width: 1200px) {
  .slick-carousel__media-image img {
    max-width: 1095px;
    max-height: 605px;
  }
}

.slick-carousel--full-screen .contextual {
  display: none;
}
.slick-carousel--full-screen .slick-carousel__media-image {
  grid-area: image;
  display: inline-block;
  width: auto;
  height: 100%;
}
.slick-carousel--full-screen .slick-carousel__media-image img {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
.slick-carousel--full-screen .slick-carousel__media-info {
  position: relative;
  padding: 0 60px;
  grid-area: info;
  text-align: center;
}
.slick-carousel__media-info .field--name-field-image-info {
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 22px;
}
.slick-carousel__media-info .field--name-field-credit-copyright {
  font-size: 10px;
  line-height: 12px;
}

.slick-carousel__media-spacer {
  grid-area: spacer;
  display: none;
  visibility: hidden;
}
.slick-carousel__media-spacer-1 {
  grid-area: spacer1;
  position: relative;
  display: none;
  visibility: hidden;
}
.slick-carousel--full-screen .slick-slide {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
  overflow-y: scroll;
}
.slick-carousel--full-screen .slick-carousel__media {
  display: grid;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  padding: 20px;
  grid-gap: 10px 20px;
  gap: 10px 20px;
  justify-content: space-around;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "image" "info";
}
@media all and (min-width: 735px) and (max-height: 600px) {
  .slick-carousel--full-screen .slick-carousel__media {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas: "image info";
  }
  .slick-carousel--full-screen .slick-carousel__media-info {
    padding: 0;
    align-self: end;
    text-align: left;
  }
  .slick-carousel__media-image {
    height: auto;
  }
}
@media all and (min-width: 735px) and (min-height: 600px) {
  .slick-carousel__media-image {
    max-height: 75vh;
    max-height: calc(var(--vh, 1vh) * 75);
  }
}
@media all and (min-width: 1200px) {
  .slick-carousel--full-screen .slick-slide {
    overflow-y: hidden;
  }
  .slick-carousel--full-screen .slick-carousel__media {
    min-height: unset;
    max-height: calc(100vh - 150px);
    height: 100vh;
    padding: 0;
    grid-gap: 0 20px;
    gap: 0 20px;
    grid-template-columns: 145px 1fr 145px;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ". . spacer1"
      "spacer image ."
      ". info ."
      ". . ."
      ;
  }

  .slick-carousel--full-screen .slick-carousel__media-image img {
    max-height: calc(100vh - 150px)
  }
  .slick-carousel--full-screen .slick-carousel__media-spacer-1 {
    visibility: visible;
  }

  .slick-carousel--full-screen .slick-carousel__media-info {
    height: 100%;
    padding: 0;
    align-self: end;
    text-align: center;
  }
  .slick-carousel--full-screen .slick-carousel__media-info-text {
    position: absolute;
    width: 100%;
  }
  .slick-carousel--full-screen .slick-carousel__media-spacer-1 {
    display: block;
  }
  .slick-carousel__media-image {
    height: auto;
    max-height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
  }
}

.slick-carousel__media .slick-carousel__full-screen-toggle,
.slick-carousel__full-screen-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 25px;
  width: 25px;
  background-color: transparent;
  background-image: url(../../images/info-circle.svg);
  opacity: 0;
  transition: opacity .4s ease, visibility 0s ease .4s;
}
.slick-carousel--full-screen .slick-carousel__full-screen-toggle {
  background-image: url(../../images/zoom-out-black.svg);
  bottom: auto;
  top: 10px;
}
.slick-carousel--full-screen .slick-carousel__media-image .slick-carousel__full-screen-toggle {
  display: none;
}
.slick-carousel__media-info .slick-carousel__full-screen-toggle,
.slick-carousel__media-spacer-1 .slick-carousel__full-screen-toggle {
  display: none;
  height: 20px;
  width: 20px;
  background-image: url(../../images/close-x-orange.svg);
}
.slick-carousel--full-screen .slick-carousel__media-info .slick-carousel__full-screen-toggle,
.slick-carousel--full-screen .slick-carousel__media-spacer-1 .slick-carousel__full-screen-toggle {
  display: block;
}
@media all and (min-width: 1200px) {
  .slick-carousel--full-screen .slick-carousel__media-info .slick-carousel__full-screen-toggle {
    display: none;
  }
  .user-logged-in .slick-carousel--full-screen .slick-carousel__full-screen-toggle {
    margin-top: 70px;
  }
  .slick-carousel--full-screen .slick-carousel__full-screen-toggle {
    margin: 10px;
  }
  .user-logged-in .slick-carousel--full-screen .slick-carousel__full-screen-toggle {
    margin-top: 70px;
  }

}
.slick-current .slick-carousel__full-screen-toggle {
  opacity: 1;
  transition: opacity .4s ease, visibility .4s ease 0s;
}

.slick-carousel--in-page .slick-carousel__media-info {
  display: none;
}

.slick-slider.slick-carousel--full-screen {
  display: block;
  position: fixed;
  z-index: 200;
  top: 0;
  left: -200vw;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #fff;
}
.slick-slider.slick-carousel--full-screen-open {
  left: 0;
}

.slick-carousel__prev,
.slick-carousel__next {
  position: absolute;
  top: 50%;
  width: 45px;
  height: 45px;
  margin-top: -22.5px;
  background-color: transparent;
  border-radius: 50%;
}
.slick-carousel .slick-carousel__prev,
.slick-carousel__prev {
  background-image: url(../../images/arrow-left-white.svg);
}
.slick-carousel .slick-carousel__next,
.slick-carousel__next {
  background-image: url(../../images/arrow-right-white.svg);
}
.slick-carousel .slick-carousel__prev--full-screen,
.slick-carousel__prev--full-screen {
  background-image: url(../../images/arrow-left-black.svg);
}
.slick-carousel .slick-carousel__next--full-screen,
.slick-carousel__next--full-screen {
  background-image: url(../../images/arrow-right-black.svg);
}
.slick-carousel--touch-events .slick-carousel__prev {left: -1000px;}
.slick-carousel--touch-events .slick-carousel__next {left: -1000px;}
.slick-carousel--no-touch-events .slick-carousel__prev {left: 20px;}
.slick-carousel--no-touch-events .slick-carousel__next {right: 20px;}
@media all and (min-width: 735px) and (max-width: 1200px) {
  .slick-carousel__prev {
    left: 30px;
  }
  .slick-carousel__next {
    right: 30px;
  }
  .slick-carousel__prev--full-screen,
  .slick-carousel__next--full-screen {
    top: auto;
    margin-top: 0;
    bottom: 20px;
  }
  .slick-carousel__prev--full-screen {
    left: 25px;
  }
  .slick-carousel__next--full-screen {
    right: 25px;
  }
}
@media all and (min-width: 1200px) {
  .slick-carousel--touch-events .slick-carousel__prev,
  .slick-carousel--no-touch-events .slick-carousel__prev {
    left: 50%;
    margin-left: -600px;
    margin-left: calc(-600px - ((100vw - 1200px) / 4));
  }
  .slick-carousel--touch-events .slick-carousel__next,
  .slick-carousel--no-touch-events .slick-carousel__next {
    left: 50%;
    margin-left: 555px;
    margin-left: calc(555px + ((100vw - 1200px) / 4));
  }
  .slick-carousel--full-screen.slick-carousel--touch-events .slick-carousel__prev--full-screen,
  .slick-carousel--full-screen.slick-carousel--no-touch-events .slick-carousel__prev--full-screen {
    left: 50px;
    margin-left: 0;
  }
  .slick-carousel--full-screen.slick-carousel--touch-events .slick-carousel__next--full-screen,
  .slick-carousel--full-screen.slick-carousel--no-touch-events .slick-carousel__next--full-screen {
    right: 50px;
    left: auto;
    margin-left: 0;
  }
}
@media all and (min-width: 1600px) {
  .slick-carousel--touch-events .slick-carousel__prev,
  .slick-carousel--no-touch-events .slick-carousel__prev {
    margin-left: -750px;
  }
  .slick-carousel--touch-events .slick-carousel__next,
  .slick-carousel--no-touch-events .slick-carousel__next {
    margin-left: 705px;
  }
}