/*----bootstrap css ----- */
/*@import url('../vendor/bootstrap/bootstrap.css');*/
/*----font awesome -------*/
@import url('../fonts/font-awesome/css/font-awesome.min.css');











/*=============== Style switcher =============*/
.switcher .switch_btn button {
  width:80px;
  height:80px;
  border:none;
  color:#fff;
  font-size: 24px;
  outline: none;
}
.switcher .switch_btn {
  position: absolute;
  left: -80px;
  z-index: -1;
}
.switcher {
  position: fixed;
  top:220px;
  z-index: 99;
  right:-269px;
  -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
      -ms-transition: all .4s ease-in-out;
       -o-transition: all .4s ease-in-out;
          transition: all .4s ease-in-out;
}



.switcher .switch_menu {
  width:269px;
  background: #3e3e3e;
  position: relative;
  padding-bottom: 36px;
}


@media (max-width: 900px) {
.switcher {

  top:100px;

}
.switcher .switch_menu {
	margin-top:6px;
}	
}

.switcher.switcher-show {
  right:0;
}
.switcher .switch_menu .switcher_container {
  width:235px;
  margin:0 auto;
}
.switcher .switch_menu h5.title {
  margin:0 0 27px 0;
  line-height: 49px;
  text-align: center;
  font-size:18px;
  text-transform: uppercase;
  font-family: 'Montserrat-SemiBold';
  color:#fff;
}
.switcher .switch_menu .switcher_container h5 {
  color:#fff;
  font-size:18px;
  text-align: center;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
}
.switcher .switch_menu .switcher_container h5.fix_space {
  margin: 17px 0 11px 0;
}
.switcher .switch_menu .switch_body .box {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-top: 16px;
}

.switcher .switch_menu .switch_body .box>div {
  width:100px;
  height:57px;
  background: #f4f4f4;
  border:2px solid #eaeaea;
}
.switcher .switch_menu .switch_body .box>div>span {
  display: block;
  width:70px;
  height:100%;
  margin:0 auto;
  background: #fff;
  border-left:2px solid #eaeaea;
  border-right:2px solid #eaeaea;
}
.switcher .switch_menu p {
  font-weight: normal;
  font-size: 14px;
  color:#a4a4a4;
}
.switcher .switch_menu .switch_body .box p {
  margin-top: 5px;
}
.switcher .switch_menu .switch_body {
  border-bottom:1px solid #181c1c;
  padding-bottom: 20px;
}
.switcher .switch_menu .switch_navigation {
  text-align: center;
  border-bottom:1px solid #181c1c;
  padding-bottom: 11px;
  margin-top: 17px;
  padding-top: 0;
}
.switcher .switch_menu .switch_navigation h5 {
  margin-bottom: 12px;
}
.switcher .switch_menu .switch_navigation p,
.switcher .switch_menu .switch_navigation .onoffswitch {
  display: inline-block;
  margin-left:5px;
  text-align: center;

}
.switcher .switch_menu .switch_navigation p {
  vertical-align: top;
  margin-top:12px;
}

.onoffswitch {
    position: relative;
    width: 105px;
    margin-top:4px;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    height: 43px; 
    padding: 0; 
    line-height: 43px;
    border-radius: 43px;
    background-color: #5d6166;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "";
    display: block;
    width: 41px;
    height:41px;
    margin: 0px;
    background: #98ca3c;
    position: absolute; 
    top: 1px; 
    bottom: 1px;
    right: 63px;
    border-radius: 43px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #5d6166;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #5d6166;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
  right: 1px; 
}
.switcher .box_bg h5 {
  font-size: 20px;
}
.switcher .box_bg {
  text-align: center;
  margin-top: 15px;
  padding-bottom: 27px;
  padding-top:1px;
  border-bottom:1px solid #f7f7f7;
  margin-bottom: 12px;
}
.switcher #styleOptions {
  padding: 0;
}
.switcher #styleOptions li {
  float:left;
  width:50px;
  height:50px;
  margin-right:4px;
  margin-top:5px;
}
.switcher #styleOptions li:last-child {
  margin-right:0;
}
.switcher #styleOptions li a {
  display: block;
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
}
.switcher #styleOptions li a span.p_color,
.switcher #styleOptions li a span.s_color {
  position: absolute;
  width: 100%;
  height:150%;
  transform: rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
}
.switcher #styleOptions li a span.p_color {
  left: -17px;
  top: -29px;
}
.switcher #styleOptions li a span.s_color {
  right: -17px;
  bottom: -29px;
}
.switcher #styleOptions li a.color1 span.p_color {
  background: #98ca3c;
}
.switcher #styleOptions li a.color1 span.s_color {
  background: #5d6166;
}
.switcher #styleOptions li a.color2 span.p_color {
  background: #fd9b28;
}
.switcher #styleOptions li a.color2 span.s_color {
  background: #211a0f;
}
.switcher #styleOptions li a.color3 span.p_color {
  background: #6c98e1;
}
.switcher #styleOptions li a.color3 span.s_color {
  background: #272727;
}
.switcher #styleOptions li a.color4 span.p_color {
  background: #4eb32f;
}
.switcher #styleOptions li a.color4 span.s_color {
    background: #1e2a31;
}