.covered {
	width  : 800px;
	height : 470px;
	border : 20px solid #FFF;
	margin : 20px auto;
	box-shadow : 0 0 40px 5px rgba(0,0,0,.1);
}

.second {
	width : 562px;
	height : 365px;
}

.third {
	width  : 500px;
	height : 400px;
}

.fourth {
	width  : 800px;
	height : 470px;
}

.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;
}