@font-face{
    font-family: 'Intro';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/Intro.ttf'), url('../fonts/Intro.woff');
}


*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*:before,
*:after{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

img{
    border: none;
}
textarea{
    overflow: auto;
}
input,
textarea,
input:active,
textarea:active{
         outline: none transparent!important;
    box-shadow: none;

    -moz-outline: none!important;
}
input[type=submit],
button[type=submit]{
    -webkit-border-radius: 0;

    -webkit-appearance: none;
}
:focus{
    outline: none;
}

/* Общие стили */
.clear{
    clear: both;
}
.left{
    float: left;
}
.right{
    float: right;
}

html{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body{
    background: #fff;

    -webkit-text-size-adjust: 100%;
}
body.lock{
    overflow: hidden;

    border-right: 17px solid #000;
}

.wrap{
    overflow: hidden;
}

.cont{
    position: relative;

    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 10px;
}


.steps_links{
    position: fixed;
    top: 50%;
    right: 29px;
    z-index: 999;

    width: 15px;
    margin-top: -57px;
}

.steps_links a{
    display: block;

    width: 15px;
    height: 15px;

    border-radius: 50%;
    background-color: rgba(255,255,255,.5);

    transition: background-color .2s linear;
}
.steps_links a + a{
    margin-top: 18px;
}

.steps_links a:hover{
    background-color: #fff;
}


.buttonUp{
    display: none;

    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 999;
}
.buttonUp a{
    display: block;

    width: 50px;
    height: 50px;

    border-radius: 50%;
    background: url(../images/ic_buttonUp.png) 0 0 no-repeat;
}



.material_hover{
    overflow: hidden;

    position: relative;
}

.material_hover .blob{
    position: absolute;
    z-index: 1;

    width: 2px;
    height: 2px;
    margin-top: 0;
    margin-left: 0;

    border-width: 1px;
    border-style: solid;
    border-color: rgba(255,255,255,.15);
    border-radius: 50%;

    -webkit-transition: border-width .5s ease-in-out,margin-left .5s ease-in-out,margin-top .5s ease-in-out;
            transition: border-width .5s ease-in-out,margin-left .5s ease-in-out,margin-top .5s ease-in-out;
}
.material_hover .expand{
    margin-top: -400px;
    margin-left: -400px;

    border-width: 400px;
    border-style: solid;
    border-color: rgba(255,255,255,.15);

    -webkit-transition: border-width .5s ease-in-out,margin-left .5s ease-in-out,margin-top .5s ease-in-out;
            transition: border-width .5s ease-in-out,margin-left .5s ease-in-out,margin-top .5s ease-in-out;
}

.material_hover span{
    display: block;

    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
}



.desktop .advantages .item,
.desktop .second_section .services .item,
.desktop .second_section .promotion .total .rocket_left,
.desktop .second_section .promotion .total .rocket_right,
.desktop .second_section .services .logo,
.desktop .steps .step1 .info .item,
.desktop .steps .step1 .rocket,
.desktop .steps .step2 .items .item,
.desktop .portfolio .item,
.desktop .schema .item{
    visibility: hidden;
}

.animated{
    visibility: visible !important;
}
/* End Общие стили */

/*=============================*/

/* Стили шапки сайта */
header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    width: 100%;
    padding: 20px 0;

    text-align: center;

    transition: padding .1s linear,
    background .1s linear;
}
body.lock header{
    left: -8px;
}


header .logo{
    width: 73px;
}
header .logo img{
    display: block;
    /*
    max-width: 100%;
    height: 54px;
*/
    transition: height .1s linear;
}


header .menu{
    display: inline-block;

    padding: 13px 0;

    vertical-align: top;

    transition: padding .1s linear;
}
header .menu li{
    display: inline-block;

    list-style: none;

    vertical-align: top;
}
header .menu li + li{
    margin-left: 21px;
}
header .menu li a{
    display: block;

    position: relative;

    color: #fff;
    font: 300 16px/29px Roboto;

    text-decoration: none;
}

header .menu li a:after{
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;

    width: 0;
    height: 1px;
    margin: auto;

    color: transparent;

    background: #ea1d63;

    content: '';
    transition: width .3s linear;
}
/*
header .menu li a:hover:after{
    width: 100%;
}
*/


header .contacts{
    padding: 13px 0;

    transition: padding .1s linear;
}

header .phone{
    display: inline-block;

    height: 29px;

    color: #fff;
    font: 500 18px/29px Roboto;

    vertical-align: top;
}

header .phone a {
	color: #fff;
	text-decoration: none;
}

header .callback_link{
    display: inline-block;

    position: relative;
    z-index: 99;

    width: 140px;
    height: 29px;
    margin-left: 15px;

    color: #5a5c64;
    font: 9px/29px Roboto;

    text-align: center;
    vertical-align: top;
    text-decoration: none;
    letter-spacing: .2em;
    text-transform: uppercase;

    border-radius: 20px;
    background: #fff;

    transition: background-color .2s linear;
}
header .callback_link:hover{
    background-color: #dadada;
}


header.bg{
    padding: 5px 0;

    background: rgba(0,0,0,.5);
}
header.bg .contacts,
header.bg .menu{
    padding: 5px 0;
}

header.bg .logo img{
   /* height: 39px;*/
}
/* End Стили шапки сайта */

/*=============================*/

/* Стили основного блока сайта */
#video{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}

.first_section .bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    background: url(../images/bg_first_section.png) 50% 0 no-repeat;
}

