﻿/** 48. Image Zoom [plugin]
		assets/plugins/image.zoom
**************************************************************** **/
figure.zoom img::selection { 
	background-color: transparent;
}

figure.zoom {
	display:inline-block;
	position: relative;

	-webkit-transition: all .300s;
	   -moz-transition: all .300s;
		 -o-transition: all .300s;
			transition: all .300s; 
}
figure.zoom>a.lightbox {
	position:absolute;
	z-index:20;
	font-size:17px;
	background-color:#666;
	padding:6px 10px;
	width:40px; height:40px;
	line-height:30px;
	text-align:center;
	color:#fff;

	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-top-left-radius: 15px;
	-moz-border-radius-bottom-right: 15px;
	-moz-border-radius-top-left: 15px;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 15px;
}
figure.zoom>a.lightbox:hover {
	background-color:#333;
}
	/* lightbox button position */
	figure.zoom>a.lightbox.bottom-right {
		right:10px; bottom:10px;
	}
	figure.zoom>a.lightbox.bottom-left {
		left:10px; bottom:10px;
	}
	figure.zoom>a.lightbox.top-right {
		right:10px; top:10px;
	}
	figure.zoom>a.lightbox.top-left {
		left:10px; top:10px;
	}

.owl-carousel.zoom-more .owl-controls .owl-buttons div {
	background-color:inherit;
	border:0;
}

.owl-carousel.zoom-more .owl-controls.clickable {
	top: auto !important;
	bottom:0 !important;
	margin-top:0;
	margin-bottom:-10px;
	right:-10px;
}

.owl-carousel.zoom-more a,
.owl-carousel.zoom-more a>img {
	text-align:center; 

	-webkit-transition: all .300s;
	   -moz-transition: all .300s;
		 -o-transition: all .300s;
			transition: all .300s; 
}
.owl-carousel.zoom-more a>img {
	/*opacity:0.5;
	filter: alpha(opacity=80);*/

	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/ /* Firefox 10+ */
	/*filter: gray;*/ /* IE6-9 */
	/*-webkit-filter: grayscale(99%);*/ /* Chrome 19+ & Safari 6+ */
	/*-webkit-backface-visibility: hidden;*/  /* Fix for transition flickering */
    opacity:1;
	filter: alpha(opacity=1);

	-webkit-filter: none;
	filter: none;
}
.owl-carousel.zoom-more a.active>img {
	opacity:1;
	filter: alpha(opacity=1);

	-webkit-filter: none;
	filter: none;
}



/** IMAGE ZOOM HOVER */
.image-hover-zoom {
	overflow: hidden;
}
.image-hover-zoom>img {

	-webkit-transition: ease all .3s;
	-moz-transition: ease all .3s;
	transition: ease all .3s;
}
.image-hover-zoom:hover>img {
	-webkit-transform: translate3d(0, 3%, 0) scale(1.3);
	-moz-transform: translate3d(0, 3%, 0) scale(1.3);
	-ms-transform: translate3d(0, 3%, 0) scale(1.3);
	-o-transform: translate3d(0, 3%, 0) scale(1.3);
	transform: translate3d(0, 3%, 0) scale(1.3);
}



/** IMAGE PLUS HOVER **/
.image-hover-plus {
	position: relative;
	display: block;
}
.image-hover-plus>i.icon-hover-plus {
	opacity: 0;
	position: absolute;
	width: 0;
	top: 50%;
	left: 50%;

	z-index: 10;

	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.image-hover-plus:hover>i.icon-hover-plus {
	opacity: 1;
	width: 20%;
}
.image-hover-plus>i.icon-hover-plus::after,
.image-hover-plus>i.icon-hover-plus::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	border-top: #fff 1px solid;

	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	-o-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
}
.image-hover-plus>i.icon-hover-plus::after {
	-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
	-moz-transform: translate3d(-50%, -50%, 0) rotate(90deg);
	-ms-transform: translate3d(-50%, -50%, 0) rotate(90deg);
	-o-transform: translate3d(-50%, -50%, 0) rotate(90deg);
	transform: translate3d(-50%, -50%, 0) rotate(90deg);
}


/* IMAGE HOVER OVERLAY */
.image-hover-overlay {
	position: relative;
	overflow: hidden;
	display: block;
}

.image-hover-overlay::before {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;

	background-color: rgba(33, 33, 36, 0.5);
	opacity: 0;

	z-index:10;
	position: absolute;
	content:' ';
}

.image-hover-overlay:hover::before {
	opacity: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
