/**
 * Blocksy - v1.8.40
 * 
 * Copyright (c) 2022
 * Licensed GPLv2+
 */

/**
 * container possible states with data-flexy attribute:
 * no: future slider, to be initialized
 * no:scalerotate: future slider with scaleRotate effect
 * empty string: flexy is initialized properly
 *
 * One can customize content of the :after attribute in order to enable/disable
 * the slider effect of flexy. The JS will detect this moment and remove/restore
 * the data-flexy attribute.
 */
.flexy-container:not([data-flexy]) .flexy-items {
  flex-wrap: wrap;
}
.flexy-container:not([data-flexy]) .flexy-pills,
.flexy-container:not([data-flexy]) [class*=flexy-arrow] {
  display: none;
}

.flexy,
.flexy-pills {
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}

[data-flexy*=no] .flexy-items > * {
  transform: translate3d(calc(-100% * var(--current-item, 0)), 0, 0);
}
[data-flexy*=no][data-wrap*=viewport] .flexy-items > * {
  order: 2;
  transform: translate3d(-100%, 0, 0);
}
[data-flexy*=no][data-wrap*=viewport] .flexy-items > *:last-child {
  order: 1;
}

[data-flexy=no] [data-height=dynamic] > *:not([data-item=initial]) {
  height: 1px;
}

.flexy-items {
  display: flex;
  will-change: transform, max-height;
}
.flexy-items > * {
  cursor: pointer;
}
.flexy-items[data-height=dynamic] {
  max-height: var(--sliderHeight, initial);
  transition: max-height 0.2s ease;
}

.flexy-items > * {
  flex: 0 0 100%;
  max-width: 100%;
}

[data-flexy-dragging] {
  cursor: ew-resize;
}
[data-flexy-dragging] .flexy-items > * {
  pointer-events: none;
}

[data-flexy-view=boxed] {
  overflow: hidden;
}

.flexy-pills ol,
.flex-control-nav {
  display: flex;
  flex-direction: var(--pills-direction);
  justify-content: var(--pills-horizontal-alignment);
  flex-wrap: var(--pills-wrap, wrap);
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  --listItemSpacing: 0;
}
.flexy-pills ol li,
.flex-control-nav li {
  flex: 0 0 var(--thumbs-width, 20%);
  width: var(--thumbs-width, 20%);
  cursor: pointer;
}

.flexy-pills [data-flexy] {
  overflow: hidden;
  --pills-wrap: nowrap;
}

.flexy-pills[data-type=circle] li {
  --thumbs-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--thumbs-width);
}
.flexy-pills[data-type=circle] li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  box-shadow: inset 0 0 0 5px var(--flexyInitialPill, rgba(44, 62, 80, 0.9));
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.flexy-pills[data-type=circle] li.active:before {
  transform: scale3d(2, 2, 1);
  box-shadow: inset 0 0 0 1px var(--flexyActivePill, rgba(44, 62, 80, 0.9));
}

[class*=flexy-arrow] {
  position: absolute;
  top: calc(var(--thumbs-spacing, 15px) / 2 + 50% - 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--flexy-nav-arrow-color, var(--color));
  opacity: 0;
  transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
[class*=flexy-arrow]:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: var(--flexy-nav-background-color, #fff);
  transition: transform 0.2s ease;
  box-shadow: 0px 25px 40px rgba(0, 0, 0, 0.03);
}
[class*=flexy-arrow] svg {
  position: relative;
  fill: currentColor;
}
[class*=flexy-arrow]:hover {
  color: var(--flexy-nav-arrow-hover-color, #fff);
}
[class*=flexy-arrow]:hover:before {
  transform: scale3d(1.1, 1.1, 1);
  background: var(--flexy-nav-background-hover-color, var(--paletteColor1));
}

[class*=flexy-arrow] {
  transform: rotate(var(--rotate, 0)) translateX(var(--translate-x, 0));
}

.flexy-arrow-prev {
  left: 20px;
  --translate-x: -10px;
}

.flexy-arrow-next {
  right: 20px;
  --translate-x: 10px;
}

[class*=flexy]:hover > [class*=flexy-arrow] {
  opacity: 1;
  --translate-x: 0;
}

.flexy-pills ol:not([data-flexy]) ~ [class*=arrow],
.flexy-pills ol[data-flexy*=no] ~ [class*=arrow] {
  display: none;
}