.before-after {
	position: relative;
	display: inline-block;
	vertical-align: top;
	user-select: none;
	overflow: hidden;
    border-radius: 20px;
}

.before-after .photo img {
	display: block;
	max-width: 100%;
	height: auto
}

.before-after .photo.before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transform: translate(-50%)
}

.before-after .photo.before .layer,
.before-after .photo.before img {
	transform: translate(50%)
}

.before-after .drag-handler {
	width: 8px;
	background-color: #b43dd0;
	margin: 0 0 0 -4px;
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	opacity: 1
}

.before-after .drag-handler .drag-element {
	position: absolute;
	left: -16px;
	top: 45%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 0;
	background-color: #7e2d91;
	border: 4px #b43dd0 solid;
	cursor: pointer;
	border-radius: 50%;
}

.before-after:hover .drag-handler {
	opacity: 1
}

.drag-element:before{
  font-family: FontAwesome;
    position: absolute;
    left: 7px;
    right: 0;
    top: 7px;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    color: white;
    font-size: large;
}

.drag-element:before {
   content: "\f337";
}