.portfolio-app {
	margin-top:24px;
	display:flex;
	flex-direction:row;
	align-items: stretch;
	gap:24px;
	max-width:100%;
	box-sizing: border-box;
	padding: 48px 47px 24px;
	background: #FFFFFF;
	border: 1px solid #E1E1E1;
	border-radius: 48px;
}
.portfolio-info,
.portfolio-info-mobile {
	flex: 0 0 auto;
	display: flex;
	flex-direction:column;
	justify-content:space-between;
	align-items: stretch;
	gap:10px;
	max-width:100%;
	width:290px;
	overflow:auto;
}
.portfolio-info-mobile {
	display:none;
}
.portfolio-info_block1 {
	display: inline-flex;
	flex-direction:column;
	align-items: stretch;
	gap:20px;
}
.portfolio-info h2 {
	font-weight: 700;
	font-size: 46px;
	line-height: 120%;
	letter-spacing: 0.27px;
	color: #343434;
	margin:0;
}

.portfolio-info p {
	font-size: 18px;
	line-height: 120%;
	color: #464646;
	margin:0;
}

.portfolio-info_block2 {
	display: inline-flex;
	flex-direction:column;
	align-items: stretch;
	gap:24px;
}
.portfolio-info_video {
	height:345px;
	width:100%;
	display:inline-flex;
	align-items:stretch;
	justify-content:stretch;
}
.portfolio-info_video a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:0;
	text-decoration:none;
	position:relative;
	border-radius:24px;
	overflow:hidden;
}
.portfolio-info_video a:before {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:40px;
	height:40px;
	background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='19.5' stroke='white'/%3E%3Cpath d='M15 27V13L27 20L15 27Z' fill='white'/%3E%3C/svg%3E%0A") center/cover no-repeat;
	transition:all .35s ease;
}
.portfolio-info_video a:hover:before {
	width:80px;
	height:80px;
}
.portfolio-info_video a img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.portfolio-info_action {
	display:inline-flex;
	width:100%;
}
.portfolio-info_action .button {
	width:100%;
	justify-content:center;
}

.portfolio-items {
	--gap: 31px;
	flex: 1 1 auto;
	display:inline-flex;
	align-items:stretch;
	gap:31px;
	position:relative;
	height:720px;
	overflow:hidden;
	max-width:100%;
}

.portfolio-items:after {
	content:"";
	position:absolute;
	width:100%;
	height:322px;
	bottom:0;
	/* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 59.58%, #FFFFFF 100%); */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%);	
	transition:all .35s ease;
	z-index:2;
}
/* .bx-touch .portfolio-items:after, */
.portfolio-items:hover:after {
	height:10px;
}
@media (hover: none) {
	.portfolio-items:after {
		height:40px;
	}
}
.portfolio-items-column {
	flex: 0 0 auto;
	display:flex;
	flex-direction:column;
	gap:24px;
}
.portfolio-items[data-columns="5"] .portfolio-items-column {
	width:calc(20% - 4 * var(--gap) / 5);
}
.portfolio-items[data-columns="4"] .portfolio-items-column {
	width:calc(25% - 3 * var(--gap) / 4);
}
.portfolio-items[data-columns="3"] .portfolio-items-column {
	width:calc(33.33333% - 2 * var(--gap) / 3);
}

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

.portfolio-items[data-columns="1"] .portfolio-items-column {
	width:100%;
}
.portfolio-items-column .swiper-wrapper {
	flex: 0 0 auto;
	display:flex;
	flex-direction:column;
	gap:24px;
}
.portfolio-items-column:not(.swiper-initialized) .swiper-wrapper {
	overflow:auto;
}

.portfolio-items-column.swiper-initialized .swiper-wrapper {
	gap:0;
	transition-timing-function : linear;
}

.portfolio-items-column.swiper-initialized .swiper-wrapper .swiper-slide {
	-webkit-backface-visibility: hidden; 
	-webkit-transform: translate3d(0, 0, 0);
}

.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 .portfolio-image {
	width:100%;
	height:100%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:24px;
	overflow:hidden;
	position:relative;
	border:0;
}
.portfolio-items-column .portfolio-image img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.portfolio-items-column .portfolio-image:before {
	content:"";
	width:80px;
	height:80px;
	background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.25 36.25H46.25' stroke='%23F0F3F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36.25 26.25V46.25' stroke='%23F0F3F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M36.25 62.5C50.7475 62.5 62.5 50.7475 62.5 36.25C62.5 21.7525 50.7475 10 36.25 10C21.7525 10 10 21.7525 10 36.25C10 50.7475 21.7525 62.5 36.25 62.5Z' stroke='%23F0F3F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54.8125 54.8125L70 70' stroke='%23F0F3F4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	opacity:0;
	transition:all .35s ease;
}
.portfolio-items-column .portfolio-image:hover:before {
	opacity:1;
}

.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);
	}	
}
	
.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:1200px) {
	.portfolio-app {
		padding:31px;
		border-radius:32px;
	}
	.portfolio-info_block1 {
		gap:8px;
	}
	.portfolio-items {
		gap:24px;
	}
}
@media (max-width:755px) {
	.portfolio-app {
		flex-direction:column;
		align-items:stretch;
		padding:23px 0 23px 23px;
		border-radius:24px;
	}	
	.portfolio-info {
		width:314px;
		max-width:100%;
		padding-right:23px;
	}
	.portfolio-info-mobile {
		display:flex;
		padding-right:23px;
		width:100%;
	}
	.portfolio-info-mobile .portfolio-info_video {
		height:377px;
	}
	.portfolio-info h2 {
		font-size:24px;
		line-height:1.1;
		word-spacing: 0px;
	}
	.portfolio-info p {
		font-size:15px;
	}

	.portfolio-info .portfolio-info_block2 {
		display:none;
	}
	.portfolio-items {
		gap:8px;
		height:auto;
		width: calc(100% + 24px);
		overflow:auto;
	}
	.portfolio-items:after {
		display:none;
	}
	.portfolio-items .item {
		flex: 0 0 auto;
		display:inline-flex;
		height:260px;
		max-width:260px;
		align-items:center;
		justify-content:center;
		overflow:hidden;
		position:relative;
		visibility:visible;
	}
	.portfolio-items .portfolio-image {
		width:100%;
		height:100%;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		border-radius:24px;
		overflow:hidden;
		position:relative;
		border:0;
	}
	.portfolio-items .portfolio-image img {
		width:100%;
		height:100%;
		object-fit:cover;
	}	

	.fancybox-portfolio .fancybox-content .fb-ttx { 
		gap: 40px 20px;
	}
	.portfolio-info_action .button.xlarge {
		height:40px;
		font-size:14px;
		padding:11px;
		width:315px;
		max-width:100%;
	}
}