/* Main theme overrides */

body.nobox:after {
	width: 1070px;
	content: "";
	position: fixed;
	top: 0;
	right: 50%;
	margin-right: -535px;
	height: 100%;
	background: none;
	border-left: 0;
	border-right: 0;
}

/* Style editor */

.colorpicker.colorpicker-visible {
    display: block;
    z-index: 1000001;
    visibility: visible;
    box-shadow: none;
}
.colorpicker:after {
    /* border-bottom: 6px solid #333 !important; */
    border-bottom: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
}
.colorpicker:before {
    /* border-bottom: 6px solid #333 !important; */
    border-bottom: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
}

.style-editor.off-canvas {
	right: -300px;
}

.style-editor {
	width: 300px;
	height: 100%;
	position: fixed;
	background: #fff;
	right: 0;
    top: 0;
	z-index: 100000;
	box-shadow: rgba(0, 0, 0, 0.3) -10px 0 40px;
	font-family: Roboto, Arial, sans-serif;
	color: #333;
	transition: all 0.3s ease-in;
}

.style-editor .tab {
	width: 52px;
	height: 52px;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	background: #fff;
	display: block;
	position: absolute;
	left: -52px;
	top: 96px;
}

.style-editor .tab:before {
	width: 50px;
	height: 50px;
	display: block;
	content: "";
	background: url(images/style-editor-tab-bg-1.png) center center no-repeat;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
}

.style-editor .tab:hover:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.style-editor .tab.active:hover:before {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
}

.style-editor .tab.active:before {
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-o-transform: rotate(315deg);
}

.style-editor .theme-title {
	text-align: center;
	height: 97px;
	border-bottom: 1px solid #e5e5e5;
	display: table;
	width: 100%;
}

.style-editor .theme-title p:first-child {
	font-size: 30px;
	line-height: 36px;
	font-weight: 100;
	margin: 17px 0 0 0;
}

.style-editor .theme-title p:last-child {
	font-size: 18px;
	font-weight: 900;
	text-transform: uppercase;
}

.style-editor .settings-block {
	padding: 20px 20px;
	border-bottom: 1px solid #e5e5e5;
	background: #fff;
	z-index: 100;
	position: relative;
}

.style-editor .settings-block .more {
	font-size: 12px;
	text-align: center;
	padding: 15px 0 0 0;
}

.style-editor .settings-block .more a {
	font-weight: 900;
	color: #007ccb;
}

.style-editor .settings-block .more a:hover {
	color: #00aeff;
}

.style-editor .settings-block .more s {
    text-decoration: none;
    text-transform: uppercase;
}

.style-editor .settings-block .more span {
	width: 14px;
	height: 14px;
	display: inline-block;
	border-radius: 4px;
	box-shadow: rgba(0, 124, 203, 1) 0 2px 0 inset, rgba(0, 124, 203, 1) 0 -2px 0 inset, rgba(0, 124, 203, 1) -2px 0 0 inset, rgba(0, 124, 203, 1) 2px 0 0 inset, rgba(255, 255, 255, 1) 3px 0 0 inset, rgba(255, 255, 255, 1) -3px 0 0 inset, rgba(255, 255, 255, 1) 0 -3px 0 inset, rgba(255, 255, 255, 1) 0 3px 0 inset;
	margin: 0 0 -2px 0;
}

.style-editor .settings-block .title {
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 20px 0;
}

.style-editor .settings {
	display: table;
	width: 100%;
}

.style-editor .settings .setting {
	display: table-cell;
	text-align: center;
}

.style-editor .settings .setting i {
	display: block;
	width: 100%;
	color: #007ccb;
	font-size: 16px;
	font-weight: 900;
	font-style: normal;
}

.style-editor .settings .setting:hover i {
	color: #00aeff;
}

.style-editor .settings .setting.active:hover i {
	color: #007ccb;
}

.style-editor .settings .setting s {
	display: block;
	width: 100%;
	font-size: 12px;
	text-decoration: none;
}

.style-editor .settings .setting b {
	display: block;
	width: 100%;
	color: #007ccb;
	font-size: 12px;
	line-height: 16px;
	font-weight: 900;
}

.style-editor .settings .setting:hover b {
	color: #00aeff;
}

.style-editor .settings .setting.active:hover b {
	color: #007ccb;
}

.style-editor .settings .setting:hover s {
	color: #333;
}

.style-editor .settings .setting .style {
	display: inline-block;
	box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0 inset, rgba(0, 0, 0, 0.25) 0 -1px 0 inset, rgba(0, 0, 0, 0.25) -1px 0 0 inset, rgba(0, 0, 0, 0.25) 1px 0 0 inset;
	border-radius: 4px;
}

.style-editor .settings .setting:hover .style {
	display: inline-block;
	box-shadow: #00aeff 0 2px 0 inset, #00aeff 0 -2px 0 inset, #00aeff -2px 0 0 inset, #00aeff 2px 0 0 inset, rgba(255, 255, 255, 0.5) 3px 0 0 inset, rgba(255, 255, 255, 0.5) -3px 0 0 inset, rgba(255, 255, 255, 0.5) 0 -3px 0 inset, rgba(255, 255, 255, 0.5) 0 3px 0 inset;
	border-radius: 4px;
}

.style-editor .settings .setting.active .style {
	box-shadow: rgba(0, 124, 203, 1) 0 2px 0 inset, rgba(0, 124, 203, 1) 0 -2px 0 inset, rgba(0, 124, 203, 1) -2px 0 0 inset, rgba(0, 124, 203, 1) 2px 0 0 inset, rgba(255, 255, 255, 1) 3px 0 0 inset, rgba(255, 255, 255, 1) -3px 0 0 inset, rgba(255, 255, 255, 1) 0 -3px 0 inset, rgba(255, 255, 255, 1) 0 3px 0 inset;
}

.style-editor .settings .setting .style.page {
	width: 60px;
	height: 60px;
	margin: 0 0 3px 0;
}

.style-editor .settings .setting .style.color {
	width: 40px;
	height: 40px;
}

.style-editor .settings .setting .style.background {
	width: 50px;
	height: 50px;
	margin: 0 0 3px 0;
}

.style-editor .settings-footer {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 25px;
	z-index: 10;
}

.style-editor .settings-footer .reset {
	display: inline-block;
	font-weight: 900;
	margin: 0 0 15px 0;
    color: #252525;
}

.style-editor .settings-footer .reset:hover {
	color: #00aeff;
}

@media only screen and (max-width: 767px) { 
	.style-editor { display: none; }
}