:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --dot-color: inactive colour of pager bullets. Defaults to var(--nano-color-neutral-400);
  * @prop --dot-color-active: active colour of pager bullets. Defaults to var(--nano-color-primary-1000);
  *
  * @prop --navbtns-width: next / prev button width. Default 1.875rem;
  * @prop --navbtns-height: next / prev button height. Default 2.75rem;
  * @prop --navbtns-icon-color: next / prev icon color. Default var(--dot-color-active);
  * @prop --navbtns-icon-color-hover: next / prev icon color on hover. Default var(--nano-color-primary-1000);
  * @prop --navbtns-bg-color: next / prev bg color. Defaults to var(--nano-color-base-0);
  * @prop --navbtns-icon-color-disabled: next / prev icon color. Default var(--dot-color-active);
  * @prop --navbtns-bg-color-disabled: next / prev bg color. Default var(--nano-color-base-0);
  *
  * @prop --fsbtn-icon-color: fullscreen btn icon color. Default var(--dot-color-active);
  * @prop --fsbtn-bg-color: fullscreen bg color. Default var(--nano-color-base-0);
  */
  --dot-color: var(--nano-color-neutral-400);
  --dot-color-active: var(--nano-color-primary-1000);
  --navbtns-icon-color: var(--nano-color-neutral-700);
  --navbtns-icon-color-hover: var(--nano-color-primary-1000);
  --navbtns-bg-color: transparent;
  --navbtns-icon-color-disabled: var(--dot-color-active);
  --navbtns-bg-color-disabled: transparent;
  --navbtns-width: 1.5rem;
  --navbtns-height: 1rem;
  --fsbtn-icon-color: var(--dot-color-active);
  --fsbtn-bg-color: transparent;
  --flip-icon-ltr: 0;
  --flip-icon-rtl: 1;
  display: block;
  -webkit-user-select: none;
          user-select: none;
  transition: opacity 0.2s;
  opacity: 0;
  max-inline-size: 100vw;
}
:host:dir(rtl) {
  --flip-icon-ltr: 1;
  --flip-icon-rtl: 0;
}

:host([ready]) {
  opacity: 1;
}

.slideshow {
  max-block-size: 100%;
  min-block-size: inherit;
  block-size: inherit;
  position: relative;
}
.slideshow.not-ready {
  inline-size: 100%;
  overflow: hidden;
}

.flickity-container {
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  block-size: fit-content;
}
.not-ready .flickity-container {
  block-size: fit-content;
}
.flickity-container.slides-ready {
  min-block-size: inherit;
  max-block-size: inherit;
  block-size: inherit;
  inline-size: auto;
}

[hidden] {
  display: none !important;
}

.ui-extras {
  pointer-events: none;
  position: absolute;
  block-size: 100%;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
}
.ui-extras * {
  pointer-events: all;
}

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
  opacity: 1;
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  min-block-size: 100%;
  flex: 1;
}

.flickity-slider {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

.pagination {
  display: flex;
}

/* ---- flickity-button ---- */
.flickity-button {
  background: var(--navbtns-bg-color);
  border: none;
  color: #333;
  opacity: 1;
}

.flickity-button:hover {
  opacity: 1;
  cursor: pointer;
  --navbtns-icon-color: var(--navbtns-icon-color-hover);
}

.flickity-button:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
  background: var(--navbtns-bg-color-disabled);
}

.button-icon {
  display: block;
}
.button-icon::after {
  content: "";
  display: block;
  background-size: cover;
  inline-size: var(--navbtns-width);
  block-size: var(--navbtns-height);
  background-color: var(--navbtns-icon-color);
  -webkit-mask-image: var(--nano-component-icon-arrow);
          mask-image: var(--nano-component-icon-arrow);
  transition: color var(--nano-transition-fast) ease;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform-origin: center;
  margin-inline-start: auto;
  rotate: calc(180deg * var(--flip-icon-ltr));
  -webkit-mask-size: cover;
          mask-size: cover;
}
.button-icon--previous::after {
  rotate: calc(180deg * var(--flip-icon-rtl));
}

.flickity-button:disabled .button-icon::after {
  background-color: var(--navbtns-icon-color-disabled);
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button.next {
  margin-inline-start: auto;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  inset-inline: auto 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  inset-inline: 10px auto;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  inset-inline-start: 20%;
  inset-block-start: 20%;
  inline-size: 60%;
  block-size: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  inline-size: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  z-index: 4;
  display: inline-flex;
  justify-content: center;
  inset-block-end: 0;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  all: unset;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  display: inline-block;
  position: relative;
  inline-size: 1.25rem;
  block-size: 0.375rem;
  margin-block: 0;
  cursor: pointer;
  padding: calc(var(--nano-spacing-md) / 2);
}
.flickity-page-dots .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentcolor;
  background: var(--dot-color);
  margin: calc(var(--nano-spacing-md) / 2);
}
.flickity-page-dots .dot:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
  z-index: 1;
}

.flickity-page-dots .dot.is-selected::after {
  background: var(--dot-color-active);
}

.flickity-enabled.is-fullscreen {
  position: fixed;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  background: hsla(0, 0%, 0%, 0.9);
  padding-block-end: 35px;
  z-index: 100;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  inset-block-end: 45px;
}

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

/* ---- flickity-fullscreen-button ---- */
.flickity-fullscreen-button {
  display: block;
  inset-inline-end: 10px;
  inset-block-start: 10px;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 4px;
  background: var(--fsbtn-bg-color);
  fill: var(--fsbtn-icon-color);
}

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

.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-fullscreen-button .flickity-button-icon {
  position: absolute;
  inline-size: 16px;
  block-size: 16px;
  inset-inline-start: 4px;
  inset-block-start: 4px;
}

/* flickity-fade */
.flickity-enabled.is-fade .flickity-slider > * {
  pointer-events: none;
  z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected) {
  pointer-events: auto;
  z-index: 1;
}