.image-annotation {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
  	align-items: flex-end;
	box-sizing: border-box;
	padding: .2em .5em;
	/* background-color: rgba(200, 255, 200, .5); */
	border: solid 1px #fff;
	transition: background .3s ease-in-out, border .3s ease-in-out;
	box-shadow: 0 0 10px rgba( 0, 0, 0, .5 );
}
.image-annotation .title {
	transition: color .3s ease-in-out;
	color: #fff;
	font-size: .85em;
	font-weight: bold;
	text-decoration: none;
}
.image-annotation .subtitle {
	transition: color .3s ease-in-out;
	color: #fff;
	font-size: .75em;
	text-decoration: none;
}
.image-annotation:hover {
	background-color: rgba(200, 200, 200, .35);
}
.image-annotation .move {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: move;
}
.image-annotation .handle {
	width: 6px;
	height: 6px;
	background: #ddd;
	position: absolute;
}
.image-annotation .handle.tl {
	top: -3px;
	left: -3px;
	cursor: nw-resize;
}
.image-annotation .handle.tc {
	top: -3px;
	left: calc(50% - 3px);
	cursor: n-resize;
}
.image-annotation .handle.tr {
	top: -3px;
	left: calc(100% - 3px);
	cursor: sw-resize;
}
.image-annotation .handle.cl {
	top: calc(50% - 3px);
	left: -3px;
	cursor: e-resize;
}
.image-annotation .handle.cr {
	top: calc(50% - 3px);
	left: calc(100% - 3px);
	cursor: e-resize;
}
.image-annotation .handle.bl {
	top: calc(100% - 3px);
	left: -3px;
	cursor: sw-resize;
}
.image-annotation .handle.bc {
	top: calc(100% - 3px);
	left: calc(50% - 3px);
	cursor: n-resize;
}
.image-annotation .handle.br {
	top: calc(100% - 3px);
	left: calc(100% - 3px);
	cursor: nw-resize;
}
.image-annotation.highlight {
	border-color: red;
}
.image-annotation.highlight .handle {
	background: red;
}
.image-annotation.highlight .title, .image-annotation.highlight .subtitle {
	color: red;
}