/* ====================== [ Start Work ] ====================== */

.works{

	&.filter-img{

		.filtering{
			overflow: hidden;
			
			.filter{

				span{
					margin-right: 20px;
					font-size: 13px;

					&.active{
						color: $main-color;
					}
				}

				&.floating{
					float: right;
				}
			}
		}
	}

	&.three-col{

		.container {
			max-width: 1300px;
		}

		.row{
			margin-left: -10px;
			margin-right: -10px;
		}

		.items{
			margin-top: 40px;
			padding: 0 20px;
		}
	}

	&.four-col{

		.row{
			margin-left: -15px;
			margin-right: -15px;
		}

		.items{
			margin-top: 30px;
			padding: 0 15px;
		}
	}

	.row{
		margin-left: -50px;
		margin-right: -50px;
	}

	.items{
		margin-top: 100px;
		padding: 0 50px;
	}

	.item{
		position: relative;

		&:hover{

			&:after,
			.cont{
				opacity: 1;
			}
		}

		&:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.05));
			opacity: 0;
			transition: all .4s;
		}

		.cont{
			position: absolute;
			bottom: 40px;
			left: 40px;
			z-index: 2;
			opacity: 0;
			transition: all .4s;

			&.vis{
				bottom: -1px;
				left: -1px;
				padding: 15px 30px;
				padding-left: 15px;
				background: #272727;
				opacity: 1;
			}

			h5{
				font-size: 17px;
			}

			span{
				margin-right: 15px;
				font-size: 13px;
				color: $main-color;
			}
		}
	}
}

.portfolio{
	overflow: hidden;
	position: relative;

	.swiper-container{
		width: 140%;
	}


	.swiper-slide {
		width: 45%;
	}

	.swiper-slide:nth-child(2n) {
		width: 38%;
	}

	.swiper-slide:nth-child(3n) {
		width: 25%;
	}

	.swiper-slide-active{

		.item{

			.cont{
				opacity: 1;
			}
		}
	}

	.item{
		position: relative;

		.img{
			height: 65vh;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
			}
		}

		.cont{
			position: absolute;
			bottom: -1px;
			left: -1px;
			padding: 15px 30px;
			background: #181818;
			opacity: 0;
			transition: opacity .5s;

			h5{
				font-size: 20px;
			}

			span{
				margin-right: 15px;
				font-size: 13px;
				color: $main-color;
			}
		}
	}

	.controls{
		position: absolute;
		top: 10px;
		right: 100px;

		.swiper-nav-ctrl{
			color: #ccc;
			font-size: 13px;
			width: 55px;
			height: 55px;
			line-height: 55px;
			text-align: center;
			margin: 5px 0;
			border: 1px solid rgba(255,255,255, .3);
			position: static;
			display: inline-block;

			&:after{
				display: none;
			}
		}
	}
}

.portfolio.full-bg {
	position: relative;

	.cluom{
		height: 70vh;
		min-height: 300px;
		padding: 0;
		position: relative;
		z-index: 2;
		border-right: 1px solid rgba(255,255,255,.3);
		transition: all .4s;

		&.current{
			background: rgba(0,0,0,.3);
		}

		&:hover{

			.info{
				color: inherit;

				&:after{
					height: 100%;
				}
			}

			.more{
				transform: translateY(0);
				opacity: 1;
			}
		}
		
		.info{
			padding: 40px 10px 40px 20px;
			color: #fff;
			position: relative;
			z-index: 2;
			transition: all .4s;
			overflow: hidden;

			&:after{
				content: '';
				position: absolute;
				top: 0;
				left: -2%;
				width: 104%;
				height: 0;
				background: #181818;
				z-index: -1;
				transition: all .4s;
			}

			h6{
				font-size: 11px;
				font-weight: 400;
				letter-spacing: 4px;
				text-transform: uppercase;
				margin-bottom: 10px;
			}

			h5{
				font-size: 21px;
			}
		}

		.more{
			position: absolute;
			bottom: 50px;
			right: 50px;
			color: #fff;
			font-size: 13px;
			letter-spacing: 1px;
			text-transform: uppercase;
			transform: translateY(20px);
			opacity: 0;
			transition: all .4s;

			i{
				font-size: 10px;
				margin-left: 2px;
			}
		}
	}

	.glry-img,
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.glry-img{
		overflow: hidden;

		.bg-img{
			transform: scale(1.1,1.1);
			opacity: 0;
			transition: all .7s;
			background-size: cover;
			background-position: center center;

			&.current{
				transform: scale(1);
				opacity: 1;
			}
		}
	}
}

.index3{
	.works .item .cont.vis{
		background: #181818;
	}
}

.work-header{
	
	min-height: 65vh;
	background-size: auto;
	background-repeat: repeat;

	.cont{
		margin-top: 100px;

		h2{
			letter-spacing: 2px;
			margin-bottom: 30px;
		}
	}
}

/* ====================== [ End Work ] ====================== */