* {margin:0; padding:0; outline:none; position:relative;}
html, body {width:100%; font-family:calibri;}

.cnt {
	display:block;
	max-width:1000px;
	margin:0px auto;
	font-size:0;
	border:20px solid transparent;
}

.cnt .half {
	display:inline-block;
	vertical-align:top;
	overflow:hidden;
	width:50%;
	font-size:0;
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2);
}

.cnt .half:before {
    content: "";
    padding-top: 100%;
    float: left;
    font-size:0;
}

.cnt .half>div.ccc {
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	font-size:0pt;
}

.cnt .half:nth-child(1)>div.ccc {
	overflow:hidden;
}

.cnt .half:nth-child(2) {
	margin-bottom:20px;
}

@media screen and (max-width:640px) {
	.cnt .half {
		width:100%;
	}
}

.cnt .ui {
	display:inline-block;
	width:80px;
	height:40px;
	border-radius:20px;
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2);
	background:#fff;
	position:absolute;
	font-size:0;
	overflow:hidden;
	text-align:center;
}

.cnt .ui.vertical {
	width:40px;
	height:80px;
}

.cnt .ui span {
	display:inline-block;
	height:40px;
	line-height:40px;
	font-size:11pt;
}

.cnt .ui.top {
	top:20px;
}

.cnt .ui.bottom {
	bottom:20px;
}

.cnt .ui.left {
	left:20px;
}

.cnt .ui.right {
	right:20px;
}

.cnt .ui.center {
	left:50%;
	margin-left:-40px;
}

.cnt .btn {
	display:inline-block;
	width:40px;
	height:40px;
	cursor:pointer;
	line-height:40px;
	text-align:center;
	font-size:11pt;
	transition:color 0.3s ease-in-out;
	-webkit-user-select:none;
	-moz-user-select: none;
}

.cnt .btn.scale {
	width:15px;
}

.cnt .btn.mode {
	z-index:1;
}

.cnt .btn div {
	transition:background 0.3s ease-in-out;
}

.cnt .btn.mode div {
	display:inline-block;
	width:6px;
	height:6px;
	border-radius:3px;
	background:#aaa;
	position:absolute;
}

.cnt .btn.mode div:nth-child(1) {
	top:13px; left:13px;
}

.cnt .btn.mode div:nth-child(2) {
	top:13px; left:21px;
}

.cnt .btn.mode div:nth-child(3) {
	top:21px; left:13px;
}

.cnt .btn.mode div:nth-child(4) {
	top:21px; left:21px;
}

.cnt .btn.mode-1 div {
	transform:translateX(4px);
}

.cnt .btn.mode-2 {
	transform:translateX(-4px) rotate(45deg);
}

.cnt .btn.mode.active {
	z-index:0;
}

.cnt .btn:hover {
	color:#8E3030;
}

.cnt .btn.els div, .cnt .btn.zoom div {
	display:inline-block;
	width:16px;
	height:4px;
	border-radius:2px;
	background:#aaa;
	position:absolute;
	transition:background 0.3s ease-in-out;
	top:50%;
	left:50%;
	margin:-2px 0 0 -8px;
}

.cnt .btn.els div:nth-child(2), .cnt .btn.zoom div:nth-child(2) {
	height:16px;
	width:4px;
	margin:-8px 0 0 -2px;
}

.cnt .btn.els.add div {
	transform:translateX(4px);
}

.cnt .btn.els.remove div {
	transform:translateX(-4px) rotate(45deg);
}

.cnt .btn.zoom-in div {
	transform:translateY(4px);
}

.cnt .btn.zoom-out div {
	transform:translateY(-4px);
}

.cnt .btn:hover div {
	background:#000;
}

.cnt .btn.zoom:hover div {
	background:#8E3030;
}

.cnt .btn.active div {
	background:#8E3030;
}

.cnt .camera_move {
	display:inline-block;
	cursor:pointer;
	position:absolute;
	z-index:1000;
	transition:border-color 0.3s ease-in-out;
	-webkit-user-select:none;
	-moz-user-select: none;
}

.cnt .camera_move:hover {
	border-color:#8E3030!important;
}

.cnt .camera_move.up {
	border-bottom:15px solid #aaa;
	border-left:10px solid transparent!important;
	border-right:10px solid transparent!important;
	border-top:0px;

	bottom:65px;
	right:40px;
}

.cnt .camera_move.down {
	border-top:15px solid #aaa;
	border-left:10px solid transparent!important;
	border-right:10px solid transparent!important;
	border-bottom:0px;

	bottom:20px;
	right:40px;
}

.cnt .camera_move.left {
	border-right:15px solid #aaa;
	border-bottom:10px solid transparent!important;
	border-top:10px solid transparent!important;
	border-left:0px;

	bottom:40px;
	right:65px;
}

.cnt .camera_move.right {
	border-left:15px solid #aaa;
	border-bottom:10px solid transparent!important;
	border-top:10px solid transparent!important;
	border-right:0px;

	bottom:40px;
	right:20px;
}

