body {
  margin: 0;
}

#contenitore { 
  background: url(https://insufflaggiofrosinone.it/dopo.jpg) no-repeat center center;
  height: 30.5vw;
  margin: 1vw auto;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  width: 38vw;
}

#contenitore figure { 
  background-image: url(https://insufflaggiofrosinone.it/dopo.jpg);
  background-size: cover;
  font-size: 0;
  height: 100%;
  margin: 0; 
  position: relative;
  width: 100%; 
}

#separatore {
  background-image: url(https://insufflaggiofrosinone.it/prima.jpg);
  background-size: cover;
  bottom: 0;
  border-right: 5px solid rgba(255,255,255,0.7);
  box-shadow: 10px 0 15px -13px #000;
  height: 100%;
  max-width: 98.6%;
  min-width: 0.6%;
  overflow: visible;
  position: absolute;
  width: 50%; 
  animation: figure 2s 1 normal ease-in-out 0.1s; 
  -webkit-animation: figure 2s 1 normal ease-in-out 0.1s; 
}

/* barra di input */
input#slider {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none; 
  background: transparent;
  cursor: col-resize;
  height: 100vw;
  left: 0;
  margin: 0;
  outline: none; 
  padding: 0;
  position: relative;
  top: -100vw;
  width: 100%;
}

/* input slider per vari browser */
input#slider::-moz-range-track { 
  background: transparent; 
}

input#slider::-ms-track {
  border: none; 
  background-color: transparent;
  height: 100vw; 
  left: 0; 
  outline: none; 
  position: relative;
  top: -100vw; 
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: col-resize;
  color: transparent;
}

input#slider::-ms-fill-lower {
  background-color: transparent;
}

input#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}

input#slider::-moz-range-thumb {
  -moz-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}

input#slider::-ms-thumb {
  height: 100vw;
  width: 0.5%; 
  opacity: 0;
}

input#slider::-ms-tooltip {
  display: none;
}

/* frecce */
#separatore::before {
  background: url(https://cdn.josetxu.com/img/before-after-effect-arrows.png) no-repeat scroll 0 center transparent;
  background-size: contain;
  content: " ";
  float: right;
  height: 100%;
  margin-right: -34px;
  position: relative;
  top: 0;
  width: 64px;
}

/* animazione */
@keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}

@-webkit-keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}