@charset "utf-8";
/* CSS Document */

#show,
#show-advamced {
	position: absolute;
	top: 30px;
	left: 0;
	z-index:900;
}
.demo-ip #show,
.demo-ip #show-advamced {
	top: 210px;
}
#show-advamced.panel-act,
#show.panel-act {
	z-index: 909;
}

.turn-off-resp {
	color: #5E5E5E !important;
}
	.customize {
		position: absolute;
		top: 0px;	
		left: 0;	
		z-index: 10;
		padding: 20px 20px 20px 0;
		width: 630px;
		background-color:rgba(0, 0, 0, 0.8);
	}
		#show .skin-panel {
			overflow: hidden;
			background-color: #fff;
		}
			.customize .st-accordion {
				margin: 0 0 0 0;
			}
				.customize .st-accordion li {
					padding: 0;
				}
				.customize .st-accordion li:after {
					display: none;
				}
				.customize .st-accordion .accord {
					padding: 0 0 0 0;
				}
					#show-advamced .dd_container {
						display: table;
						margin: 0 0 0 0;
						background-color: #fff;

						-webkit-transition: height 0.1s linear;
						-moz-transition: 	height 0.1s linear;
						-ms-transition: 	height 0.1s linear;
						-o-transition: 		height 0.1s linear;
						transition: 		height 0.1s linear;
					}
					.customize ..skin-panel .img-preview {
						display: block;
						position: relative;
						margin: 0 5px 0 5px;
						z-index: 10;
					}
					.customize .accord > .dt-demo-left-block {
						margin-left: 20px;
					}
					.customize .st-accordion .accheader {
						display: block;
						padding-left: 20px;
						margin-bottom: 0;
						line-height: 30px;
						font-size: 13px;
						color: #fff;
						text-decoration: none;

						-webkit-transition: all 0.1s linear;
						-moz-transition: 	all 0.1s linear;
						-ms-transition: 	all 0.1s linear;
						-o-transition: 		all 0.1s linear;
						transition: 		all 0.1s linear;
					}
					.customize .st-accordion .accheader span {
						display: block;
					}
					.dt-gs .accheader,
					.dt-gs.st-open .accheader:hover {
						background-color: #e74c3c;
					}
					.dt-gs .accheader:hover {
						background-color: #c13a2b;
					}
					.demo-fonts .accheader,
					.demo-fonts.st-open  .accheader:hover {
						background-color: #2ccc71;					
					}
					.demo-fonts .accheader:hover {
						background-color: #25ae60;					
					}
					.dt-mb .accheader,
					.dt-mb.st-open  .accheader:hover {
						background-color: #3498db;	
					}
					.dt-mb .accheader:hover {
						background-color: #2980b9;	
					}
					.dt-bg .accheader,
					.dt-bg.st-open  .accheader:hover {
						background-color: #9b59b6;	
					}
					.dt-bg .accheader:hover {
						background-color: #8e44ad;	
					}
					.st-accordion li > a span {
						background-image: url("data:image/svg+xml,%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%228px%22%20height=%228px%22%20viewBox=%220%200%208%208%22%20enable-background=%22new%200%200%208%208%22%20xml:space=%22preserve%22%3E%3Crect%20x=%223%22%20fill=%22white%22%20width=%222%22%20height=%228%22/%3E%3Crect%20y=%223%22%20fill=%22white%22%20width=%228%22%20height=%222%22/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-position: 582px center
					}
					.st-accordion li.st-open > a span {
						background-image: url("data:image/svg+xml,%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%228px%22%20height=%228px%22%20viewBox=%220%200%208%208%22%20enable-background=%22new%200%200%208%208%22%20xml:space=%22preserve%22%3E%3Crect%20y=%223%22%20fill=%22white%22%20width=%228%22%20height=%222%22/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-position: 582px center
					}
					
				.bold-name {
					font-size: 12px;
					font-weight: bold;
				}
				.customize {
					font-family: Arial,Helvetica,sans-serif; 
				}

	.customize a.close {
		position: absolute;
		top: -1px;
		right: 1px;
		width: 60px;
		height: 100px;
		background: url(../demo/close.html) no-repeat 0 0;
		opacity: 1;

		-webkit-transition: all 0.1s linear;
		-moz-transition: 	all 0.1s linear;
		-ms-transition: 	all 0.1s linear;
		-o-transition: 		all 0.1s linear;
		transition: 		all 0.1s linear;
	}
	.customize a.close:hover {
		opacity: 0.7;
	}
	#show a.close {
		background: url(../demo/close-skin.html) no-repeat 0 0;
	}

	.customize .close_bg {
		position: absolute;
		top: 20px;
		right: -60px;
		z-index:90;
		width: 60px;
		height: 100px;
		background-color: rgba(0, 0, 0, 0.8);
	}
	#show-advamced .close_bg {
		top: 140px;
	}
	.skin-img {
		position: relative;
		display: block;
		line-height: 0;
		margin-bottom: 3px;
	}
	.skin-img i {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-position: 0 0;
		background-repeat: no-repeat;
		opacity: 0;
	}
	.skin-img i,
	.img-preview a,
	.img-preview {
		-webkit-transition: all 0.1s linear;
		-moz-transition: 	all 0.1s linear;
		-ms-transition: 	all 0.1s linear;
		-o-transition: 		all 0.1s linear;
		transition: 		all 0.1s linear;
	}
	.img-preview:hover .skin-img i {
		background-image: url(../demo/skin-hover.html);
		cursor: pointer;
		opacity: 1;
	}
	.img-preview.act .skin-img i {
		opacity: 1;
		background-image: url(../demo/skin-act.html);
	}
	.img-preview {
		position:relative;
		float:left;
		margin:4px 10px 6px 0;

	}
	.img-preview a {
		display: block;
		margin-bottom: 5px;
		text-align: center;
		color: #242424;
		text-decoration: none;
	}
	.img-preview:hover a,
	.img-preview.act a {
		color: #2ccc71;
	}
	
	.customize input{

		background: auto;
		border: auto;
		margin:0 4px 0 0px;

	}
	.customize .demo-input {		
		margin: -2px 4px 0 10px;
	}
	.customize .dt-gs .demo-input {		
		margin: -2px 4px 0 5px;
	}
	.customize .wp-color-result {
		margin: 0;
	}
	.turn-off-resp {
		line-height: 20px;
		vertical-align: middle;
		margin: 14px 4px 0 20px;
	}
	.customize .turn-off-resp input  {
	
	}
	.customize label {
		margin:0 2px 0 0;
		font-size: 11px;
	}

	.customize .c_block {
		padding: 4px 0px 2px 20px;
		margin: 0 0 10px 0;
		color:#2b2b2b;

	}
	#show .c_block {
		padding: 16px 10px 15px 20px; 
	}
	.customize .c_block.first{
		padding: 0px 10px 11px 20px;
	}
	.customize .c_block.dd_container{
		margin: 0;
		position: relative;
		z-index: 100;
	}
	.customize .btns_chk{
		margin: 0 0 1px 0;
		padding: 0 10px 0px 0px;
		color:#2b2b2b;
		text-shadow:#fff 1px 1px 0;
	}

	.customize .btns_chk label{
		margin-right: 10px;
	}

	.customize .c_block.left{
		background: url(../demo/customize_bg_w.html) no-repeat 0 bottom;		
		margin:0 0 13px 0px;
		padding:15px 0 16px 20px;

	}

	.customize .c_block.right{
		background:none;
		width: 148px;
		margin:0 10px 0 0;
		padding: 1px 10px 5px 0px;
		color:#2b2b2b;
		text-shadow:#fff 1px 1px 0;

	}

	.customize .c_block.clear{
		clear: both;
		height:100%;
		font-size:11px;
	}
	

