@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
    url('../fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

.c00:after {
    content: '';
    display: table;
    clear: both;
}

.c00-block {
    float: left;
    width: 100%;
    padding-left: 100px;
    padding-right: 100px;
}

.c00-wrapper {
    max-width: 1000px;
}

.c00-text h2 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 18px;
}

.c00-text h3 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px;
}

.c57 {
    position: relative;
    overflow: hidden;
    background-color: #2a2b2e;
    background-image: url('../images/khl/bg-1.jpg'), url('../images/khl/bg-2.jpg'), url('../images/khl/bg-3.jpg'), url('../images/khl/bg-4.jpg'), url('../images/khl/bg-5.jpg');
    background-position: center top, center 4093px, center 5774px, center 6643px, center 8312px;
    background-repeat: no-repeat;
    color: #fff;
}

.c57__img {
    display: block;
    width: 100%;
    height: auto;
}

.c57-block-0 {
    padding-top: 66px;
    padding-bottom: 71px;
}

.c57-logo {
    margin-bottom: 69px;
}

.c57-main {
    max-width: none;
}

.c57-main h1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 510px;
}

.c57-main p {
    max-width: none;
}

.c57-title {
    font-family: 'ProximaNova', sans-serif;
    font-size: 200px;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 -0.14em -0.055em;
    font-weight: 900;
}

.c57-block,
.c57-block-1__block-4 {
    position: absolute;
    top: 0;
    left: -360px;
    z-index: 10;
}

.c57-block,
.c57-block-1__block-4-title,
.c57-block-2__block-2-title {
    width: 309px;
}

.c57-block p:last-child {
    margin: 0;
}

.c57-block:before,
.c57-block:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 84px;
    background: rgba(255,255,255,.5);
    transform-origin: left bottom;
    transform: rotate(35deg);
}

.c57-block:before {
    left: 50%;
    bottom: 100%;
    margin-bottom: 17px;
}

.c57-block:after {
    left: 0;
    top: 100%;
    margin-top: 3px;
}

@media (min-width: 1101px) {
    .c57-block_right,
    .c57-block-2__block-2 {
        left: auto;
        right: -360px;
    }
}

.c57-block-1 {
    padding-bottom: 127px;
}

.c57-block-1:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1047px;
    height: 488px;
    background: #f3f4f5;
    transform-origin: right top;
    transform: skewX(-35deg);
}

@media (min-width: 768px) {
    .c57-block-1 .c57-title {
        color: #27282a;
    }
}

@media (min-width: 1551px) {
    .c57-block-1 .c57-title {
        margin-left: -0.289em;
    }
}

.c57-block-1__block-1 {
    top: 12%;
}

.c57-block-1__block-1:before {
    margin-left: 23px;
}

.c57-block-1__block-2 {
    top: 50.85%;
}

@media (min-width: 1101px) {
    .c57-block-1__block-2 {
        color: #383838;
    }
}

@media (min-width: 1551px) {
    .c57-block-1__block-2 {
        margin-right: 90px;
        width: 367px;
    }
}

.c57-block-1__block-2 p {
    max-width: 300px;
}

.c57-block-1__block-2:before {
    background: #c7ced3;
}

.c57-block-1__block-2:after {
    background: #c7ced3;
}

.c57-block-1__block-3 {
    top: 80.9%;
}

.c57-block-1__block-3:before,
.c57-block-1__block-3:after {
    display: none;
}

.c57-block-1__block-4 {
    top: 43.3%;
    right: 50%;
}

.c57-block-1__block-4-title {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 24px;
}

.c57-block-1__block-4-image-1 {
    width: 449px;
}

.c57-block-1__block-4-image-1:before {
    content: '';
    position: absolute;
    left: -100px;
    right: 0;
    top: 0;
    height: 60px;
    background: #303032;
    margin-right: 333px;
}

.c57-block-1__block-4-image-1 img {
    position: relative;
}

.c57-block-1__block-4-image-2 {
    width: 410px;
}

.c57-block-1__block-4-image-2 img {
    box-shadow: 0 0 40px rgba(0,0,0,.2);
}

.c57-block-2 {
    padding-bottom: 33px;
}

.c57-block-2__block-1 {
    top: 15.8%;
}

.c57-block-2__block-1:before {
    margin-left: 23px;
}

.c57-block-2__block-2 {
    position: absolute;
    top: 31.5%;
    width: 100%;
}

.c57-block-2__block-2-title {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 24px;
}

.c57-block-2__block-2-image {
    width: 90%;
    margin-left: auto;
}

.c57-block-2__block-2-image img {
    box-shadow: 0 0 40px rgba(0,0,0,.2);
}

.c57-block-3 {

}

