:root {
    --h1: 58px;
    --h2: 38px;
    --h3: 28px;
    --h4: 20px;
    --h5: 16px;
    --h6: 14px;
    --small_text: 12px;
    --width-base: 1160;
    --width-current: 100vw;
    --width-multiplier: 1px
}

@media screen and (max-width: 1256px) {
    :root {
        --width-multiplier:var(--width-current) /var(--width-base)
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --h1:38px;
        --h2: 28px;
        --h3: 20px;
        --h4: 16px;
        --width-base: 1024
    }
}

@media screen and (max-width: 680px) {
    :root {
        --h1:28px;
        --h2: 20px;
        --h3: 16px;
        --h4: 14px;
        --h5: 14px;
        --small_text: 12px;
        --width-base: 680
    }
}

.box_shadow {
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08)
}

.box_shadow_clear {
    box-shadow: none
}

.border_radius {
    border-radius: 2px
}

.border_radius_4 {
    border-radius: 4px
}

.border_radius_8 {
    border-radius: 8px
}

.border_radius_20 {
    border-radius: 20px
}

.border_radius_clear {
    border-radius: 0
}

.circle {
    border-radius: 50%
}

.box {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    padding: 8px
}

.flex_direction_column {
    flex-direction: column
}

.transition {
    transition: .2s ease-in-out
}

.transition_directive_animate {
    transition: .5s linear
}

.default_translate {
    transform: translateY(-5px)
}

.default_box_shadow {
    box-shadow: 3px 4px 9px 0 rgba(34,60,80,.2)
}

.border_radius_32 {
    border-radius: 32px
}

.progress-ring {
    height: 50px;
    width: 50px
}

.progress-ring-circle {
    stroke: rgba(0,0,0,.1);
    stroke-width: 1;
    fill: none
}

.progress-ring-ring {
    stroke: #fff;
    stroke-width: 4;
    fill: none
}

.progress-ring-end {
    fill: #007fff
}

.container {
    margin: 0 auto;
    max-width: 1200px
}

.footer_main {
    margin: 0
}

.linkTitle {
    margin: 0 0 10px;
    position: relative;
    text-decoration: none;
    transition: .2s ease-in-out
}

.linkTitle:after {
    background: #000;
    bottom: -4px;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    opacity: 1;
    position: absolute;
    transition: .2s ease-in-out;
    width: 100%
}

.linkTitle:hover {
    color: #e94b51
}

.linkTitle:hover:after {
    bottom: -8px;
    opacity: 0
}

.linkTitle .link {
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5
}

.linkTitle.white:after {
    background: #fff
}

.padding-content {
    padding: 22px
}

.mobile_text {
    font-size: 16px;
    line-height: 1.1em
}

.title-large,.title-medium,.title-small {
    color: #000;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.title-large {
    font-size: 75px
}

.title-medium {
    font-size: 58px
}

.title-small {
    font-size: 36px;
    line-height: 46px
}

.text-medium {
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px
}

.text-medium.gray {
    color: #9ba0b2
}

.button {
    align-items: center;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    height: 64px;
    justify-content: center;
    line-height: normal;
    margin: 48px 0 22px;
    position: relative;
    text-decoration: none;
    transition: .2s ease-in-out;
    width: 461px;
    z-index: 1
}

.button.green-button {
    background-color: #5cb585
}

.button.green-button:hover {
    background-color: #45996c;
    color: #fff
}

.button.orange-button {
    background-color: #ef5f31
}

.button.orange-button:hover {
    background-color: #dc4211;
    color: #fff
}

.button.dark-button {
    background-color: #000
}

.button.dark-button:hover {
    background-color: #333;
    color: #fff
}

.button-link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.main-block {
    background-image: #fff -webkit-image-set(url(/img/indexPage/NEW_main_background_final.webp) type("image/webp"),url(/img/indexPage/NEW_main_background_final.png)) no-repeat 50% 70%;
    background-image: #fff image-set(url(/img/indexPage/NEW_main_background_final.webp) type("image/webp"),url(/img/indexPage/NEW_main_background_final.png)) no-repeat 50% 70%;
    background-size: cover;
    padding: 60px 0 40px;
    position: relative
}

.main-block .overlay {
    background: rgba(0,0,0,.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 7
}

.main-block-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
    z-index: 9
}

.main-block-logo {
    margin: 0 0 20px
}

