finlabsindia/wp-content/themes/vamtam-consulting/vamtam/assets/css/shortcodes/portfolios.less

.jetpack-portfolio .page-content .limit-wrapper {
	max-width: inherit;
	padding: 0;
}
.portfolios {
	position: relative;
	padding: 0;
	margin: 0;

	.vamtam-cubeportfolio:not(.vamtam-cube-loaded) {
		.portfolio-image,
		.portfolio_details {
			display: none;
		}
	}

	.wp-pagenavi {
		margin-top: 30px !important;
	}

	.portfolio-items {
		clear: both;
	}

	&.has-gap {
		.portfolio-item-wrapper,
		.portfolio-item-wrapper .portfolio-image,
		.portfolio-item-wrapper .portfolio-image .vamtam-responsive-wrapper {
			border-radius: var( --vamtam-border-radius );
			overflow: hidden;
		}
	}

	.portfolio-item-wrapper {
		overflow: hidden;
		border: 0;
		border: none;
		background: var( --vamtam-default-bg-color );
		background-clip: content-box;
		text-align: left;
		display: flex;
		flex-direction: column-reverse;

		.portfolio_details {
			transform-style: preserve-3d;
			height: 100%;
			width: 100%;
			position: absolute;
			color: var( --vamtam-accent-color-5 );
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			text-align: center;
			z-index: 10;

			a {
				height: 100%;
				z-index: 5;
				align-content: center;
				display: flex;
				flex-direction: row;
				border: none;
			}

			.title {
			    margin-top: 0;
				margin-bottom: 	0.2em;
				font-size: var( --vamtam-h2-font-size );
				line-height: var( --vamtam-h2-font-size );
				font-weight: 500;
				color: var( --vamtam-accent-color-5 );
				display: inline-block;
				transition: color 0.35s;
				width: 100%;
				flex: 1;
			}

			.excerpt {
				margin: 0;
				color: var( --vamtam-accent-color-5 );
				line-height: 1.2em;
				margin: auto;
				display: inline-block;
				flex: 1;
			}

			.link-read-more {
				margin-top: 10px;
				.vamtam-font(h5-);
				font-size: var( --vamtam-primary-font-font-size );
				display: none;
			}

			.text-wrapper {
				width: 100%;
				z-index: 2;
				align-content: center;
			}
		}

		.portfolio-image {
			max-height: none !important;
			background: var( --vamtam-accent-color-6 );
			position: relative;
			overflow: hidden;
			flex: 1;
			order: 2;

			> a {
				position: relative;
				display: block;
				border: none;
			}

			> a .vamtam-responsive-wrapper img,
			> .vamtam-responsive-wrapper img {
				width: 100%;
				transition: opacity 0.50s, transform 1.20s;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				transform: scale(1.01);
				border: none;
			}

			.cbp-slider-wrapper img {
				transition: all .50s ease;
			}
		}
	}
	.hover-animation-1 {
		.portfolio_details {
			a {
				align-items: center;
			}

			.title {
				transition: opacity 0.40s, transform 0.40s;
				transform: translate(0,30px);
				padding: 0 5%;
				opacity: 0;

				&:hover {
					opacity: 0.7;
				}
			}

			.excerpt {
				padding: 0 10%;
				transition: opacity 0.50s, transform 0.50s;
				transform: translate(0,20px) scale(0.9);
				opacity: 0;
				color: var( --vamtam-accent-color-5 );
			}
		}
	}

	.hover-animation-2 {
		.portfolio_details {
			a {
				align-items: center;
			}

			.title {
				color: var( --vamtam-body-link-regular );
				transition: opacity 0.40s, transform 0.40s, color 0.40s;
				transform: translate(0,20px) scale(1.2);
			    padding: 0 5%;
			    opacity: 0;

			    &:hover {
				    opacity: 1;
				    color: var( --vamtam-accent-color-1 );
			    }
			}

			.excerpt {
				transition: opacity 0.50s, transform 0.50s;
				transform: translate(0,40px) scale(1.2);
			    padding: 0 3em;
				color: var( --vamtam-primary-font-color );
				opacity: 0;
			}
		}
		.portfolio-image {
			background: var( --vamtam-accent-color-5 );

			> a .vamtam-responsive-wrapper img,
			> .vamtam-responsive-wrapper img {
				transform: scale(1.1);
				opacity: 1;
			}
			.cbp-slider-wrapper img {
				opacity: 1;
			}
		}
	}

	.hover-animation-3 {
		.portfolio_details {
			.title {
				margin-bottom: 0;
				font-size: 24px;
				line-height: 1.5em;
				color: var( --vamtam-body-link-regular );

				&:hover {
				    opacity: 1;
				    color: var( --vamtam-accent-color-1 );
			    }
			}

			.excerpt {
				color: var( --vamtam-primary-font-color );
				padding: 0;
				opacity: 1;
			}

			.text-wrapper {
				display: block;
				position: absolute;
				transform: translateY(200%);
				bottom: 0;
				background: var( --vamtam-accent-color-5 );
				padding: 20px 10px 20px 10px;
				transition: transform 0.3s ease-out;
			}
			.portfolio-image {
				> a .vamtam-responsive-wrapper img,
				> .vamtam-responsive-wrapper img {
					transition: 1.0s;
				}
			}
		}
	}

	.hover-animation-4 {
		.portfolio_details {
			height: auto;
			position: relative;
			color: inherit;
			text-align: left;

			.title {
				opacity: 1;
				color: inherit;
				font-size: 24px;
				border-bottom: solid 1px var( --vamtam-default-line-color );
				padding-bottom: 5px;
				margin-bottom: 10px;
				padding-right: 50px;
			}

			.excerpt {
				color: inherit;
				opacity: 1;
				.vamtam-font(primary-font-)
			}

			a:hover .excerpt {
				color: var( --vamtam-primary-font-color );
			}

			.link-read-more {
				display: inline-block;
			}

			.lightbox-wrapper {
				position: absolute;
				top: 9px;
				right: 10px;
				z-index: 10;

				a {
					padding: 5px;
				}
			}
		}
		.portfolio-image {
			margin-bottom: 5px;
		}
	}

	.no-title.no-description .portfolio-item-wrapper {
		border: 0;
	}

	.state-open {
		&.hover-animation-1,
		&.hover-animation-2 {
			.title, .excerpt {
				transform: translate(0, 0);
				opacity: 1;
			}
		}

		&.hover-animation-1 {
			.portfolio-image {
				> a .vamtam-responsive-wrapper img,
				> .vamtam-responsive-wrapper img {
					opacity: 0.4;
					transform: scale(1.10);
				}

				.cbp-slider-wrapper img {
					opacity: 0.2;
				}
			}

			.portfolio_details {
				transform: scale( 1 );

				&:before,
				&:after {
					opacity: 0;
					transform: scale(1);
				}
			}
		}

		&.hover-animation-2 {
			.portfolio-image {
				> a .vamtam-responsive-wrapper img,
				> .vamtam-responsive-wrapper img,
				.cbp-slider-wrapper img {
					transform: scale(1);
					opacity: 0;
				}
			}
		}

		&.hover-animation-3 {
			.portfolio-image {
				> a .vamtam-responsive-wrapper img,
				> .vamtam-responsive-wrapper img,
				.cbp-slider-wrapper img  {
					transform: translate(0, -10px) scale(1.1);
				}
			}

			&.no-title.no-description {
				.portfolio-image {
					> a .vamtam-responsive-wrapper img,
					> .vamtam-responsive-wrapper img {
						transform: translate(0, -10px) scale(1.06);
					}
				}
			}

			.text-wrapper {
				transform: translateY(0%);
			}
		}

		&.hover-animation-4 {
			.portfolio-image {
				> a .vamtam-responsive-wrapper img,
				> .vamtam-responsive-wrapper img {
					transform: scale(1.10);
				}
			}
		}
	}
}

