body {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
}
.clear {
    display: block;
    clear: both;
}
.container {
    margin: auto;
}
b {
    font-weight: 700;
}
header {
    position: absolute;
    z-index: 2;
    width: 100%;
    margin: 0 -30px;
    background: #c1272d;
}
header a {
    display: block;
    background: #a3242e;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    float: right;
    padding: 15px 30px;
    text-decoration: none;
    text-align: center;
}
section {
    display: none;
    position: relative;
    padding: 0 15px;
}
section.active {
    display: block;
}
.section1 {
    background: #1e1e1e;
    color: #fff;
    height: 100vh;
    padding: 0 30px;
    z-index: 1;
}
.section1 .container {
    position: absolute;
    top: 40%;
    right: 30px;
    left: 30px;
    transform: translateY(-50%);
}
.section1 .h1 {
    font-size: 46px;
    line-height: 120%;
    margin-bottom: 40px;
    font-weight: 400;
}
.section1 input {
    background: none;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #fff;
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
    color: #fff;
    width: 92%;
    outline: none !important;
    padding: 10px 20px;
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    -ms-transition: all ease-in-out .3s;
    -o-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;

}
.section1 input[disabled] {
    border-color: transparent;
}
.section1 .text-action {
    display: none;
    position: absolute;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    right: 30px;
    left: 30px;
    padding-left: 30px;
    bottom: -5px;
    z-index: 1;
    height: 160px;
}
.section1 .text-action:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    border-left: 1px solid #fff;
}

.section2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 0;
    z-index: 2;
}
.section2 .block-charts {
    position: relative;
    height: 423px;
    cursor: pointer;
}
.section2 .block-titles {
    height: 92px;
}
.section2 .chart-title {
    opacity: 0;
    width: 900px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 300;
    position: absolute;
}
.section2 .chart-title.active {
    opacity: 1;
}
.section2 .chart-title span {
    font-weight: 700;
}
.section2 [data-chart="1"] span {
    color: #ff7d7e;
}
.section2 [data-chart="2"] span {
    color: #c04848;
}
.section2 [data-chart="3"] span {
    color: #a1232d;
}
.section2 [data-chart="4"] span {
    color: #5c7c71;
}
.section2 [data-chart="5"] span {
    color: #cbb34f;
}
.section2 [data-chart="6"] span {
    color: #585c5f;
}
.section2 [data-chart="7"] span  {
    color: #5c829f;
}
.section2 .block-charts .chart {
    opacity: 0;
}
.section2 .block-charts .chart.active {
    position: absolute;
    opacity: 1;
}
.section2 .block-charts .chart.active:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 15px;
    width: 28px;
    height: 50px;
    background: url("../imgs/desktop/icon-touch.svg") center no-repeat;
    z-index: 2;
    background-size: 100%;
}
.section2 .block-charts .chart.active:after {
    position: absolute;
    content: "";
    display: block;
    width: 1023px;
    height: 50px;
    top: -46px;
    left: -2px;
    background: url("../imgs/desktop/one-man.svg") bottom center no-repeat;
    background-size: 100%;
}
.section2 .block-charts .chart.active img {
    opacity: 0.5;
}
.section2 .block-charts .chart img {
    position: absolute;
    top: 0;
}
.section2 .block-charts .chart .chart-after {
    opacity: 0;
}

.section2 .note {
    margin: 15px 0px 15px 0px;
}
.section2 .note-text {
    font-size: 14px;
    font-weight: 300;
    line-height: 35px;
}
.section2 .icon {
    float: left;
    margin-right: 10px;
}

