@charset "UTF-8";
.items .adv-item h3,.social ul li a,.top_h,h1,h2,h3{
    text-transform:uppercase
}
.button_ghost:acitve,.button_ghost:focus,.button_ghost:hover,:focus,a:active,a:hover{
    outline:0
}
button,select{
    text-transform:none
}
.text-center,.tiles .tile,h1,h2,h3{
    text-align:center
}
.social ul,header .nav .nav-elements .navbar li{
    list-style:none
}
#about,#complex,section#services{
    min-height:100vh
}
@font-face {
    font-family: 'Gilroy';
    src: url('./fonts/gilroy/Gilroy-Regular.eot');
    src: url('./fonts/gilroy/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/gilroy/Gilroy-Regular.woff2') format('woff2'),
    url('./fonts/gilroy/Gilroy-Regular.woff') format('woff'),
    url('./fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('./fonts/gilroy/Gilroy-Medium.eot');
    src: url('./fonts/gilroy/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
    url('./fonts/gilroy/Gilroy-Medium.woff') format('woff'),
    url('./fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('./fonts/gilroy/Gilroy-Bold.eot');
    src: url('./fonts/gilroy/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/gilroy/Gilroy-Bold.woff') format('woff'),
    url('./fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('./fonts/gilroy/Gilroy-Light.eot');
    src: url('./fonts/gilroy/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
    url('./fonts/gilroy/Gilroy-Light.woff2') format('woff2'),
    url('./fonts/gilroy/Gilroy-Light.woff') format('woff'),
    url('./fonts/gilroy/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url('./fonts/gilroy/Gilroy-ExtraBold.eot');
    src: url('./fonts/gilroy/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/gilroy/Gilroy-ExtraBold.woff2') format('woff2'),
    url('./fonts/gilroy/Gilroy-ExtraBold.woff') format('woff'),
    url('./fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face{
    font-family:ProximaNovaBold;
    src:url(fonts/ProximaNovaBold/ProximaNovaBold.eot);
    src:url(fonts/ProximaNovaBold/ProximaNovaBold.woff) format("woff"),url(fonts/ProximaNovaBold/ProximaNovaBold.ttf) format("truetype");
    font-weight:300;
    font-style:normal
}
html{
    font-size:62.5%
}
body{
    background:#fefefe;
    font-family: Gilroy,sans-serif;
    font-size:1.8rem;
    padding:0
}
h1,h2,h3{
    font-family: Gilroy, sans-serif;
    font-weight: bold;
}
p{
    font-size:1.4rem
}
h2{
    font-size:4rem
}
.container{
    max-width:100rem;
    margin:auto;
    padding:1.6rem 2rem 0;
    flex-direction:column;
    justify-content:space-between;
    align-items:center
}
.button_ghost{
    border-radius:2.5rem;
    border:.2rem solid #f2f2f2;
    background:0 0;
    padding:1.1rem 4rem;
    transition:all .15s ease-out
}
hr,img,legend{
    border:0
}
legend,td,th{
    padding:0
}
.button_ghost:hover{
    transition:all .3s ease-out;
    background-color:#ececec;
    color:#020202;
    opacity:.9
}
/*! normalize.sass v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block;
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent
}
abbr[title]{
    border-bottom:1px dotted
}
b,optgroup,strong{
    font-weight:700
}
dfn{
    font-style:italic
}
h1{
    font-size:2em;
    margin:.67em 0
}
mark{
    background:#ff0;
    color:#000
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    vertical-align:baseline;
    position:relative
}
sub{
    bottom:-.25em
}
sup{
    top:-.5em
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:1em 40px
}
pre,textarea{
    overflow:auto
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
button,input,optgroup,select,textarea{
    color:inherit;
    font:inherit;
    margin:0
}
button{
    overflow:visible
}
#blackout,.backlines,.backlines span,.hero-text,.tiles{
    overflow:hidden
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
button::-moz-focus-inner{
    border:0;
    padding:0
}
input{
    line-height:normal
}
input::-moz-focus-inner{
    border:0;
    padding:0
}
input[type=checkbox],input[type=radio]{
    box-sizing:border-box;
    padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    height:auto
}
input[type=search]{
    -webkit-appearance:textfield;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
fieldset{
    border:1px solid silver;
    margin:0 2px;
    padding:.35em .625em .75em
}
table{
    border-collapse:collapse;
    border-spacing:0
}
.tile:nth-child(1){
    animation-delay:.6s
}
.tile:nth-child(2){
    animation-delay:.9s
}
.tile:nth-child(3){
    animation-delay:1.1s
}
#clients .logo,#clients h2{
    opacity:0
}
#clients .logo.animated{
    opacity:1;
    transition:.6s opacity
}
#uslugi-menu,.fade-2{
    opacity:0
}
@keyframes scroll{
    0%{
        opacity:0
    }
    10%{
        transform:translateY(0);
        opacity:1
    }
    100%{
        transform:translateY(15px);
        opacity:0
    }
}
.fade-1{
    animation:fade 15s linear 2s infinite normal
}
.fade-2{
    animation:fade2 15s linear 2s infinite normal
}
@keyframes fade{
    0%,100%{
        opacity:1
    }
    20%,40%,60%,80%{
        opacity:0
    }
}
@keyframes fade2{
    0%,100%,20%,80%{
        opacity:0
    }
    40%,60%{
        opacity:1
    }
}
section .container h2{
    margin:1.5rem 0;
    font-weight:900
}
section .container p{
    margin-top:.4rem;
    color:#575757
}
section .container .subtitle{
    font-weight:300;
    font-size:1.8rem
}
section#services{
    height:auto;
    background:url(img/services_background.jpg) center fixed;
    background-size:cover
}
section#services .container{
    padding-bottom:3rem
}
section#services .container .after-text{
    color:#242424;
    display:block;
    max-width:80rem;
    font-weight:400;
    margin-top:5rem;
    font-size:1.6rem
}
section#advantages .container,section#services .container{
    display:flex;
    align-items:center;
    justify-content:center;
    height:auto
}
section#advantages{
    display:flex;
    background:url(img/background2_1.jpg);
    background-size:auto;
    min-height:100vh
}
section#advantages .container{
    height:auto;
    max-width:100%;
    padding:1.6rem 0 5rem
}
#uslugi-menu.animated{
    opacity:1
}
hr{
    box-sizing:content-box;
    display:block;
    height:.1rem;
    border-top:.7rem solid #bc0f0f;
    margin:0 0 -.1rem;
    padding:0
}
.tiles{
    color:#fefefe;
    display:flex;
    justify-content:center;
    z-index:1
}
.tiles .tile{
    background-color:#242424;
    background:linear-gradient(135deg,#242424 0,#242424 50%,#000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#000000', GradientType=1 );
    padding:4rem 2em;
    z-index:0;
    height:40rem;
    flex:33%;
    transition:all .3s ease-in-out
}
.tiles .tile h3{
    font-size:2rem;
    height: 1.9em;
}
.tiles .tile p{
    font-size:1.4rem;
    color:#fefefe;
    opacity:.6;
    height:17rem
}

.tiles .tile ul {
    padding-left: 0;
    height: 17rem
}

.tiles .tile li {
    list-style: none;
    font-size:1.4rem;
    color:#fefefe;
    opacity:.6;
    margin-bottom: 0.5em;
}
.tiles .tile img{
    position:relative;
    bottom:0
}
.tiles .tile:hover{
    height:42rem;
    transition:all .3s ease-out;
    box-shadow:0 0 6rem 0 rgba(0,0,0,.9);
    z-index:1
}
.tiles .tile:hover a.tile__button{
    display:block
}
.tiles .tile a.tile__button:hover{
    background-color:#ececec;
    color:#020202;
    transition:all .15s ease-out;
    opacity:.9
}
.tiles .tile a.tile__button,button.order_callback{
    color:#fefefe;
    transition:all .15s ease-out;
    position:relative
}
.tiles .tile a.tile__button{
    display:none;
    width:15rem;
    margin:1.7rem auto auto;
    padding:1rem .7rem;
    border:.1rem solid #ececec;
    border-radius:5rem;
    text-decoration:none;
    font-weight:500;
    font-size:1.8rem
}
button.order_callback{
    background-color:#bc0f0f;
    border-radius:5rem;
    padding:1rem 2.5rem;
    box-shadow:none;
    border:none;
    top:1.5rem;
    margin-bottom:1rem
}
.companies .row .logo:nth-child(2),.companies .row:nth-child(even) .logo:first-child,.companies .row:nth-child(odd) .logo:first-child{
    border-right:.1rem solid #242424
}
.companies .row:nth-child(even) .logo:last-child,.companies .row:nth-child(odd) .logo:last-child{
    border-left:.1rem solid #242424
}
button.order_callback:hover{
    transform:scale(1.07)
}
.about__in-numbers,.about__text{
    display:flex;
    flex-direction:column
}
#about{
    background-color:#fefefe;
    display:flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}
#about .about__text{
    /*flex:65%*/
}
#about .container{
    height:auto
}
#about .container .text-blocks{
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    padding: 30px 0;
}

#about .about-col {
    float: left;
    width: 50%;
    padding: 0 15px 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 9em;
    margin-bottom: 1.5em;
    border-left: 2px solid #bc0f0f;
    overflow: hidden;
}

#about .about-col .about-col-content {
    position: relative;
    -webkit-transform: translateX(-500px);
    -moz-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    -o-transform: translateX(-500px);
    transform: translateX(-500px);
    transition:2s all cubic-bezier(.25,.46,.45,.94) 1s;
}


#about .about-col.animated .about-col-content {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}

#about .about-col i {
    font-size: 30px;
    /*position: absolute;*/
    /*right: 0;*/
    /*bottom: 20px;*/
    margin-bottom: 10px;
}

#about .about-col h3 {
    font-size: 16px;
    text-align: left;
    margin: 15px 0 15px;
    color: #bc0f0f;
}