.portfolio-filters {
	z-index: 6;
	text-align: center;
	margin-bottom: 30px;
	padding-top: 10px;

	.inner-wrapper {
		display: inline-block;
		text-align: center;
		line-height: 35px;
		margin-bottom: -1px;

		.cbp-filter-item {
			display: inline-block;
			margin: 0 .5em;
			color: var( --vamtam-accent-color-2 );
			font-family: var( --vamtam-primary-font-font-family );
			transition: all .3s;
			line-height: normal;
			cursor: pointer;
			border: none;
			font-size: 16px;
			font-weight: bold;
			padding: 0;
			text-align: center;

			&:hover{
				color: var( --vamtam-body-link-hover );
			}
			&.cbp-filter-item-active  {
				color: var( --vamtam-body-link-hover );
				text-decoration: line-through;
			}
		}
	}

	header.page-header & {
		padding-bottom: 10px;

		&.portfolio-filters {
			padding: 0;
		}

		.cbp-filter-item:first-child {
			margin-left: 0;
			padding-left: 0;
		}
	}

	.cbp-search {
		display: inline-block;
		margin-top: 15px;

		&:hover .cbp-search-icon {
			opacity: 1;
		}

		.cbp-search-icon {
			opacity: 0;
			transition: opacity .5s ease-out;
		}

		.cbp-search-input {
			font-size: 12px;
			margin: 0;
			font-family: var( --vamtam-primary-font-color );
			border-color: transparent;
			transition: all .5s ease-out;
			text-align: center;
			padding: 5px;

			&:hover {
				border-color: rgba(0, 0, 0, 0.1);
				color: var( --vamtam-accent-color-6 );
			}
		}
	}

	.cbp-l-filters-alignCenter .cbp-filter-counter {
		background-color: var( --vamtam-accent-color-1 );
		color: var( --vamtam-accent-color-5 );
		font-size: 11px;
		font-weight: bold;

		&:after {
			border-top-color: var( --vamtam-accent-color-1 ) !important;
		}
	}
}