.c57-block-3 .c57-title {
    margin-left: -0.01em;
}

@media (min-width: 1751px) {
    .c57-block-3__block-1 {
        top: -18.2%;
        width: 520px;
    }

    .c57-block-3__block-1:before {
        margin-left: -80px;
    }

    .c57-block-3__block-1:after {
        margin-left: 31px;
    }
}

.c57-block-3__block-2 {
    top: 22.5%;
}

.c57-block-3__block-2:before,
.c57-block-3__block-2:after {
    display: none;
}

.c57-block-4 {
    margin-bottom: 127px;
}

.c57-block-4:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 363px;
    height: 488px;
    background: #dc572a;
    transform-origin: left bottom;
    transform: skewX(-35deg);
}

.c57-block-4 .c57-title {
    margin-top: -0.23em;
}

.c57-block-4__block-1 {
    top: 42.2%;
}

.c57-block-4__block-1:before {
    margin-left: 23px;
}

.c57-block-5 {
    padding-bottom: 219px;
}

@media (min-width: 1751px) {
    .c57-block-5__block-1 {
        top: -23.9%;
        width: 682px;
    }

    .c57-block-5__block-1:before {
        margin-left: -155px;
    }

    .c57-block-5__block-1:after {
        margin-left: 18px;
    }

    .c57-block-5 .c57-title {
        margin-bottom: 0.9em;
    }
}

@media (min-width: 1001px) {
    .c57-block-5 .c57-title span {
        margin-left: 1.835em;
    }
}

.c57-block-5__block-2 {
    position: absolute;
    left: 46%;
    bottom: -259px;
    width: 100%;
}

.c57-block-5__block-2-title {
    position: absolute;
    left: -46%;
    bottom: 109px;
    width: 310px;
}

.c57-block-5__block-2-image {
    width: 90%;
}

.c57-block-5__block-2-image img {
    box-shadow: 0 0 40px rgba(0,0,0,.2);
}

.c57-block-6 {
    padding: 0 !important;
}

.c57-block-6:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 363px;
    height: 488px;
    background: #dc572a;
    transform-origin: left top;
    transform: skewX(-35deg);
}

