.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.0; }
    .image-comparator .images img {
      max-width: inherit;
      width: 100%;
      border: 0;
      padding: 0; }
    .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 {
    position: relative;
    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: 1px 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 .slider-wrapper {
      position: absolute;
      width: 100%;
      width: calc(100% - 12px);
      left: 6px;
      top: 50%; }
      .image-comparator.overlayed-slider .slider-wrapper div.slider {
        background: transparent;
        border: 0;
        height: 0;
        z-index: 1000; }
        .image-comparator.overlayed-slider .slider-wrapper div.slider a.ui-slider-handle {
          width: 2em;
          height: 2em;
          background: white;
          border-radius: 37px;
          border-width: 2px;
          outline: 0; }
        .image-comparator.overlayed-slider .slider-wrapper div.slider:focus a.ui-slider-handle {
          border-radius: 37px;
          border-width: 2px;
          color: transparent; }
  .image-comparator .noUi-target {
    border-radius: 2px;
    border: 1px solid #c3c3c3; }
  .image-comparator .noUi-horizontal {
    height: 12px; }
    .image-comparator .noUi-horizontal .noUi-handle {
      width: 22px;
      height: 22px;
      border-radius: 2px;
      border-color: #c3c3c3;
      left: -10px;
      top: -6px; }
      .image-comparator .noUi-horizontal .noUi-handle:before, .image-comparator .noUi-horizontal .noUi-handle:after {
        display: none; }

.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; }

.image-comparator.rounded-handle .noUi-horizontal .noUi-handle {
  border-radius: 20px;
  top: -8px; }
.image-comparator.rounded-handle .noUi-horizontal {
  height: 8px; }

.image-comparator.subtle .noUi-target {
  border-radius: 2px;
  border: 1px solid #f9f9f9;
  transition: 0.5s border-color; }
.image-comparator.subtle:hover .noUi-target {
  border: 1px solid #D3D3D3; }
.image-comparator.subtle .noUi-horizontal {
  height: 12px; }
  .image-comparator.subtle .noUi-horizontal .noUi-handle {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    left: -10px;
    top: -6px; }
    .image-comparator.subtle .noUi-horizontal .noUi-handle:before, .image-comparator.subtle .noUi-horizontal .noUi-handle:after {
      display: none; }