body {
margin:0;
padding:0;
}
.ba-slider, .ba-slider2, .ba-slider3 {
position: relative;
overflow: hidden;
width:100%;
margin:auto auto;
}
.ba-slider img, .ba-slider2 img, .ba-slider3 img {
width: 100%;
display:block;
max-width:none;
}
.ba-slider .resize, .ba-slider2 .resize, .ba-slider3 .resize {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
}
.ba-slider .handle, .ba-slider2 .handle, .ba-slider3 .handle {
position:absolute; 
left:50%;
top:0;
bottom:0;
width:4px;
margin-left:-2px;
background: rgba(0,0,0,.5);
cursor: ew-resize;
}
.ba-slider .handle:after, .ba-slider2 .handle:after, .ba-slider3 .handle:after {
position: absolute;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
content:'\21d4';
color:white;
font-weight:bold;
font-size:36px;
text-align:center;
line-height:64px;
background: #224d7e;
border:1px solid #224d7e;;
border-radius:50%;
transition:all 0.5s ease;
}
.ba-slider .handle.ba-draggable:after, .ba-slider2 .handle.ba-draggable:after, .ba-slider3 .handle.ba-draggable:after {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height:50px;
font-size:30px;
}