@font-face {
    font-family: 'Roboto';
    src:  local('Roboto'), url('assets/fonts/Roboto/Roboto-Regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('assets/fonts/Roboto/Roboto-Bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Thin';
    src: local('Roboto Thin'), url('assets/fonts/Roboto/Roboto-Thin-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Light';
    src: local('Roboto Light'), url('assets/fonts/Roboto/Roboto-Light-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Medium';
    src: local('Roboto Medium'), url('assets/fonts/Roboto/Roboto-Medium-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


html, body {background-color: #414141;font-family: "Roboto Light",Arial; 
            font-size: 13.5pt; color: #fff;padding: 0;margin: 0;height: 100%;  min-height: 740px; }
a {color: #fff;text-decoration: none;}
a:hover {text-decoration: none;}
.text22 {font-size: 22.5pt;}
header,main,footer,article,section {display: block;}

img {border: none;}
ul,li,p {margin: 0;padding: 0;}
form,input,button {margin: 0;padding: 0;}

/*Всплывающее окно*/
.popups-bg {width: 100%;height: 100%;position: absolute;opacity: 1; display: none;transition: all 1s ease; }
.popups-bg_on {opacity: 1; display: block; z-index: 5000;background-color: rgba(0,0,0,.8);}


.b-popup {display: none;position: absolute; top:50%; left:50%;z-index: 7500;
          width: 50%; height: 50%; margin-left: -25%; margin-top: -25%; background-color: #fff;
          border: 1px solid white; border-radius: 2px;
}
/*.b-popup_ordercall {width: 480px;height: 370px; margin-top: -240px; margin-left: -185px;}*/
.b-popup_ordercall {width: 480px;height: auto; margin-top: -240px; margin-left: -185px;}
.b-popup_calculate
{
    width: 480px;height: auto; margin-top: 0px; margin-left: -185px;
    top:10px;
}
.b-popup__close {position: absolute;top:10px;right: 10px; z-index: 8000; transform: rotateZ(45deg); cursor: pointer; color: #000;
                 font-size: 20pt; cursor: pointer;padding: 10px; float: left; transition-duration: .5s;}
.b-popup__close:hover { color:red; transform:  rotateZ(45deg) scale(1.3,1.3);}
.b-popup__header {}
.b-popup__body { padding: 20px 20px; padding-bottom: 5px;}
.b-popup__footer {}


.b-popup .left-btn
{
    position: absolute;
    background: #fff;
    padding: 12px 18px;
    border-radius: 20px;
    transform: rotate(-90deg);
    top: 115px;
    left: -32%;
    color: #000;
    z-index: 99;
    cursor: pointer;
    font-family: 'Roboto';
}

.b-popup .left-btn.order-call-left
{
    left: -36%;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

#additional-info-label
{
    font-size: 9pt;
    width: 100%;
    margin-top: 16px;
}
.toggle-field
{
    vertical-align: middle;
}

/*Блок Форма*/

.errors-form-block
{
    display: none;
    padding: 8px;
    margin: 5px;
    font-size: 10pt;
}

.errors-form-block.succes
{
    border: 1px solid green;
    color: green;
    display: block;
}
.errors-form-block.error
{
    border: 1px solid red;
    color: red;
    display: block;
}

.btn-cost
{
    background: rgba( 28, 180, 255, 0.5 );
    color: #fff;
    text-transform: uppercase;
    font-size: 10.5pt;
    padding: 11px 22px;
    border: 1px solid #fff;
    border-radius: 30px;
    outline: none;
    margin-top: 54px;
    display: inline-block;
    cursor: pointer;
}

.btn-cost:hover
{
    background: #1fc6ff;
}

.b-form { color: #000; position: relative; background-color: #fff;
          padding: 21px 20px 0px 20px;
}
.b-form:after {display: block;content: ""; clear: both;}
.b-form__caption {/*text-transform: uppercase;*/ margin-bottom: 25px;/*font-family: "IntroCondensedLight";*/
                font-family: 'Roboto Thin';  
                  font-size: 13.5pt;line-height: 13.5pt; color: rgb(34,175,231); text-align: center; 
}
.b-form__row { margin-bottom: 27px; }
.b-form__row_centered { position: absolute;left: 50%; margin-left: -84px; width: 168px;}

.b-form-element { position: relative;text-align: center;}
.b-form-element__title { display: inline-block; width: 60%; position: relative; top:0px;left:0px;
                        text-transform: uppercase;
                        color: #888888;
                         text-align: center; font-family: "Roboto";
                         font-size: 9.5pt;line-height: 13.5pt;
}

.b-form__row   .required
{
    font-size: 15pt;
    color: #ff3333;
    vertical-align: bottom;
}

.b-form__row.required-text
{
    margin-top: 83px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 9pt;
    text-transform: uppercase;
}


.b-form-element__field { display: inline-block;/* width: 50%; height: 24px;*/ padding: 0px 10px; 
                         /*border: none;  border-radius: 20px;
                         box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.18),0px 0px 2px 0px rgba(0,0,0,0.18);
                         */
                         border: 1px solid #008dd3;
                         border-radius: 3px;
                         margin-top: 10px;
                         outline: 0px;
                          width: 80%;
                        height: 33px;
}

.b-form-element__field_code { width: 43px; margin-left: 0px;
                              position: absolute;top:0px; left:185px}
.b-form-element__field_phone { width: 150px;  margin-left: 261px;}
.b-form-element__field:hover {background-color: whitesmoke;}
.b-form-element__field_textarea {height: 101px;
 border: 1px solid #008dd3;
                         border-radius: 3px;
                         margin-top: 10px;
                         outline: 0px;
                          width: 86%;
                          max-width: 100%;
}

.b-form__row.offset-top
{
    text-align: left;
    margin-top: -16px;
}
.b-form__row.offset-top .b-form-element
{
    text-align: left;
    padding-left: 25px;
}
.b-form__row.offset-top .b-form-element__title{
    text-align: left;    
}

.b-form-element__phone-prefix { 
    position: absolute;top:3px; left:153px;font-family: "Open Sans";
    font-size: 13.5pt;line-height: 13.5pt;}
.b-form__row.required-text
{
    margin-bottom: 5px;
}



body > header {height: 129px;position: relative;display: block;margin: 0px 50px;}
body > main {position: relative;margin: 0px 0px 0px 50px;min-height: 473px;}
body > footer {height: 50px;position: absolute; bottom: 20px;margin: 0px 50px;}

.logo {width: 169px; height: 40px; background-image: url(i/logo.png);display: block;}
.logo-eng {width: 169px; height: 40px; background-image: url(i/logo-eng.png);display: block;}
.logo_main {position: absolute;top:44px;left: 0px;}
.phones {position: absolute;top:44px;left: 274px;}
.projects-toggle { position: absolute;top:53px; right: 3px;}
.call-order {position: absolute;top:44px;left: 560px;float: left;}

section.left-col {width: 270px;position: absolute;top:0px; left: 0px;}
section.main-col {margin-left: 270px;border-top: 1px solid #7a7a7a;}
.lang-picker_left {margin-bottom: 43px;}
.socnets_footer {position: absolute; top:19px;left:274px;}

.labeled-toggle {
    width: 23px; height: 23px; background-image: url(i/button_projects.png); background-repeat: no-repeat; 
    background-position: 100% 100%;display: block;overflow: hidden;position: relative;
}
.labeled-toggle:hover{width: 200px;}
.labeled-toggle:after {
    content: "НАШИ ПРОЕКТЫ";
    font-size: 13.5pt;
    display: block;
    position: absolute;
    top:-1px;
    width: 190px;
    right:-190px;
    z-index: -1;
    transition:all 0.5s ease;
}
.labeled-toggle:hover:after{ right: 0px; z-index: 10;}


.labeled-toggle-eng {
    width: 23px; height: 23px; background-image: url(i/button_projects.png); background-repeat: no-repeat; 
    background-position: 100% 100%;display: block;overflow: hidden;position: relative;
}
.labeled-toggle-eng:hover{width: 200px;}
.labeled-toggle-eng:after {
    content: "PORTFOLIO";
    font-size: 13.5pt;
    display: block;
    position: absolute;
    top:-1px;
    width: 190px;
    right:-190px;
    z-index: -1;
    transition:all 0.5s ease;
}
.labeled-toggle-eng:hover:after{ right: 0px; z-index: 10;}

.pregress-bar-loaded-video
{
    position: absolute;
    z-index: 10;
    left: 0px;
    bottom: 0px;
    height: 10px;
    width: 100%;    
}
.pregress-bar-loaded-video .scale
{
    width: 0%;
    background: red;
    height: 100%;
}
.poster-video
{
    position: absolute;    
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
}

.button {
    text-transform: uppercase;
    width: 168px; height: 38px;
    border: 1px solid #7a7a7a; 
    border-radius: 38px;
    text-align: center;
    /*background: #fff;*/
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;font-size: 9.75pt; overflow: hidden;z-index:100 ;
    position: relative;
    transition:all 0.02s step-end;
}
.button:after{
    content: "";
    width: 168px; height: 38px; border: 1px solid #7a7a7a; border-radius: 38px;text-align: center;display: table-cell;vertical-align: middle;font-size: 9.75pt;;
    background-color: white;
    transition:all 0.1s ease;
    position: absolute;
    bottom:-40px;
    z-index: -1;
}
.button:hover {color: #000;}
.button:hover:after {bottom:-1px;}

.button_blue {
    color: #1cb4ff;
    border: 1px solid #1cb4ff; 
}
.button_blue:hover {color: #fff;}
.button_blue:after{
    color: #fff;
    background-color: rgba(34,175,231,0.8);
}

.lang-picker {width: 88px;height: 36px;}
.lang-picker__lang {width: 34px;height: 34px; 
                    color: #ccc; border-color:  #7a7a7a;
                    border-radius: 34px;text-align: center;display: table-cell;vertical-align: middle; font-size: 9pt;transition:all 0.4s ease;}
.lang-picker__lang_white {color: #fff; border-color: #fff;}
.lang-picker__lang_ru {}
.lang-picker__lang_en {position: relative; left: 16px;}
.lang-picker__lang:hover {border-color: #fff;background-color: #FFF;color: #000;}
.lang-picker__lang_act {border: 1px solid; cursor: default;}

nav.main a {display: block; text-transform: uppercase; margin-bottom: 16px;font-family: "Roboto";}
nav.main a:hover {text-decoration: underline;}

.socnets {width: 217px; height: 36px; position: relative;}
.socnets__title {font-size: 12pt; color: #fff; padding-top: 7px; }
.socnets__link {width: 34px; height: 27px; border: 1px solid #7a7a7a; border-radius: 35px; font-size: 12pt; font-weight: bold;text-align: center;padding-top: 6px;transition:all 0.1s ease;}
.socnets__link:hover {background-color: #2c4b88;border-color: #2c4b88;color: #fff;}
.socnets__link_fb {position: absolute;left:135px; top:0px;}
.socnets__link_vk {position: absolute;left:181px; top:0px;}

.slider {position: relative;}
.slider__list {width: 835px;}
.slider__paginator {position: absolute;right: 59px; top: 88px;}

.slide {width: 835px; height: 430px;position: relative; outline: 0px solid wheat; }
.slide_current {display: block;}

.slide__header {                  }
.slide__header_slide1 {padding-top:37px; width: 95%;}
.slide__header_slide2 {padding-top:61px;width: 640px; position: relative; left:2px;}
.slide__header_slide3 {padding-top:61px;width: 640px;}

.slide__footer { }
.slide__footer_slide2 { padding-top: 29px; position: relative; left:3px;}
.slide__footer_slide3 { padding-top: 29px; }
.slide__footer_slide5 { padding-top: 10px; }

.paginator {width: 10px;}
.paginator__page {display: block;border: 1px solid #969696; width: 8px; height: 8px; border-radius: 8px; margin-bottom: 20px;cursor: pointer; transition-duration: .3s;}
.paginator__page:hover {background-color: #FFF;border-color: #fff; transform: scale(3,3);}
.paginator__page_act {background-color: #FFF;border-color: #fff;}
.slick-active .paginator__page {background-color: #FFF;border-color: #fff;  transform: scale(3,3);}
.paginator li {list-style: none;}

.project-stage {float: left;width: 122px; height: 162px; margin-right: 48px;position: relative;}
.project-stage__image {}
.project-stage__image img {border-radius: 120px;border: 1px solid #969696;width: 119px; height: 119px;}
.project-stage__title {position: absolute;top:138px;text-align: center;font-size: 13.5pt;width: 160px; margin-left: -20px;}


.header {font-size: 45pt; line-height: 55pt;
         font-family: 'Roboto Thin';
         letter-spacing: -1px;
}
.header_slide2 {font-size: 27pt; line-height: 33pt;letter-spacing: 1px;}

.b-solution-list {width: 772px; height: 185px;}
.b-solution-list:after { content: "";display: block;clear: both;}
.solution { width: 386px; height: 112px;
            position: relative;float: left;
}
.solution:nth-child(even) {float: right;}

.solution__image {position: absolute; top:0px;left: -2px;}
.solution__text {position: absolute; top:4px;left: 80px;
                 width: 272px;height: 100%;
                 font-family: "Roboto Thin"; color: #66ccff;
                 font-size: 18pt; line-height: 22pt;}

.b-solution-list_stats {padding-top: 40px;}
.solution_stats {margin-bottom: 80px;}
.solution__text_stats {font-size: 27pt;line-height: 30pt; position: relative; top:-10px;}




.bigvideo   {opacity: 0.5;position: absolute;width: 100%; height: 100%;overflow: hidden; outline: 5px solid blue;}
.bigvideo video {z-index: -100;position: absolute;top:0px;left:0px;opacity: 0; transition:opacity 1s ease;}
.bigvideo video.Current {z-index: 1;}
.bigvideo video.Visible {opacity: 1;}

.bigmap   {opacity: 0.5;position: absolute;width: 100%; height: 100%;overflow: hidden; outline: 5px solid blue;}
.bigmap map {z-index: 5;}

div.proj-wrap {
    position: absolute;top:0;left:0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;                z-index: 0;
    transition: all 0.5s ease;
}

div.proj-col {position: absolute;top:0px;right: 0px; width:487px; height: 100%;
              overflow: hidden;
              background-color: brown;
}
div.proj-col__header { background-color: #0088cc; width: 100%; height: 130px;}
div.proj-col__caption {position: absolute;top:53px;left: 48px;
                       color: #fff; font-family: "Roboto";  text-transform: uppercase;  letter-spacing: 1px;
                       font-size: 13.5pt; 
}
div.proj-col__close {position: absolute;top:54px;right: 54px;cursor: pointer;line-height: 0;}
div.proj-col__close:hover {
    /*transform: rotate(360deg); transition-duration: 1s; transition-timing-function: cubic-bezier(.2,-1.15,.73,1.81);*/
}
div.proj-col__list {width: 105%; height: 100%;overflow: auto;position: absolute;top:130px;
                    background-color: black;
}

div.proj-preview {width: 100%;height: 129px; position: relative;
                  background-color: #FFF;
                  margin-bottom: 2px;
                  transition: all 0.5s ease;}
div.proj-preview:hover {opacity: 0.8;}
div.proj-preview__image {width: 50%;height: 100%; float: left;   }
div.proj-preview__title {padding-top:16px; padding-right: 5.7%;float:right; width: 39.5%; 
                         font-size: 10.5pt; line-height: 12.5pt;
}
div.proj-preview__title a {color: #0088cc; font-family: "Roboto Medium"; text-decoration: underline; text-transform: uppercase;
                           transition: all 0.5s ease;
}
div.proj-preview__title a:hover {text-decoration: none; color: #000000;}
div.proj-preview__about {padding-top:10px; padding-right: 5.7%;float:right; width: 39.5%;
                         color: #000;font-family: "Roboto";
                         font-size: 10.5pt; line-height: 14pt;

}

#calculate-form .b-form__row
{
    margin-bottom: 15px;
}


.jsPopup .button_blue
{
    background: #1cb4ff;
    color: #fff;
}
.jsPopup .button_blue:hover
{
    
    background: #22d2ff;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0px 2px 6px 2px #bdb8b8;
}
.jsPopup  .button_blue:after
{
    display: none;    
}
.jsPopup.b-form-element__title
{
    font-size: 10.5pt;
    font-size: 68%;
}
.jsPopup .b-form__caption
{
    font-size: 16.5pt;
}

/*Блок "Широкая колонка + сайдбар"*/
.b-col-sidebar {
    /*background-color: #FFF;*/
    position: relative; height: 340px;
}
.b-col-sidebar___sidebar {
    /*background-color: red;*/
    position: absolute; top:0px; left:0px;
    width: 220px;
}
.b-col-sidebar___col {
    /*background-color: blue;*/
    margin-left: 260px;
}

/*Блок "Карта"*/
.b-map {
    /*background-color: green;*/ 
    width: 100%; height: 340px;}

/*Блок "Контакты в сайдбаре"*/
.b-sidebar-contacts { font-size: 13.5pt; line-height: 17pt; margin-bottom: 10px;}

/*Блок "Форма обратной связи"*/
.b-feedback-form {}
.b-feedback-form:after {display: block;content: ""; clear: both;}
.b-feedback-form__row {margin-bottom: 15px;}
.b-feedback-form__row:after {display: block;content: ""; clear: both;}
.b-feedback-form__label {
    float: left;display: inline-block;  cursor: pointer;
    font-size: 13.5pt;}
.b-feedback-form__input {
    background-color: #FFF; border: none;width: 200px;height: 26px;display: inline-block; 
    padding: 0px 10px; float: left;  transition: all .4s ease;  font-family: "Roboto";
}
.b-feedback-form__input:hover {background-color: whitesmoke;}
.b-feedback-form__tarea {
    background-color: #FFF; border: none;width: 200px;height: 80px;display: inline-block; 
    padding: 0px 10px; float: left;  transition: all .4s ease;  font-family: "Roboto";
}
.b-feedback-form__tarea:hover {background-color: whitesmoke;}
.b-feedback-form__send {float: right;}



/*Фиксированный сайдбар на странице портфолио*/
.b-nav-col {position: fixed; top:0px; left: 0px; z-index: 9000;
            height: 100%; width: 195px; outline: 0px solid yellow;
            background-color: #0088cc;
            padding-left: 50px ;
}
.b-nav-col__logo {margin: 44px 0px 50px 0px;}
.b-nav-col__langs {margin-bottom: 45px;}
.b-nav-col__nav {}
.b-nav-col__projects-nav {position: absolute;bottom: 10px;}
.b-nav-col__projects-nav .b-picbutton {margin-right: 40px;}
.b-nav-col__projects-nav .b-picbutton:last-child {margin-right: 0px;}

/*Стили для поэкранного*/
#fullpage  { color: #000; }
#fullpage .section { background-color: #f5f5f5; }
.fp-tableCell {width: auto; padding-left: 245px;}
.high-content { 
    padding-left: 75px;
    background: linear-gradient(white 262px, #f5f5f5 262px);
    height: 100%;
}
#textpage {position: absolute; top:0px; left: 245px; 
            background-color: #f5f5f5; color: #000; 
            padding-left: 50px;
            padding-top: 26px;
            padding-right: 50px;
}

#textpage.right-col
{
    height: 100%;
    box-sizing: border-box;
    width: 80%;
    left: 20%;
}
.left-col
{
    width: 20% !important;
    box-sizing: border-box;
}

#textpage.contacts .b-feedback-form__input,
#textpage.contacts .b-feedback-form__tarea
{
        border: 1px solid  #22d2ff;
        border-radius: 5px;
}
#textpage.contacts .button_blue:hover {
    background: #22d2ff;
    color: #fff;
    border: 1px solid #fff;
    box-shadow: 0px 2px 6px 2px #bdb8b8;
}
/*Блок проекта*/
.b-project  { padding-top: 67px; }
.b-project__title  { font-size: 27pt; font-family: "Roboto Thin"; }
.b-project__org  { font-size: 23pt; font-weight: 600;  font-family: "Roboto";}
.b-project__link  {position: relative;top:40px; }
.b-project__view { }

/*Блок с иллюстрацией*/
.b-view { margin-bottom: 80px;}
.b-view_tablet-v1 { }
.b-view_tablet-v2 {     transform: skew(4deg) rotateZ(-16deg); }
.b-view_desktop-v1 { }
.b-view_desktop-v2 { }
.b-view_mobile-v1 { }
.b-view_images { }

/*Кнопка-картинка, с анимацей*/
.b-picbutton {float: left; cursor: pointer; 
              transition-duration: .3s;}
.b-picbutton:hover {transform: scale(1.5,1.5);}