.portfolios.scroll-x {
	.portfolio-items {
		.vamtam-project {
			&.has-title.no-description {
				margin-bottom: 20px !important;
			}
		}
	}
}

article.type-jetpack-portfolio {
	&.left-right,
	&.right-only {
		.portfolio-text-content .portfolio-content {
			> .project-meta {
				margin-top: 0;
			}
		}
	}

	.project-main-content {
		margin: auto;
	}

	.client-logo {
		text-align: center;
		height: auto;
		z-index: 999;
		margin-top: -80px;
		position: relative;

		span{
			background: var( --vamtam-accent-color-5 );
			width: 110px;
			height: 110px;
			border-radius: 100%;
			display: block;
			margin: auto;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 60%;
		}
	}

	&.video .client-logo{
		position: relative;
		padding: 1% 2% 0% 2%;
	}

	.portfolio-text-content {
		.portfolio-content {
			margin: 0;
			margin-bottom: 0;

			> .project-meta {
				position: relative;
				padding-top: 40px;
				text-align: center;

				p.posted_in {
					margin: 0;
					a {
						font-family: var( --vamtam-additional-font-1-font-family );
						font-size: 24px;
						line-height: initial;
						display: inline-block;
						margin: 0 5px;

						&:hover {
							color: var( --vamtam-body-link-hover );
						}

						&:after {
							content: ",";
						}

						&:last-child {
							&:after {
								display: none;
							}
						}
					}
				}
				.meta-top {
					padding-top: 10px;
					padding-bottom: 40px;
					color: var( --vamtam-accent-color-3 );
					font-size: 14px;
				}
			}
			.tagged_as {
				text-align: center;
				padding-top: 40px;

				span.icon {
					width: auto;
					display: inline-block;
					padding-right: 5px;
					margin: 10px 0 12px 0;
					color: var( --vamtam-accent-color-3 );
				    font-size: 18px;
			        vertical-align: middle;
				}

				a {
					display: inline-block;
					margin: 0 5px 5px 5px;
					font-size: var( --vamtam-primary-font-font-size );
					font-family: var( --vamtam-primary-font-font-family );
					transition: all .3s ease;
					color: var( --vamtam-accent-color-3 );

					&:hover {
						color: var( --vamtam-body-link-hover );
					}
				}
			}
		}

		img {
			max-width: 100%;
		}
	}
}
.archive .portfolio_details .lightbox-wrapper {
	display: none;
}