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

.ba-slide img {
    max-width: none !important;
    width: 100%;
    display: block;
}

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

.ba-label-before {
    position: absolute; 
    top: 0; 
    left: 0;  
    padding: 5px 15px 5px 15px; 
    background: rgba(22, 22, 22, 0.45); 
    color: rgb(255, 255, 255); 
    font-size: 16px; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 2px rgba(22, 22, 22, 0.65);
}

.ba-label-after {
    position: absolute; 
    bottom: 0; 
    right: 0;  
    padding: 5px 15px 5px 15px; 
    background: rgba(22, 22, 22, 0.45); 
    color: rgb(255, 255, 255); 
    font-size: 16px; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 2px rgba(22, 22, 22, 0.65);
}

.handle {
    position: absolute; 
    left: 82%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: rgba(22, 22, 22, 0.45);
    cursor: ew-resize;
    z-index: 10000;
}

.overlay { 
  position:absolute; 
  left:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.3);
  width:100%;
}

.handle:after {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    content: '\f07e';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: white;
    font-size: 26px;
    text-align: center;
    line-height: 46px; 
    background: rgb(22, 22, 22);
    border: 1px solid rgb(22, 22, 22);
    border-radius: 50%;
    transition:all 0.3s ease;
    box-shadow:
      0 2px 6px rgba(22, 22, 22, 0.3), 
      inset 0 2px 0 rgba(204, 204, 204, 0.2),
      inset 0 60px 50px -30px #444;
}

.handle.draggable:after {
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    line-height: 39px;
    font-size: 20px;
}