.ba__image-compare, .ba__image-compare *{box-sizing: border-box;}
.ba__image-compare{position:relative;overflow:hidden;cursor:row-resize;opacity: 0; transition: opacity .3s;}
.ba__image-compare.ready{opacity: 1;}
.ba__image-compare-vertical{cursor:row-resize}
.ba__image-compare-horizontal{cursor:col-resize}
.ba__img{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:none;width:100%;height:auto;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;top:0;display:block;position: relative;z-index:1;}

.ba__img-a{height:auto;left:0}
.ba__img-b{height:100%;position:absolute;left:auto;right:0;width:auto}
.ba__image-compare-vertical .ba__img-b{width:100%;height:auto}
.ba__mask{position:absolute;width:100%;height:100%;right:0;top:0;overflow:hidden;background-size:cover;background-position:center center;z-index:3}
.ba__image-compare-vertical .ba__mask{width:100%!important}
.ba__image-compare-horizontal .ba__mask{height:100%!important}

.ba__image-compare .ba__control{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0;z-index:6}
.ba__image-compare-vertical .ba__control{flex-direction:row;left:0;width:100%}
.ba__image-compare .ba__line{height:50%;width:2px;z-index:8}
.ba__image-compare-vertical .ba__line{width:50%}
.ba__image-compare .ba__arrows{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;position:absolute;transition:all .1s ease-out 0;z-index:7}
.ba__image-compare-vertical .ba__arrows{flex-direction:column}
.ba__image-compare [class*=ba__arrow-]{display:flex;justify-content:center;align-items:center;transition:all .3s}
.ba__image-compare .ba__arrow-left{transform:scale(1.5) rotateZ(180deg);height:20px;width:20px;-webkit-filter:drop-shadow(0px -3px 5px rgba(0,0,0,0.33));filter:drop-shadow(0px -3px 5px rgba(0,0,0,0.33))}
.ba__image-compare .ba__arrow-right{transform:scale(1.5) rotateZ(0deg);height:20px;width:20px;-webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,0.33));filter:drop-shadow(0px 3px 5px rgba(0,0,0,0.33))}
.ba__image-compare .ba__arrows svg{width:100%; height:100%;}
.ba__circle{width:50px;height:50px;flex-shrink:0;border-radius:50%;border:2px solid currentColor;}

.ba__image-compare-label{position:absolute;bottom:1em;z-index:12;background:rgba(0,0,0,.5);color:#fff;border-radius:3px;padding:.5em .75em;font-size:.8em; text-transform: uppercase; font-weight: bold; display: none;}
.ba__image-compare-vertical > .ba__image-compare-label{bottom:auto;left:1rem}
.ba__image-compare-label.on{display: block;}
.ba__image-compare-label.hover{transform:scale(0);transition:.25s cubic-bezier(0.68,0.26,0.58,1.22)}
.ba__image-compare:hover .ba__image-compare-label.hover{transform:scale(1)}
.ba__image-compare-label.before{left:1rem}
.ba__image-compare-label.after{right:1rem}
.ba__image-compare-vertical > .before{top:1rem}
.ba__image-compare-vertical > .after{bottom:1rem;right:auto}

.ba__image-compare.on-enter:not(.ba__control-circle) .ba__arrow-left,
.ba__image-compare.on-enter:not(.ba__control-circle) .ba__arrow-right{transform: translate(0) !important; }

.ba__image-compare-caption{display: none !important; position: absolute; top: 55%; left:0; z-index: 11;width:100%; text-align: center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.ba__image-compare-caption.on{display: block !important;}
.ba__image-compare-caption h2{font-size: 5vw;margin: 0;line-height:1;text-shadow: 1px 1px 1px #999, 2px 2px 1px #999, 2px 3px 1px #999;color: #fff;}
.ba__image-compare-caption p{text-transform: uppercase; font-weight: bolder; font-size:1vw;}


/* AUTOPLAY */
.ba__image-compare[class*=auto] .ba__mask{-webkit-animation: baBeforeAfterMask 10s ease-in-out infinite;animation: baBeforeAfterMask 10s ease-in-out infinite;}
@-webkit-keyframes baBeforeAfterMask { 0% { width:100%;height:100%; } 50% { width:0;height:0; } 100% { width:100%;height:100%; } }
@keyframes baBeforeAfterMask { 0% { width:100%;height:100%; } 50% { width:0;height:0; } 100% { width:100%;height:100%; } }

.ba__image-compare-horizontal[class*=auto] .ba__control{-webkit-animation: baBeforeAfterLineX 10s ease-in-out infinite;animation: baBeforeAfterLineX 10s ease-in-out infinite;}
@-webkit-keyframes baBeforeAfterLineX { 0% { left:calc(0 - 25px); } 50% { left:calc(100% - 25px); } 100% { left:calc(0 - 25px); } }
@keyframes baBeforeAfterLineX { 0% { left:calc(0% - 25px); } 50% { left:calc(100% - 25px); } 100% { left:calc(0% - 25px); } }
.ba__image-compare-vertical[class*=auto] .ba__control{-webkit-animation: baBeforeAfterLineY 10s ease-in-out infinite;animation: baBeforeAfterLineY 10s ease-in-out infinite;}
@-webkit-keyframes baBeforeAfterLineY { 0% { top:calc(100% - 25px); } 50% { top:calc(0% - 25px); } 100% { top:calc(100% - 25px); } }
@keyframes baBeforeAfterLineY { 0% { top:calc(100% - 25px); } 50% { top:calc(0% - 25px); } 100% { top:calc(100% - 25px); } }

/* STOP ON HOVER */
.ba__image-compare.on-enter[class*=hover-true] .ba__mask,
.ba__image-compare.on-enter[class*=hover-true] .ba__control{-webkit-animation-duration: 0s !important;animation-duration: 0s !important;}