.beforeafterwrapper {
       margin: 10px 0;
    position: relative; font-size: 0;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}



@media only screen and (min-width: 415px) {
  .beforeafterwrapper {
    margin: 10px auto;
    width: 80%;
    height: auto;
}	 
    }



@media only screen and (max-width: 414px) {
  .beforeafterwrapper {
    margin: 10px auto;
    width: 100%;
    height: auto;
}	 
    }



.beforeafterwrapper img.before {
    width: 100%; height: auto;
}
.beforeafterwrapper .after {
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 50%;
    background-size: cover;
border-right: 1px solid #FFFFFF;
box-sizing:content-box;
}
.beforeafterwrapper:hover {
    cursor: col-resize;
}