#about .about-metrics {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

#about  .metric-block {
    margin-bottom: 30px;
}

#about .metric-line {
    background-repeat: no-repeat;
    background-position: left top;
    height: 42px;
    padding: 10px 25px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    margin-left: -15px;
}

#about .metric-line.animated {
    transition:2s width cubic-bezier(.25,.46,.45,.94) .5s;
}

#about .metric-economy .metric-line {
    background-image: url(./img/metrics-bg-1.png);
}

#about .metric-economy .metric-line.animated {
    width: 8.5em;
}

#about .metric-contract .metric-line {
    background-image: url(./img/metrics-bg-2.png);
}

#about .metric-contract .metric-line.animated {
    width: 13em;
}

#about .metric-branch .metric-line {
    background-image: url(./img/metrics-bg-3.png);
}

#about .metric-branch .metric-line.animated {
    width: 9em;
}

#about .metric-ware .metric-line {
    background-image: url(./img/metrics-bg-4.png);
}

#about .metric-ware .metric-line.animated {
    width: 8em;
}

.about-metrics {
    padding-top: 6rem;
}

#about .metric-digit {
    display: inline-block;
    margin-left: -15px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    vertical-align: top;
    text-align: center;
    height: 42px;
    width: 42px;
    transform-origin: 50% 50%;
}

