.penci-image-box {
	.penci-featured-ct {
		display: inline-block;
		margin-bottom: 20px;

		.penci-fea-in {
			height: 320px;
			position: relative;
			overflow: hidden;

			&:before, &:after {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 5px;
				bottom: 5px;
				content: '';
				opacity: 0;
				-webkit-transition: opacity 0.3s, -webkit-transform 0.4s;
				transition: opacity 0.3s, transform 0.4s;
				z-index: 5;
			}

			&.boxes-style-2 {
				&:before, &:after {
					content: none !important;
					display: none !important;
				}
			}

			&:before {
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				-webkit-transform: scale(0, 1);
				transform: scale(0, 1);
			}

			&:after {
				border-right: 1px solid #fff;
				border-left: 1px solid #fff;
				-webkit-transform: scale(1, 0);
				transform: scale(1, 0);
			}

			&:hover {
				&:before, &:after {
					opacity: 1;
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
		}
	}
	.penci-fea-in {
		.fea-box-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
			z-index: 1;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			&:before {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 2;
				content: "";
				background: #000;
				transition: opacity 0.25s;
				-webkit-transition: opacity 0.25s;
				-moz-transition: opacity 0.25s;
				opacity: 0;
			}
		}
		&:hover .fea-box-img:before {
			opacity: 0.3;
		}
		&.boxes-style-2 .fea-box-img {
			right: 0;
			bottom: 0;
			&:before {
				content: none !important;
				display: none !important;
			}
		}
		h4 {
			position: absolute;
			width: 100%;
			left: 0;
			top: 50%;
			text-align: center;
			z-index: 5;
			font-style: italic;
			letter-spacing: 0;
			font-weight: normal;
			padding: 5px 20px;
			margin-top: -25px;
			> span {
				display: inline-block;
				position: relative;
			}
			span span {
				display: inline-block;
				background: #fff;
				color: #313131;
				padding: 0 15px;
				position: relative;
				min-width: 120px;
				height: 40px;
				line-height: 40px;
				white-space: nowrap;
				-webkit-transition: all .3s ease 0s;
				-moz-transition: all .3s ease 0s;
				-o-transition: all .3s ease 0s;
				transition: all .3s ease 0s;
				font-style: normal;
				font-size: 14px;
				font-weight: normal;
				&:before {
					top: -5px;
					left: -5px;
					right: -5px;
					bottom: -5px;
					content: "";
					display: block;
					background: none;
					position: absolute;
					border: 1px solid #fff;
				}
			}
		}
		&:hover h4 span {
			color: $color__blue;
		}
		&.boxes-style-2 h4 {
			background: #fff;
			padding: 0 20px;
			margin-top: -20px;
			&:before {
				top: -5px;
				left: 0;
				right: 0;
				width: 100%;
				bottom: -5px;
				content: "";
				display: block;
				background: none;
				position: absolute;
				border-top: 1px solid #fff;
				border-bottom: 1px solid #fff;
				-webkit-transition: all .3s ease 0s;
				-moz-transition: all .3s ease 0s;
				-o-transition: all .3s ease 0s;
				transition: all .3s ease 0s;
			}
			span {
				background: none;
				&:before {
					content: none;
					display: none;
				}
			}
		}
		&.boxes-style-3,
		&.boxes-style-4 {
			h4 span span:before, .fea-box-img:before {
				content: none;
			}
		}
	}
	.penci-featured-ct .penci-fea-in.boxes-style-3,
	.penci-featured-ct .penci-fea-in.boxes-style-4 {
		&:before, &:after {
			opacity: 0.4;
			-webkit-transition: all 0.4s;
			transition: all 0.4s;
			z-index: 5;
			transform: none;
			-webkit-transform: none;
			left: 10px;
			right: 10px;
			top: 10px;
			bottom: 10px;
		}
		&:hover {
			&:before, &:after {
				opacity: 1;
			}
		}
	}
	.penci-fea-in.boxes-style-3 {
		.fea-box-img {
			transition: all 0.4s ease-in-out;
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
		}
		&:hover .fea-box-img {
			transform: scale(1.05);
			-webkit-transform: scale(1.05);
			-moz-transform: scale(1.05);
		}
		h4 span span {
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 1px;
			font-weight: bold;
		}
	}

	.penci-fea-in.boxes-style-4 {
		.fea-box-img {
			transition: all 0.4s ease-in-out;
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
		}
		&:hover .fea-box-img {
			transform: scale(1.05);
			-webkit-transform: scale(1.05);
			-moz-transform: scale(1.05);
		}
		h4{
			margin-top: 0;
			transform: translateY(-50%);
		}
		h4 span span {
			background-color: transparent;
			color: $color__white;
			font-weight: 500;
			margin: 0;
			padding: 0;
			font-size: 22px;
			line-height: 1.25;
			height: auto;
		}
	}

	&.penci-ibox-disspace {
		.penci-row {
			margin-left: 0;
			margin-right: 0;
		}

		.penci-featured-ct {
			padding-left: 0;
			padding-right: 0;
			margin-bottom: 0;
		}
	}
}

@media ( max-width: 991px ) and ( min-width: 600px ) {
	.penci-image-box .penci-featured-ct {
		&.penci-col-3,
		&.penci-col-4,
		&.penci-col-5,
		&.penci-col-6 {
			width: 50%;
			float: left;
		}
	}
}

@media ( max-width: 480px ) {
	.penci-image-box .penci-featured-ct {
		width: 100%;
	}

}