.pckr{
	float:right;
	margin:-4px 0 0 0;
}
#colorSelector_demo{

	border: solid #c0c0c0 3px;

	width: 23px;

	height: 23px;

	cursor: pointer;
	-webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;

}

	#colorSelector_demo div{

		width: 23px;

		height: 23px;

		background: url(../demo/pick.html) no-repeat bottom right;

	}

.dd_hold{

	margin: 5px 0 0 0px;

	width: 330px;

	overflow: hidden;

}

.dd_item{

	width: 30px;

	height: 30px;

	float: left;

	margin: 0 10px 10px 0;

	cursor: pointer;

}

	.dd_item i{

		display: none;

		width: 24px;

		height: 24px;

	}
	.dd_item b{
		display: none;
		position: absolute;
		margin: 0px;
		margin-left: -89px;
		width: 119px;
		height: 119px;
		z-index: 999;
	}

	.dd_item:hover b{
		display: block;
	}

	.dd_item:hover i{

		display: block;

		border: solid #222 3px;

		opacity: 0.5;

	}

	.dd_item.act i{

		display: block;

		border: solid #323232 3px;

		opacity: 0.7;

	}

	.dd_item.no{

		background: url(../demo/no.html) no-repeat 0 0;

	}
	.customize select {
		border:1px solid #cccccc;
		color:#2b2b2b;
		text-shadow:none;
		background-color:#fff;
		margin:3px 0 7px 0;
		width:310px;
		font-style:normal;
	}
	
