@font-face {
    font-family: "ApercuProRegular";
    src:   url("fonts/ApercuProRegular.ttf") format("truetype");
}
@font-face {
    font-family: "ApercuPro-Light";
    src:   url("fonts/ApercuPro-Light.otf");
}
@font-face {
    font-family: "ApercuProBold";
    src:   url("fonts/ApercuProBold.ttf") format("truetype");
}
@font-face {
    font-family: "DINCondensedBold";
    src:   url("fonts/DINCondensedBold.ttf") format("truetype");
}
@font-face {
    font-family: "ApercuProMono";
    src:   url("fonts/CeraProLight.otf");
}


    body::-webkit-scrollbar { 
        width : 0 !important /* Webkit */ 
    } 
    body { 
        -ms-overflow-style : none; /* IE10+ */
        overflow           : -moz-scrollbars-none; /* FireFox, но может не работать */
	-youbkit-touch-callout: none; /* iOS Safari */
	-youbkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;	   /* Firefox */
	-ms-user-select: none;		/* IE 10+ and Edge */
	user-select: none;			/* Non-prefixed version,
								  currently supported by Chrome and Opera */

    }
    ::-webkit-scrollbar { /* Webkit */
        width      : 0;  /* ширина scrollbar'a */
        background : transparent  /* опционально */
    } 

    html {
        -ms-overflow-style : none;  /* IE 10+ */
        scrollbar-width    : none /* Firefox */
    }


html, body {
    margin: 0;
    padding: 0;
    font-family: 'ApercuProMono';
    background-color: #fff;
    font-size: 14px;
    color: #3d70e5;
}
h1,h2,h3{
    font-weight: 700;
}
div.container-fluid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
}

body.overflow{
    overflow: hidden;
}
a{
    cursor: pointer;
}
.strong {
    font-weight: 500;
}

#renderCanvas,#renderCanvasConductor,#renderInfo{
    width: 100%;
    height: 100%;
}


.head-svg{
    height: 160px;
    width: 100%;
    z-index: 10;
    left: 0px;
    top: 0px;
}
.button-exit,.exit-sheme{
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 12;
    cursor: pointer;
    width: 60px;
    display: none;
}
.exit-sheme{
    display: block;   
}
.button-exit.active{
    display: block;
}
#load-animation{
    height: 50%;
}
#customLoadingScreenDiv{
    position: fixed;
    width: 100%;
    height: 100vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
    flex-direction: column;
    background-color: #fff;
    opacity: 1;
}
.loaded #customLoadingScreenDiv{
    display: none;
}
.landing-list{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% + 15px);
    display: flex;
    align-items: center;
    overflow-y: auto;
    height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
}

#load-text{
    font-size: 32px;
    display: block;
    color:  #3d70e5;
}
#babylonjsLoadingDiv{
    display: none;
}

.b-header{
    z-index: 9;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0px;
    box-sizing: border-box;
    padding-left: 24px;
}
.b-header-text{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px;
}
.b-header-text .b-line{
    display: block;
}
.b-header-text.b-header-text--2{
    justify-content: center;
    padding-top: 0px;
}
.b-header-text.b-header-text--3{
    justify-content: flex-end;
    float: left;
    padding-top: 0px;
}
.b-line--black{
    background: #000;
    height: 1px;
}
.b-text{
    font-size: 30px;
    font-weight: 300;
    display: block;
    padding: 0px 8px;
}
@media(max-width: 576px){
    .b-text{
        font-size: 16px;
        font-weight: 300;
    }
    .b-header-text{
        padding-top: 24px;
    }   
}

