body {
	background-color: #E43;
}

h1,h2 {
	text-align : center;
	color : #fff;
	font-family : Arial;
	text-shadow : 0 0 1px #000;
}

h1 {
	font-size : 60px;
	text-shadow : 0 0 5px rgba(0,0,0,.5);
}

.covered {
	width  : 800px;
	height : 470px;
	border : 30px solid #FFF;
	margin : 50px auto;
	background-image: url('../images/b2.jpg');
	box-shadow : 0 0 40px 5px rgba(0,0,0,.4);
}

.covered .changeable {
	background-image: url('../images/b1.jpg');
}

.second {
	width : 400px;
	height : 300px;
	background-image: url('../images/m2.jpg');
}

.second .changeable {
	background-image: url('../images/m1.jpg');
}

.third {
	width  : 500px;
	height : 400px;
	background-image: url('../images/1.jpg');
}

.third .changeable {
	background-image: url('../images/2.jpg');
}

.fourth {
	width  : 800px;
	height : 470px;
	background-image: url('../images/l1.jpg');
}

.fourth .changeable {
	background-image: url('../images/l2.jpg');
}
.covered {
	position: relative;
}

.handle {
	position: absolute;
	width : 46px;
	height: 46px;
	margin-left  : -23px;
	margin-top   : -23px;
	border-radius: 50%;
	background-color: #fff;
	text-align : center;
}

.handle span {
	display : inline-block;
	margin : 15px 1px 0;
	color : #000;
	-webkit-transition : .1s ease-out;
	-moz-transition : .1s ease-out;
	-ms-transition : .1s ease-out;
	-o-transition : .1s ease-out;
	transition : .1s ease-out;
}

.handle.vertical {
	-webkit-transform : rotate(90deg);
	-moz-transform : rotate(90deg);
	-ms-transform : rotate(90deg);
	-o-transform : rotate(90deg);
	transform : rotate(90deg);
}

.handle:hover {
	background-color: #555;
}

.handle:hover span {
	color : #FFF;
}

.draggable {
	background-color: #555;
	cursor : move;
}

.draggable span {
	margin : 15px 4px 0;
	color  : #FFF;
	-webkit-transition : .1s ease-out;
	-moz-transition : .1s ease-out;
	-ms-transition : .1s ease-out;
	-o-transition : .1s ease-out;
	transition : .1s ease-out;
}