﻿.carousel-gallery-item__image img {
	--transition-duration: 1s;
	--transition-easing: cubic-bezier(0.25,0.74,0.22,0.99);
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--transition-easing)
}

.gallery {
	height: var(--viewport-height)
}

.carousel-gallery {
	position: relative
}

.carousel-gallery__list__inner {
	overflow: hidden;
	height: var(--viewport-height);
	align-items: center
}

.carousel-gallery__list__item {
	overflow: visible
}

.carousel-gallery__nav {
	position: static
}

.carousel-gallery__nav__next,.carousel-gallery__nav__prev {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 0 var(--spacing)
}

.carousel-gallery__nav__next {
	left: auto;
	right: 0;
	right: 7%;
	padding: 0 var(--spacing) 0 0
}

.carousel-gallery__counter {
    position: absolute;
    z-index: 1;
    top: auto;
    left: 50%;
    width: auto;
    text-align: center;
    color: #333;
    bottom: 40px;
    transform: translateX(-50%);
}
.carousel-gallery__counter .fff {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: 500;
    color: rgba(28, 28, 28, 0.25);
}
.carousel-gallery__counter .fff a {
	font-size: 15px;
    opacity: 0.4;
	margin-left: 15px;
    margin-right: 15px;
    color: #1C1C1C;
	cursor: pointer;
}
.carousel-gallery__counter .fff a:hover {
	opacity: 0.8;
	color:#34665c;
}

.carousel-gallery__titles {
	position: absolute;
	top: calc(50vh + 100vw / 360 * 302 / 2 - 60px);
	width: 100%;
	text-align: center;
	pointer-events: none
}

.carousel-gallery__titles__subtitle,.carousel-gallery__titles__title {
	color: #2b665c;
	font-weight: normal;
	line-height: 1.9;
}

.carousel-gallery__titles__subtitle {
	margin-top: 24px
}

.carousel-gallery__titles__layout {
	padding-top: calc(var(--scale-px) * 10);
	/* padding-bottom: calc(var(--scale-px) * 10) */
}

@media (min-width:568px) and (max-aspect-ratio:13/9),(min-width:668px) and (min-height:416px),(min-width:980px) {
	.carousel-gallery__titles {
		top: auto;
		bottom: calc(50vh - 100vw / 1440 * 480 / 2 - calc(var(--scale-px) * 66.5))
	}

	.carousel-gallery__titles__layout {
		display: flex;
		flex-direction: column-reverse
	}

	.carousel-gallery__titles__title {
		white-space: nowrap;
		font-size: 20px;
	}

	.carousel-gallery__titles__subtitle {
		margin-top: 0;
		margin-bottom: calc(var(--scale-px) * 37)
	}
}

.carousel-gallery-item {
	display: block;
	margin: 0 auto;
	position: relative;
	overflow: visible;
	width: var(--md,26.38889vw) var(--n-md,100%);
	width: 55%;
}

.carousel-gallery-item__image {
	position: relative;
	overflow: hidden;
	overflow: clip;
	z-index: 1
}

.carousel-gallery-item__image img {
	transition-property: transform
}

.carousel-gallery-item__image--side-1,.carousel-gallery-item__image--side-2 {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	opacity: .3;
	height: auto
}

.carousel-gallery-item__image--side-1 img,.carousel-gallery-item__image--side-2 img {
	width: auto;
	height: 13.88889vw
}

.carousel-gallery-item__button {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 0);
}

.carousel-gallery__list__item--hovered .carousel-gallery-item__image img {
	transform: scale(1.1)
}

picture.carousel-gallery-item__image--side-1,picture.carousel-gallery-item__image--side-2 {
	height: auto;
	overflow: visible
}

.carousel__list__item:nth-child(odd) .carousel-gallery-item__image--side-1 {
	left: calc(var(--scale-px) * -80);
	bottom: calc(var(--scale-px) * 70)
}

.has-hover .carousel__list__item:nth-child(odd) .carousel-gallery-item:hover .carousel-gallery-item__image--side-1 img {
	transform: translateX(calc(var(--scale-px) * -40))
}

.carousel__list__item:nth-child(odd) .carousel-gallery-item__image--side-2 {
	right: calc(var(--scale-px) * -40);
	top: calc(var(--scale-px) * -40)
}

.has-hover .carousel__list__item:nth-child(odd) .carousel-gallery-item:hover .carousel-gallery-item__image--side-2 img {
	transform: translateX(calc(var(--scale-px) * 40))
}

.carousel__list__item:nth-child(2n+2) .carousel-gallery-item__image--side-1 {
	left: calc(var(--scale-px) * -40);
	top: calc(var(--scale-px) * -40)
}

.has-hover .carousel__list__item:nth-child(2n+2) .carousel-gallery-item:hover .carousel-gallery-item__image--side-1 img {
	transform: translateX(calc(var(--scale-px) * -40))
}

.carousel__list__item:nth-child(2n+2) .carousel-gallery-item__image--side-2 {
	right: calc(var(--scale-px) * -80);
	bottom: calc(var(--scale-px) * 70)
}

.has-hover .carousel__list__item:nth-child(2n+2) .carousel-gallery-item:hover .carousel-gallery-item__image--side-2 img {
	transform: translateX(calc(var(--scale-px) * 40))
}
