.portfolio-app {
	display:flex;
	align-items:flex-start;
	gap:20px;
	padding-bottom:100px !important;
	--column-gap: 20px;
	--icon-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.0027 3.9911L1.28946 0.168437C1.09277 -0.0343771 0.773417 -0.0343771 0.576438 0.168437L0.219892 0.535474C0.023057 0.738215 0.023057 1.06681 0.219892 1.26955L4.64622 5.82688C4.84306 6.02955 5.16227 6.02955 5.35924 5.82688L9.78536 1.26955C9.98227 1.06681 9.98227 0.738215 9.78536 0.535474L9.42888 0.168437C9.23191 -0.0343771 8.91255 -0.0343771 8.71586 0.168437L5.0027 3.9911Z' fill='black'/%3E%3C/svg%3E%0A");
}
.portfolio-filters {
	flex: 0 0 auto;
	width:132px;
	font-size: 12px;
	color: #000000;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 24px 8px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	border-radius: 12px;

}
.portfolio-filter {
	display:inline-flex;
	flex-direction:column;
	gap:20px;
}
.portfolio-filter:not(:last-child) {
	padding-bottom:24px;
	border-bottom:1px solid #DFDFDF;
}
.portfolio-filter:last-child {
	padding-top:24px;
}
.portfolio-filter-title {
	font-weight: 700;
	font-size: 11px;
	line-height: 11px;
	letter-spacing: 0.0641667px;
	text-transform: uppercase;
	color: #343434;
}
.portfolio-filter-selected {
	display:none;
}

.portfolio-filter-items {
	display:inline-flex;
	flex-direction:column;
	gap:15px;
}
.portfolio-filter-items label {
	display:flex;
	gap:9px;
	cursor:pointer;
}
.portfolio-filter-items label .fake-checkbox {
	flex: 0 0 auto;
	width:18px;
	height:19px;
	background: #FFFFFF;
	border: 1.4px solid #F25354;
	border-radius: 6px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#F25354;
	transition:all ease .35s;
}
.portfolio-filter-items label:hover .fake-checkbox {
	box-shadow: 0 0 0 4px rgba(242, 83, 84, .2);
}
.portfolio-filter-items label [type="checkbox"] {
	display:none;
}
.portfolio-filter-items label [type="checkbox"]:checked + .fake-checkbox {
    background: #f25354;
	
}
.portfolio-filter-items label [type="checkbox"]:checked + .fake-checkbox:before {
	/* content:"\2716"; */
	content:"";
	background: url(/local/templates/new/static/dist/img/checkbox.svg) center no-repeat;
	font-size: 14px;
	width:100%;
	height:100%;
}



.portfolio-content {
	flex: 1 1 auto;
	display:inline-flex;
	flex-direction:column;
	align-items:stretch;
	gap:40px;
}
.portfolio-buttons {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:24px;
}
.portfolio-buttons .btn {
	font-size: 14px;
	padding: 19px 28px;
}
.portfolio-buttons .btn.disabled, .portfolio-buttons .btn:disabled {
	cursor:default;
	background: #E8ECF0;
	color: rgba(110, 110, 110, 0.5);
}

.portfolio-buttons .stat {
	font-size: 14px;
	line-height: 13px;
	letter-spacing: 0.0641667px;
	text-transform: uppercase;
	color: #6A6A6A;
}
.portfolio-items {
	max-width:100%;
	display:flex;
	overflow:hidden;
	gap:var(--column-gap);
	flex: 1 1 auto;
}
.portfolio-items-column {
	flex: 0 0 auto;
	display:flex;
	flex-direction:column;
	gap:var(--column-gap);
}
.portfolio-items[data-columns="4"] .portfolio-items-column {
	width:calc(25% - 3 * var(--column-gap) / 4);
}
.portfolio-items[data-columns="3"] .portfolio-items-column {
	width:calc(33.33333% - 2 * var(--column-gap) / 3);
}

.portfolio-items[data-columns="2"] .portfolio-items-column {
	width:calc(50% -  var(--column-gap) / 2);
}

.portfolio-items[data-columns="1"] .portfolio-items-column {
	width:100%;
}
.portfolio-items-column .item {
	flex: 0 0 auto;
	display:inline-flex;
	width:100%;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	position:relative;
	visibility:visible;
}
.portfolio-items-column .item .tags {
	position:absolute;
	z-index:1;
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	left:12px;
	top:12px;
	max-width:calc(100% - 24px);
}
.portfolio-items-column .item .tag {
	display: inline-flex;
	padding: 7px 10px;
	background: rgba(0, 0, 0, 0.24);
	border-radius: 13px;

	font-size: 12px;
	line-height: 1;
	color: #FFFFFF;
}
.portfolio-items-column .item .link {
	position:absolute;
	z-index:2;
	height:42px;
	left:12px;
	bottom:12px;
	font-weight: 400;
	font-size: 11px;
	font-weight:700;
	text-transform: uppercase;
}
.portfolio-items-column .item .image {
	display:inline-flex;
	width:100%;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	border:none !important;
	position:relative;
}
.portfolio-items-column .item .image:before {
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
	opacity:0;
	background-color:#000;
	transition:all .35s ease;
	border-radius: 12px;
}
.portfolio-items-column .item .image:hover:before {
	opacity:.24;
}