.first_section .cont{
    position: relative;
    z-index: 3;
}


.first_section{
    overflow: hidden;

    position: relative;
    z-index: 2;

    min-height: 660px;
    padding: 7.5% 0 0;
}

.first_section .logo{
    margin-bottom: 2.5%;
}
.first_section .logo img{
    display: block;

    max-width: 100%;
    margin: 0 auto;
}


.first_section .title{
    margin-bottom: 2%;

    color: #fff;
    font: 300 48px 'Roboto', sans-serif;

    text-align: center;
}


.first_section .order{
    text-align: center;
}

.first_section .order form{
    display: inline-block;

    vertical-align: top;
}

.first_section .order .name{
    display: inline-block;

    margin-right: 16px;

    color: #fff;
    font: 24px/49px 'Roboto', sans-serif;

    vertical-align: top;
}

.first_section .order .input{
    display: inline-block;

    width: 300px;
    height: 49px;
    padding: 0 17px;

    color: #262626;
    font: 14px Roboto;

    vertical-align: top;

    border: none;
    border-radius: 3px;
    background: #fff;
}

.first_section .order ::-webkit-input-placeholder{
    color: #262626;
}
.first_section .order ::-moz-placeholder{
    color: #262626;
}
.first_section .order :-moz-placeholder{
    color: #262626;
}
.first_section .order :-ms-input-placeholder{
    color: #262626;
}

.first_section .order .submit_btn{
    display: inline-block;

    width: 195px;
    height: 49px;
    margin-left: 6px;

    color: #fff;
    font: 500 14px/49px Roboto;

    vertical-align: top;
    letter-spacing: .2em;

    border: none;
    border-radius: 3px;
    background: #ea1d63;

    cursor: pointer;
}
.first_section .order .submit_btn .blob,
.first_section .order .submit_btn .expand{
    border-color: #a80c41;
}


.advantages{
    padding-top: 4.5%;

    text-align: center;
}

.advantages .item{
    display: inline-block;

    margin: 0 20px;

    color: #fff;
    font: 300 16px/18px 'Roboto', sans-serif;

    vertical-align: top;
}

.advantages .item .icon{
    height: 55px;
    margin-bottom: 15px;

    line-height: 55px;
}
.advantages .item .icon img{
    position: relative;
    top: -1px;

    vertical-align: middle;
}

.advantages .item .name{
    opacity: .5;
}



