.cq-beforeafter-link{
border: none;
outline: none;
text-decoration: none;
}
.cq-beforeafter {
display: block;
width: 100%;
margin: 0;
padding: 0;
position: relative; }
.cq-beforeafter .cq-beforeafter-caption{
overflow: hidden;
max-width: 100%;
width: 100%;
min-width: 240px;
display: block; position: relative;
padding: 8px;
background: #FFF;
color: #333;
left: 0;
bottom: 0;
}
.cq-beforeafter-caption.cq-beforeafter-captionright{ } .cq-beforeafter img.cq-beforeafter-img {
display: block;
width: 100%;
}
.cq-beforeafter .cq-beforeafter-resize{
position: absolute;
z-index: 1;
display: block;
top:0;
left: 0;
height: 100%;
width: 50%; overflow: hidden;
}
.cq-beforeafter .cq-beforeafter-resize .cq-beforeafter-img {
opacity: 0;
}
.cq-beforeafter .cq-beforeafter-handle { position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
margin-left:-1px;
background: rgba(255,255,255,.2);
cursor: ew-resize;
z-index: 2;
}
.cq-beforeafter .cq-beforeafter-handle i{
position: absolute;
top: 50%;
width: 32px;
height: 32px;
display: block;
margin: -16px 0 0 -16px;
color: #333;
font-size: 12px;
text-align: center;
line-height: 32px;
border-radius: 50%;
transition:all 0.3s ease;
background: #ffb800;
border: 1px solid #e6a600; box-shadow:
0 2px 6px rgba(0,0,0,.2),
inset 0 2px 0 rgba(255,255,255,.2),
inset 0 60px 50px -30px #ffd466; }
.cq-beforeafter .cq-beforeafter-handle.grass i{
background: #8CC152;
border: 1px solid #8ac051;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #A0D468;
}
.cq-beforeafter .cq-beforeafter-handle.aqua i{
background: #3BAFDA;
border: 1px solid #349dc2;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #4FC1E9;
}
.cq-beforeafter .cq-beforeafter-handle.grapefruit i{
background: #DA4453;
border: 1px solid #cf404f;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #ED5565;
}
.cq-beforeafter .cq-beforeafter-handle.pinkrose i{
background: #D770AD;
border: 1px solid #c767a1;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #EC87C0;
}
.cq-beforeafter .cq-beforeafter-handle.lightgray i{
background: #E6E9ED;
border: 1px solid #d7d8dd;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #F5F7FA;
}
.cq-beforeafter .cq-beforeafter-handle.darkgray i{
background: #656D78;
border: 1px solid #AAB2BD;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #AAB2BD;
}
.cq-beforeafter .cq-beforeafter-handle.lavender i{
color: #fff;
background: #967ADC;
border: 1px solid #876dc4;
box-shadow: 0 2px 6px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2), inset 0 60px 50px -30px #AC92EC;
}
.cq-beforeafter .cq-beforeafter-handle.draggable i{
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height: 48px;
font-size: 18px;
}