.cloneable {   align-items: center;  min-height: 100vh;  display: flex;  position: relative;  font-size: 1.1vw;}
.cloneable .overlay .head {margin-bottom:100px}
.cloneable .overlay .head h3{font-size:65px; font-weight:600;   /*text-transform: uppercase;*/}
.cloneable .overlay .head .txt {font-size:20px;  padding-top:20px}
.cloneable .overlay {  z-index: 2;  background-image: linear-gradient(90deg, rgb(0,0,0,.9) 50%, #0000);
  justify-content: flex-start;  align-items: center;  width: 36em;  height: 100%;  padding-left: 10em;
  display: flex;  position: absolute;  inset: 0% auto 0% 0%; }
.cloneable .overlay-inner { flex-flow: column;  justify-content: space-between;  align-items: flex-start;  /*height: 28.125em;*/  display: flex;}
.cloneable .overlay-count-row {  grid-column-gap: .2em;  grid-row-gap: .2em;  flex-flow: row;  justify-content: flex-start;
  align-items: center;   font-size: 50px;  font-weight: 700;  display: flex; margin-bottom:20px}
.cloneable .count-column {  height: 1em;  overflow: hidden;}
.cloneable .count-heading {  width: 2ch;  font-size: 1em;  line-height: 1;  margin: 0px;}
.cloneable .count-row-divider {  background-color: var(--color-light);  width: 2px;  height: .75em;  transform: rotate(15deg);}
.cloneable .overlay-nav-row {  grid-column-gap: 2em;  grid-row-gap: 2em;  display: flex;}
.cloneable .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;}
.cloneable .button-arrow {  flex: none;  width: 1em;  height: .75em;}
.cloneable .button-arrow.next {  transform: rotate(180deg);}
.cloneable .button-overlay {cursor:pointer ;  z-index: 2;  position: absolute;  inset: -1px;}
.cloneable .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;}
.cloneable .overlay-corner.top-right {  position: absolute;  inset: 0% 0% auto auto;  transform: rotate(90deg);}
.cloneable .overlay-corner.bottom-left {  position: absolute;  inset: auto auto 0% 0%;  transform: rotate(-90deg);}
.cloneable .overlay-corner.bottom-right {  position: absolute;  inset: auto 0% 0% auto;  transform: rotate(180deg);}
.cloneable .button, .button-overlay{ transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default)}
.cloneable .button:hover .button-overlay{ transform: scale(1.4); }
.cloneable .overlay-nav-row:hover:has(.button:hover) .button{ opacity: 0.4; }
.cloneable .button:hover{ transform: scale(0.85); opacity: 1 !important; }
.cloneable .main {  z-index: 0;  width: 100%;  height: 100%;  position: absolute;  inset: 0%;  overflow: hidden;}
.cloneable .slider-wrap {  justify-content: flex-start;  align-items: center;  width: 100%;  height: 100%;  display: flex;}
.cloneable .slider-list {  flex-flow: row;  justify-content: flex-start;  align-items: stretch;  display: flex;  position: relative;}
.cloneable .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; }
[data-slider="slide"].active { opacity: 1; } 
[data-slider="slide"].active .slide-caption{ transition-delay:0.3s;} 
.cloneable .slide-inner {  border-radius: .5em;  width: 100%;  height: 100%;  position: relative;  overflow: hidden;}
.cloneable img{  width:100%;  height:100%;  object-fit: cover;}

.cloneable .slide-caption {  z-index: 2;  grid-column-gap: .4em;  grid-row-gap: .4em;   color:#fff; font-weight:600;
 white-space: nowrap;  border-radius: .25em;  justify-content: flex-start;  align-items: center;
  padding:  .5em;  display: flex;  position: absolute;  top: 1.25em;  left: 1.25em;  overflow: hidden;}
.cloneable .caption {  font-size: 1.5em;   margin: 0px; /*min-width:150px; text-align:center*/}
.cloneable .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(10px, 0px) }



/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.cloneable { padding:0 10px;  align-items: center;  min-height: auto;  display: flex;  flex-direction: column; position: relative; }	
.cloneable .overlay .head {margin-bottom:10px}
.cloneable .overlay .head h3{font-size:35px; font-weight:600;  }
.cloneable .overlay .head .txt {font-size:14px;  padding-top:10px}	
.cloneable .overlay {  z-index: 2;  background-image: linear-gradient(90deg, rgb(0,0,0,0) 0%, #0000);
  justify-content: flex-start;  align-items: center;  width: 100%;  height: auto;  padding-left: 1em;
  display: block;  position: relative;  inset: 0% auto 0% 0%; }
.cloneable .overlay-count-row {font-size: 20px;  font-weight: 700;  display: flex; justify-content: flex-end; margin-bottom:10px;}
.cloneable .main {  z-index: 0;  width: 100%; display:block;  height: auto;  position: relative;  inset: 0%;  overflow: hidden;}
.cloneable .slider-slide {  flex: none;  width: 100%;  height: auto;  padding-left: 1.25em;  padding-right: 1.25em;
  transition: opacity .4s;  position: relative;}  	
.cloneable .overlay-inner { flex-flow: row; align-items:center; margin-bottom:30px; }
.cloneable .overlay-inner > div.head {width:60%;}
.cloneable .overlay-inner > div.num {width:40%; padding-right: 1em;}
.cloneable .overlay-nav-row {justify-content: flex-end;}
[data-slider="slide"]{ opacity: 1; }  
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}