/*!
 * Divi Filterable Posts & Pages
 *
 * Scoped port of the Divi 5.13 stylesheets used by the Filterable Portfolio module
 * (filterable_portfolio.css, portfolio.css, overlay.css, css_grid_grid.css), so both
 * modules render identically whether or not Divi's own portfolio assets are loaded.
 * Everything is scoped to `.dfp_filterable_portfolio` (present on both modules).
 */

/* Layout containers ------------------------------------------------------- */

.dfp_filterable_portfolio .et_pb_portfolio_items,
.dfp_filterable_portfolio .et_pb_portfolio_items_wrapper {
	width: 100%;
	position: relative;
}

.dfp_filterable_portfolio .et_grid_module {
	display: grid;
	-moz-column-gap: var(--horizontal-gap);
	column-gap: var(--horizontal-gap);
	row-gap: var(--vertical-gap);
	--flex-direction: column;
	--horizontal-gap: var(--module-gutter-grid, 30px);
	--vertical-gap: var(--module-gutter-grid, 30px);
	--column-count: 1;
	--row-count: auto;
	grid-template-columns: repeat(var(--column-count), 1fr);
	grid-template-rows: repeat(var(--row-count), auto);
}

.dfp_filterable_portfolio .et_flex_module {
	display: flex;
	-moz-column-gap: var(--horizontal-gap);
	column-gap: var(--horizontal-gap);
	row-gap: var(--vertical-gap);
	flex-direction: var(--flex-direction);
	--flex-direction: column;
	--horizontal-gap: var(--module-gutter, 30px);
	--vertical-gap: var(--module-gutter, 30px);
}

.dfp_filterable_portfolio .et_block_module > .et_pb_portfolio_item {
	margin-bottom: 30px;
}

/* Items --------------------------------------------------------------------- */

.dfp_filterable_portfolio .et_pb_portfolio_item {
	position: relative;
	word-wrap: break-word;
	--vertical-gap: 0;
}

.dfp_filterable_portfolio.et_pb_with_border .et_portfolio_image,
.dfp_filterable_portfolio.et_pb_with_border .et_pb_portfolio_item {
	border: 0 solid #333;
}

.dfp_filterable_portfolio .et_portfolio_image {
	position: relative;
	display: block;
}

.dfp_filterable_portfolio .et_portfolio_image img {
	vertical-align: bottom;
	margin-bottom: 0;
}

.dfp_filterable_portfolio .et_grid_module .et_pb_portfolio_item img {
	width: 100%;
}

.dfp_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a,
.dfp_filterable_portfolio .et_pb_portfolio_item .post-meta a {
	text-decoration: none;
}

.dfp_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header {
	margin-top: 10px;
}

/* Meta alignment ------------------------------------------------------------ */

/*
 * Titles wrap to a different number of lines from one item to the next, which
 * would leave the date and the category line sitting at a different height in
 * every card. Laying each item out as a column and letting the title absorb the
 * spare space puts everything below it on a common baseline across the row.
 *
 * Items in a CSS grid row already stretch to a shared height, so this needs no
 * fixed heights and survives any title length.
 */
.dfp_filterable_portfolio .et_grid_module .et_pb_portfolio_item {
	display: flex;
	flex-direction: column;
}

.dfp_filterable_portfolio .et_grid_module .et_pb_portfolio_item .et_pb_module_header {
	flex: 1 0 auto;
}

/* The date and the categories read as one meta block, so keep them tight. */
.dfp_filterable_portfolio .et_pb_portfolio_item .post-meta.published {
	margin: 0;
}

.dfp_filterable_portfolio .et_pb_portfolio_item .post-meta.published + .post-meta {
	margin-top: 2px;
}

.dfp_filterable_portfolio.et_pb_bg_layout_light .et_pb_portfolio_item .post-meta,
.dfp_filterable_portfolio.et_pb_bg_layout_light .et_pb_portfolio_item .post-meta a {
	color: #666;
}

.dfp_filterable_portfolio.et_pb_bg_layout_dark .et_pb_portfolio_item .post-meta,
.dfp_filterable_portfolio.et_pb_bg_layout_dark .et_pb_portfolio_item .post-meta a {
	color: inherit;
}

.dfp_filterable_portfolio .et_pb_portfolio_item.active {
	opacity: 1;
	animation: dfpFadeLeft 1s cubic-bezier(0.77, 0, 0.175, 1) 1;
}

