/* @import "lesshat"; */
.image-width{
  max-width: none !important;
}

.ba-slider {
    position: relative;
    overflow: hidden;
    margin: 50px 0 0;
}

.before-tag:before {
  content: 'BEFORE';
  font-size: 10px;
  color: white;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background: #233f88;
}
.after-tag:before {
  content: 'AFTER';
  font-size: 10px;
  color: white;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  background: #99c33c;
}
 
.ba-slider img {
    width: 100%;
    display:block;
}
 
.resize {
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 90%;
    overflow: hidden;
}

.caption {
    margin: 0;
    font-size: 14px;
}

.handle { /* Thin line seperator */
  position:absolute; 
  left:90%;
  top:0;
  bottom:0;
  width:4px;
  margin-left:-2px; 
  background: rgba(0,0,0,.4);
  cursor: ew-resize;
}
 
.handle:after {
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px; 
    content:'\f07e';
    font-family: 'Font Awesome 5 Pro';
    color:white;
    font-size:36px;
    text-align:center;
    line-height:64px; 
    background: #009fd8;
    border-radius: 50%;
    transition:all 0.3s ease;
}

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

@media (max-width: 768px) {
  .before-tag:before {
    font-size: 8px;
    padding: 5px;
  }
  .after-tag:before {
    font-size: 8px;
    padding: 5px;
  }

  .handle:after {
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px; 
    font-size:24px;
    line-height:34px; 
  }

  .draggable:after {
      width: 30px;
      height: 30px;
      margin: -15px 0 0 -15px;
      line-height:30px;
      font-size:21px;
  }
}