/* ------------------------------------------------------------- *
 * Portfolio grid
/* ------------------------------------------------------------- */



/* Portfolio grid item image 
============================= */
.pgi-image-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1;
	line-height: 1;
}
.pgi-image-holder {
}
.pgi-image-inner {
}
.pgi-image {
	position: relative;
}
.pgi-image img {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0.8;
}

/* video */
.pgi-video-wrap {
	position: relative;
}
video.pgi-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Portfolio grid item caption 
=============================== */
.pgi-caption {
	width: 100%;
	max-width: 1200px;
	padding: 20px 3% 0px 3%;
}
.tt-grid.ttgr-gap-3 .pgi-caption,
.tt-grid.ttgr-gap-4 .pgi-caption,
.tt-grid.ttgr-gap-5 .pgi-caption,
.tt-grid.ttgr-gap-6 .pgi-caption {
	padding-left: 0;
	padding-right: 0;
}

.pgi-caption-inner {
}

/* Portfolio grid item title */
.pgi-title {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: clamp(28px, 4vw, 64px);
	font-weight: bold;
	font-weight: 600;
	color: #FFF !important;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.pgi-title {
		font-size: calc(19px + 1.5vw);
	}
}

/* Portfolio grid item title hover (no effect if "pgi-cap-inside" enabled!) */
#portfolio-grid:not(.pgi-cap-inside) .pgi-title a {
	display: inline;
}
#portfolio-grid:not(.pgi-cap-inside) .pgi-title a {
	background-repeat: no-repeat;
	background-image: -o-linear-gradient(transparent calc(100% - 2px),currentColor 2px);
	background-image: linear-gradient(transparent calc(100% - 2px),currentColor 2px);
	background-image: -ms-linear-gradient(transparent 96%,currentColor 2px);
	transition: 0.5s cubic-bezier(.215,.61,.355,1);
	background-size: 0 96%;
}
#portfolio-grid:not(.pgi-cap-inside) .pgi-title a:hover {
	background-size: 100% 96%;
}


/* Portfolio grid item categories */
.pgi-categories-wrap {
	position: relative;
	margin-top: 8px;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1.2;
}
.pgi-category {
	position: relative;
	display: inline-block;
	font-size: calc(13px + 0.1vw);
	color: #FFF;
	opacity: .6;
}
.pgi-category ~ .pgi-category {
	margin-left: -4px;
}
.pgi-category ~ .pgi-category:not(:empty)::before {
	content: ", ";
}
.pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category {
	visibility: hidden;
	width: 0;
}
.pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category {
	display: none;
}
.pgi-category + .pgi-category + .pgi-category + .pgi-category::before {
	content: "...";
	margin-left: 5px;
	visibility: visible;
}


/* Portfolio grid item caption sizes 
===================================== */
@media (min-width: 768px) {
	.ttgr-layout-2 .pgi-title,
	.ttgr-layout-1-2 .pgi-title,
	.ttgr-layout-2-1 .pgi-title,
	.ttgr-layout-creative-1 .pgi-title,
	.ttgr-layout-creative-2 .pgi-title {
		font-size: calc(17px + 0.4vw);
	}

	.ttgr-layout-3 .pgi-title,
	.ttgr-layout-2-3 .pgi-title,
	.ttgr-layout-3-2 .pgi-title {
		font-size: calc(17px + 0.2vw);
	}

	.ttgr-layout-4 .pgi-title,
	.ttgr-layout-3-4 .pgi-title,
	.ttgr-layout-4-3 .pgi-title {
		font-size: calc(17px + 0.1vw);
	}


	body.tt-boxed .tt-wrap .ttgr-layout-2 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-1-2 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-2-1 .pgi-title {
		font-size: calc(17px + 0.2vw);
	}

	body.tt-boxed .tt-wrap .ttgr-layout-3 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-2-3 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-3-2 .pgi-title {
		font-size: calc(17px + 0.1vw);
	}

	body.tt-boxed .tt-wrap .ttgr-layout-4 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-3-4 .pgi-title,
	body.tt-boxed .tt-wrap .ttgr-layout-4-3 .pgi-title {
		font-size: calc(17px + 0.1vw);
	}
}


