.mk-background-switcher { position: relative; overflow: hidden }
.mk-background-switcher .bg-switcher-items { position:absolute; display:block; bottom:127px; width:100%; left:50%; transform: translateX(-50%); z-index:11; display: flex; align-items: center; justify-content: center; }
.mk-background-switcher .bg-switcher-item { padding: 0; position: relative; z-index: 2; border: 1px solid var(--swm-color-light-1);  display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; float:left; width:100%; max-width:250px; background:transparent; webkit-transition: all .3s ease; transition: all .3s ease; background:transparent; width:100%; border-right:0; }

/*images*/
.mk-background-switcher .bg-switcher-images { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 22; }
.mk-background-switcher .bg-switcher-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: all .5s ease; transition: all .5s ease; background-size: cover; background-position: center center; z-index: 1; }
.mk-background-switcher .bg-switcher-image.active-item { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 }
.mk-background-switcher .bg-switcher-image.active-item { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1 }

/*content*/
.mk-background-switcher .bg-switcher-content { width: 100%; display: flex; flex-direction: column; z-index: 5; position: relative; height:100%; justify-content:center; align-items:center; padding:20px 30px; }
.mk-background-switcher .bg-switcher-title { font-size: 27px; line-height: 1.35em; font-size:20px; text-transform:uppercase; }

.mk-background-switcher .bg-switcher-counterLink { width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; overflow:hidden; position: relative; z-index: 1; display: block; flex-shrink: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mk-background-switcher .bg-switcher-counterLink span { position: absolute; bottom:0; left: 0; width:100%; height:100%; overflow: hidden; -webkit-transition: all .3s ease; transition: all .3s ease; }
.mk-background-switcher .bg-switcher-counter { font-family: var(--swm-headings-font-family); font-size:var(--body-font-size); font-weight: var(--swm-headings-font-weight); letter-spacing: 1px; left: 0; opacity: 1; visibility: visible; }
.mk-background-switcher .bg-switcher-link { left: -100%; opacity: 0; visibility: hidden; }
.mk-background-switcher .bg-switcher-link a { position: relative; width: 100%; height: 100%; }
.mk-background-switcher .bg-switcher-link a:before { font-family: "swm-font-icon"; font-size:22px; font-style: normal; font-weight: normal; transform: rotate(-45deg); width: 100%; height: 100%; display: block; -webkit-transition: all .3s ease; transition: all .3s ease; }
.mk-background-switcher .bg-switcher-link a:hover:before { transform: rotate(0deg); }
.mk-background-switcher .bg-switcher-content-top { display: flex; justify-content: space-between; width: 100%; align-items: flex-end; }

.mk-background-switcher .bg-switcher-item .bg-switcher-content-bottom { display:block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position:absolute; top:0; left: -1px; z-index:-1; opacity:0; visibility:hidden; width:calc(100% + 2px); }

.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-content-bottom { opacity:1; visibility:visible; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-content-bottom,
.mk-background-switcher .bg-switcher-item:hover .bg-switcher-content-bottom { overflow: visible;  }
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counter,
.mk-background-switcher .bg-switcher-item:hover .bg-switcher-counter { left: 100%; opacity: 0; visibility: hidden; font-size: 0; }
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-link,
.mk-background-switcher .bg-switcher-item:hover .bg-switcher-link { left: 0; opacity: 1; visibility: visible; }
.mk-background-switcher .bg-switcher-counterLink.empty-link .bg-switcher-counter { left: 0; opacity: 1; visibility: visible; font-size:var(--body-font-size); }

.mk-background-switcher .bg-switcher-content-bottom .bg-switcher-text { display:block; padding:35px; }

.bg-switcher-items { height:100px; }

.mk-background-switcher .bg-switcher-item:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; webkit-transition: all .3s ease; transition: all .3s ease; background:transparent;  }
.mk-background-switcher .bg-switcher-item.active-item:before { background:var(--swm-color-light-1); }
.mk-background-switcher .bg-switcher-titleSubtitle { position:relative; z-index:1; color:var(--swm-color-dark-1); }

.mk-background-switcher .bg-switcher-title,
.mk-background-switcher .bg-switcher-title a,
.mk-background-switcher .bg-switcher-content-bottom,
.mk-background-switcher .bg-switcher-counterLink,
.mk-background-switcher .bg-switcher-counterLink a:hover,
.mk-background-switcher .bg-switcher-counter { color: var(--swm-color-light-1); }

.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-title,
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-title a,
.mk-background-switcher .bg-switcher-item:hover .bg-switcher-title,
.mk-background-switcher .bg-switcher-item:hover .bg-switcher-title a,
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink,
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink a,
.mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink.empty-link .bg-switcher-counter { color:var(--swm-color-dark-1); }

.mk-background-switcher .bg-switcher-counterLink,
.mk-background-switcher .bg-switcher-counterLink a { color: var(--swm-color-light-1); }

.mk-background-switcher .bg-switcher-item:last-child { border-right:1px solid var(--swm-color-light-1); }

.mk-background-switcher .bg-switcher-item .bg-switcher-content-bottom { background: var(--swm-color-dark-1); border-bottom:1px solid var(--swm-color-light-1); color: var(--swm-color-light-1); }

/*Mobile*/
@media only screen and (max-width:1024px) {
    .mk-background-switcher .bg-switcher-item-image { display: block; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; position: relative; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
    .mk-background-switcher .bg-switcher-item .bg-switcher-counter { left: 100%; opacity: 0; visibility: hidden; font-size: 0; }
    .mk-background-switcher .bg-switcher-item .bg-switcher-link { left: 0; opacity: 1; visibility: visible; }
    .mk-background-switcher .bg-switcher-item::before { display: none; }

    .mk-background-switcher .bg-switcher-images { display:none; }

    .mk-background-switcher .bg-switcher-content-bottom .bg-switcher-text,
    .mk-background-switcher .bg-switcher-content { padding:25px; }

    .mk-background-switcher .bg-switcher-content { justify-content:flex-end; }

    .mk-background-switcher .bg-switcher-items { display: block; position: relative; bottom: auto; transform: translateX(0); left: 0;  }

    .mk-background-switcher .bg-switcher-item .bg-switcher-content-bottom { border: 0; position: relative; opacity: 1; visibility: visible; width: 100%; left: 0; z-index: 11;  }

    .mk-background-switcher .bg-switcher-items .bg-switcher-item { float: none; position: relative; bottom: auto; margin-bottom: 1px; }

    #swm-page .mk-background-switcher .bg-switcher-items { height: auto; }
    #swm-page .mk-background-switcher .bg-switcher-item .bg-switcher-content-bottom { height:auto; max-height:auto; top:auto; }
    #swm-page .mk-background-switcher .bg-switcher-items .bg-switcher-item { max-width: 100%; width: 100%; }

    .mk-background-switcher .bg-switcher-item.active-item .bg-switcher-title,
    .mk-background-switcher .bg-switcher-item.active-item .bg-switcher-title a,
    .mk-background-switcher .bg-switcher-item:hover .bg-switcher-title,
    .mk-background-switcher .bg-switcher-item:hover .bg-switcher-title a,
    .mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink,
    .mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink a,
    .mk-background-switcher .bg-switcher-item.active-item .bg-switcher-counterLink.empty-link .bg-switcher-counter { color:var(--swm-color-light-1); }

}