.cnt .colors {
	display:inline-block;
	width:40px;
	position:absolute;
	top:50%;
	right:20px;
	border-radius:40px;
	z-index:1000;
	font-size:0;
	padding-bottom:5px;
	box-shadow:0px 0px 0px 1px rgba(0,0,0,0.2);
	background:#fff;
	margin-top:-107px;
}

.cnt .color {
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:15px;
	margin:5px 5px 0px;
	vertical-align:top;
	cursor:pointer;
	background:url(color.png) center center no-repeat;
	background-size:cover;
}

.cnt .color.active {
	box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 3px #aaa;  /* 8E3030 */
}

.cnt .color.b {
	background-image:url(color_b.png);
}
.cnt .color.d {
	background-image:url(color_d.png);
}
.cnt .color.o {
	background-image:url(color_o.png);
}
.cnt .color.k {
	background-image:url(color_k.png);
}
.cnt .color.v {
	background-image:url(color_v.png);
}

.cnt .fullcolor {
	opacity:0.33;
	transition:opacity 0.3s ease-in-out;
}

.cnt .fullcolor:hover {
	opacity:1;
}

.cnt .btn.brush {
	background:url(brush.png) center center no-repeat;
	background-size:cover;
	opacity:0.33;
	transition:opacity 0.3s ease-in-out;
	margin-left:-10px;
}

.cnt .btn.brush:hover {
	opacity:1;
}

.cnt .btn.brush.active {
	background-image:url(brush_a.png);
	opacity:1;
}


.cnt .btn.save {
	width:40px;
	background:url(download.png) center center no-repeat;
	background-size:cover;
	opacity:0.33;
	transition:opacity 0.3s ease-in-out;
}

.cnt .btn.save:hover {
	opacity:1;
}

.cnt .results {
	display:block;
	font-size:0;
}

.cnt .result {
	display:inline-block;
	vertical-align:top;
	height:40px;
	margin:0 20px 20px 0;
	font-size:0;
	line-height:40px;
}

.cnt .result img {
	display:inline-block;
	vertical-align:top;
	margin-right:10px;
}

.cnt .result span {
	display:inline-block;
	vertical-align:top;
	margin-right:10px;
	line-height:40px;
	height:40px;
	font-size:12pt;
}

.cnt .result>span:last-child {
	margin-right:0;
}

.cnt span.checkbox {
	display:inline-block;
	vertical-align:top;
	width:20px;
	height:20px;
	margin:10px 10px 10px 0;
	box-sizing:border-box;
	border:1px solid #aaa;
	transition:all 0.3s ease-in-out;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select: none;
}

.cnt span.checkbox:hover {
	border:1px solid #8E3030;
}

.cnt span.checkbox.active:before, .cnt span.checkbox.active:after {
	display:inline-block;
	content:'';
	width:8px;
	height:4px;
	position:absolute;
	top:8px;
	left:6px;
	background:#8E3030;
	border-radius:2px;
	transform:rotate(45deg) translate(-2px, 3px);
}

.cnt span.checkbox.active:after {
	width:12px;
	left:4px;
	transform:rotate(-45deg) translate(2px, 0px);
}

.cnt .result span.total_price {
	font-size:16pt;
	font-weight:bold;
	color:#8E3030;
}

.cnt .button {
	display:inline-block;
	height:40px;
	line-height:40px;
	text-transform:uppercase;
	font-weight:bold;
	color:#fff;
	background:#8E3030;
	border-radius:2px;
	padding:0 15px;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
	font-size:11pt;
}

.cnt .button:hover {
	background:#AA4040;
}

.cnt input {
	display:inline-block;
	height:30px;
	border:1px solid #ccc;
	padding:0 10px;
	line-height:30px;
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.05);
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.05);
	width:100%;
	background:#fff;
	font-size:15px;
	margin:0;
	font-family: 'PT Sans Narrow', sans-serif;
}

.cnt input.errors {
	color:#f00;
	border-color:#f00;
}


.cnt .modal-wind {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.3);
	overflow: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
    transition: all 0.3s ease-in-out;
    z-index:2000;
}

.cnt .modal-wind:before {
	height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.cnt .modal-wind .wind {
	display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
	width:320px;
	padding:30px;
    background: #fff;
    border-radius:4px;
}

.cnt .modal-wind .wind .title {
	font-size:18px;
	margin-bottom:15px;
}

.cnt .modal-wind .wind .result_order .title {
	text-align:center;
	font-size:22px;
	font-weight:bold;
	margin-bottom:0;
}

.cnt .modal-wind .wind input {
	margin-bottom:20px;
	font-size:18px;
	box-sizing:border-box;
}

.cnt .hidden {
	display:none!important;
}

.cnt .invisible {
	opacity:0!important;
}

.cnt .modal-wind .wind .close {
	display:inline-block;
	width:20px;
	height:20px;
	cursor:pointer;
	background:url(close.png) center center no-repeat;
	position:absolute;
	top:15px;
	right:15px;
}