@keyframes pulsate {
    50% {
        stroke-width: 2px
    }
}

.main-block-subtitle {
    color: #000;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px;
    margin: 0 0 32px;
    text-align: center;
    width: 68.96552%
}

.main-block-search {
    position: relative;
    width: 98.96552%
}

.main-block-search .mainAutocomplete {
    width: 100%
}

.main-block-search .mainAutocomplete .main_search {
    background-position: 12px 50%;
    background-size: 40px;
    border-color: #9ba0b2;
    border-radius: 20px;
    font-size: 1.2em;
    height: 58px;
    padding: 8px 4px 4px 76px
}

.main-block-search .mainAutocomplete .result {
    border-radius: 20px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.08)
}

.main-block-video {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.access {
    background-color: #fff;
    padding: 92px 0 56px
}

.access-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.access-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.access-top {
    grid-column-gap: 32px;
    grid-row-gap: 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr;
    margin: 0 0 42px
}

.access-top .card {
    background-color: #fbfbfb;
    border-radius: 20px;
    color: #000;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 22px 32px 30px;
    position: relative;
    text-decoration: none;
    transition: .2s ease-in-out
}

.access-top .card span {
    display: block
}

.access-top .card-title {
    font-family: Roboto,sans-serif;
    transition: .2s ease-in-out
}

.access-top .card-type {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 12px;
    transition: .2s ease-in-out
}

.access-top .card-text {
    flex: 1;
    line-height: 21px;
    margin: 0 4px 0 0
}

.access-top .card-date,.access-top .card-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    transition: .2s ease-in-out
}

.access-top .card-date {
    color: #9ba0b2;
    line-height: normal;
    margin: 14px 0 0
}

.access-top .card:hover {
    background-color: #101010;
    box-shadow: 3px 4px 9px 0 rgba(34,60,80,.2);
    transform: translateY(-5px)
}

.access-top .card:hover .card-date,.access-top .card:hover .card-text,.access-top .card:hover .card-title,.access-top .card:hover .card-type {
    color: #fff
}

.access-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 20px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: 1fr;
    margin: 0 0 20px
}

.access-bottom .card {
    background-color: #fbfbfb;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 22px 30px 48px;
    position: relative
}

.access-bottom .card span {
    display: block
}

.access-bottom .card-type {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 12px;
    z-index: 5
}

.access-bottom .card-text {
    flex: 1;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    margin: 0 4px 0 0
}

.access-bottom .card-img {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 4
}

.clients {
    padding: 64px 0
}

.clients-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.clients-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.clients-title {
    margin: 0 0 50px;
    text-align: center
}

.clients-content {
    align-items: start;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 0 12px
}

.clients-cards {
    margin: 0 14px 0 0;
    width: 45.45455%
}

.clients-left {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 474px
}

.clients-left-item {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin: 0 12px 22px 0;
    min-height: 80px;
    min-width: 146px;
    padding: 15px 50px;
    position: relative;
    transition: .2s ease-in-out
}

.clients-left-item:hover {
    box-shadow: 3px 4px 9px 0 rgba(34,60,80,.2)
}

.clients-left-item .img {
    bottom: 0;
    box-sizing: border-box;
    height: 80%;
    left: 0;
    margin: auto;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    right: 0;
    top: 0;
    width: 70%
}

.clients-left-line {
    align-items: start;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    width: 100%
}

.clients .card-client {
    margin: 0 0 44px
}

.clients .card-client:last-child {
    margin: 0
}

.clients .card-client-right {
    align-items: start;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start
}

.clients .card-client-right-img {
    margin: 0 28px 0 0
}

.clients .card-client-right-img .img {
    border-radius: 50%;
    height: 89px;
    width: 89px
}

.clients .card-client-top {
    align-items: start;
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    margin: 0 0 4px
}

.clients .card-client-top-name {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 8px 0 0
}

.clients .card-client .info {
    color: #9ba0b2;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.clients .card-client-post {
    margin: 0 0 8px
}

.clients .card-client-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    height: auto;
    line-height: normal;
    width: 100%
}

.clients .card-client-text [v-cloak] {
    display: none
}

.clients .show {
    cursor: pointer;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 30px 0 0;
    position: relative;
    transition: .2s ease-in-out;
    width: 414px
}

.clients .show span {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: start;
    position: absolute;
    right: 0;
    top: 2px
}

.clients .show span svg path {
    transition: .2s ease-in-out
}

