.portfolio-item {
  height: auto;
  margin-bottom: 3.000rem;
  opacity: 0;
  pointer-events: none; /* Prevent interaction while hidden */
  transform: scale(0.98);
  transition: opacity 300ms ease, transform 300ms ease;
}
.portfolio-item.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.portfolio-item a {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative;
	transition: all 250ms ease;
}
.portfolio-item a .preview {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.portfolio-item .video picture::after {
	border-color: transparent transparent transparent #ffffff;
	border-style: solid;
	border-width: 0.500rem 0 0.500rem 1.000rem;
	content: '';
	position: absolute;
	z-index: 2;
}
.portfolio-item .video picture::before {
	background: rgba(23,35,34,0.75);
	border-radius: 0.325rem;
/*	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);*/
	content: '';
	height: 2.500rem;
	position: absolute;
	width: 4.050rem;
	z-index: 1;
}

/* DETAILS */
.portfolio-item a .details {
	align-content: flex-end;
	align-items: flex-start;
	background: var(--dark-rgba-80);
	color: var(--light);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	left: -100%;
	padding: 1.000rem;
	position: absolute;
	top: 0;
  transition: left 250ms ease;
	width: 100%;
}
.portfolio-item:hover a .details {
	left: 0;
}
.details ul.meta-header {
	margin: 0;
	padding: 0;
}
.details ul.meta-header li {
	display: flex;
	flex-direction: row;
	font-size: 0.850rem;
	justify-content: flex-start;
	line-height: 1.0;
	list-style-type: none;
	margin: 0;
}
.details ul.meta-header li svg {
	height: 0.850rem;
	margin-right: 0.375rem;
	width: 0.850ren;
}
/* DETAILS TYPOGRAPHY */
.portfolio-item a:active,
.portfolio-item a:focus,
.portfolio-item a:hover {
	text-decoration: none;
}
.portfolio-item a .details .meta-header,
.portfolio-item a .details h3,
.portfolio-item a .details p {
	opacity: 0;
	position: relative;
}
.portfolio-item a .details .meta-header {
	left: -5.000rem;
	transition: all 1000ms ease;
}
.portfolio-item a .details .meta-header svg path {
  fill: var(--gray);
}
.portfolio-item a .details h3 {
	left: -2.000rem;
	margin-bottom: 0.250rem;
	transition: all 750ms ease;
}
.portfolio-item a .details p {
	font-size: 0.900rem;
	left: -5.000rem;
	transition: all 750ms ease;
}
.portfolio-item a .details p:last-of-type {
	margin-bottom: 0;
}
.portfolio-item:hover a .details .meta-header,
.portfolio-item:hover a .details h3,
.portfolio-item:hover a .details p {
	left: 0;
	opacity: 100%;
}
.portfolio-item a picture {
	transition: all 500ms ease;
}

/* *** FILTERS *** */
.filters h2 {
    color: var(--dark);
    font-family: 'Sora', sans-serif;
    font-size: 0.900rem;
    font-weight: 800;
    line-height: 1.0;
    margin-bottom: 0.750rem;
}
.filters ul {
	font-size: 0;
	margin: 0;
	padding: 0;
}
.filters ul li {
    background: var(--light);
    border: 0.100rem solid var(--dark);
    color: var(--dark);
    cursor: pointer;
    display: block;
    font-size: 0.800rem;
    line-height: 1.0;
    list-style-type: none;
    margin-bottom: 0.500rem;
    padding: 0.500rem;
    text-decoration: none;
    width: fit-content;
}
.filters ul li:active,
.filters ul li:focus,
.filters ul li:hover,
.filters ul li.active {
	color: var(--light);
}
.filters ul li:hover {
	background: var(--accent-blue);
	border-color: var(--accent-blue);
}
.filters ul li:active,
.filters ul li:focus,
.filters ul li.active {
	background: var(--accent-red);
	border-color: var(--accent-red);
}
/* *** RESPONSIVE *** */
@media only screen and (min-width: 576px) {
	.portfolio-item:hover a picture {
	  filter: grayscale(1);
	}
}
@media only screen and (min-width: 992px) {

}
@media only screen and (max-width: 991px) {
	.filters ul {
		margin-bottom: 3.000rem;
	}
	.filters ul li {
		display: inline-block;
		margin-right: 0.500rem;
	}
}
@media only screen and (max-width: 575px) {
	.filters ul li {
		font-size: 1.000rem;
	}
	#content-wrapper .portfolio-item a { /* need parent ID here to override style.css */
		text-decoration-line: none;
		text-underline-offset: 0;
		text-decoration-thickness: 0;
	}
	.portfolio-item a {
		color: var(--dark);
		flex-direction: column;
		transition: none;
	}
	.portfolio-item a .details,
	.portfolio-item a .details .meta-header {
		background: transparent;
		color: var(--dark);
		left: 0;
		opacity: 1.0;
		padding: 0;
		position: relative;
		transition: none;
	}
	.portfolio-item a .details {
		margin-top: 1.500rem;
	}
	.portfolio-item a .details .meta-header {
		margin-bottom: 1.000rem;
	}
	.portfolio-item a .details h3,
	.portfolio-item a .details p {
		left: 0;
		opacity: 1.0;
		transition: none;
	}
}