.page-template-portfolio-fullscreen-type-hover-02 {
	background: #000;

	.page-content {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		height: 100vh;
	}

	&.admin-bar {
		.page-content {
			height: calc(100vh - 32px);
		}
	}

	.portfolio-hover-type-wrap {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.post-thumbnail-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30px;
		transition: all .5s;
		opacity: 0;
		z-index: -1;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			/*position: absolute;
			top: 50%;
			left: 50%;*/
			transition: all 1s;
			transform: scale(.9, .9);
		}

		&.active {
			z-index: 1;
			opacity: 1;

			img {
				transform: scale(1, 1);
			}
		}
	}

	.portfolio-list {
		position: relative;
		z-index: 1;
	}

	.post-title {
		@extend %transit;
		font-size: 80px;
		line-height: 1.4;
		color: rgba(255, 255, 255, .3);
		margin-bottom: 0;
	}

	.post-order {
		font-size: 18px;
		vertical-align: middle;
		margin-right: 20px;
	}

	.portfolio-list {
		padding: 80px 30px;
		text-align: center;
	}

	.portfolio {
		display: inline-block;
		padding: 20px;

		&.active {
			.post-title {
				color: #fff;
			}
		}
	}
}

@include media-breakpoint-down(lg) {
	.page-template-portfolio-fullscreen-type-hover-02  {
		.post-title {
			font-size: 60px;
		}
	}
}

@include media-breakpoint-down(md) {
	.page-template-portfolio-fullscreen-type-hover-02  {
		.post-title {
			font-size: 40px;
		}
	}
}


@include media-breakpoint-down(sm) {
	.page-template-portfolio-fullscreen-type-hover-02  {
		.portfolio-list{
			padding-left: 0;
			padding-right: 0;
		}
		.post-title {
			font-size: 32px;
			line-height: 1.2;
		}
	}
}
