/**
 * @file
 */

.splidebox__overlay {
  background-color: #000;
}

.is-sbox-mounting .splidebox__overlay,
.is-sbox-umounting .splidebox__overlay {
  background-color: transparent;
}

.splidebox.is-sbox-mounted .splidebox__tn,
.splidebox.is-sbox-mounted .splidebox__closer,
.splidebox.is-sbox-mounted .splidebox__fullscreen {
  color: #fff;
  border: 0;
  border-radius: 0;
  background: none;
}

.splidebox.is-sbox-mounted .splidebox__tn {
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.8);
}

.splidebox.is-sbox-mounted .splidebox__tn svg,
.splidebox.is-sbox-mounted .splidebox__nav svg {
  fill: #fff;
}

.splidebox .splidebox__counter,
.splidebox.is-sbox-mounted .is-caption {
  color: #fff;
}

.splidebox.is-sbox-mounted .is-caption {
  transition: opacity 1.5s ease;
  opacity: 1;
}

.splidebox.is-sbox-mounted .slide__caption,
.splidebox.is-sbox-mounted .splidebox__caption.is-captioned {
  background: rgba(0, 0, 0, 0.75);
}

.splidebox.is-sbox-mounted.is-sbox-zoomed .is-caption {
  opacity: 0;
}

.splidebox.is-sbox-thumbed.is-sbox-zoomed .splidebox__caption.is-caption {
  opacity: 1;
}

/** Olivero too large H2 for small areas. */
.splidebox__caption h2 {
  margin-bottom: var(--sbox-space);
  color: #eaeaea;
  font-size: var(--sbox-caption-title);
  line-height: 1.2;
}

.splidebox.is-sbox-mounted .splide .splide__slide {
  outline: 0;
}

/** Dots are hidden from viewport, override. */
.splidebox.is-sbox-mounted .splide .splide__pagination {
  bottom: 8px;
}

.splidebox.is-sbox-mounted .splide--skin--seagreen .splide__pagination {
  bottom: 48px;
}

/** Skins. */
.splidebox.splidebox--skin--skyblue .splidebox__counter,
.splidebox.splidebox--skin--skyblue .splidebox__nav button {
  color: #20b2aa;
}

.splidebox.splidebox--skin--skyblue .splidebox__nav svg,
.splidebox.splidebox--skin--skyblue .splidebox__tn svg {
  fill: #20b2aa;
}

.splidebox.splidebox--skin--skyblue .splidebox__nav button:hover {
  color: #57e1d9;
}

.splidebox.splidebox--skin--skyblue .splidebox__nav button:hover svg,
.splidebox.splidebox--skin--skyblue .splidebox__tn:hover svg {
  fill: #57e1d9;
}

.is-splidebox .blazy__splidebox {
  cursor: crosshair;
}

/** Multiple visible items. */
.splidebox .is-carousel .splidebox__item {
  transition: opacity 1s ease;
  opacity: 0.6;
}

.splidebox .is-carousel .slide.is-visible .splidebox__item {
  opacity: 1;
}

.splidebox .splidebox__caption a {
  color: #fff;
}

.splidebox .splidebox__caption a:hover {
  text-decoration: none;
  color: #66d9ff;
}

/* With thumbnail navigation. */
.splidebox .splide--nav img {
  color: transparent;
  background: #000;
}

.splidebox.is-sbox-thumbed .splide--nav .slide {
  background: #000;
}

.splidebox.is-sbox-thumbed .splide--nav .slide__thumbnail::after {
  background: rgba(0, 0, 0, 0.5);
}

.splidebox.is-sbox-thumbed .splide--nav .slide.is-active img {
  opacity: 1;
}

.splidebox.is-sbox-thumbed .splidebox__caption.is-caption {
  color: transparent;
  background: none;
}

.splidebox.is-sbox-thumbed .splidebox__caption::before {
  color: #20b2aa;
}

.splidebox.is-sbox-thumbed .splidebox__caption:hover::before {
  color: #57e1d9;
}

.splidebox.is-sbox-thumbed .splidebox__caption.is-sbox-visible {
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
}

/*
.splidebox .splide .splide__arrow:disabled {
  cursor: not-allowed;
}
*/

.splidebox.is-sbox-thumbed .splide--nav {
  background-color: rgba(0, 0, 0, 0.8);
}

.splidebox .splide--skin--asnavfor.splide--nav .splide__track {
  padding-top: 12px;
  padding-bottom: 3px;
}

/* 1024px = 64em on 16px base font size. */
@media only screen and (min-width: 1024px) {
  /* Due to desktop scrollbar. */
  .splidebox.is-sbox-mounted .splide .splide__arrow--next {
    right: 2em;
  }
}
