/*--------------------------------------------------
	Fit Thumb Screen Temporary Clonw Wrapper
---------------------------------------------------*/
	
	#thumb-clone {
		position: fixed;
		width: 100%;
		height: calc(100 * var(--dvh, 1vh));
		left: 0;		
		bottom: 0;
		z-index: 100;
		pointer-events: none;
	}

	#thumb-clone-wrapper {
		position: absolute;
		width: 100%;
		height: calc(100 * var(--dvh, 1vh));
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 120px 20px;
		margin: 0 auto;
		box-sizing: border-box;
		z-index: 10;
	}

	#thumb-clone-wrapper.temporary-position {
		align-items: center; /* Vertical */
		justify-content: center; /* Horizontal */
	}

	#thumb-clone-bg {
		position: fixed;
		width: 100%;
		height: calc(100 * var(--dvh, 1vh));
		top:0;
		display: block;
		background-color: #000;
		opacity: 1;
		transform: scaleY(0);
		transform-origin: top;
		z-index: 0;
	}

	#thumb-clone-bg.end-position {
		transform-origin: bottom;
	}

	#thumb-clone-wrapper .item-media {
		width: 40%;
		height: auto;
		aspect-ratio: unset;
		position: absolute;
	}

	#thumb-clone-wrapper .item-media::before {
		float: left;
		padding-top: 60%;
		content: "";
	}

	.load-project-thumb-with-cover #clapat-header {
		opacity: 0;
	}

/*--------------------------------------------------
	Portfolio Filters
---------------------------------------------------*/
	
	#filters-wrapper {
		position: absolute;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;		
		padding-top: 60px;
  		padding-bottom: 280px;
		opacity:0;
		background-color: rgb(200, 200, 200);
		mask-image: linear-gradient(to bottom, rgb(200, 200, 200) 0%, rgb(200, 200, 200) 50%, transparent 100%);
		box-sizing: border-box;	
		pointer-events:none;
		z-index:1000;
	}
	
	#filters {
		text-align:left;
		margin:0;
	}
	
	#filters-wrapper.open-filters #filters {	
		pointer-events:initial;		
	}
	
	#filters li {
		display: inline-block;
		position: relative;
		box-sizing:border-box;
		margin:0 auto;
		padding:0;
		overflow: hidden;
		line-height: inherit;
	}

	#filters li:last-child {
		display: block;
	}
	
	#filters li a {
		display: block;
		position: relative;			
		box-sizing: border-box;
	}
	
	#filters li a.is_active {
		pointer-events:none;	
	}
	
	#filters li a span {
		position: relative;			
		opacity:0.2;
		-webkit-transition: opacity 0.15s ease-out 0s;
		transition: opacity 0.15s ease-out 0s;
	}
	
	#filters li a.is_active span, #filters li:hover a span {
		opacity:1;
	}
	
	#filters li a span::after {
		content: ",";
	}
	
	#filters li:last-child a span::after {
		content: "";
	}
	
	#close-filters {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		pointer-events: initial;
		z-index: 10;
	}


/*--------------------------------------------------
	General Styles For Thumb Content Structure
---------------------------------------------------*/

	.item-content {
		position: absolute;
		width: 100%;
		height: 100%;
		cursor:pointer;
	}

	.item-effects {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow:hidden;
	}
	
	.item-media {
		position:absolute;
		width:100%;
		height:100%;
		overflow:hidden;
	}

	.item-media-wrapper {
		position:absolute;
		width:100%;
		height: 100%;
		background-color: #000;
	}
	
	.item-image {
		position:absolute;
		width:100%;
		height: 100%;
		left: 0;
		top: 0;
		object-position: center; 
		object-fit: cover;
	}


/*--------------------------------------------------
	Portfolio Grid
---------------------------------------------------*/
	
	.showcase-portfolio-wrapper {
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}

	.showcase-portfolio  {
		position: relative;
		width: calc(100% + (2 * var(--thumbs-margins-h)));
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;	
		flex: 0 0 calc(100% + (2 * var(--thumbs-margins-h)));
		row-gap:var(--thumbs-gap-v);
		margin:0 auto;
	}
	
	.showcase-portfolio .clapat-item {
		position:relative;
		width: calc(33.333% - (2 * var(--thumbs-margins-h)));
		height: auto;
		margin-left: var(--thumbs-margins-h);
		margin-right: var(--thumbs-margins-h);
		box-sizing:border-box;
		padding:0px;		
		z-index:10;
	}

	.showcase-portfolio .clapat-item::before {
		float: left;
		padding-top: 70%;
		content: "";
	}

	.showcase-portfolio .item-media-wrapper {
		-webkit-transform:scale(1);
		transform: scale(1);
		-webkit-transition: transform 1.25s cubic-bezier(.19,1,.22,1);
		transition: transform 1.25s cubic-bezier(.19,1,.22,1);
	}
	
	.showcase-portfolio .item-media-wrapper:hover {
		-webkit-transform:scale(1.05);
		transform: scale(1.05);			
	}

	.show-loader .showcase-portfolio .item-media-wrapper {
		-webkit-transform:scale(1);
		transform: scale(1);
	}

	/*-- Portfolio Thumb Caption --*/
	
	.showcase-portfolio .clapat-item .item-caption {		
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
  		justify-content: flex-end;
		left: 0px;
		top: 0;
		padding: 25px 30px;
		box-sizing: border-box;
		pointer-events: none;
		z-index: 10;
		-webkit-transition: all 0.15s ease-out 0s;
		transition: all 0.15s ease-out 0s;
	}
	
	.showcase-portfolio .item-caption .item-title {
		position: relative;
		font-size: 22px;
		line-height: 30px;
		color: #fff;
		overflow:hidden;
		margin-bottom: 0;		
	}
	
	.showcase-portfolio .item-caption .item-title span {
		display: block;
	}
	
	.showcase-portfolio .item-caption .item-cat {
		font-size: 16px;
		line-height: 24px;
		color: #fff;
		z-index:10;
		overflow:hidden;
		opacity:1;
	}
	
	.change-header .item-caption .item-cat {
		color: #000;
	}
	
	.showcase-portfolio .item-caption .item-cat span {
		display: block;
	}
	
	.showcase-portfolio .clapat-item .item-date {
		display: block;
		color: #fff;
		position: absolute;
		top: 20px;
		left: 20px;
		padding: 5px 10px;
		background: #000;
		font-size: 12px;
	}

