/* -- fotogallerij carousel -- */
.fotogallerijContainer{

}

.fotogallerijCarouselSlider .carouselHolder{
    --spacing: 45px;
    /* padding: calc(var(--spacing)/2) calc(var(--spacing)); */
    padding: calc(var(--spacing)/2) 0;
    /* margin-left: calc(-1 * var(--spacing)); */
    /* width: calc(100% + (1* var(--spacing))); */
    margin: calc(-1 * var(--spacing)) 0;
}

.fotogallerijCarouselSlider .carousel{
	/* gap: 30px; */
}


.fotogallerijCarouselSlider .carousel .carouselSlide{padding: 1rem;overflow: visible;display: flex;align-items: stretch;justify-content: flex-start;height: 100%;background-color: var(--themeColor_text);border-radius: 7px;}

.fotogallerijItem{
    height: auto;
    display: flex;
    align-content: space-between;
    flex-direction: column;
    gap: 1rem;
}
.fotogallerijItem .imageHolder{
	aspect-ratio:1;
	border-radius: 7px;
}


.fotogallerijItem h3{
    color: #fff;
    font-size: 18px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.fotogallerijContent,
.fotogallerijContent p{
    color: #fff;
    font-size: 15px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fotogallerijCarouselSlider {
    width: 100%;
    z-index: 100;
}
.fotogallerijCarouselSlider .carouselHolder{
	overflow: hidden;
}


.fotogallerijCarouselSlider .floating{
    background-color:transparent;
    top: calc(100% + 19px) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius:50%;
    border:1px solid var(
    --themePrimary);
    transition: all .1s ease-in-out;
}
.fotogallerijCarouselSlider .prevButton.floating{
    right: 50px;
    left: auto;
}
.fotogallerijCarouselSlider .nextButton.floating{
    left: auto;
    right: 0;
    color: white;
}
.fotogallerijCarouselSlider .floating:hover{
    background-color: var(--themePrimary);
}
.fotogallerijCarouselSlider .floating svg *{
    transition: all .1s ease-in-out;
}
.fotogallerijCarouselSlider .floating:hover svg path{
    fill: #fff;
}


/* -- Products carousel slider -- */
.productsCarouselSlider .carouselHolder{
    --spacing: 45px;
    padding: calc(var(--spacing)/2) 0;
    margin: calc(-1 * var(--spacing)) 0;
}

.productsCarouselSlider .carousel .carouselSlide{
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
}

.productsCarouselSlider .carousel .carouselSlide .product{
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 7px;
    background-color: #fff;
    transition: all .2s ease-in-out;
}

.productsCarouselSlider .carousel .carouselSlide .product:hover{
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.productsCarouselSlider {
    width: 100%;
    z-index: 100;
    padding: 20px 0.6rem;
}

.productsCarouselSlider .carouselHolder{
	overflow: hidden;
}

.productsCarouselSlider .floating{
    background-color:transparent;
    top: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius:50%;
    border:1px solid var(--themePrimary);
    transition: all .1s ease-in-out;
    z-index: 11;
}

.productsCarouselSlider .prevButton.floating{
    right: auto;
    left: -30px;
}

.productsCarouselSlider .nextButton.floating{
    left: auto;
    right: -30px;
    color: white;
}

.productsCarouselSlider .floating:hover{
    background-color: var(--themePrimary);
}

.productsCarouselSlider .floating svg *{
    transition: all .1s ease-in-out;
}

.productsCarouselSlider .floating svg path{
    stroke: #000;
	fill: #000;
}


@media screen and (max-width: 1200px){
	.fotogallerij-overview .row{
		display:flex;
	}
}
@media screen and (max-width: 1024px){
	.fotogallerijItemHolder{		
	    --columns: 2;
	    padding: 15px 0;
	}
	.fotogallerijCarouselSlider{
		margin:2rem 0;
		width:100%;
	}
	.fotogallerijCarouselSlider .nextButton.floating{
		top:100%;
	}
}
@media screen and (max-width: 769px){
	.productsCarouselSlider .floating{
		top: calc(100% + 30px) !important;
		border:1px solid #000;
		border-radius:4px;
		background-color:#000;		
	}
	.productsCarouselSlider .floating svg path{
		fill:#fff;
		stroke: #ffffff;
	}
	
	.productsCarouselSlider .prevButton.floating{
	    right: auto;
	    left: calc(50% - 25px);
		transform:translateX(-50%);
	}
	
	.productsCarouselSlider .nextButton.floating{
	    left: calc(50% + 25px);
		transform:translateX(-50%);
	}
}