.clients .show:hover {
    color: #7e859c
}

.clients .show:hover path {
    fill: #7e859c
}

.clients .hide {
    cursor: pointer;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 30px 0 0;
    position: relative;
    transition: .2s ease-in-out;
    width: 330px
}

.clients .hide span {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: start;
    position: absolute;
    right: 0;
    top: 2px
}

.clients .hide span svg {
    transform: rotate(180deg)
}

.clients .hide span svg path {
    transition: .2s ease-in-out
}

.clients .hide:hover {
    color: #7e859c
}

.clients .hide:hover path {
    fill: #7e859c
}

.cards-it {
    background-color: transparent;
    padding: 0 0 40px
}

.cards-it-wrapper {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.cards-it-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.cards-it-wrapper .card {
    background-color: #fbfbfb;
    border-radius: 20px;
    flex: 1 0;
    padding: 24px 36px;
    position: relative;
    transition: .2s ease-in-out
}

.cards-it-wrapper .card:hover {
    background-color: #e2e2e2;
    box-shadow: 3px 4px 9px 0 rgba(34,60,80,.2);
    transform: translateY(-5px)
}

.cards-it-wrapper .card-link {
    border-radius: 20px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.cards-it-wrapper .card-wrapper {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between
}

.cards-it-wrapper .card-title {
    color: #000;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.cards-it-wrapper .card-title-link {
    text-decoration: none
}

.cards-it-wrapper .card-isin {
    color: #9ba0b2;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px
}

.cards-it-wrapper .card-bottom {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: end;
    margin-top: 10px
}

.cards-it-wrapper .card-bottom-name {
    color: #9ba0b2;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px
}

.cards-it-wrapper .card-bottom-percent {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.bonds-block {
    background-color: #333b50;
    background-repeat: no-repeat;
    padding: 64px 0
}

.bonds-block-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.bonds-block-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.bonds-block-title {
    color: #fff;
    line-height: .9em;
    text-align: center
}

.bonds-block-intro-title {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 36px;
    padding: 22px 0 0;
    text-align: center;
    width: 880px
}

.bonds-block-content {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 36px
}

.bonds-block-content-last {
    margin: 0
}

.bonds-block-content-desktop {
    display: block
}

.bonds-block-content-mobile {
    display: none
}

.bonds-block-content .img {
    width: 100%
}

.watchlist {
    background-color: #101010;
    padding: 100px 0
}

.watchlist-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.watchlist-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.watchlist-intro-title,.watchlist-title {
    color: #fff;
    text-align: center
}

.watchlist-intro-title {
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 36px;
    padding: 22px 0 0;
    width: 500px
}

.watchlist-content {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 36px
}

.watchlist-content-image {
    margin: 0 0 50px
}

.watchlist-content-image:last-child {
    margin: 0
}

.watchlist-content-image .img {
    width: 100%
}

.watchlist-block-content-mobile {
    display: none
}

.watchlist-bottom {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 36px 0 48px;
    width: 100%
}

.watchlist-bottom-image {
    background-color: #fff;
    border-radius: 20px;
    width: 55%
}

.watchlist-bottom-image .img {
    width: 100%
}

.watchlist-items {
    transform: translateY(50px);
    transition: .5s linear;
    width: 40%
}

.watchlist-items._active {
    transform: translateY(0)
}

.watchlist-item {
    background-color: #262626;
    border-radius: 8px;
    color: #fff;
    font-size: 26px;
    margin: 0 0 36px;
    padding: 32px 36px;
    width: 100%
}

.watchlist-item:last-child {
    margin: 0
}

.addin {
    background-color: #d1e9e8;
    padding: 100px 0
}

.addin-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.addin-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.addin-title {
    line-height: .9em;
    margin: 0 0 16px
}

.addin-subtitle,.addin-title {
    text-align: center
}

.addin-intro-title {
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 55px;
    padding: 28px 0 0;
    text-align: center
}

.addin-content {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 36px
}

.addin-content-image {
    position: relative
}

.addin-content-image .img {
    width: 100%
}

.addin-content .aside {
    background-color: #f0f0f0;
    border-radius: 20px;
    bottom: -40px;
    height: calc(100% + 100px);
    padding: 16px;
    position: absolute;
    right: -23px
}

.addin-content .aside .image {
    height: 100%;
    width: 100%
}

.addin-info {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 36px 0 0
}

.addin-info .item {
    width: 20%
}

.addin-info .item-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.addin-info .item-text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.data-api {
    background-color: #333b50;
    padding: 100px 0
}

.data-api-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.data-api-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.data-api-title {
    color: #fff;
    line-height: .9em;
    margin: 0 0 10px;
    text-align: center
}

.data-api-intro {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center
}

.data-api-intro-title {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto;
    padding: 22px 0 0;
    text-align: center;
    width: 83.33333%
}

.data-api-content {
    margin: 0 0 36px
}

.data-api-content .img {
    max-width: 100%
}

.data-api-info {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.data-api-info .item {
    margin: 0 10px 32px 0;
    width: 25%
}

.data-api-info .item-title {
    color: #fff;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 4px
}

.data-api-info .item-text {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.data-api-demo {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    padding: 26px 0
}

.data-api-demo .card {
    align-items: start;
    background: #ffffff33;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    padding: 22px;
    position: relative;
    width: 100%
}

.data-api-demo .card-title {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 22px
}

.data-api-demo .card-item {
    flex: 1;
    margin: 0 0 22px
}

.data-api-demo .card-item:last-child {
    margin: 0
}

.data-api-demo .card-item-label {
    color: #9ba0b2;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 2px
}

.data-api-demo .card-item-text {
    color: #fff;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    height: 100%;
    line-height: normal
}

.mobile-app {
    background-color: #fbfbfb;
    padding: 64px 0
}

.mobile-app-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.mobile-app-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.mobile-app-title {
    text-align: center
}

.mobile-app-intro-title {
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 36px;
    padding: 22px 0 0;
    text-align: center;
    width: 500px
}

.mobile-app-content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0 0 40px;
    width: 100%
}

.mobile-app-info {
    align-items: start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    padding: 64px 0;
    text-align: start;
    width: 37.03704%
}

.mobile-app-info-title {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 8px
}

.mobile-app-info-download {
    align-items: start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: start;
    padding: 44px 0 0
}

.mobile-app-info-download-item {
    height: auto;
    margin: 0 0 22px;
    width: 220px
}

.mobile-app-info-download-item img {
    border-radius: 8px;
    display: block;
    height: 100%;
    transition: .2s ease-in-out;
    width: 100%
}

.mobile-app-info-download-item:hover svg {
    box-shadow: 3px 4px 9px 0 rgba(34,60,80,.2)
}

.mobile-app-info-download-item:last-child {
    margin: 0
}

.mobile-app .circle-wrapper {
    border-bottom-left-radius: 265px;
    border-bottom-right-radius: 265px;
    height: 600px;
    overflow-y: hidden;
    padding: 70px 0 0;
    position: relative;
    width: 530px
}

.mobile-app .circle-wrapper .phone {
    left: 15%;
    position: absolute;
    top: 15px;
    transition: .2s ease-in-out;
    z-index: 6
}

.mobile-app .circle-wrapper .phone:hover {
    transform: translateY(-15px)
}

.mobile-app .circle {
    background-color: #ef5f31;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.about {
    background-color: #101010;
    padding: 64px 0
}

.about-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.about-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.about-title {
    color: #fff;
    margin: 0 0 22px
}

.about-video {
    height: 750px;
    width: 100%
}

.about-video iframe {
    height: 100%;
    width: 100%
}

.indices {
    background-color: #f6f3ee;
    background-image: url(/img/indexPage/NEW_gray_line_index.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 64px 0
}

.indices--country {
    background-image: none
}

.indices--country .indices-tabs {
    gap: 12px
}

.indices--country .indices-tabs li {
    margin: 0;
    width: auto
}

.indices-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.indices-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.indices-title {
    cursor: pointer;
    line-height: .9em;
    text-align: center
}

.indices-intro-title {
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 22px;
    padding: 24px 0 0;
    text-align: center;
    width: 880px
}

.indices-content {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 36px
}

.indices-content .img {
    width: 100%
}

.indices-content-desktop {
    display: block
}

.indices-content-mobile {
    display: none
}

.indices-tabs {
    align-items: space-between;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: center;
    list-style: none;
    padding: 22px 0 0
}

.indices-tabs-title {
    font-size: 2em;
    margin: 50px 0 8px
}

.indices-tabs li {
    margin: 16px 0;
    width: 27%
}

.indices-tabs .tab {
    align-items: center;
    background-color: #fff;
    border-radius: 32px;
    color: #000;
    cursor: pointer;
    display: flex;
    font-size: 1.2em;
    justify-content: center;
    padding: 16px 22px;
    text-align: center;
    text-decoration: none;
    transition: .2s ease-in-out;
    word-break: break-word
}

.indices-tabs .tab:hover {
    background-color: #ef5f31;
    color: #fff;
    text-decoration: none;
    text-shadow: .9px 0 0 #fff,.9px 0 0 #fff
}

.indices .blue-tab,.indices .dark-tab,.indices .orange-tab {
    color: #fff
}

.indices .blue-tab:hover,.indices .dark-tab:hover,.indices .orange-tab:hover {
    background: #fff;
    border: #e8e8e8;
    color: #000
}

.indices .orange-tab {
    background: #ef5f31
}

.indices .dark-tab {
    background: #323232
}

.indices .blue-tab {
    background: #344066
}

.stock-block {
    background-color: #101010;
    padding: 64px 0
}

.stock-block-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.stock-block-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.stock-block-title {
    color: #fff;
    cursor: pointer;
    line-height: .9em;
    text-align: center
}

.stock-block-intro-title {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 22px;
    padding: 24px 0 0;
    text-align: center;
    width: 880px
}

.stock-block-content {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    margin: 0 0 36px
}

.stock-block-content .img {
    width: 100%
}

.stock-block-content-desktop {
    display: block
}

.stock-block-content-mobile {
    display: none
}

.etf-block {
    background-color: #333b50;
    padding: 64px 0
}

.etf-block-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.etf-block-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.etf-block-title {
    color: #fff;
    cursor: pointer;
    line-height: .9em;
    text-align: center
}

.etf-block-intro-title {
    color: #fff;
    font-family: Roboto,sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    margin: 0 auto 36px;
    padding: 24px 0 0;
    text-align: center;
    width: 76.92308%
}

.etf-block-intro-bottom {
    width: 100%
}

.etf-block-intro-bottom .etf-search-content {
    display: block;
    width: 100%
}

.etf-block-intro-bottom .etf-search-content-image {
    width: 100%
}

.etf-block-content {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 36px
}

.etf-block-content-image {
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: 22px
}

.etf-block-content .img {
    width: 100%
}

.etf-block-content-desktop {
    display: block
}

.etf-block-content-mobile {
    display: none
}

.etf-block-content .notice {
    background-color: #deeaf8;
    border-radius: 20px;
    padding: 22px;
    transform: translateY(200px);
    transition: .5s linear;
    width: 25%
}

.etf-block-content .notice._active {
    transform: translateY(0)
}

.etf-block-content .notice .img-notice {
    width: 100%
}

.contacts {
    background-color: #101010;
    padding: 44px 0
}

.contacts-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: .5s linear
}

.contacts-wrapper._active {
    opacity: 1;
    transform: translateY(0)
}

.contacts-title {
    color: #fff;
    font-size: 58px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 44px;
    text-align: center
}

.contacts-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center
}

.contacts-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 0 40px;
    width: 32%
}

.contacts-text {
    font-weight: 400;
    width: 100%
}

.contacts .country,.contacts-text {
    color: #fff;
    font-size: 22px;
    font-style: normal;
    line-height: normal
}

.contacts .country {
    font-weight: 700
}

.contacts .phone {
    color: #fff;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

@media (max-width: 1384px) {
    .container {
        padding:0 15px
    }
}

@media (max-width: 1024px) {
    .container {
        padding:0 15px
    }

    .tabs .tab {
        margin: 0 12px 20px 0
    }

    .title-medium,.title-small {
        line-height: 1em
    }

    .title-small {
        width: 100%
    }

    .main-block-video {
        display: none
    }

    .access-top .card .title-medium {
        font-size: 40px
    }

    .access-bottom .card-type {
        font-size: 18px
    }

    .clients {
        padding: 46px 0
    }

    .clients .card-client {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .clients .card-client-left-item {
        padding: 15px 20px
    }

    .bonds-block {
        padding: 46px 0
    }

    .bonds-block-intro-title {
        width: 100%
    }

    .watchlist {
        padding: 46px 0
    }

    .watchlist-intro-title {
        margin: 0 0 24px;
        width: 100%
    }

    .watchlist-bottom {
        flex-direction: column;
        padding: 20px 0 0
    }

    .watchlist-bottom-image {
        width: 100%
    }

    .watchlist-items {
        margin: 0 0 36px;
        width: 100%
    }

    .watchlist-item {
        font-size: 16px;
        padding: 24px 26px
    }

    .about,.mobile-app {
        padding: 46px 0
    }

    .mobile-app .circle-wrapper {
        border-bottom-left-radius: 215px;
        border-bottom-right-radius: 215px;
        height: 480px;
        padding: 50px 0 0;
        width: 430px
    }

    .mobile-app .circle-wrapper .phone {
        left: 10%;
        width: 80%
    }

    .indices {
        padding: 46px 0
    }

    .indices-intro-title {
        width: 100%
    }

    .indices-button {
        width: 95.2381%
    }

    .stock-block {
        padding: 46px 0
    }

    .stock-block-intro-title {
        width: 100%
    }

    .etf-block {
        padding: 46px 0
    }

    .etf-block-intro-title {
        width: 100%
    }
}

@media (max-width: 980px) {
    .main-block-search .mainAutocomplete {
        bottom:0;
        position: relative;
        width: 100%
    }
}

@media (max-width: 860px) {
    .mobile-app .circle-wrapper {
        margin-top:20px
    }

    .title-large {
        font-size: 64px;
        line-height: 1em
    }

    .title-medium {
        font-size: 36px;
        line-height: -3px
    }

    .text-medium.gray {
        font-size: 20px;
        line-height: 1.1em
    }

    .tabs .tab {
        height: auto
    }

    .access {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding: 30px 0;
        position: relative
    }

    .access-top {
        grid-template-columns: repeat(1,1fr)
    }

    .access-top .card {
        padding: 20px
    }

    .access-top .card .title-medium {
        font-size: 40px
    }

    .access-bottom {
        grid-template-columns: repeat(2,1fr)
    }

    .access-bottom .card {
        padding: 20px
    }

    .access-bottom .card-type {
        font-size: 18px
    }

    .access-bottom .card-img {
        bottom: 0;
        left: 0;
        -o-object-fit: contain;
        object-fit: contain;
        right: 0;
        width: 100%
    }

    .main-block {
        padding: 20px 0 80px
    }

    .main-block-subtitle {
        margin: 0 0 36px;
        width: 100%
    }

    .main-block-logo svg {
        width: 100%
    }

    .clients {
        padding: 10px 0
    }

    .clients-title {
        margin: 0 0 22px
    }

    .clients-content {
        align-items: start;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: start
    }

    .clients-cards {
        margin: 0;
        width: 100%
    }

    .clients .card-client {
        align-items: end;
        border: 1px solid #e8e8e8;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px
    }

    .clients .card-client-top {
        justify-content: space-between
    }

    .clients .card-client-right {
        width: 100%
    }

    .clients-left {
        align-items: start;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 40px 0 0;
        width: 100%
    }

    .addin {
        padding: 46px 0
    }

    .addin-content .aside {
        padding: 8px
    }

    .mobile-app-title {
        margin: 0 0 8px
    }

    .mobile-app-content {
        align-items: center;
        justify-content: center;
        padding: 0
    }

    .mobile-app-content,.mobile-app-info {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap
    }

    .mobile-app-info {
        align-items: start;
        justify-content: start;
        padding: 32px 0;
        width: 100%
    }

    .mobile-app-info-download {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: start;
        padding: 24px 0 0
    }

    .mobile-app-info-download-item {
        height: 70px;
        margin: 0;
        width: auto
    }

    .mobile-app-info-download-item svg {
        height: 90.90909%;
        width: 90.90909%
    }

    .mobile-app-info-download-item svg path {
        height: 90.90909%
    }

    .mobile-app-info-download-item:hover svg {
        box-shadow: none
    }

    .contacts {
        padding: 30px 0
    }

    .contacts-title {
        margin: 0 0 16px
    }

    .contacts-items {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        justify-content: center;
        margin: 0 0 30px
    }

    .contacts-item {
        margin: 0
    }
}

@media (max-width: 680px) {
    .title-medium {
        font-size:29.09091px
    }

    .button.green-button {
        width: 66.66667%
    }

    .button.dark-button {
        font-size: 20px
    }

    .padding-content {
        padding: 10px
    }

    .main-block-logo {
        margin: 0
    }

    .main-block-subtitle {
        font-size: 20px;
        line-height: normal
    }

    .main-block-search {
        width: 100%
    }

    .clients-left-item {
        align-items: center;
        display: flex;
        flex: 1;
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0 6px 22px
    }

    .bonds-block-intro {
        margin: 0 0 10px
    }

    .bonds-block-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin: 0 0 24px;
        padding: 10px 0 0
    }

    .bonds-block-content {
        margin: 0
    }

    .bonds-block-content-desktop {
        display: none
    }

    .bonds-block-content-mobile {
        display: block
    }

    .watchlist-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin: 0 0 24px;
        padding: 10px 0 0
    }

    .watchlist-block-content-desktop {
        display: none
    }

    .watchlist-block-content-mobile {
        display: block
    }

    .watchlist-content-image {
        margin: 0 0 8px
    }

    .addin-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin-bottom: 16px
    }

    .addin-content-image .img {
        display: none
    }

    .addin .aside {
        bottom: auto;
        left: auto;
        position: relative;
        right: auto;
        top: auto
    }

    .addin-info {
        align-items: start;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: start;
        padding: 0
    }

    .addin-info .item {
        margin: 0 0 14px;
        width: 100%
    }

    .addin-info .item:last-child {
        margin: 0
    }

    .addin .item-title {
        font-size: 18px
    }

    .addin .item-text {
        font-size: 16px;
        line-height: 1.1em
    }

    .data-api {
        padding: 46px 0
    }

    .data-api-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin: 0;
        width: 100%
    }

    .data-api-info {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center
    }

    .data-api-info .item {
        margin: 0 0 16px;
        width: 100%
    }

    .data-api-demo {
        grid-column-gap: 16px;
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(4,1fr);
        padding: 16px 0 0
    }

    .data-api .item-title {
        font-size: 18px
    }

    .data-api .item-text {
        font-size: 16px;
        line-height: 1.1em
    }

    .data-api .card-title {
        font-size: 18px
    }

    .data-api .card-item-text {
        font-size: 16px;
        line-height: 1.1em
    }

    .mobile-app {
        padding: 46px 0 0
    }

    .mobile-app-info-text,.mobile-app-info-title {
        font-size: 16px;
        line-height: 1.1em
    }

    .mobile-app-info-download {
        flex-wrap: wrap;
        justify-content: center;
        padding: 16px 0 0
    }

    .mobile-app-info-download-item {
        margin: 0
    }

    .indices-tabs li {
        width: 46%
    }

    .indices--country .indices-tabs li {
        width: auto
    }

    .stock-block-intro {
        width: 100%
    }

    .stock-block-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin: 0 0 24px;
        padding: 10px 0 0
    }

    .stock-block-content {
        width: 100%
    }

    .stock-block-content-desktop {
        display: none
    }

    .stock-block-content-mobile {
        display: block
    }

    .etf-block-intro {
        width: 100%
    }

    .etf-block-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        margin: 0 0 24px;
        padding: 10px 0 0
    }

    .etf-block-content {
        flex-direction: column
    }

    .etf-block-content-image {
        width: 100%
    }

    .etf-block-content-desktop {
        display: none
    }

    .etf-block-content-mobile {
        display: block;
        padding: 10px
    }

    .etf-block-content .notice {
        margin: 36px 0;
        transform: translateY(30px);
        width: 100%
    }

    .etf-block-content .notice._active {
        transform: translateY(0)
    }

    .contacts .country,.contacts .phone,.contacts-text {
        font-size: 16px;
        line-height: 1.1em
    }

    .about-video {
        max-height: 450px
    }
}

