
.butterfly-container {
  width:100%;
  display:block;
  margin:30px auto;
  position: relative;
}
.butterfly-container svg {
  z-index: 1;
}
.butterfly-container img {
	max-width: auto !important;
}
#before-after {
  position: absolute; 
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  display: none;
}

/* Before & After */


#before-after-slider {
  width:100%;
  overflow:visible;
  position: absolute; 
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

#after-image {
  display:block;
  max-width: auto;
}

#before-image {
  position:absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:2;
  
}
#before-image img {
	max-width: none !important;
	min-width: 100% !important;
}
#resizer {
  position:absolute;
  display:flex;
  align-items:center;
  z-index:5;
  top:0;
  left:100%;
  height:100%;
  width:4px;
  background:black;
  /*Stop vertical scrolling on touch*/
  -ms-touch-action: pan-y;
    touch-action: pan-y;
}

#resizer:after {
font-family: 'ETmodules';
  content:'\23\24';
  font-weight:700;
  font-size: 24px;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#999;
  position:absolute;
  top: 0;
  margin: 0 0 0 -25px;
  width:60px;
  height:40px;
  letter-spacing: 8px;
  border-radius:50%;

}



/* Slide In */

.slide-in-right {
	-webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10s both;
	        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10s both;
  border: 1px solid red
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}