:root {
--x-before-after-position: 50%;
--x-start-position: 50;
--x-before-after-line: 2px;
--x-before-after-controlwidth: 40px;
--x-before-after-controllength: 60px;
--x-before-after-blur: 0px;
--x-before-after-touchheight: 60px;
--x-before-after-touchwidth: 60px;
}
[data-x-before-after]{
width: 100%;
--x-before-after-position: calc(1% * var(--x-start-position));
}
component.x-before-after {
width: 100%;
position: relative;
--x-before-after-position: calc(1% * var(--x-start-position));
}
.brxe-xbeforeafterimage.x-before-after {
position: relative;
}
[data-x-before-after*=vertical] {
--x-before-after-position: calc(100% - (1% * var(--x-start-position)));
}
component.x-before-after[data-x-before-after*=vertical] {
--x-before-after-position: calc(100% - (1% * var(--x-start-position)));
}
.x-before-after_container {
height: 100%;
position: relative;
position: relative;
overflow: hidden;
height: 100%;
cursor: col-resize;
}
[data-x-before-after*=vertical] .x-before-after_container {
cursor: row-resize
}
.x-before-after-image_image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.x-before-after-image_image.brxe-image.tag {
width: 100%;
}
.x-before-after_container > .x-before-after-image_block:nth-of-type(2) {
position: static;
z-index: 1;
left: 0;
}
.x-before-after_container > .x-before-after-image_block:nth-of-type(1) {
position: absolute;
right:0;
top: 0;
z-index: 1;
clip-path: polygon(0 0, var(--x-before-after-position) 0, var(--x-before-after-position) 100%, 0% 100%); 
}
[data-x-before-after*=vertical] .x-before-after_container > .x-before-after-image_block:nth-of-type(1) {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--x-before-after-position)), 0% calc(100% - var(--x-before-after-position)));
}
.x-before-after_container > .x-before-after-image_block:nth-of-type(1) > img,
.x-before-after_container > .x-before-after-image_block:nth-of-type(1) > figure > img {
position: absolute;
height: 100%;
width: 100%;
right: 0;
left: auto;
top: 0;
} [data-x-before-after*=vertical] input {
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.x-before-after-image_block {
height: 100%;
}
input[type="range"].x-before-after_slider {
position: absolute;
inset: 0;
cursor: col-resize;
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
} input[type=range].x-before-after_slider::-webkit-slider-thumb,
input[type=range].x-before-after_slider::-moz-range-thumb,
input[type=range].x-before-after_slider::-ms-thumb {
height: var(--x-before-after-touchheight);
width: var(--x-before-after-touchwidth)
}
[data-x-before-after*=vertical] input[type="range"].x-before-after_slider {
cursor: row-resize;
}
input.x-before-after_slider:focus-visible ~ .x-before-after_slider-button .x-before-after_slider-button-icon {
border-color: currentColor;
}
.slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.x-before-after_slider-line {
position: absolute;
inset: 0;
width: var(--x-before-after-line);
background-color: #fff;
z-index: 10;
left: var(--x-before-after-position);
transform: translateX(-50%);
pointer-events: none;
}
.x-before-after_slider-line-before {
top: 0;
bottom: calc( 50% + ( var(--x-before-after-controllength) / 2 ) );
}
.x-before-after_slider-line-after {
top: calc( 50% + ( var(--x-before-after-controllength) / 2 ) );
bottom: 0;
}
[data-x-before-after*=vertical] .x-before-after_slider-line {
top: calc(100% - var(--x-before-after-position) );
width: calc( 50% - ( var(--x-before-after-controllength) / 2 ) ); 
height: var(--x-before-after-line);
transform: translateY(-50%);
}
[data-x-before-after*=vertical] .x-before-after_slider-line-before {
left: 0;
}
[data-x-before-after*=vertical] .x-before-after_slider-line-after {
right: 0;
left: auto;
}
.x-before-after_slider-button {
position: absolute;
top: 50%;
left: var(--x-before-after-position);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 10;
}
.x-before-after_slider-button-icon {
width: var(--x-before-after-controlwidth);
height: var(--x-before-after-controllength);
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 100vw;
font-size: 14px;
backdrop-filter: blur( var(--x-before-after-blur) );
border: 2px solid transparent;
}
[data-x-before-after*=vertical] .x-before-after_slider-button {
top: calc(100% - var(--x-before-after-position) );
left: 50%;
}
[data-x-before-after*=vertical] .x-before-after_slider-button > * {
transform: rotate(90deg);
}
.x-before-after_label {
z-index: 20;
position: absolute;
padding: 10px;
background: rgba(255,255,255,0.5);
}@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}.bricks-isotope-filters{color:var(--bricks-text-light);list-style-type:none;margin:0;padding:0;text-align:center}.bricks-isotope-filters li{cursor:pointer;display:inline-block;margin-bottom:30px;padding:0 20px;width:auto!important}.bricks-isotope-filters .active{color:var(--bricks-text-dark)}