.second_section{
    overflow: hidden;

    position: relative;
    z-index: 9;

    height: 902px;
    padding-top: 71px;

    /*background: url(../images/bg_second_section.jpg) 50% 0 no-repeat;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
}

.second_section .services{
    position: relative;

    height: 525px;
}

.second_section .services .logo{
    position: absolute;
    top: 120px;
    left: 131px;
    z-index: 1;

    width: 737px;
    height: 341px;

    background: url(../images/promotion_rocket.png) center center no-repeat;
}

.second_section .services .item{
    position: absolute;
    z-index: 2;

    padding: 0 15px;

    color: #114a3e;
    font: 300 14px/22px Roboto;

    border-radius: 20px;
    background: #fff;

    transition: box-shadow .2s linear;
}

.second_section .services .item .name{
    padding: 0 10px;

    color: #114a3e;
    font: 500 18px/37px Roboto;

    white-space: nowrap;
}

.second_section .services .item .info{
    display: none;

    padding-bottom: 10px;
}
.second_section .services .item .info a{
    color: #ea1d63;
}
.second_section .services .item .info a:hover{
    text-decoration: none;
}

.second_section .services .item a.order_link{
    display: block;

    width: 100%;
    height: 37px;
    margin-top: 13px;

    color: #fff;
    font: 500 12px/38px Roboto;

    text-align: center;
    text-decoration: none;
    letter-spacing: .1em;

    border-radius: 3px;
    background: #ea1d63;
}
.second_section .services .item a.order_link .blob,
.second_section .services .item a.order_link .expand{
    border-color: #a80c41;
}


.second_section .services .item.item1{
    top: 40px;
    left: 53px;
}
.second_section .services .item.item2{
    top: 0;
    left: 50%;

    margin-left: -127px;
}
.second_section .services .item.item3{
    top: 40px;
    right: -8px;
}
.second_section .services .item.item4{
    top: 164px;
    right: -45px;
}
.second_section .services .item.item5{
    top: 488px;
    right: 125px;

    color: #fff;

    background: #114a3e;
}
.second_section .services .item.item6{
    top: 488px;
    left: 140px;

    color: #fff;

    background: #114a3e;
}
.second_section .services .item.item7{
    top: 165px;
    left: 3px;
}

.second_section .services .item5 .name,
.second_section .services .item6 .name,
.second_section .services .item5 .info a,
.second_section .services .item6 .info a{
    color: #fff;
}


.second_section .services .item:hover{
    z-index: 9;

    border-radius: 18px;
    box-shadow: 0 5px 21px rgba(0,0,0,.44);
}
.second_section .services .item:hover .info{
    display: block;
}


.second_section .promotion{
    margin-top: -10px;

    text-align: center;
}
.second_section .promotion .title{
    color: #fff;
    font: 500 24px/24px Roboto;
}

.second_section .promotion .total{
    display: inline-block;

    position: relative;

    width: 336px;
    height: 173px;
    padding: 33px 25px 26px 19px;

    color: #114a3e;
    font: 300 14px Roboto;

    vertical-align: top;

    background: url(../images/bg_promotion_total.png) 0 0 no-repeat;
}
.second_section .promotion .total b{
    display: block;

    margin-top: 5px;

    font-size: 28px;
    line-height: 30px;

    text-transform: uppercase;

    text-shadow: 0 1px 1px rgba(255,255,255,.46);
}

.second_section .promotion .total .rocket_left{
    display: block;

    position: absolute;
    bottom: -45px;
    left: -57px;

    width: 102px;
    height: 201px;

    background: url(../images/promotion_rocket.png) 0 0 no-repeat;

    content: '';
}

.second_section .promotion .total .rocket_right{
    display: block;

    position: absolute;
    right: -8px;
    bottom: 13px;

    width: 54px;
    height: 107px;

    background: url(../images/promotion_rocket.png) 0 0 no-repeat;
    background-size: 100%;

    content: '';
}



.steps{
    position: relative;
    z-index: 9;

    background: #fff;
}
.steps_head{
    position: relative;
    z-index: 10;

    height: 664px;
    margin-bottom: 40px;
    padding-top: 85px;

    background: url(../images/bg_steps_head.jpg) 50% 0 no-repeat;
}

.steps_head .title{
    color: #fff;
    font: 300 44px Roboto;

    text-align: center;
}


.steps_head #parallax3{
    position: absolute;
    top: -75px;
    left: 0;

    width: 100%;
    height: 530px;
}
.steps_head #parallax3 li img{
    display: inline-block;

    vertical-align: top;
}

.steps_head #parallax3 li:nth-child(1){
    top: 0 !important;
    right: 0 !important;
    z-index: 1;

    text-align: right;
}
.steps_head #parallax3 li:nth-child(2){
    top: 155px !important;
    left: 0 !important;
    z-index: 2;
}
.steps_head #parallax3 li:nth-child(3){
    top: auto !important;
    bottom: 0 !important;
    left: 175px !important;
    z-index: 3;
}


.steps_head #parallax1{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 329px;

    background: url(../images/bg_steps_head_scene.png) 50% 100% no-repeat;
}

.steps_head #parallax1 li{
    height: 329px;

    line-height: 329px;
}

.steps_head #parallax1 li:nth-child(1){
    top: auto !important;
    bottom: -30px !important;
    left: -50px !important;
    z-index: 1;
}
.steps_head #parallax1 li:nth-child(2){
    top: auto !important;
    right: -85px !important;
    bottom: 20px !important;
    z-index: 2;

    text-align: right;
}
.steps_head #parallax1 li:nth-child(3){
    top: auto !important;
    bottom: -100px !important;
    left: -35px !important;
    z-index: 3;
}
.steps_head #parallax1 li:nth-child(4){
    top: auto !important;
    right: 0 !important;
    bottom: -40px !important;
    z-index: 4;

    text-align: right;
}

.steps_head #parallax1 li img{
    display: inline-block;

    vertical-align: bottom;
}


.steps .block_title{
    margin-bottom: 30px;

    text-align: center;
}

.steps .block_title .number{
    margin-bottom: 20px;

    color: #000;
    font: 500 38px Roboto;
}

.steps .block_title .title{
    display: inline-block;

    position: relative;

    padding: 0 125px;

    color: #000;
    font: 300 36px Roboto;

    vertical-align: top;

    background: url(../images/bg_block_title_left.png) 0 9px no-repeat,
    url(../images/bg_block_title_right.png) 100% 9px no-repeat;
}

.steps .block_title .title.bg{
    width: 598px;
    height: 51px;
    padding: 0;

    color: #fff;
    font: 300 30px/51px Roboto;

    background: url(../images/bg_block_title_bg.png) 0 0 no-repeat;
}


.steps .step{
    position: relative;
    z-index: 9;
}


.steps .step1{
    height: 750px;
    padding-top: 50px;

    text-align: center;

    background: #fff url(../images/bg_step1.jpg) 50% 100% no-repeat;
}

.steps .step1 .info{
    display: inline-block;

    position: relative;

    width: 460px;
    height: 360px;

    color: #fff;
    font: 900 16px Roboto;

    vertical-align: top;
    text-transform: uppercase;
}

.steps .step1 .info .item{
    position: absolute;
}

.steps .step1 .info .item.item1{
    top: 100px;
    left: 0;

    padding-top: 70px;

    background: url(../images/bg_step1_info_item.png) 50% 0 no-repeat;
    background-size: 54px 54px;
}

.steps .step1 .info .item.item2{
    top: 0;
    right: 0;

    padding-top: 90px;

    background: url(../images/bg_step1_info_item.png) 50% 0 no-repeat;
}

.steps .step1 .rocket{
    position: absolute;
    top: 0;
    left: 113px;

    width: 219px;
    height: 448px;

    background: url(../images/step1_rocket_new.png) 0 0 no-repeat;
    background-size: 100% auto;
}
.steps .step1 .rocket.animated{
    background: url(../images/step1_rocket_new.png) 0 0 no-repeat;
}
.steps .step1 .rocket.animate{
    background: url(../images/step1_rocket_new.png) 0 0 no-repeat;
}



.steps .step2{
    height: 352px;
    padding-top: 10px;

    text-align: center;

    background: url(../images/bg_step2.jpg) 50% 0 no-repeat;
}
.steps .step2 .block_title .number{
    color: #fff;
}

.steps .step2 .items{
    padding-top: 25px;

    text-align: center;
}
.steps .step2 .items .item{
    display: inline-block;

    position: relative;

    margin: 0 20px;

    color: #fff;
    font: 300 18px Roboto;

    vertical-align: top;
}

.steps .step2 .items .item1{
    width: 150px;

    text-align: left;
}
.steps .step2 .items .item1:after{
    display: block;

    position: absolute;
    top: -57px;
    left: 115px;

    width: 48px;
    height: 49px;

    background: url(../images/bg_step2_arrow1.png) 50% 0 no-repeat;

    content: '';
}

.steps .step2 .items .item2:after{
    display: block;

    position: absolute;
    top: -56px;
    left: 100px;

    width: 55px;
    height: 55px;

    background: url(../images/bg_step2_arrow2.png) 50% 0 no-repeat;

    content: '';
}

.steps .step2 .items .item3{
    text-align: right;
}
.steps .step2 .items .item3:after{
    display: block;

    position: absolute;
    top: -55px;
    left: 20px;

    width: 37px;
    height: 44px;

    background: url(../images/bg_step2_arrow3.png) 50% 0 no-repeat;

    content: '';
}



.steps .step3{
    height: 900px;
    padding-top: 80px;

    text-align: center;

    background: url(../images/bg_step3_new.png?1) 50% 0 no-repeat;
}



.steps .step4{
    position: relative;

    height: 874px;
    padding-top: 70px;

    background: url(../images/bg_step4.png) 50% 0 no-repeat;
}

.steps .step4 .block_title{
    position: relative;
    z-index: 9;

    margin-bottom: 40px;
}
.steps .step4 .block_title .number{
    color: #fff;
}
.steps .step4 .block_title .title.bg{
    width: 814px;

    font-size: 36px;

    background: url(../images/bg_block_title_bg2.png) 0 0 no-repeat;
}

.steps .step4 .icon{
    position: absolute;
    z-index: 2;
}
.steps .step4 .icon img{
    display: block;

    position: absolute;
    bottom: 0;
    left: 0;
}

.steps .step4 .icon1{
    overflow: hidden;

    top: -26px;
    left: 50%;

    width: 124px;
    height: 167px;
    margin-left: -425px;

    transition: height 2s linear;
}
.steps .step4 .icon1:before{
    display: block;

    position: absolute;
    top: 0;
    left: 50%;

    width: 20px;
    height: 20px;
    margin-left: -11px;

    background: url(../images/ic_step_icon1_before.png) 0 0 no-repeat;

    content: '';
}
.steps .step4 .icon1.animate{
    height: 395px;
}

.steps .step4 .icon2{
    overflow: hidden;

    top: -40px;
    left: 50%;

    width: 62px;
    height: 111px;
    margin-left: -180px;

    transition: height 2s linear;
}
.steps .step4 .icon2:before{
    display: block;

    position: absolute;
    top: 0;
    left: 50%;

    width: 26px;
    height: 26px;
    margin-left: -10px;

    background: url(../images/ic_step_icon2_before.png) 0 0 no-repeat;

    content: '';
}
.steps .step4 .icon2.animate{
    height: 398px;
}

.steps .step4 .icon3{
    overflow: hidden;

    top: -38px;
    left: 50%;

    width: 205px;
    height: 269px;
    margin-left: 155px;

    transition: height 2s linear;
}
.steps .step4 .icon3:before{
    display: block;

    position: absolute;
    top: 0;
    left: 50%;

    width: 23px;
    height: 23px;
    margin-left: -12px;

    background: url(../images/ic_step_icon3_before.png) 0 0 no-repeat;

    content: '';
}
.steps .step4 .icon3.animate{
    height: 610px;
}


.steps .step4 .items{
    position: relative;

    width: 814px;
    max-width: 100%;
    height: 250px;
    margin: 0 auto;
}

.steps .step4 .items .name{
    position: absolute;

    color: #fff;

    text-transform: uppercase;
}

.steps .step4 .items .name1{
    top: 0;
    left: 50%;

    margin-left: -285px;

    font: 39px/39px Intro;
}
.steps .step4 .items .name2{
    top: 230px;
    left: 50%;

    margin-left: -170px;

    font: 20px/20px Intro;
}
.steps .step4 .items .name3{
    top: 90px;
    left: 50%;

    margin-left: -75px;

    font: 78px/78px Intro;
}

.steps .step4 .scene{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;

    width: 100%;
    height: 795px;

    background: url(../images/bg_step4_scene.png) 50% 100% no-repeat;
}

.steps .step4 .scene li{
    height: 795px;

    line-height: 795px;
}

.steps .step4 .scene li:nth-child(1){
    top: auto !important;
    bottom: 35px !important;
    left: -65px !important;
    z-index: 1;
}
.steps .step4 .scene li:nth-child(2){
    top: auto !important;
    right: -115px !important;
    bottom: 170px !important;
    z-index: 2;

    text-align: right;
}
.steps .step4 .scene li:nth-child(3){
    top: auto !important;
    right: 200px !important;
    bottom: 110px !important;
    z-index: 3;

    text-align: right;
}
.steps .step4 .scene li:nth-child(4){
    top: auto !important;
    bottom: 20px !important;
    left: -120px !important;
    z-index: 4;
}

.steps .step4 .scene li:nth-child(5){
    top: auto !important;
    bottom: 45px !important;
    left: -65px !important;
    z-index: 5;
}

.steps .step4 .scene li:nth-child(6){
    top: auto !important;
    right: 0 !important;
    bottom: 35px !important;
    z-index: 6;

    text-align: right;
}

.steps .step4 .scene li:nth-child(7){
    top: auto !important;
    bottom: -20px !important;
    left: 0 !important;
    z-index: 7;
}

.steps .step4 .scene li:nth-child(8){
    top: auto !important;
    bottom: 20px !important;
    left: 230px !important;
    z-index: 8;
}

.steps .step4 .scene li:nth-child(9){
    top: auto !important;
    bottom: -10px !important;
    left: 450px !important;
    z-index: 9;
}

.steps .step4 .scene li:nth-child(10){
    top: auto !important;
    bottom: 0 !important;
    left: 20px !important;
    z-index: 10;
}

.steps .step4 .scene li img{
    display: inline-block;

    vertical-align: bottom;
}



.portfolio{
    position: relative;
    z-index: 9;

    margin-top: -110px;
    padding-top: 30px;
}
.portfolio .block_title{
    margin-bottom: 36px;

    color: #fff;
    font: 300 44px/44px Roboto;

    text-align: center;
}

.portfolio .grid{
    position: relative;
    top: 0;
    left: 0;

    transition: transform .3s linear;
}
.portfolio .grid.hide{
    position: absolute;
    top: 110px;

    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}


.portfolio .tabs_container{
    padding: 31px 0 0;

    background: url(../images/bg_portfolio.png) 0 0 repeat;
}

.portfolio .tabs{
    height: 42px;
    margin-bottom: 31px;

    text-align: justify;
}
.portfolio .tabs:after{
    display: inline-block;

    width: 100%;

    content: '';
}

.portfolio .tabs li{
    display: inline-block;

    position: relative;
    z-index: 2;

    padding: 0 10px;

    list-style-type: none;

    font: 100 18px/38px Roboto;

    text-align: center;
    vertical-align: top;

    border: 2px solid transparent;
    border-radius: 3px;

    cursor: pointer;
    transition: border-color .2s linear;
}
.portfolio .tabs li a{
    display: inline-block;

    color: #fff;
    line-height: 20px;

    vertical-align: middle;
    text-decoration: none;

    border-bottom: 1px dotted #fff;

    transition: border-color .2s linear;
}

.portfolio .tabs li:hover a{
    border-color: transparent;
}

.portfolio .tabs li.active{
    border-color: #fff;
}
.portfolio .tabs li.active a{
    border-color: transparent;
}

.portfolio .tab_content{
    display: none;
    overflow: hidden;

    position: relative;
    z-index: 1;
}

.portfolio .item{
    overflow: hidden;

    position: relative;

    width: 33.333%;
}

.portfolio .item > img{
    display: block;

    width: 100%;
}

.portfolio .item .info{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: url(../images/bg_portfolio_item.png) 0 0 repeat;
}

.portfolio .item .logo{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 300px;
    height: 100px;
    margin-top: -50px;
    margin-left: -150px;

    line-height: 100px;

    text-align: center;

    transition: opacity .15s linear;
}
.portfolio .item .logo img{
    position: relative;
    top: -1px;

    vertical-align: middle;
}
.portfolio .item:hover .logo{
    opacity: 0;
}


.portfolio .item .center{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 170px;
    margin: auto;

    text-align: center;
}

.portfolio .item .name{
    margin-bottom: 5px;

    color: #fff;
    font: 700 42px Roboto;
}
.portfolio .item .desc{
    color: #fff;
    font: 300 22px Roboto;
}

.portfolio .item .name,
.portfolio .item .desc{
    position: relative;
    top: -20px;

    opacity: 0;

    transition: all .2s linear;
}
.portfolio .item .details{
    display: inline-block;

    position: relative;
    bottom: -20px;

    width: 157px;
    height: 42px;
    margin-top: 30px;

    color: #fff;
    font: 100 18px/38px Roboto;

    text-align: center;
    vertical-align: top;
    text-decoration: none;

    opacity: 0;
    border: 2px solid #fff;
    border-radius: 3px;

    transition: all .2s linear;
}
.portfolio .item .details span{
    color: #fff;

    transition: color .2s ease-in-out .15s;
}

.portfolio .item:hover .name,
.portfolio .item:hover .desc{
    top: 0;

    opacity: 1;
}
.portfolio .item:hover .details{
    bottom: 0;

    opacity: 1;
}

.portfolio .item .details:hover span{
    color: #fff;
}
.portfolio .item .details .blob,
.portfolio .item .details .expand{
    border-color: #fff;
}



#portfolio_roject_info{
    overflow-x: hidden;
    overflow-y: scroll;

    position: fixed;
    top: 0;
    left: 100%;
    z-index: 999;

    width: 100%;
    height: 100%;
    padding: 50px 0 100px;

    background: #fff;

    transition: transform .6s linear;
}
#portfolio_roject_info.show{
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

#portfolio_roject_info .logo{
    margin-top: -18px;
    margin-bottom: 10px;
}
#portfolio_roject_info .logo img{
    display: block;
}

#portfolio_roject_info .close{
    display: inline-block;

    height: 42px;
    margin-bottom: 10px;
    padding: 0 35px;

    color: #fff;
    font: 100 18px/38px Roboto;

    vertical-align: top;
    text-decoration: none;

    border: 2px solid #fff;
    border-radius: 3px;

    transition: all .2s linear;
}
#portfolio_roject_info .close span{
    color: #fff;

    transition: color .2s ease-in-out .15s;
}
#portfolio_roject_info .close:hover span{
    color: #fff;
}
#portfolio_roject_info .close .blob,
#portfolio_roject_info .close .expand{
    border-color: #fff;
}


#portfolio_roject_info .data{
    width: 800px;
    max-width: 100%;
    margin: 0 auto;

    text-align: center;

    transition: transform .3s linear;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}

#portfolio_roject_info .data.data_prev{
    -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
            transform: translateX(-200%);
}

#portfolio_roject_info .data.data_next{
    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
}

#portfolio_roject_info .data.hide_left{
    position: absolute;
    top: 69px;
    left: 50%;

    margin-left: -400px;

    -webkit-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
            transform: translateX(-200%);
}
#portfolio_roject_info .data.hide_right{
    position: absolute;
    top: 69px;
    left: 50%;

    margin-left: -400px;

    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
}


#portfolio_roject_info .data .title{
    margin-bottom: 10px;

    color: #fff;
    font: 700 36px Roboto;
}

#portfolio_roject_info .data .site{
    margin-bottom: 10px;

    color: #fff;
    font: 300 18px Roboto;
}
#portfolio_roject_info .data .site a{
    color: #fff;

    text-decoration: none;
}
#portfolio_roject_info .data .site a:hover{
    text-decoration: underline;
}

#portfolio_roject_info .data .site a.full_size{
    margin-left: 16px;

    color: #fff;
    font-size: 12px;

    text-decoration: underline;
}
#portfolio_roject_info .data .site a.full_size:hover{
    text-decoration: none;
}


#portfolio_roject_info .prev,
#portfolio_roject_info .next{
    display: block;

    color: #fff;
    font: 300 14px/31px Roboto;

    text-decoration: none;
}

#portfolio_roject_info .prev{
    padding-left: 40px;

    background: url(../images/ic_prev.png) 0 0 no-repeat;
}
#portfolio_roject_info .next{
    padding-right: 40px;

    background: url(../images/ic_next.png) 100% 0 no-repeat;
}

#portfolio_roject_info .prev:hover,
#portfolio_roject_info .next:hover{
    text-decoration: underline;
}

#portfolio_roject_info .text p, #portfolio_roject_info .text ul, #portfolio_roject_info .text ol{
    overflow: hidden;
    text-align: left;
    margin-top: 15px;
    padding: 0px;
    color: #fff;
    font: normal 16px/23px verdana;
}

#portfolio_roject_info .text{
    margin-bottom: 15px;
}

#portfolio_roject_info .img{
    overflow: hidden;

    margin-top: 15px;
    padding: 0px;

    border-radius: 3px;
    background: url(../images/bg_portfolio_img1.png) 10px 10px no-repeat,
    url(../images/bg_portfolio_img2.png) 50% 7px no-repeat #d4d4d4;
    box-shadow: 0 0 27px rgba(0,0,0,.75);
}
#portfolio_roject_info .img img{
    display: block;

    width: 100%;
}



.order_block{
    position: relative;
    z-index: 9;

    padding: 40px 0 55px;

    text-align: center;

    background: url(../images/bg_order_block.png) 0 0 repeat;
}

.order_block .block_title{
    margin-bottom: 20px;

    color: #fff;
    font: 300 44px Roboto;
}

.order_block form{
    display: inline-block;

    vertical-align: top;
}

.order_block form .input{
    display: inline-block;

    width: 300px;
    height: 49px;
    padding: 0 17px;

    color: #262626;
    font: 14px Roboto;

    vertical-align: top;

    border: none;
    border-radius: 3px;
    background: #fff;
}

.order_block form ::-webkit-input-placeholder{
    color: #262626;
}
.order_block form ::-moz-placeholder{
    color: #262626;
}
.order_block form :-moz-placeholder{
    color: #262626;
}
.order_block form :-ms-input-placeholder{
    color: #262626;
}

.order_block form .submit_btn{
    display: inline-block;

    width: 195px;
    height: 49px;
    margin-left: 6px;

    color: #fff;
    font: 500 14px/49px Roboto;

    vertical-align: top;
    letter-spacing: .2em;

    border: none;
    border-radius: 3px;
    background: #ea1d63;

    cursor: pointer;
}
.order_block form .submit_btn .blob,
.order_block form .submit_btn .expand{
    border-color: #a80c41;
}



.bottom_bg{
    position: relative;
    z-index: 9;

    /*background: url(../images/bo_bottom.jpg) 50% 0 no-repeat;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
}


.bottom_bg .flag{
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: 1;

    width: 358px;
    height: 345px;
    margin-right: -250px;

    background: url(../images/contacts_flag.png?1) 0 0 no-repeat;
}
.bottom_bg .flag.animate{
    -webkit-animation: flagAnimate 1s linear;
            animation: flagAnimate 1s linear;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}


@-webkit-keyframes flagAnimate{
    from{
        -webkit-transform: rotate(32deg) translateX(530px) rotate(85deg);
    }
    90%{
        -webkit-transform: rotate(-85deg) translateX(530px) rotate(70deg);
    }
    to{
        -webkit-transform: rotate(-85deg) translateX(530px) rotate(85deg);
    }
}

@-moz-keyframes flagAnimate{
    from{
        -moz-transform: rotate(32deg) translateX(530px) rotate(85deg);
    }
    90%{
        -moz-transform: rotate(-85deg) translateX(530px) rotate(70deg);
    }
    to{
        -moz-transform: rotate(-85deg) translateX(530px) rotate(85deg);
    }
}

@-o-keyframes flagAnimate{
    from{
        -o-transform: rotate(32deg) translateX(530px) rotate(85deg);
    }
    90%{
        -o-transform: rotate(-85deg) translateX(530px) rotate(70deg);
    }
    to{
        -o-transform: rotate(-85deg) translateX(530px) rotate(85deg);
    }
}

@keyframes flagAnimate{
    from{
        transform: rotate(32deg) translateX(530px) rotate(85deg);
    }
    90%{
        transform: rotate(-85deg) translateX(530px) rotate(70deg);
    }
    to{
        transform: rotate(-85deg) translateX(530px) rotate(85deg);
    }
}



.bottom_bg .planeta{
    position: absolute;
    right: 50%;
    bottom: -200px;
    z-index: 1;

    width: 193px;
    height: 194px;
    margin-right: -960px;

    background: url(../images/ic_contacts_planeta.png) 0 0 no-repeat;

    transition: all 1s linear;
}
.bottom_bg .planeta.animate{
    bottom: 515px;

    margin-right: -745px;
}


.schema{
    padding: 70px 0 30px;
}

.schema .block_title{
    margin-bottom: 50px;

    color: #fff;
    font: 300 44px Roboto;

    text-align: center;
}

.schema .info{
    position: relative;

    width: 100%;
    height: 600px;

    background: url(../images/bg_schema_path.png) 50% 50% no-repeat;
}

.schema .item{
    overflow: hidden;

    position: absolute;

    color: #fff;
    font: 300 12px Roboto;

    text-align: center;
}
.schema .item .name{
    margin-bottom: 7px;

    font: 700 19px/19px Roboto;
}
.schema .item .number{
    margin-bottom: 10px;

    font: 700 36px/36px Roboto;
}
.schema .item .data + .number{
    margin-top: 10px;
    margin-bottom: 0;
}

.schema .item .number.left{
    margin: 0 15px 0 0;
}
.schema .item .number.right{
    margin: 0 0 0 15px;
}

.schema .item4 .number{
    line-height: 60px;
}
.schema .item6 .number{
    line-height: 50px;
}
.schema .item7 .number{
    margin-bottom: 20px;
}

.schema .item .icon{
    margin-top: 10px;
}
.schema .item .icon img{
    display: block;

    max-width: 100%;
    margin: 0 auto;
}


.schema .item1{
    top: 260px;
    left: 50%;

    margin-left: -463px;

    text-align: right;
}
.schema .item2{
    top: 420px;
    left: 50%;

    margin-left: -374px;
}
.schema .item3{
    top: -10px;
    left: 50%;

    margin-left: -349px;
}
.schema .item4{
    top: 160px;
    left: 50%;

    margin-left: -230px;

    text-align: left;
}
.schema .item5{
    bottom: 0;
    left: 50%;

    margin-left: -237px;
}
.schema .item6{
    top: 315px;
    left: 50%;

    margin-left: -85px;

    text-align: left;
}
.schema .item7{
    bottom: 15px;
    left: 50%;

    margin-left: 20px;
}
.schema .item8{
    top: 88px;
    left: 50%;

    margin-left: 132px;
}
.schema .item9{
    top: 220px;
    left: 50%;

    margin-left: 252px;
}


.schema .logo{
    visibility: visible !important;

    top: 100px;
    left: 50%;

    margin-left: -447px;
}


.schema .rocket{
    top: 50px;
    left: 50%;

    margin-left: 283px;
}
.schema .rocket img{
    width: 74px;
}



.contacts_block{
    position: relative;
    z-index: 9;

    padding-top: 220px;
    padding-bottom: 125px;

    /*background: url(../images/bg_contacts_block.png) 50% 140% no-repeat;*/

    transition: background-position .3s linear;
	background-repeat: no-repeat;
	background-position: 50% 140%;
}
.contacts_block.animate{
    background-position: 50% 100%;
}