.object-desc{
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: -100%;
    transition: all .7s;
    background: gray;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.object-desc.active{
    display: block;
    opacity: 1;
    z-index: 100;
    left: 0%;
}
.object-desc .text{
    width: 100%;
    height: 100%;
    position: absolute;
    left: -100%;
    background: #fff;
    color: #3d70e5;
    transition: all .7s;
    box-sizing: border-box;
    padding: 0px 30px;
    padding-top: 100px;
}
.object-desc.active .text{
    left: -0%;
}
[data-target = M_1]{

}
[data-target = M_2]{

}
[data-target = M_3]{

}
[data-target = M_4]{

}
[data-target = M_5]{

}
[data-target = M_6]{

}
[data-target = M_7]{

}
[data-target = M_8]{

}[data-target = M_9]{

}
[data-target = M_10]{

}
.icon{
    position: absolute;
    height: 100px;
    z-index: 9;
    opacity: 0;
    transition: all, 1s;
    cursor: pointer;
}
.icon-active{
    opacity: 1;
}
.icon--patent{
    top: 30%;
    right: 19%;
}
.icon--scientific{
    top: 18%;
    right: 19%;
}
.container{
    width: 100%;
    display: flex;
    height: 100vh;
    position: relative;
}
.container--canvas{
     padding: 0px;
     width: 85%;
     height: 100%;
     position: relative;
     overflow: hidden;
}

@media(max-width: 1600px){
    .container{
        width: 1200px;
    }    
}


@media(max-width: 991px){
    .container{
        width: 767px;
    }    
}

@media(max-width: 767px){
    .container{
        width: 576px;
    }    
}

@media(max-width: 576px){
    .container{
        width: 100%;
    }    
}
.row{
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}
.col-6{
    width: 50%;
}
@media(max-width: 576px){
 .col-6{
        width: 100%;
    }   
}
.text-block{
    background-color: #fff;
    font-size: 14px;
}
.h1{
    text-align: center;  
    font-size: 24px;
}
.feedback-container{
    padding-top: 24px;
    width:  calc(100% - 60px);
    height: 400px;
    z-index: 12;
    left: calc(50% - 160px);
    top: calc(50% - 200px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 623px;
}
.feedback textarea{
    width: 60%;
    box-sizing: border-box;
    background: none;
    border: 2px solid rgb(61, 112, 229);
    resize: none;
    height: 150px;
}
.feedback textarea:active{
     border: 2px solid rgb(61, 112, 229);
}
.feedback{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    z-index: -1;
    transition: opacity 3s;
}
.feedback.active{
    z-index: 15;
    opacity: 1;
}
.feedback input, .feedback label {
    box-sizing: border-box;
    display: block;
    margin-top: 12px;
    font-size: 16px;
    background: none;
    color: #3d70e5;
    padding-bottom: 24px;
}
.feedback input {
    width: 60%;
    border: 2px solid #3d70e5;
    height: 30px;
    padding-bottom: 0px;
}
.feedback label{
    width: 40%;
}
@media (max-width: 767px){
    .feedback input {
        width: 100%;
    }
    .feedback label{
        width: 100%;
    }   
    .feedback input, .feedback label{
        padding-bottom: 0px;
    }
    .feedback textarea {
        width: 100%;
        height: 100px;
        margin-top: 12px;
    }
    .feedback-container{
        height: 500px;
    }
}
.feedback-container div{
    border: 1px solid #3d70e5;
}

.feedback input.send-but{
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 2px;
    width: 60px;
}

.fps{
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
}

.container--after_canvas{
    margin-top: -20px;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255,255,255,0.4009804605435925) 88%, rgba(255,255,255,0.15448186110381656) 90%, rgba(255,255,255,0.20210090872286413) 92%, rgba(255,255,255,0.15728298155199583) 93%, rgba(255,255,255,0.11806729527748594) 95%, rgba(255,255,255,0.07044824765843838) 97%, rgba(255,255,255,0.050840404521183435) 99%, rgba(255,255,255,0) 100%)
}


.container--canvas:focus,#renderCanvas:focus,#renderCanvasConductor:focus{
    border: none;
    outline: none;
}

.header{
    height: 30px;
    width: 68%;
    display: flex;
    flex-direction: column;
    flex-direction: row;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
    transition: opacity 1.25s;

}

.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
    display: none;
}
.header_block-text{
    font-size: 14px;
    line-height: 21px;
    padding-left: 5px;
    position: relative;
    font-family: ApercuProMono;
    color: #3d70e5;
    transition: all, 2.75s;
    cursor: pointer;
}
.header_block-text.s-2{
    color: #fff;
}
.header_block-text sup{
    font-size: 10px;
}

.header_block-slash{
    width: 4%;
    display: flex;
    justify-content: center;
    max-width: 40px;
}
.slash {
    height: 30px;
    width: 1px;
    background: #3d70e5;
    transform: rotate(26deg);
}
a.header_block{
    text-decoration: none;
}
.header_block--big{
     width: 25%;
}
.header_block-spacer{
    width: 7%;
}
.header_block--big .header_block-text{
    line-height: 28px;
    text-transform: uppercase;
    letter-spacing: 0px;
    font-family: DINCondensedBold;
    font-size: 24px;
    display: flex;
    justify-content: flex-end;
}