.c57-block-6__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.c57-block-6__title {
    font-family: 'ProximaNova', sans-serif;
    font-size: 50px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

@media (max-width: 1750px) {
    .c00-wrapper {
        max-width: 800px;
    }

    .c57-block-1__block-4-image-1:before {
        margin-right: 266px;
    }

    .c57-block-1:before {
        top: 868px;
        height: 390px;
    }

    .c57-block-1__block-2 {
        top: 50%;
    }

    .c57-block-3__block-1 {
        top: 8%;
    }

    .c57-block-5__block-1 {
        top: 12%;
    }
}

@media (max-width: 1550px) {
    .c00-wrapper {
        max-width: 700px;
    }

    .c00-block {
        padding-left: 30px;
        padding-right: 30px;
    }

    .c57-block,
    .c57-block-1__block-4 {
        left: -310px;
    }

    .c57-block,
    .c57-block-1__block-4-title,
    .c57-block-2__block-2-title {
        width: 280px;
    }

    @media (min-width: 1101px) {
        .c57-block_right,
        .c57-block-2__block-2 {
            left: auto;
            right: -310px;
        }
    }

    .c57-block-1__block-4-image-1 {
        width: 360px;
    }

    .c57-block-1__block-4-image-1:before {
        margin-right: 233px;
        height: 48px;
    }

    .c57-block-1__block-4-image-2 {
        width: 326px;
    }

    .c57-block-1:before {
        top: 779px;
        height: 341px;
        transform: none;
    }

    .c57-block-1__block-2 {
        top: 48%;
    }
}

@media (max-width: 1350px) {
    .c00-wrapper {
        max-width: 640px;
    }

    .c00-text h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    .c57-title {
        font-size: 160px;
    }

    .c57-block,
    .c57-block-1__block-4 {
        left: -215px;
    }

    .c57-block,
    .c57-block-1__block-4-title,
    .c57-block-2__block-2-title {
        width: 200px;
    }

    @media (min-width: 1101px) {
        .c57-block_right,
        .c57-block-2__block-2 {
            left: auto;
            right: -215px;
        }
    }

    .c57-block:before,
    .c57-block:after {
        display: none;
    }

    .c57-block-1:before {
        top: 695px;
        height: 312px;
    }

    .c57-block-1__block-1 {
        top: 4%;
    }

    .c57-block-1__block-2 {
        top: 45.5%;
    }

    .c57-block-1__block-3 {
        top: 79%;
    }

    .c57-block-1__block-4-image-1 {
        width: 300px;
    }

    .c57-block-1__block-4-image-1:before {
        margin-right: 213px;
        height: 40px;
    }

    .c57-block-1__block-4-image-2 {
        width: 272px;
    }

    .c57-block-4:before,
    .c57-block-6:before {
        width: 240px;
        height: 300px;
    }

    .c57-block-4__block-1 {
        top: 33%;
    }

    .c57-block-5__block-1 {
        top: 0;
    }

    .c57-block-5__block-2-title {
        width: 280px;
    }

    .c57-block-6__title {
        font-size: 40px;
    }
}

@media (max-width: 1100px) {
    .c00-wrapper {
        width: auto;
        max-width: 960px;
        padding-right: 280px;
    }

    .c57-block-0 .c00-wrapper {
        padding-right: 0;
    }

    .c57-title {
        font-size: 136.5px;
    }

    .c57-block,
    .c57-block-2__block-2,
    .c57-block-1__block-4 {
        left: auto;
        right: 0;
    }

    .c57-block,
    .c57-block-1__block-4-title,
    .c57-block-2__block-2-title {
        width: 260px;
    }

    .c57-block-1:before {
        display: none;
    }

    .c57-block-1__block-1 {
        top: 5%;
    }

    .c57-block-1__block-2 {
        top: 29%;
    }

    .c57-block-1__block-3 {
        display: none;
    }

    .c57-block-1__block-4 {
        top: 65%;
        margin-right: -20px;
    }

    .c57-block-1__block-4-title {
        margin-bottom: 10px;
    }

    .c57-block-1__block-4-image-1:before {
        height: 37px;
        margin: 0;
        left: -20px;
        right: -40px;
    }

    .c57-block-1__block-4-image-1 {
        width: 280px;
    }

    .c57-block-1__block-4-image-2 {
        width: 255px;
    }

    .c57-block-2__block-1 {
        top: 3%;
    }

    .c57-block-2__block-2 {
        top: 44%;
    }

    .c57-block-3__block-2 {
        top: 37%;
    }

    .c57-block-4__block-1 {
        top: 21%;
    }

    .c57-block-5__block-2 {
        left: 0;
        padding-left: 300px;
    }

    .c57-block-5__block-2-image {
        width: 100%;
    }

    .c57-block-5__block-2-title {
        left: 0;
    }
}

@media (max-width: 1000px) {
    .c00-wrapper {
        max-width: 730px;
    }

    .c57-title {
        font-size: 100px;
        text-align: center;
        margin-left: 0 !important;
    }

    .c57-block-1__block-2 {
        top: 43%;
    }

    .c57-block-1__block-4 {
        display: none;
    }

    .c57-block-2__block-2 {
        top: auto;
        bottom: 0;
    }

    .c57-block-2__block-2-title {
        margin-bottom: 0;
    }

    .c57-block-3__block-2 {
        top: 56%;
    }

    .c57-block-4:before,
    .c57-block-6:before {
        width: 160px;
        height: 200px;
    }

    .c57-block-6__title {
        font-size: 30px;
    }

    .c57-block-5__block-1 {
        top: 7%;
    }
}

@media (max-width: 767px) {
    .c00-block {
        padding: 15px 0;
        margin: 0;
    }

    .c00-wrapper {
        padding: 0;
    }

    .c57-logo {
        margin-bottom: 30px;
    }

    .c57-logo img {
        width: 120px;
    }

    .c57-text {
        font-size: 12px;
        line-height: 15px;
    }

    .c00-text h2 {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .c57-text p {
        margin: 0 0 15px 0;
    }

    .c57-title {
        font-size: 40px;
        font-size: 15vw;
    }

    .c57-block {
        position: static;
        width: auto;
        margin: 30px 0;
    }

    .c57-block-1__block-3 {
        display: block;
    }

    .c57-block-2__block-2 {
        position: static;
    }

    .c57-block-2__block-2-title {
        position: static;
        font-size: 12px;
        line-height: 15px;
        width: auto;
    }

    .c57-block-2__block-2-image {
        width: auto;
    }

    .c57-block-2__block-1 {
        margin-top: 0;
    }

    .c57-block-3__block-1 {
        margin-top: 0;
    }

    .c57-block-4 .c57-title {
        margin-top: 0;
    }

    .c57-block-5__block-2 {
        position: static;
        padding: 0;
        width: auto;
    }

    .c57-block-5__block-2-title {
        position: static;
        width: auto;
        font-size: 12px;
        line-height: 15px;
    }

    .c57-block-6__title {
        font-size: 18px;
        font-size: 5vw;
    }

    .c57-block-6:before {
        width: 80px;
        height: 80px;
    }

    .c57-block-1__block-2 p {
        max-width: none;
    }
}