.contacts_block .title{
    margin-bottom: 25px;
    padding-top: 28px;

    color: #fff;
    font: 300 36px Roboto;

    text-align: center;
}

.contacts_block form{
    display: block;

    width: 760px;
    max-width: 100%;
    margin: 0 auto;
}
.contacts_block form .line{
    margin-bottom: 24px;
}

.contacts_block form .lines{
    overflow: hidden;

    margin-left: -3%;
}
.contacts_block form .line.left{
    width: 30.333%;
    margin-left: 3%;
}

.contacts_block form .input{
    width: 100%;
    height: 49px;
    padding: 0 17px;

    color: #262626;
    font: 14px Roboto;

    border: none;
    border-radius: 3px;
    background: #fff;
}

.contacts_block form textarea{
    display: block;

    width: 100%;
    height: 144px;
    padding: 10px 17px;

    color: #262626;
    font: 14px Roboto;

    border: none;
    border-radius: 3px;
    background: #fff;

    resize: none;
}

.contacts_block form ::-webkit-input-placeholder{
    color: #262626;
}
.contacts_block form ::-moz-placeholder{
    color: #262626;
}
.contacts_block form :-moz-placeholder{
    color: #262626;
}
.contacts_block form :-ms-input-placeholder{
    color: #262626;
}

