/******* zoom-plugin ********/
.image-zoom-overlay{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	z-index: 10000;
	display: none;
}
.image-zoom-overlay .logo {
	margin-top: 22px;
}
.overlay-close-button {
	position: absolute;
	top: 31px;
	right: 17px;
	width: 44px;
    height: 44px;
	padding: 0px;
	cursor: pointer;
	opacity: 1;
	z-index: 10000;
	background: #eaeaea;
	background: none;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
	transition: all 0.3s ease;
}
	.image-zoom-overlay .overlay-close-button {
		top: 23px;	
	}
		.image-zoom-overlay .overlay-close-button:hover {
			transform: scale(1.2);
			transform: none;
			box-shadow: 0 10px 10px 0 rgba(0,0,0,.19), 0 6px 3px 0 rgba(0,0,0,.23);
		}
		.image-zoom-overlay .overlay-close-button:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.1);
			-webkit-transform: translateY(100%) translateY(10px) rotate(10deg) scaleX(1.2);
			transform: translateY(100%) translateY(10px) rotate(10deg) scaleX(1.2);
			-webkit-transition: -webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			transition: -webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			transition: transform .7s cubic-bezier(.59,.03,.2,1);
			transition: transform .7s cubic-bezier(.59,.03,.2,1),-webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			z-index: 5;
		}
		.image-zoom-overlay .overlay-close-button:hover:before {
			transform: translateY(0) rotate(0deg) scaleX(1.2);
		}
		.image-zoom-overlay .overlay-close-button i {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
		.image-zoom-overlay .overlay-close-button i:before,
		.image-zoom-overlay .overlay-close-button i:after {
			content: '';
			position: absolute;
			width: 13px;
			height: 1px;
			background: #000;
			top: 22px;
			left: 15px;
			transform: rotate(45deg);
			transition: all 0.3s ease;
		}
		.image-zoom-overlay .overlay-close-button i:after  {
			transform: rotate(-45deg);
		}
		.image-zoom-overlay .overlay-close-button:hover i:before,
		.image-zoom-overlay .overlay-close-button:hover i:after {
			transform: rotate(0deg);
		}
	
.image-zoom-overlay .title-block {
	position: fixed;
	/*width: 100%;*/
	width: 150px;
	/*height: 120px;*/
	height: 100%;
	left: 0px;
	top: 0px;
	/*line-height: 120px;*/
	background: #fff;
	z-index: 100;
	text-align: center;
	display: none;
}
	.image-zoom-overlay .title-block .product-name {
		font-size: 45px;
		position: relative;
		top: 22px;
		
		font-size: 20px;
		position: absolute;
		bottom: 225px;
		top: auto;
		left: -165px;
		transform: rotate(-90deg) translateX(50%);
		display: block;
		/* width: 500px; */
		white-space: nowrap;
	}
		.image-zoom-overlay .title-block .product-name:before,
		.image-zoom-overlay .title-block .product-name:after {
			content: '';
			position: absolute;
			top: 30px;
			left: -150px;
			width: 100px;
			height: 1px;
			background: #555;
			
			content: '';
			position: absolute;
			top: 59px;
			left: -115px;
			width: 100px;
			height: 1px;
			background: #555;
		}
		.image-zoom-overlay .title-block .product-name:after {
			content: none;
			left: auto;
			right: -150px;
		}
.zoom-img-wrapper {
	text-align: center;
	position: absolute;
    width: 100%;
    height: 100%;
    background: #ffF;
    z-index: 101;
	display: none;
}
	.zoom-img-wrapper img {
		cursor: url('images/cursor-zoom-plus.png') 22 22, auto;
		position: relative;
		top: 0px;
		transition: transform 0.5s ease, top 0.1s ease;
	}
	.zoom-img-wrapper img:active,
	.zoom-img-wrapper img:focus {
		cursor: move;
	}
.zoom-overlay-content .slider-img-wrapper {
	position: absolute;
    top: 120px;
    top: 40px;
    width: 100%;
    height: calc(100% - 70px);
    height: calc(100% - 40px);
    overflow: hidden;
	background: #FFF;
}
	.zoom-overlay-content .slider-img-wrapper .slider-img-content {
		position: relative;
		top: 0px;
		transition: all 1.5s cubic-bezier(0.84, -0.04, 0.13, 1.01);
	}
		.zoom-overlay-content .slider-img-wrapper .slider-img-content:before {
			content: '';
			position: fixed;
			width: 100%;
			height: 110px;
			background: #FFF;
			background: transparent;
			left: 0px;
			bottom: 0px;
			z-index: 100;
		}
		.zoom-overlay-content .slider-img-wrapper .pic-item {
			text-align: center;
			position: relative;
			padding-bottom: 30px;
		}
			.zoom-overlay-content .slider-img-wrapper .pic-item img {
				max-width: 64%;
				max-height: 70%;
				max-height: 100%;
				vertical-align: middle;
				transform: translateY(-11px);
				transform: translateY(0px);
				transition: all 0.5s ease;
			}
			.thumbs-show .zoom-overlay-content .pic-item img {
				transform: translateY(-15%);
			}
			.zoom-overlay-content .slider-img-wrapper .pic-item .desc-block {
				position: absolute;
				top: 10px;
				line-height: normal;
				width: 100%;
				text-align: center;
				font-size: 20px;
			}
	.zoom-overlay-content .slider-img-wrapper .slider-img-control {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		right: 23px;
		width: 20px;
	}
		.zoom-overlay-content .slider-img-wrapper .nav-item {
			float: right;
			width: 30px;
			height: 2px;
			background: #999;
			margin-bottom: 9px;
			transition: all 0.5s ease;
		}.zoom-overlay-content .slider-img-wrapper .nav-item.active {
			/*width: 20px;*/
			background: #999;
			margin-bottom: 100px;
		}
	.image-zoom-overlay .zoom-button,
	.inner-color-arrows .zoom-button {
		position: fixed;
		bottom: 23px;
		right: 23px;
		width: 40px;
		height: 50px;
		cursor: pointer;
	}
	.inner-color-arrows .zoom-button,
	.image-zoom-overlay .zoom-button.out	{
		border: 1px solid #f3f3f3;
		/*border-top: 1px solid #555;*/
		/*border-bottom: 1px solid #555;*/
	}
	.image-zoom-overlay .zoom-overlay-content .zoom-button,
	.image-zoom-overlay .zoom-button.out {
		right: 78px;
		top: 23px;
		bottom: auto;
		z-index: 100;
		width: 44px;
		height: 44px;
		background: #eaeaea;
		background: none;
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
		transition: all 0.3s ease;
	}
	.image-zoom-overlay .zoom-overlay-content .zoom-button:hover,
	.image-zoom-overlay .zoom-button.out:hover {
		transform: scale(1.2);
		transform: none;
		box-shadow: 0 10px 10px 0 rgba(0,0,0,.19), 0 6px 3px 0 rgba(0,0,0,.23);
	}
		.image-zoom-overlay .zoom-overlay-content .zoom-button:before,
		.image-zoom-overlay .zoom-button.out:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.1);
			-webkit-transform: translateY(100%) translateY(10px) rotate(10deg) scaleX(1.2);
			transform: translateY(100%) translateY(10px) rotate(10deg) scaleX(1.2);
			-webkit-transition: -webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			transition: -webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			transition: transform .7s cubic-bezier(.59,.03,.2,1);
			transition: transform .7s cubic-bezier(.59,.03,.2,1),-webkit-transform .7s cubic-bezier(.59,.03,.2,1);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			z-index: 5;
		}
		.image-zoom-overlay .zoom-overlay-content .zoom-button:hover:before,
		.image-zoom-overlay .zoom-button.out:hover:before {
			transform: translateY(0) rotate(0deg) scaleX(1.2);
		}
		.image-zoom-overlay .zoom-overlay-content .zoom-button i {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
		.image-zoom-overlay .zoom-overlay-content .zoom-button i:before,
		.image-zoom-overlay .zoom-overlay-content .zoom-button i:after {
			content: '';
			position: absolute;
			width: 11px;
			height: 1px;
			background: #000;
			top: 22px;
			left: 16px;
		}
		.image-zoom-overlay .zoom-button:not(.out) i:after {
			transform: rotate(90deg);
		}
	.image-zoom-overlay .zoom-overlay-content .slider-img-arrows {
		position: fixed;
		top: 23px;
		right: 138px;
		z-index: 100;
	}
		.zoom-overlay-content .slider-img-arrows .arrow {
			background: #eaeaea;
			background: none;
			height: 44px;
			width: 44px;
			display: inline-block;
			border-radius: 50%;
			margin-left: 16px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
			transition: all 0.5s ease;
		}
		.zoom-overlay-content .slider-img-arrows .arrow:hover {
			transform: scale(1.2);
			transform: none;
			box-shadow: 0 10px 10px 0 rgba(0,0,0,.19), 0 6px 3px 0 rgba(0,0,0,.23);
		}
			.zoom-overlay-content .slider-img-arrows .arrow:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.1);
				transform: translateY(100%) translateY(10px) rotate(10deg) scaleX(1.2);
				transition: transform .7s cubic-bezier(.59,.03,.2,1),-webkit-transform .7s cubic-bezier(.59,.03,.2,1);
				z-index: 5;
			}
			.zoom-overlay-content .slider-img-arrows .arrow:hover:before {
				transform: translateY(0) rotate(0deg) scaleX(1.2);
			}
			.zoom-overlay-content .slider-img-arrows .arrow i {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 10;
			}
				.zoom-overlay-content .slider-img-arrows .arrow i:before,
				.zoom-overlay-content .slider-img-arrows .arrow i:after {
					content: '';
					position: absolute;
					width: 7px;
					height: 1px;
					background: #000;
					top: 19px;
					left: 16px;
					transform: rotate(-45deg);
				}
				.zoom-overlay-content .slider-img-arrows .arrow.next i:before,
				.zoom-overlay-content .slider-img-arrows .arrow.next i:after {
					left: 19px;
				}
				.zoom-overlay-content .slider-img-arrows .arrow i:after {
					transform: rotate(45deg);
					top: 23px;
				}
				.zoom-overlay-content .slider-img-arrows .arrow.next i:before {
					transform: rotate(45deg);
				}
				.zoom-overlay-content .slider-img-arrows .arrow.next i:after {
					transform: rotate(-45deg);
				}
	.inner-color-arrows .zoom-button {
		right: 192px;
		width: 39px;
		height: auto;
		line-height: 6px;
		border: none;
		top: 27px;
		bottom: auto;
		z-index: 100;
		display: none;
	}
		.image-zoom-overlay .zoom-button.out i:before {
			content: '';
			position: absolute;
			width: 15px;
			height: 1px;
			left: 10px;
			top: 17px;
			background: #000;
		}
		.inner-color-arrows .zoom-button .square {
			width: 9px;
			height: 5px;
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
			background: #dfdfdf;
		}
		.inner-color-arrows .zoom-button .square:nth-child(4),
		.inner-color-arrows .zoom-button .square:nth-child(5),
		.inner-color-arrows .zoom-button .square:nth-child(6) {
			background: #777;
		}
		.inner-color-arrows .zoom-button.out:after {
			content: none;
		}
		.image-zoom-overlay .zoom-button svg {
			position: relative;
			top: 3px;
			left: -7px;
		}
	.image-zoom-overlay  .image-move-area {
		position: absolute;
		width: 100%;
		height: 30%;
		left: 0px;
		top: 0px;
		cursor: n-resize;
		display: none;
		z-index: 10;		
	}
	.image-zoom-overlay  .image-move-area.active {
		display: block;
	}
	.image-zoom-overlay  .image-move-area.active {
		display: block;
	}
	.image-zoom-overlay  .image-move-area.move-bottom {
		top: auto;
		bottom: 0px;
	}