.section3 {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 2;
    background: #fff;
}
.block-item,
.section2 .chart-container,
.section3 .chart-container {
    height: 615px;
    padding: 5px 0;
}
.section3 .chart-action {
    position: absolute;
    bottom: 15px;
    min-height: 320px;
}
.section3 .chart {
    opacity: 0.5;
}
.section3 .chart.active {
    opacity: 1;
}
.section3 .h2 {
    margin-top: 20px;
    font-size: 21px;
}
.section3 .h2 span {
    color: #c1272d;
}
.section3 .chart-hover.active {
    position: relative;
}
.section3 .chart-hover.active svg {
    opacity: 0.5;
}
.section3 .chart-hover.active:before {
    position: absolute;
    content: "";
    display: block;
    top: 4px;
    left: 14px;
    width: 28px;
    height: 50px;
    background: url("../imgs/desktop/icon-touch.svg") center no-repeat;
    z-index: 2;
    background-size: 100%;
}
.section3 .chart-hover svg polygon {
    fill: #ffffff;
}
.section3 .chart-hover svg:hover rect {
    fill-opacity: 0.3;
}
.section3 .chart-hover svg .hover-group:hover rect {
    fill-opacity: 1;
}
.section3 .chart-hover .tooltips-chart {
    position: relative;
}
.section3 .chart-hover .tooltip-chart {
    display: none;
    position: absolute;
    top: -82px;
}
.section3 .chart-hover .tooltip-chart b {
    color: #c1272d;
}
.section3 .chart-hover .tooltip-chart span {

}
.section3 .chart-hover .tooltip-chart.pull-right {
    position: absolute;
    text-align: right;
    margin-left: -700px;
    width: 700px;
}

.section3 .chart-title {
    opacity: 1 !important;
    font-size: 22px;
    line-height: 28px;
    font-weight: 300;
    width: 900px;
    margin-bottom: 15px;
}
.section3 .chart-title span {
    color: #c1272d;
    font-weight: 700;
}
.section3 .icon {
    float: left;
    margin-right: 10px;
}
.section3 .note-text {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 40px;
}
.chart-subtitle-1 {
    margin-bottom: 5px;
}
.chart-subtitle-2 {
    margin: 10px 0 5px 0;
}
.chart-subtitle-2 span {
    color: #c1272d;
    font-weight: 700;
}

.section4,
.section5,
.section6,
.section7 {
    position: absolute;
    width: 100%;
    min-height: 100%;
    padding: 0;
    top: 0;
    color: #fff;
    z-index: 2;
}

.section4 .h4,
.section5 .h4,
.section6 .h4,
.section7 .h4 {
    font-size: 30px;
    font-weight: 300;
    width: 580px;
    margin: 15px 0;
}
.section4 .h2,
.section5 .h2,
.section6 .h2 {
    position: relative;
    font-size: 60px;
    line-height: 120%;
    font-weight: 600;
    width: 820px;
    margin-bottom: 40px;
    padding-bottom: 25px;
}
.section4 .h2:after,
.section5 .h2:after,
.section6 .h2:after {
    content: "";
    display: block;
    width: 50px;
    border-bottom: 2px solid #fff;
    position: absolute;
    bottom: 0;
}
.section4 .h5,
.section5 .h5,
.section6 .h5,
.section7 .h5 {
    font-size: 30px;
    font-weight: 300;
    line-height: 140%;
    width: 500px;
}
.section4 {
    background: #c1272d;
}
.section5 {
    background: #5d829f;
}

.section6 {
    background: #cbb34f;
}

.section7 {
    background: #1e1e1e;
}

.section7 .link-logo {
    position: absolute;
    bottom: 70px;
}
.section7 .link-logo img {
    width: 160px;
}
.section7 .input-link {
    border: 5px;
    background: #fff;
    border-radius: 0;
    padding: 15px 10px;
    display: block;
    min-width: 240px;
    font-size: 13px;
}
.section7 .link-text {
    position: absolute;
    bottom: 15px;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
}
.section7 .h2 {
    position: relative;
    font-size: 45px;
    line-height: 120%;
    font-weight: 600;
    width: 820px;
    padding-bottom: 40px;
}
.section7 .h2:after {
    display: none;
}
.section7 .social-links {
    margin-bottom: 70px;
}
.section7 .soc-icon {
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
    width: 28px;
    height: 28px;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
}
.section7 .soc-icon.icon-fb {
    background-image: url("../imgs/desktop/icon-fb.svg");
}
.section7 .soc-icon.icon-vk {
    background-image: url("../imgs/desktop/icon-vk.svg");
}
.section7 .soc-icon.icon-link {
    background-image: url("../imgs/desktop/icon-link.svg");
}
.section7 .text-action {
    padding: 25px 0 20px 50px;
    width: 300px;
    cursor: pointer;
    font-size: 16px;
    line-height: 35px;
    font-weight: 700;
    background-image: url("../imgs/desktop/icon-refrech.svg");
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: left center;
}

