.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:#fff;bottom:0;cursor:ew-resize;left:50%;margin-left:-1px;position:absolute;top:0;width:2px}.cocoen-drag::before{border:3px solid #fff;content:"";position:absolute;top:50%;left:50%;margin:0;width:30px;height:50px;border-radius:0;transform:translate(-50%,-50%)}.cocoen{position:relative}.cocoen-overlay{position:absolute;-webkit-transition-property:background;-moz-transition-property:background;transition-property:background;background:rgba(0,0,0,0);width:100%;height:100%;top:0;left:0}.cocoen-overlay:hover{background:rgba(0,0,0,.5)}.cocoen-after-label,.cocoen-before-label{opacity:0}.cocoen-overlay:hover .cocoen-after-label,.cocoen-overlay:hover .cocoen-before-label{opacity:1}.cocoen-after-label::before,.cocoen-before-label::before{background:rgba(255,255,255,.2);position:absolute;top:50%;margin-top:-19px;line-height:38px;padding:0 20px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#fff}.cocoen-before-label::before{content:"Before";left:10px}.cocoen-after-label::before{content:"After";right:10px}