/* =====================================
Template Name: Eshop
Author Name: Naimur Rahman
Author URI: http://www.wpthemesgrid.com/
Description: Eshop - eCommerce HTML5 Template.
Version:1.0
========================================*/
/*======================================
[ CSS Table of contents ]
01. Preloader CSS
02. Header CSS
	+ Logo
	+ Category Menu
	+ Main Menu
03. Hero Area CSS
04. Small Banner CSS
05. Medium Banner CSS
06. Single Product CSS
07. Shop Sidebar CSS
08. Shop Single CSS
09. Shop Home List CSS
10. Cart CSS
11. Checkout CSS
12. Login & Register CSS
13. Cowndown CSS
14. Shop Services CSS
15. Newslatter CSS
16. About Us CSS
17. Team CSS
18. Blog CSS	
	+ Blog Archive
	+ Blog Sidebar
	+ Blog Single
19. Contact CSS
20. 404 Error CSS
21. Footer CSS
========================================*/
.color-plate {
	position: fixed;
	display: block;
	z-index: 99998;
	padding: 20px;
	width: 245px;
	background: #fff;
	right: -245px;
	text-align: left;
	top: 30%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	-webkit-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
	box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
}
.color-plate.active{
	right:0;
}
.color-plate .color-plate-icon {
	position: absolute;
	left: -48px;
	width: 48px;
	height: 45px;
	line-height: 45px;
	font-size: 21px;
	border-radius: 5px 0 0 5px;
	background: #fff;
	text-align: center;
	color: #800080;
	top: 0;
	cursor: pointer;
	box-shadow: -4px 0px 5px #00000036;
}
.color-plate h4 {
	display: block;
	font-size: 15px;
	margin-bottom: 5px;
	font-weight: 500;
}
.color-plate p {
	font-size: 13px;
	margin-bottom: 15px;
	line-height: 20px;
}
.color-plate span {
	width: 42px;
	height: 35px;
	border-radius: 0;
	cursor: pointer;
	display: inline-block;
	margin-right: 3px;
}
.color-plate span:hover{
	cursor:pointer;
}
.color-plate span.color1{
	background:#f1499d;
}
.color-plate span.color2{
	background:#0088CC;
}
.color-plate span.color3{
	background:#32B87D;
}
.color-plate span.color4{
	background:#FE754A;
}
.color-plate span.color5{
	background:#F82F56;
}
.color-plate span.color6{
	background:#00cec9;
}
.color-plate span.color7{
	background:#6c5ce7;
}
.color-plate span.color8{
	background:#85BA46;
}
.color-plate span.color9{
	background:#fd79a8;
}
.color-plate span.color10{
	background:#a29bfe;
}
.color-plate span.color11{
	background:#badc58;
}
.color-plate span.color12{
	background:#FF1D38;
}

.color {
	display: inline-block;
	margin-right: 50px;
}
.color h4 {
	font-size: 18px;
	font-weight: 600;
}
.color h4 span {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-top: 4px;
}
.color ul{
	margin-top: 10px;
}
.color ul li{
	display:inline-block;
	margin-right:5px;
}
.color ul li:last-child{
	margin-right:0;
}
.color ul li a{
	height:30px;
	width:30px;
	line-height:30px;
	text-align:center;
	display:block;
	background:#800080;
}
.color ul li a i{
	font-size:11px;
	color:#fff;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.color ul li a:hover i{
	opacity:1;
	visibility:visible;
}
.red{
	background:#FF0000;
}
.cyan{
	background:#00FFFF;
}
.blue{
	background:#0000FF;
}
.purple{
	background:#800080;
}
.yellow{
	background: #FFFF00;
}
.pink{
	background: #FF00FF;
}
.white{
	background: #FFFFFF;
}
.gray{
	background: #808080;
}
.black{
	background: #000000;
}
.orange{
	background: #FFA500;
}
.brown{
	background: #A52A2A;
}
.green{
	background: #008000;
}

/* Color check */
label.color-check {
	cursor: pointer;
}

label.color-check input {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none
}

label.color-check span {
	height:30px;
	width:30px;
	line-height:30px;
	text-align:center;
	border: 1px solid #8f37aa;
    display: inline-block;
}

label.color-check span i{
	font-size:20px;
	font-weight: bold;
	color: #6ffc4c;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}

label.color-check span:hover i{
	opacity:1;
	visibility:visible;
}

label.color-check input:checked+span i{
	opacity:1;
	visibility:visible;
}
/* End color picker */


/* Product gallery */
.product-gallery {
	margin-top: 30px;
}
.flexslider-thumbnails {
	position: relative;
}
.product-gallery .slides li{
	position:relative;
}
.product-gallery .slides li img{
	width:100%;
}
.flex-control-nav{
	margin-top:15px;
}
.flex-control-thumbs li {
	width: 20%;
	position: relative;
	margin: 0 8px 10px -3px;
}
.flex-control-thumbs li img {
	border: none;
	padding: 0;
	border:1px solid transparent;
}
.flex-control-thumbs li img.flex-active{
	border-color:#f1499d;
}
.flex-direction-nav{
	display:none;
}