

.swiper {
    width: 100%;
    height: 100%
}

.swiper-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 1
}

.swiper-button-next,.swiper-button-prev {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    color: #677788;
    width: 3.125rem;
    height: 3.125rem;
    background-color: #fff;
    box-shadow: 0 .1875rem .4375rem 0 rgba(140,152,164,.4);
    border-radius: 50%;
    transition: all .2s ease-in-out
}

.swiper-button-next:after,.swiper-button-prev:after {
    width: 1rem;
    height: 1rem;
    font-family: inherit;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    content: ""
}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
    opacity: .5;
    box-shadow: none
}

.swiper-button-next:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23677788'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.swiper-button-next:hover:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23377dff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.swiper-button-prev:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23677788'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.swiper-button-prev:hover:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23377dff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.swiper-button-next-soft-white,.swiper-button-prev-soft-white {
    color: #fff;
    background-color: rgba(255,255,255,.1)
}

.swiper-button-next-soft-white:hover,.swiper-button-prev-soft-white:hover {
    background-color: #07e897
}

.swiper-button-next-soft-white:after,.swiper-button-next-soft-white:hover:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.swiper-button-prev-soft-white:after,.swiper-button-prev-soft-white:hover:after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.swiper-pagination {
    position: static;
    width: 100%!important;
    display: flex;
    justify-content: center;
    margin-top: 2rem
}

.swiper-pagination.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 0;
    transform: translateX(0)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 0;
    transform: translateX(0)
}

.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    transform: translateX(0)
}

.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .25rem
}

.swiper-pagination-bullet {
    position: relative;
    opacity: 1;
    width: 1.5rem;
    height: 1.5rem;
    border: .0625rem solid transparent;
    background-color: transparent;
    transition: .2s
}

.swiper-pagination-bullet::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: .25rem;
    height: .25rem;
    background-color: #bdc5d1;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: .2s;
    content: ""
}

.swiper-pagination-bullet:hover {
    border-color: rgba(55,125,255,.5)
}

.swiper-pagination-bullet:hover::before {
    background-color: rgba(55,125,255,.5)
}

.swiper-pagination-bullet-active,.swiper-pagination-bullet-active:hover {
    border-color: #07e897
}

.swiper-pagination-bullet-active::before,.swiper-pagination-bullet-active:hover::before {
    background-color: #07e897
}

.swiper-pagination-light .swiper-pagination-bullet::before {
    background-color: rgba(255,255,255,.5)
}

.swiper-pagination-light .swiper-pagination-bullet:hover {
    border-color: #fff
}

.swiper-pagination-light .swiper-pagination-bullet:hover::before {
    background-color: rgba(255,255,255,.5)
}

.swiper-pagination-light .swiper-pagination-bullet-active,.swiper-pagination-light .swiper-pagination-bullet-active:hover {
    border-color: #fff
}

.swiper-pagination-light .swiper-pagination-bullet-active::before,.swiper-pagination-light .swiper-pagination-bullet-active:hover::before {
    background-color: #fff
}

.swiper-pagination-progress {
    cursor: pointer
}

.swiper-pagination-progress-body {
    position: relative;
    display: block;
    width: 100%;
    height: .25rem;
    background-color: rgba(55,125,255,.1)
}

.swiper-pagination-progress-body-helper {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    background-color: #07e897;
    transition: none
}

.swiper-slide-thumb-active .swiper-pagination-progress-body-helper {
    transition-property: width;
    transition-timing-function: linear;
    width: 100%
}

.swiper-pagination-progress-light .swiper-pagination-progress-body {
    background-color: rgba(255,255,255,.5)
}

.swiper-pagination-progress-light .swiper-pagination-progress-body-helper {
    background-color: #fff
}

.swiper-pagination-progressbar {
    background-color: rgba(55,125,255,.1)
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: #07e897
}

.swiper-pagination-fraction {
    display: block;
    letter-spacing: .125rem
}

.swiper-pagination-fraction .swiper-pagination-current {
    font-size: 4rem;
    line-height: 4rem
}

.swiper-thumbs {
    box-sizing: border-box
}

.swiper-thumbs .swiper-slide {
    cursor: pointer;
    opacity: .4
}

.swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1
}

.swiper-equal-height .swiper-wrapper {
    display: flex
}

.swiper-equal-height .swiper-slide {
    display: flex;
    height: auto
}

.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets {
    position: absolute;
    width: auto!important;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: .25rem 0
}

.swiper-horizontal>.swiper-pagination-middle-y-end {
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;
    bottom: auto;
    transform: translateY(-50%)
}

.swiper-center-mode-end {
    margin-right: calc(-1px - (100vw - 100%)/ 2 + 15px)!important
}

.swiper-thumb-progress {
    width: 110%;
    height: 110%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.swiper-thumb-progress-avatar {
    position: relative;
    display: block;
    width: 3.125rem;
    height: 3.125rem;
    border: .0625rem solid rgba(33,50,91,.1);
    padding: .25rem;
    margin: .25rem;
    border-radius: 50%
}

.swiper-thumb-progress-avatar-img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.swiper-thumb-progress .swiper-thumb-progress-path {
    opacity: 0;
    fill: transparent;
    stroke: #07e897;
    stroke-width: 8;
    stroke-dashoffset: 477;
    stroke-dashoffset: 0
}

.swiper-thumb-progress .swiper-thumb-progress-path {
    opacity: 0;
    fill: transparent;
    stroke: #07e897;
    stroke-width: 8;
    stroke-dashoffset: 477;
    stroke-dashoffset: 0
}

@keyframes swiperThumbProgressDash {
    from {
        stroke-dasharray: 0 477
    }

    to {
        stroke-dasharray: 477 477
    }
}
