

/* Styles Switcher */



#style-switcher {

background: #fff none repeat scroll 0 0;

border-radius: 0 0 3px;

box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);

left: 0;

position: fixed;

top: 168px;

width: 220px;

z-index: 9999;

}

#style-switcher div {

padding: 0px 10px;

}

#style-switcher h2 {

color: #333;

font-family: Calibri,sans-serif;

font-size: 14px;

margin-bottom: 0;

margin-right: 0;

margin-top: 0;

padding: 10px 0;

text-align: center;

text-transform: uppercase;

}

#style-switcher h2 a {

background: #fff none repeat scroll 0 0;

display: block;

height: 50px;

position: absolute;

right: -50px;

top: 0;

width: 50px;

}

#style-switcher h2 a i {

color: #333333;

font-size: 26px;

left: 12px;

position: absolute;

top: 12px;

}

.colors {

  padding-left: 7px;

}

.colors {

  list-style: none;

  margin: 0px 0px 10px 0px;

  overflow: hidden;

}

.colors li {

  float: left;

}

.colors li a {

border-radius: 100px;

cursor: pointer;

display: block;

height: 35px;

margin: 6px;

width: 35px;

}

.layout-style select {

  width: 100%;

  padding: 5px;

  border: none;

  margin: 0 0 0 -5px;

  color: #fff;

  cursor: pointer;

}

#reset {

  margin: 0 0 15px 2px;

}

#reset a {

  color: #fff;

  font-size: 12px;

}

.style1 {

  background: #333333;

}

.style2 {

  background: #03a9f4;

}

.style3 {

  background: #009f8b;

}

.style4 {

  background: #083c5a;

}

.style5 {

  background: #9dc852;

}

.style6 {

  background: #2f7af8;

}

.style7 {

  background: #9e7dd3;

}

.style8 {

  background: #cddc39;

}

.style9 {

  background: #f44336;

}

.style10 {

  background: #e91e63;

}

.style11 {

  background: #9c27b0;

}

.style12 {

  background: #4caf50;

}



.colors li a.active {

  box-shadow: 0 0 0px 2px #fff;

}

.icon-2x{

	color: #fff;

font-size:22px;

line-height:30px;

}



@media only screen and (max-width: 768px) {

  #style-switcher {

    display: none;

  }

}