::-webkit-input-placeholder {
    font-size: 45px;
    font-weight: 300;
}
::-moz-placeholder {
    font-size: 45px;
    font-weight: 300;
}
:-ms-input-placeholder {
    font-size: 45px;
    font-weight: 300;
}
:-moz-placeholder {
    font-size: 45px;
    font-weight: 300;
}
.fas.fa-3 {
    font-size: 29px;
}
.bottom {
    top: auto !important;
    bottom: 0;
}

.container-bottom,
.container {
    position: relative;
    width: 1200px;
}
.section3 .chart img,
.section2 .chart img {
    width: 1123px;
}
.section2 .block-charts {
    height: 423px;
}
#chart-hover {
    cursor: pointer;
    width: 1088px;
}
.btn-prev,
.btn-next {
    display: block;
    float: left;
    border: 0;
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
    outline: 0 !important;
    cursor: pointer;
    margin: 0 3px;
}
.btn-prev {
    background-image: url("../imgs/desktop/arrow-left.svg");
}
.btn-next {
    background-image: url("../imgs/desktop/arrow-right.svg");
}
.btn-prev:hover,
.btn-next:hover {
    opacity: 0.5;
}
.section2 .btn-prev {
    display: none;
}
.section4 .btn-prev,
.section5 .btn-prev,
.section6 .btn-prev,
.section7 .btn-prev {
    background-image: url("../imgs/desktop/arrow-left-white.svg");
}
.section4 .btn-next,
.section5 .btn-next,
.section6 .btn-next,
.section7 .btn-next {
    background-image: url("../imgs/desktop/arrow-right-white.svg");
}
.btns-direction {
    position: absolute;
    top: 20px;
    right: 73px;
    z-index: 2;
}
.section4 .btns-direction,
.section5 .btns-direction,
.section6 .btns-direction,
.section7 .btns-direction {
    top: 20px;
}
.copy-href {
    position: absolute;
    opacity: 0;
    height: 0;
}
.copy-text {
    background: #fff;
    display: inline-block;
    padding: 6px 15px;
    height: 16px;
    border-radius: 4px;
    color: #1e1e1e;
    vertical-align: 9px;
    opacity: 0;
}
.tooltip-chart[data-id="0"] { left: 0; }
.tooltip-chart[data-id="1"] { left: 88px; } 
.tooltip-chart[data-id="2"] { left: 138px; }  
.tooltip-chart[data-id="3"] { left: 198px; } 
.tooltip-chart[data-id="4"] { left: 233px; } 
.tooltip-chart[data-id="5"] { left: 283px; }  
.tooltip-chart[data-id="6"] { left: 423px; } 
.tooltip-chart[data-id="7"] { left: 438px; } 
.tooltip-chart[data-id="8"] { left: 483px; } 
.tooltip-chart[data-id="9"] { left: 533px; } 
.tooltip-chart[data-id="10"] { left: 563px; } 
.tooltip-chart[data-id="11"] { left: 638px; } 
.tooltip-chart[data-id="12"] { left: 678px; } 
.tooltip-chart[data-id="13"] { left: 708px; } 
.tooltip-chart[data-id="14"] { left: 773px; } 
.tooltip-chart[data-id="15"] { left: 788px; } 
.tooltip-chart[data-id="16"] { left: 828px; } 
.tooltip-chart[data-id="17"] { left: 843px; } 
.tooltip-chart[data-id="18"] { left: 888px; } 
.tooltip-chart[data-id="19"] { left: 958px; } 
.tooltip-chart[data-id="20"] { left: 1053px; } 
.tooltip-chart[data-id="21"] { left: 1058px; } 
.tooltip-chart[data-id="22"] { left: 1063px; } 
.tooltip-chart[data-id="23"] { left: 1088px; } 

