@import "../../../../assets/scss/mixin";
.portfolio-tabs{
	.cat-light a{
		color: #fff;
	}
	.cat-dark  a{
		color: #000;
	}
	ul{
		list-style: none;
		padding-right: 0 !important;
		padding-left: 0 !important;
		margin-bottom: 45px !important;
	}
	ul > li{
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;
		&:first-child{
			padding-left: 0;
		}
		&:last-child{
			padding-right: 0;
		}
	}
	ul > li > a.active,
	ul > li > a:hover{
		color: var(--g5-color-accent);
	}
	> select{
		width: 100%;
		margin-bottom: 45px;
	}
}
.portfolio-shortcode{
	overflow: hidden;
	.thumb-wrap > img{
		width: 100%;
		height: auto;
	}

	.portfolio-item-wrap > div[class*=" col-md-"],
	.portfolio-item-wrap > div[class^="col-md-"]{
		padding: 0;
	}

	.portfolio-item-wrap.padding-5{
		margin-left: -5px;
		margin-right: -5px;
		> div[class*=" col-md-"],
		> div[class^="col-md-"]{
			padding: 5px;
		}
	}

	.portfolio-item-wrap.padding-10{
		margin-left: -10px;
		margin-right: -10px;
		> div[class*=" col-md-"],
		> div[class^="col-md-"]{
			padding: 10px;
		}
	}

	.portfolio-item-wrap.padding-15{
		margin-left: -15px;
		margin-right: -15px;
		> div[class*=" col-md-"],
		> div[class^="col-md-"]{
			padding: 15px;
		}
	}

	.portfolio-item-wrap.padding-20{
		margin-left: -20px;
		margin-right: -20px;
		> div[class*=" col-md-"],
		> div[class^="col-md-"]{
			padding: 20px;
		}
	}

	.portfolio-item-wrap{
		.slick-arrow{
			@include transition(all 0.3s);
			display: none;
		}
		.slick-prev{
			left: -40px;
		}
		.slick-next{
			right: -40px;
		}
		&:hover{
			.slick-prev{
				left: 30px;
			}
			.slick-next{
				right: 30px;
			}
		}

	}

	.thumb-wrap{
		position: relative;
	}

	.hover-wrap{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 15px;
		position: absolute;
		opacity: 0;
		@include transition(opacity 0.5s);
		&:hover{
			opacity:1
		}
		&:hover .view-gallery,
		&:hover .title,
		&:hover .category{
			@include transform(translateY(0px));
		}
	}
	.hover-outer{
		width: 100%;
		height: 100%;
		display: table;
	}
	.bg-light .hover-outer{
		background: rgba(255,255,255,0.7);
	}
	.bg-dark .hover-outer{
		background: rgba(0,0,0,0.7);
	}
	.bg-primary-color .hover-outer{
		background: rgba(var(--g5-color-accent-r),var(--g5-color-accent-g),var(--g5-color-accent-b), 0.7);
	}
	.bg-primary-color .hover-wrap:hover{
		.title, .category, .view-gallery{
			color: #fff;
		}
	}
	.bg-light .view-gallery{
		border-color: #000;
	}
	.hover-inner{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.view-gallery{
		border: solid 1px #fff;
		width: 30px;
		height: 30px;
		display: inline-block;
		line-height: 27px;
		@include transition(all 0.5s);
		@include transform(translateY(-50px));
		&:hover{
			background-color: var(--g5-color-accent);
			border-color: var(--g5-color-accent);
			color: #fff;
		}
	}
	.title,
	.category{
		@include transition(all 0.5s);
		@include transform(translateY(50px));
	}

	.select-cat select{
		width: 100%;
	}
	.select-cat i{
		position: absolute;
		right: 40px;
		top: 18px;
		display: none;
	}
	a.view-gallery.onclick{
		border:none !important;
		background-color: transparent !important;
	}
}

@media screen and (max-width: 767px){
	.portfolio-item-wrap.slick{
		margin-top: 30px;
	}
}