@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap");

.ciblo-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 800;
  overflow: hidden;
  background: #0b1220;
  --ciblo-design-w: 1920;
  --ciblo-design-h: 800;
  font-family: Montserrat, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ciblo-slideshow,
.ciblo-slideshow * {
  box-sizing: border-box;
}
.ciblo-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 800px;
  transform-origin: top left;
}
.ciblo-slideshow.is-mobile-view,
.ciblo-slideshow.has-mobile-slides {
  /* mobile size applied via JS + media query below */
}
.ciblo-slideshow[hidden],
.ciblo-nav[hidden],
.ciblo-dots[hidden],
.ciblo-dot[hidden] {
  display: none !important;
}
.ciblo-track,
.ciblo-slide {
  position: absolute;
  inset: 0;
}
.ciblo-slide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}
.ciblo-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.ciblo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
}
.ciblo-img--mobile,
.ciblo-layers--mobile {
  display: none;
}
.ciblo-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ciblo-layer {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none !important;
  text-transform: none;
  pointer-events: auto;
  opacity: 0;
  color: inherit;
  font-family: Montserrat, "Segoe UI", sans-serif !important;
  font-size: calc(var(--fs, 16) * 1px) !important;
  font-style: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.ciblo-layer,
.ciblo-layer * {
  font-family: inherit !important;
  letter-spacing: inherit;
  box-sizing: border-box;
}
.ciblo-layer.is-upper {
  text-transform: uppercase;
}
.ciblo-layer--heading {
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  text-indent: 0;
  margin: 0;
  padding: 0;
}
.ciblo-layer-text {
  display: inline;
  margin: 0;
  padding: 0;
  text-indent: 0;
  letter-spacing: inherit;
}
.ciblo-layer--heading .ciblo-layer-text,
.ciblo-layer--text .ciblo-layer-text {
  display: block;
}
.ciblo-layer--text {
  text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.ciblo-layer-list {
  margin: 0;
  padding-left: 1.15em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.ciblo-layer-list li {
  margin: 0 0 .28em;
  padding: 0;
}
.ciblo-layer--ul .ciblo-layer-list {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.15em;
}
.ciblo-layer--ol .ciblo-layer-list {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.15em;
}
.ciblo-layer--price {
  display: flex;
  align-items: baseline;
  gap: .4em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  width: auto !important;
  white-space: nowrap;
}
.ciblo-layer--price s {
  opacity: .65;
  font-weight: 400;
  font-size: .78em;
  text-decoration: line-through;
}
.ciblo-btn-front,
.ciblo-badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .9em;
  border-radius: 999px;
  font-weight: 700;
  text-shadow: none;
  white-space: nowrap;
  width: auto !important;
}
.ciblo-btn-front .material-icons,
.ciblo-badge .material-icons {
  font-size: 1.15em;
  line-height: 1;
  width: auto;
  height: auto;
}
.ciblo-icon-img {
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.ciblo-btn-front--primary {
  background: #2563eb;
  color: #fff !important;
}
.ciblo-btn-front--outline {
  background: transparent;
  border: 1px solid currentColor;
}
.ciblo-btn-front--dark {
  background: #0f172a;
  color: #fff !important;
}
.ciblo-btn-front--light {
  background: #fff;
  color: #0f172a !important;
}
.ciblo-badge {
  padding: 0;
  background: transparent;
}

.ciblo-slide.is-active .ciblo-layer.is-anim-none { opacity: 1; }
.ciblo-slide.is-active .ciblo-layer.is-anim-fade { animation-name: cibloFade; animation-fill-mode: forwards; animation-timing-function: ease; }
.ciblo-slide.is-active .ciblo-layer.is-anim-fadeUp { animation-name: cibloFadeUp; animation-fill-mode: forwards; animation-timing-function: ease; }
.ciblo-slide.is-active .ciblo-layer.is-anim-fadeDown { animation-name: cibloFadeDown; animation-fill-mode: forwards; animation-timing-function: ease; }
.ciblo-slide.is-active .ciblo-layer.is-anim-fadeLeft { animation-name: cibloFadeLeft; animation-fill-mode: forwards; animation-timing-function: ease; }
.ciblo-slide.is-active .ciblo-layer.is-anim-fadeRight { animation-name: cibloFadeRight; animation-fill-mode: forwards; animation-timing-function: ease; }
.ciblo-slide.is-active .ciblo-layer.is-anim-zoom { animation-name: cibloZoom; animation-fill-mode: forwards; animation-timing-function: ease; }

@keyframes cibloFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cibloFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cibloFadeDown {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cibloFadeLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cibloFadeRight {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes cibloZoom {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.ciblo-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border: 0;
  border-radius: 50%;
  background: #000;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ciblo-nav .material-icons { font-size: 20px; }
.ciblo-nav--prev { left: 18px; }
.ciblo-nav--next { right: 18px; }
.ciblo-nav:hover { background: #ee3333; }
.ciblo-dots {
  position: absolute;
  left: 28px;
  bottom: 18px;
  z-index: 4;
  display: flex;
  gap: 8px;
}
.ciblo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.ciblo-dot.is-on { background: #fff; }

@media (max-width: 767px) {
  .ciblo-slideshow:not(.is-desktop-view) {
    aspect-ratio: 767 / 500;
    --ciblo-design-w: 767;
    --ciblo-design-h: 500;
  }
  .ciblo-slideshow:not(.is-desktop-view) .ciblo-canvas {
    width: 767px;
    height: 500px;
  }
  .ciblo-slideshow:not(.has-mobile-slides) {
    display: none !important;
  }
  .ciblo-slide:not(.has-mobile) {
    display: none !important;
  }
  .ciblo-dot:not(.has-mobile) {
    display: none !important;
  }
  .ciblo-slide.has-mobile .ciblo-img--desktop,
  .ciblo-slide.has-mobile .ciblo-layers--desktop {
    display: none;
  }
  .ciblo-slide.has-mobile .ciblo-img--mobile,
  .ciblo-slide.has-mobile .ciblo-layers--mobile {
    display: block;
  }
  .ciblo-nav--prev { left: 8px; }
  .ciblo-nav--next { right: 8px; }
  .ciblo-dots { left: 16px; bottom: 12px; }
}