.component {

	position: relative;

	background: url(../../img/gridme.png) repeat center center;

	padding: 4em;

	height: 800px;

	border: 3px solid #49708A;

	max-width: 901px;

	overflow: hidden;

	margin: 0 auto;

}



.resize-container {

    cursor: move;

    display: inline-block;

    margin-left: 9%;

    margin-top: -6%;

    position: relative;

	max-width:650px;

	max-height:460px;

	}



.resize-container img {

    display: block;

	/*max-width:650px;

	max-height:460px;*/


}



.resize-container:hover img,

.resize-container:active img {

    outline: 2px dashed rgba(222,60,80,.9);

}



.resize-handle-ne,

.resize-handle-se,

.resize-handle-nw,

.resize-handle-sw {

    position: absolute;

    display: block;

    width: 10px;

    height: 10px;

    background: rgba(222,60,80,.9);

    z-index: 999;

}



.resize-handle-nw {

    top: -5px;

    left: -5px;

    cursor: nw-resize;

}



.resize-handle-sw {

    bottom: -5px;

    left: -5px;

    cursor: sw-resize;

}



.resize-handle-ne {

    top: -5px;

    right: -5px;

    cursor: ne-resize;

}



.resize-handle-se {

    bottom: -5px;

    right: -5px;

    cursor: se-resize;

}



.overlay {

	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: -275px;

	margin-top: -230px;

	z-index: 999;

	width: 480px;

	height: 480px;

    border: solid 2px #eee;

	box-sizing: content-box;

	pointer-events: none;

}



.overlay:after,

.overlay:before {

	content: '';

	position: absolute;

	display: block;

	width: 184px;

	height: 40px;

    border-left: dashed 2px rgba(222,60,80,.9);

	border-right: dashed 2px rgba(222,60,80,.9);

}



.overlay:before {

	top: 0;

	margin-left: -2px;

	margin-top: -40px;

}



.overlay:after {

	bottom: 0;

	margin-left: -2px;

	margin-bottom: -40px;

}



.overlay-inner:after,

.overlay-inner:before {

	content: '';

	position: absolute;

	display: block;

	width: 40px;

	height: 244px;

    border-top: dashed 2px rgba(222,60,80,.9);

	border-bottom: dashed 2px rgba(222,60,80,.9);

}



.overlay-inner:before {

	left: 0;

	margin-left: -40px;

	margin-top: -2px;

}



.overlay-inner:after{

	right: 0;

	margin-right: -40px;

	margin-top: -2px;

}



.btn-crop {

	position: absolute;

	vertical-align: bottom;

	left: 5px;

	top: 5px;

	padding: 6px 10px;

	z-index: 999;

	background-color: rgb(222,60,80);

	border: none;

	border-radius: 5px;

	color: #FFF;

}



.btn-crop img {

	vertical-align: middle;

	margin-left: 8px;

}