figure {
    text-align: center;
}
.carousel {
    width: 90%;
    margin: 0 auto;
}
.carousel-cell {
    position: relative;
    margin: 0;
}
.carousel.fade .carousel-cell {
  transition: opacity 1.4s;
  opacity: 0;
}
/*
 * Fullscreen carousels need to be able to have images wider than 100% to make
 * them full height on eg phones. Normal carousels should restrict images at
 * 100% width to fit them inside its container.
 * */
.carousel:not(.fullscreen) .carousel-cell-image {
    width: 100%;
}

.carousel.fade .carousel-cell.is-selected {
  transition: opacity 1.4s;
  opacity: 1;
}
.carousel.bare {
    width: 100%;
}
.carousel.fullscreen {
    z-index: 1;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}
/* Wide screens : */
@media screen and (min-aspect-ratio: 3/2) {
    .carousel.fullscreen .carousel-cell img {
        width: 100vw;
    }
}
/* Narrow screens : */
@media screen and (max-aspect-ratio: 3/2) {
    .carousel.fullscreen .carousel-cell img {
        height: 100vh;
        max-width: initial;
    }
}
.carousel-cell.is-selected {
    z-index: 5;
}
.carousel-cell.clickable {
    cursor: pointer;
}
.carousel-cell figcaption.caption {
    position: absolute;
    bottom: 1rem;
    color: white;
    background-color: #7c7c7ca3;
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    white-space: pre;
}
.carousel-cell a figcaption {
    text-decoration: underline;
}
.flickity-button {
  cursor: pointer;
  background: transparent;
  opacity: 0.3;
  transition: opacity 0.3s;
}
.flickity-button {
  background: transparent;
}
/* Big previous & next buttons. */
.flickity-prev-next-button {
  width: 60px;
  height: 100%;
}
.carousel.bare .flickity-prev-next-button {
    display: none;
}
.flickity-prev-next-button.next {
    right: -50px;
}
.flickity-prev-next-button.previous {
    left: -50px;
}
/* icon color */
.flickity-button-icon {
  fill: black;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}
/* already included in flickity.css */
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 transparent;
}
.flickity-page-dots {
    position: relative;
    bottom: -0.8rem;
    padding-bottom: 1rem;
}
.carousel.bare .flickity-page-dots {
    display: none;
}