.image-comparator {
  width: 100%;
  display: inline-block;
  padding: 6px; }
  .image-comparator.smooth .images .left, .image-comparator.smooth .images .right {
    transition: all 1s; }
  .image-comparator .images {
    width: 100%;
    height: 97%;
    height: calc(100% - 35px);
    overflow: hidden;
    position: relative;
    display: inline-block;
    margin-bottom: 5px; }
    .image-comparator .images a {
      max-width: inherit; }
      .image-comparator .images a:hover img {
        opacity: 1; }
    .image-comparator .images img {
      max-width: inherit;
      width: 100%; }
    .image-comparator .images .left, .image-comparator .images .right {
      overflow: hidden;
      width: 100%; }
      .image-comparator .images .left > img, .image-comparator .images .right > img {
        margin: 0px; }
    .image-comparator .images .right {
      position: absolute;
      top: 0px;
      left: 0px; }
    .image-comparator .images .ic-clear {
      clear: both; }
  .image-comparator.fade-in .right {
    opacity: 0.5; }
  .image-comparator.from-left .left {
    z-index: 1;
    left: -50%; }
  .image-comparator.from-left .left {
    position: absolute;
    top: 0px; }
  .image-comparator.from-left .right {
    position: relative;
    z-index: 0; }
  .image-comparator.from-right .left {
    z-index: 0; }
  .image-comparator.from-right .right {
    z-index: 1;
    left: 50%; }
  .image-comparator.side-by-side .left {
    left: -50%; }
  .image-comparator.side-by-side .right {
    left: 50%; }
  .image-comparator.overlay .left {
    position: absolute;
    top: 0px;
    z-index: 1; }
  .image-comparator.overlay .right {
    position: relative;
    z-index: 0; }
  .image-comparator.overlayed-slider {
    padding-bottom: 6px; }
    .image-comparator.overlayed-slider .left {
      border-right: 2px solid #ccc; }
    .image-comparator.overlayed-slider.from-right .left {
      border-right: 0; }
    .image-comparator.overlayed-slider.from-right .right {
      border-left: 2px solid #ccc; }
    .image-comparator.overlayed-slider[data-ic-slider-value='0'] .left {
      border-right: 0; }
    .image-comparator.overlayed-slider[data-ic-slider-value='0'] .right {
      border-left: 0; }
    .image-comparator.overlayed-slider .images {
      height: calc(100% - 40px); }
    .image-comparator.overlayed-slider div.slider {
      margin-top: -40%;
      background: transparent;
      border: 0;
      height: 0px;
      z-index: 1000; }
      .image-comparator.overlayed-slider div.slider a.ui-slider-handle {
        width: 2em;
        height: 2em;
        margin-left: calc(-1em - 2px);
        background: white;
        border-radius: 37px;
        border-width: 2px;
        outline: 0; }
      .image-comparator.overlayed-slider div.slider:focus a.ui-slider-handle {
        border-radius: 37px;
        border-width: 2px;
        color: transparent; }

.image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle {
  width: 15px;
  height: 15px;
  left: -7px;
  top: -6px;
  border-color: black;
  background-color: black;
  box-shadow: none;
  border-radius: 30px; }
.image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle:after, .image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle:before {
  display: none; }
.image-comparator.bullet-on-thin-line .noUi-target {
  border-radius: 10px;
  border-color: black;
  background-color: black;
  box-shadow: none;
  height: 5px; }

.image-comparator.gray .noUi-handle {
  border-color: #464646;
  background: #B4B4B4;
  box-shadow: inset 0 0 1px #B4B4B4, inset 0 1px 7px #898787, 0 3px 6px -3px #BBB; }
.image-comparator.gray .noUi-target {
  border-color: #464646;
  box-shadow: inset 0 1px 1px #898787, 0 3px 6px -5px #BBB; }
.image-comparator.gray .noUi-background {
  background: #B4B4B4; }

.image-comparator.hidden-slider .noUi-target {
  display: none; }

.image-comparator.red-on-green .noUi-horizontal .noUi-handle {
  background-color: red;
  border-color: darkred; }
.image-comparator.red-on-green .noUi-target {
  background-color: green;
  border-color: darkgreen; }