.carousel-progressbar-container {
padding: 0 80px;
}
.carousel-progressbar-slides-container {
position: relative;
}
@media screen and (max-width: 767px) {
.carousel-progressbar-container {
padding: 0 55px;
}
} .carousel-progressbar-slides-container .slide-arrow {
font-size: 30px;
display: inline-flex;
padding: 13px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.carousel-progressbar-slides-container .slide-arrow.prev-arrow {
left: -80px;
}
.carousel-progressbar-slides-container .slide-arrow.next-arrow {
right: -80px;
}
@media screen and (max-width: 767px) {
.carousel-progressbar-slides-container .slide-arrow {
font-size: 20px;
padding: 10px;
}
.carousel-progressbar-slides-container .slide-arrow.prev-arrow {
left: -55px;
}
.carousel-progressbar-slides-container .slide-arrow.next-arrow {
right: -55px;
}
} .carousel-progressbar-navigation-container {
margin-top: 30px;
}
.carousel-progressbar-navigation-container .progress-bar-wrapper {
width: 100%;
height: 4px;
position: relative;
}
.carousel-progressbar-navigation-container .progress-bar {
position: absolute;
height: 4px;
left: 0;
transition: left 0.5s;
} .carousel-progressbar-wrapper {
overflow: hidden;
}
.carousel-progressbar-wrapper .slides {
display: flex;
column-gap: 30px;
}
.carousel-progressbar-wrapper .slide {
flex-shrink: 0;
padding: 30px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 100%;
}
.carousel-progressbar-wrapper .slide .slidetitle,
.carousel-progressbar-wrapper .slide .slidedescription {
width: fit-content;
z-index: 10;
}
.carousel-progressbar-wrapper .slide .slidetitle-first {
transition-property: margin;
}
.carousel-progressbar-wrapper .slide .slidetitle-second {
transition-property: margin;
margin-top: 10px;
}
.carousel-progressbar-wrapper .slide:hover .slidetitle-first {
margin: 0 0 0 20px;
}
.carousel-progressbar-wrapper .slide:hover .slidetitle-second {
margin: 10px 0 0 35px;
}
.carousel-progressbar-wrapper .slide .slidedescription {
margin-top: 10px;
}
.slide-transition {
transition-timing-function: ease;
} .slide.show_description_on_hover .slidedescription {
position: absolute;
opacity: 0;
bottom: 0;
transform: translateY(100%);
transition: all .5s ease;
}
.slide.show_description_on_hover:hover .slidedescription {
opacity: 1;
position: relative;
transform: initial;
} .carousel-progressbar-wrapper .slide .slide_image {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.carousel-progressbar-wrapper .slide .slide_image.zoom {
transition-property: background-size;
}
.carousel-progressbar-wrapper .slide:hover .slide_image.zoom {
background-size: 120% 120%;
}
.carousel-progressbar-wrapper .slide .slide_image.rotate {
transition-property: transform;
}
.carousel-progressbar-wrapper .slide:hover .slide_image.rotate {
transform: rotate(-5deg);
}