@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,700italic,400italic,300italic,300,600italic,800italic);

body,html {
	margin:0; padding:0;
	background-color:#000000;
	width:100%; height:100%;
	font-size:12px;
	color:#333;
	font-family: 'Open Sans', sans-serif;
}
div {
	position:relative;
}
.wrapper {
	width:100vw;
	height:100vh;
}
.toolbar {
	position:absolute;
	top:0; right:0;
	width:250px;
	background-color:#333;
	height:100vh;	
	z-index:10;
}
.editorViewport {
	width:100%;
	height:100vh;
	background-color:#9CAEB6;
	margin-right:250px;
	box-sizing:content-box;
}
.textTypeTools {
	width:250px;
	padding:10px;
	background-color:#FFF;
	position:absolute;
	top:10px; right:260px;
}
.resizeViewportHolder {
	position:absolute;
	left:10px; top:10px;
	width:250px;
}
.poweredby {
	position:absolute;
	left:10px; bottom:10px;
	width:150px;
}
.poweredby img {
	width:100%; height:auto;
}


.page {
	width:148mm;
	height:210mm;
	position:absolute;
	left:50%; top:50%;
	margin-left:-148mm;
	margin-top:-105mm;
	box-shadow:0px 0px 30px rgba(0,0,0,0.2);
	background-color:#FFF;
	background-size:cover;
	background-position:center center;
}


/*tools*/
.insertImage {
	padding-top:10px;
	padding-bottom:10px;
	cursor:pointer;
}
.insertImage:hover {
	background-color:#efefef;
}
.insertImage img {
	max-width:100%;
}

.insertBackground {
	padding-top:10px;
	padding-bottom:10px;
	cursor:pointer;
}
.insertBackground:hover {
	background-color:#efefef;
}
.insertBackground img {
	max-width:100%;
}



/*Elements*/
.page > div {
	position:absolute;
	border:1px dashed rgba(0,0,0,0.4);
}
.page .handle {
	position:absolute;
	width:20px; height:20px; border-radius:20px;
	background-color:#2E81BE;
	color:#FFF;
	cursor:pointer;
	text-align:center;
}
.page .handle.handleMove {
	left:-12px; top:-12px;
}
.page .handle.handleExpand {
	right:-12px; bottom:-12px;
}
.page .handle.handleRemove {
	right:-12px; top:-12px;
}

.page > div[data-type=image] img {
	max-width:100%; max-height:100%;
	height:auto; width:auto;
	display:block;
}