/* Portfolio grid item caption positions 
========================================= */
/* Position inside */
#portfolio-grid.pgi-cap-inside .pgi-caption {
	position: absolute;
	left: 0;
	bottom: 8%;
	padding: 0 8%;
	z-index: 2;
}
#portfolio-grid.pgi-cap-inside .pgi-category {
	opacity: 1;
}

/* Position center */
#portfolio-grid.pgi-cap-center .pgi-caption {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#portfolio-grid.pgi-cap-center .pgi-caption-inner {
	text-align: center;
}
#portfolio-grid.pgi-cap-inside.pgi-cap-center .pgi-caption {
	left: 50%;
	bottom: 50%;
	transform: translate(-50%, 50%) !important;
}


/* Portfolio grid item caption styles 
====================================== */
/* If light image used (effect only if "pgi-cap-inside" enabled) */
#portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-title {
	color: #111;
}
#portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-category {
	color: #111;
}
#portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-image-holder[class*="cover-opacity-"]::before {
	display: none !important;
}


/* Portfolio grid item hover 
============================= */

/* Clip path (effect only with gaps) */
@media (min-width: 768px) {
	#portfolio-grid.pgi-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .pgi-image-holder {
		clip-path: inset(0 0 0 0);
		overflow: hidden;
		transition: clip-path 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96);
	}
	#portfolio-grid.pgi-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .pgi-image-wrap:hover .pgi-image-holder {
		clip-path: inset(3% 3% 3% 3%);
	}

	/* Image zoom */
	#portfolio-grid.pgi-hover .pgi-image {
		transition: all 1s cubic-bezier(.165,.84,.44,1);
	}
	#portfolio-grid.pgi-hover .pgi-image-wrap:hover .pgi-image {
		transform: scale(1.05);
	}
}

/* Caption hover */
body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .pgi-title {
	transform: translate3d(0, 15px, 0);
	transition: all 0.25s ease-out;
	transition-delay: 0.1s;
}
body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .portfolio-grid-item:hover .pgi-title {
	transform: translate3d(0, 0, 0);
}

body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .pgi-categories-wrap {
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 20px, 0);
	transition: all 0.25s ease-out;
	transition-delay: 0.1s;
}
body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .portfolio-grid-item:hover .pgi-categories-wrap {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}


/* ------------------------------------------------------------- *
 * Portfolio List
/* ------------------------------------------------------------- */

.portfolio-list {
	position: relative;
}


/* Portfolio list item 
======================= */
.portfolio-list-item {
	position: relative;
	display: block;
	margin-left: 35%;
	margin-right: 17%;
	margin-bottom: 12%;
}
.portfolio-list-item:last-child {
	margin-bottom: 0;
}
@media (max-width: 1024px) {
	.portfolio-list-item {
		margin-left: 32%;
		margin-right: 5%;
	}
}
@media (max-width: 768px) {
	.portfolio-list-item {
		margin-left: 5%;
		margin-right: 5%;
	}
}

/* Portfolio list item image */
.pli-image,
.pli-video {
	position: relative;
	z-index: 2;
}
.pli-image img {
}

@media (max-width: 768px) {
	.pli-image[class*="cover-opacity-"]::before,
	.pli-video[class*="cover-opacity-"]::before {
		display: none !important;
	}
}

/* Portfolio list item image cropped */
.portfolio-list.pli-cropped .pli-image img,
.pli-video video {
	width: 100%;
	height: 32vw;
	object-fit: cover;
	object-position: 50% 50%;
}
@media (max-width: 1024px) {
	.portfolio-list.pli-cropped .pli-image img,
	.pli-video video {
		height: 45vw;
	}
}
@media (max-width: 768px) {
	.portfolio-list.pli-cropped .pli-image img,
	.pli-video video {
		height: 60vw;
	}
}