.cocoen {
box-sizing:border-box;
cursor:pointer;
line-height:0;
margin:0;
overflow:hidden;
padding:0;
position:relative;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none}

.cocoen *{
box-sizing:inherit
}

.cocoen ::after,

.cocoen ::before{box-sizing:inherit}

.cocoen img,.cocoen picture>img {
max-width:none
}

.cocoen>img,.cocoen>picture>img{
display:block;
width:100%
}

.cocoen>div:first-child,picture

.cocoen>div{
height:100%;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:50%
}

.cocoen-drag {
background:#ff214f;
bottom:0;
cursor:ew-resize;
left:50%;
margin-left:0px;
position:absolute;
top:0;
width:2px}

.OLDcocoen-drag::before{
border:3px solid #ff214f;
content:'';
height:60px;
left:50%;
margin-left:-7px;
margin-top:-18px;
position:absolute;
top:50%;
width:14px

}


.cocoen-drag::before{
  position: absolute;
  height: 44px;
  width: 44px;
  content:'';
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #dc717d url("../images/cd-arrows.svg") no-repeat center center;
  cursor: move;
  


left:0%;
margin-left:-22px;
margin-top:-18px;
position:absolute;
top:50%;


}







.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #dc717d url("../img/cd-arrows.svg") no-repeat center center;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
  /* change background color when element is active */
  background-color: #445b7c;
}