#about .about-img img {
    max-width: 100%;
    -webkit-box-shadow:  5px 5px 10px rgba(239, 16, 16, 0.4);
    -moz-box-shadow:  5px 5px 10px rgba(239, 16, 16, 0.4);
    box-shadow:  5px 5px 10px rgba(239, 16, 16, 0.4);
    margin-left: -20px;
}

#about .about-text {
    width: 67%;
    display:inline-block;
    font-weight:400;
    padding: 0 1.5rem;
    vertical-align: top;
}
#about .container .text-block p{
    margin-bottom:.5rem;
    font-weight:300;
    color:#313131
}
#clients{
    display:flex;
    justify-content:center;
    flex-direction:column;
    background:url(img/background.jpg)
}
#clients h2{
    color:#fefefe
}
.companies .row{
    display:flex;
    flex-direction:row;
    width:auto
}
.companies .row .logo{
    height:16rem;
    width:16rem;
    padding:2rem
}
@media screen and (min-width:2480px){
    .companies .row .logo{
        padding:5rem
    }
}
.companies .row .logo img{
    width:80%;
    position:relative;
    transition:all .3s ease-in-out;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:auto
}
.companies .row:nth-child(odd) .logo{
    border-bottom:.1rem solid #242424
}
.companies .row:nth-child(even){
    margin-bottom:3rem
}
.items{
    width:100rem;
    flex-flow:row wrap;
    justify-content:center;
    display:flex
}
.items .adv-item{
    width:48%;
    border:.2rem solid #f2f2f2;
    padding:2rem;
    margin:.5rem;
    display:inline-block;
    background:#fefefe
}
.items .adv-item h3{
    text-align:center;
    font-size:2.8rem;
    margin:2rem 0
}
.items .adv-item img{
    margin:auto;
    max-width:100%;
    height:5rem;
    display:flex;
    align-content:center
}
.items .adv-item p{
    display:block;
    height:12rem
}

.counter-section {
    padding-bottom: 40px;
}

.counter-section a {
    background: #bc0f0f;
    color: #fff;
    padding: 15px 25px;
    font-size: 15px;
    display: inline-block;
    margin-top: 30px;
}
header{
    min-height: 568px;
    height:100vh;
    padding:0;
    margin:0;
    background-image:url(img/background.jpg);
    background-repeat:repeat-x repeat-y;
    position:relative
}
.hero-text,.mousey,.social{
    position:absolute
}
header .container{
    z-index:10
}
header .slider-img{
    z-index:0;
    position:absolute;
    bottom:0;
    right:0;
    display:flex;
    height:95vh
}
header .nav{
    flex-direction:row
}
header .nav .nav-elements{
    display:flex;
    margin-top:1.5rem
}
header .nav .nav-elements .branding{
    flex:30%;
    z-index:10
}
header .nav .nav-elements .navbar{
    justify-content:flex-end;
    align-content:flex-start;
    flex-wrap:wrap;
    display:flex;
    z-index:10
}
header .nav .nav-elements .navbar li a{
    text-decoration:none;
    color:#fff;
    margin:0 0.7rem;
    text-transform:uppercase;
    font-size:1.2rem;
    font-weight:500
}
header .nav .nav-elements .navbar li a:hover{
    border-bottom:.1rem solid #bc0f0f;
    padding-bottom:.3rem;
    width:100%;
    transition:all .15s ease-out
}

header .nav .nav-elements .navbar.social-navbar li a {
    font-size: 1.5em;
}

header .nav .nav-elements .navbar.social-navbar li a:hover {
    padding-bottom: 0;
    border-bottom: 0;
    color: #bc0f0f;
}

.header .container {
    position: relative;
    min-height: 100vh;
}

.backlines{
    width:0;
    display:block;
    height:7.2rem;
}
.backlines span{
    display:block;
    line-height: 0.9;
}
.backlines.animated{
    opacity:1;
    background-color:#bc0f0f;
    display:inline-block;
    padding:.3rem 1rem;
    transition:2s width cubic-bezier(.25,.46,.45,.94) .5s
}
.hero-text ul li a::after,.hero-text ul li::after{
    content:"";
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
    background:#bc0f0f
}
.backlines.animated:first-child{
    width:16.7rem;
    margin-bottom:-1.2rem;
    padding-right:1.3rem
}
.backlines.animated:nth-child(2){
    width:44.5rem
}

