.ba-slider {
	position: relative;
	overflow: hidden;
}

.ba-slider img {
	width: 100%;
	display:block;
}

.ba-slider .resize {
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: 50%;
	overflow: hidden;
}

.handle {
	position:absolute; 
  left:50%;
  top:0;
  bottom:0;
  width:4px;
  margin-left:-2px;
	background: #000000;
	background: rgba(0,0,0,.5);
  cursor: ew-resize;
}

.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: #737373; /* @gray */
	border:1px solid #585858; /* darken */
	/* ReSharper disable CssBrowserCompatibility */
	border-radius: 50%;
	transition:all 0.3s ease;
	box-shadow:
			  0 2px 6px #000000, 
			  inset 0 2px 0 #ffffff,
			  inset 0 60px 50px -30px #b1b1b1;
	box-shadow:
	  0 2px 6px rgba(0,0,0,.3), 
	  inset 0 2px 0 rgba(255,255,255,.5),
	  inset 0 60px 50px -30px #b1b1b1; /* lighten*/ 
	/* ReSharper restore CssBrowserCompatibility */
}

.handle.draggable:after {
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	line-height:50px;
	font-size:30px;
}