@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=cyrillic-ext');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=cyrillic-ext');

body{font-family: 'Roboto', sans-serif;color:#000;font-size:14px;font-weight:400;}
.u-full-width{width:100%;box-sizing:border-box;}
.u-max-full-width{max-width:100%;box-sizing:border-box;}
.u-pull-right{float:right;}
.u-pull-left{float:left;}
.wrap:after,.row:after,.u-cf{content:"";display:table;clear:both;}
.wrap{position:relative;width:1410px;margin:0 auto;box-sizing:border-box;height:100%;}
.column, .columns{width:100%;float:left;box-sizing:border-box;}
.column:first-child, .columns:first-child, li:first-child{margin-left:0!important;}
.hcenter{text-align:center;}
.acenter{position:absolute;left:50%;transform:translateX(-50%);}
.abscenter{position:absolute;left:0;right: 0; top:50%;transform:translateY(-70%);}

.swap-vr {    display: flex;    flex-direction: column-reverse;}


header {width:100%;height: 656px;background: url(../images/header.png) no-repeat top center;}
.inner header {height:150px;}
header .wrap {background: #fff;height: 85px;}
header .logo {margin-left:40px;margin-top: 30px;}


header nav {margin:30px 0 0 150px;}
header nav ul{list-style-type:none;}
header nav ul li{display:inline;}
header nav ul li a {font-weight: 500;line-height: normal;font-size: 18px;text-align: center;color: #2C2C2C;text-decoration:none;margin-left:70px;position: relative;}
header nav ul li a:hover,header nav ul li a.active {color:#FDB700;}
header nav ul li a:hover::after {content: '';position: absolute;bottom:-33px;left:-10px;width:100%;height:3px;background:#FDB700;padding: 0 10px; }

header .phone {margin-right: 40px;margin-top: 15px; border:1px solid #ccc;padding:2px 10px;border-radius: 5px;}
header .phone a {text-decoration: none;font-size: 18px;font-weight: 900;color:#000;background: url(../images/mobile-phone.svg) left center no-repeat;background-size: 32px 32px;padding:10px 0 10px 40px;display: block;}
header .phone a span {color:#FDB700;}

header .block {margin-top:180px;text-align: center;}

header .block h1 {color: #FDB700;	font-size: 60px;font-weight: 900;letter-spacing: 0.5px;	line-height: 71px;text-transform: uppercase;}

header .block h2 {margin:60px auto 85px; 	color: #FFFFFF;	font-size: 20px;	font-weight: 500;	letter-spacing: 0.17px;	line-height: 28px;}

.button {background: #FDB700;;border-radius: 3px;font-style: normal;font-weight: 700;line-height: 28px;letter-spacing: 0.17px;font-size: 20px;text-align: center;color: #2C2C2C;padding:20px 40px;text-decoration: none;text-transform: uppercase;}

#services .wrap, article .wrap {background: #fff;margin-top:-25px;padding:25px 0;}
#services h3 {float:left;text-transform: uppercase;font-family: 'Roboto Condensed', sans-serif;font-size: 60px;font-weight: 700;letter-spacing: 0.5px;line-height: 48px;color: #9B9B9B;margin:200px 70px;width: 320px;}
#services h3 span {display: block;color: #FDB700;}
#services .sss {float:left;}
#services .row {margin:20px 0 80px;}
#services .row .column {width:320px;margin:0 70px!important;color: #2C2C2C;}
#services .row .column h4  {		font-size: 24px;	font-weight: 700;	line-height: 28px;text-transform: uppercase;position: relative;}
#services .row .column .text {		margin-top:10px;	font-size: 16px;	line-height: 24px;}
#services .row .column h4::before {content: '';width: 48px;height: 48px;left:-70px;top:-1px;position: absolute;}
#services .row:nth-child(1) .column:nth-child(1) h4::before { background: url(../images/icons/drafting.svg) no-repeat;}
#services .row:nth-child(1) .column:nth-child(2) h4::before { width:49px;height: 50px; background: url(../images/icons/optics.svg) no-repeat;}
#services .row:nth-child(2) .column:nth-child(1) h4::before { background: url(../images/icons/lan.svg) no-repeat;}
#services .row:nth-child(2) .column:nth-child(2) h4::before { width:41px; background: url(../images/icons/electrics.svg) no-repeat;}

#services2 {background: #F6F6F6;padding:40px 0 0;}

#services2 .row .column {width:320px;margin:0 70px 50px 70px!important;color: #2C2C2C;}
#services2 .row .column h4  {		font-size: 24px;	font-weight: 700;	line-height: 28px;text-transform: uppercase;position: relative;}
#services2 .row .column .text {		margin-top:10px;	font-size: 16px;	line-height: 24px;}
#services2 .row .column h4::before {content: '';width: 48px;height: 48px;left:-70px;top:-1px;position: absolute;}
#services2 .row:nth-child(1) .column:nth-child(1) h4::before { height: 42px; background: url(../images/icons/video.svg) no-repeat;}
#services2 .row:nth-child(1) .column:nth-child(2) h4::before { width:31px; background: url(../images/icons/intercom.svg) no-repeat;}
#services2 .row:nth-child(1) .column:nth-child(3) h4::before { width:36px; background: url(../images/icons/lock.svg) no-repeat;}
#services2 .row:nth-child(1) .column:nth-child(4) h4::before { height: 46px; background: url(../images/icons/lightning.svg) no-repeat;}
#services2 .row:nth-child(1) .column:nth-child(5) h4::before {  background: url(../images/icons/radio.svg) no-repeat;}
#services2 .row:nth-child(1) .column:nth-child(6) h4::before { width:44px;background: url(../images/icons/streetlight.svg) no-repeat;}


#clients,#docs {padding:90px 0;}
#clients h3,#docs h3,article h1  {	color: #2C2C2C;	font-family: "Roboto Condensed";	font-size: 50px;	font-weight: 700;	letter-spacing: 0.42px;	line-height: 40px;	text-align: center;text-transform: uppercase;padding-bottom: 50px;position: relative;}
#clients .column {width:180px;margin:0 60px;}
#clients .column:last-child {margin-right: 0;}
#clients .column img {max-width: 100%;height: auto;vertical-align: middle;}

#docs .wrap {border-bottom:3px solid #FDB700;}
#docs h3::before,#docs h3::after {content: '';width:545px;height: 3px;background:#FDB700; display: inline-block;   position: relative;  vertical-align: middle; }

#docs h3:before {  right: 23px;  margin-left: -50%;}
#docs h3:after {  left: 23px;  margin-right: -50%;}

#docs .row {position: relative;}
#docs .row::before, #docs .row::after {content: ''; position: absolute;top:-67px;height:394px;width:3px;background:#FDB700;}
#docs .row::before {left:0;}
#docs .row::after {right:0;}

#contacts {margin-bottom: 150px;}
#contacts  .column:nth-child(1) {width:550px;height: 550px; background: #F6F6F6;padding:40px 50px;color:#fff;}
#contacts  .column:nth-child(2) {width: 860px;height:550px;float:right;box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.08);border-radius: 8px;padding: 40px 100px;}


#contacts h4 {	color: #9B9B9B;	font-family: "Roboto Condensed";	font-size: 50px;	font-weight: bold;	letter-spacing: 0.42px;	line-height: 40px;	text-transform: uppercase;}
#contacts  .column:nth-child(2) h4 {color: #FDB700;}
#contacts  .column:nth-child(1) {font-style: normal;font-weight: bold;line-height: 40px;font-size: 24px;color:#2C2C2C;}
#contacts  .column:nth-child(1) h4 {padding-bottom: 35px;}
#contacts  .column:nth-child(1) label {font-style: normal;font-weight: normal;line-height: 30px;font-size: 18px;display: block;color:#9B9B9B;}
#contacts  .column:nth-child(1) a {text-decoration: none;color: #FDB700;}
#contacts  .column:nth-child(1) .row {margin-bottom: 20px;}


form input[type="text"] {width:100%;border:none;background: none;border-bottom:1px solid #C4C4C4;font-style: normal;font-weight: normal;line-height: 30px;font-size: 18px;color: #000000;padding:15px 0px;cursor:pointer;resize:vertical;-webkit-appearance: none;outline: none;box-sizing: border-box;}
form .form-group{position:relative;margin:15px 0 30px;}
form .form-control-placeholder{position:absolute;top:20px;left:0;padding:10px 0 0 0px;transition:all 200ms;font-style: normal;font-weight: normal;line-height: 30px;font-size: 18px;cursor:pointer;color: rgba(0, 0, 0, 0.45);}
form .form-control:focus + .form-control-placeholder, form .form-control-placeholder.rsform-error,form .form-control:not(:placeholder-shown) + .form-control-placeholder{font-size:12px;color:#90a4ae;transform:translate3d(0, -100%, 0);}
form .form-control:not(:placeholder-shown) {padding-bottom:5px;}
form input[type="submit"]{margin-top:50px;}
form input::-webkit-input-placeholder {font-size:0; }
form input:-moz-placeholder { font-size:0; } 
form input::-moz-placeholder {font-size:0; } 
form input:-ms-input-placeholder { font-size:0; }


h4.item-title a {font-size: 24px;font-weight: 700;line-height: 28px;text-transform: uppercase;color:#2C2C2C;}
article .item-text {font-size: 16px;	line-height: 28px;}
article .item-text p {margin:15px 0;}
article .item-metadata,article .item-properties {color: #9B9B9B;}
article .item-text ul {margin-left:15px;}
article .item-text img {max-width:800px;width:100%;}
article .item-text a {color:#FDB700;}
.jbzoo .item-image.align-left {margin-right:50px;}
.form-group.f-usefull {display:none;}

@media only screen and (max-width:1500px){
.wrap {    width: 1200px;} 
    header nav {    margin-left:50px;}
    header nav ul li a {    margin-left: 50px;}
        #services .row .column, #services2 .row .column,#services h3 {    width: 240px;    margin: 0 80px!important;}
        #services h3 {    margin:250px 80px!important;}
    #services2 .row .column {margin:0 80px 50px 80px!important;}
	#clients .column {width:176px;margin:0 40px;}
	
		#docs h3::before, #docs h3::after {    width: 441px;}
    #docs .row::before, #docs .row::after {    height: 375px;}
    
    #contacts .column:nth-child(2) {    width: 650px;}


}

@media only screen and (max-width:1279px){
    .wrap {    width: 940px;} 
    header .logo {    margin-left: 20px;}
    header .phone {    margin-right: 20px;}
    header nav {    margin-left:0px;}
    header nav ul li a {    margin-left: 25px;}
    
    #services .row .column, #services2 .row .column,#services h3 {    width: 213px;    margin: 0 50px!important;}
    #services2 .row .column {margin:0 50px 50px 50px!important;}
    #services .row .column h4, #services2 .row .column h4 {    font-size: 22px;}
    #services h3 {    font-size: 50px;margin:250px 50px!important;}
    #clients, #docs {    padding: 40px 0;}
    #clients .column {width:120px;margin:0 40px;}

	#docs h3::before, #docs h3::after {    width: 310px;}
    #docs .row::before, #docs .row::after {    height: 307px;}
    
    #contacts .column:nth-child(1) {width:400px;}
    #contacts .column:nth-child(2) {width:540px;padding: 40px 50px;}
    #contacts h4 {    font-size: 45px;}
  
    }



@media only screen and (max-width:959px){
     .wrap {    width: 720px;} 
      .inner header {    height: 175px;}
     header .wrap {    height: 135px;}
     header .logo {    margin-left: 35px;}
	 header .phone {    margin-right: 35px;}
     header nav {float:left;}
     header nav ul li a {    margin-left: 35px;}
     header nav ul li a:hover::after {    bottom: -20px;}
     header .block {    margin-top: 100px;}
     header .block h1 {    font-size: 50px;}
     
     #services h3 {    margin: 50px auto!important;    width: 100%;    text-align: center;}
     #services h3 span {    display: inline;}
     
     #services .row .column, #services2 .row .column {    width: 220px;    margin: 0 70px!important;}
      #services2 .row .column {    margin: 20px 70px!important;}
	#services2 {    padding: 40px 0;}
	#clients .column {    width: 100px;    margin: 0 27px;}
	#docs h3::before, #docs h3::after {    width: 201px;}
	 #docs .row::before, #docs .row::after {   top: -38px; height: 220px;}
	 #docs h3 {    padding-bottom: 20px;}
	 
	      #contacts .column:nth-child(1) {    width: 320px;     }
     #contacts .column:nth-child(2) {    width: 400px;  }
#contacts h4 {    font-size: 33px;}
     
}

@media only screen and (max-width:800px){

     .wrap {    width: 620px;} 
     header .block {    margin-top: 70px;}
     header .block h2 {     margin: 50px auto 75px;    font-size: 18px;}
     
     #services .row .column, #services2 .row .column {    width: 170px;}
     #clients .column {    width: 84px;    margin: 0 25px;}
     	#docs h3::before, #docs h3::after {    width: 150px;}
	 #docs .row::before, #docs .row::after {    height: 194px;}

	      #contacts .column:nth-child(1) {    width: 300px;     }
     #contacts .column:nth-child(2) {    width: 320px;  }
     #contacts .column:nth-child(1) {    font-size: 22px;}
	 article .jbzoo h1.title  {font-size:50px;}
	 article .jbzoo h1.item-title {font-size:50px;line-height:54px;}
}


@media only screen and (max-width:699px){
    .wrap {    width: 460px;} 
    header .logo {    margin-left: 10px;}
    header .phone {    margin-right: 10px;}
    header nav ul li a {    margin-left: 14px;font-size:17px;}
    header nav ul li:nth-child(1) a {    margin-left: 10px;}
    header .block h1 {    font-size: 30px;}
    header .block h2 {    font-size: 14px;}
    #services .row {    margin: 20px 0 0px;}
    #services .row .column, #services2 .row .column {    width: 390px;    margin: 20px 70px!important;}
    #clients .column {    width: 60px;    margin: 0 20px;}
    #clients h3, #docs h3,article .jbzoo h1.title,article .jbzoo h1.item-title {    font-size: 40px;}
    article .jbzoo h1.title {padding-bottom:0;}
    .jbzoo .item-image.align-left {margin-right:0;float:none;text-align:center;}
    .jbzoo .align-left img {margin-right:0;float:none;}
    #docs .wrap {border:none;}
    #docs h3::before, #docs h3::after, #docs .row::before, #docs .row::after {display:none}
    
     #contacts .column:nth-child(1),#contacts .column:nth-child(2) {width:100%;}

    }

@media only screen and (max-width:479px){
    .wrap {    width: 360px;} 
    header .wrap {    height: 115px;}
    header .logo img {width:150px;height:auto;}
    header nav {margin-top:20px;}
    header nav ul li a {    margin-left: 10px;font-size:15px;}
    header nav ul li a:hover::after {    bottom: -14px;}
    header .block h1 {    line-height: 50px;}
    header .block h2 {    margin: 40px auto 65px;}
    #services h3 {    margin: 20px auto!important;font-size:40px;}
    #services .row .column, #services2 .row .column {    width: 280px;}
#clients .column {    width: 160px;    margin: 0 20px 30px;}
	#clients .column:nth-child(2),#clients .column:nth-child(4) {margin-right:0;}
	#clients .column:nth-child(3) {margin-left:0;}
#clients .column:nth-child(5) {margin:0 auto;float:none;}
	#contacts h4 {    font-size: 28px;}
}

@media only screen and (max-width:399px){
    .wrap {    width: 280px;} 
    .inner header {    height: 250px;}
	header .logo {    margin: 10px 65px;}
	header .phone {    margin: 0 46px;    float: left;}
	header nav ul li {display:inline-block;}
	header nav ul li a {    font-size: 20px;margin-left:30px!important;line-height:30px;}
	header nav ul li:nth-child(2) a {    margin-left: 47px!important;}
	header .wrap {    height: 210px;}
	header nav ul li a:hover::after {    bottom: -5px;}
	header .block {    margin-top: 30px;}
	#services h3,#clients h3, #docs h3,article .jbzoo h1.title,article .jbzoo h1.item-title {    font-size: 30px;}
	article .jbzoo h1.item-title {line-height:36px;}
	#services .row .column, #services2 .row .column {    width: 210px;}
	#clients .column {    width: 120px;  }

	    #contacts .column:nth-child(1),#contacts .column:nth-child(2) {padding:20px;height: 500px;}
    #contacts .column:nth-child(2) {height:500px;}
#contacts .column:nth-child(1) {    font-size: 20px;}
form input[type="submit"] {    margin-top: 10px;}
}