section.before-after-detail{
  //  padding:$section-padding;
  .before-after-slider{
    margin-top:2rem;
  }
  .before-after-slider {
    &.slick-slider.text-nav{
      .slick-prev, .slick-next{
        border-radius: 2px;
        padding: .35rem;
        &:before{
          color:$white;
        }
        //background-color: $identity-color;
      }
    }
    .slick-slide{
      margin:0;
    }
  }
  .before-after-thumbnail-slider{
    -webkit-box-shadow: 0px -3px 3px 0px rgba(14,14,14,0.2);
    -moz-box-shadow: 0px -3px 3px 0px rgba(14,14,14,0.2);
    box-shadow: 0px -3px 3px 0px rgba(14,14,14,0.2);
    margin-top: 10px;
    background-color:$white;
    .slick-track{
      margin:0;
    }
    .slick-list{
      padding:0!important;
    }
    .slick-slide div:first-child{
      position:relative;
      margin:2px;
    }
    .slick-current .thumbnail-wrp:after{
      opacity:0;
    }
    .thumbnail-wrp {
      position:relative;
      img {
        width:100%;
        vertical-align:top;
      }
      &:after, &:before {
        position:absolute;
        opacity:0.85;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
      }
      &:after {
        content:'\A';
        width:100%; height:100%;
        top:0; left:0;
        background:rgba(0,0,0,0.5);
      }
      &:hover:after, &:hover:before{
        opacity:0.25;
        cursor:pointer;
      }
    }
  }
}
@import 'themes-config.scss';

@include themify($themes) {
  section.before-after-detail{
    .before-after-slider {
      &.slick-slider.text-nav{
        .slick-prev, .slick-next{
          background-color:themed('primary');
        }
      }
    }
  }
}