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

.cocoen img,.cocoen picture>img {
  max-width: none !important;
  max-height: none !important;
}

.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:#000;
    bottom:0;
    cursor:ew-resize;
    left:50%;
    margin-left:-1px;
    position:absolute;
    top:0;
    width:1px;
}

.cocoen-drag::before {
    border:1px solid #000;
    border-radius: 3px;
    background-color: rgba(0,0,0,0.5);
    content:'';
    color: #000;
    height:30px;
    left:50%;
    margin-left:-4px;
    margin-top:-18px;
    position:absolute;
    top:50%;
    width:8px;
}

.cocoen *,.cocoen ::after,.cocoen ::before {
    box-sizing:inherit;
}