.t-beforeafter {
  position:relative;
  width:100%;
  font-family:Helvetica,Arial,sans-serif
}

.t-beforeafter__slider {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  cursor:pointer
}

.t-beforeafter__handle {
  position:absolute;
  height:100%;
  width:40px;
  cursor:col-resize;
  z-index:15;
  margin-left:-20px
}

.vertical .t-beforeafter__handle {
  height:40px;
  width:100%;
  cursor:row-resize;
  margin-top:-20px;
  margin-left:0
}

.t-beforeafter__control {
  height:100%;
  margin-right:auto;
  margin-left:auto;
  width:3px;
  background-color:#fff
}

.vertical .t-beforeafter__control {
  height:3px;
  width:100%;
  background-color:#fff;
  position:relative;
  top:50%;
  transform:translateY(-50%)
}

.t-beforeafter__controller {
  position:absolute;
  top:0;
  bottom:0;
  height:60px;
  width:9px;
  margin:auto auto auto -3px;
  background-color:#fff
}

.vertical .t-beforeafter__controller {
  height:9px;
  width:100px;
  margin-left:auto;
  margin-right:auto;
  top:-3px;
  position:relative
}

.t-beforeafter__arrow,.vertical .t-beforeafter__arrow {
  position:absolute;
  width:0;
  height:0;
  transition:all .2s ease
}

.t-beforeafter__arrow {
  margin:auto;
  top:0;
  bottom:0
}

.vertical .t-beforeafter__arrow {
  margin:0 auto;
  left:0;
  right:0
}

.t-beforeafter__arrow_left {
  left:2px;
  border-style:solid;
  border-width:8px 8px 8px 0;
  border-color:transparent #fff transparent transparent
}

.t-beforeafter__arrow_right {
  right:2px;
  border-style:solid;
  border-width:8px 0 8px 8px;
  border-color:transparent transparent transparent #fff
}

.vertical .t-beforeafter__arrow_left {
  left:0;
  top:2px;
  border-style:solid;
  border-width:0 8px 8px;
  border-color:transparent transparent #fff
}

.vertical .t-beforeafter__arrow_right {
  right:0;
  top:initial;
  bottom:2px;
  border-style:solid;
  border-width:8px 8px 0;
  border-color:#fff transparent transparent
}

.t-beforeafter__handle:active .t-beforeafter__arrow_left,.t-beforeafter__handle:hover .t-beforeafter__arrow_left {
  left:-1px
}

.t-beforeafter__handle:active .t-beforeafter__arrow_right,.t-beforeafter__handle:hover .t-beforeafter__arrow_right {
  right:-1px
}

.vertical .t-beforeafter__handle:active .t-beforeafter__arrow_left,.vertical .t-beforeafter__handle:hover .t-beforeafter__arrow_left {
  left:0;
  top:0
}

.vertical .t-beforeafter__handle:active .t-beforeafter__arrow_right,.vertical .t-beforeafter__handle:hover .t-beforeafter__arrow_right {
  right:0;
  bottom:0
}

.t-beforeafter__image {
  position:absolute;
  height:100%;
  display:inline-block;
  top:0;
  overflow:hidden;
  -webkit-backface-visibility:hidden
}

.vertical .t-beforeafter__image {
  width:100%;
  left:0;
  top:initial
}

.t-beforeafter__image img {
  height:100%;
  z-index:5;
  position:absolute;
  max-height:initial;
  max-width:initial
}

.vertical .t-beforeafter__image img {
  height:initial;
  width:100%
}

.t-beforeafter__image_left {
  left:0;
  background-position:left
}

.t-beforeafter__image_left img {
  left:0
}

.t-beforeafter__image_right {
  right:0;
  background-position:right
}

.t-beforeafter__image_right img {
  right:0;
  bottom:0
}

.veritcal .t-beforeafter__image_left {
  top:0;
  background-position:top
}

.veritcal .t-beforeafter__image_left img {
  top:0
}

.vertical .t-beforeafter__image_right {
  bottom:0;
  background-position:bottom
}

.veritcal .t-beforeafter__image_right img {
  bottom:0
}

.t-beforeafter__image .t-beforeafter__label {
  font-size:1em;
  padding:.25em .75em;
  position:relative;
  display:inline-block;
  top:0;
  background-color:#000;
  background-color:rgba(0,0,0,.7);
  color:#fff;
  z-index:10;
  white-space:nowrap;
  line-height:18px;
  vertical-align:middle
}

.t-beforeafter__image_left .t-beforeafter__label {
  float:left;
  left:0
}

.t-beforeafter__image_right .t-beforeafter__label {
  float:right;
  right:0
}

.vertical .t-beforeafter__image .t-beforeafter__label {
  display:table;
  position:absolute
}

.vertical .t-beforeafter__image_right .t-beforeafter__label {
  left:0;
  bottom:0;
  top:initial
}

.t1014 .t-beforeafter__image .t-beforeafter__label {
  font-family:'Roboto',Arial,sans-serif;
  font-weight:300;
  font-size:14px;
  padding:.25em .6em
}

.t1014__wrapper {
  position:relative
}

.t1014 .t-beforeafter {
  width:100%!important
}

.t-beforeafter__mobile {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  z-index:99
}

.t-beforeafter__mobile_right {
  left:auto;
  right:0
}

@media (max-width:960px) {
  .t-beforeafter__handle {
    z-index:100
  }

}