.text-right {
    text-align: right;
}

.hero-text{
    width: 100%;
    left: 0;
    top:50%;
    transform:translate(0,-48%);
    word-wrap:normal;
    padding-bottom: 15px;
}
.hero-text h1{
    color:#fff;
    font-weight:700;
    font-size:7.3rem;
    letter-spacing: 2px;
    margin-top: 17vh;
    margin-bottom: 7vh;
    text-align: center;
}

.hero-cta {
    padding: 0 140px;
}
.hero-text ul{
    padding-left:0
}
.hero-text ul li{
    color:#fefefe;
    list-style-type:none;
    overflow:hidden;
    padding:.2rem 0;
    opacity:0
}
.hero-text ul li::after{
    width:4px;
    height:.4rem;
    margin-top:1.1rem;
    float:right;
    opacity:0
}
.hero-text ul li::before{
    margin-left:100%
}
.hero-text ul li.animated:nth-child(1){
    animation-delay:2.2s
}
.hero-text ul li.animated:nth-child(1)::after{
    opacity:1;
    transition:.5s opacity
}
.hero-text ul li.animated:nth-child(1) a::after{
    width:100%;
    transition:2.5s width
}
.hero-text ul li.animated:nth-child(2){
    animation-delay:2.7s
}
.hero-text ul li.animated:nth-child(2)::after{
    opacity:1;
    transition:.5s opacity
}
.hero-text ul li.animated:nth-child(2) a::after{
    width:100%;
    transition:2.5s width
}
.hero-text ul li.animated:nth-child(3){
    animation-delay:3.2s
}
.hero-text ul li.animated:nth-child(3)::after{
    opacity:1;
    transition:.5s opacity
}
.hero-text ul li.animated:nth-child(3) a::after{
    width:100%;
    transition:2.5s width
}
.hero-text ul li a{
    font-size:1.6rem
}
.hero-text ul li a::after{
    width:0;
    height:.1rem;
    margin-left:1.2rem;
    margin-right:-100%
}
.hero-text ul li a::before{
    margin-left:-100%
}

.hero-text button {
    padding: 20px;
    font-size: 18px;
    margin-top: 1rem;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow:  0 2px 10px rgba(239, 16, 16, 0.4);
    -moz-box-shadow:  0 2px 10px rgba(239, 16, 16, 0.4);
    box-shadow:  0 2px 10px rgba(239, 16, 16, 0.4);
}

.hero-text button:hover {
    transform: none;
    background: #ef1010;
    -webkit-box-shadow:  0 3px 15px rgba(239, 16, 16, 0.65);
    -moz-box-shadow:  0 3px 15px rgba(239, 16, 16, 0.65);
    box-shadow:  0 3px 15px rgba(239, 16, 16, 0.65);
}

