.style-switcher {
	position: fixed;
	top: 120px;
	right: -316px;
	z-index: 2000;
	width: 316px;
	background: #f3f3f3;
	box-shadow: 0 5px 19px rgba(0,0,0,.2);
}

.style-switcher h3 {
	margin: 0;
	padding: 0;
}
	.style-switcher h3 a {
		position: absolute;
		top: 0;
		left: -80px;
		display: block;
		width: 80px;
		height: 80px;
		color: #FFF;
		text-align: center;
		text-decoration: none;
		font-size: 24px;
		line-height: 80px;
		box-shadow: 0 5px 19px rgba(0,0,0,.2);
		background-color: #fd7250;
	}
	.style-switcher h3 a .fa {
		color: #fff;
		margin-right: 4px;
	}
.style-switcher-body {
	padding: 28px;
}
	.style-switcher-body h4 {
		text-align: center;
	}
	.style-switcher-body ul {
		margin-bottom: 20px;
		overflow: hidden;
	}

.styles-switcher-colors {
	list-style: none;
	padding: 0;
	overflow: hidden;
	margin-bottom: 20px;
}
	.styles-switcher-colors li {
		margin: 0 0 20px 0;
		padding: 1px;
		border: 1px solid #d7d7d7;
		height: 36px;
		background: #e1e1e1;
		box-shadow: inset 0 0 6px rgba(0,0,0,.05);
	}
		.styles-switcher-colors li::before {
			display: none;
		}
		.styles-switcher-colors li a {
			display: block;
			width: 100%;
			height: 32px;
			position: relative;
			cursor: pointer;
		}
		.styles-switcher-colors li a:hover {

		}
			.styles-switcher-colors li a:not([class*="current"]):hover::before {
				opacity: 0.5;
				background-color: rgba(255,255,255,.5);
			}

		.styles-switcher-colors li a.current {

		}
			.styles-switcher-colors li a::before {
				content:"";
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				transition: all 0.2s;
			}
			.styles-switcher-colors li a.current::before {
				opacity: 0.8;
			}
			.styles-switcher-colors li a.current::after {
				content:"\f00c";
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-family: 'FontAwesome';
				font-size: 14px;
				color: #fff;
			}

		/* Color: Default */
		.styles-switcher-colors li a.color-default {
			background-image: linear-gradient(to right, #f1f2f4 12.5%, #fd7250 12.5%, #fd7250 25%, #4d326d 25%, #4d326d 37.5%, #d2464a 37.5%, #d2464a 50%, #fda771 50%, #fda771 62.5%, #e85938 62.5%, #e85938 75%, #746a80 75%, #746a80 87.5%, #d5d6d9 87.5%);
		}
			.styles-switcher-colors li a.color-default.current::before {
				background-color: #fd7250;
			}

		/* Color: Blue */
		.styles-switcher-colors li a.color-blue {
			background-image: linear-gradient(to right, #f7f7f7 12.5%, #5ab6f7 12.5%, #5ab6f7 25%, #1a2758 25%, #1a2758 37.5%, #2e3f82 37.5%, #2e3f82 50%, #74ddff 50%, #74ddff 62.5%, #3c71f9 62.5%, #3c71f9 75%, #6a6b80 75%, #6a6b80 87.5%, #d5d6d9 87.5%);
		}
			.styles-switcher-colors li a.color-blue.current::before {
				background-color: #5ab6f7;
			}

		/* Color: Pink */
		.styles-switcher-colors li a.color-pink {
			background-image: linear-gradient(to right, #f7f7f7 12.5%, #c7166f 12.5%, #c7166f 25%, #870044 25%, #870044 37.5%, #d24698 37.5%, #d24698 50%, #ff0080 50%, #ff0080 62.5%, #aa0056 62.5%, #aa0056 75%, #806a76 75%, #806a76 87.5%, #d5d5d5 87.5%);
		}
			.styles-switcher-colors li a.color-pink.current::before {
				background-color: #c7166f;
			}

		/* Color: Dark */
		.styles-switcher-colors li a.color-dark {
			background-image: linear-gradient(to right, #f7f7f7 12.5%, #bababa 12.5%, #bababa 25%, #333333 25%, #333333 37.5%, #898989 37.5%, #898989 50%, #e1e1e1 50%, #e1e1e1 62.5%, #717171 62.5%, #717171 75%, #838383 75%, #838383 87.5%, #d5d5d5 87.5%);
		}
			.styles-switcher-colors li a.color-dark.current::before {
				background-color: #bababa;
			}

		/* Color: Red */
		.styles-switcher-colors li a.color-red {
			background-image: linear-gradient(to right, #f7f7f7 12.5%, #e22424 12.5%, #e22424 25%, #383838 25%, #383838 37.5%, #d2464a 37.5%, #d2464a 50%, #ff4040 50%, #ff4040 62.5%, #c11c1c 62.5%, #c11c1c 75%, #984747 75%, #984747 87.5%, #d5d5d5 87.5%);
		}
			.styles-switcher-colors li a.color-red.current::before {
				background-color: #e22424;
			}

		/* Color: Green */
		.styles-switcher-colors li a.color-green {
			background-image: linear-gradient(to right, #f7f7f7 12.5%, #139f48 12.5%, #139f48 25%, #007225 25%, #007225 37.5%, #ffe93b 37.5%, #ffe93b 50%, #27d368 50%, #27d368 62.5%, #10a942 62.5%, #10a942 75%, #719675 75%, #719675 87.5%, #d9d9d5 87.5%);
		}
			.styles-switcher-colors li a.color-green.current::before {
				background-color: #139f48;
			}

/* Layouts */
.style-switcher-layout {
	list-style: none;
	padding: 0;
	margin: 0 !important;
}
	.style-switcher-layout li {
		float: right;
		width: 45%;
		text-align: center;
		padding: 0;
		margin: 0;
	}
		.style-switcher-layout li::before {
			display: none;
		}
		.style-switcher-layout li:first-child {
			float: left;
		}
		.style-switcher-layout li a {
			display: block;
		}