/* https://www.jqueryscript.net/other/Responsive-Image-Diff-Tool-For-Comparing-Two-Images-simpleImageDiff.html */

.eac-images-comparison {
	margin: 0 auto;
}

.b-diff { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.b-diff img                 { max-width: 100%; box-shadow: 2px 2px 5px #000;}
.b-diff__item               { position: absolute; top: 0; left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.b-diff__item:nth-child(1)    { z-index: 1;}
.b-diff__item:nth-child(2)    { z-index: 2;}
.b-diff__control            { position: absolute; z-index: 3; height: 100%; padding: 0 18px;}
.b-diff__control:hover      { cursor: col-resize;}
.b-diff__control:hover .b-diff__arrow_left      { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0);}
.b-diff__control:hover .b-diff__arrow_right     { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0);}
.b-diff__line                                   { height: 100%; width: 4px; background: #f5f5f5;}
.b-diff__arrow              { position: absolute; top: 50%; width: 0; height: 0; -webkit-transition: transform .3s ease; transition: transform .3s ease; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}
.b-diff__arrow_left         { left: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #f5f5f5;}
.b-diff__arrow_right        { right: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left:10px solid #f5f5f5;}
.b-diff__title              { background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 0.7em; line-height: 1.2em; position: absolute; padding: 5px 10px; z-index: 2; max-width: 45%; word-wrap: break-word;}
.b-diff__title_before       { right: 0px; top: 0px;}
.b-diff__title_after        { left: 0px; top: 0px;}