@media (max-width: 1279px) {
    .container-bottom,
    .container {
        width: 1024px;
    }
    .section2 .block-charts {
        height: 369px;
    }
    .section3 .chart img,
    .section2 .chart img {
        width: 980px;
    }
    .section2 .chart-title {
        font-size: 18px;
        width: 920px;
    }
    #chart-hover {
        width: 950px;
    }
    .section2 .block-charts .chart.active:after {
        width: 980px;
        left: 0;
    }
    .btns-direction {
        right: 40px;
    }
    .section2 .chart-title {
        width: 820px;
    }
    .block-item,
    .section2 .chart-container,
    .section3 .chart-container {
        height: 546px;
    }

    .tooltip-chart[data-id="0"] { left: 0; }
    .tooltip-chart[data-id="1"] { left: 77px; }
    .tooltip-chart[data-id="2"] { left: 120px; }
    .tooltip-chart[data-id="3"] { left: 173px; }
    .tooltip-chart[data-id="4"] { left: 203px; }
    .tooltip-chart[data-id="5"] { left: 247px; }
    .tooltip-chart[data-id="6"] { left: 369px; }
    .tooltip-chart[data-id="7"] { left: 382px; }
    .tooltip-chart[data-id="8"] { left: 422px; }
    .tooltip-chart[data-id="9"] { left: 465px; }
    .tooltip-chart[data-id="10"] { left: 492px; }
    .tooltip-chart[data-id="11"] { left: 531px; }
    .tooltip-chart[data-id="12"] { left: 553px; }
    .tooltip-chart[data-id="13"] { left: 588px; }
    .tooltip-chart[data-id="14"] { left: 614px; }
    .tooltip-chart[data-id="15"] { left: 671px; }
    .tooltip-chart[data-id="16"] { left: 684px; }
    .tooltip-chart[data-id="17"] { left: 719px; }
    .tooltip-chart[data-id="18"] { left: 732px; }
    .tooltip-chart[data-id="19"] { left: 771px; }
    .tooltip-chart[data-id="20"] { left: 832px; }
    .tooltip-chart[data-id="21"] { left: 915px; }
    .tooltip-chart[data-id="22"] { left: 919px; }
    .tooltip-chart[data-id="23"] { left: 924px; }
}
@media (max-width: 1098px) {
    .container-bottom,
    .container {
        width: 940px;
        max-width: none;
    }
    .section2 .block-charts {
        height: 339px;
    }
    .section3 .chart img,
    .section2 .chart img {
        width: 900px;
    }
    .section2 .chart-title {
        font-size: 20px;
        width: 920px;
    }
    #chart-hover {
        width: 872px;
    }
    .section2 .chart-title {
        width: 780px;
    }
    .section2 .block-charts .chart.active:after {
        width: 900px;
        left: 0;
        top: -37px;
        height: 40px;
    }
    .block-item,
    .section2 .chart-container,
    .section3 .chart-container {
        height: 526px;
    }

    .tooltip-chart[data-id="0"] { left: 0; }
    .tooltip-chart[data-id="1"] { left: 71px; }
    .tooltip-chart[data-id="2"] { left: 111px; }
    .tooltip-chart[data-id="3"] { left: 159px; }
    .tooltip-chart[data-id="4"] { left: 187px; }
    .tooltip-chart[data-id="5"] { left: 227px; }
    .tooltip-chart[data-id="6"] { left: 339px; }
    .tooltip-chart[data-id="7"] { left: 351px; }
    .tooltip-chart[data-id="8"] { left: 387px; }
    .tooltip-chart[data-id="9"] { left: 427px; }
    .tooltip-chart[data-id="10"] { left: 451px; }
    .tooltip-chart[data-id="11"] { left: 487px; }
    .tooltip-chart[data-id="12"] { left: 507px; }
    .tooltip-chart[data-id="13"] { left: 539px; }
    .tooltip-chart[data-id="14"] { left: 563px; }
    .tooltip-chart[data-id="15"] { left: 616px; }
    .tooltip-chart[data-id="16"] { left: 628px; }
    .tooltip-chart[data-id="17"] { left: 660px; }
    .tooltip-chart[data-id="18"] { left: 672px; }
    .tooltip-chart[data-id="19"] { left: 708px; }
    .tooltip-chart[data-id="20"] { left: 764px; }
    .tooltip-chart[data-id="21"] { left: 840px; }
    .tooltip-chart[data-id="22"] { left: 844px; }
    .tooltip-chart[data-id="23"] { left: 848px; }
}

@media (min-width: 1024px) {
    #mobileVersion {
        display: none;
    }
}