/* Shortcode:Portfolio Carousel
-------------------------------------------------------------------- */
.mk-portfolio-carousel {
	.mk-fancy-title {
		margin-right: 35px;
		font-weight: bold !important;
		font-size: 14px !important;
		span {
			padding-right: 5px;
		}
	}
	.mk-portfolio-view-all {
		float: right;
		padding: 0 7px;
		font-size: 11px;
	}
	.flex-viewport ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			position: relative;
			padding-right: 15px;
			min-height: 230px;
			&:hover {
				.portfolio-carousel-extra-info {
					z-index: 30;
					.opacity(100);
					.translate(0, 0);
					-webkit-transition-delay: 0.2s;
					transition-delay: 0.2s;
				}
				.portfolio-carousel-overlay {
					.opacity(70);
				}
				.portfolio-carousel-lightbox {
					left: 85px;
					.opacity(100);
				}
				.portfolio-carousel-permalink {
					right: 85px;
					.opacity(100);
				}
				
			}
		}
	}
	.flex-direction-nav a {
		position: absolute;
		top: -37px;
		.mk-jupiter-icon-arrow-left:before,
		.mk-jupiter-icon-arrow-right:before {
			color: #aaaaaa;
		}
	}
	.flex-prev {
		right: 20px;
	}
	.flex-next {
		right: 0px;
	}
}
.mk-portfolio-carousel-thumb {
	position: relative;
	overflow: hidden;
}
.portfolio-carousel-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.opacity(0);
}
.portfolio-carousel-lightbox,
.portfolio-carousel-permalink {
	padding: 5px;
	position: absolute;
	top: 40%;
	width: 32px;
	height: 32px;
	line-height: 32px;
	display: block;
	text-align: center;
	// background-color: rgba(0,
	// 0,
	// 0,
	// 0.5);
	&:hover {
		// background-color: rgba(0, 0, 0, 0.7);
	}
	i {
		color: #fff;
		font-size: 32px;
		line-height: 32px;
		margin-top: -4px;
	}
	.border-radius(2px);
}
.portfolio-carousel-lightbox {
	left: 65px;
	.opacity(0);
}
.portfolio-carousel-permalink {
	right: 65px;
	.opacity(0);
}
.portfolio-carousel-extra-info {
	position: relative;
	z-index: 8;
	margin: -40px 0 0 10px;
	padding: 14px;
	width: 240px;
	background-color: #222;
	text-align: center;
	.translate(0,6px);
	.border-radius(2px);
	.opacity(0);
	-webkit-transition-delay: 0s;
	transition-delay: 0s;

}
.portfolio-carousel-title {
	display: inline-block;
	color: #fff !important;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 8px;
	line-height: 16px !important;
}
.portfolio-carousel-cats {
	display: block;
	letter-spacing: 1px;
	font-size: 11px;
	font-style: italic;
	line-height: 16px;
}

/* Modern Style */
.mk-portfolio-carousel-modern {
	.mk-portfolio-modern-image {
		position: relative;
		img {
			position: relative;
			z-index: 10;
			max-width: 100%;
			width: auto\9;
			height: auto;
			border: 0;
			vertical-align: middle;
			-ms-interpolation-mode: bicubic;
		}
		&:hover {
			.modern-post-type-icon,
			.portfolio-categories {
				.opacity(100);
			}
			.portfolio-modern-meta {
				bottom: 30px;
				.opacity(100);
			}
			.image-hover-overlay {
				.opacity(85);
			}
		}
	}
	.image-hover-overlay {
		z-index: 11;
		background-color: #000 !important;
	}
	.the-title {
		padding: 0 20px;
		color: #fff;
		font-weight: bold;
		font-size: 14px;
		line-height: 18px;
	}
	.portfolio-modern-meta {
		position: absolute;
		bottom: 20px;
		left: 0;
		z-index: 20;
		width: 100%;
		text-align: center;
		text-transform: uppercase;
		.transition(all 0.4s ease-in-out);
		.opacity(0);
	}
	.portfolio-categories {
		padding: 0 20px;
		color: #fff;
		.opacity(0);
		.transition(opacity 0.5s ease-in-out);
	}
	.flex-direction-nav a {
		position: absolute;
		top: 50%;
		margin-top: -27.5px;
		width: 55px;
		height: 55px;
		background-color: rgba(0,
		0,
		0,
		0.4);
		text-align: center;
		line-height: 60px;
		z-index: 20;
		&:hover {
			background-color: rgba(0, 0, 0, 0.6);
		}
		.mk-jupiter-icon-arrow-left:before,
		.mk-jupiter-icon-arrow-right:before {
			color: #fff;
			font-size: 16px;
		}
		&.flex-prev {
			left: 0px;
		}
		&.flex-next {
			right: 0px;
		}
	}
}
.modern-post-type-icon {
	position: absolute;
	display: block;
	z-index: 20;
	top: 30%;
	left: 50%;
	margin-left: -25px;
	.opacity(0);
	text-align: center;
	width: 50px;
	height: 50px;
	line-height: 100px;
	color: #fff;
	i {
		font-size: 48px;
		line-height: 50px;
	}
}