
.route-slider {
    height: 460px;
}


.swiper-pagination {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    transform: scale(0.5);
    background: white;
    border-radius: 50%;
    transition: transform, 0.5s;
}

.swiper-pagination .swiper-pagination-bullet-active {
    width: 8px;
    height: 8px;
    transform: scale(1);
    background: white;
    border-radius: 50%;
    transition: transform, 0.5s;
}



.half-image-slide, .full-image-slide, .third-image-slide {
    display: flex;
    height: 100%;
}

.route-slider-slide__container {
    flex-basis: 100%;
    position: relative;

    /*background-image: url("../../assets/main.png");*/
    /*background-repeat: no-repeat;*/
    /*-moz-background-size: 100%; !* Firefox 3.6+ *!*/
    /*-webkit-background-size: 100%; !* Safari 3.1+ и Chrome 4.0+ *!*/
    /*-o-background-size: 100%; !* Opera 9.6+ *!*/
    /*background-size: 100%;*/

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 48px 24px 48px 24px;
}

.route-slider-slide__container__image {
    display: none;
;
}

.route-slider-slide__container__mobile-image {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block
}

.route-slider-slide__content__tip-wrapper {
    display: none;
}

.route-slider-slide__content__title {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 28px;
    line-height: 38px;
    color: #FFFFFF;
}

.route-slider-slide__content__description {
    margin-top: 16px;

    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
}

.route-slider-slide__content__button {
    outline: 0;
    border: 0;
    margin-top: 60px;
    width: 220px;
    height: 50px;
    background: #E0387E;
    border-radius: 2px;

    font-family: Open Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;

}


@media screen and (min-width: 1024px) {


    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
        right: 32px;
        top: 50px;
        left: auto !important;
        width: auto !important;
    }


    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0 !important;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 10px 4px !important;
    }




    .route-slider {
        height: 480px;
    }

    .swiper-pagination {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 100px;
        height: 100px;
        transform: none;
        border-radius: 0;
        background-image: url("../../assets/slide.png");
        opacity: 1;
    }

    .swiper-pagination .swiper-pagination-bullet-active {
        border: 2px solid #E0387E;
    }

    .half-image-slide {
        display: flex;
        height: 100%;
    }

    .route-slider-slide__container {
        flex-basis: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 120px;
        background: #F0F0F0;
    }

    .route-slider-slide__content__title {
        width: 90%;
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 40px;
        line-height: 54px;
        color: #000000;
    }

    .route-slider-slide__content__description {
        width: 90%;
        margin-top: 32px;
        font-family: Open Sans;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 27px;
        color: #000000;
    }

    .route-slider-slide__content__button {
        width: 168px;

    }

    .route-slider-slide__image-container {
        flex-basis: 50%;
        background-image: url("../../assets/route2.png");
        background-repeat: no-repeat;
        -moz-background-size: 100%; /* Firefox 3.6+ */
        -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
        -o-background-size: 100%; /* Opera 9.6+ */
        background-size: 100%;
    }

    .third-image-slide {
        display: flex;
        height: 100%;
    }

    .third-image-slide .route-slider-slide__container {
        flex-basis: 66%;
        position: relative;
    }

    .route-slider-slide__content__tip-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .route-slider-slide__content__tip {
        width: 288px;
        height: 340px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
    }


    .full-image-slide {
        display: flex;
        height: 100%;
    }

    .full-image-slide .route-slider-slide__container {
        z-index: 2;
        flex-basis: 100%;
        position: relative;
        background: transparent;
        /*background-image: url("../../assets/main.png");*/
        /*background-repeat: no-repeat;*/
        /*-moz-background-size: 100%; !* Firefox 3.6+ *!*/
        /*-webkit-background-size: 100%; !* Safari 3.1+ и Chrome 4.0+ *!*/
        /*-o-background-size: 100%; !* Opera 9.6+ *!*/
        /*background-size: 100%;*/
        padding: 0 120px;
    }

    .route-slider-slide__container__image {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        display: block;
    }

    .route-slider-slide__container__mobile-image {
        display: none;
    }

    .full-image-slide .route-slider-slide__content__title {
        width: 50%;
        color: #FFFFFF;
    }

    .full-image-slide .route-slider-slide__content__description {
        width: 50%;
        color: #FFFFFF;
    }

}


@media screen and (min-width: 1280px) {
    .route-slider {
        height: 660px;
    }


}


.swiper-container-vertical>.swiper-pagination-bullets {
    transform: translate3d(0,-50%,0) !important;
    bottom: 5px !important;
    left: 0 !important;
    width: 100% !important;
    right: 0 !important;
    top: auto !important;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin-left: 4px !important;
    margin-right: 4px !important;
}
