.banners {
    display: flex;
    margin: 24px 0
}
.banners .owl-carousel {
    display: block;
    opacity: 0
}
.banners .owl-carousel .item:not(:first-child) {
    display: none
}
.banners .owl-carousel.owl-loaded {
    opacity: 1
}
.banners .owl-carousel.owl-loaded .item:not(:first-child) {
    display: flex
}
.banners .preloader {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: -1
}
.banners .preloader svg {
    width: 50px;
    height: 50px;
    animation: rotate 2s infinite linear
}
.banners .preloader svg circle {
    stroke: var(--main-color)
}
.banners .carousel {
    position: relative;
    width: 100%
}
.banners .carousel .item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 33vw;
    color: #fff;
    background-color: var(--main-color);
    background-repeat: repeat;
    background-position: center;
    background-size: cover
}
.banners .carousel .item .text {
    width: 100%;
    margin: 0 7.7%
}
.banners .carousel .item .name {
    margin-top: 3px;
    font-size: 2.25em;
    line-height: 1em
}
.banners .carousel .item .name br + b {
    display: inline-block;
    margin-top: 8px
}
.banners .carousel .item .name br + small {
    display: inline-block;
    margin-top: 16px
}
.banners .carousel .item .name b {
    font-weight: 700;
    line-height: 1em
}
.banners .carousel .item .name small {
    font-size: 0.5em;
    line-height: 1em
}
.banners .carousel .item .button {
    display: inline-block;
    margin-top: 35px;
    padding: 13px 24px 15px 23px;
    font-size: 0.875em;
    color: #282828;
    font-weight: 700;
    line-height: 1em;
    background-color: #fff;
    border-radius: 20px
}
.banners .carousel .item .button.base {
    color: #fff;
    background-color: var(--main-color)
}
.banners .carousel .item.center .text {
    text-align: center
}
.banners .carousel .item.right .text {
    width: 35%;
    margin-left: auto
}
.banners .carousel .item.black {
    color: #282828;
    background-color: #dadada
}
.banners .carousel .item.black .button {
    color: #fff;
    background-color: var(--main-color)
}
.banners .carousel .item.black .button.base {
    color: #fff;
    background-color: var(--main-color)
}
.banners .carousel .owl-nav {
    position: absolute;
    bottom: 8.65%;
    width: 100%;
    padding: 0 4.5%;
    text-align: right;
    box-sizing: border-box;
    z-index: 40
}
.banners .carousel .owl-nav .prev, .banners .carousel .owl-nav .next {
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
    line-height: 1;
    transition: transform .25s ease
}
.banners .carousel .owl-nav .prev:before, .banners .carousel .owl-nav .next:before {
    font-size: 14px;
    line-height: 30px
}
.banners .carousel .owl-nav .prev:before {
    content: '\0047'
}
.banners .carousel .owl-nav .prev:hover {
    transform: translate(-2px, 0)
}
.banners .carousel .owl-nav .next:before {
    content: '\0048'
}
.banners .carousel .owl-nav .next:hover {
    transform: translate(2px, 0)
}
.banners .carousel .owl-nav .owl-prev {
    margin-right: 22px
}
.banners .carousel .owl-dots {
    position: absolute;
    bottom: 6.1%;
    width: 100%;
    padding: 0 3.15%;
    z-index: 40
}
.banners .carousel .owl-dots .owl-dot {
    width: 6px;
    height: 6px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #e7e7e7
}
.banners .carousel .owl-dots .owl-dot.active {
    background-color: #fff;
    border: 1px solid #e7e7e7
}
.banners .carousel .owl-carousel.dark .owl-nav .prev, .banners .carousel .owl-carousel.dark .owl-nav .next {
    color: #282828
}
.banners .carousel .owl-carousel.dark .owl-dots .owl-dot {
    background-color: rgba(40, 40, 40, 0.5)
}
.banners .carousel .owl-carousel.dark .owl-dots .owl-dot.active {
    background-color: #282828
}
.banners .static {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 33.75%;
    margin-left: 1.409%;
    flex-shrink: 0
}
.banners .static .item {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 47.7%;
    color: #fff;
    background-color: var(--main-color);
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box
}
.banners .static .item .text {
    width: 100%
}
.banners .static .item.large {
    height: 100%;
    padding: 6.75%
}
.banners .static .item.large .name {
    font-size: 2.25em;
    line-height: 1em
}
.banners .static .item.medium {
    padding: 6.75%;
    font-size: 1.5em
}
.banners .static .item.medium:first-child {
    margin-bottom: 4.5%
}
.banners .static .item.small {
    width: 48.175%;
    padding: 3.5% 2.75%;
    font-size: 1.125em
}
.banners .static .item.black {
    color: #282828
}
.banners .static .item.top {
    align-items: flex-start
}
.banners .static .item.bottom {
    align-items: flex-end
}
.banners .static .item.center .text {
    text-align: center
}
.banners .static .item.right .text {
    text-align: right
}
.banners.has-static .carousel {
    width: 64.8%
}
.banners.has-static .carousel .item .text {
    margin: 0 12.7%
}
.banners.has-static .carousel .item.right .text {
    margin-left: auto
}
.banners.static-left .static {
    order: -1;
    margin: 0 1.409% 0 0
}
.banners.center {
    justify-content: space-between
}
.banners.center .carousel {
    width: 100%
}
.banners.center .static {
    width: 16.26%;
    margin: 0
}
.banners.center .static .item {
    width: 100%;
    padding: 7%
}
.banners.center.has-static .carousel {
    width: 64.6%;
    margin: 0;
    flex-grow: 1
}
.banners.center.has-static .carousel .item .text {
    margin: 0 12.7%
}
.banners.center.has-static .carousel .item.right .text {
    margin-left: auto
}
.banners.center.has-static .carousel + .static {
    margin-left: 1.41%
}
.banners.center.has-static .static + .carousel {
    margin-left: 1.41%
}
.banners + .products.main-nav {
    margin-top: 3.1%
}

