.vertical-slider-container{
    
}
.vertical-slider h3{
    font-size: 41px;
}
.vertical-slider .image-col{
    position: relative;
    z-index: 200;
    width: 45%;
    max-width: 746px;
    padding: 0 22px 22px 0;
}
.vertical-slider .image-col img{
    z-index: 200;
    position: relative;
    display: block; 
}
.vertical-slider .image-col::after{
    content: "";
    background-color: #24C2E8;
    width: 85%;
    height: 80%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.vertical-slider .content-col{
    width: 55%;
    max-width: calc(540px + 100px + 10% + 30px);
    padding: 10px 100px;
    padding-right: calc(10% + 30px);
}
.vertical-slider .slick-dots{
    position: absolute;
    right:  10%;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
}
.vertical-slider .slick-dots button{
    background-color: transparent;
    border: 2px solid #DFDEDE;
    color: #3598DA;
}
.vertical-slider .slick-dots .slick-active button{
    background-color: #3598DA;
    border-color: #3598DA;
    margin-bottom: 105px;
}
.vertical-slider .slick-dots button:after{
    content: "";
    position: absolute;
    width: 2px;
    height: 0;
    background-color: #3598DA;
    left:  50%;
    top: 20px;
    transform: translateX(-50%);
    transition: all 0.3s;
}
.vertical-slider .slick-dots .slick-active button:after{
    height: 100px;
}
/* 
.vertical-slider .slick-dots li:last-child.slick-active button{
    margin-bottom: 0;
    margin-top: 115px;
}
.vertical-slider .slick-dots li:last-child button:after{
    content: "";
    position: absolute;
    width: 2px;
    height: 0;
    background-color: #3598DA;
    left:  50%;
    top: -5px;
    transform: translateX(-50%);
    transition: all 0.3s;
}
.vertical-slider .slick-dots li:last-child.slick-active button:after{
    height: 100px;
    top: -110px;
}
*/

@media screen and (max-width:1199px) {
    .vertical-slider .image-col{
        width: calc(100% - 30px);
        margin: 0 15px;
        margin-bottom: 50px;
    }
    .vertical-slider .content-col{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0;
    }
    .vertical-slider .slick-dots{
        position: absolute;
        right:  auto;
        top: auto;
        left: 50%;
        bottom: -20px;
        transform: translateX(-50%);
        list-style: none;
        display: flex;
    }
    .vertical-slider .slick-dots li{
        margin: 0 10px;
    }
    .vertical-slider .slick-dots .slick-active button{
        background-color: #3598DA;
        border-color: #3598DA;
        margin-bottom: 0;
        margin-right: 100px;
    }
    .vertical-slider .slick-dots button:after{
        content: "";
        position: absolute;
        width: 0px;
        height: 2px;
        background-color: #3598DA;
        top:  50%;
        left: 20px;
        transform: translateY(-50%);
        transition: all 0.3s;
    }
    .vertical-slider .slick-dots .slick-active button:after{
        width: 100px;
        height: 2px;
    }
    .vertical-slider .slick-dots button span{
        display: none;
    }
}
@media screen and (max-width:767px) {
    .vertical-slider h3{
        font-size: 20px;
    }
}