// Portfolio Block I
.portfolio-one{
	&__single{
		position: relative;
		max-width: 680px;
		margin: 0 auto 30px;
	}
	&__image{
		position: relative;
		text-align: center;
		z-index: 1;
		border-radius: 8px;
		overflow: hidden;
	}
	&__link{
		display: block;
		&:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: $black;
         transition: all 0.35s;
         opacity: 0;
		}
		img{
			transition: all 0.35s;
		}
	}
	&__content{
		padding: 30px;
		transition: all 0.3s;
		box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.07);
		border-radius: 0 10px 10px 10px;
		position: relative;
		z-index: 9;
		margin-top: -40px;
		margin-right: 30px;
		background: $white;
		@media(max-width: 1024px){
			padding: 20px 15px;
		}
	}
	&__category{
		font-size: 16px;
		line-height: 18px;
		a{
			color: $body-color;
			&:hover{
				color: $theme-color;
				text-decoration: underline;
			}
		}
	}
	&__title{
		display: block;
		font-size: 20px;
		margin: 5px 0 6px;
		@media(max-width: 1024px){
			font-size: 18px;
		}
		a{
			&:hover{
				text-decoration: underline;
			}
		}
	}
	&__arrow{
		width: 50px;
		height: 50px;
		background: $theme-color;
		color: $white;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -25px;
		right: 20px;
		z-index: 9;
		font-size: 14px;
		transition: all 0.5s;
		border-radius: 50%;
	}
	&__single{
		&:hover, &:active, &:focus{
			.portfolio-one{
				&__arrow{
					background: $theme-color-2;
				}
				&__link{
					&:after{
						opacity: 0.5;
					}
				}
			}
		}
	}
}

// Portfolio Filter
.portfolio-filter{
	margin-bottom: 25px;
	width: 100%;
	ul.nav-tabs{
		display: inline-block;
		text-align: center;
		border: none;
		width: 100%;
		> li{
			padding: 5px 8px 0;
			> a{
				font-weight: 500;
				color: $black;
				@include transition(all 0.35s);
				padding: 0;
				font-size: 16px;
				position: relative;
				z-index: 11;
				&:after{
					content: '';
					@include size(0, 2px);
					background: $black;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: -1px;
					transition: all 0.35s;
				}
				.count{
					border-radius: 50%;
					z-index: 1;
					position: absolute;
					top: -20px;
					right: -17px;
					font-size: 12px;
					color: $body-color;
					opacity: 0;
					transition: all 0.35s;
				}
				&:hover, &.active{
					color: $black;
					&:after{
						width: 100%;
					}
					.count{
						top: -10px;
						opacity: 1;
					}
				}
			}
		}
	}
}

.gva-portfolio-items{
  float: left;
  width: 100%;
}
