.cq-imagecompare {
  position: relative;
  width: 100%;
  min-height: 270px;
  clear: both;
}


.cq-imagecompare-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  border-radius: 50%;
  border: none;
  margin: 0;
  padding: 0;
  line-height: 100%;
}
.cq-imagecompare-btn:focus{
  outline: none;
  text-decoration: none;
}
.cq-imagecompare-btn .cq-imagecompare-icon{
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  line-height: 40px;
  text-align: center;
}
.cq-imagecompare-contentcontainer {
  width: 100%;
  position: relative;
}

.cq-imagecompare-captioncontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  min-height: 270px;
}
.cq-imagecompare-caption{
  min-height: 270px;
}
.cq-imagecompare-shape-round .cq-imagecompare-captioncontainer, .cq-imagecompare-shape-round .cq-imagecompare-imagecontainer, .cq-imagecompare-shape-round .cq-imagecompare-caption{
  border-radius: 4px;
}
.cq-imagecompare-shape-rounded .cq-imagecompare-captioncontainer, .cq-imagecompare-shape-rounded .cq-imagecompare-imagecontainer, .cq-imagecompare-shape-rounded .cq-imagecompare-caption{
  border-radius: 8px;
}
.cq-imagecompare-shape-square .cq-imagecompare-captioncontainer, .cq-imagecompare-shape-square .cq-imagecompare-imagecontainer, .cq-imagecompare-shape-square .cq-imagecompare-caption{
  border-radius: 0px;
}

.cq-imagecompare-item-grapefruit{
  background-color: rgb(207, 45, 66);
}
.cq-imagecompare-item-bittersweet{
  background-color: rgb(225, 64, 49);
}
.cq-imagecompare-item-sunflower{
  background-color: rgb(243, 174, 52);
}
.cq-imagecompare-item-grass{
  background-color: rgb(140, 193, 82);
}
.cq-imagecompare-item-mint{
  background-color: rgb(49, 177, 137);
}
.cq-imagecompare-item-aqua{
  background-color: rgb(50, 159, 209);
}
.cq-imagecompare-item-lavender{
  background-color: rgb(131, 97, 211);
}
.cq-imagecompare-item-bluejeans{
  background-color: rgb(59, 115, 211);
}
.cq-imagecompare-item-pinkrose{
  background-color: rgb(203, 86, 157);
}
.cq-imagecompare-item-lightgray{
  color: #333;
  background-color: rgb(224, 227, 233);
}
.cq-imagecompare-item-mediumgray{
  background-color: rgb(154, 162, 176);
}
.cq-imagecompare-item-darkgray{
  background-color: rgb(51, 57, 67);
}
.cq-imagecompare-item-transparent{
  background-color: none;
}



.cq-imagecompare-caption {
  width: 50%;
  padding: 25px 25px;
  color: #fff;
  font-weight: 300;
  /*background-color: #EFEFEF;*/
}

.cq-imagecompare-caption .cq-imagecompare-title {
  color: #FFF;
  padding: 0;
  margin-bottom: 1em;
  font-size: 1.2em;
  line-height: 1em;
}

.cq-imagecompare-imagecontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  width: 50%;
  height: 100%;
  min-height: 270px;
  -webkit-box-shadow: 2px 0 15px rgba(0, 0, 0, 0.25);
          box-shadow: 2px 0 15px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  -webkit-transition: -webkit-transform .4s ease-in-out;
  transition: -webkit-transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
  transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
  -webkit-transform: translate3d(100%, -50%, 0);
          transform: translate3d(100%, -50%, 0);
}

.cq-imagecompare-imagecontainer .cq-imagecompare-img1 {
  -webkit-transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
}


.cq-imagecompare-imagecontainer .cq-imagecompare-img2,
.cq-imagecompare-imagecontainer .cq-imagecompare-img1 {
  position: absolute;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .4s ease-in-out, visibility .4s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out, transform .5s ease-in-out;
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.cq-imagecompare-imagecontainer .cq-imagecompare-img2 {
  -webkit-transform: translate3d(120px, 0, 0);
          transform: translate3d(120px, 0, 0);
}


.cq-imagecompare-imagecontainer .cq-imagecompare-img1 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state1 {
  -webkit-animation: cq-bounce-left 1s forwards;
          animation: cq-bounce-left 1s forwards;
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state1 .cq-imagecompare-img2 {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state1 .cq-imagecompare-img1 {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(-120px, 0, 0);
          transform: translate3d(-120px, 0, 0);
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state2 {
  -webkit-animation: cq-bounce-right 1s forwards;
          animation: cq-bounce-right 1s forwards;
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state2 .cq-imagecompare-img2 {
  opacity: 0;
  visibility: hidden;
}

.cq-imagecompare-imagecontainer.cq-imagecompare-state2 .cq-imagecompare-img1 {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@-webkit-keyframes cq-bounce-left {
  0% {
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0);
  }
  50% {
    -webkit-transform: translate3d(-30px, -50%, 0);
            transform: translate3d(-30px, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
}
@keyframes cq-bounce-left {
  0% {
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0);
  }
  50% {
    -webkit-transform: translate3d(-30px, -50%, 0);
            transform: translate3d(-30px, -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
}

@-webkit-keyframes cq-bounce-right {
  0% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  50% {
    -webkit-transform: translate3d(calc(100% + 30px), -50%, 0);
            transform: translate3d(calc(100% + 30px), -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0);
  }
}

@keyframes cq-bounce-right {
  0% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  50% {
    -webkit-transform: translate3d(calc(100% + 30px), -50%, 0);
            transform: translate3d(calc(100% + 30px), -50%, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, -50%, 0);
            transform: translate3d(100%, -50%, 0);
  }
}