.social{
    top:90%
}
.social ul{
    display:flex;
    padding-left:0
}
.social ul li{
    margin:.5rem
}
.social ul li:after{
    content:"/";
    color:#fff;
    margin-left:1rem;
    font-size:1.1rem
}
.social ul li:last-child:after{
    content:none
}
.social ul li:hover a{
    transform:translateY(-.6rem);
    transition:all .15s ease-in-out;
    height:3rem
}
.social ul li a{
    text-decoration:none;
    color:#fefefe;
    font-weight:500;
    font-size:1.1rem;
    display:inline-block;
    transition:all .15s ease-out
}
.mousey{
    width:.3rem;
    padding:.9rem 1rem;
    height:1.8rem;
    border:.1rem solid #fefefe;
    border-radius:2.5rem;
    opacity:1;
    box-sizing:content-box;
    top:91%;
    left:50%
}
.scroller{
    width:.2rem;
    height:1rem;
    border-radius:25%;
    background-color:#fff;
    animation-name:scroll;
    animation-duration:2.2s;
    animation-timing-function:cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count:infinite
}
.nav .stiky-logo{
    display:none
}
.nav .hero-logo{
    display:inherit
}
.nav.stiky{
    position:fixed;
    height:6.5rem;
    top:4rem;
    right:0;
    left:0;
    z-index:10;
    transform:translateY(-40px);
    animation-duration:.3s;
    animation-fill-mode:both;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
    border-bottom:1px solid rgba(102,102,102,.2);
    background-color:#020202
}
.nav.stiky .nav-elements{
    width:100rem;
    margin:.2rem auto auto
}
.nav.stiky .nav-elements .branding{
    padding:1rem 0
}
.nav.stiky .nav-elements .branding img{
    height:3rem;
    margin-top:.6rem
}
.nav.stiky .nav-elements .branding .hero-logo{
    display:none
}
.nav.stiky .nav-elements .branding .stiky-logo{
    display:inherit
}
#complex{
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.timeline{
    position:relative;
    max-width:1200px;
    margin:4rem auto
}
.timeline *{
    box-sizing:border-box
}
.timeline::after{
    content:"";
    position:absolute;
    width:.1rem;
    background-color:#9d9d9c;
    top:0;
    bottom:100%;
    left:50%;
    margin-left:-3px;
    z-index:-100
}
.timeline--container{
    padding:10px 40px;
    position:relative;
    background-color:inherit;
    width:50%;
    opacity:0
}
.timeline--container::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    left:181%;
    background-color:#fff;
    border:.3rem solid #bc0f0f;
    top:69px;
    border-radius:50%;
    z-index:1;
    opacity:0
}
.timeline--container .content{
    height:20rem
}
.timeline--container h3{
    text-align:left;
    line-height:3.2rem;
    border-bottom:.1rem solid #bc0f0f
}
.timeline--container .img-wrapper{
    padding:2.7rem;
    border:.4rem solid #bc0f0f;
    border-radius:5rem;
    height:9rem;
    width:9rem;
    position:relative;
    background-color:#FFF
}
.timeline--container .img-wrapper img{
    height:5.6rem
}
.timeline--container:last-child{
    margin:0 0 1rem
}
.timeline--container:nth-child(1) img{
    position:relative;
    right:1rem;
    bottom:1.4rem
}
.timeline--container:nth-child(2) img{
    position:relative;
    right:1.4rem;
    bottom:1.7rem
}
.timeline--container:nth-child(3) img{
    position:relative;
    right:.9rem;
    bottom:2.2rem;
    height:6.9rem
}
.timeline--container:nth-child(4) img{
    position:relative;
    bottom:2rem;
    height:6.9rem
}
.timeline--text{
    width:auto;
    position:relative;
    top:-.7rem
}
.timeline--container:nth-child(odd){
    transform:translateX(-30%);
    right:42%
}
.timeline--container:nth-child(odd)::after{
    width:7px
}
.timeline--container:nth-child(odd) .timeline--text{
    float:left
}
.timeline--container:nth-child(odd) .timeline--text h3,.timeline--container:nth-child(odd) .timeline--text p{
    width:30rem
}
.timeline--container:nth-child(odd) .timeline--text h3::after{
    content:"";
    display:inline-block;
    position:absolute;
    top:5.1rem;
    box-sizing:border-box;
    width:0;
    height:.1rem;
    background:#9d9d9c;
    left:38.2rem;
    z-index:-1;
    margin-right:-100%
}
.timeline--container:nth-child(odd) .content{
    width:45rem
}
.timeline--container:nth-child(odd) .img-wrapper{
    float:right;
    left:-.4rem
}
.timeline--container:nth-child(odd) .img-wrapper::after{
    content:" ";
    height:0;
    position:absolute;
    top:3.1rem;
    width:0;
    z-index:1;
    left:8.5rem;
    border:solid #bc0f0f;
    border-width:10px 0 10px 10px;
    border-color:transparent transparent transparent #bc0f0f
}
.timeline--container:nth-child(even){
    left:50%;
    transform:translateX(30%)
}
.timeline--container:nth-child(even) .timeline--text{
    float:right
}
.bot p,.bot_png{
    float:left
}
.timeline--container:nth-child(even) .timeline--text h3,.timeline--container:nth-child(even) .timeline--text p{
    padding:0 1.3rem;
    width:32.5rem
}
.timeline--container:nth-child(even) .timeline--text h3::before{
    content:"";
    display:inline-block;
    position:absolute;
    top:5.1rem;
    box-sizing:border-box;
    width:0;
    height:.1rem;
    background:#9d9d9c;
    z-index:-1;
    right:40rem
}
.timeline--container:nth-child(even) .content{
    width:47.8rem
}
.timeline--container:nth-child(even) .img-wrapper{
    float:left;
    left:.3rem
}
.timeline--container:nth-child(even) .img-wrapper::before{
    content:" ";
    height:0;
    position:absolute;
    top:3.1rem;
    width:0;
    z-index:1;
    left:-12px;
    border:solid #fff;
    border-width:10px 10px 10px 0;
    border-color:transparent #bc0f0f transparent transparent
}
#map,.content,.footer-contactus,.footer-social,.logo-img .a{
    position:relative
}
.contact_us {
    width: 18%;
}
.row:first-child .cell:first-child,.row:last-child .cell:first-child{
    border-right:.1rem solid #bc0f0f
}
.row:first-child .cell:last-child,.row:last-child .cell:last-child{
    border-left:.1rem solid #bc0f0f
}
.timeline--container:nth-child(even) .img-wrapper::after{
    left:-1.4%
}
.timeline--container:nth-child(even)::after{
    left:-.8rem
}
.content{
    padding:20px 30px
}
.timeline--container-animated:nth-child(1){
    transform:translateX(0);
    opacity:1;
    transition:1s all ease
}
.timeline--container-animated:nth-child(1)::after{
    opacity:1;
    transition:.5s all ease 2s
}
.timeline--container-animated:nth-child(2){
    transform:translateX(0);
    opacity:1;
    transition:1s all ease .5s
}
.timeline--container-animated:nth-child(2)::after{
    opacity:1;
    transition:.5s all ease 2.3s
}
.timeline--container-animated:nth-child(3){
    transform:translateX(0);
    opacity:1;
    transition:1s all ease 1s
}
.timeline--container-animated:nth-child(3)::after{
    opacity:1;
    transition:.5s all ease 2.6s
}
.timeline--container-animated:nth-child(4){
    transform:translateX(0);
    opacity:1;
    transition:1s all ease 1.5s
}
.timeline--container-animated:nth-child(4)::after{
    opacity:1;
    transition:.5s all ease 2.8s
}
.timeline--container-animated:nth-child(odd) .timeline--text h3::after{
    width:20%;
    transition:1s all ease 1s
}
.timeline--container-animated:nth-child(even) .timeline--text h3::before{
    width:26%;
    transition:1s all ease 2s
}
.timeline-animated::after{
    transition:3s all ease;
    bottom:0
}
.about__in-numbers{
    height:auto;
    background: #040404 url(img/partner-bg.jpg) no-repeat bottom center;
    -webkit-background-size: contain;
    background-size: contain;
    padding:2rem 0;
    color:#fefefe;
    position: relative;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    transition:1s all ease .5s;
}

