.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
}

.resize-container img {
    display: block
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed #231f20;
}

.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: #fff200;
    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-top: -100px;
	margin-left: -384px;
	z-index: 999;
	width: 753px;
	height: 155px;
    background: url(/templates/crop-top.png) no-repeat 50% 0%,
                transparent url(/templates/crop-bottom.png) no-repeat 50% 100% ;
	box-sizing: content-box;
	pointer-events: none;
}

.btn-crop {
    z-index: 999;
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-weight: 400;
    font-size: 1.5em;
    border: 1px solid #231f20;
    padding: .2em 1em;
    border-radius: 0;
    display: block;
    transition: .2s;
    -webkit-box-shadow: 5px 5px 0 0 rgba(0,0,0,0.09);
    -moz-box-shadow: 5px 5px 0 0 rgba(0,0,0,0.09);
    box-shadow: 5px 5px 0 0 rgba(0,0,0,0.09);
    background: #fff200;
    margin-bottom: .5em;
}
.btn-crop:hover,
.btn-crop:active,
.btn-crop:focus {
    transition: .2s;
    -webkit-box-shadow: -5px -5px 0 0 rgba(0,0,0,0.1);
    -moz-box-shadow: -5px -5px 0 0 rgba(0,0,0,0.1);
    box-shadow: -5px -5px 0 0 rgba(0,0,0,0.1);
}

.btn-crop img {
	vertical-align: middle;
	margin-left: 8px;
}