#smartjpeg {
	position:relative;
	overflow:hidden;
	border:1px solid #333;
	width:100%;
        height:500px;
}
#smartjpeg .image {
	width:100%;
        height:100%;
	vertical-align:top;
}

#smartjpeg .image.second {
	position:absolute;
	overflow:hidden;
}

#smartjpeg.horizontal .image.second {
	top:0;
	right:0;
}

#smartjpeg.vertical .image.second {
	left:0;
	bottom:0;
}

#smartjpeg .image img {
	vertical-align:top;
}

#smartjpeg .image.second img {
	position:absolute;
}

#smartjpeg.horizontal .image.second img {
	right:0;
}

#smartjpeg.vertical .image.second img {
	bottom:0;
}

#smartjpeg .slider {
	position:absolute;
	top:0;
	left:0;
	box-sizing:content-box;
	border:none;
	padding:0;
	background-color:rgba(255, 255, 255, 0.9);
	background-clip:content-box;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer;
	transition:border-color 0.2s;
}

#smartjpeg.horizontal .slider {
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	width:3px;
	height:100%;
	transform:translate(-50%);
}

#smartjpeg.vertical .slider {
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	width:100%;
	height:3px;
	transform:translate(0, -50%);
}

#smartjpeg .slider:hover {
	border-color:rgba(255, 255, 255, 0.4);
}