/* NEW */

.customize .dt-demo-left-block {
	display: table-cell;
	vertical-align: top;
	width: 275px;
	padding: 15px 20px 20px 20px;
}
.customize .dt-bg .dt-demo-left-block,
.customize .dt-bg .dt-demo-right-block {
	padding-top: 30px;
	padding-bottom: 12px;
}
.customize .dt-gs .dt-demo-left-block,
.customize .dt-gs .dt-demo-right-block {
	padding-top: 25px;
	padding-bottom: 8px;
}
.customize .dt-mb .dt-demo-left-block,
.customize .dt-mb .dt-demo-right-block,
.customize .demo-fonts .dt-demo-left-block,
.customize .demo-fonts .dt-demo-right-block {
	padding-top: 25px;
	padding-bottom: 12px;
}
.customize .dt-demo-right-block {
	display: table-cell;
	vertical-align: top;
	background-color: #f5f5f5;
	width: 275px;
	padding: 15px 20px 20px;
}
/*Clear*/
.dt-demo-form-reset.c-clear {
	float: left;
	margin-top: 15px;
	margin-left: 20px;
	font-size: 12px;
	color: #fff;
}
.dt-demo-form-reset.c-clear:hover {
	text-decoration: underline;
}
.dt-demo-form-reset.c-clear:before {
	float: left;
	margin-right: 8px;
	margin-left: 0;
	background-image: url("data:image/svg+xml,%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%2213px%22%20height=%2213px%22%20fill=%22white%22%20viewBox=%220%200%2013%2013%22%20enable-background=%22new%200%200%2013%2013%22%20xml:space=%22preserve%22%3E%3Cpolygon%20fill=%22none%22%20points=%228.461,3.908%207.271,2.719%204.894,5.097%203.705,6.288%207.271,9.854%208.462,8.666%206.084,6.286%20%22/%3E%3Cpath%20fill=%22rgb(232,77,61)%22%20d=%22M6.5,0C2.909,0,0,2.91,0,6.5S2.908,13,6.5,13c3.59,0,6.5-2.91,6.5-6.5S10.09,0,6.5,0z%22/%3E%3Cpath%20d=%22M3.404,8.244l1.32,1.382l4.872-4.871l-1.32-1.382L3.404,8.244z%22/%3E%3Cpath%20d=%22M4.724,3.373l-1.32,1.382l4.872,4.871l1.32-1.382L4.724,3.373z%22/%3E%3Cpath%20display=%22none%22%20fill=%22white%22%20d=%22M0.5,0c-1.795,0-3.25,2.91-3.25,6.5S-1.295,13,0.5,13s3.25-2.91,3.25-6.5S2.295,0,0.5,0z%22/%3E%3C/svg%3E");

}
/*Button submit*/	
.customize .but-wrap {
	float: right;
	margin: 10px 0 0 0;
}
	.customize .but-wrap a {
		height: 20px;
		padding: 5px 12px;
		font-size: 12px;
		font-weight: bold;
		line-height: 22px;

		-webkit-transition: all 0.1s linear;
		-moz-transition: 	all 0.1s linear;
		-ms-transition: 	all 0.1s linear;
		-o-transition: 		all 0.1s linear;
		transition: 		all 0.1s linear;
	}
	#show-advamced .customize .but-wrap a {
	
		background-image: none;
		border: none;
		text-shadow: none;
		-webkit-border-radius: 0;
		-moz-border-radius:    0;
		-ms-border-radius: 	   0;
		-o-border-radius: 	   0;
		border-radius: 		   0;


		-webkit-box-shadow: none;
		-moz-box-shadow:    none;
		-ms-box-shadow: 	none;
		-o-box-shadow: 	    none;
		box-shadow: 		none;
	}
		.customize .but-wrap a span {
			padding: 0;
			margin: 0;
		}
		.customize .but-wrap a span,
		.st-accordion li > a span {
			opacity: 1;

			-webkit-transition: all 0.1s linear;
			-moz-transition: 	all 0.1s linear;
			-ms-transition: 	all 0.1s linear;
			-o-transition: 		all 0.1s linear;
			transition: 		all 0.1s linear;
		}
		.st-accordion li.dt-gs.st-open > a:hover span {
			opacity: 1;
		}
		.customize .but-wrap a:hover span,
		.st-accordion li > a:hover span {
			opacity: 0.7;
		}

