/* Comparison container and img */ .cd-image-container {

position: relative;
width: 100%;
margin: 0em auto;
img {
    display: block;
    margin: 0; 
}

}

.cd-image-label {

position: absolute;
bottom: 0;
right: 0;
color: $color-white;
padding: 1em;
opacity: 0;
@include transform(translateY(20px));
@include transition(transform 0.3s 0.7s, opacity 0.3s 0.7s);
.is-hidden {
    visibility: hidden;
}

}

.cd-resize-img {

position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
@include transform(translateZ(0));
img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}
.cd-image-label {
    right: auto;
    left: 0;
}

}

@-webkit-keyframes cd-bounce-in {

0% {
  width: 0;
}
60% {
  width: 55%;
}
100% {
  width: 50%;
}

} @-moz-keyframes cd-bounce-in {

0% {
  width: 0;
}
60% {
  width: 55%;
}
100% {
  width: 50%;
}

} @keyframes cd-bounce-in {

0% {
  width: 0;
}
60% {
  width: 55%;
}
100% {
  width: 50%;
}

}

/* Comparison handle */ .cd-handle {

position: absolute;
height: 36px;
width: 36px;
left: 50%;
top: 85%;
margin-left: -18px;
margin-top: -18px;
background: url("/assets/images/cd-arrows.svg") no-repeat center center $color-main;
cursor: move;
opacity: 0;
@include border-radius(50%);
@include box-shadow(0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3));
@include transform(translate3d(0, 0, 0) scale(0));
&.draggable {
    background-color: $color-gray-dark;
}

}

.is-visible {

.cd-image-label {
    opacity: 1;
    @include transform(translateY(0));
}
.cd-resize-img {
    width: 50%;
    @include animation(cd-bouce-in .7s);
}
.cd-handle {
    opacity: 1;
    @include transform(translate3d(0, 0, 0) scale(1));
    @include transition(transform 0.3s 0.7s, opacity 0s 0.7s);
}

}