/* 08 - portfolio section - start
==================================================================================================== */

/* portfolio - start */
.portfolio-section {
	.deco-image-1 {
		top: 310px;
		right: -90px;
		max-width: 235px;
	}
	.deco-image-2 {
		bottom: 0px;
		left: -200px;
		max-width: 355px;
	}
}
/* portfolio - end */

/* masonry layout - start */
.portfolio-section {
	.grid {
		margin: 0px;
		.grid-item,
		.grid-sizer {
			width: 33.333%;
		}
		.grid-item {
			padding: 0px;
			&.grid-66 {
				width: 66.666%;
			}

			.portfolio-fullimage {
				display: flex;
				height: 400px;
				overflow: hidden;
				>img {
					object-fit: cover;
				}
			}

			&.big-item {
				.portfolio-fullimage {
					height: 800px;
				}
			}
		}
	}
}
/* masonry layout - end */

/* portfolio fullimage - start */
.portfolio-fullimage {
	position: relative;
	background-color: $default-purple;
	>img {
		width: 100%;
		display: block;
		transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	&:hover {
		>img {
			opacity: .2;
		}
	}

	.item-content {
		top: 50%;
		left: 0px;
		right: 0px;
		z-index: 1;
		color: #ffffff;
		text-align: center;
		position: absolute;
		transform: translateY(-50%);
	}
	.item-title {
		overflow: hidden;
		display: inline-block;
		>a {
			display: block;
			color: #ffffff;
			font-size: 30px;
			font-weight: 600;
			font-family: $heading-font;
			transform: translateY(35px);
			transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
	}
	p {
		overflow: hidden;
		span {
			display: block;
			font-size: 18px;
			font-weight: 600;
			transform: translateY(30px);
			transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
	}

	&:hover {
		.item-title {
			>a {
				transition-delay: .2s;
				transform: translateY(0px);
			}
		}
		p {
			span {
				transition-delay: .4s;
				transform: translateY(0px);
			}
		}
	}
}
/* portfolio fullimage - end */

/* portfolio fullimage - start */
.portfolio-grid {
	overflow: hidden;
	margin-top: 30px;
	position: relative;
	border-radius: 6px;
	background-color: $default-pink;
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: 0px 20px 80px 0px rgba(64, 74, 103, 0.2);
	&:hover {
		transform: translateY(-16px);
	}
	>img {
		transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	&:hover {
		>img {
			opacity: 0.05;
			transition-delay: .2s;
		}
	}
	.title-wrap {
		left: 0px;
		right: 0px;
		bottom: 0px;
		padding: 20px;
		text-align: center;
		position: absolute;
		background-color: #ffffff;
		transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	.item-title {
		font-size: 20px;
		font-family: $body-font;
	}
	.info-text {
		display: block;
		font-size: 16px;
	}
	&:hover {
		.title-wrap {
			bottom: -110px;
			transition-delay: .1s;
		}
	}

	.item-content {
		left: 0px;
		right: 0px;
		bottom: 0px;
		padding: 30px;
		z-index: 1;
		position: absolute;
		.item-title {
			margin-bottom: 20px;
			>a {
				color: #ffffff;
				font-size: 20px;
				font-family: $body-font;
			}
		}
		.btn-text {
			color: #ffffff;
			i {
				color: #ffffff;
			}
		}

		p,
		.btn-text,
		.item-title {
			opacity: 0;
			visibility: hidden;
			transform: translateY(20px);
			transition: $default-transition;
		}
	}

	&:hover {
		.item-content {
			p,
			.btn-text,
			.item-title {
				opacity: 1;
				visibility: visible;
				transform: translateY(0px);
			}
			.item-title {
				transition-delay: .3s;
			}
			p {
				transition-delay: .4s;
			}
			.btn-text {
				transition-delay: .5s;
			}
		}
	}
}
/* portfolio fullimage - end */

/* 08 - portfolio section - end
==================================================================================================== */