.about__in-numbers.animated {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);

}

.about__in-numbers  .counter-section {
    opacity: 0;
    transition:1s all ease .5s;
    text-align: center;
}

.about__in-numbers  .counter-section.animated {
    opacity: 1;
}

.about__in-numbers .row{
    display:flex;
    flex-direction:row;
    width:auto
}
.about__in-numbers .cell{
    width:33%;
    padding:0 5rem
}
.about__in-numbers p{
    color:#cbcbcb!important;
    text-align:center
}
.about__in-numbers h3{
    font-size:5.8rem;
    margin:3.5rem 0
}
.row:first-child .cell{
    border-bottom:.1rem solid #bc0f0f
}
.row:last-child{
    margin-bottom:3rem
}
#footer{
    max-height:90vh
}
.communications{
    background-color:#f2f2f2;
    padding:.3rem 0;
}
@media screen and (min-width:1920px){
    .communications{
        height:20vh
    }
}
.communications h2{
    margin-bottom:.8rem
}
.com_buttons{
    display:flex;
    justify-content:space-around;
    width:100%;
    max-width:1000px;
    margin:20px auto 0;
    height:12.2rem
}
.bot,.top{
    width:100%;
    max-width:960px
}
.com_buttons .com_button:hover span{
    transform:translateY(-.3rem);
    transition:.25s transform ease
}
.com_buttons .com_button.active h3,.com_buttons .com_button:hover h3{
    border-bottom:.1rem solid #bc0f0f;
    padding-bottom:.2rem;
    width:100%;
    transition:all .15s ease-out
}
.com_buttons .com_button h3{
    display:block;
    position:relative
}
.com_buttons .com_button span{
    text-align:center;
    display:block;
    transition:.15s transform ease
}
.com_buttons .com_button.active,.com_buttons .com_button:hover{
    cursor:pointer
}
.com_buttons .com_button.active{
    color:#bc0f0f
}
.um-ico_map_russia{
    font-size:5rem
}
.um-ico_map_china,.um-ico_map_bishkek, .icon-bishkek, .um-ico_map_samara{
    font-size:5rem
}
.um-ico_map_samara{
    size: 50px, 50px;
}
#map{
    height:70vh;
    width:100%
}
#map_kg {
    margin-left: 20px;
}
footer{
    height:30vh;
    min-height:34.3rem;
    background:url(img/background.jpg);
    padding-top:2rem;
    color:#fefefe
}
footer .container{
    height:auto;
    padding-top:2rem;
    padding-bottom:3rem
}
footer .adress-block{
    display:inline-block;
    margin-right:2rem
}
footer .adress-block h3{
    text-decoration:underline;
    font-size:2rem;
    font-weight:500
}
footer .adress-block p{
    font-size:1.4rem;
    font-weight:300
}
footer h2{
    font-weight:900;
    font-size:1.8rem
}
.top{
    display:flex;
    justify-content:space-between;
    margin:0 auto
}
.top_cont,.top_h{
    margin-bottom:1.5rem
}
.top_h{
    text-align:left
}
.top p{
    margin:0;
    font-weight:400;
    line-height:2.2rem
}
.top_h_span{
    border-bottom:2px solid #bc0f0f
}
.bot{
    border-top:1px solid #242424;
    margin:0 auto;
    padding:15px 0
}
.bot p{
    margin:0 0 0 20px;
    color:#575757;
    font-size:13px
}
.links h3{
    text-align:right;
    font-size:1.4rem;
    font-weight:300;
    font-family:Roboto,sans
}
.footer-social{
    text-align:right
}
.footer-social a,.footer-social a:hover{
    color:#fefefe;
    text-decoration:none
}
.footer-social a span,.footer-social a:hover span{
    font-size:2.4rem;
    margin:0 .3rem;
    opacity:.4;
    transition:all .15s ease-out
}
.footer-social a span:hover,.footer-social a:hover span:hover{
    opacity:.8;
    transition:all .3s ease-out
}
.footer-contactus{
    top:37%
}
.feedback{
    opacity:.25
}
.feedback:hover{
    opacity:.6
}

