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

.webpulse-main-wrapper{ background:#ffffff none repeat scroll 0 0; margin:0 auto; overflow-x:hidden; position:relative; z-index:1; }
.webpulse-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(../images/pattern/pattren1.jpg) repeat; }
.bg2{ background:url(../images/pattern/pattren2.jpg) repeat; }
.bg3{ background:url(../images/pattern/pattren3.jpg) repeat; }
.bg4{ background:url(../images/pattern/pattren4.jpg) repeat; }
.bg5{ background:url(../images/pattern/pattren5.jpg) repeat; }
.bg6{ background:url(../images/pattern/pattren6.jpg) repeat; }
.bg7{ background:url(../images/pattern/pattren7.jpg) repeat; }
.bg8{ background:url(../images/pattern/pattren8.jpg) repeat; }
.bg9{ background:url(../images/pattern/pattren9.jpg) repeat; }
.bg10{ background:url(../images/pattern/pattren10.jpg) repeat; }
.bg11{ background:url(../images/pattern/pattren11.jpg) repeat; }
.bg12{ background:url(../images/pattern/pattren12.jpg) repeat; }
/* ===================================
    Switcher
====================================== */

#style-switcher{ left:-260px; position:fixed; top:200px; padding:25px 20px; width:260px; 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; display: none}
#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%; list-style: none;}
.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; background:#98b446;}

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

.pattren li{ float:left; height:40px; padding:0 0 0 5px; width:16.5%; list-style: none; }
.pattren li a{ border:1px solid #d5d5d5; float:left; width:100%; }
.pattren li img{ width: 100%;}

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

.colors{ padding-left:7px; }
.colors{ list-style:none; margin:0px 0px 10px 0px; overflow:hidden; }
.colors li{ float:left; margin-bottom:5px; padding-left:5px; text-align:center; width:12.46%; list-style: none; }
.colors li a{ cursor:pointer; display:block; height:22px; width:22px; }
.style1{ background:#86bc42; }
.style2{ background:#e81e62; }
.style3{ background:#0073ad; }
.style4{ background:#47588f; }
.style5{ background:#fab702; }
.style6{ background:#d0ad55; }
.style7{ background:#49c0d0; }
.style8{ background:#16a086; }
.style9{ background:#404dcd; }
.style10{ background:#007bff; }
.style11{ background:#e05110; }
.style12{ background:#f63c25; }
.style13{ background:#ca1f26; }
.style14{ background:#795548; }
.style15{ background:#fd9233; }
.style16{ background:#af7114; }

.select_font{ width: 100%; border: 1px solid #eee; padding: 10px 15px;}
.select_font li{list-style: none; position: relative;}
.select_font li a{color: #333; text-decoration: none; padding: 5px 15px;}
.select_font li a:hover{ background: #86bc42; color: #fff;}
.select_font li a.active{ background: #86bc42; color: #fff;}
.select_font li ul{display: none; position: absolute; z-index: 999; width: 100%; background: #fff; bottom: 105%; left: 0;}
.select_font li:hover ul{display: block; width: 100%; margin: 0!important; border: 1px solid #eee;}
@media screen and (max-width: 767px) { 
	/*#style-switcher { display: none; }*/
}