.contacts_block form .submit{
    position: relative;

    padding-top: 6px;

    text-align: center;
}
.contacts_block form .submit_btn{
    display: inline-block;

    width: 195px;
    height: 49px;
    margin-left: 6px;

    color: #fff;
    font: 500 14px/49px Roboto;

    vertical-align: top;
    letter-spacing: .2em;

    border: none;
    border-radius: 3px;
    background: #499d6d;
    box-shadow: 0 5px 5px rgba(0,0,0,.45);

    cursor: pointer;
}
.contacts_block form .submit_btn .blob,
.contacts_block form .submit_btn .expand{
    border-color: #377853;
}

.contacts_block form .email{
    position: absolute;
    top: 6px;
    right: 0;

    color: #752704;
    font: 14px/49px Roboto;

    letter-spacing: .03em;
}
.contacts_block form .email a{
    display: block;

    padding-left: 32px;

    color: #752704;

    text-decoration: none;

    background: url(../images/ic_email.png) 0 50% no-repeat;
}
.contacts_block form .email a:hover{
    text-decoration: underline;
}

.contacts_block form  .or_call{
    padding-top: 25px;

    color: #fff;
    font: 300 23px Roboto;

    text-align: center;
}
.contacts_block form  .or_call b{
    font-size: 23px;
    font-weight: 500;
}
/* End Стили основного блока сайта */

