/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraLight.ttf);
  font-weight: 200;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Regular.ttf);
  font-weight: 400;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Medium.ttf);
  font-weight: 500;
}  

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-SemiBold.ttf);
  font-weight: 600;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Bold.ttf);
  font-weight: 700;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-ExtraBold.ttf);
  font-weight: 800;
} 

@font-face {
  font-family: "Unbounded";
  src: url(../../fonts/Unbounded-Black.ttf);
  font-weight: 900;
} 


:root {
  --main-bg-color-dark: #121212;
  --max-width-cont: 2000px;
  --font-text-main: "Unbounded";
  --font-text-main-weight: 400;
  --color-main: #e44f54;
  --color-white: white;
}


.cloneable {
  margin-top: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.overlay {
  z-index: 2;
  /*background-image: linear-gradient(90deg, var( --main-bg-color-dark) 85%, #0000);*/
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 37.5em;
  height: 100%;
  padding-left: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.overlay-inner {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: 28.125em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.overlay-count-row {
  color: var(--color-white);
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row;
          flex-flow: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: var(--font-text-main);
  font-size: 5.625em;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

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

.count-heading {
  font-size: 1em;
  line-height: 1;
  margin: 0px;
  font-family: var(--font-text-main);
  font-weight: 500;
}

.count-row-divider {
  background-color: var(--color-white);
  width: 7px;
  height: .75em;
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
}

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

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

.button-arrow {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 1em;
  height: .75em;
}

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

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

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

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

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

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

.button-process, .button-overlay{ -webkit-transition: opacity 0.475s ease, -webkit-transform 0.475s ease; transition: opacity 0.475s ease, -webkit-transform 0.475s ease; -o-transition: transform 0.475s ease, opacity 0.475s ease; transition: transform 0.475s ease, opacity 0.475s ease; transition: transform 0.475s ease, opacity 0.475s ease, -webkit-transform 0.475s ease;}

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

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

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

.slider-list {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row;
          flex-flow: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.slider-slide {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 42.5em;
  aspect-ratio: 3 / 2;
  padding-left: 1.25em;
  padding-right: 1.25em;
  -webkit-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
  position: relative;
}

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

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

.slide-inner-img{
  border-radius: 40px;
  width:100%;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.slide-caption {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  z-index: 2;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  background-color: rgba(0, 0, 0, 0.392);
  color: var(--color-dark);
  white-space: nowrap;
  border-radius: 20px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: .4em .75em .4em .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  overflow: hidden;
}

.caption-dot {
  background-color: var(--color-white);
  border-radius: 10em;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: .5em;
  height: .5em;
}

.caption {
  font-size: 1.25em;
  font-family: var(--font-text-main);
  margin: 0px;
  color: var(--color-main);
}

.slide-caption{ -webkit-transition: opacity 0.525s ease, -webkit-transform 0.525s ease; transition: opacity 0.525s ease, -webkit-transform 0.525s ease; -o-transition: transform 0.525s ease, opacity 0.525s ease; transition: transform 0.525s ease, opacity 0.525s ease; transition: transform 0.525s ease, opacity 0.525s ease, -webkit-transform 0.525s ease; -webkit-transition-delay:0s; -o-transition-delay:0s; transition-delay:0s; }

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