.ghostkit-image-compare{--gkt-image-compare__position: 50%;--gkt-image-compare--divider__width: 3px;--gkt-image-compare--divider__background-color: #fff;--gkt-image-compare--divider-icons__font-size: 1.3em;--gkt-image-compare--divider-icons__offset: 0.3em;--gkt-image-compare--divider-icons__color: #000;--gkt-image-compare--divider-hover-icons__offset: 0.35em;--gkt-image-compare--divider-button__width: 50px;--gkt-image-compare--divider-button__height: 50px;--gkt-image-compare--divider-button__background-color: #fff;--gkt-image-compare__transition-duration: var(--gkt-transition-duration);--gkt-image-compare__transition-easing: var(--gkt-transition-easing)}.ghostkit-image-compare{cursor:pointer}.ghostkit-image-compare-images{position:relative;overflow:hidden}.ghostkit-image-compare-images img{display:block;width:100%;height:auto}.ghostkit-image-compare-image-before,.ghostkit-image-compare-image-after{transition:var(--gkt-image-compare__transition-duration) clip-path var(--gkt-image-compare__transition-easing)}.ghostkit-image-compare-image-before{-webkit-clip-path:polygon(var(--gkt-image-compare__position) 0, var(--gkt-image-compare__position) 100%, 0 100%, 0 0);clip-path:polygon(var(--gkt-image-compare__position) 0, var(--gkt-image-compare__position) 100%, 0 100%, 0 0)}.ghostkit-image-compare-image-after{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;-webkit-clip-path:polygon(100% 0, 100% 100%, var(--gkt-image-compare__position) 100%, var(--gkt-image-compare__position) 0);clip-path:polygon(100% 0, 100% 100%, var(--gkt-image-compare__position) 100%, var(--gkt-image-compare__position) 0)}.ghostkit-image-compare-image-after img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.ghostkit-image-compare-images-divider{position:absolute;top:0;left:var(--gkt-image-compare__position);width:var(--gkt-image-compare--divider__width);height:100%;margin-left:calc(var(--gkt-image-compare--divider__width)/-2);background-color:var(--gkt-image-compare--divider__background-color);transition:var(--gkt-image-compare__transition-duration) left var(--gkt-image-compare__transition-easing)}.ghostkit-image-compare-images-divider:hover,.ghostkit-image-compare-images-divider:focus{--gkt-image-compare--divider-icons__offset: var(--gkt-image-compare--divider-hover-icons__offset)}.ghostkit-image-compare-images-divider::before{position:absolute;top:50%;left:50%;display:block;width:var(--gkt-image-compare--divider-button__width);height:var(--gkt-image-compare--divider-button__height);content:"";background-color:var(--gkt-image-compare--divider-button__background-color);border-radius:var(--gkt-image-compare--divider-button__width);transform:translateX(-50%) translateY(-50%)}.ghostkit-image-compare-images-divider::after{position:absolute;top:0;bottom:0;left:50%;display:block;width:var(--gkt-image-compare--divider-button__width);cursor:col-resize;content:"";transform:translateX(-50%)}.ghostkit-image-compare-images-divider-button-arrow-left,.ghostkit-image-compare-images-divider-button-arrow-right{position:absolute;top:50%;left:50%;font-size:var(--gkt-image-compare--divider-icons__font-size);color:var(--gkt-image-compare--divider-icons__color);transition:var(--gkt-image-compare__transition-duration) margin-left var(--gkt-image-compare__transition-easing);transform:translateX(-50%) translateY(-50%)}.ghostkit-image-compare-images-divider-button-arrow-left svg,.ghostkit-image-compare-images-divider-button-arrow-right svg{display:block;width:1em;max-width:none;height:1em;color:inherit}.ghostkit-image-compare-images-divider-button-arrow-right{margin-left:var(--gkt-image-compare--divider-icons__offset)}.ghostkit-image-compare-images-divider-button-arrow-left{margin-left:calc(-1*var(--gkt-image-compare--divider-icons__offset))}