.imgcmp-container {
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
}

.imgcmp-wrapper img {
    /*display: block;*/
    max-width: 100%;
}

img.imgcmp-before {
    z-index: 20; 
}

img.imgcmp-after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0; 
}

.imgcmp-overlay {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition-property: background;
    z-index: 25;
    -webkit-transition-duration: 0.5s;
       -moz-transition-duration: 0.5s;
            transition-duration: 0.5s;
}

.imgcmp-overlay:hover {
   background: rgba(0, 0, 0, 0.5); 
}

.imgcmp-label-before,
.imgcmp-label-after {
    opacity: 0;
    transition-property: opacity;
}

.imgcmp-overlay:hover .imgcmp-label-before,
.imgcmp-overlay:hover .imgcmp-label-after {
    opacity: 1;
}

.imgcmp-label-before:before,
.imgcmp-label-after:before {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    content: attr(data-content);
    font-size: 12px;
    padding: 5px;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.imgcmp-label-before:before {
    left: 10px;
}

.imgcmp-label-after:before {
    right: 10px;
}

.imgcmp-handle {
    border: 3px solid white;
    border-radius: 1000px;
    box-shadow: 0px 0px 12px rgb(51 51 51 / 50%);
    cursor: pointer;
    height: 38px;
    width: 38px;
    margin-left: -22px;
    margin-top: -22px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 40;
}

.imgcmp-handle:before,
.imgcmp-handle:after {
    background: white;
    content: " ";
    display: block;
    height: 9999px;
    width: 3px;
    margin-left: -1.5px;
    position: absolute;
    left: 50%;
    z-index: 30;
}

.imgcmp-handle:before {
    bottom: 50%;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgb(51 51 51 / 50%);
       -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
            box-shadow: 0 3px 0 white, 0px 0px 12px rgb(51 51 51 / 50%);
}

.imgcmp-handle:after {
    top: 50%;
    margin-top: 18px;
    -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgb(51 51 51 / 50%);
       -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
            box-shadow: 0 3px 0 white, 0px 0px 12px rgb(51 51 51 / 50%);
}

.imgcmp-handle .imgcmp-left-arrow,
.imgcmp-handle .imgcmp-right-arrow {
    border: 6px inset transparent;
    margin-top: 10px;
    position: absolute;
}

.imgcmp-handle .imgcmp-left-arrow {
    left: 50%;
    margin-left: -17px;
    border-right: 6px solid white;
}

.imgcmp-handle .imgcmp-right-arrow {
    right: 50%;
    margin-right: -17px;
    border-left: 6px solid white;
}