.customize .dt-demo-dt-demo-colorpicker-right {
	float: right;
}
.dt-demo-inline-left {
	position: relative;
}
.wp-picker-holder {
	position: relative;
	z-index: 999;
}
/*.wp-picker-container .iris-picker {
	position: absolute;
	right: 0;
	height: 204px;
}*/
.customize .dt-demo-colorpicker {
	width: 60px;
}

.customize .dt-demo-inline-left,
.customize .dt-demo-inline {
	display: inline-block;
	vertical-align: middle;
	line-height: 22px;
	margin-bottom: 18px;
}
.wp-picker-container {
	margin-right: 10px;
}

.demo-att {
	float: left;
	margin: 7px 0 1px 0;
	font-size: 12px;
	font-weight: bold;
}
.demo-att span {
	color: #e74c3c;
}
.block-inner {
	float: left;
	width: 130px;
}
.block-inner.right-t {
	margin-left: 15px
}
#show-advamced p,
#show-advamced .dt-mb .dt-demo-right-block p {
	margin-bottom: 15px;
}
#show-advamced .dt-mb p,
#show-advamced .demo-fonts p {
	margin-bottom: 10px;
}
#show-advamced .general-boxed-bg {
	margin-top: 8px;
}
#general-boxed-bg-layout-fullwidth {
	margin-left: 5px;
}
.font-select {
	margin-bottom: 10px;
}
.wp-color-result {
	width: 0px !important;
	height: 20px !important;
}
#show-advamced select {
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 

	padding: 1px 5px 1px 5px;
	overflow: hidden;
	vertical-align: middle;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	
	background-color: #fff;

	background-image: url(../demo/select.html);
	background-repeat: no-repeat;
	background-position: right center;
	-webkit-border-radius: 0;
	border: 1px solid rgba(0,0,0, 0.11);
	height: 22px;
}
.colorpicker {
	z-index: 990 !important;
}
.dt-demo-block {
	margin-bottom: 18px;
}
	.colorSelector {
		float: left;
		margin-right: 10px;
	}
.dt-demo-block:after {
    clear: both;
    content: "";
    display: table;
}
.dt-demo-block:before {
    content: "";
    display: table;
}
.colorSelector > div {
	float: left;
	width: 30px;
	height: 20px;
	border: 1px solid rgba(0,0,0,0.11);	
	-webkit-border-radius: 1px;
	-moz-border-radius:    1px;
	-ms-border-radius: 	   1px;
	-o-border-radius: 	   1px;
	border-radius: 		   1px;
}
.st-open .st-content {
	display: block !important;
}
.st-open > a:hover {
	cursor: default;
}