/* before effect start here */
/* before and after effect start here*/
#comparison {
	width: 100%;
	padding-bottom: 70%;
	overflow: hidden; 
  position: relative;
}

.figure { 
  position: absolute;
	background-image: url(http://media.steampowered.com/apps/csgo/images/reintroducing_train/ASiteOverview-old.jpg);
	background-size: cover;
	font-size: 0;
	width: 100%;
	height: 100%;
	margin: 0; 
}

#divisor { 
	background-image: url(http://media.steampowered.com/apps/csgo/images/reintroducing_train/ASiteOverview-new.jpg);
	background-size: cover;
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	bottom: 0; height: 100%;
}

#divisor::before{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}
#divisor::after{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}
#handle {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  
}
#handle::before{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle::after{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

#slider{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 50%; left: -25px;
  transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
  z-index: 2;

}
#slider:focus,:active{
    
    border: none;
    outline: none;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
#slider::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}

.figure_2 {
  position: absolute;
  background-image: url(http://media.steampowered.com/apps/csgo/images/reintroducing_nuke/comparisons/small_upperbomb_011_old.jpg?v=1);
  background-size: cover;
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
#divisor_2 { 
	background-image: url(http://media.steampowered.com/apps/csgo/images/reintroducing_nuke/comparisons/small_upperbomb_011_new.jpg?v=1);
	background-size: cover;
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	bottom: 0; height: 100%;
}
#divisor_2::before{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}
#divisor_2::after{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}
#handle_2 {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  
}
#handle_2::before{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle_2::after{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

#slider_2{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 50%; left: -25px;
  transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
  z-index: 2;

}
#slider_2:focus,:active{
    border: none;
    outline: none;
}
#slider_2::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
#slider_2::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}


/* 3rd before and after making */

.figure_3 { 
  position: absolute;
	background-image: url(../images/before&after/kitchen_1.png);
	background-size: cover;
	font-size: 0;
	width: 100%;
	height: 100%;
	margin: 0; 
}

#divisor_3 { 
	background-image: url(../images/before&after/kitchen_2.png);
	background-size: cover;
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	bottom: 0; height: 100%;
}
#divisor_3::before{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}
#divisor_3::after{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}
#handle_3 {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  
}
#handle_3::before{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle_3::after{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

#slider_3{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 50%; left: -25px;
  transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
  z-index: 2;

}
#slider_3:focus,:active{
    border: none;
    outline: none;
}
#slider_3::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
#slider_3::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}


/* 3rd before and after making end here */

/* 3rd before and after making */

.figure_4 { 
  position: absolute;
	background-image: url(../images/before&after/photographer_1.png);
	background-size: cover;
	font-size: 0;
	width: 100%;
	height: 100%;
	margin: 0; 
}

#divisor_4 { 
	background-image: url(../images/before&after/photographer_2.png);
	background-size: cover;
	position: absolute;
	width: 50%; 
	box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
	bottom: 0; height: 100%;
}
#divisor_4::before{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  top: 0;
  box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);
}
#divisor_4::after{
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: calc(50% - 25px);
  background: white;
  z-index: 3;
  bottom: 0;
  box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);
}
#handle_4 {
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  
}
#handle_4::before{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px;
}
#handle_4::after{
  content: '';
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px;
}

#slider_4{
	-webkit-appearance:none;
	-moz-appearance:none;
	position: absolute;
	top: 50%; left: -25px;
  transform: translateY(-50%);
	background-color: transparent;
	width: calc(100% + 50px); 
  z-index: 2;

}
#slider_4:focus,:active{
    border: none;
    outline: none;
}
#slider_4::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
#slider_4::-moz-range-track {
	-moz-appearance:none;
	height:15px;
	width: 100%;
	background-color: transparent; 
	position: relative;
	outline: none;    
}


/* 4th before and after making end here */

/* before effect end here */