@charset "utf-8";
/* 代码整理：时代Java NowJava.com */
    .box_container {
	position:relative; /* important */
	width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
	height:220px; /* important */
	overflow:hidden; /* hide the content that goes out of the div */
	/*just styling bellow*/
    background: black;
	color:white;
}
.images_holder {
	position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
	position:relative; /* important so we can work with the left or right indent */
	overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
	width:50%; /* make it 50% of the whole images_holder */
	float:left; /* make then inline */
}
.right img {
	margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear {
	clear:both;
}
/*    FOR EASING EFFECT - NOT NEEDED*/
.box_container2 {
	position:relative; /* important */
	width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
	height:220px; /* important */
	overflow:hidden; /* hide the content that goes out of the div */
	/*just styling bellow*/
    background: black;
	color:white;
}
.images_holder2 {
	position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div2 {
	position:relative; /* important so we can work with the left or right indent */
	overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
	width:50%; /* make it 50% of the whole images_holder */
	float:left; /* make then inline */
}
.right2 img {
	margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
/* 代码整理：时代Java NowJava.com */