.snn-header-animation {
    position: absolute;
    bottom: 85px;
    right: 20px
}

.snn-header-animation lottie-player {
    width: 600px;
    height: 600px
}

.snn__headslide-bg {
    height: 600px
}

.sliders-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.sliders-header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 170px
}

.ms--images-header {
    position: relative;
    overflow: hidden
}

.ms--images-header.ms-container--horizontal {
    width: 100%;
    height: 620px;
    max-width: 100%;
    top: -160px
}

.ms--images-header.ms-container--horizontal .ms-track {
    left: calc(80% - 390px);
    top: 25%
}

.ms--images-header.ms-container--horizontal .ms-slide {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.ms--images-header .ms-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none
}

.ms--images-header .ms-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 760px;
    height: 730px;
    padding-left: 113px;
    padding-right: 113px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ms--images-header {
    left: calc(0%)
}

.ms--images-header .ms-slide:nth-child(1) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-04.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide:nth-child(2) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-05.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide:nth-child(3) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-06.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide:nth-child(4) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-04.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide:nth-child(5) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-04.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide:nth-child(6) .ms-slide__image.mheader {
    background-image: url(../snn_assets/snn_img/snn_header/headmenu-object-04.png);
    background-size: contain;
    background-repeat: no-repeat
}

.ms--images-header .ms-slide__image-container {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.ms--images-header .ms-slide__image {
    width: 100%;
    height: 100%;
    background-size: cover
}

.ms--numbers {
    position: relative;
    overflow: hidden
}

.ms--numbers.ms-container--horizontal {
    width: 240px;
    height: 240px;
    max-width: 100%
}

.ms--numbers.ms-container--horizontal .ms-track {
    left: calc(50% - 120px)
}

.ms--numbers.ms-container--horizontal .ms-slide {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.ms--numbers .ms-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none
}

.ms--numbers .ms-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ms--numbers {
    position: absolute;
    left: calc(50% - 380px);
    top: calc(50% - 300px);
    z-index: -1;
    pointer-events: none
}

.ms--numbers .ms-slide {
    font-size: 9em;
    font-weight: 900;
    color: rgba(0, 0, 0, .2)
}

.ms--titles-header {
    position: relative;
    overflow: hidden
}

.ms--titles-header.ms-container--vertical {
    width: 600px;
    height: 600px
}

.ms--titles-header.ms-container--vertical .ms-track {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    top: calc(50% - 105px)
}

.ms--titles-header.ms-container--vertical.ms-container--reverse .ms-track {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    top: auto;
    bottom: calc(72%)
}

.ms--titles-header.ms-container--vertical .ms-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ms--titles-header .ms-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none
}

.ms--titles-header .ms-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 600px;
    height: 170px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ms--titles-header {
    position: absolute;
    left: calc(3%);
    top: calc(-10%);
    z-index: 1;
    pointer-events: none
}

.ms--titles-header .ms-track {
    white-space: normal
}

.ms--titles-header .ms-slide {
    font-size: 3.3em;
    font-weight: 600
}

.ms--titles-header .snn-detail-main {
    top: 25px;
    position: relative
}

.ms--titles-header .snn-detail-main img {
    width: 600px
}

.ms--bg-header {
    overflow: hidden;
    position: absolute;
    top: calc(-15%);
    right: 0;
    z-index: 0;
    pointer-events: none;
    width: 600px;
    height: 550px
}

.ms--bg-header .ms-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    white-space: normal;
    padding: 0;
    margin: 0;
    list-style: none
}

.ms--bg-header .ms-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 600px;
    height: 170px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 3.3em;
    font-weight: 600
}

.ms--bg-header .snn-bg-header-main {
    position: relative
}

.ms--bg-header .snn-bg-header-main img {
    width: 600px
}

.ms--links {
    position: relative;
    overflow: hidden
}

.ms--links.ms-container--vertical {
    width: 120px;
    height: 60px;
    max-height: 100%
}

.ms--links.ms-container--vertical .ms-track {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    top: calc(50% - 30px)
}

.ms--links.ms-container--vertical .ms-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.ms--links .ms-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none
}

