/* Flickity fullscreen v1.0.1
------------------------- */

.admin-bar .carousel.is-fullscreen {
  top: 32px;
  height: calc(100% - 32px);
}

.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsla(100, 100%, 100%, 0.95);
  margin: 0;
  padding: 3.5em 1.6em 1.6em 1.6em;
  z-index: 9999;
}

.flickity-enabled.is-fullscreen .carousel-cell {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.flickity-enabled.is-fullscreen .carousel-cell figure {
  height: 100%;
}

.flickity-enabled.is-fullscreen .carousel-cell img {
  padding: 0;
  object-fit: contain;
}

.flickity-enabled.is-fullscreen .carousel-cell figcaption {
  text-align: center;
  margin: 0.5em auto 0 auto; 
  width: 75%;
  height: auto;
  opacity: 1;
  display: block;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: white;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  right: 2em;
  top: 1.25em;
  width: 3.5em;
  height: 3.5em;
  color: transparent;
  background: url(../icons/full.svg) no-repeat;
}

.flickity-enabled .flickity-fullscreen-button-view {
  opacity: 0;
  transition: opacity .25s;
}

.flickity-enabled:hover .flickity-fullscreen-button-view {
  opacity: 1;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit .flickity-button-icon { 
  fill: none;
}

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
}

@media screen and (max-width: 782px) {
  .admin-bar .carousel.is-fullscreen {
    top: 46px;
    height: calc(100% - 46px);
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .carousel.is-fullscreen {
    top: 0;
    height: 100%;
  }
  .flickity-enabled.is-fullscreen {
    padding: 3.4em 0 1.6em 0;
  }
}