@font-face {
    font-family: RIASuperDisplaySansCompressed;
    src: url('https://vid1.ria.ru/ig/infografika/kay-n/2017/heroes/../../../_common_/fonts/RIADisplaySansCompress.woff');
}
@font-face {
    font-family: RIATextSans;
    src: url('https://vid1.ria.ru/ig/infografika/kay-n/2017/heroes/../../../_common_/fonts/RIATextSans.woff');
}
@font-face {
    font-family: RIATextSans-Italic;
    src: url('https://vid1.ria.ru/ig/infografika/kay-n/2017/heroes/../../../_common_/fonts/RIATextSans-Italic.woff');
}

body,html{
    background: #000922;
    overflow: hidden;
}
.l-page{
    background: none;
}
.article-visual-black{
    padding: 0;
}

.vjbo-content.m-header-fixed .vjbo-header {
    z-index: 1000;
}

#kayn-container{
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.model{
    width: 100%;
    height: 100%;

}

.pages{
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
}
.pages .page{
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    overflow: hidden;
    color: #ffffff;
}
.pages .page .title{
    position: absolute;
    font-family: RIATextSans;
    font-size: 18px;
}
.pages .page .text{
    position: absolute;
    font-family: RIATextSans;
    font-size: 18px;
}
.pages .page .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 30px;
    -webkit-transform-origin: 50% 30px;
}
.pages .page .content .block{
    position: absolute;
    width: 1190px;
    height: 755px;
    left: -595px;
    top: -377px;
}
.pages .page .content .block svg{
    overflow: visible;
}
.pages .page.cover{
    display: block;
    background: #000922;
}
.pages .page.cover [id^='scroll']{
    cursor: pointer;
}
.pages .page.cover .title{
    left: 264px;
    top: 110px;
    width: 500px;
    word-break: break-word;
    font-size: 112px;
    line-height: 92%;
}
.pages .page.cover .text{
    position: absolute;
    left: 270px;
    top: 444px;
    width: 612px;
    line-height: 154%;
}

.pages .page.chapter-1{
    background: url("//vid1.ria.ru/ig/infografika/kay-n/2017/heroes/img/pages/chapter-1.jpg");
    background-size: cover;
}
.pages .page.chapter-2{
    background: url("//vid1.ria.ru/ig/infografika/kay-n/2017/heroes/img/pages/chapter-2.jpg");
    background-size: cover;
}
.pages .page[class*='chapter'] .title{
    left: 87px;
    top: 113px;
    width: 1400px;
    font-size: 120px;
    line-height: 90%;
}
.pages .page[class*='chapter'] .title .num{
    font-size: 428px;
    line-height: 55%;
    padding: 77px 60px 0 0;
    margin: 0 40px 0 0;
    border-right: 2px solid #ffffff;
}
.pages .page[class*='chapter'] .title >*{
    float: left;
    vertical-align: top;
    word-break: break-word;
}
.pages .page[class*='chapter'] .title >*:not(.num){
    width: 700px;
}

.pages .page[class*='page-'] .title{
    position: absolute;
    left: 36px;
    top: 42px;
    font-family: RIASuperDisplaySansCompressed;
    font-size: 39px;
}
.pages .page[class*='page-'] .text{
    position: absolute;
    left: 36px;
    top: 92px;
    font-family: RIATextSans;
    font-size: 16px;
    width: 350px;
    line-height: 25px;
}
.pages .page[class*='page-'] .text span{
    position: absolute;
    left: -5px;
    top: 631px;
}
.pages .page[class*='page-'] .table{
    position: absolute;
    left: 36px;
    top: 363px;
    font-family: RIASuperDisplaySansCompressed;
    font-size: 21px;
    width: 350px;
    line-height: 22px;
}
.pages .page[class*='page-'] [class*='descr']{
    position: absolute;
    left: 36px;
    top: 402px;
    font-family: RIATextSans-Italic;
    font-size: 15px;
    line-height: 20px;
}
.
pages .page-1-1 .table{
    top: 396px!important;
}
.pages .page-1-2 .table{
    top: 471px!important;;
}
.pages .page-1-3 .table{
    top: 578px!important;;
}
.pages .page-2-1 .table{
    left: 897px!important;;
    top: 363px!important;;
}
.pages .page-2-2 .table{
    left: 897px!important;
    top: 268px!important;
}

.pages .page-1-0 .descr-15{
    top: 151px!important;
    left: 898px!important;
}
.pages .page-1-0 .descr-16{
    top: 676px!important;
    left: 898px!important;
}

.pages .page-1-1 [class*='descr']{
    top: 457px!important;
    left: 32px!important;
}
.pages .page-1-1 .descr-11{
    top: 685px!important;
    left: 900px!important;
}

.pages .page-1-3 [class*='descr'],
.pages .page-2-0 [class*='descr']{
    top: 695px!important;
    left: 53px!important;
}
.pages .page-1-3 .descr-4{
    top: 585px!important;
    left: 896px!important;
}
.pages .page-2-0 .descr-4{
    top: 155px!important;
    left: 896px!important;
}