@keyframes dfpFadeLeft {
	0% {
		opacity: 0;
		transform: translateX(-20%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Overlay ------------------------------------------------------------------- */

.dfp_filterable_portfolio .et_overlay {
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: hsla(0, 0%, 100%, 0.9);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

.dfp_filterable_portfolio .et_overlay:before {
	color: #2ea3f2;
	content: "\e050";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	transition: all 0.4s;
	font-family: ETmodules !important;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}

.dfp_filterable_portfolio .et_overlay.et_pb_inline_icon:before {
	content: attr(data-icon);
}

.dfp_filterable_portfolio .et_portfolio_image:hover .et_overlay {
	z-index: 3;
	opacity: 1;
}

.dfp_filterable_portfolio.et_pb_sticky .et_overlay.et_pb_inline_icon_sticky:before {
	content: attr(data-icon-sticky) !important;
}

/* Filters ------------------------------------------------------------------- */

.dfp_filterable_portfolio .et_pb_portfolio_filters {
	clear: both;
	margin: 0 0 40px;
	position: relative;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters ul {
	list-style-type: none !important;
	margin: 0;
	padding: 0;
}

.dfp_filterable_portfolio.et_pb_text_align_center .et_pb_portfolio_filters ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.dfp_filterable_portfolio.et_pb_text_align_justified .et_pb_portfolio_filters ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.dfp_filterable_portfolio.et_pb_text_align_right .et_pb_portfolio_filters ul {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li {
	float: left;
	font-size: 14px;
	line-height: 1em;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li a {
	color: #666;
	padding: 10px 20px;
	border: 1px solid #e2e2e2;
	display: block;
	height: auto;
	overflow: hidden;
	margin: -1px -1px 0 0;
	background-color: #fff;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a {
	border-radius: 3px 0 0 3px;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a {
	border-radius: 0 3px 3px 0;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li a:hover {
	color: #666;
	background-color: #f4f4f4;
}

.dfp_filterable_portfolio .et_pb_portfolio_filters li a.active {
	color: #82c0c7;
	background-color: #f9f9f9;
}

/* Filters inside narrow columns stack vertically on desktop. */
.et_pb_column_1_3 .dfp_filterable_portfolio .et_pb_portfolio_filters li,
.et_pb_column_1_4 .dfp_filterable_portfolio .et_pb_portfolio_filters li,
.et_pb_column_1_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li,
.et_pb_column_1_6 .dfp_filterable_portfolio .et_pb_portfolio_filters li,
.et_pb_column_2_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li,
.et_pb_column_3_8 .dfp_filterable_portfolio .et_pb_portfolio_filters li {
	width: 100%;
}

.et_pb_column_1_3 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a,
.et_pb_column_1_4 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a,
.et_pb_column_1_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a,
.et_pb_column_1_6 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a,
.et_pb_column_2_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a,
.et_pb_column_3_8 .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a {
	border-radius: 3px 3px 0 0;
}

.et_pb_column_1_3 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a,
.et_pb_column_1_4 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a,
.et_pb_column_1_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a,
.et_pb_column_1_6 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a,
.et_pb_column_2_5 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a,
.et_pb_column_3_8 .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a {
	border-radius: 0 0 3px 3px;
}

/* Pagination ---------------------------------------------------------------- */

.dfp_filterable_portfolio .et_pb_portofolio_pagination {
	width: 100%;
	border-top: 1px solid #e2e2e2;
	position: relative;
	margin-top: var(--vertical-gap, 30px);
}

.dfp_filterable_portfolio .et_pb_portofolio_pagination:empty {
	display: none;
}

.dfp_filterable_portfolio .et_pb_portofolio_pagination ul {
	list-style-type: none !important;
	text-align: right;
	margin: 0;
	padding: 0;
}

.dfp_filterable_portfolio .et_pb_portofolio_pagination ul li {
	display: inline-block;
	padding: 10px;
}

.dfp_filterable_portfolio .et_pb_portofolio_pagination ul li a {
	font-size: 16px;
	line-height: 16px;
	color: #999;
	text-decoration: none;
}

.dfp_filterable_portfolio .et_pb_portofolio_pagination ul li a.active {
	color: #82c0c7;
}

.dfp_filterable_portfolio.et_pb_bg_layout_dark .et_pb_portofolio_pagination ul li a {
	color: #fff;
}

.dfp_filterable_portfolio .et_pb_portfolio_items_wrapper.no_pagination {
	border-bottom: none;
}

.dfp_filterable_portfolio.et_pb_text_align_left .et_pb_portofolio_pagination ul {
	text-align: left;
}

.dfp_filterable_portfolio.et_pb_text_align_center .et_pb_portofolio_pagination ul {
	text-align: center;
}

.dfp_filterable_portfolio.et_pb_text_align_right .et_pb_portofolio_pagination ul {
	text-align: right;
}

.dfp_filterable_portfolio.et_pb_text_align_justified .et_pb_portofolio_pagination ul {
	text-align: justify;
}

/* Desktop ------------------------------------------------------------------- */

@media (min-width: 981px) {
	.dfp_filterable_portfolio .et_grid_module .et_pb_portfolio_item .et_pb_module_header {
		word-wrap: break-word;
		margin: 10px 0 0;
		padding-bottom: 0;
	}

	.dfp_filterable_portfolio .et_grid_module .et_pb_portfolio_item h2 {
		font-size: 18px;
	}

	.dfp_filterable_portfolio .et_pb_portfolio_item .post-meta {
		font-size: 14px;
		margin: 0.4em 0 0;
	}
}

/* Tablet -------------------------------------------------------------------- */

@media (max-width: 980px) {
	.dfp_filterable_portfolio .et_overlay.et_pb_inline_icon_tablet:before {
		content: attr(data-icon-tablet);
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li {
		width: auto;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li a {
		width: auto;
		border-radius: 0;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a {
		border-radius: 3px 0 0 3px;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child a {
		border-radius: 0 3px 3px 0;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_tablet .et_pb_portfolio_item .post-meta,
	.dfp_filterable_portfolio.et_pb_bg_layout_light_tablet .et_pb_portfolio_item .post-meta a {
		color: #666;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_dark_tablet .et_pb_portfolio_item .post-meta,
	.dfp_filterable_portfolio.et_pb_bg_layout_dark_tablet .et_pb_portfolio_item .post-meta a {
		color: inherit;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_tablet .et_pb_portofolio_pagination ul li a {
		color: #999;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_tablet .et_pb_portofolio_pagination ul li a.active {
		color: #82c0c7;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_dark_tablet .et_pb_portofolio_pagination ul li a {
		color: #fff;
	}

	.dfp_filterable_portfolio.et_pb_text_align_left-tablet .et_pb_portofolio_pagination ul {
		text-align: left;
	}

	.dfp_filterable_portfolio.et_pb_text_align_center-tablet .et_pb_portofolio_pagination ul {
		text-align: center;
	}

	.dfp_filterable_portfolio.et_pb_text_align_right-tablet .et_pb_portofolio_pagination ul {
		text-align: right;
	}

	.dfp_filterable_portfolio.et_pb_text_align_justified-tablet .et_pb_portofolio_pagination ul {
		text-align: justify;
	}

	.dfp_filterable_portfolio.et_pb_text_align_center-tablet .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.dfp_filterable_portfolio.et_pb_text_align_justified-tablet .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dfp_filterable_portfolio.et_pb_text_align_right-tablet .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
}

/* Phone --------------------------------------------------------------------- */

@media (max-width: 767px) {
	.dfp_filterable_portfolio .et_overlay.et_pb_inline_icon_phone:before {
		content: attr(data-icon-phone);
	}

	.dfp_filterable_portfolio .et_pb_portfolio_item h2 {
		font-size: 18px;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters ul {
		width: 100%;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li {
		width: 50%;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:first-child a {
		border-radius: 3px 0 0 0;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:nth-child(2) a {
		border-radius: 0 3px 0 0;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child:nth-child(odd) a {
		border-radius: 0 0 3px 3px;
	}

	.et_pb_column .dfp_filterable_portfolio .et_pb_portfolio_filters li:last-child:nth-child(2n) a {
		border-radius: 0 0 3px;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_phone .et_pb_portfolio_item .post-meta,
	.dfp_filterable_portfolio.et_pb_bg_layout_light_phone .et_pb_portfolio_item .post-meta a {
		color: #666;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_dark_phone .et_pb_portfolio_item .post-meta,
	.dfp_filterable_portfolio.et_pb_bg_layout_dark_phone .et_pb_portfolio_item .post-meta a {
		color: inherit;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_phone .et_pb_portofolio_pagination ul li a {
		color: #999;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_light_phone .et_pb_portofolio_pagination ul li a.active {
		color: #82c0c7;
	}

	.dfp_filterable_portfolio.et_pb_bg_layout_dark_phone .et_pb_portofolio_pagination ul li a {
		color: #fff;
	}

	.dfp_filterable_portfolio.et_pb_text_align_left-phone .et_pb_portofolio_pagination ul {
		text-align: left;
	}

	.dfp_filterable_portfolio.et_pb_text_align_center-phone .et_pb_portofolio_pagination ul {
		text-align: center;
	}

	.dfp_filterable_portfolio.et_pb_text_align_right-phone .et_pb_portofolio_pagination ul {
		text-align: right;
	}

	.dfp_filterable_portfolio.et_pb_text_align_justified-phone .et_pb_portofolio_pagination ul {
		text-align: justify;
	}

	.dfp_filterable_portfolio.et_pb_text_align_center-phone .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.dfp_filterable_portfolio.et_pb_text_align_justified-phone .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dfp_filterable_portfolio.et_pb_text_align_right-phone .et_pb_portfolio_filters ul {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
}