.zoom-preview-block {
	position: absolute; 
	right: 65px;
    top: 25px;
	padding: 2px 5px;
    //background: rgba(255,255,255,.6);
	overflow: hidden;
}
.zoom-preview-item {
	width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0px 4px;
    border-radius: 50%;
    border: 1px solid #d7d7d7;
    cursor: pointer;
    transition: all 0.15s ease;
}
}
.zoom-preview-item:hover {
	//transform: scale(1.2);
	opacity: 1;
}
	.zoom-preview-item:after {
		content: '';
		display: block;
		width: 4px;
		height: 4px;
		//background-color: #000;
		border-radius: 50%;
	}
	
		.image-zoom-overlay .inner-color-arrows {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			background: #FFF;
			background: rgba(255, 255, 255, 0.24);
			background: rgba(212, 212, 212, 0.24);
			/* height: 115px; */
			z-index: 100;
		}
			.image-zoom-overlay .inner-color-arrows .colors li a {
				border: none; 
			}
			.image-zoom-overlay .inner-color-arrows .colors li{
				margin-left: 17px;
			}
			.image-zoom-overlay .inner-color-arrows .zoom-name-block {
				position: fixed;
				top: -47px;
				top: 16px;
				top: 0px;
				padding-top: 32px;
				padding: 25px 0px;
				left: 12px;
				text-align: center;
				width: 100%;
				font-size: 27px;
				font-weight: bold;
				font-family: myriadsetprothin;
				background: #FFF;
				z-index: 100;
			}
			span.product-name {
				color: #000;
				font-weight: normal;
				font-family: 'myriadprolight';
				font-size: 45px;
			}
				.zoom-name-block .title-color-name {
					text-transform: capitalize;
				}
			.image-zoom-overlay .arrows-wrapper {
				width: 1100px;
				margin: auto;
				position: relative;
				/*bottom: 60px;*/
				text-align: center;
				background: #FFF;
				background: transparent;
				padding: 20px 0px;
				padding-bottom: 11px;
				/*padding-left: 65px;*/
				opacity: 1;
				transition: all 0.5s ease;
			}
			.image-zoom-overlay .show .arrows-wrapper {
				opacity: 1;
			}
				.inner-color-arrows .thumb-pagination {
					position: absolute;
					width: 100%;
					left: 0px;
					bottom: -29px;
				}
					.inner-color-arrows .thumb-pagination span {
						position: relative;
						display: inline-block;
						margin: 0px 10px;
						width: 37px;
						height: 10px;
						cursor: pointer;
					}
						.inner-color-arrows .thumb-pagination span:before,
						.inner-color-arrows .thumb-pagination span:after {
							content: '';
							position: absolute;
							width: 100%;
							height: 2px;
							left: 0px;
							top: 4px;
							background: #999;
							transition: all 0.5s ease;
						}
						.inner-color-arrows .thumb-pagination span:after {
							opacity: 0;
							background: #b91440;
						}
						.inner-color-arrows .thumb-pagination span.active:after {
							opacity: 1;
						}
				.image-zoom-overlay .colors-area {
					text-align: left;
					position: relative;
					/*max-width: calc(100% - 460px);*/
					min-width: 800px;
					width: 858px;
					width: 988px;
					display: inline-block;
					vertical-align: bottom;
					overflow: hidden;
				}
				.image-zoom-overlay .arrows-wrapper .prev-button,
				.image-zoom-overlay .arrows-wrapper .next-button {
					font-family: 'entypo';
					display: inline-block;
					/*display: none;*/
					position: absolute;
					font-size: 1.2em;
					bottom: 54px;
					bottom: 36px;
					color: #333;
					cursor: pointer;
					width: 30px;
					height: 30px;
					margin-left: 10px;
					margin-right: 10px;
					transition: all 0.2s ease;
				}
				.image-zoom-overlay .arrows-wrapper .prev-button {
					left: 0px;
				}
				.image-zoom-overlay .arrows-wrapper .next-button {
					right: 0px;
				}
				.image-zoom-overlay .arrows-wrapper .prev-button:active, 
				.image-zoom-overlay .arrows-wrapper .next-button:active {
					transform: scale(0.6);
				}
				
				.image-zoom-overlay .arrows-wrapper .prev-button:hover:before {
					transform: rotate(-225deg);
				}
				.image-zoom-overlay .arrows-wrapper .prev-button:hover:after {
					transform: rotate(135deg);
				}
				.image-zoom-overlay .arrows-wrapper .prev-button:before,
				.image-zoom-overlay .arrows-wrapper .prev-button:after {
					content: '';
					display: block;
					position: absolute;
					background: #333;
					transform: rotate(-45deg);
					cursor: pointer;
					transition: all 0.6s ease;
				}
				.image-zoom-overlay .arrows-wrapper .prev-button:before {
					top: 9px;
					left: 7px;
					width: 12px;
					height: 2px;
				}
				.image-zoom-overlay .arrows-wrapper .prev-button:after {
					top: 12px;
					left: 12px;
					width: 2px;
					height: 12px;
				}
				.image-zoom-overlay .arrows-wrapper .next-button:hover:before {
					transform: rotate(-135deg);
				}
				.image-zoom-overlay .arrows-wrapper .next-button:hover:after {
					transform: rotate(225deg);
				}
				.image-zoom-overlay .arrows-wrapper .next-button:before,
				.image-zoom-overlay .arrows-wrapper .next-button:after {
					content: '';
					display: block;
					position: absolute;
					background: #333;
					transform: rotate(45deg);
					cursor: pointer;
					transition: all 0.6s ease;
				}
				.image-zoom-overlay .arrows-wrapper .next-button:before {
					top: 9px;
					right: 7px;
					width: 12px;
					height: 2px;
				}
				.image-zoom-overlay .arrows-wrapper .next-button:after {
					top: 12px;
					right: 12px;
					width: 2px;
					height: 12px;
				}
				.color-name {
					position: absolute;
					left:21%;
					top: 11px;
					font-weight: bold;
				}
				.image-zoom-overlay  .thumbs {
					margin-bottom: 15px !important;
					margin-top: 0px;
					padding: 0px;
					cursor: pointer;
					transition: all 0.8s ease-out;
				}
					.image-zoom-overlay  .thumbs li {
						display: inline-block;
						padding: 0px 6px;
						vertical-align: bottom;
						position: relative;
						opacity: 0.7;
						transition: all 0.5s ease;
					}
					
					.image-zoom-overlay  .thumbs li.active,
					.image-zoom-overlay  .thumbs li:hover {
						opacity: 1;
					}
					.image-zoom-overlay  .thumbs li:before {
						content: none;
					}
						.image-zoom-overlay  .thumbs li .zoom-thumb-container {
							padding: 10px;
							background: #FFF;
							border: 1px solid #555;
							position: relative;
						}
							.image-zoom-overlay  .thumbs li .zoom-thumb-container:before {
								content: '';
								position: absolute;
								width: 100%;
								height: 2px;
								background: #555;
								left: 0px;
								bottom: -10px;
								opacity: 0;
								transition: all 0.5s ease;
							}
							.image-zoom-overlay  .thumbs li.active .zoom-thumb-container:before {
								opacity: 1;
							}
						.image-zoom-overlay  .thumbs li .zoom-thumb {
							width: 70px;
							width: 90px;
							height: 40px;
							height: 55px;
							background-position: center bottom;
							background-size: contain;
							background-repeat: no-repeat;
							opacity: 0.7;
							position: relative;
						}
						.image-zoom-overlay  .thumbs li.active .zoom-thumb {
							opacity: 1;
						}
							.image-zoom-overlay  .thumbs li .zoom-thumb:before {
								content: attr(data-desc);
								position: absolute;
								width: auto;
								text-align: center;
								top: -21px;
								font-size: 15px;
								color: #b91440;
								opacity: 0;
								white-space: nowrap;
								left: 50%;
								transform: translateX(-50%);
								transition: all 0.5s ease;
							}
							.image-zoom-overlay  .thumbs li.active .zoom-thumb:before {
								opacity: 0;
							}