/*
Theme Name: Total Child Theme
Theme URI: https://your-site.com
Description: Your site description. Go to Appearance > Editor to modify this file.
Author: Your Name
Author URI: https://your-site.com
Template: Total
Version: 1.0
*/



/** Portfolio **/
.portfolio-box {
	padding: 0;
	transition: transform 0.8s ease-in-out, width 0.5s ease-in-out, opacity 1s ease-in-out;
	opacity: 1;
	overflow: hidden;
}
.portfolio-box.hide {
	transform: translateX(50px);
	opacity: 0;
	max-height: initial;
}
.portfolio-box a {
	text-decoration: none;
	display: grid;
}
.portfolio-image {
	width: 100%;
}
.portfolio-image img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}
.portfolio-title {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	left: 0;
	transition: all 0.25s ease-in-out;
}
.portfolio-title-container {
	display: table;
	width: inherit;
	height: inherit;
}
.portfolio-title-container h3 {
	display: table-cell;
	vertical-align: middle;
	width: inherit;
	height: inherit;
	padding-bottom: 100px;
	transition: all 0.25s ease;
	opacity: 0;
}
.portfolio-image .portfolio-title-container h3 {
	padding-bottom: 0;
	opacity: 1;
}
/* Hover Fade */
.portfolio-title.fade {
	opacity: 0;
}
.portfolio-box:hover .portfolio-title {
	opacity: 1;
}
.portfolio-box:hover .portfolio-title.fade h3 {
	padding: 0;
	opacity: 1;
}
/* Filter */
.portfolio-filters {
	margin-top: -49px;
	z-index: 1000;
	position: relative;
}
.portfolio-filters, .portfolio-filters ul {
	display: flex;
}
.portfolio-filters ul  {
	list-style: none;
	display: flex;
	margin: auto;
}
.portfolio-filters .portfolio-filter {
	display: block;
	padding: 10px 20px;
	color: white;
	text-transform: capitalize;
	text-decoration: none;
	opacity: 0.7;
}
.portfolio-filters ul li:hover .portfolio-filter,
.portfolio-filter.active {
	opacity: 1;
}