.cndkbeforeafter{overflow:hidden;transition:.5s;position:relative}.cndkbeforeafter-container{height:100%;position:absolute;top:0;background:none;left:0;width:100%;z-index:10}.cndkbeforeafter-item{overflow:hidden;position:relative}.cndkbeforeafter-item img,.cndkbeforeafter-item>div{height:100%;position:absolute}.cndkbeforeafter-item img{top:0;left:0;width:auto}.cndkbeforeafter-item-before{z-index:5}.cndkbeforeafter-item-after{z-index:10}.cndkbeforeafter-seperator{height:100%;position:absolute;top:0;background:#000;cursor:ew-resize;left:0;width:4px;z-index:15}.cndkbeforeafter-seperator>div>span{height:60px;border:3px solid #000;transition:.25s;position:absolute;top:50%;border-radius:30px;background:#fff;cursor:pointer;cursor:ew-resize;margin-left:-30px;left:50%;width:60px;margin-top:-30px}.cndkbeforeafter-seperator>div>span:after{border:solid #9e9e9e;border-width:0 7px 7px 0;margin-left:10px;left:0}.cndkbeforeafter-seperator>div>span:after,.cndkbeforeafter-seperator>div>span:before{transform:rotate(135deg);-webkit-transform:rotate(135deg);padding:6px;content:"";position:absolute;top:50%;margin-top:-10px;display:inline-block}.cndkbeforeafter-seperator>div>span:before{border:solid #9e9e9e;margin-right:10px;right:0;border-width:7px 0 0 7px}.cndkbeforeafter-seperator:active>div>span,.cndkbeforeafter-seperator:hover>div>span{background:#000}.cndkbeforeafter-seperator:active>div>span{transform:scale(.8)}.cndkbeforeafter-seperator:hover{opacity:1!important}.cndkbeforeafter-seperator:active{box-shadow:0 0 35px #000}.cndkbeforeafter-item-after-text,.cndkbeforeafter-item-before-text{padding:10px;color:#fff;position:absolute;background:rgba(0,0,0,.6);display:inline-block;z-index:14}.cndkbeforeafter-top-left{top:0;left:0}.cndkbeforeafter-top-right{right:0;top:0}.cndkbeforeafter-bottom-left{bottom:0;left:0}.cndkbeforeafter-bottom-right{right:0;bottom:0}.cndkbeforeafter-extra-small-text{padding:5px!important;font-size:11px!important;bottom:0}.cndkbeforeafter-extra-small-text-before{left:0}.cndkbeforeafter-extra-small-text-after{right:0}.cndkbeforeafter-hover:hover{opacity:.95;box-shadow:0 0 50px #ccc}.cndkbeforeafter-drag-transition{transition:.5s}.cndkbeforeafter-hover-transition{transition:0s}.cndkbeforeafter-animation{animation:cndkbeforeafter-startanimaton 1s ease-in-out}.cndkbeforeafter-animation-item-1{animation:cndkbeforeafter-continuous-1 10s ease-in-out infinite}.cndkbeforeafter-animation-item-2{animation:cndkbeforeafter-continuous-2 10s ease-in-out infinite}.cndkbeforeafter-animation-seperator{animation:cndkbeforeafter-continuous-3 10s ease-in-out infinite}@keyframes cndkbeforeafter-startanimaton{0%{transform:scale(.85);opacity:0;width:50%}to{transform:scale(1);opacity:1;width:100%}}@keyframes cndkbeforeafter-continuous-1{0%{width:10%}50%{width:90%}to{width:10%}}@keyframes cndkbeforeafter-continuous-2{0%{width:90%}50%{width:10%}to{width:90%}}@keyframes cndkbeforeafter-continuous-3{0%{left:10%}50%{left:90%}to{left:10%}}.cndkbeforeafter-theme-light .cndkbeforeafter-seperator{background:#fff!important}.cndkbeforeafter-theme-light .cndkbeforeafter-seperator>div>span{border-color:#fff!important;background:#fff!important}.cndkbeforeafter-theme-light .cndkbeforeafter-seperator>span:after,.cndkbeforeafter-theme-light .cndkbeforeafter-seperator>span:before{border-color:#fff!important}.cndkbeforeafter-theme-light :active>div>span,.cndkbeforeafter-theme-light :hover>div>span{background:#fff!important}.cndkbeforeafter-theme-light .cndkbeforeafter-item-after-text,.cndkbeforeafter-theme-light .cndkbeforeafter-item-before-text{color:#000!important;background:#fff!important}.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator{background:#000!important}.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator>div>span{border-color:#000!important;background:#000!important}.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator>span:after,.cndkbeforeafter-theme-dark .cndkbeforeafter-seperator>span:before{border-color:#000!important}.cndkbeforeafter-theme-dark :active>div>span,.cndkbeforeafter-theme-dark :hover>div>span{background:#000!important}.cndkbeforeafter-theme-dark .cndkbeforeafter-item-after-text,.cndkbeforeafter-theme-dark .cndkbeforeafter-item-before-text{color:#fff!important;background:#000!important}@media only screen and (max-width:600px){.cndkbeforeafter{width:100%!important}}