/* ===================================
    Mainwrapper
====================================== */

.main-wrapper{ background:#ffffff none repeat scroll 0 0; margin:0 auto; overflow-x:hidden; position:relative; z-index:1; }
.main-wrapper.wrapper-boxed{ background-color:#ffffff; box-shadow:0 0 10px rgba(0, 0, 0, 0.3); margin:0 auto; max-width:1200px; overflow-x:hidden; position:relative; width:100%; z-index:1; }

/* ===================================
    Background Pattern
====================================== */

.bg1{ background:url(../img/pattern/pattren1.jpg) repeat; }
.bg2{ background:url(../img/pattern/pattren2.jpg) repeat; }
.bg3{ background:url(../img/pattern/pattren3.jpg) repeat; }
.bg4{ background:url(../img/pattern/pattren4.jpg) repeat; }
.bg5{ background:url(../img/pattern/pattren5.jpg) repeat; }

/* ===================================
    Switcher
====================================== */

#style-switcher{ left:-268px; position:fixed; top:16%; padding:25px 20px; width:268px; z-index:9999; background:#fff; border-radius:0 0 3px; box-shadow:0px 5px 30px 0 rgba(0, 0, 0, 0.2); -webkit-transition-duration:.7s; transition-duration:.7s; }
#style-switcher > div{ float:left; width:100%; margin-bottom:16px; }
#style-switcher > div:last-child{ margin-bottom:0; }
#style-switcher h2{ color:#232323; font-size:12px; margin:0 0 5px 0; text-align:left; line-height:normal; text-transform:uppercase; }
#style-switcher ul{ margin:0 0 0 -7px; padding:0; }
#style-switcher.active{ left:0px; }
#style-switcher .switcher-setting{ background:#232323; border-radius:0px 3px 3px 0px; display:block; height:40px; position:absolute; right:-40px; top:0; width:40px; }
#style-switcher .switcher-setting i{ color:#fff; font-size:19px; left:12px; position:absolute; top:10px; }

/* ===================================
    Layout btn
====================================== */
.layout-btn li{ float:left; padding:0 0 0 7px; width:50%; }
.layout-btn a span{ background-color:#2a2a2a; color:#ffffff; float:left; padding:6px 10px; text-align:center; transition:all 0.4s ease-in-out 0s; width:100%; }
.layout-btn a span:hover{ opacity:0.7; }

/* ===================================
    Pattren
====================================== */

.pattren li{ float:left; height:35px; padding:0 0 0 5px; width:35px; }
.pattren li a{ border:1px solid #d5d5d5; float:left; width:100%; }

/* ===================================
    Colors and styles
====================================== */

#style-switcher .colors { margin-top: -8px; }
.colors{ padding-left:7px; }
.colors{ list-style:none; margin:0px 0px 10px 0px; overflow:hidden; }
.colors li{ float:left; margin-top:8px; padding-left:8px; text-align:center; }
.colors li a{ cursor:pointer; display:block; height:30px; width:30px; }
.style1{ background: -moz-linear-gradient(45deg, #292dc2 0%, #0084e9 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #292dc2), color-stop(100%, #0084e9)); /* safari4+,chrome */
background: -webkit-linear-gradient(45deg, #292dc2 0%, #0084e9 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, #292dc2 0%, #0084e9 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, #292dc2 0%, #0084e9 100%); /* ie10+ */
background: linear-gradient(45deg, #292dc2 0%, #0084e9 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0084e9', endColorstr='#292dc2',GradientType=1 ); /* ie6-9 */ }
.style2{ background: -moz-linear-gradient(45deg, #1767e4 0%, #12c7f2 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #1767e4), color-stop(100%, #12c7f2)); /* safari4+,chrome */
background: -webkit-linear-gradient(45deg, #1767e4 0%, #12c7f2 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, #1767e4 0%, #12c7f2 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, #1767e4 0%, #12c7f2 100%); /* ie10+ */
background: linear-gradient(45deg, #1767e4 0%, #12c7f2 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12c7f2', endColorstr='#1767e4',GradientType=1 ); /* ie6-9 */ }
.style3{ background: -moz-linear-gradient(45deg, #5e2ced 0%, #a485fd 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5e2ced), color-stop(100%, #a485fd)); /* safari4+,chrome */
background: -webkit-linear-gradient(45deg, #5e2ced 0%, #a485fd 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, #5e2ced 0%, #a485fd 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, #5e2ced 0%, #a485fd 100%); /* ie10+ */
background: linear-gradient(45deg, #5e2ced 0%, #a485fd 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a485fd', endColorstr='#5e2ced',GradientType=1 ); /* ie6-9 */ }
.style4{ background: -moz-linear-gradient(45deg, #3f2aa7 0%, #5532bd 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3f2aa7), color-stop(100%, #5532bd)); /* safari4+,chrome */
background: -webkit-linear-gradient(45deg, #3f2aa7 0%, #5532bd 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(45deg, #3f2aa7 0%, #5532bd 100%); /* opera 11.10+ */
background: -ms-linear-gradient(45deg, #3f2aa7 0%, #5532bd 100%); /* ie10+ */
background: linear-gradient(45deg, #3f2aa7 0%, #5532bd 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5532bd', endColorstr='#3f2aa7',GradientType=1 ); /* ie6-9 */ }

/* ===================================
    Choose Demo
====================================== */

.choose-demo .demo-btn li { display: inline-block; padding-left: 5px; width: 75px; margin-bottom: 10px;}
.choose-demo .demo-btn a { border: 1px solid rgba(0,0,0,0.1); padding: 1px; text-align: center; text-transform: uppercase; color: #fff; font-size: 12px; display: inline-block; }
.choose-demo .demo-btn a:hover { border-color: rgba(0,0,0,0.3); }


@media screen and (max-width: 991px) {
	#style-switcher { display: none; }
}