#services .btn {
    border: none;
    padding: 15px 35px;
    background: #bc0f0f;
    color: #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.modal * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.modal .modal-content {
    background: #333;
    color: #fff;
}

.modal .button_ghost {
    width: 100%;
}

#catalog-form .form-group {
    margin-bottom: 10px;
}

#catalog-modal input[name=message],
#contact-form input[name=message] {
    display: none;
}

#catalog-form .form-control {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid #ccc;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #222;
}

.result-success {
    display: none;
    text-align: center;
}

.result-success a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted #fff;
}

.modal-header .close {
    float: right;
    cursor: pointer;
    display: block;
}

.modal-header .close img {
    max-width: 20px;
}
@media screen and (min-width:1200px){
    .hero-text li.animated:nth-child(1){
        animation-delay:2.2s
    }
    .hero-text li.animated:nth-child(1)::after{
        transition-delay:3.1s!important
    }
    .hero-text li.animated:nth-child(1) a::after{
        transition-delay:2.2s!important
    }
    .hero-text li.animated:nth-child(2){
        animation-delay:2.7s
    }
    .hero-text li.animated:nth-child(2)::after{
        transition-delay:3.5s!important
    }
    .hero-text li.animated:nth-child(2) a::after{
        transition-delay:2.7s!important
    }
    .hero-text li.animated:nth-child(3){
        animation-delay:3.2s
    }
    .hero-text li.animated:nth-child(3)::after{
        transition-delay:3.9s!important
    }
    .hero-text li.animated:nth-child(3) a::after{
        transition-delay:3.2s!important
    }
}
@media only screen and (min-width:40.063em) and (max-width:64em){
    #services .container{
        padding-bottom:1rem
    }
    .tiles .tile{
        height:40rem
    }
}
@media only screen and (max-width:768px){
    #advantages,#services{
        background:#FFF!important
    }
    h2{
        font-size:3rem
    }
    h3{
        font-size:1.8rem
    }
    .container{
        max-width:60rem;
        padding:1.6rem 1.5rem 0
    }
    .nav-elements{
        margin:auto
    }
    .branding{
        flex:100%!important
    }
    .branding img{
        display:block;
        margin:auto;
        max-height: 100px;
    }

    .backlines.animated:first-child {
        width: 16.7rem;
        margin-bottom: -0.8rem;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar{
        display:none!important
    }
    .mousey,.nav.stiky{
        display:none
    }
    .header .social{
        left:10vh;
        right:10vh
    }
    #hero-text{
        width: 100%;
    }

    .hero-text h1 {
        font-size: 2.7rem;
    }

    .hero-cta {
        padding: 0 15px;
    }

    #hero-text h1 .backlines{
        width:0;
        height:auto
    }
    #hero-text h1 .backlines.animated,#hero-text h1 .backlines.animated span{
        width:auto
    }
    #hero-text h1 span{
        width:0;
        font-size:3rem
    }
    #about .about__text .text-blocks .text-block,#advantages .adv-item{
        width:auto
    }
    #hero-text li::after{
        margin-top:.9rem
    }
    #hero-text li.animated:nth-child(1){
        animation-delay:.5s!important
    }
    #hero-text li.animated:nth-child(1)::after{
        transition-delay:1.4s!important
    }
    #hero-text li.animated:nth-child(1) a::after{
        transition-delay:.5s!important
    }
    #hero-text li.animated:nth-child(2){
        animation-delay:1s!important
    }
    #hero-text li.animated:nth-child(2)::after{
        transition-delay:1.8s!important
    }
    #hero-text li.animated:nth-child(2) a::after{
        transition-delay:1s!important
    }
    #hero-text li.animated:nth-child(3){
        animation-delay:1.5s!important
    }
    #hero-text li.animated:nth-child(3)::after{
        transition-delay:2.2s!important
    }
    #hero-text li.animated:nth-child(3) a::after{
        transition-delay:1.5s!important
    }
    #services .tiles{
        flex-direction:column
    }
    #services .tile{
        flex:100%;
        padding:2rem 1.5rem;
        opacity:1;
        margin:1rem 0;
        border-top:.7rem solid #bc0f0f
    }
    #services .tile:first-child{
        margin:0;
        border-top:none
    }
    #services .tile:hover{
        height:auto;
        box-shadow:none
    }
    #services .tile a.tile__button{
        display:block
    }
    #services h3{
        margin:0 1rem
    }
    #services p{
        height:auto
    }
    #services .after-text{
        padding:0 1.5rem
    }
    #about .about__text .text-blocks{
        flex-direction:column!important
    }
    #about .about__text .text-blocks .text-block p{
        font-size:1.6rem;
        font-weight:400
    }
    #about .about__in-numbers{
        display:none
    }
    #advantages .items{
        width:auto;
        flex-flow:column wrap
    }
    #advantages .adv-item h3{
        font-size:1.8rem
    }
    #complex{
        display:none!important
    }
    #clients{
        height:auto;
        max-height:none
    }
    #clients .companies .row .a,#clients .companies .row .b,#clients .companies .row .logo,#clients .companies .row .logo-img{
        height:8rem;
        width:8rem;
        padding:0
    }
    .communications,.map{
        display:none
    }
    footer{
        max-height:auto;
        height:auto
    }
    .top{
        flex-direction:column;
        margin:0 2rem;
        width:inherit
    }
    .links .footer-social,.links h3{
        text-align:center
    }
    .links a span,.links a:active span,.links a:hover span{
        font-size:4rem
    }
    .footer-contactus{
        top:inherit;
        width:auto;
        padding:1.2rem
    }
    .footer-contactus button{
        display:block;
        margin:auto;
        opacity:.7
    }
    .popup-box input,.popup-box textarea{
        width:80%!important
    }
    .contact_us {
        width: 100%;
    }

    #about .metric-line {
        -webkit-background-size: contain;
        background-size: contain;
        margin-left: 0;
        height: 0;
        width: 0;
        padding: 0;
    }

    #about .metric-line.animated {
        font-size: 16px;
        height: 28px;
        padding: 5px 0 5px 25px;
    }

    #about  .about-metrics {
        width: 100%;
        float: none;
    }

    #about .metric-digit {
        font-size: 14px;
        width: 32px;
        height: 32px;
    }


    #about .about-text {
        width: 100%;
        margin-top: 3rem;
        padding: 0;
        float: none;
    }

    #about .about-text .about-col {
        width: 100%;
        float: none;
    }

    #about .about-col {
        height: unset;
        padding-bottom: 0;
    }

    .about-metrics {
        margin-left: -1.5em;
        padding-top: 0.5em;
    }

    #about .about-metrics .metric-block {
        margin-bottom: 15px;
    }

}

