/* Slider */ 
.slick-slider{position: relative;   display: block;  box-sizing: border-box;   -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;   -webkit-touch-callout: none;  -khtml-user-select: none;  -ms-touch-action: pan-y;  touch-action: pan-y;  -webkit-tap-highlight-color: transparent;}
  .slick-list {position: relative;   display: block;  overflow: hidden;   margin: 0;  padding: 0;}
 .slick-list:focus {outline: none;}
 .slick-list.dragging {cursor: pointer;  cursor: hand;}
  .slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);  -ms-transform: translate3d(0, 0, 0);  -o-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);}
  .slick-track {position: relative;  top: 0;  left: 0;   display: block;  margin-left: auto;  margin-right: auto;}
 .slick-track:before, .slick-track:after {display: table;   content: '';}
 .slick-track:after {clear: both;}
 .slick-loading .slick-track {visibility: hidden;}
 .slick-slide {display: none;  float: left;   height: 100%;  min-height: 1px; padding-bottom: 10px;}
 [dir='rtl'] .slick-slide {float: right;}
 .slick-slide img {display: block;}
 .slick-slide.slick-loading img {display: none;}
 .slick-slide.dragging img {pointer-events: none;}
 .slick-initialized .slick-slide {display: block;}
 .slick-loading .slick-slide {visibility: hidden;}
 .slick-vertical .slick-slide {display: block;   height: auto;   border: 1px solid transparent;}
 .slick-arrow.slick-hidden {display: none;}
 /* Arrows */ 
 .slick-prev, .slick-next {font-size: 0;  line-height: 0;   position: absolute;  top: 50%;   display: block;   width: 20px;  height: 20px;  padding: 0;  -webkit-transform: translate(0, -50%);  -ms-transform: translate(0, -50%);  transform: translate(0, -50%);   cursor: pointer;   color: transparent;  border: none;  outline: none;  background: transparent;}
 .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {color: transparent;  outline: none;  background: transparent;}
 .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {opacity: 1;}
 .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {opacity: .25;}
  .slick-prev:before, .slick-next:before {font-family: 'slick';  font-size: 20px;  line-height: 1;   opacity: .75;  color: white;}
  .slick-prev {left: -25px;}
 [dir='rtl'] .slick-prev {right: -25px;  left: auto;}
 .slick-prev:before {content: '←';}
 [dir='rtl'] .slick-prev:before {content: '→';}
  .slick-next {right: -25px;}
 [dir='rtl'] .slick-next {right: auto;  left: -25px;}
 .slick-next:before {content: '→';}
 [dir='rtl'] .slick-next:before {content: '←';}
  /* Dots */ .slick-dotted.slick-slider {margin-bottom: 30px;}
  .slick-dots {position: absolute;  bottom: -25px;   display: block;   width: 100%;  padding: 0;  margin: 0;   list-style: none;   text-align: center;}
 .slick-dots li {position: relative;   display: inline-block;   width: 20px;  height: 20px;  margin: 0 5px;  padding: 0;   cursor: pointer;}
 .slick-dots li button {font-size: 0;  line-height: 0;   display: block;   width: 20px;  height: 20px;  padding: 5px;   cursor: pointer;   color: transparent;  border: 0;  outline: none;  background: transparent;}
 .slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
 .slick-dots li button:hover:before, .slick-dots li button:focus:before {opacity: 1;}
 .slick-dots li button:before {font-family: 'slick';  font-size: 6px;  line-height: 20px;   position: absolute;  top: 0;  left: 0;   width: 20px;  height: 20px;   content: '•';  text-align: center;   opacity: .25;  color: black;}
 .slick-dots li.slick-active button:before {opacity: .75;  color: black;}


/* new css */
.slick-slider-element .slick-slide {
    /*margin:0px 10px;*/
    position: relative;
}
.slick-slider-element {
    margin-top: 17px;
}
.slick-slider-element .slick-list {
    padding-top: 10px;
}
.mob-slick-slider.slick-slider-element {
    margin-top: 15px;
}
.mob-slick-slider.slick-slider-element .slick-list {
    padding-top: 0;
}

