component.x-slider {
--xitemstoshow: 1;
--xspacebetween: 0px;
--xsliderautoheight: ;
}
:root {
--xadaptiveheightduration: 0.2s;
--x-slider-overflow-left: inset( -100vw -100vw -100vw 0 );
--x-slider-overflow-right: inset( -100vw 0 -100vw -100vw );
--x-slider-overflow-none: none;
--x-slider-overflow: var(--x-slider-overflow-none);
--x-slider-mask-edge: 10%;
--x-slider-mask-edge-slope: 2;
}
.brx-body.iframe .x-slider.splide {
visibility: visible;
}
.x-slider_builder .splide__list {
overflow-x: scroll;
gap: var(--xspacebetween);
}
.x-slider.x-slider_no-slides {
display: none;
}
.x-slider_builder .splide__list > .brxe-code,
.x-slider_builder .x-slider-gallery {
overflow-x: scroll;
gap: var(--xspacebetween);
display: flex;
}
.x-slider-gallery {
width: 100%;
}
.x-slider_slide {
display: flex;
}
.x-slider_slide[class*=brxe-] {
max-width: none;
}
.x-slider_slide-image {
position: relative;
}
.x-slider_slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.25);
font-size: inherit;
margin: 0;
padding: 10px 15px;
z-index: 1;
color: #fff;
}
.x-slider,
.x-slider .splide__track,
.x-slider .splide__list  {
width: 100%;
}
.x-slider {
--xsliderprogress-thickness: 4px;
}
.x-slider[data-x-slider*=isIndepententNav] > .splide__track > .splide__list >.splide__slide {
cursor: pointer;
}
.splide__track_builder {
--xslidesize: calc( ( 100%  - ( calc( var(--xitemstoshow) - 1 ) * var(--xspacebetween) ) ) / var(--xitemstoshow) )!important;
}
.x-slider .splide__track_builder.splide__track--fade .x-slider_slide {
height: 100%!important;
width: 100%!important;
}
.x-slider .splide__track_builder.x-slider_autoWidth .x-slider_slide {
width: auto!important;
}
.x-slider .splide__track_builder.splide__track--fade>.splide__list>.splide__slide:first-of-type {
opacity: 1;
}
.x-slider-gallery .splide__slide img {
height: auto;
width: 100%;
}
.x-slider_slide {
width: var(--xslidesize);
height: auto;
padding: 4rem 1rem;
}
.x-slider-gallery .x-slider_slide {
padding: 0;
}
.x-slider-gallery[data-linked] .x-slider_slide {
display: block;
}
.brxe-code .x-slider_slide {
padding: 0;
}
.x-slider_builder .splide__list .x-slider_slide {
flex-shrink: 0;
width: var(--xslidesize);
height: auto;
}
.splide__list {
display: flex;
} .x-slider_builder.splide--ttb > .splide__track > .splide__list,
.x-slider_builder.splide--ttb > .splide__track > .splide__list > .brxe-code,
.x-slider_builder.splide--ttb > .splide__track > .splide__list.x-slider-gallery {
flex-direction: column;
--xsliderautoheight: var(--xslidesize);
}
.x-slider_builder.splide--ttb > .splide__track > .splide__list > .x-slider_slide {
height: var(--xslidesize);
width: 100%;
}
.x-slider_builder.splide--ttb > .splide__track > .splide__list > .x-slider_slide {
height: var(--xsliderautoheight);
}
.x-slider .splide__arrows--ttb i {
transform: rotate(90deg);
}
.x-slider .splide__track--ttb > .splide__list > .splide__slide {
width: 100%;
} .x-slider_builder.splide--ltr > .splide__track > .splide__list,
.x-slider_builder.splide--ltr > .splide__track > .splide__list > .brxe-code,
.x-slider_builder.splide--ltr > .splide__track > .splide__list > .x-slider-gallery {
flex-direction: row;
}
.x-slider_builder.splide--rtl > .splide__track > .splide__list,
.x-slider_builder.splide--rtl > .splide__track > .splide__list > .brxe-code,
.x-slider_builder.splide--rtl > .splide__track > .splide__list > .xproslidergalleryslides {
flex-direction: unset;
}
.x-slider_builder.splide--ltr > .splide__track > .splide__list > .x-slider_slide,
.x-slider_builder.splide--rtl > .splide__track > .splide__list > .x-slider_slide  {
width: var(--xslidesize);
height: auto;
}
.x-slider_builder {
height: 100%;
}
.x-slider_slide > * {
position: relative;
}
.x-slider .splide__arrows--rtl .splide__arrow > * {
transform: rotate(180deg);
}
.x-splide__arrows .splide__arrow {
font-size: 16px;
border-radius: 100%;
transition-duration: 0.3s;
transition-property: opacity, color, background-color;
transition-timing-function: ease;
}
.x-splide__arrows .splide__arrow i {
height: 1em;
width: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.splide__track--nav>.splide__list>.splide__slide {
opacity: 1;
}
.splide__track--nav>.splide__list>.splide__slide.is-active {
opacity: 1;
}
.x-splide__track.splide__track--nav>.splide__list>.splide__slide,
.x-splide__track.splide__track--nav>.splide__list>.splide__slide.is-active {
border: none;
}
.x-slider [data-x-animation*=fade] {
opacity: 0;
}
.x-slider .splide__slide [data-x-interaction-animation] {
opacity: 0;
}
.x-slider .splide__slide [data-x-interaction-animation] {
animation-name: none;
}
.x-slider .splide__slide [data-x-interaction-animation].x-animated {
opacity: 1;
}
.x-splide__track {
clip-path: var(--x-slider-overflow);
}
.x-slider:not(.is-overflow) .splide__slide:last-child {
margin: 0 !important;
} .x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeIn,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeIn {
animation-name: fadeIn;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInDown,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInDown {
animation-name: fadeInDown;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInLeft,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInLeft {
animation-name: fadeInLeft;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInUp,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInUp {
animation-name: fadeInUp;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInRight,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInRight {
animation-name: fadeInRight;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInDownBig,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInDownBig {
animation-name: fadeInDownBig;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInLeftBig,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInLeftBig {
animation-name: fadeInLeftBig;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInUpBig,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInUpBig {
animation-name: fadeInUpBig;
}
.x-slider[data-x-slider*=is-active][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInRightBig,
.x-slider[data-x-slider*=is-active]:not([data-x-slider*=animateOnce]) .splide__slide.is-active [data-x-interaction-animation].brx-x-animate-fadeInRightBig {
animation-name: fadeInRightBig;
} .x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeIn,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeIn {
animation-name: fadeIn;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInDown,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInDown {
animation-name: fadeInDown;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInLeft,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInLeft {
animation-name: fadeInLeft;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInUp,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInUp {
animation-name: fadeInUp;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInRight,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInRight {
animation-name: fadeInRight;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInDownBig,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInDownBig {
animation-name: fadeInDownBig;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInLeftBig,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInLeftBig {
animation-name: fadeInLeftBig;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInUpBig,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInUpBig {
animation-name: fadeInUpBig;
}
.x-slider[data-x-slider*=is-visible][data-x-slider*=animateOnce] .splide__slide [data-x-interaction-animation].brx-x-animate-fadeInRightBig,
.x-slider[data-x-slider*=is-visible]:not([data-x-slider*=animateOnce]) .splide__slide.is-visible [data-x-interaction-animation].brx-x-animate-fadeInRightBig {
animation-name: fadeInRightBig;
}
.x-slider {
position: relative;
}
.x-slider .splide__arrows:not(.x-splide__arrows) {
display: none;
}
.x-slider_builder {
width: 100%;
}
[data-x-hide-caption=true] .x-slider_slide-caption {
display: none;
}
.x-slider[data-x-slider*=fade] .x-slider_slide {
margin-right: 0!important;
width: 100%;
}
.x-slider[data-x-slider*=edgeEffect] > .splide__track:not(.splide__track--ttb),
.x-slider.edgeEffect > .x-slider_builder:not(.splide--ttb) > .splide__track {
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0.5) calc(var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), black var(--x-slider-mask-edge), black calc(100% - var(--x-slider-mask-edge)), rgba(0,0,0.5) calc(100% - var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0.5) calc(var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), black var(--x-slider-mask-edge), black calc(100% - var(--x-slider-mask-edge)), rgba(0,0,0.5) calc(100% - var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), transparent 100%);
}
.x-slider[data-x-slider*=edgeEffect] > .splide__track.splide__track--ttb,
.x-slider.edgeEffect > .x-slider_builder.splide--ttb > .splide__track {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0.5) calc(var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), black var(--x-slider-mask-edge), black calc(100% - var(--x-slider-mask-edge)), rgba(0,0,0.5) calc(100% - var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0.5) calc(var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), black var(--x-slider-mask-edge), black calc(100% - var(--x-slider-mask-edge)), rgba(0,0,0.5) calc(100% - var(--x-slider-mask-edge) / var(--x-slider-mask-edge-slope)), transparent 100%);
} .x-slider[data-x-slider*=adaptiveHeight] .splide__list {
align-items: var(--xadaptiveheight);
}
.x-slider[data-x-slider*=adaptiveHeight] .splide__track {
--xadaptiveheight-disable: unset;
--xadaptiveheight-enable: flex-start;
--xadaptiveheight: var(--xadaptiveheight-disable);
transition-property: height,max-height;
transition-duration: var(--xadaptiveheightduration);
} .x-slider_builder {
--xslidedirection: ltr;
}
.x-slider_builder .x-slider-gallery:empty {
min-height: 200px;
}
body.bricks-is-frontend .x-slider_slide:focus {
outline: none;
}
body.bricks-is-frontend .x-slider_slide:focus-visible {
outline: thin dotted currentcolor;
}