/**
*	Some general resets and font with icons
**/

@font-face {
	font-family: 'ColorFilters';
	src:  url('fonts/ColorFilters.eot');
	src:  url('fonts/ColorFilters.eot') format('embedded-opentype'),
		url('fonts/ColorFilters.ttf') format('truetype'),
		url('fonts/ColorFilters.woff') format('woff'),
		url('fonts/ColorFilters.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="color-filters-icon-"], [class*=" color-filters-icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'ColorFilters' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.color-filters-icon-checkmark:before {
	content: "\ea10";
}
.color-filters-icon-checkbox-checked:before {
	content: "\ea52";
}
.color-filters-icon-checkbox-unchecked:before {
	content: "\ea53";
}

body .ColorFilters-colors-list {
}
	body .ColorFilters-colors-list li,
	body .ColorFilters-colors-list a {
		padding: 0 !important;
		margin: 0 !important;
	}
		body .ColorFilters-colors-list * {
			text-decoration: none;
			border: none;
			box-shadow: none;
		}
		body .ColorFilters-colors-list li.ColorFilters-hide-color {
			display: none;
		}
		body .ColorFilters-colors-list a {
			display: block;
		}

		body .ColorFilters-colors-list li.ColorFilters-is-selected a {
			font-weight: bold;
		}
		.ColorFilters-colors-list .ColorFilters-color-box {
			display: inline-block;
			width: 22px;
			height: 22px;
		}
		body .ColorFilters-colors-list li.ColorFilters-too-light .ColorFilters-color-box {
			border: 1px solid #EEEEEE;
		}
			body .ColorFilters-colors-list li.ColorFilters-too-light .ColorFilters-color-box:after {
				color: #424242 !important;
			}

			body .ColorFilters-colors-list li.ColorFilters-show-all-btn {
				margin-top: 10px !important;
			}


/* Template 1 =========== */
.ColorFilters-colors-list.ColorFilters-tpl-template-1 {
	font-size: 0;
}
.ColorFilters-colors-list.ColorFilters-tpl-template-1 li {
	display: inline-block;
}
	.ColorFilters-colors-list.ColorFilters-tpl-template-1 li a {
		line-height: 10px;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-1 li.ColorFilters-show-all-btn {
		display: block;
		margin-top: 10px !important;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-1 li .ColorFilters-color-box {
		width: 32px;
		height: 32px;
	}
		.ColorFilters-colors-list.ColorFilters-tpl-template-1 li.ColorFilters-is-selected .ColorFilters-color-box {
			position: relative;
		}
			.ColorFilters-colors-list.ColorFilters-tpl-template-1 li.ColorFilters-is-selected .ColorFilters-color-box:after {
				display: block;
				width: inherit;
				height: inherit;
				font-family: 'ColorFilters';
				font-size: 11px;
				content: "\ea10";
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				line-height: 32px;
				color: #fff;
			}
		
			body .ColorFilters-colors-list.ColorFilters-tpl-template-1 li[data-color="white"] .ColorFilters-color-box:after {
				color: #757575;
			}

			.ColorFilters-colors-list.ColorFilters-tpl-template-1 li:hover .ColorFilters-color-box {
				position: relative;
    			z-index: 99;
			    transition: transform 120ms ease-in;
			    transform: scale(1.2);
			}

/* Template 2 =========== */
.ColorFilters-colors-list.ColorFilters-tpl-template-2 {
}
.ColorFilters-colors-list.ColorFilters-tpl-template-2 li {
	display: table;
	width: 100%;
}
	.ColorFilters-colors-list.ColorFilters-tpl-template-2 li a {
		display: table-cell;
		vertical-align: middle;
		padding: 0px 10px 10px 0px;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-2 li.ColorFilters-is-selected a span.ColorFilters-checkbox:before {
		content: '\ea52';
		color: #1d1d1d;
	}
.ColorFilters-colors-list.ColorFilters-tpl-template-2 .ColorFilters-color-box {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	float: right;
}
.ColorFilters-colors-list.ColorFilters-tpl-template-2 .ColorFilters-checkbox {
	font-size: 16px;
	margin-right: 5px;
	color: #7a7a7a;
}
	body .ColorFilters-colors-list.ColorFilters-tpl-template-2 li.ColorFilters-is-selected .ColorFilters-checkbox {
		color: #dd3333;
	}


/* Template 3 =========== */
.ColorFilters-colors-list.ColorFilters-tpl-template-3:after {
	content: "";
	display: block; 
	clear: both;
}
.ColorFilters-colors-list.ColorFilters-tpl-template-3 li {
	display: inline-block;
	float: left;
	width: 60px;
	text-align: center;
	margin-bottom: 10px !important;
}
	.ColorFilters-colors-list.ColorFilters-tpl-template-3 li.ColorFilters-show-all-btn {
		clear: both;
		width: auto;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-3 li a {
		display: block;
		width: 100%;
		vertical-align: middle;
		padding: 0px 10px 10px 0px;
		line-height: 20px;
	}
		.ColorFilters-colors-list.ColorFilters-tpl-template-3 li a span:last-child {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: block;
			width: 100%;
			padding-left: 5px;
			padding-right: 5px;
			text-transform: none;
			color: #000;
			font-weight: normal;
		}
		.ColorFilters-colors-list.ColorFilters-tpl-template-3 li:hover a span:last-child {
			font-weight: bold;
		}
		.ColorFilters-colors-list.ColorFilters-tpl-template-3 li:hover .ColorFilters-color-box {
			position: relative;
			z-index: 99;
			transition: transform 120ms ease-in;
			transform: scale(1.2);
		}

	.ColorFilters-colors-list.ColorFilters-tpl-template-3 .ColorFilters-color-box {
		display: inline-block;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		position: relative;
	}
		.ColorFilters-colors-list.ColorFilters-tpl-template-3 li.ColorFilters-is-selected .ColorFilters-color-box:after {
			display: block;
			width: inherit;
			height: inherit;
			font-family: 'ColorFilters';
			font-size: 11px;
			content: "\ea10";
			position: absolute;
			top: 0;
			left: 1px;
			text-align: center;
			line-height: 36px;
			color: #fff;
		}
		.ColorFilters-colors-list.ColorFilters-tpl-template-3 li.ColorFilters-is-selected a span:last-child {
			font-weight: bold;
		}

/* Template 3 =========== */
.ColorFilters-colors-list.ColorFilters-tpl-template-4 {
}
.ColorFilters-colors-list.ColorFilters-tpl-template-4 li {
	display: table;
	width: 100%;
}
	.ColorFilters-colors-list.ColorFilters-tpl-template-4 li a {
		display: table-cell;
		vertical-align: middle;
		padding: 0px 10px 10px 0px;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-4 li a span:last-child {
		padding-left: 5px;
		font-weight: normal;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-4 li.ColorFilters-is-selected a span:last-child {
		font-weight: bold;
	}
	.ColorFilters-colors-list.ColorFilters-tpl-template-4 li.ColorFilters-is-selected a span:first-child:before {
		content: '\ea10';
		font-family: 'ColorFilters';
		font-size: 10px;
		color: #fff;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 2px;
		right: 0;
		line-height: 21px;
		text-align: center;
	}
.ColorFilters-colors-list.ColorFilters-tpl-template-4 .ColorFilters-color-box {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	vertical-align: middle;
	border-radius: 2px;
	position: relative;
}
.ColorFilters-colors-list.ColorFilters-tpl-template-4 .ColorFilters-checkbox {
	font-size: 15px;
	margin-right: 5px;
}
	body .ColorFilters-colors-list.ColorFilters-tpl-template-4 li.ColorFilters-is-selected .ColorFilters-checkbox {
		color: #dd3333;
	}
.ColorFilters-product-colors {
	clear: both;
	width: 100%;
	padding-top: 25px;
}
	.ColorFilters-product-colors .ColorFilters-label-name {
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
		font-size: 16px;
	}
	.ColorFilters-product-colors ul {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 0;
		display: inline-block;
		vertical-align: middle;
	}
		.ColorFilters-product-colors ul li {
			display: inline-block;
			margin-right: 5px;
		}
	.ColorFilters-product-colors .ColorFilters-color-item {
		width: 24px;
		height: 24px;
		display: inline-block;
		text-decoration: none !important;
		box-shadow: none;
		border-radius: 40px;
	}
	.ColorFilters-product-colors .ColorFilters-too-light .ColorFilters-color-item {
		border: 1px solid #F5F5F5;
	}

	.ColorFilters-product-colors .ColorFilters-color-item:hover {
		position: relative;
		z-index: 99;
		transition: transform 120ms ease-in;
		transform: scale(1.2);
	}