/* 
    Created on : 12.11.2015, 16:51:47
    Author     : DFD
	Styels for : Portfolio and Gallery Customizable Hovers
*/
@-webkit-keyframes dfdFolioHoverDots {
	0% {
		-webkit-transform: scale(.5);
	}
	50% {
		-webkit-transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes dfdFolioHoverDots {
	0% {
		-moz-transform: scale(.5);
	}
	50% {
		-moz-transform: scale(1.5);
	}
	100% {
		-moz-transform: scale(1);
	}
}
@-o-keyframes dfdFolioHoverDots {
	0% {
		-o-transform: scale(.5);
	}
	50% {
		-o-transform: scale(1.5);
	}
	100% {
		-o-transform: scale(1);
	}
}
@-ms-keyframes dfdFolioHoverDots {
	0% {
		-ms-transform: scale(.5);
	}
	50% {
		-ms-transform: scale(1.5);
	}
	100% {
		-ms-transform: scale(1);
	}
}
@keyframes dfdFolioHoverDots {
	0% {
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
	50% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
article.dfd-portfolio,
article.dfd-gallery,
article.dfd-portfolio_archive,
article.dfd-gallery_archive,
.dfd-simple-advertisement {
	&.portfolio-hover-style-1 {
		.entry-hover {
			.abs();
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.translate(100%;100%);
		}
	}
	&.dfd-3d-parallax {
		.transform(translateZ(0));
		.transform-style(preserve-3d);
		.backface-visibility(hidden);
		> .cover {
			overflow: visible !important;
			pointer-events: none;
			background: transparent !important;
			will-change: transform;
			.backface-visibility(hidden);
			.transform-style(preserve-3d);
			.transition-transform(.23s linear);
			* {
				pointer-events: none;
			}
			&.hover-in,
			&.hover-in.hover-3d,
			&.hover-out,
			&.hover-out.hover-3d {
				.transition-transform(.45s linear);
				.entry-thumb {
					.entry-hover {
						.transition(all .45s linear);
						&:before {
							.transition(all .45s linear);
						}
						.dfd-hover-frame-deco {
							.transition(all .45s linear);
						}
					}
				}
				+ .dfd-shadow-box {
					.transition-transform(.45s ease);
				}
			}
			.entry-thumb {
				will-change: transform;
				.transform-style(preserve-3d);
				.transform(translateZ(0));
				.backface-visibility(hidden);
				.thumb-wrap {
					.rel();
					.block();
					z-index: 1;
					-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
					&:before {
						content: "";
						width: 100%;
						height: 100%;
						.abs();
						top: 0;
						left: 0;
						background: rgba(0,0,0,.8);
						.hide();
						opacity: 0;
						visibility: hidden;
						z-index: 1;
						will-change: opacity, visibility;
						.transition(~"opacity .3s ease, visibility .3s ease");
					}
					.shine {
						opacity: 0;
						visibility: hidden;
						will-change: opacity, visibility;
						.transition(~"opacity .3s ease, visibility .3s ease");
					}
				}
				.entry-hover {
					.abs();
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					visibility: hidden;
					z-index: 2;
					.transform-style(preserve-3d);
					.transform(translateZ(50px));
					will-change: transform, opacity, visibility;
					.transition(~"opacity .6s ease, visibility .6s ease");
					&:before {
						content: "";
						.block();
						.abs();
						top: 10%;
						bottom: 10%;
						left: 10%;
						right: 10%;
						background: rgba(0,0,0,.8);
					}
				}
				.dfd-main-hover-link {
					.abs();
					pointer-events: auto;
				}
			}
		}
		> .dfd-shadow-box {
			.transform(translateZ(-150px));
			.transition(all .23s linear !important);
		}
		&:hover {
			> .cover {
				.entry-thumb {
					.thumb-wrap {
						&:before,
						.shine {
							opacity: 1;
							visibility: visible;
						}
					}
				}
				.entry-hover {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
	&.panr {
		.entry-thumb {
			img {
				.transition(none);
				-moz-transition: all .3s ease; /*remove when starts trasform prop. in FF*/
			}
		}
	}
	
	&.dfd-fade-out {
		.entry-thumb {
			.entry-hover {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				.opacity(0);
				visibility: hidden;
				.transition(~"opacity .3s ease .3s, visibility .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					.opacity(1);
					visibility: visible;
					.transition(~"opacity .3s ease, visibility .3s ease");
				}
			}
		}
	}
	&.dfd-fade-offset {
		.entry-thumb {
			.entry-hover {
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				.opacity(0);
				visibility: hidden;
				.transition(~"left .3s ease .3s, right .3s ease .3s, top .3s ease .3s, bottom .3s ease .3s, opacity .3s ease .3s, visibility .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					top: 10px;
					bottom: 10px;
					left: 10px;
					right: 10px;
					.opacity(1);
					visibility: visible;
					.transition(~"left .3s ease, right .3s ease, top .3s ease, bottom .3s ease, opacity .3s ease, visibility .3s ease");
				}
			}
		}
	}
	&.dfd-left-to-right {
		.entry-thumb {
			.entry-hover {
				width: 100%;
				height: 100%;
				top: 0;
				left: -100%;
				.transition(~"left .3s ease .3s, opacity .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					left: 0;
					.transition(~"left .3s ease .0s, opacity .3s ease .0s");
				}
			}
		}
	}
	&.dfd-right-to-left {
		.entry-thumb {
			.entry-hover {
				width: 100%;
				height: 100%;
				top: 0;
				left: 100%;
				.transition(~"left .3s ease .3s, opacity .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					left: 0;
					.transition(~"left .3s ease .0s, opacity .3s ease .0s");
				}
			}
		}
	}
	&.dfd-top-to-bottom {
		.entry-thumb {
			.entry-hover {
				width: 100%;
				height: 100%;
				left: 0;
				top: -100%;
				.transition(~"top .3s ease .3s, opacity .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					top: 0;
					.transition(~"top .3s ease .0s, opacity .3s ease .0s");
				}
			}
		}
	}
	&.dfd-bottom-to-top {
		.entry-thumb {
			.entry-hover {
				width: 100%;
				height: 100%;
				left: 0;
				top: 100%;
				.transition(~"top .3s ease .3s, opacity .3s ease .3s");
			}
		}
		&:hover {
			.entry-thumb {
				.entry-hover {
					top: 0;
					.transition(~"top .3s ease .0s, opacity .3s ease .0s");
				}
			}
		}
	}
	&.dfd-left-to-right,
	&.dfd-right-to-left,
	&.dfd-top-to-bottom,
	&.dfd-bottom-to-top {
		.entry-hover {
			opacity: .5;
		}
		&:hover {
			.entry-hover {
				opacity: 1;
			}
		}
	}
	&.portfolio-hover-style-1,
	&.dfd-left-to-right,
	&.dfd-right-to-left,
	&.dfd-top-to-bottom,
	&.dfd-bottom-to-top {
		&:hover {
			.entry-thumb {
				.entry-hover {
					.dfd-hover-frame-deco .line {
						.transition-delay(.3s);
					}
					.title-wrap {
						h3.entry-title {
							.transition-delay(.5s);
							span {
								.transition-delay(.6s);
							}
						}
						.entry-subtitle {
							.transition-delay(.5s);
							span {
								.transition-delay(.6s);
							}
						}
					}
					.plus-link {
						.transition-delay(.5s);
					}
					.dfd-dots-link {
						span {
							&.dfd-left-dot {
								.transition-delay(.6s);
								.animation-delay(.6s);
							}
							&.dfd-right-dot {
								.transition-delay(.8s);
								.animation-delay(.8s);
							}
							&.dfd-middle-dot {
								.transition-delay(.7s);
								.animation-delay(.7s);
							}
						}
					}
					.dfd-hover-buttons-wrap {
						> * {
							&:nth-child(1) {
								.transition-delay(.5s);
							}
							&:nth-child(2) {
								.transition-delay(.7s);
							}
							&:nth-child(3) {
								.transition-delay(.9s);
							}
						}
					}
				}
			}
		}
	}
	&.dfd-fade-out,
	&.dfd-fade-offset,
	&.dfd-left-to-right,
	&.dfd-right-to-left,
	&.dfd-top-to-bottom,
	&.dfd-bottom-to-top {
		&.dfd-image-scale {
			.entry-thumb {
				img {
					.scale(1);
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.scale(1.06);
					}
				}
			}
		}
		&.dfd-image-scale-rotate {
			.entry-thumb {
				img {
					.transform(scale(1) rotate(0));
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.transform(scale(1.06) rotate(2deg));
					}
				}
			}
		}
		&.dfd-image-shift-left {
			.entry-thumb {
				img {
					.transform(scale(1.2) translateX(0));
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.transform(scale(1.2) translateX(-5%));
					}
				}
			}
		}
		&.dfd-image-shift-right {
			.entry-thumb {
				img {
					.transform(scale(1.2) translateX(0));
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.transform(scale(1.2) translateX(5%));
					}
				}
			}
		}
		&.dfd-image-shift-top {
			.entry-thumb {
				img {
					.transform(scale(1.2) translateY(0));
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.transform(scale(1.2) translateY(-5%));
					}
				}
			}
		}
		&.dfd-image-shift-bottom {
			.entry-thumb {
				img {
					.transform(scale(1.2) translateY(0));
					.transition-transform(.7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.transform(scale(1.2) translateY(5%));
					}
				}
			}
		}
		&.dfd-image-blur {
			.entry-thumb {
				img {
					.blur(0);
					.scale(1);
					.transition(all .7s ease-in-out);
				}
			}
			&:hover {
				.entry-thumb {
					img {
						.scale(1.1);
						.blur(5px);
					}
				}
			}
		}
	}
	.entry-thumb {
		.byline.category {
			opacity: 1;
			visibility: visible;
			.transition(~"opacity .3s ease, visibility .3s ease");
		}
		.dfd-main-hover-link {
			.abs();
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9;
			&.dfd-cursor-plus {
				cursor: url(../images/cursor.png) 40 40, default;
			}
		}
		.entry-hover {
			.abs();
			text-align: inherit;
			&:before {
				content: "";
				.block();
				.abs();
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0,0,0,.7);
			}
			.dfd-hover-frame-deco {
				.abs();
				top: 40px; bottom: 40px;
				left: 40px; right: 40px;
				.line {
					.abs();
					background: #ffffff;
					.transition-transform(.5s ease);
					&.line-top,
					&.line-bottom {
						left: 0;
						right: 0;
						.transform(scaleX(0));
					}
					&.line-left,
					&.line-right {
						top: 0;
						bottom:0;
						.transform(scaleY(0));
					}
					&.line-top {
						top: 0;
						.transform-origin(100% 50%);
					}
					&.line-bottom {
						bottom: 0;
						.transform-origin(0% 50%);
					}
					&.line-left {
						left: 0;
						.transform-origin(50% 100%);
					}
					&.line-right {
						right: 0;
						.transform-origin(50% 0);
					}
				}
			}
			.title-wrap {
				.block();
				width: 100%;
				.abs();
				left: 0;
				top: 50%;
				text-align: center;
				padding: 0 20px;
				color: @white-color;
				z-index: 1;
				.transform(translateY(-50%));
				h3.entry-title {
					overflow: hidden;
					margin-bottom: 0;
					a {
						color: inherit;
					}
					span {
						.rel();
						.block();
						color: inherit;
						.transform(translateY(100%));
						.transition-transform(.5s ease .2s);
					}
				}
				.entry-subtitle {
					overflow: hidden;
					color: @white-color;
					.opacity(.5);
					span {
						.rel();
						.block();
						color: inherit;
						.transform(translateY(100%));
						.transition-transform(.5s ease);
					}
				}
			}
			.plus-link {
				@s: 66px;
				@bs: 32px;
				.abs();
				top: 50%;
				left: 50%;
				.block();
				width: @s;
				height: @s;
				margin-top: -@s / 2;
				margin-left: -@s / 2;
				.folio-plus-link(2px, 33px);
				z-index: 1;
				opacity: 0;
				.transform(scale(.5));;
				-webkit-transition: -webkit-transform .3s ease, opacity .3s ease;
				-moz-transition: -moz-transform .3s ease, opacity .3s ease;
				-o-transition: -o-transform .3s ease, opacity .3s ease;
				transition: transform .3s ease, opacity .3s ease;
				.plus-link-container {
					border: none !important;
				}
				&.dfd-plus-bordered {
					.folio-plus-link(1px, 41px);
				}
				&.dfd-cursor-plus {
					.plus-link-container {
						.hide();
					}
				}
			}
			.dfd-dots-link {
				z-index: 1;
				span {
					opacity: 0;
					background: @white-color;
					.transform(scale(.5));
					-webkit-transition: -webkit-transform .5s ease, opacity .5s ease;
					-moz-transition: -moz-transform .5s ease, opacity .5s ease;
					-o-transition: -o-transform .5s ease, opacity .5s ease;
					transition: transform .5s ease, opacity .5s ease;
					&.dfd-left-dot {
						.transition-delay(.1s);
					}
					&.dfd-middle-dot {
						.transition-delay(.2s);
					}
					&.dfd-right-dot {
						.transition-delay(.3s);
					}
				}
			}
			.dfd-hover-buttons-wrap {
				.block();
				width: 100%;
				.abs();
				top: 50%;
				left: 0;
				text-align: center;
				.transform(translateY(-50%));
				z-index: 3;
				> * {
					@s: 42px;
					.rel();
					font-size: 15px;
					.inline-block();
					margin: 0 15px;
					color: inherit;
					opacity: 0;
					.scale(.5);
					-webkit-transition: -webkit-transform .5s ease, opacity .5s ease;
					-moz-transition: -moz-transform .5s ease, opacity .5s ease;
					-o-transition: -o-transform .5s ease, opacity .5s ease;
					transition: transform .5s ease, opacity .5s ease;
					&:before {
						.rel();
						z-index: 1;
					}
					&:after {
						@s:42px;
						content: "";
						.block();
						width: @s;
						height: @s;
						.abs();
						top:50%;
						left:50%;
						margin-top: -@s / 2;
						margin-left: -(@s / 2) + 1;
						border: 2px solid transparent;
						.rounded(50%);
						z-index: 0;
						.scale(0);
						.transition(all .3s ease);
					}
					&:nth-child(1) {
						.transition-delay(0s);
					}
					&:nth-child(2) {
						.transition-delay(.1s);
					}
					&:nth-child(3) {
						.transition-delay(.2s);
					}
					&:hover {
						&:after {
							background: rgba(255,255,255,.15);
							.scale(1);
						}
					}
				}
			}
		}
	}
	&:hover {
		z-index: 3;
		.entry-thumb {
			.byline.category {
				opacity: 0;
				visibility: hidden;
			}
			.entry-hover {
				.dfd-hover-frame-deco {
					.line {
						&.line-top,
						&.line-bottom {
							.transform(scaleX(1));
						}
						&.line-left,
						&.line-right {
							.transform(scaleY(1));
						}
					}
				}
				.title-wrap {
					h3.entry-title,
					.entry-subtitle {
						span {
							.transform(translateY(0));
						}
					}
					.entry-subtitle {
						span {
							.transition-delay(.4s);
						}
					}
					.entry-subtitle {
						
					}
				}
				.plus-link {
					opacity: 1;
					.transform(scale(1));
				}
				.dfd-dots-link {
					span {
						opacity: 1;
						.animation(dfdFolioHoverDots .5s ease);
						.transform(scale(1));
						&.dfd-left-dot {
							.transition-delay(.2s);
							.animation-delay(.2s);
						}
						&.dfd-middle-dot {
							.transition-delay(.4s);
							.animation-delay(.4s);
						}
						&.dfd-right-dot {
							.transition-delay(.6s);
							.animation-delay(.6s);
						}
					}
				}
				.dfd-hover-buttons-wrap {
					> * {
						&:nth-child(1) {
							.transition-delay(.2s);
						}
						&:nth-child(2) {
							.transition-delay(.4s);
						}
						&:nth-child(3) {
							.transition-delay(.6s);
						}
						opacity: 1;
						.scale(1);
					}
				}
			}
		}
	}
}