@media (min-width: 992px) {
    .top_cont {
        width: 20%;
    }
}
.logo-img,.logo-img .a,.logo-img .b{
    display:block;
    height:16rem;
    width:16rem
}
@font-face{
    font-family:unclemao;
    src:url(fonts/unclemao/unclemao.eot?jhslsy);
    src:url(fonts/unclemao/unclemao.eot?jhslsy#iefix) format("embedded-opentype"),url(fonts/unclemao/unclemao.ttf?jhslsy) format("truetype"),url(fonts/unclemao/unclemao.woff?jhslsy) format("woff"),url(fonts/unclemao/unclemao.svg?jhslsy#unclemao) format("svg");
    font-weight:400;
    font-style:normal
}
[class*=" um-"],[class^=um-]{
    font-family:unclemao!important;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.um-fb:before{
    content:""
}
.um-instagram:before{
    content:""
}
.um-mail:before{
    content:""
}
.um-tg:before{
    content:""
}
.um-vk:before{
    content:""
}
.um-youtube:before{
    content:""
}





.logo-img .a,.logo-img .b{
    transition:all .3s ease-out
}
.logo-img .a{
    bottom:100%
}
.logo-img .b{
    z-index:2
}
.invisible{
    opacity:0!important
}
.popup-box{
    position:absolute;
    border-radius:.5rem;
    background:#0f0f0f;
    color:#fefefe;
    display:none;
    box-shadow:1px 1px .5rem rgba(0,0,0,.2);
    z-index:9999999;
    max-width:60rem
}
.popup-box input,.popup-box textarea{
    display:block;
    height:3.8rem;
    border-radius:2.5rem;
    color:#020202;
    margin:1rem
}
.popup-box input::placeholder,.popup-box textarea::placeholder{
    text-align:center
}
.popup-box input{
    padding:.5rem 2rem;
    text-align:center
}
.popup-box.feedback-window [name=name]{
    width:88%
}
.popup-box.feedback-window [name=email],.popup-box.feedback-window [name=tel]{
    width:37%;
    display:inline
}
.popup-box.feedback-window textarea{
    height:12rem;
    padding:1.5rem 2rem;
    width:88%;
    resize:none
}
.popup-box.feedback-window .submit{
    margin:2rem auto auto;
    display:block
}
.popup-box.consult-window h2{
    width:30rem
}
.popup-box.consult-window input,.popup-box.consult-window textarea{
    width:25rem;
    padding:.5rem 2rem;
    resize:none;
    margin:2rem
}
.popup-box.consult-window .submit{
    margin:4rem auto 1rem;
    display:block
}
.popup-box .close{
    position:absolute;
    top:0;
    right:0;
    cursor:pointer;
    padding:2.5rem
}
.popup-box .close img{
    width:2rem;
    opacity:.2;
    transition:.15s opacity ease-out
}
.popup-box .close:hover img{
    opacity:.7
}
.popup-box h2{
    padding:0;
    margin:0 auto;
    font-size:2.5rem
}
.popup-box .top{
    padding:2rem 0 0;
    margin:auto
}
.popup-box .bottom{
    background:#0f0f0f;
    padding:20px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px
}
#blackout{
    background:rgba(0,0,0,.6);
    position:absolute;
    top:0;
    z-index:99999;
    left:0;
    display:none
}
footer a {
    color: #fff;
}
footer a:hover {
    color: #bc0f0f;
    text-decoration: none;
}


/* убирает горизонтальный скролл в FireFox */
.gm-style .gm-style-iw-d {
    overflow-x: hidden;
}