.pages .page-2-1 .descr-0{
    left: 611px!important;
    top: 563px!important;
}
.pages .page-2-1 .descr-1{
    left: 931px!important;
    top: 539px!important;
}
.pages .page-2-1 .descr-2{
    left: 1054px!important;
    top: 588px!important;
}
.pages .page-2-1 .descr-3{
    left: 873px!important;
    top: 654px!important;
}
.pages .page-2-1 .descr-4{
    left: 819px!important;
    top: 635px!important;
}
.pages .page-2-1 .descr-5{
    left: 781px!important;
    top: 529px!important;
}
.pages .page-2-1 .descr-6{
    left: 858px!important;
    top: 574px!important;
}
.pages .page-2-1 .descr-7{
    left: 996px!important;
    top: 649px!important;
}
.pages .page-2-1 .descr-8{
    left: 619px!important;
    top: 715px!important;
}
.pages .page-2-1 .descr-9{
    left: 743px!important;
    top: 715px!important;
}
.pages .page-2-1 .descr-10{
    left: 898px!important;
    top: 715px!important;
}
.pages .page-2-1 .descr-11{
    left: 906px!important;
    top: 187px!important;
}

.pages .page-2-2 .descr-0{
    left: 896px!important;
    top: 404px!important;
}
.pages .page-2-2 .descr-1{
    left: 896px!important;
    top: 548px!important;
}
.pages .page-2-2 .descr-2{
    left: 896px!important;
    top: 692px!important;
}

.pages .page-2-3 .descr-0{
    left: 64px!important;
    top: 726px!important;
}
.pages .page-2-3 .descr-1{
    left: 291px!important;
    top: 726px!important;
}
.pages .page-2-3 .descr-2{
    left: 908px!important;
    top: 200px!important;
}


.pages .page.finish .scroll{
    position: absolute;
    left: 0;
    top: 200px;
}
.pages .page.finish .scroll [class^='column']{
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 90px;
}
.pages .page.finish .scroll .column-1{
    margin: 0 0 0 292px;
}
.pages .page.finish .scroll .name{
    color: #ffffff;
    font-family: RIATextSans;
    font-size: 15px;
    cursor: pointer;
}
.pages .page.finish .name:hover{
    color: #898989;
}
.pages .page.finish .title{
    left: -565px!important;
    top: 60px;
}
.pages .page.finish .top{
    position: absolute;
    top: 0;
    left: 50%;
    width: 1190px;
    height: 50px;
}
.pages .page.finish .top svg{
    position: relative;
    left: -585px;
    height: 126px;
    top: 0;
    overflow: visible;
}

.pages .page.finish .top svg
.pages .page.finish [id^='hide']{
    display: none;
}

.pages .page.finish .window{
    position: absolute;
    left: 330px;
    top: 200px;
    width: 270px;
    background: rgba(10,126,166,0.6);
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform: scale(0);
    -webkit-transform: scale(0);
    color: #ffffff;
}
.pages .page.finish .window.col1{
    background: rgba(127,8,74,0.6);
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
}
.pages .page.finish .window div{
    padding: 10px;
}
.pages .page.finish .window .head{
    background: #0a7ea6;
}
.pages .page.finish .window.col1 .head{
    background: #7f084a;
}

.pages .page.finish .btn-replace{
    position: absolute;
    right: 79px;
    top: 77px;
    width: 70px;
    height: 53px;
    cursor: pointer;
}
.pages .page.finish .btn-replace span{
    font-family: RIATextSans-Italic;
    font-size: 15px;
    position: relative;
    top: 7px;
}
.pages .page.finish .btn-replace svg{
    overflow: visible;
}
.pages .page.finish .info{
    position: absolute;
    right: 20px;
    top: 77px;
    width: 53px;
    height: 53px;
}
.pages .page.finish .info svg{
    overflow: visible;
}
.pages .page.finish .info .b-info{
    position: absolute;
    left: 0;
    top: 0;
    width: 53px;
    height: 53px;
    cursor: pointer;
}
.pages .page.finish .info .w-info{
    position: absolute;
    right: -1px;
    top: -1px;
    width: 271px;
    height: 585px;
    background: #000922;
    opacity: 0;
    display: none;
    cursor: pointer;
}
.pages .page.finish [class*='life']{
    font-family: RIADisplaySansCompress;
    font-size: 137px;
    position: absolute;
    top: 50%;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}
.pages .page.finish .in-life{
    left: -190px;
    color: #575e9b;
}
.pages .page.finish .out-life{
    left: 382px;
    color: #7f084a;
}

.earth{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: none;
}
.earth .bubble{
    position: absolute;
    left: 0;
    top: 0;
    filter: drop-shadow(1px 1px 5px #000000);
    display: none;
    opacity: 0;
}
.earth .bubble .corner{
    border: 7px solid transparent;	border-left: 7px solid #ffffff; border-top: 7px solid #ffffff;
    width: 0;
}
.earth .bubble .content{
    background: #ffffff;
    font-family: RIATextSans-Italic;
    font-size: 15px;
    padding: 5px;
    min-width:  70px;
    line-height: 100%;
    text-align: center;
}

.btn-next{
    overflow: visible;
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 999;
    cursor: pointer;
    width: 100px;
    height: 100px;
    display: none;
    opacity: 0;
}
.btn-next svg{
    overflow: visible;
    position: relative;
    left: -50px;
}
.btn-next:hover [id^='btn-next']{
    stroke: #bbbbbb;
}

.preloader{
    position: absolute;
    left: 50%;
    top: 50%;
}
.preloader svg{
    position: absolute;
    width: 83px;
    height: 80px;
    left: -40px;
    top: -40px;
    overflow: visible;
}