.vertical-carousel-container {
display: flex;
column-gap: 50px;
}
@media screen and (max-width: 767px) {
.vertical-carousel-container {
row-gap: 50px;
flex-direction: column-reverse;
align-items: center;
}
} .vertical-carousel-navigation {
width: calc(35% - 25px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
row-gap: 20px;
}
.vertical-carousel-navigation .slidetitle_container {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.vertical-carousel-navigation .slidetitle_icon-container {
display: flex;
align-items: center;
justify-content: center;
}
.vertical-carousel-navigation .slidetitle,
.vertical-carousel-navigation .slidetitle_icon {
transition: width 500ms, height 500ms, color 500ms;
}
.vertical-carousel-navigation .slidetitle_container:hover .slidetitle_icon {
background-color: #F05332;
}
.vertical-carousel-navigation .slidetitle_container:hover .slidetitle {
color: #121842;
}
@media screen and (max-width: 767px) {
.vertical-carousel-navigation {
width: 70%;
}
} .vertical-carousel-container .slides {
width: calc(65% - 25px);
position: relative;
}
.vertical-carousel-container .slide {
padding: 40px 60px 90px 60px;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: position 1s, opacity 2s;
}
.vertical-carousel-container .slide-active {
display: flex;
row-gap: 30px;
column-gap: 30px;
opacity: 1;
z-index: 0;
position: relative;
}
.vertical-carousel-container .slide-active.image_top {
flex-direction: column;
}
.vertical-carousel-container .slide-active.image_bottom {
flex-direction: column-reverse;
}
.vertical-carousel-container .slide-active.image_left {
flex-direction: row;
}
.vertical-carousel-container .slide-active.image_right {
flex-direction: row-reverse;
}
.vertical-carousel-container .slide-active::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border-top: 20px solid #687A82;
border-bottom: 20px solid #687A82;
border-left: 20px solid #687A82;
}
.vertical-carousel-container .slide-active::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
border-top: 20px solid #687A82;
border-bottom: 20px solid #687A82;
border-right: 20px solid #687A82;
}
.vertical-carousel-container .slide-active .slide_image {
text-align: center;
}
.vertical-carousel-container .slide-active .slide_image,
.vertical-carousel-container .slide-active .slide_content {
z-index: 5;
}
.vertical-carousel-container .slide-active .slide_content ul {
padding-left: 20px;
margin: 0;
list-style-type: square;
}
.vertical-carousel-container .slide-active .slide_content ul li {
margin-bottom: 8px;
}
.vertical-carousel-container .slide-active .slide_content ul li::marker {
color: #F05332;
font-size: 18px;
}
@media screen and (max-width: 767px) {
.vertical-carousel-container .slide {
padding: 30px 40px 60px 40px;
}
.vertical-carousel-container .slides {
width: 100%;
}
}