.header-container{
    height: 73px;
    z-index: 11;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    width: 100%;
    top: -200px;
    transition: top 0.7s;
}
.header-container.active{
    top: 0px;    
}
.anchor-block{
    height: 28vh;
    top: 36vh;
    position: fixed;
    right: 3%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    z-index: 15;
}
.anchor{
    border: 3px solid #3d70e5;
    width: 7px;
    height: 3px;
    border-radius: 7px;
    transition: all, 1.25s;
    cursor: pointer;
}
.anchor.active{
    background: #3d70e5;
}
.anchor-block.inverse .anchor{
     border: 3px solid #fff;
}
.anchor-block.inverse .anchor.active{
     background: #fff;
}
.left{
    width: 15%;
    box-sizing: border-box;
    padding: 0px 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    background: #3d70e5;
    z-index: 5;
}
.right{
    width: 85%;
    height: 100%;
}
.c-blue{
    color: #3d70e5;
}
.left-lower{
    box-sizing: border-box;
    padding-bottom: 60px;
}
.row-between{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    box-sizing: border-box;
    padding-right: 24px;
    width: 85%;
    align-items: flex-end;
}
.left--conductor{
    color: #3d70e5;
    background: #fff;
}
.left-logo{
    height: 100px;
    width: 100%;
    background-image: url(https://www.abir.holdings/ABIR_LOGO.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 24px;
}

.left--conductor .left-logo{
    color:  #3d70e5;
}
.left-text{
    padding-top: 30px;
    font-size: 14px;
    position: relative;
}
.left-abs-text {
    position: absolute;
    left: -3500px;
    top: -85px;
    z-index: 10;
    color: #3d70e5;
    text-transform: uppercase;
    width: 200%;
    font-family: DINCondensedBold;
    font-size: 40px;
    letter-spacing: 1px;
}

@media(max-width: 1600px){
    .left-abs-text {
        width: 100%
    }
}
.header_block--big{
    position: relative;
}
.logo-circle{
    position: absolute;
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: -82px;
}
.logo-circle{
    width:;
}
.left-abs-text.active {
   left: calc(100% + 100px);
}
.space-container{
    height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: #fff;
}
@media(max-width: 1600px){
    .left{
        width: 20%;
    }
    .right{
        width: 80%;   
    }
    .row-between{
        width: 75%;
    }
    .container--canvas{
        width: 80%;
    }

}
@media(max-width: 1400px){
    .left{
        width: 20%;
    }
    .right{
        width: 80%;
    }
    .row-between{
        width: 80%;
    }
    .container--canvas{
        width: 80%;
    }

}

.conductor-info{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: calc(100% + 1px);
    flex-direction: column;
}
.conductor-info--right{
    width: 50%;
    box-sizing: border-box;
    padding-top: 42px;
    padding-right: 24px;
    max-width: 991px;
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.conductor-info--left{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.conductor-info-desc .text{
    width: 90%;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase; 
    transition: all, 0.7s;
    font-weight: 700;
}

.num{
    width: 10%;
    font-size: 10px;
}
.conductor-info-desc{
    display: flex;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: center;
    transition: all, 0.7s;
}
.conductor-info-desc.active{
    margin-left: -6px;
}
.conductor-info--upper{
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

}
.conductor-info--upper .slash{
    background: #fff;
    margin-top: 4px;
}
.conductor-info--lower{
    display: flex;
    flex-direction: row;
    height: calc(100% - 175px);
}
.info_left-head{
    text-transform: uppercase;
    font-family: DINCondensedBold;
    font-weight: 100;
    width: 50%;
    box-sizing: border-box;
    padding-top: 75px;
}
.info_left-head h1{
    font-size: 42px;
}
.space-animation{
    height: 100%;
    width: 100%;
}
.col-12{
    width: 100%;
}
.col-12-2{
    width: 100%;
    height: 20%;
}


.col-3{
    width: 33.33333%;
}
.col-2{
    width: 25%;
}
.container--canvasInfo{
    width: 100%;
    height: 100%;
    position: relative;
}
.row.js-velocity{
    height: 100vh;
    min-height: 700px;
}
.js-velocity.js-gorizontal-scroll,.js-gorizontal-scroll-1{
    height: 100vh;
    width: 200%;
    display: flex;
    flex-wrap: nowrap;
    top:0px;
}
.js-gorizontal-1{
    background: black;
}
.js-gorizontal{
    background: red;
}
.js-velocity-1{
    top: 0px;
    left: 0px;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}
.row.row--custom{
    height: 200vh;
}
.bg-blue{
    background: rgb(61, 112, 229)!important;
}
.bg-white{
    background: #fff!important;
}
.js-gorizontal-1 .right{
    height: 100%;
}
.future-logo{
    position: absolute;
    top: calc(50% - 60px);
    width: 100%;
    height: 55px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://www.abir.holdings/svg/logo_line.svg);
    left: calc(15% + 100px);
    background-position-y: center;
    background-repeat-y: no-repeat;
} 
.@media(max-width: 1600px){
    .future-logo,.future-line--white{
       left: calc(15% + 100px);
    }
}
.future-line{
    position: absolute;
    top: calc(50% - 60px);
    width: 100%;
    height: 55px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://www.abir.holdings/svg/blueline.svg);
    left: 0px;
    background-position-y: center;
    background-repeat-y: no-repeat;
}    
.future-line--white{
    position: absolute;
    top: calc(50% - 60px);
    width: calc(100% + 10px);
    height: 55px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(https://www.abir.holdings/svg/whiteline.svg);
    left: -1px;
    left: 15%;
    background-position-y: center;
    background-repeat-y: no-repeat;
}

.object-desc h2{
    text-transform: uppercase;
    font-family: DINCondensedBold;
    font-size: 42px;
}

.sientific{
    background-color: rgb(61, 112, 229);
    width: 100%;
    height: 160vh;
    position: absolute;
    top: -200%;
    left: -200%;
    transition: top, 1s;
    z-index: 105;
}

.sientific .sheme-1 {
    height: 80vh;
    width: 80vw;
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 10vw;
    padding-right: 10vw;
    object-fit: contain;
    opacity: 0;
    transition: opacity, 3.4s;
}
.sientific .sheme-2{
    height: 90vh;
    width: 90vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    opacity: 0;
    transition: opacity, 3.4s;
}
.sientific.active{
    top: 0%;
    left: 0%;
}
.sientific.active .sheme-2, .sientific.active .sheme-1{
    opacity: 1;
}

.animation-container,.animation-container-1{
    height: 90vw;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
    min-height: 767px;
}
.animation-container-1{
    height: 120vw;
}
.left.gradient{
    background: rgb(61,127,229);
}

.anim{
    position: absolute;
}
.anim-1{
    right: 0%;
    top: 15%;
    width: 60%;
    height: 40%;
    z-index: 10;
}
.anim-1-1{
    right: 0%;
    top: 0%;
    width: 100%;
    z-index: 10;
}
.anim-1-2{
    right: 0%;
    top:42px;
    width: 100%;
    height: 45vw;
    z-index: 10;
}
.anim-1-3{
    left: -10%;
    top: 55vw;
    width: 100%;
    height: 55vw;
    z-index: 10;
}

.anim-5{
    left: 17%;
    top: 2px;
    width: 30%;
    height: 20%;
}
.anim-6{
    right: 5%;
    top: 32%;
    width: 30%;
}
.anim-7{
    right: 27%;
    top: 2px;
    width: 30%;
}
.anim-8{
    left: 19%;
    bottom: 48%;
    width: 40%;
}
.anim-9{
    right: 33%;
    bottom: 12%;
    width: 35%;
}
@media(max-width: 1200px){
    .anim-5 {
        left: 7%;
        top: 2px;
        width: 42%;
        height: 43%;
    }
    .anim-9 {
        right: 33%;
        bottom: 0%;
        width: 35%;
    }
    .anim-8 {
        left: -4%;
        bottom: 16%;
        width: 53%;
    }
    .anim-7 {
        right: 17%;
        top: 2px;
        width: 39%;
    }
    .anim-6 {
        right: 5%;
        top: 44%;
        width: 30%;
    }
}
@media(max-width: 767px){
    .anim-7 {
        right: 0%;
        top: 15px;
        width: 61%;
    }
    .anim-6 {
        left: 0%;
        top: 28%;
        width: 38%;
    }
    .anim-5 {
        left: 0%;
        top: 2px;
        width: 50%;
        height: 20%;
    }
    .anim-8 {
        left: 55%;
        bottom: 24%;
        width: 62%;
    }
    .anim-9 {
        right: 30%;
        bottom: 0%;
        width: 60%;
    }
}
@media(max-width: 576px){
    .anim-8 {
        left: 23%;
        bottom: 35%;
        width: 93%;
    }
    .anim-5 {
        left: -7%;
        top: 2px;
        width: 60%;
        height: 25%;
    }
}
.animation-overlay,.animation-overlay-1,.animation-overlay-2,.animation-overlay-3{
    width: 100%;
    height: 200%;
    position: absolute;
}
.overlay-el{
    position: absolute;
    display: block;
    background: gray;

}
.animation-overlay .overlay-el-1{
    width: 18%;
    height: 60%;
    left: 6%;
    top: 35%;
}
.animation-overlay .overlay-el-2{
    width: 35%;
    height: 12%;
    left: 20%;
    top: 14%;
}

.animation-overlay-1 .overlay-el-1{
    width: 35%;
    height: 35%;
    right: 0%;
    top: 0%;
}

.littleInfo{
    position: absolute;
    right: 4%;
    width: 30%;
    height: 175px;
    top: -30px;
    right: -100%;
    transition: right, 0.7s
}
.littleInfo.active{
    right: 2%;
}

.controller-container {
    position: relative;
    width: 70%;
    padding-bottom: 125px;
}
.rangeslider--horizontal{
    height: 6px;
    border-radius: 0px;
    background-color: #fff;
}
.rangeslider--horizontal{
}
.rangeslider__handle{    
    border: none;
    width: 5px;
    height: 20px;
    border-radius: 0px;
}
.rangeslider--horizontal .rangeslider__handle {
    top: -8px;
}
.rangeslider__fill {
    background: #3d70e5;
    border-radius: 0px;
}
.rangeslider__handle:after{
    display: none;
}



   .info-desc::-webkit-scrollbar { 
        width : 0 !important /* Webkit */ 
    } 
   .info-desc { 
        -ms-overflow-style : none; /* IE10+ */
        overflow           : -moz-scrollbars-none; /* FireFox, но может не работать */
    }
    ::-webkit-scrollbar { /* Webkit */
        width      : 0;  /* ширина scrollbar'a */
        background : transparent  /* опционально */
    } 

    .info-desc {
        -ms-overflow-style : none;  /* IE 10+ */
        scrollbar-width    : none /* Firefox */
    }

.imp-text{
    font-size: 16px;
}
.burger,.info,.js-conductor-info{
    display: none;
}
@media(min-width: 1200px){
    .d-desc-none{
        display: none;
    }   
}

.mobile-head{
    display: none;
}

.scroll-to {
    display: block;
    width: 100%;
    height: 8%;
    bottom: 18vh;
    position: absolute;
    left: -100%;
}
.scroll-to.active{
    left: 0%;
}
.click-to{
    position: absolute;
    z-index: 1;
    height: 7%;
    top: -100%;
    transition: top, 0.7s;
    display: block;
    width: 200px;
}
.click-to.active{
    top: 15%;
    left: calc(50% - 100px);
}



.scroll-to {
    display: block;
    width: 100%;
    height: 8%;
    bottom: 3vh;
    position: absolute;
    left: -100%;
}


@media(max-width: 767px){
    .scroll-to {
        display: block;
        width: 100%;
        height: 8%;
        bottom: 18vh;
        position: absolute;
        left: -100%;
    }
    .scroll-to.active{
        left: 0%;
    }
    .click-to{
        position: absolute;
        z-index: 1;
        height: 7%;
        top: -100%;
        transition: top, 0.7s;
        display: block;
        width: 200px;
    }
    .click-to.active{
        top: 10%;
        left: calc(50% - 100px);
    }

}



.sheme-2{
    display: none;
}

.left.gradient{
    background: rgb(61,112,229);
    background: linear-gradient(180deg, rgba(61,112,229,1) 0%, rgba(255,255,255,1) 100%);
}
.right.gradient{
    background: rgb(61,112,229);
    background: linear-gradient(0deg, rgba(61,112,229,1) 0%, rgba(255,255,255,1) 100%);
}
body{
    overflow: hidden;
}
body.active{
    overflow: auto;
    height: 100vh;
}
.scrollable{
    position: absolute;
    height: 35vh;
    width: 100%;
    bottom: 0px;
    z-index: 10;
}
.animation-container-1.row.js-velocity{
    flex-direction: column;
    align-items: center;
}
h1.h1{
    color: #3d70e5; 
    font-size: 42px;
    box-sizing: border-box;
    padding: 0px 24px;
    line-height: 44px;
}
@media(max-width: 1200px){
    h1.h1{
       font-size: 36px; 
    }
}
.big-text-head{
    height: auto;
    width: 100%;
    position: relative;
    margin-top: 52px;
}
.anim-line{
    height: 4px;
    width: 100%;
    background: rgb(61, 112, 229);
    position: absolute;
    top: 50% ;
    left: calc(-100% - 70px);
    transition: left, 0.7s;
}
.anim-line--right{
    height: 4px;
    width: 100%;
    background: rgb(61, 112, 229);
    position: absolute;
    top: 51px;
    right: calc(-100% - 70px);
    transition: right, 0.7s;
}
.js-anim-line--right-1.active{
     right: calc(-50% - 110px);
}
.anim-line--right.active{
     right: calc(-50% - 100px);
}
.anim-line--right-2.active{
     right: calc(-50% - 130px);
}
.anim-line.active{
     left: calc(-50% - 70px);
}
.text-line{
    color: #3d70e5;
    line-height: 170%;
    font-size: 14px;
    max-width: 623px;
    padding: 0px 24px;
}
.left-anim-circle{
    position: absolute;
    right: 0px;
    height: 21px;
    width: 21px;
    background: rgb(61, 112, 229); 
    top: -9px;
    border-radius: 12px;
}
.anim-line--right span{
    left: 0%;
    position: absolute;
    height: 21px;
    width: 21px;
    background: rgb(61, 112, 229); 
    top: -9px;
    border-radius: 12px;
}
.pt-42{ 
    padding-top: 42px;
}
.steps-list{
    list-style: none;
    color: rgb(61, 112, 229);
    padding-inline-start: 0px;
    box-sizing: border-box;
    padding: 0px 24px;
}
.steps-list li{
    padding-top: 6px;
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.animation-container-1.row.js-velocity{
    height: auto;
}
.anim-circle{
    width: 15px;
    height: 15px;
    background: gray;
    display: inline-block;
    margin-right: 10px;
    border-radius: 7px;
}

.block{
    display: block;
    width: calc(100% - 25px);
}
.maps{
    width: 100%;
    height: 50vh;
    max-width: 623px;
    min-height: 317px
}
.contacts-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.js-anim-line1{
    top: 51px;
}
.js-anim-line1.active {
    left: calc(-50% - 200px);
}
@media(max-width: 1200px){
    .js-anim-line1{
        top: 45px;
    }
    .js-anim-line1.active {
        left: calc(-50% - 163px);
    }
    .anim-line--right {
        top: 45px;
    }   
}
.contacts {
    list-style: none;
    color: #3d70e5;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 623px;
    padding-inline-start: 0px;
}
.contacts li{
    padding-top: 6px;
}
h2{
    font-family: DINCondensedBold;
    color: #3d70e5;
    font-weight: 24px;
}
.cont-info{
    max-width: 623px;
    color: #3d70e5;
    padding: 0px 24px; 
}
a{
    text-decoration: none;
    cursor: pointer;
}
p.cont-info{
    padding-bottom: 28px;
}
.team-headers{
    max-width: 623px;
}

.team-info .conductor-info-desc .text{
    color: #3d70e5;
}
@media(max-width: 1200px){
    .left-text{
        padding-top: 80px;
    }
    .container{
        width: 991px;
    }    
}
.team-thumb{
    background: black;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin-bottom: 25px;
}
.team-row{
    width: 100%;
    box-sizing: border-box;
    padding: 50px 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
@media(max-width: 767px){
    .team-row{
        padding: 0px;
    }    
}
 .team-one{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
 }
 .team-position{
    width: 80%;
    text-align: center;
    max-width: 200px;
 }
 .team-name,.team-name a{
    text-align: center;
    font-family: "ApercuProBold";
    color: #3d70e5;
    font-weight: 400;
    font-size: 19px;
    padding-bottom: 12px;
 }

.team-one{
    width: 25%;
    padding: 50px;
    box-sizing: border-box;
}  
.team-more{
    padding-top: 12px;
    cursor: pointer;
}
@media(max-width: 1600px){
    .team-one{
        width: 33.333%;
    }   
}
@media(max-width: 1200px){
    .team-one{
        width: 50%;
    }   
}
@media(max-width: 991px){
    .team-one{
        width: 50%;
    }   
}
@media(max-width: 576px){
    .team-one{
        width: 100%;
    }   
}
@media(max-width: 1500px){
    .header{
         width: 80%;
        }
    .left-abs-text.active {
        left: calc(100% + 100px);
    }
    .logo-circle{
        width: 160px;
    }
}
.sientific-back{
    background: #3d70e5;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: -100%;
    transition: left, 1s;
}
.sientific{
    background: rgb(128,128,128);
}
.sientific-back--white{
    background: #fff;
    transition: left, 1s;
}
.sientific.active .sientific-back{
    left: -0%;
    top: 0%;
}
.team-info{
    overflow: auto;
    transition: opacity, 0.5s;
    position: fixed;
    top: -100%;
    background: #3d70e5;
    left: -100%;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 10;
}
.team-back{
    position: absolute;
    left: -100%;
    top: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: opacity, 0.7s;
    box-sizing: border-box;
    padding: 48px;
    padding-left: 20%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    z-index: 10;
    padding-right: 20%;
}
@media(max-width: 1400px){
    .team-back{
        padding-left: 48px;
        padding-top: 110px;
    }
}

.team-more.active .team-info,.team-more.active .team-info .team-back{
    top: 0%;
    left: 0%;
}
.exit-team{
    position: fixed;
    right: -100px;
    top: -100px;
    width: 84px;
    height: 84px;
    z-index: -1;
    transition: all, 0.7s;
}

.team-more.active .exit-team{
    z-index: 20;
    right: 20px;
    top: 20px;
}
.team-back ul{
    max-width: 991px;
}

.animation-container .left span{
    width: calc(100% - 60px);
    position: absolute;
    top: 23%;
}
.team-thumb{
    position: relative;
}
.team-thumb-1{
    background-image: url("https://www.abir.holdings/team/rokhvarger.png");
    background-size: cover;
    background-position: center;
}
.team-thumb-in-1{
     background-size: cover;
    background-image: url("https://www.abir.holdings/team/rokhvarger_blue.png");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity, 0.7s;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-position: center;
}
.team-thumb-in-1:hover{
    opacity: 0;
}
.team-thumb-2,.team-thumb-3{
    background-image: url("https://www.abir.holdings/team/solomon.png");
    background-size: cover;
    background-position: center;
}
.team-thumb-3{
    background-image: url("https://www.abir.holdings/team/lyahovich.jpg");
    background-position-y: 14%;
}
.team-thumb-in-2,.team-thumb-in-3{
    background-size: cover;
    background-image: url("https://www.abir.holdings/team/solomon_blue.png");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity, 0.7s;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-position: center;
}
.team-thumb-in-3{
	background-image: url("https://www.abir.holdings/team/lyahovich_blue.jpg");
	background-position-y: 14%;
}
.team-thumb-in-2:hover,
.team-thumb-in-3:hover{
    opacity: 0;
}
.team-thumb-6{
    background-image: url("https://www.abir.holdings/team/boiko.png");
    background-size: cover;
    background-position: center;
}
.team-thumb-in-6{
     background-size: cover;
    background-image: url("https://www.abir.holdings/team/boiko_blue.png");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity, 0.7s;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-position: center;
}
.team-thumb-in-6:hover{
    opacity: 0;
}
.team-thumb-7{
    background-image: url("https://www.abir.holdings/team/Chegerinskaya.png");
    background-size: cover;
    background-position: center;
}
.team-thumb-in-7{
     background-size: cover;
    background-image: url("https://www.abir.holdings/team/Chegerinskaya_blue.png");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity, 0.7s;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background-position: center;
}
.team-thumb-in-7:hover{
    opacity: 0;
}

.flags-container {
    width: 100%;
    max-width: 991px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flag {
    height: 130px;
    width: 170px;
    margin: 30px;
    background-size: cover;
    background-position: center;
}
@media(max-width: 767px){
    .flag {
        height: 76px;
        width: 100px;
        margin: 30px;
        background-size: cover;
        background-position: center;
    }
}
.flag-1{
    background-image: url(https://www.abir.holdings/flags/ru.svg)
}
.flag-2{
    background-image: url(https://www.abir.holdings/flags/uz.svg)
}
.flag-3{
    background-image: url(https://www.abir.holdings/flags/us.svg)
}
.flag-4{
    background-image: url(https://www.abir.holdings/flags/ae.svg)
}
.flag-5{
    background-image: url(https://www.abir.holdings/flags/Flag_of_Tatarstan.svg)
}
.flag-6{
    background-image: url(https://www.abir.holdings/flags/kz.svg)
}.flag-7{
    background-image: url(https://www.abir.holdings/flags/il.svg)
}
@media(max-width: 1200px){

    .logo-circle{
        right: calc(50% - 100px);
        top: -20px;
    }
    .mobile-head{
        z-index: 1;
        position: absolute;
        top: -100%;
        width: 100%;
        transition: top, 0.7s;
        display: block;
    }
    .mobile-head.active{
        top: 4%;
    }
    .anim-1-3{
        left: -27%;
        top: 60vw;
        width: 135%;
        height: 80vw;
        z-index: 10;
    }
    .anim-1-2{
        right: 0%;
        top: 42px;
        width: 145%;
        height: 70vw;
        z-index: 10;
        margin-right: -20%;
    }
    .anim-1-1 {
        right: 0%;
        top: 42px;
        width: 100%;
        z-index: 10;
    }
    .left{
        width: 100%;
        position: absolute;
        left: -100%;
        height: 100%;
        z-index: 14;
        transition: all, 0.7s;
        background: #fff;
        color: #3d70e5; 
    }
    .right{
        width: 100%;
    }
    .left.open{
        left: 0%;
    }
    .object-desc.active .text {
        left: -100%;
    } 
    .object-desc.open .text {
        left: 0%;
    }
    .object-desc.active{
        display: block;
        opacity: 1;
        z-index: 100;
        left: -100%;
    }
    .object-desc.open{
        display: block;
        opacity: 1;
        z-index: 100;
        left: 100%;
    }
    .container--canvas{
        width: 100%;
        height: 100%;
    }
    .header-container.js-factory-in{
        transform: translate(0px, 0px);
        height: 100%;
        background: #fff;
        flex-direction: column-reverse;
        top: -100%;
        z-index: 16;
    }
    .header-container.active.open{
        top: 0%;
    }
    .row-between{
        height: 100%;
        width: 100%;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .header_block--big{
        width: 100%;
        padding-top: 24px;
    }
    .header_block{
        padding-top: 48px;
        padding-left: 12px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .header_block-slash{
        display: none;
    }
    .header_block-text{
        font-size: 19px;
    }
    .header{
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
    }
    .header_block.header_block--big .header_block-text{
        justify-content: center;
    }
    .left-abs-text{
        display: none;
    }
    .burger {
        display: block;
        height: 40px;
        width: 40px;
        z-index: 20;
        position: absolute;
        top: -50%;
        left: -50%;
    }
    .burger.active {
        top: 5%;
        left: 5%;
    }
    .animation-container{
        height: 100vh;
    }
    .animation-container-1{
        height: 300vh;
    } 
    .d-m-none{
        display: none;
    }
    .info_left-head{
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 0px;
    }
    .conductor-info--right{
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 24px;
        transition: all, 0.7s;
        right: -100%;
        overflow-y: scroll;
        top: 0px;
        padding-top: 48px;
        background: #fff
    }
    .conductor-info--right.open{
        right: 0%;
    }
    .conductor-info--left{
        width: 100%;
    }
    .controller-container{
       padding-bottom: 50px; 
    }
    .rangeslider__handle {
        border: none;
        width: 10px;
        height: 30px;
        border-radius: 0px;
    }
    .rangeslider--horizontal {
        height: 10px;
    }
    .rangeslider--horizontal 
    .rangeslider__handle {
        top: -11px;
    }
    .info{
        display: block;
        height: 40px;
        width: 40px;
        z-index: 15;
        position: absolute;
        top: 5%;
        right: 5%;
        cursor: pointer;

    }
    .info-read{
        display: block;
        height: 29px;
        width: 29px;
        z-index: 15;
        position: absolute;
        top: 6%;
        right: -100%;
        transition: all,0.7s;
        background-image: url(https://www.abir.holdings/svg/pointer.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .info-read.active{
        right: calc(5% + 70px);
        animation: read 2s infinite ease-in-out;
    }
    @keyframes read {
        0%{transform:translate(0) rotateZ(90deg);}
        50% {transform: translate(30px,0) rotateZ(90deg);}
        100%{transform:translate(0) rotateZ(90deg);}     
    }
    .button-exit{
        right: calc(50% - 42px );
        top: calc(80% - 42px);
        width: 84px;
        height: 84px;
    }
    .exit-sheme{
        right: 0%;
        top: 5%;
        z-index: 20;
    } 
    .littleInfo {
        width: 100%;
        height: 22%;
        bottom: 0vh;
    }
    .row.js-velocity {
        height: 100vh;
        min-height: 0px;
    }
    .js-conductor-info{
        display: block;
        height: 41px;
        width: 41px;
        z-index: 20;
        position: absolute;
        right: 14%;
        top: 18%;
        transition: all, 0.7s;
        cursor: pointer;
    }
    .js-conductor-info.open{
        top: 0%;
    }
    .conductor-info--right.open{
        right: 0%;
    }
}

    .conductor-info--right .info-read{
        display: block;
        height: 29px;
        width: 29px;;
        z-index: 15;
        position: absolute;
        top: 50px;;
        transition: all,0.7s;
        background-image: url(https://www.abir.holdings/svg/pointer.png);
        background-size: contain;
        background-repeat: no-repeat;
    }

    .conductor-info--right .info-read.active{
        left: 0px;
        animation: read 2s infinite ease-in-out;
        display: none;
    }
    @keyframes read {
        0%{transform:translate(0) rotateZ(90deg);}
        50% {transform: translate(15px,0) rotateZ(90deg);}
        100%{transform:translate(0) rotateZ(90deg);}    
    }
@media(max-width: 767px){
    .conductor-info--right .info-read.active{
        display: block;
    }
    .sheme-1{
        display: none;
    }
    .sheme-2{
        display: block;
    }
    .sientific img{
        object-fit: contain;
        height: 100vh;

    }
    .mobile-none{
        display: none;
    }
    .anim-1-2{
        right: 0%;
        top: 23%;
        width: 160%;
        height: 80vw;
        z-index: 10;
        margin-right: -28%;
    }

   .littleInfo {
        top: 78vh;
    }
    .conductor-info--upper{
        height: 120px
    }
    .info_left-head h1 {
        font-size: 32px;
    }
     .anim-1 {
        right: 0%;
        top: 0%;
        width: 85%;
        height: 50%;
        z-index: 10;
    }
    .anim-2,.anim-4  {
        left: 0%;
        top: 25%;
        width: 80%;
        height: 60%;
    }
}
.team-info .text{
    font-weight: 700;
}
.zoom{
    padding-top: 14px;
    font-size: 19px;
    font-weight: 100;
    text-align: right;
}
.info-desc{
    height: 0%;
   	overflow: hidden;
    transition: all,0.7s;
    box-sizing: border-box;
    padding-left: 24px;
}
.info-desc.active{
     height: 100%;
}
.info-desc div{
	padding-bottom: 24px;
	box-sizing: border-box;
}
.pl-25{
	padding-left: 49px
}
.pointer-img{
    background-image: url(https://www.abir.holdings/svg/pointer.png);
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    width: 29px;
    height: 29px;
    background-size: contain;
    position: absolute;
    left: -4px;
    animation: pointer  2s infinite ease-in-out;
}
@keyframes pointer {
     0%{transform:translate(0);}
     25%{transform:translate(0,-10px);}
     50%{transform:translate(40px,-10px);}
     75%{transform:translate(40px,0);}
     0%{transform:translate(0);}     
}
#customLoadingScreenDiv p{
    text-align: center;
    padding-top: 12px;
}

.send-but{
    border: 2px solid #3d70e5;
    padding: 4px 10px;
    margin-top: 12px;
    cursor: pointer;
    user-select: none;
    font-weight: 700;
}
.send-but:active{
    color: #fff;
    background:  #3d70e5;
}
.thx{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
}
.pb-4{
	padding-bottom: 48px;
}
/* Prevent text selection of a <body> element in all major browsers */
body {
	-youbkit-touch-callout: none; /* iOS Safari */
	-youbkit-user-select: none;   /* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
	-moz-user-select: none;	   /* Firefox */
	-ms-user-select: none;		/* IE 10+ and Edge */
	user-select: none;			/* Non-prefixed version,
								  currently supported by Chrome and Opera */
}