/*--------------------------------------------------
	Custom Portfolio Grid
---------------------------------------------------*/
	
	.moz .showcase-portfolio {
		padding-bottom: 75px;
	}

	.moz .showcase-portfolio .clapat-item:nth-child(1) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(2) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(3) {
		width: calc(50% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(4) {
		width: calc(70% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(4)::before {
		float: left;
		padding-top: 60%;
		content: "";
	}

	.moz .showcase-portfolio .clapat-item:nth-child(5) {
		width: calc(50% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(6) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(7) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(8) {
		width: calc(65% - (2 * var(--thumbs-margins-h)));
	}

	.moz .showcase-portfolio .clapat-item:nth-child(8)::before {
		float: left;
		padding-top: 60%;
		content: "";
	}

	/*-- Portfolio Shortcode 1 --*/

	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(1) {
		width: calc(50% - (2 * var(--thumbs-margins-h)));		
	}

	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(2) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}

	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(3) {
		width: calc(25% - (2 * var(--thumbs-margins-h)));
	}
	
	/*-- Portfolio Shortcode 2 --*/

	.moz .shortcode-portfolio-2 .showcase-portfolio .clapat-item:nth-child(1) {
		width: calc(65% - (2 * var(--thumbs-margins-h)));
	}

	.moz .shortcode-portfolio-2 .showcase-portfolio .clapat-item::before {
		float: left;
		padding-top: 60%;
		content: "";
	}

	/*-- Portfolio Thumb Caption --*/

	.moz .showcase-portfolio .item-caption {
		height: calc(100% + 75px);
  		padding: 25px 0px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
  		justify-content: space-between;
	}

	.moz .showcase-portfolio .item-caption .item-title {
		font-size: 18px;
		line-height: 30px;
		color: #000;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.moz .showcase-portfolio .clapat-item:hover .item-caption .item-title {
		padding-left:35px;
	}

	.moz .showcase-portfolio .item-caption .item-title::before {
		font: var(--fa-font-solid);
		content: "\f148";
		font-size: 12px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		position: absolute;
		left: -20px;
		top: -15px;
		color: #000;
		pointer-events: none;		
  		-webkit-transform: scale(0.5) rotate(45deg);
		transform:  scale(0.5) rotate(45deg);
		transform-origin: 15px bottom;
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.moz .showcase-portfolio .clapat-item:hover .item-caption .item-title::before {
		opacity:1;		
  		-webkit-transform: scale(1) rotate(90deg);
		transform: scale(1) rotate(90deg);
	}

	.moz .showcase-portfolio .item-caption .item-cat {
		font-size: 18px;
		line-height: 30px;
		color: #000;
		opacity:1;
	}

	.moz .showcase-portfolio .item-caption .item-cat span {
		position: relative;
		width: auto;
		min-width: 100px;
		display: block;		
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.moz .showcase-portfolio .item-caption span::before {
		position: absolute;		
		width: 100%;
		height: 100%;
		top: 100%;
		right: 0;
		content: attr(data-hover);
	}

	.moz .showcase-portfolio .clapat-item:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}


	
/*--------------------------------------------------
	16. Responsive
---------------------------------------------------*/	

@media only screen and (max-width: 1537px) {
	
}
		

@media only screen and (max-width: 1466px) {

}


@media only screen and (max-width: 1024px) {
	
	.showcase-portfolio  {
		justify-content: flex-start;
	}
	
	.showcase-portfolio .clapat-item {
		width: calc(50% - (2 * var(--thumbs-margins-h)));
	}
	
	.showcase-portfolio .section-image {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	
	.showcase-portfolio .item-media-wrapper:hover {
		-webkit-transform:scale(1);
		transform: scale(1);			
	}
	
	.moz .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(50% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .showcase-portfolio .clapat-item:nth-child(n)::before {
		float: left;
		padding-top: 70%;
		content: "";
	}
	
	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(50% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(3) {
		width: calc(100% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(n)::before {
		float: left;
		padding-top: 70%;
		content: "";
	}
	
	.moz .shortcode-portfolio-2 .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(100% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .shortcode-portfolio-2 .showcase-portfolio .clapat-item:nth-child(n)::before {
		float: left;
		padding-top: 70%;
		content: "";
	}
	
}


@media only screen and (max-width: 767px) {	
	
	#filters li {
		display: block;
	}	
	
	.moz .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(100% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .shortcode-portfolio-1 .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(100% - (2 * var(--thumbs-margins-h)));
	}
	
	.moz .shortcode-portfolio-2 .showcase-portfolio .clapat-item:nth-child(n) {
		width: calc(100% - (2 * var(--thumbs-margins-h)));
	}
}


@media only screen and (max-width: 479px) {
	
	.showcase-portfolio .clapat-item {
		width: 100%;
	}
	
}