.ba-before-after-image-wrapper {
position: relative;
overflow: hidden;
cursor: row-resize;
display: flex;
align-items: center;
justify-content: center
}
.ba-before-after-image-vertical {
cursor: row-resize
}
.ba-before-after-image-horizontal {
cursor: col-resize
}
.ba-before-after-img {
pointer-events: none;
-o-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
max-width: none;
width: 100%;
margin: 0!important;
padding: 0!important;
border: 0!important;
border-radius: 0!important;
top: 0;
display: block
}
.ba-before-after-image--fluid .ba-before-after-img {
display: none
}
.ba-before-after-img-before {
height: auto;
position: static;
z-index: 1;
left: 0
}
.ba-before-after-img-after {
height: 100%;
position: absolute;
z-index: 2;
left: auto;
right: 0;
width: auto
}
.ba-before-after-image-vertical .ba-before-after-img-after {
width: 100%;
height: auto
}
.icv__imposter {
z-index: 4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.ba-before-after-image-inner-wrapper {
position: absolute;
width: 100%;
height: 100%;
right: 0;
top: 0;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 3
}
.ba-before-after-image--fluid .ba-before-after-image-inner-wrapper,
.ba-before-after-image-vertical .ba-before-after-image-inner-wrapper {
width: 100%!important
}
.ba-before-after-image--fluid .ba-before-after-image-inner-wrapper,
.ba-before-after-image-horizontal .ba-before-after-image-inner-wrapper {
height: 100%!important
}
.icv__fluidwrapper {
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.ba-before-after-image-control {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
top: 0;
z-index: 5
}
.ba-before-after-image-vertical .ba-before-after-image-control {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
left: 0;
width: 100%
}
.ba-before-after-image-control-line {
height: 50%;
width: 2px;
z-index: 6;
background-color: #fff
}
.ba-before-after-image-vertical .ba-before-after-image-control-line {
width: 50%
}
.ba-before-after-image-theme-wrapper {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
-webkit-transition: all .1s ease-out 0s;
transition: all .1s ease-out 0s;
z-index: 5
}
.ba-before-after-image-vertical .ba-before-after-image-theme-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.ba-before-after-image-arrow-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .1s ease-out 0s;
transition: all .1s ease-out 0s
}
.icv__arrow-a {
-webkit-transform: scale(1.5) rotateZ(180deg);
transform: scale(1.5) rotateZ(180deg);
height: 20px;
width: 20px;
-webkit-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .33));
filter: drop-shadow(0 -3px 5px rgba(0, 0, 0, .33))
}
.icv__arrow-b {
-webkit-transform: scale(1.5) rotateZ(0);
transform: scale(1.5) rotateZ(0);
height: 20px;
width: 20px;
-webkit-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .33));
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .33))
}
.ba-before-after-image-circle {
border-style: solid;
border-color: #fff;
border-width: 2px;
width: 50px;
height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 999px;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
-ms-border-radius: 999px;
-o-border-radius: 999px
}
.ba-before-after-image-label {
position: absolute;
z-index: 12;
background: rgba(0, 0, 0, .33);
color: #fff;
border-radius: 3px;
padding: .5rem .75rem;
font-size: .7em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ba-before-after-image-horizontal .ba-before-after-image-label {
margin: 1rem 0
}
.ba-before-after-image-vertical .ba-before-after-image-label {
bottom: auto;
margin: 0 1rem
}
.ba-before-after-image-label.on-hover {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: .25s cubic-bezier(.68, .26, .58, 1.22);
transition: .25s cubic-bezier(.68, .26, .58, 1.22)
}
.icv:hover .ba-before-after-image-label.on-hover {
-webkit-transform: scale(1);
transform: scale(1)
}
.ba-before-after-image-horizontal .ba-before-after-image-label-before {
left: 1rem
}
.ba-before-after-image-horizontal .ba-before-after-image-label-after {
right: 1rem
}
.ba-before-after-image-vertical .ba-before-after-image-label-before {
top: 1rem
}
.ba-before-after-image-vertical .ba-before-after-image-label-after {
bottom: 1rem;
right: auto
}
.ba-before-after-image-body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.ba-before-after-image-label-on-hover .ba-before-after-image-label {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: .25s cubic-bezier(.68, .26, .58, 1.22);
transition: .25s cubic-bezier(.68, .26, .58, 1.22);
-moz-transition: .25s cubic-bezier(.68, .26, .58, 1.22);
-ms-transition: .25s cubic-bezier(.68, .26, .58, 1.22);
-o-transition: .25s cubic-bezier(.68, .26, .58, 1.22)
}
.ba-before-after-image-label-on-hover:hover .ba-before-after-image-label {
-webkit-transform: scale(1);
transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1)
}
.brxe-ba-before-after-image .ba-before-after-image-arrow-wrapper {
position: relative;
width: 100%;
height: 100%
}
.brxe-ba-before-after-image .ba-before-after-image-arrow-wrapper .ba-before-after-image-icon {
width: 0;
height: 0;
border: 7px inset transparent;
position: absolute;
-webkit-transition: all .1s ease-out 0s;
transition: all .1s ease-out 0s
}
.brxe-ba-before-after-image .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left {
border-right-width: 7px;
border-right-style: solid;
border-right-color: #fff
}
.brxe-ba-before-after-image .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right {
border-left-width: 7px;
border-left-style: solid;
border-left-color: #fff
}
.brxe-ba-before-after-image .ba-before-after-image-horizontal .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left {
left: 0;
transform: translateX(6px);
-webkit-transform: translateX(6px);
-moz-transform: translateX(6px);
-ms-transform: translateX(6px);
-o-transform: translateX(6px)
}
.brxe-ba-before-after-image .ba-before-after-image-horizontal .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right {
right: 0;
transform: translateX(-6px);
-webkit-transform: translateX(-6px);
-moz-transform: translateX(-6px);
-ms-transform: translateX(-6px);
-o-transform: translateX(-6px)
}
.brxe-ba-before-after-image:hover .ba-before-after-image-horizontal .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left {
transform: translateX(3px);
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
-o-transform: translateX(3px)
}
.brxe-ba-before-after-image:hover .ba-before-after-image-horizontal .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right {
transform: translateX(-3px);
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-ms-transform: translateX(-3px);
-o-transform: translateX(-3px)
}
.brxe-ba-before-after-image .ba-before-after-image-vertical .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left {
top: 0;
transform: rotateZ(90deg) translateX(6px);
-webkit-transform: rotateZ(90deg) translateX(6px);
-moz-transform: rotateZ(90deg) translateX(6px);
-ms-transform: rotateZ(90deg) translateX(6px);
-o-transform: rotateZ(90deg) translateX(6px)
}
.brxe-ba-before-after-image .ba-before-after-image-vertical .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right {
bottom: 0;
transform: rotateZ(90deg) translateX(-6px);
-webkit-transform: rotateZ(90deg) translateX(-6px);
-moz-transform: rotateZ(90deg) translateX(-6px);
-ms-transform: rotateZ(90deg) translateX(-6px);
-o-transform: rotateZ(90deg) translateX(-6px)
}
.brxe-ba-before-after-image:hover .ba-before-after-image-vertical .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-left {
transform: rotateZ(90deg) translateX(3px);
-webkit-transform: rotateZ(90deg) translateX(3px);
-moz-transform: rotateZ(90deg) translateX(3px);
-ms-transform: rotateZ(90deg) translateX(3px);
-o-transform: rotateZ(90deg) translateX(3px)
}
.brxe-ba-before-after-image:hover .ba-before-after-image-vertical .ba-before-after-image-arrow-wrapper .ba-before-after-image-arrow-right {
transform: rotateZ(90deg) translateX(-3px);
-webkit-transform: rotateZ(90deg) translateX(-3px);
-moz-transform: rotateZ(90deg) translateX(-3px);
-ms-transform: rotateZ(90deg) translateX(-3px);
-o-transform: rotateZ(90deg) translateX(-3px)
}