@import "../fonts/Montserrat/stylesheet.css";

:root {
    --m : #3AFE09;
    --s : #00A5E2;
    --t : #A4A4A4;
    --g1 : #242724;
    --gb1 : #4B4E4B;
}
html * { max-height: 1000000px; }
* { -webkit-text-size-adjust: none; margin: 0; padding: 0; box-sizing: border-box; outline: none; }
html, body { font-family: "Montserrat", Arial, sans-serif; font-size: 14px; background: #191C1A; color: #FFF; }
li { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a img { border:none; }
a { text-decoration: none; color: inherit; }
input, select, button, textarea { outline:none;
    font-family: "Montserrat", Arial, sans-serif; font-size: 14px;
    /*-moz-appearance:none;-webkit-border-radius: 0; -moz-border-radius: 0; -webkit-appearance: none;*/
}
input[type=file], button, input[type="submit"],
input[type=file]::-webkit-file-upload-button { cursor: pointer; }
.container { max-width: 1040px; width: 100%; padding: 0 20px; margin: 0 auto; }

p { font-size: 20px; line-height: 1.35; font-weight: normal; }
h3 { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; }
h4 { font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: .05em; }


main { background: url(../img/main_bg.png) no-repeat 50% 0; padding: 0; }

header { position: relative; z-index: 2; }
.header { padding: 40px 0 0; margin-bottom: -20px; display: flex; justify-content: flex-end; }
.h_links { display: flex; justify-content: flex-end; color: var(--s); }
.h_links a { font-size: 16px; display: inline-flex; align-items: center; }
.h_links a:not(:first-child):before { content: "|"; display: block; pointer-events: none;
    flex: 0 0 auto; margin: -3px 10px 0; }
/*.h_links a.login:before { content: ""; width: 16px; height: 19px; flex: 0 0 auto; margin-right: 6px;*/
/*    background: url(../img/login_icon.png) 50% 50% no-repeat; margin-top: -2px; }*/

.user_nav { margin-left: 24px; position: relative; display: inline-flex; }
.user_nav > a { display: inline-flex; position: relative; font-size: 16px; font-weight: 500; align-items: center;
    padding: 12px 0; }
.user_nav > a:after { content: ""; background: url(../img/down_arrow.svg) no-repeat 50% 50% / contain;
    display: block; width: 24px; height: 24px; position: absolute; right: -28px; flex: 0 0 auto; }

.user_nav_box { background: var(--g1); font-size: 16px; position: absolute; top: calc(100% + 8px); right: 0;
     border-radius: 8px; overflow:hidden;display: none; white-space: nowrap; }
.user_nav.active .user_nav_box { display: block; }
.user_nav_box ul { padding: 8px 16px;  }
.user_nav_box ul li a { transition: .3s; display: flex; padding: 6px 0; color: rgba(255,5255,255,.6); }
.user_nav_box ul li a:hover { color: #FFF; }

.mobile_toggle { cursor: pointer; flex: 0 0 auto; z-index: 18;
    width: 32px; height: 32px; position: relative; overflow: hidden; }
.mobile_toggle span { height: 3px; width: 100%; background: var(--t); margin: auto;
    display: block; position: absolute; border-radius: 2px; transition: .3s; }
.mobile_toggle span:first-child { top: 5px; }
.mobile_toggle span:last-child { bottom: 5px; }
.mobile_toggle span:nth-child(2) { top: 0; bottom: 0; margin: auto; }
.mobile_toggle.active span:first-child { margin-top: 0; top: 50%; transform: rotate(45deg); }
.mobile_toggle.active span:last-child { margin-bottom: -3px; bottom: 50%; transform: rotate(-45deg);}
.mobile_toggle.active span:nth-child(2) { left: 100%; opacity: 0; }


.logo { text-align: center; padding-bottom: 20px; }
.logo a { max-width: 167px; margin: auto; display: block; }
.logo h3 { padding: 40px 0 12px; }
.logo p { font-weight: 600; font-size: 17px; color: var(--t); margin: auto; max-width: 470px; }

.title { text-align: center; }
.title > p { font-size: 24px; font-weight: 600; margin-top: 6px; }


.counter_box { padding: 40px 0 0; text-align: center; display: none; }
.counter { margin: 40px auto 0; z-index: 2; width: 100%; max-width: 640px; height: 174px;
    border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
.counter:before,.counter:after { border-radius: 24px; left: 0; content: ""; height: 174px;
    width: 100%; position: absolute; }
.counter:before {  top: 0;  background: url(../img/counter_bg.jpg) no-repeat 50% 50%; z-index: 1;
    border: 1px solid var(--gb1); }
.counter:after { top: 10px;  background: url(../img/counter_shadow.png) no-repeat 50% 50%; z-index: -1; }
.counter_item { position: relative; z-index: 3; min-width: 80px; margin: 0 20px; }
.counter_item > p { text-shadow: 0 0 25px var(--m); letter-spacing: 2px; font-size: 56px; line-height: 1;
    font-weight: 700; color: var(--m); }
.counter_item > span { margin-top: 4px; display: block; position: relative; font-size: 16px; color: var(--m); }
.counter_item > span:after {  content: attr(data-text); display: block; position: absolute;
    color: transparent; top: 10px; left: 0; right: 0; margin: auto; text-shadow: 0 0 1px var(--m); opacity: .25; }
.counter_item:before,.counter_item:after { content: ""; position: absolute; right: -24px; border-radius: 50%;
    box-shadow: inset 0 1px .5px 0 rgba(58,254,9,.5); width: 8px; height: 8px; background: #1D201E; }
.counter_item:before { top: 18px; }
.counter_item:after { top: 34px; }
.counter_item:last-child:before,.counter_item:last-child:after { display: none; }


.video_block { background: url(../img/video_block_bg.jpg) no-repeat calc(50% + 20px) 40px; }
/*.video { background: url(../img/video_bg.png) no-repeat 50% 0; padding-top: 90px; }*/
.video { padding-top: 20px; text-align: center; }
.video_box { max-width: 640px; margin: 20px auto 0; position: relative; }
.video_box:before { content: ""; display: block; padding-top: 55.2%; }
.video_box > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video > .btn { margin-top: 80px; width: 264px; }
.get_link_block { padding: 100px 0; background: url(../img/get_link_bg.png) no-repeat 50% 0; }
.get_link form { padding-top: 25px; max-width: 440px; width: 100%; margin: 0 auto; }
.get_link form input { border-radius: 18px; border: 1px solid transparent;
    font-size: 20px; color: #FFF; display: block; width: 100%; height: 70px;
    background: #353735; text-align: center; margin-top: 25px; }

.btn { height: 60px; display: inline-flex; text-align: center; align-items: center; letter-spacing: .5px;
    justify-content: center; padding: 0 30px; border-radius: 18px; font-weight: 700; font-size: 22px;
    box-shadow: 0 4px 0 rgb(10,108,142); background: var(--s); color: #FFF; border: none; }

.get_link_block { display: none; }
.get_link form .btn { width: 100%; max-width: 346px; margin: 45px auto 0; display: flex; }
.get_link_res { padding-top: 45px; display: none; }
.get_link_res p { font-size: 28px; font-weight: 700; color: var(--m); display: flex; justify-content: center; align-items: center; }
.get_link_res p .copy_btn { display: inline-flex; width: 32px; height: 32px;
    margin-left: 40px; background: url(../img/copy_icon.png) no-repeat 50% 50% / auto 31px; }


.about { padding: 50px 0 30px; }
.about h4 { text-align: center; }
.about p { line-height: 1.5; padding-top: 24px; color: var(--t); font-size: 16px; }
.about a { color: var(--s); font-size: 16px; display: inline-flex; margin-top: 32px; }
.about .more_info:before { content: "Читать полностью..."; }

.statistic { padding: 30px 0 50px; }
.statistic h4 { text-align: center; }
.statistic_top_box { display: flex; }
.statistic_top_item { padding: 24px 0; text-align: center; width: calc(100% / 3); color: var(--m); }
.statistic_top_item h6 { font-size: 36px; font-weight: 600; }
.statistic_top_item p { font-size: 18px;  }


.statistic_box { display: flex; margin: 0 -15px; }
.statistic_item { padding: 30px 30px 20px; border-radius: 20px;
    border: 1px solid var(--gb1); background: #272928; margin: 15px; width: calc(100% / 3 - 30px); }
.statistic_item h6 { padding-bottom: 12px; font-size: 18px; font-weight: 600;
    text-align: center; display: flex; justify-content: center; align-items: center; }
.statistic_item h6.wi {}
.statistic_item h6.wi:before { margin-right: 12px; content: ""; width: 28px; height: 28px; flex: 0 0 auto;  }
.statistic_item h6.wi.new_members:before { background: url(../img/user_icon.png) no-repeat 50% 50%;  }
.statistic_item h6.wi.last_buy:before { background: url(../img/buy_icon.png) no-repeat 50% 50%;  }
.statistic_item h6.wi.last_pay:before { background: url(../img/pay_icon.png) no-repeat 50% 50%;  }
.statistic_item p { white-space: nowrap; padding: 6px 0; font-size: 14px; color: #565B57; display: flex; justify-content: space-between; }
.statistic_item p span { color: #8D8D8D; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; margin-right: 16px; }



.bs { box-shadow: 0 15px 87px 0 rgba(0, 0, 0, 0.3); }
.rating { padding: 0 0 40px; }
.rating h3 { color: var(--m);  }
.rating_tab_head { display: flex; justify-content: center; margin: 0 -12px; }
.rating_tab_head a { background: #272928; font-size: 14px; color: var(--s); box-shadow: 0 15px 87px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid transparent; margin: 12px; height: 54px; border-radius: 16px; display: flex;
    align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.rating_tab_head a.active { border-color: var(--s); }
.rating_tab_head a:before { content: ""; width: 28px; margin-top: -2px; height: 28px; flex: 0 0 auto; margin-right: 8px; }
.rating_tab_head a.part_icon:before { background: url(../img/part_icon.png) no-repeat 50% 50%; }
.rating_tab_head a.ref_icon:before { background: url(../img/ref_icon.png) no-repeat 50% 50%; }
.rating_tab_head a.res_icon:before { background: url(../img/res_icon.png) no-repeat 50% 50%; }
.rating_tab_body_item { display: none; }
.rating_tab_body_item.active { display: block; }
.rating_table { margin-top: 24px; height: 460px; overflow-y: auto; scrollbar-color: #2c2f2d #151816; scrollbar-width: thin; padding-right: 20px; }
.rating_table table { max-width: 700px; margin: auto; width: 100%; }
.rating_table table thead { position: sticky; top: 0; background: #191C1A;box-shadow: 0 -3px 0 3px #191c1a; }
.rating_table table thead th { padding: 20px; color: var(--t); font-size: 16px; font-weight: 600; }
.rating_table table thead th:first-child { text-align: left; padding-left: 40px; }
.rating_table table tbody td { border-bottom: 2px solid rgb(21, 21, 21); padding: 20px; text-align: center;
    font-weight: 600; font-size: 20px; box-shadow: -0.052px 0.999px 0 0 rgba(255, 255, 255, 0.09); }
.rating_table table tbody td:first-child { text-align: left; padding-left: 40px; }
.rating_table table tbody tr:last-child td { box-shadow: none; border: none; }


.remember { text-align: center; color: var(--s); padding-top: 40px; }


.self_res_block { padding: 40px 0; display: none; }
.self_res { max-width: 680px; margin: auto; }
.self_res h4 { text-align: center; color: var(--m); }
.self_res form { position: relative; margin: 30px 0 20px; }
.self_res form input { display: block; width: 100%; height: 78px; border-radius: 20px;
    border: 1px solid var(--gb1); background: var(--g1); text-align: center; color: #FFF;
    font-size: 24px; }
.self_res form button { width: 48px; height: 48px; cursor: pointer; border: none;
    background: url(../img/search_icon.png) no-repeat 50% 50% / 31px auto;
    position: absolute; top: 0; bottom: 0; margin: auto; right: 30px; }
.self_res_item { color: var(--m); display: flex; text-align: center; justify-content: space-around; }
.self_res_item p { width: 100%; padding-top: 20px; }

footer { padding: 40px 0; }
.footer { text-align: center; }
.footer p { }
.footer p + p { margin-top: 12px; }
.footer p a { color: var(--s); font-size: 16px; }
.footer p.copyright { color: var(--t); margin-top: 40px; font-size: 14px; }

@media(max-width: 641px) {
    h3 { font-size: 32px; }

    .counter_item { margin: 0 12px; }
    .counter_item:before, .counter_item:after { right: -16px; }

    .title > p { font-size: 20px; }
    .video_block { background: transparent; }
    .video > .btn { margin-top: 32px; }
    .statistic_top_box,.statistic_box { flex-direction: column; margin-bottom: 2px; }
    .statistic_top_item { width: 100%; padding: 12px 0; }

    .statistic_item { width: calc(100% - 30px); }

    .rating_tab_head { flex-wrap: wrap; }

    .rating_table table thead th:first-child { text-align: left; padding-left: 16px; }
    .rating_table table tbody td { padding: 16px; font-size: 16px; }
    .rating_table table tbody td:first-child { text-align: left; padding-left: 16px; }
    .rating_table table tbody tr:last-child td { box-shadow: none; border: none; }


}

/*scrollBAR*/
.scroll-wrapper { overflow: hidden !important; padding: 0!important; position: relative; }

.scroll-wrapper > .scroll-content {
    border: none !important; box-sizing: content-box !important;
    height: auto; left: 0; margin: 0; max-height: none; max-width: none !important;
    overflow: scroll !important; padding: 0; position: relative !important; top: 0;
    width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0; width: 0;
}

.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}

/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{ border: none; margin: 0; padding: 0; position: absolute; z-index: 10; }

.scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; }

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px; height: 8px;
    left: 0;  width: 100%; }

.scrollbar-inner > .scroll-element.scroll-y {
    height: calc(100% - 24px);
    right: 24px;
    top: 12px;
    width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    border-radius: 4px;
}

/*.scrollbar-inner > .scroll-element .scroll-element_track,*/
/*.scrollbar-inner > .scroll-element .scroll-bar {*/
/*    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";*/
/*    filter: alpha(opacity=40);*/
/*    opacity: 0.4;*/
/*}*/

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #333634; }
.list_wrapper .scrollbar-inner > .scroll-element .scroll-element_track { background-color: transparent; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #616461; cursor: pointer; }
/*.list_wrapper .scrollbar-inner > .scroll-element .scroll-bar { background-color: blue; }*/
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #616461; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #616461; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

@media(max-width: 769px) {
    .scrollbar-inner > .scroll-element.scroll-y { right: 4px; }
}