.slick-slider-element .slick-slide span {
    background: #889baa;
    position: absolute;
    left: 10px;
    top: -6px;
    padding: 4px 10px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    z-index: 9;
}
.slick-slider-element .slick-arrow {
	background: none;
    position: absolute;
    top: 50%;
    z-index: 50;
    cursor: pointer;
	padding: 0;
	font-size: 35px;
	color: #979b9e;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slick-slider-element .slick-arrow.prev-arrow {
    left: -6px;
}
.slick-slider-element .slick-arrow.next-arrow {
    right: -6px;
}
.slick-slider-element .slick-arrow.prev-arrow.slick-disabled,
.slick-slider-element .slick-arrow.next-arrow.slick-disabled {
    color: #d4dcde;
}
.cs-contact-btn-area {
    padding: 10px 0 40px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.cs-about-btn,
.cs-contact-btn { padding: 5px 5px 0 5px; }
.cs-about-btn a,
.cs-contact-btn a {
    color: #fff;
    font-size: 13px;
    padding: 5px 10px;
    display: inline-block;
    text-transform: capitalize;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.cs-about-btn a {
    background-color: #9688a9;
}
.cs-contact-btn a {
    background-color: #07c237;
}
.cs-about-btn a:hover {
    background-color: #8667b1;
	color: #fff;
}
.cs-contact-btn a:hover {
    background-color: #08a430;
	color: #fff;
}
.cs-filter-body-item {
	max-width: 510px;
	margin: 0 auto;
    padding: 0 0 10px 0;
}
.cs-filter-body-item .body-item img {
    height: auto;
    display: block;
}
.cs-filter-body-item .body-item span a {
    color: #50565c;
}
.before-after-bottom-cont {
	padding: 40px 0;
}
.before-after-bottom-cont h3 {
	padding-top: 8px;
	margin-bottom: 10px;
}
.slick-slider-element .case-study-after-before-text p {
    font-size: 14px;
    color: #50565c;
    line-height: 1.3;
}


.slick-slider-element .slick-slide h3 {
    text-align: center;
    padding-bottom: 20px;
}
.slick-slide-area {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.before-after-col {
    width: 50%;
    padding: 10px 10px;
    position: relative;
}
.before-after-col img {
    padding-bottom: 12px;
}
.before-after-accreditation, .case-study-accreditation {
    padding: 10px 10px;
	border-top: 2px solid #9589aa;
	border-bottom: 2px solid #9589aa;
	margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .cs-filter-body-item {
        padding: 0;
    }
    .slick-slider-element {
        margin-top: 20px;
    }
    /*.slick-slider-element .slick-slide { margin:0px 5px; }*/
    .slick-slider-element .slick-slide { margin:0px; }
	.before-after-bottom-cont {
		padding: 0px 0 10px 0;
	}
	.cs-contact-btn-area {
        padding-bottom: 30px;
        padding-top: 0;
    }
    .cs-about-btn {
        padding-top: 0;
    }
    .slick-slider-element .slick-slide h3 {
        font-size: 18px !important;
        max-width: 65%;
        margin: 0 auto;
    }
    .before-after-col {
        width: 65%;
        padding-bottom: 20px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    .case-study-after-before-text {
        padding: 5px 0;
    }
    .case-study-after-before-text p {
        text-align: center;
    }
    .slick-slider-element .slick-slide span {
        left: 0;
    }
}
@media screen and (max-width: 380px) {
    .cs-about-btn,
    .cs-contact-btn { width: 100%; }
}

/*CSS for sensitive image*/
.before-after-frame {
    position: relative;
    border: 10px solid #fff;
    margin-bottom: 12px;
    box-shadow: 0 4px 4px 0 #aeaeae;
    overflow: hidden;
}
.before-after-col img {
    padding-bottom: 0;
}
.before-after-frame .inner-img {
    position: relative;
}
.before-after-frame .inner-img .placeholder-img {
   position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 5;
    transition: all .7s ease-in-out;
    transform: translateY(-50%);
}
.before-after-frame:hover .inner-img .placeholder-img {
    transform: scale(10);
    opacity: 0;
    visibility: hidden;
}

.warning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 24px 18px;
    background: #F3A6A6;
    z-index: 1;
}
.warning h5 {
    color: #fff;
    font-size: 20px;
}
.warning p {
    color: #fff;
    font-size: 16px;
}
.agree-btn {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    background: #9589aa;
    font-weight: 500;
    border-radius: 6px;
    padding: 6px 12px;
}
.agree-btn:hover {
    color: #fff;
}

@media screen and (max-width: 420px) {
    .before-after-col {
        width: 72%;
    }
    .warning h5 {
        margin-bottom: 5px;
    }
}
@media screen and (max-width: 380px) {
    .warning {
        padding: 10px;
    }
    .warning p {
        font-size: 14px;
        line-height: 16px;
    }
}