@media (max-width: 580px) {
    .mobile-app-info-download {
        width:100%
    }

    .mobile-app-info-download-item {
        height: 36px
    }
}

@media (max-width: 480px) {
    .padding-content {
        padding:10px
    }

    .main-block-subtitle {
        width: 100%
    }

    .main-block-logo svg {
        height: 140px;
        width: 100%
    }

    .linkTitle:after,.linkTitle:hover:after {
        height: 2px
    }

    .title-large {
        font-size: 42px;
        line-height: 1.1em
    }

    .title-medium {
        font-size: 22px;
        line-height: -3px
    }

    .text-medium.gray {
        font-size: 14px
    }

    .smallTitle {
        font-size: 20px;
        line-height: 1.2em
    }

    .button {
        margin: 32px 0 12px
    }

    .button.green-button {
        font-size: 20px;
        width: 100%
    }

    .button.dark-button {
        font-size: 16px
    }

    .access-bottom {
        grid-template-columns: repeat(2,1fr)
    }

    .access-bottom .card {
        padding: 14px
    }

    .access-bottom .card-type {
        font-size: 14px
    }

    .access-bottom .card-text {
        font-size: 14px;
        height: 200px;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .access-bottom .card-img {
        bottom: 0;
        left: 0;
        -o-object-fit: contain;
        object-fit: contain;
        right: 0;
        width: 100%
    }

    .clients-title {
        margin: 0 0 20px
    }

    .clients .card-client {
        align-items: start;
        border: 1px solid #e8e8e8;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px
    }

    .clients .card-client .info {
        font-size: 14px
    }

    .clients .card-client-name {
        font-size: 14px;
        margin: 0 6px 0 0
    }

    .clients .card-client-text {
        font-size: 14px
    }

    .clients .card-client-right {
        width: 100%
    }

    .clients .card-client-left {
        margin: 16px 0 0
    }

    .clients .card-client-left-item {
        margin: 0 12px 0 0;
        padding: 4px 22px
    }

    .clients .card-client-left-item svg {
        width: 20px
    }

    .clients .card-client-img {
        margin: 0 20px 0 0
    }

    .clients .card-client-img .img {
        height: 60px;
        width: 60px
    }

    .clients .hide,.clients .show {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        font-size: 18px;
        justify-content: space-between;
        width: 100%
    }

    .mobile-app .circle-wrapper {
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        padding-top: 10%;
        width: 100%
    }

    .mobile-app .circle-wrapper .phone {
        width: 80%
    }

    .contacts-items {
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(1,1fr)
    }

    .contacts-item {
        width: calc(50% - 10px)
    }

    .about,.addin,.contacts,.data-api,.etf-block,.mobile-app,.stock-block,.watchlist {
        padding: 26px 0
    }

    .about-intro-title,.addin-intro-title,.contacts-intro-title,.data-api-intro-title,.etf-block-intro-title,.mobile-app-intro-title,.stock-block-intro-title,.watchlist-intro-title {
        font-size: 14px;
        padding: 10px 0 0
    }

    .cards-it .card {
        padding: 24px 16px
    }

    .cards-it .card-title {
        font-size: 18px
    }

    .cards-it .card-isin {
        font-size: 14px
    }

    .cards-it .card-bottom-percent {
        font-size: 16px
    }

    .cards-it .card-bottom-ytm {
        font-size: 14px
    }

    .indices-tabs li {
        width: 100%
    }

    .indices--country .indices-tabs li {
        width: 30%
    }

    .indices--country .indices-tabs .tab {
        padding: 8px
    }
}

@media (max-width: 400px) {
    .clients .card-client-content {
        flex-direction:column
    }

    .clients .card-client-top {
        flex-direction: column;
        margin: 4px 0
    }

    .clients .card-client-name {
        margin: 0 0 4px
    }

    .clients .card-client-left {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%
    }

    .clients .card-client-right {
        align-items: start;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: start
    }

    .clients .hide,.clients .show {
        font-size: 14px;
        padding: 0 20px 0 0
    }

    .bonds-block-intro-title,.watchlist-intro-title {
        font-size: 16px;
        line-height: normal
    }

    .addin-intro-title {
        font-size: 16px;
        line-height: 1.1em;
        padding: 16px 0 0
    }

    .data-api-intro-title {
        font-size: 16px;
        line-height: normal
    }

    .mobile-app .circle-wrapper {
        height: 400px
    }

    .mobile-app-info-download {
        padding: 8px 0 0
    }
}

@media (max-width: 360px) {
    .button.dark-button {
        font-size:14px
    }

    .clients-left-item {
        padding: 15px 40px
    }

    .cards-it-wrapper {
        gap: 10px
    }
}

@media (max-width: 320px) {
    .title-medium {
        font-size:18px
    }

    .bonds-block-intro-title,.watchlist-intro-title {
        line-height: 1.1em
    }

    .addin-info {
        padding: 16px 0 0
    }

    .mobile-app .circle-wrapper {
        height: 320px
    }

    .addin,.data-api,.watchlist {
        padding: 26px 0
    }

    .mobile-app {
        padding: 26px 0 0
    }

    .about,.contacts,.etf-block,.stock-block {
        padding: 26px 0
    }

    .clients-left-item {
        padding: 15px 30px
    }
}