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

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

#kayn-container{
    position: relative;
    width: 100vw;
    height: 100%;
    min-height: 550px;
    overflow: hidden;
}

.model{
    width: 100%;
    height: 100%;
    min-height: 550px;
    text-align: right;
}

.model svg{
    overflow: visible!important;
}
.model p{
    margin: 10px 0;
}
.model >*{
    line-height: 1;
}

.pages{
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    user-select: none;
    -webkit-user-select: none;
}
.pages .page{
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
}
.pages .page .content{
    position: relative;
    width: 100vw;
    min-width: 100vh;
    height: 100vh;
    min-height: 550px;
    transform: translate(-50%, -50%);
    /* -webkit-transform: translate(-50%, -50%); */
    -webkit-transform: translate(50%, -50%);
    overflow: hidden;
}

.pages .page[class*='cover'] .image{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.pages .page[class*='cover'] .text-block{
    position: absolute;
    left: 5%;
    top: 10%;
}

#kayn-container.en .pages .page[class*='cover'] .title{
    width: 900px;
}
.pages .page[class*='cover'] .title{
    position: relative;
    width: 550px;
    font-family: RIADisplaySerif;
    font-size: 82px;
}
.pages .page[class*='cover'] .text{
    position: relative;
    width: 550px;
    font-family: RIATextSans;
    font-size: 20px;
    margin: 20px 0 0 0;
    line-height: 1.3;
}
.pages .page[class*='cover'] .svg-image{
    position: absolute;
    left: 10%;
    bottom: 5%;
}

.pages .page.cover-0{
    display: block;
}
.pages .page.cover-0 .scroll{
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 60px;
    height: 115px;
    cursor: pointer;
}
.pages .page.cover-0 .scroll:hover{
    opacity: 0.6;
}
.pages .page.cover-0 .scroll svg{
    position: absolute;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
}
.pages .page.cover-0 .text-block{
    top: 20%;
}
.pages .page.cover-0 .title{
    width: 100%
}
.pages .page.cover-0 .text{
    top: 0;
    width: 600px;
}
.pages .page.cover-1 .svg-image{
    width: 365px;
    height: 350px;
}
.pages .page.cover-1 .svg-image [id^='small']{
    display: none;
}
.pages .page.cover-2 .svg-image{
    width: 322px;
    height: 107px;
}
.pages .page.cover-3 .svg-image{
    width: 490px;
    height: 105px;
}
.pages .page.cover-3 .description{
    position: absolute;
    right: 10%;
    bottom: 5%; 
    width: 350px;
    font-family: RIATextSans-Italic;
    font-size: 18px;
    line-height: 1.3;
}
.pages .page.cover-3 .description svg{
    width: 32px;
    height: 22px;
}
.pages .page.cover-3 .description .description-title{
    font-family: RIADisplaySansCompress;
    font-size: 39px;
}
.pages .page.cover-3 .description .description-title >*{
    display: inline-block;
    margin: 0 0 5px 30px;
}
.pages .page.cover-3 .description span{
    position: relative;
}

/* На верх */

.pages .page.cover-4 .btn-replace{
    position: relative;
    width: 560px;
    top: 20px;
    font-family: RIADisplaySerif;
    font-size: 22px;
    line-height: 56px;
    color: #ffffff;
    cursor: pointer;
}

.pages .page.cover-4 .btn-replace >*{
    display: inline-block;
    margin: 0 10px 0 0;
    width: 56px;
    height: 56px;
    vertical-align: middle;
}

.pages .page.cover-4 .btn-replace > span{
    width: 76px;
}

.pages .page.cover-4 .svg-image{
    width: 1040px;
    height: 260px;
}

.pages .page[class*='page-']{
    cursor: -webkit-grab;
}
.pages .page[class*='page-']:active{
    cursor: -webkit-grabbing;
}
.pages .page[class*='page-'] .text-block{
    position: absolute;
    left: 2%;
    top: 10%;
    z-index: 1;
    width: 435px;
}
.pages .page[class*='page-'] .title{
    position: relative;
    width: 435px;
    font-family: RIADisplaySansCompress;
    font-size: 39px;
}
.pages .page[class*='page-'] .title >*{
    display: inline-block;
}
.pages .page[class*='page-'] .title .flag{
    width: 32px;
    height: 22px;
    margin: 0 10px 0 0;
}
.pages .page[class*='page-'] .text{
    position: relative;
    top: 10px;
    width: 435px;
    font-family: RIATextSans;
    font-size: 20px;
    z-index: 1;
    line-height: 1.3;
}
.pages .page[class*='page-'] .btn-next{
    position: relative;
    width: 300px;
    height: 40px;
    font-family: RIASuperDisplaySansCompressed-B;
    font-size: 18px;
    margin: 30px 0 0 0;
    cursor: pointer;
    float: right;
}
.pages .page[class*='page-'] .btn-next >*{
    display: inline-block;
    vertical-align: middle;
}
.pages .page[class*='page-'] .btn-next svg{
    width: 40px;
    margin: 0 10px 0 0;
}
.pages .page[class*='page-'] .image{
    position: absolute;
    left: 10%;
    bottom: 5%;
}
.pages .page[class*='page-'] .description{
    position: absolute;
    right: 10%;
    bottom: 5%;
    font-family: RIATextSans-Italic;
    font-size: 20px;
    line-height: 1.3;
    width: 205px;
}
.pages .page[class*='page-'] .description span{
    position: relative;
    top: 32px;
    font-family: RIASuperDisplaySansCompressed-B;
    font-size: 110px;
    text-align: right;
    width: 300px;
}



.pages .page-0-0 .image{
    width: 200px;
    height: 400px;
}
.pages .page-0-1 .image{
    width: 440px;
    height: 485px;
}
.pages .page-0-2 .image{
    width: 190px;
    height: 295px;
}
.pages .page-1-0 .image{
    width: 440px;
    height: 445px;
}
.pages .page-1-1 .image{
    width: 440px;
    height: 410px;
}
.pages .page-2-0 .image{
    width: 221px;
    height: 311px;
}
.pages .page-2-1 .image{
    width: 195px;
    height: 255px;
}

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

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

@media screen and (max-height: 840px){
    .es .pages .page[class*='page-'] .image{
        transform-origin: 0 100%;
        -webkit-transform-origin: 0 100%;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
}

@media screen and (max-height: 800px){
    .pages .page[class*='cover'] .title{
        font-size: 52px;
        text-align: right;
    }
    .pages .page[class*='cover'] .text{
        font-size: 20px;
        line-height: 1.3;
        text-align: right;
    }
}

@media screen and (max-height: 795px){
    .pages .page[class*='page-'] .image{
        transform-origin: 0 100%;
        -webkit-transform-origin: 0 100%;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
}


@media screen and (max-height: 680px){
    .pages .page.cover-0 .scroll{
        transform-origin: 50% 100%;
        -webkit-transform-origin: 50% 100%;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
    .pages .page.cover-1 .svg-image [id^='big']{
        display: none;
    }
    .pages .page.cover-1 .svg-image [id^='small']{
        display: block;
    }
    .pages .page[class*='page-'] .image{
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }
    .pages .page.cover-4 .svg-image{
        bottom: 0;
        transform-origin: 0 100%;
        -webkit-transform-origin: 0 100%;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }
}

/* Sputnik menu show */
.b-sitenav-all {
	z-index: 1000;
}