body {
	margin:0;
}

#contenedor { 
  
	height: 73.5vw;
	margin: 1vw auto;
	max-height: 750px;
	max-width: 1000px;
	overflow: hidden;
	width: 98vw;
}
#contenedor figure { 
	background-image: url(image/banner1.jpg);
	background-size: cover;
	font-size: 0;
	height: 100%;
	margin: 0; 
	position: relative;
	width: 100%; 
}

#separador {
	background-image: url(image/banner2.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 input */
input#deslizador {
	-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%;
}
/*barra input mozilla*/
input#deslizador::-moz-range-track { 
	background: transparent; 
}
/*barra input ie*/
input#deslizador::-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#deslizador::-ms-fill-lower {
	background-color:transparent;
}

/*boton input chrome*/
input#deslizador::-webkit-slider-thumb {
	-webkit-appearance:none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}
/*boton input mozilla*/
input#deslizador::-moz-range-thumb {
	-moz-appearance: none;
	height: 100vw;
	width: 0.5%;
	opacity: 0;
}   
/*boton input ie*/
input#deslizador::-ms-thumb {
	height: 100vw;
	width: 0.5%; 
	opacity:0;
}
input#deslizador::-ms-tooltip {
	display:none;
}

/*flechas*/
#separador::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;
}
		
/*animacion*/
@keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
/*animacion chrome*/
@-webkit-keyframes figure {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}