#before_after_img{ text-align:center; }
#before_after_img dl {position:relative;}
#before_after_img dl:after{position:absolute; top:50%; left:50%; width:40px; height:40px; margin-top:-20px; margin-left:-20px; line-height:40px;  background:var(--dark); border-radius:50%; content:"\f105"; font-size:2em; color:#FFF; font-family:'fontawesome'; z-index:2;}
#before_after_img dt{ width:50%;  }
#before_after_img dd{ width:50%; }
#before_after_img dl img{max-width:100%;width:100%;}
#before_after_img dl h6{font-size:1.1em; color:#FFF;  padding:10px 0;}
#before_after_img dl dt h6{background:#999}
#before_after_img dl dd h6{background:var(--dark)}

#before_after_img dl  span{position:absolute; top:1em; left:1em; z-index:2;color:#FFF; font-size:1.2em;}
#before_after_img dl  strong{position:absolute; top:1em; right:1em; z-index:2; color:#FFF;font-size:1.2em; }

#before_after_img dt:before,
#before_after_img dd:before{position:absolute; top:0; left:0; right:0; height:5em; background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%); content:"";}