// Portfolio Block I
.portfolio-v1{
	position: relative;
	overflow: hidden;
	max-width: 560px;
	margin: 0 auto 30px;
	.bg-overlay{
		content: "";
		position: absolute;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: $theme-color;
		@include opacity(0);
		z-index: 1;
		@include transition(all 0.35s);
	}
	.images{
		position: relative;
		text-align: center;
		.link-image-content{
			display: block;
			&:after{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background: linear-gradient( 0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0,0) 100%);
	         background: -moz-linear-gradient( 0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0,0) 100%);
	         background: -webkit-linear-gradient( 0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0,0) 100%);
	         background: -ms-linear-gradient( 0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0,0) 100%);
	      @include transition(all 0.35s);
			}
			img{
				@include transition(all 0.35s);
			}
		}
	}
	.case-content, .case-content-hover{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1;
		padding: 5px 25px 40px;
		opacity: 1;
		@include transition(all 0.35s);
		.content-inner{
			margin: 0 auto;
			.case-meta{
				font-size: 14px;
				line-height: 18px;
				position: relative;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.8);
				a{
					color: rgba(255, 255, 255, 0.8);
					display: inline-block;
					position: relative;
					&:hover{
						color: $white;
					}
				}
			}
			.title{
				display: block;
				font-size: 24px;
				font-weight: 500;
				margin: 5px 0 15px;
				color: $white;
				a{
					color: $white;
					&:hover{
						text-decoration: underline;
					}
				}
			}
			.desc{
				font-size: 16px;
				color: rgba(255, 255, 255, 0.8);
				margin-bottom: 20px;
				line-height: 28px;
			}
			.link-to-content{
				display: inline-block;
				border-radius: 50%;
				width: 52px;
				height: 52px;
				background: rgba(255, 255, 255, 0.3);
				color: $white;
				font-size: 24px;
				line-height: 54px;
				text-align: center;
				@include transition(all 0.35s);
			}
		}
	}
	.case-content-hover{
		opacity: 0;
		bottom: -50px;
		z-index: 6;
		visibility: hidden;
	}
	&:hover, &:active, &:focus{
		.bg-overlay{
			opacity: 0.96;
			top: 0;
		}
		.case-content{
			opacity: 0;
		}
		.case-content-hover{
			opacity: 1;
			bottom: 0;
			visibility: visible;
			transition: all 500ms ease 500ms;
			.link-to-content{
				background: $white;
				color: $theme-color;
			}
		}
		.images{
			.link-image-content{
				img{
					@include scale(1.1);
				}
			}
		}
	}
}

.swiper{
	.item-active.center{
		.portfolio-v1{
			.bg-overlay{
				opacity: 0.96;
				top: 0;
			}
			.case-content{
				opacity: 0;
			}
			.case-content-hover{
				opacity: 1;
				bottom: 0;
				visibility: visible;
				transition: all 500ms ease 500ms;
				.link-to-content{
					background: $white;
					color: $theme-color;
				}
			}
			.images{
				.link-image-content{
					img{
						@include scale(1.1);
					}
				}
			}	
		}
	}
}

.owl-carousel{
  .portfolio-v1{
	 margin-bottom: 0;
  }
}

// Portfolio Block II
.portfolio-v2{
	position: relative;
	overflow: hidden;
	max-width: 560px;
	margin: 0 auto 30px;
	@include transition(all 0.35s);
	.images{
		position: relative;
		text-align: center;
		.link-image-content{
			img{
				@include transition(all 0.35s);
			}
		}
		.bg-overlay{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: $theme-color-2;
			@include opacity(0);
			z-index: 1;
			@include transition(all 0.35s);
		}
	}
	.case-content{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		background: $white;
		@include transition(all 0.35s);
		&:before {
	    content: "";
	    width: 0;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    background: $theme-color;
	    @include transition(all 0.35s);
	    @include opacity(0);
		}
		.content-inner{
			position: relative;
			padding: 35px 50px;
			@media (max-width:1410px){
				padding: 35px;
			}
			.content-left{
				padding-right: 40px;
				@media (max-width:1410px){
					padding-right: 15px;
				}
				.case-meta{
					font-size: 14px;
					line-height: 18px;
					position: relative;
					font-weight: 500;
					margin-bottom: 5px;
					a{
						color: $body-color;
						position: relative;
						&:hover{
							text-decoration: underline;
						}
					}
				}
				.title{
					display: block;
					font-size: 24px;
					font-weight: 500;
					margin: 0;
					@media (max-width:1410px){
						font-size: 20px;
					}
				}
			}
			.content-right{
				position: absolute;
				right: 0;
				top: 0;
				a{
					display: inline-block;
					width: 41px;
					height: 41px;
					background: #f3f3f3;
					line-height: 41px;
					text-align: center;
					@include transition(all 0.35s);
					&:hover{
						background: $theme-color-2;
					}
				}
			}
		}
	}
	&:hover, &:active, &:focus{
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
		.images{
			.link-image-content{
				img{
					@include scale(1.1);
				}
			}
			.bg-overlay{
				@include opacity(0.7);
			}
			a.link-gallery{
				@include opacity(1);
				margin-top: 0;
			}
		}

		.case-content{
			&:before{
				width: 100%;
				@include opacity(1);
			}
			.content-inner .content-left .case-meta, .content-inner .content-left .case-meta a, .title a{
				color: $white;
			}
			.content-right{
				a{
					background: $theme-color-2;
					color: $white;
				}
			}
		}
	}
}
.item-active.center{
	.portfolio-v2{
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
		.images{
			.link-image-content{
				img{
					@include scale(1.1);
				}
			}
			.bg-overlay{
				@include opacity(0.7);
			}
			a.link-gallery{
				@include opacity(1);
				margin-top: 0;
			}
		}

		.case-content{
			&:before{
				width: 100%;
				@include opacity(1);
			}
			.content-inner .content-left .case-meta, .content-inner .content-left .case-meta a, .title a{
				color: $white;
			}
			.content-right{
				a{
					background: $theme-color-2;
					color: $white;
				}
			}
		}
	}
}
// Portfolio Filter
.portfolio-filter{
	margin-bottom: 30px;
	width: 100%;
	ul.nav-tabs{
		display: inline-block;
		text-align: center;
		overflow: visible;
		border: none;
		width: 100%;
		> li{
			> a{
				font-weight: 400;
				color: $body-color;
				@include transition(all 0.35s);
				padding: 0 15px;
				margin: 0;
				font-size: 18px;
				position: relative;
				z-index: 11;
				display: inline-block;
				@include media-breakpoint-down(xs){
					padding-left: 10px;
					padding-bottom: 5px;
				}
				&:after{
					content: '';
					@include size(3px, 0);
					background: $theme-color;
					position: absolute;
					top: 5px;
					left: 0;
					@include transition(all 0.35s);
					@include opacity(0);
				}
				.count{
					border-radius: 50%;
					z-index: 1;
					position: absolute;
					top: 0px;
					right: 0;
					font-size: 12px;
					color: $theme-color;
					@include transition(all 0.35s);
					@include opacity(0);
				}
				&:hover, &.active{
					color: $theme-color;
					&:after{
						height: 15px;
						@include opacity(1);
					}
					.count{
						top: -10px;
						@include opacity(1);
					}
				}
			}
		}
	}
}

.gva-portfolio-items{
  float: left;
  width: 100%;
}
.gsc-portfolio-carousel{
  &.remove-padding{
	 .init-carousel-owl{
		margin-left: 0!important;
		margin-right: 0!important;
		.owl-item{
		  padding-left: 0!important;
		  padding-right: 0!important;
		}
	 }
  }
}