.portfolio-items-column .item .image img {
	width:100%;
	height:auto;
	border-radius: 12px;
	overflow:hidden;
	opacity:.01;
}
.portfolio-items-column .item.ready {
	animation: 0.2s ease 0s 1 normal forwards running PYfqC;
}
.portfolio-items-column .item.ready img {
	opacity:1;
}
.portfolio-items-column .item .image:empty {
	height:278px;
}

@keyframes PYfqC{
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}	
}
	
.btn.btn--black{border-color:#343434;background-color:#343434;color:#fff}

.btn.btn--black:hover:not(:disabled){color:#343434;background:#fff}
.btn.btn--black.disabled, .btn.btn--black:disabled {
	cursor:default;
	opacity:.5;
}

.fancybox-portfolio .fancybox-slide .fancybox-content {
	background-color:transparent;
	padding:0;
	height:90vh;
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:40px;
	overflow:hidden;
	margin:0 !important;
}
.fancybox-portfolio .fancybox-content .fb-image {
	flex: 1 1 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.fancybox-portfolio .fancybox-content .fb-image img {
	flex:  1 1 auto;
	height: auto;
    width: auto;
	max-height:100%;
	max-width:100%;
	object-fit:contain;
}
.fancybox-portfolio .fancybox-content .fb-ttx {
	flex: 0 0 auto;
	display:flex;
	flex-wrap:wrap;
	gap:60px;
	color:#fff;
}



.fancybox-container.fancybox-portfolio.fancybox-is-open .fancybox-bg {
	opacity: .9;
}

.fancybox-container.fancybox-portfolio.fancybox-is-open .fancybox-toolbar {
	opacity:1;
	visibility:visible;
}
.fancybox-container.fancybox-portfolio.fancybox-is-open .fancybox-toolbar .fancybox-button:not(.fancybox-button--close) {
	display:none !important;
}


@media (max-width:800px) {
	.portfolio-app {
		flex-direction:column;
		align-items:stretch;
	}	
	.portfolio-filters {
		flex-direction:row;
		width:100%;
		gap:var(--column-gap);
		background-color:transparent;
		padding:0;
		border:none;
	}
	.portfolio-filter {
		flex: 1 1 auto;
		width: calc(50% - var(--column-gap) / 2);
		position:relative;
	}
	.portfolio-filter:not(:last-child) {
		padding-bottom:0;
		border-bottom:0;
	}
	.portfolio-filter:last-child {
		padding-top:0;
	}
	.portfolio-filter-selected {
		display:inline-flex;
		align-items:center;
		width:100%;
		background: #fff;
		border: 1px solid #CFCFCF;
		border-radius: 5px;
		height:42px;
		gap:5px;
		padding: 0 18px 0 12px;
	}
	.portfolio-filter-selected span {
		flex: 1 1 auto;
		overflow:hidden;
		text-overflow:ellipsis;
		display:inline-block;
		white-space:nowrap;
	}
	.portfolio-filter-selected span:empty:before {
		content:attr(data-filter-selected-content);
		opacity:.3;
	}
	.portfolio-filter-selected:after {
		flex: 0 0 auto;
		content:"";
		width:10px;
		height:6px;
		background:var(--icon-select) center no-repeat;
		margin-left:auto;
		transition:all .35s ease;
	}
	.portfolio-filter-items {
		display:none;
		position:absolute;
		z-index:1;
		top:100%;
		left:0;
		width:100%;
		background-color:#fff;
		border-left: 1px solid #CFCFCF;
		border-right: 1px solid #CFCFCF;
		border-bottom: 1px solid #CFCFCF;
		border-radius:  0 0 5px 5px;
		padding:8px;
	}
	.portfolio-filter-selected.active {
		border-radius:  5px 5px 0 0;
	}
	.portfolio-filter-selected.active:after {
		transform:rotate(180deg);
	}
	.portfolio-filter-selected.active + .portfolio-filter-items {
		display:flex;
	}
	.fancybox-portfolio .fancybox-content .fb-ttx { 
		gap: 40px 20px;
	}
}