/*****
All below css code is for demo purpose
*****/

.pull-left{float:left}
.pull-right{float:right}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
body{font:300 14px/18px Roboto,sans-serif; padding:5px}
hr{
	height:1px;
	border:none;
	margin:30px 0;
	background:rgba(0,0,0,.4);
}
.title{
	font-size:24px;
	margin-bottom:15px;
}
.column{
	width:50%;
	padding:15px;
}
.colors>div{
	float:left;
	width:40px;
	height:40px;
	position:relative;
	margin:0 15px 15px 0;
	border:1px solid #444;
}
.colors>div:before,
.colors>div:after{
	content:'';
	opacity:0;
	visibility:hidden;
	position:absolute;
	transition:all .4s ease-in-out 0s;
}
.colors>div:before{
	top:1px;
	right:0;
	z-index:1;
	width:2px;
	height:2px;
	color:#000;
	background:#000;
	-webkit-transform:rotate(40deg);
	-moz-transform:rotate(40deg);
	-ms-transform:rotate(40deg);
	-o-transform:rotate(40deg);
	transform:rotate(40deg);
	box-shadow:0 2px 0,0 4px,0 6px,-2px 6px,-4px 6px;
}
.colors>div:after{
	top:-5px;
	right:-5px;
	width:20px;
	height:20px;
	background:#fff;
	border-radius:50%;
	box-shadow:0 3px 1px rgba(0,0,0,.5),0 0 1px rgba(0,0,0,.5);
}
.colors>div.active:before,
.colors>div.active:after{
	opacity:1;
	visibility:visible;
}
.size,
.button,
.custom,
.border,
.radius,
.animate{
	font-size:16px;
	margin:0 15px 15px 0;
	display:inline-block;
}
.button,
.custom,
.animate{
	color:#fff;
	background:#444;
	padding:10px 15px;
	text-decoration:none;
}
.size,
.border,
.radius{
	padding:5px;
	border:2px solid;
	vertical-align:-1px;
}
input[type="checkbox"]{display:none}
label{
	padding-left:45px;
	position:relative;
	display:inline-block;
	margin:0 15px 15px 0;
}
label:before,
label:after{
	content:'';
	position:absolute;
	border-radius:4px;
	transition:all .4s ease-in-out 0s;
}
label:before{
	left:0;
	width:40px;
	height:20px;
	content:'Off';
	font-size:12px;
	text-indent:2px;
	background:#bdc3c7;
}
label:after{
	top:50%;
	left:22px;
	width:15px;
	height:15px;
	margin-top:-7px;
	background:#ecf0f1;
}
input[type="checkbox"]:checked + label:before{
	color:#eee;
	content:'On';
	text-indent:20px;
	background:#2c3e50;
}
input[type="checkbox"]:checked + label:after{
	left:3px;
}

.mk-modal-wrap{
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	position:absolute;
	background:rgba(20,20,20,.95);
}
.mk-modal{
	width:100%;
	padding:25px;
	max-width:800px;
	min-height:350px;
	margin:5% auto 0;
	background:#ecf0f1;
}
.customize .colors>div{
	width:30px;
	height:30px;
}
.copy-text{
	width:100%;
	height:155px;
}
.label-text-wrap{
	min-height:25px;
	vertical-align:top;
	display:inline-block;
}
.label-text{
	top:-4px;
	display:none;
	padding:2px 5px;
	position:relative;
}