/*=============================*/

/* Стили подвала сайта */
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;

    width: 100%;
    height: 90px;

    background: rgba(30,30,30,.29);
}


footer .logo{
    margin-right: 20px;

    line-height: 90px;
}
footer .logo img{
    position: relative;
    top: -1px;

    width: 81px;

    vertical-align: middle;
}


footer .copyright{
    padding: 31px 0 0;

    color: #fff;
    font: 14px/29px Roboto;

    letter-spacing: .03em;
}


footer .links{
    padding-top: 31px;

    color: #fff;
    font: 11px/29px Roboto;

    text-transform: uppercase;
}
footer .links a{
    color: #fff;
}
footer .links a + a{
    margin-left: 26px;
}

footer .links a:hover{
    text-decoration: none;
}



footer .callback_link{
    display: block;

    width: 140px;
    height: 29px;
    margin-top: 31px;
    margin-left: 26px;

    color: #fff;
    font: 9px/25px Roboto;

    text-align: center;
    text-decoration: none;
    letter-spacing: .2em;
    text-transform: uppercase;

    border: 2px solid #fdb700;
    border-radius: 20px;

    transition: background-color .2s linear;
}
footer .callback_link:hover{
    background-color: #fdb700;
}
/* End Стили подвала сайта */

/*=============================*/