.ms--links .ms-slide {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 120px;
    height: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ms--links {
    position: absolute;
    left: calc(50% - 420px);
    top: calc(50% + 105px);
    z-index: 1
}

.ms--links .ms-track {
    white-space: normal
}

.ms--links .ms-slide__link {
    font-weight: 600;
    padding: 8px 0 8px;
    background-image: -o-linear-gradient(135deg, #f0ba00 0, #ffd800 100%);
    background-image: linear-gradient(315deg, #f0ba00 0, #ffd800 100%);
    border-radius: 333px;
    text-align: center
}

.pagination-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: calc(95% - 50px);
    top: calc(72%);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 1
}

.pagination__button-header {
    display: inline-block;
    position: relative;
    width: 6px!important;
    height: 20px;
    margin: 0 2px;
    cursor: pointer
}

.pagination__button-header:after,
.pagination__button-header:before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    width: 100%
}

.pagination__button-header:before {
    height: 6px;
    background-color: #e4e4e4;
    border-radius: 333px
}

.pagination__button-header:after {
    height: 6px;
    border-radius: 333px;
    background-color: #f0ba00;
    opacity: 0;
    -webkit-transition: .5s opacity;
    -o-transition: .5s opacity;
    transition: .5s opacity
}

.pagination__item--active .pagination__button-header {
    width: 22px!important
}

.pagination__item--active .pagination__button-header:after {
    opacity: 1
}

@media screen and (max-width:1600px) {
    .ms--images-header.ms-container--horizontal .ms-track {
        left: calc(75% - 350px)
    }
}

@media screen and (max-width:1400px) {
    .ms--images-header.ms-container--horizontal .ms-track {
        left: calc(70% - 350px)
    }
    .ms--titles-header.ms-container--vertical .ms-track {
        top: calc(50% - 85px)
    }
    .ms--titles-header .ms-slide,
    .ms--titles-header .snn-detail-main img,
    .ms--titles-header.ms-container--vertical {
        width: 400px
    }
    .ms--titles-header.ms-container--vertical.ms-container--reverse .ms-track {
        bottom: calc(80%)
    }
}

@media screen and (max-width:1200px) {
    .ms--images-header.ms-container--horizontal .ms-track {
        left: calc(60% - 350px)
    }
}

@media screen and (max-width:860px) {
    .snn__headslide-bg {
        height: 560px
    }
    .section-sliders-header.section {
        max-width: 1400px
    }
    .snn-header-animation {
        display: block;
        bottom: initial;
        right: initial
    }
    .ms--images-header {
        left: calc(50% - 280px)
    }
    .ms--numbers {
        left: calc(50% - 120px)
    }
    .ms--titles-header {
        left: calc(50% - 200px);
        top: calc(20% - 100px);
        text-align: center
    }
    .ms--links {
        left: calc(50% - 60px);
        top: calc(50% + 80px)
    }
    .pagination-header {
        left: 50%;
        top: calc(100% - 50px);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .ms--titles-header .snn-detail-main img {
        width: 355px
    }
    .ms--titles-header.ms-container--vertical {
        height: 550px
    }
    .ms--bg-header {
        top: calc(50% - 160px);
        right: auto;
        width: 420px
    }
    .ms--bg-header .snn-bg-header-main img {
        width: 420px
    }
    .ms--images-header.ms-container--horizontal {
        height: 400px;
        top: initial
    }
    .ms--images-header.ms-container--horizontal .ms-track {
        left: -70px;
        top: initial
    }
    .ms--images-header .ms-slide__image-container {
        width: 80%;
        height: 80%
    }
    .ms--images-header .ms-slide {
        width: 700px
    }
}

@media screen and (max-width:600px) {
    .ms--images-header {
        overflow: visible
    }
}

@media screen and (max-width:450px) {
    .ms--titles-header .ms-slide {
        font-size: 3.3em
    }
    .ms--titles-header {
        top: calc(20% - 185px)
    }
    .pagination-header {
        left: 85%;
        top: calc(100% - 10px);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .ms--titles-header.ms-container--vertical.ms-container--reverse .ms-track {
        bottom: calc(70%)
    }
    .ms--titles-header .ms-slide {
        -webkit-transform: scale(.8);
        -ms-transform: scale(.8);
        transform: scale(.8)
    }
}

@media screen and (max-width:390px) {
    .ms--images-header.ms-container--horizontal .ms-track {
        left: -62px;
        top: 34px
    }
    .ms--images-header .ms-slide .ms-slide__image.mheader {
        width: 350px
    }
}

@media screen and (max-width:350px) {
    .snn__headslide-bg {
        height: 512px
    }
    .sliders-header {
        top: 120px
    }
    .ms--titles-header {
        top: calc(20% - 156px)
    }
    .ms--titles-header .snn-detail-main img {
        width: 355px
    }
    .ms--images-header.ms-container--horizontal .ms-track {
        left: -50px;
        top: 60px
    }
    .ms--images-header .ms-slide .ms-slide__image.mheader {
        width: 320px
    }
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.container-headers {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 700px
}

.header__logo {
    font-size: 1.3em;
    font-weight: 900;
    letter-spacing: -1px
}

.header__logo span {
    display: inline-block;
    -webkit-transform: translateY(4px) rotate(180deg);
    -ms-transform: translateY(4px) rotate(180deg);
    transform: translateY(4px) rotate(180deg);
    pointer-events: none
}

.header__menu {
    margin-left: auto
}

.footer__menu__list,
.header__menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0
}

.header__menu__link {
    margin-left: 50px
}

.footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px
}

.footer__menu__link {
    margin-left: 50px;
    color: rgba(0, 0, 0, .5)
}

@media screen and (max-width:860px) {
    .container-headers {
        min-height: 100vh
    }
    .footer,
    .header__menu {
        display: none
    }
}