/* ------- Osmo [https://osmo.supply/] ------- */
/* Osmo UI: https://slater.app/10324/23333.css */

.drag1 {
  background-color: var(--color-black);
  color: var(--color-light);
  font-size: var(--size-font);
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.overlay10 {
  z-index: 2;
  background-image: linear-gradient(90deg, var(--color-neutral-900) 85%, #0000);
  justify-content: flex-start;
  align-items: center;
  width: 37.5em;
  height: 100%;
  padding-left: 2em;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.overlay-inner {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 28.125em;
  display: flex;
}

.overlay-count-row {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-family: PP Neue Corp, Impact, sans-serif;
  font-size: 5.625em;
  font-weight: 700;
  display: flex;
}

.count-column {
  height: 1em;
  overflow: hidden;
}

.count-heading {
  width: 2ch;
  font-size: 1em;
  line-height: 1;
  margin: 0px;
}

.count-row-divider {
  background-color: var(--color-light);
  width: 2px;
  height: .75em;
  transform: rotate(15deg);
}

.overlay-nav-row {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  display: flex;
}

.button {
  background-color: #0000;
  color: #fff;
  border: 1px solid #fff3;
  border-radius: .4em;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  padding: 0;
  display: flex;
  position: relative;
}

.button-arrow {
  flex: none;
  width: 1em;
  height: .75em;
}

.button-arrow.next {
  transform: rotate(180deg);
}

.button-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}

.overlay-corner {
  border-top: 1px solid var(--color-light);
  border-left: 1px solid var(--color-light);
  border-top-left-radius: .4em;
  width: 1em;
  height: 1em;
}

.overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}

.overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}

.overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.button, .button-overlay{ transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default)}

.button:hover .button-overlay{ transform: scale(1.4); }
.overlay-nav-row:hover:has(.button:hover) .button{ opacity: 0.4; }
.button:hover{ transform: scale(0.85); opacity: 1 !important; }

.main {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slider-wrap {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slider-list {
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.slider-slide {
  flex: none;
  width: 42.5em;
  height: 28em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  transition: opacity .4s;
  position: relative;
}

[data-slider="slide"]{ opacity: 0.2; }
[data-slider="slide"].active { opacity: 1; } 
[data-slider="slide"].active .slide-caption{ transition-delay:0.3s;} 

.slide-inner {
  border-radius: .5em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

img{
  width:100%;
  height:100;
  object-fit: cover;
}

.slide-caption {
  z-index: 2;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  background-color: var(--color-light);
  color: var(--color-dark);
  white-space: nowrap;
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: .4em .75em .4em .5em;
  display: flex;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  overflow: hidden;
}

.caption-dot {
  background-color: var(--color-dark);
  border-radius: 10em;
  flex: none;
  width: .5em;
  height: .5em;
}

.caption {
  font-size: .75em;
  font-family: arial;
  margin: 0px;
}

.slide-caption{ transition: transform 0.525s var(--cubic-default), opacity 0.525s var(--cubic-default); transition-delay:0s; }

html:not(.wf-design-mode) .slide-caption{ opacity: 0; transform:translate(-25%, 0px) }
html:not(.wf-design-mode) [data-slider="slide"].active .slide-caption{ opacity: 1; transform:translate(0%, 0px) }


@font-face {
  font-family: 'PP Neue Corp';
  src: url('https://cdn.prod.website-files.com/6717aac16c9ea22eeef1e79e/6717de2d56e40b921572d2d9_PPNeueCorp-TightUltrabold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}