/* Стили всплывающих окон */
.modal_title{
    margin-bottom: 15px;

    color: #000;
    font: 36px/36px Roboto;

    text-align: center;
}

.modal_desc{
    margin-bottom: 25px;

    color: #000;
    font: 300 15px Roboto;

    text-align: center;
}

.popup form .line{
    margin-bottom: 20px;
}

.popup form .name{
    margin-bottom: 5px;

    color: #262626;
    font: 14px/22px Roboto;

    letter-spacing: .03em;
}

.popup form .input{
    width: 100%;
    height: 49px;
    padding: 0 15px;

    color: #000;
    font: 24px Roboto;

    text-align: center;

    border: none;
    border-radius: 3px;
    background: #fff;
}

.popup form .phone{
    height: 49px;

    text-align: justify;
}
.popup form .phone:after{
    display: inline-block;

    width: 100%;

    content: '';
}
.popup form .phone .input{
    display: inline-block;

    vertical-align: top;
}

.popup form .phone .input:nth-child(1){
    width: 20%;
}
.popup form .phone .input:nth-child(2){
    width: 30%;
}
.popup form .phone .input:nth-child(3){
    width: 45%;
}


.popup form .submit{
    padding-top: 10px;
}
.popup form .submit_btn{
    display: block;

    width: 100%;
    height: 49px;

    color: #fff;
    font: 500 18px/49px Roboto;

    letter-spacing: .2em;

    border: none;
    border-radius: 3px;
    background: #ea1d63;

    cursor: pointer;
}
.popup form .submit_btn .blob,
.popup form .submit_btn .expand{
    border-color: #a80c41;
}


.popup form  .or_call{
    padding-top: 20px;

    color: #000;
    font: 300 15px Roboto;

    text-align: center;
}
.popup form  .or_call b{
    font-size: 18px;
}


#success .popup{
    height: 175px;
}
#success .popup__content{
    height: 175px;
    min-height: 175px;
}
/* End Стили всплывающих окон */


header .menu li a.active {
	border-bottom: 1px solid #ea1d63;
}


#portfolio_roject_info {
	background: url(../images/testp.jpg) 50% 0 no-repeat;
	background-color: none;
}