/* Switcher
// ====================*/
#demo-switcher {
	display: none;
	background: #221221;
	padding: 12px 10px;
	position: fixed;
	left: 0;
	top: 50%;
	-webkit-transform: translate(-100%, -50%);
	-moz-transform: translate(-100%, -50%);
	-ms-transform: translate(-100%, -50%);
	-o-transform: translate(-100%, -50%);
	transform: translate(-100%, -50%);
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
  
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-bottom-right-radius: 4px;
	-ms-border-bottom-right-radius: 4px;
	-o-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	z-index: 1031;
}
@media (min-width: 768px) {
  #demo-switcher {
    display: block;
  }
}
#demo-switcher.active {
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
#demo-switcher .toggle-switcher {
	background: #454545;
	display: block;
	position: absolute;
	top: 0;
	right: -50px;
	width: 50px;
	height: 50px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-ms-border-top-right-radius: 4px;
	-o-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-bottom-right-radius: 4px;
	-ms-border-bottom-right-radius: 4px;
	-o-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
#demo-switcher .toggle-switcher:hover {
	opacity: 0.87;
}
#demo-switcher .icon {
	color: #fff;
	font-size: 26px;
	position: absolute;
	top: 12px;
	left: 12px;
}
#demo-switcher .colors li {
	display: block;
}
#demo-switcher .colors li + li {
	margin-top: 6px;
}
#demo-switcher .colors li a {
	cursor: pointer;
    display: block;
    width: 97px;
    height: 30px;
    overflow: hidden;
	border: 3px solid #fff;
}
#demo-switcher .colors li a span {
	display: inline-block;
    width: 44px;
    height: 30px;
}
#demo-switcher .colors li a:hover {
	opacity: 0.5;
}

#demo-switcher .blue-orange .primary { background: #36688D; }
#demo-switcher .blue-orange .secondary { background: #F18904; }

#demo-switcher .brown-gray .primary { background: #be9063; }
#demo-switcher .brown-gray .secondary { background: #525b56; }

#demo-switcher .green-blue .primary { background: #25d67e; }
#demo-switcher .green-blue .secondary { background: #233140; }

#demo-switcher .orange-black .primary { background: #f18808; }
#demo-switcher .orange-black .secondary { background: #232323; }

#demo-switcher .orange-silver .primary { background: #f96e52; }
#demo-switcher .orange-silver .secondary { background: #4f4f4f; }

#demo-switcher .red-blue .primary { background: #ED1C24; }
#demo-switcher .red-blue .secondary { background: #1C77C3; }

#demo-switcher .verdigris-blue .primary { background: #4EB1BA; }
#demo-switcher .verdigris-blue .secondary { background: #222930; }