div.beforeandafter {/**/display: block;
height: 434px; overflow: hidden;
width: 650px; }
div.beforeandafter img {
max-width: none !important;
}
div.beforeandafter div.drag { background: #e11631;
cursor: col-resize;
display: block;
height: 100%;
left: 100%;
position: relative;
top: 0;
transition: left 0.4s ease-in-out; width: 4px; z-index: 7;
}
div.beforeandafter div.drag div.draghandle { background: #ffffff;
width: 60px;
height: 60px;
line-height: 56px;
border-radius: 50px;
border-width: 4px;
border-style: solid;
border-color: #e11631;
position: absolute;
text-align: center;
}
div.beforeandafter div.drag div.draghandle::before {
content: "\f323";
font-family: remixicon !important;
display: inline-block;
color: #e11631;
font-size: 25px;
}
div.beforeandafter div.drag::before {
content: "Before Work";
position: absolute;
border-radius: 4px;
background: #e11631;
color: #ffffff;
top: 34px;
text-align: center;
font-size: 20px;
right: 30px;
top: 34px;
width: 150px;
height: 50px;
line-height: 50px;
}
div.beforeandafter div.drag::after {
content: "After Work";
left: 30px;
position: absolute;
border-radius: 4px;
width: 150px;
height: 50px;
line-height: 50px;
background: #e11631;
color: #ffffff;
top: 34px;
text-align: center;
font-size: 20px;
}
div.before1, div.after1 { height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transition: width 0.4s ease-in-out; width: 100%;
z-index: 7;
}
div.after1 {
z-index: 1; }
.label-bottom div.before1 span.caption { right: 30px;
}
.label-bottom div.after1 span.caption { right: 41%;
}
span.caption {
display: block;
position: absolute;
border-radius: 4px;
padding: 10px 20px;
background: #e11631;
color: #ffffff;
top: 34px;
text-align: center;
font-size: 20px;
}