@media (max-width: 1550px) {
    body.sidebar-type2 .banners:not(.center) .static .item.small, body.sidebar-type3 .banners:not(.center) .static .item.small {
        width: 45%
    }
}
@media (max-width: 1270px) {

    .banners {
        flex-wrap: wrap
    }
    .banners .carousel {
        overflow: hidden
    }
    .banners .carousel .item {
        height: 39.3vw
    }
    .banners .carousel .item .text {
        margin: 0 8.5%
    }
    .banners .carousel .owl-nav {
        bottom: 11.75%;
        padding: 0 6.5%
    }
    .banners .carousel .owl-dots {
        bottom: 8.35%;
        padding: 0 4.2%
    }
    .banners .static {
        margin: 0 0 -12px
    }
    .banners .static .item {
        width: 100%;
        margin: 0 0 24px
    }
    .banners .static .item.large {
        height: auto
    }
    .banners .static .item.large .name {
        min-height: 36px
    }
    .banners .static .item.medium {
        height: auto;
        padding: 9% 4.85%
    }
    .banners .static .item.medium:first-child {
        margin-bottom: 24px
    }
    .banners .static .item.medium .name {
        min-height: 23px
    }
    .banners .static .item.small {
        width: 25%;
        height: 18.75vw;
        padding: 3.5% 2.75%;
        order: 1;
        flex-grow: 1
    }
    .banners .static .item.small .name {
        min-height: 23px
    }
    .banners.has-static .carousel {
        width: 100%
    }
    .banners.has-static .carousel .item .text {
        margin: 0 8.5%
    }
    .banners.has-static .static {
        width: 100%;
        margin-top: 24px
    }
    .banners.static-left .static {
        order: 1;
        margin: 24px 0 0
    }
    .banners.center .carousel {
        order: -1;
        margin: 0 0 12px
    }
    .banners.center .static {
        width: 50%;
        flex-grow: 1
    }
    .banners.center .static .item {
        margin-bottom: 0
    }
    .banners.center.has-static .carousel {
        width: 100%;
        margin: 0
    }
    .banners.center.has-static .carousel + .static {
        margin-left: 0
    }
    .banners.center.has-static .static + .carousel {
        margin-left: 0
    }
    .sidebar-type4 .banners.has-static .carousel {
        width: 100%
    }
}
@media (max-width: 1024px) {
    .banners {
        margin-top: 27px
    }
    .banners .carousel .item {
        height: 46.2vw
    }
    .banners .carousel .item .name {
        margin-top: 6px
    }
    .banners .carousel .item .text {
        margin: 0 9.85%
    }
    .banners .carousel .owl-nav {
        bottom: 13.5%;
        padding: 0 7.5%
    }
    .banners .carousel .owl-dots {
        bottom: 9.45%;
        padding: 0 4.8%
    }
    .banners .static .item.medium {
        padding: 6.5% 5.6%
    }
    .banners .static .item.small {
        height: 22.75vw
    }
}
@media (max-width: 767px) {
    .banners {
        margin-top: 24px
    }
    .banners .carousel .owl-stage {
        display: flex
    }
    .banners .carousel .owl-stage .owl-item {
        display: flex;
        flex-shrink: 0
    }
    .banners .carousel .item {
        align-items: flex-start;
    }
    .banners .carousel .item .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 30px 20px 40px;
        text-align: center;
        box-sizing: border-box
    }
    .banners .carousel .item .name {
        margin-top: 0;
        font-size: 1.5em
    }
    .banners .carousel .item .name br + b {
        margin-top: 4px
    }
    .banners .carousel .item .name br + small {
        margin-top: 14px;
        font-size: 0.585em
    }
    .banners .carousel .item .button {
        margin-top: 20px
    }
    .banners .carousel .item.right .text {
        width: 100%;
        margin: 0
    }
    .banners .carousel .owl-dots {
        bottom: 15px;
        text-align: center;
        box-sizing: border-box
    }
    .banners .static .item {
        padding: 6.75% 9.25%
    }
    .banners .static .item.large {
        padding: 9.75% 9.25%
    }
    .banners .static .item.large .name {
        min-height: 28px;
        font-size: 1.75em;
        line-height: 1em
    }
    .banners .static .item.medium {
        padding: 9.75% 9.25%
    }
    .banners .static .item.small {
        width: calc((100% - 24px) / 2);
        height: 43vw;
        padding: 3.25% 3.75%;
        flex-grow: 0
    }
    .banners.has-static .carousel .item .text {
        margin: 0
    }
    .banners.has-static .carousel .item.right .text {
        margin: 0
    }
    .banners.center .static {
        width: 100%
    }
    .banners.center .static .item {
        flex-grow: 1
    }
    .banners.center .static .item:not(:first-child) {
        margin-left: 24px
    }
    .banners.center.has-static .carousel .item .text {
        margin: 0
    }
    .banners.center.has-static .carousel .item.right .text {
        margin: 0
    }
}
@media (max-width: 480px) {
    .banners .static {
        margin-bottom: 0
    }
    .banners .static .item {
        margin-bottom: 12px
    }
    .banners .static .item.large {
        padding: 9.5% 6.75%
    }
    .banners .static .item.large .name {
        font-size: 1.25em;
        min-height: 20px
    }
    .banners .static .item.medium {
        padding: 19.5% 6.75%;
        font-size: 1.25em
    }
    .banners .static .item.medium:first-child {
        margin-bottom: 12px
    }
    .banners .static .item.medium + .medium {
        margin-top: 12px
    }
    .banners .static .item.small {
        width: calc((100% - 12px) / 2);
        font-size: 0.875em;
        line-height: 1.25em
    }
    .banners.has-static .static {
        margin-top: 12px
    }
    .banners.center .static {
        flex-wrap: nowrap
    }
    .banners.center .static .item {
        margin-bottom: 0
    }
    .banners.center .static .item:not(:first-child) {
        margin-left: 12px
    }
}