/*@import "lesshat";*/

.transform{float:left;width:80%;min-height:200px;background-color: none;margin: 20px 0 0 10%;}
   .transform_greeting{float:left;width:95%;margin:0 2.5% 10px 2.5%;background-color:none;}
    .transform_greeting p{text-align:center;font-size:2.5rem;font-family: "barlow";color:white;}
     .transform_slide p{text-align:left;font-size:3rem;font-family: "barlow";color:white;}
      .transform_slide{float:left;width:100%;margin:0 0 55px 0;
                        overflow:hidden;}
            .transform_slide:after {
             clear: both;}


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

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

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



.handle {
  /* Thin line seperator */
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;

  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
}

.handle:after {
  /* Big knob  */
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;

  content: "\21d4";
  color: orange;/*#00ffff;*/
  font-weight: bold;
  font-size: 36px;
  text-align: center;
  line-height: 64px;

  background: #121212; /* @black */
  border: 2px solid orange; /* darken(@black, 5%) */
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #121212; /* lighten(@black, 20%)*/
}

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

@media all and (max-width: 800px) {
.transform{float:left;width:100%;min-height:200px;margin: 0 0 0 0;}
.transform_greeting p{text-align:center;font-size:1.7rem;font-family: "barlow";color:white;}
  }