@charset "utf-8";
/* CSS Document */

html,body{
min-height:100%;
min-width:1176px;
margin:0;
padding:0;
}

body{
position:relative;
font:normal 14px/24px Arial, Helvetica, sans-serif;
color:#252525;
background-color:#bacdd4;
background: url(../img/banner_main.jpg) center 0 no-repeat;
       -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ � Chrome 4.0+ */
         -o-background-size: 100%; /* Opera 9.6+ */
            background-size: 100%; /* ����������� �������� */
box-shadow:inset 0 50px 50px 0 rgba(64,88,137,0.21);
-webkit-user-select:   none;
-moz-user-select:      -moz-none;
user-select:           none;
cursor:default;
}

body.second-body{
background:url(../img/body_bg.png) repeat;
}


a:focus,input:focus {
outline: none;
}





img {border:0;}
.clr{clear:both;overflow: hidden; height:0;}

.cell{
position:relative;
width:956px;
margin:auto;
padding:0 19px;
}
















.top{
position:relative;
margin:auto;
width:994px;
height:480px;
z-index:1;
}
.top h1{
position:absolute;
top:320px;
left:455px;
margin:0;
padding:1px 0 0;
right:19px;
color:#fff;
font:48px/54px Arial;
text-shadow:0 2px 0 #333;
overflow:hidden;
/*background:url(../img/zitat_main.png) 0 0 no-repeat;}*/
}

.second-top{
height:114px;
}
.second-top h1{
top:10px;
background:url(../img/logo_transko-second.png) 0 0 no-repeat;
}

.menu-site{
position:absolute;
top:0;
left:0;
width:100%;
padding:470px 0 0;
margin:0;
z-index:1000;
}
.second-m-s{
padding:30px 0 0;
}
.menu-site ul{
margin:0 auto;
padding:0;
height:38px;
width:994px;
white-space:nowrap;
list-style:none;
}
.menu-site li{
float:right;
text-align:center;
}
.menu-site li a{
display:block;
margin:0 20px;
padding:18px 0 0;
line-height:20px;
font-size:18px;
color:#fff;
text-shadow:0 1px 0 #333;
text-decoration:none;
/*box-shadow:inset 0 -2px 0 0 rgba(31,26,23,1.0);*/
}
.menu-site li a::first-letter{
color:#fff;
}
.menu-site li a:hover{
color:#fff;
}
.fix li a{
	text-shadow: none;
	box-shadow:none;
    color:#fff;
}
.fix li a::first-letter{
color:#fff;
}
.fix li a.active{
color:#fff;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
margin-left:0;
margin-right:0;
margin-bottom:-15px;
background:rgba(255,255,255,0.5);
}
.fix li a:hover{
color:#fff;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
margin-left:0;
margin-right:0;
margin-bottom:-15px;
background:rgba(255,255,255,0.2);
}
.fix li a.active:hover{
color:#fff;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
margin-left:0;
margin-right:0;
margin-bottom:-15px;
background:rgba(255,255,255,0.5);
}

.fix{
position:fixed;
top:0;
padding-top:0px;
padding-bottom:15px;
background: url(../img/content_bg.png) 0 -3px repeat-x, rgba(0,40,117,0.7);

-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1),inset 0px 14px 24px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1),inset 0px 14px 24px 0 rgba(255, 255, 255, 0.5); 
}

.fix2{
background: url(../img/content_bg.png) 0 -3px repeat-x, rgba(29,177,218,0.7); 
}

.fix3{
background: url(../img/content_bg.png) 0 -3px repeat-x, rgba(7,103,130,0.7); 
}




.content{
position:relative;
height:198px;
overflow:hidden;
background:url(../img/bg_logo.png) right 0 no-repeat,url(../img/streifen.png) 0 275px repeat-x;
background-color:#002875;
box-shadow:0 25px 25px 0 rgba(64,88,137,0.21),0 -25px 25px 0 rgba(64,88,137,0.21);
z-index:2;
}
.our_mission{
position:relative;
}
.our_mission h2{
position:absolute;
top:35px;
left:0;
margin:0;
padding:0;
width:670px;
font-size:20px;
line-height:30px;
color:#fff;
font-weight:600;
text-shadow:0 -1px 0 #666;
}
.our_mission h2::first-letter{
font-size:20px;
}
.our_mission p{
position:absolute;
top:96px;
left:490px;
margin:0;
padding:0;
font-size:24px;
line-height:24px;
color:#fefefe;
font-weight:400;
white-space:nowrap;
}


.info{
position:absolute;
top:155px;
left:686px;
height:200px;
width:200px;
background:rgba(255,255,255,0.8);
-webkit-border-radius: 152px;
-moz-border-radius: 152px;
border-radius: 152px;
opacity:1;
}
.monitoring{
position:absolute;
top:600px;
right:10px;
}
.car{
position:absolute;
top:230px;
left:693px;
cursor:pointer;
}


.request{
	position:absolute;
	top:364px;
	width:957px;
	height:264px;
	overflow:hidden;
	display:none;
}
.request h3{
	position:absolute;
	left:316px;
	margin:0;
	padding:0;
	width:550px;
	white-space:nowrap;
	font-size:30px;
	line-height:36px;
	font-weight:400;
	color:#c7bfaf;
    text-shadow:0 -1px 0 #666;
}
.request .tel{
	position:absolute;
	left:78px;
	top:3px;
	margin:0;
	padding:0;
	width:230px;
	font-size:24px;
	line-height:36px;
	font-weight:600;
	color:#f4f4f4;
}



.request form{
	margin:0;
	padding:0;
}
 .steps{
	position:absolute;
	left:0;
	top:66px;
	margin:0;
	padding:0;
	width:4000px;
	height:198px;
	display:none;
}

.step{
    position:relative;
	float:left;
	width:957px;
}

.none {display:none;}

.step .status{
	display:inline-block;
	width:115px;
	height:108px;
	margin:0 0 0 170px;
	vertical-align:middle;
	background:url(../img/status_bg.png) 0 0 no-repeat;
}
.step .inputs{
	display:inline-block;
	margin:0;
}
.request .step p{
    position:absolute;
	left:300px;
	bottom:0;
	margin:0 0 0 17px;
	line-height:11px;
	font-size:11px;	
	color:#F4F4F4;
}
.step input[type="text"] {
	float:left;
	padding:0 17px;
	border:0;
	height:32px;
	width:200px;
	color:#424242;
	font-size:18px;
	line-height:32px;
	box-shadow:inset 0 0 0 2px rgba(199,191,175,1),inset 0 4px 8px 0 rgba(0,0,0,0.3);
}
.step textarea {
	float:left;
	padding:17px;
	margin-top:-15px;
	border:0;
	width:300px;
	height:76px;
	resize:none;
	color:#424242;
	font-size:16px;
	line-height:18px;
	box-shadow:inset 0 0 0 2px rgba(199,191,175,1),inset 0 16px 16px 0 rgba(0,0,0,0.2),inset 0 -16px 16px 0 rgba(0,0,0,0.2);
}
.step input[type="button"]{
	float:left;
	padding:0 17px;
	border:0;
	height:32px;
	color:#424242;
	font-size:18px;
	line-height:32px;
	cursor:pointer;
	box-shadow:inset 0 0 0 2px rgba(199,191,175,1),inset 0 -4px 8px 0 rgba(0,0,0,0.3);
}


.step .more{
	float:left;
	display:inline-block;
	width:42px;
	height:32px;
	cursor:pointer;
	box-shadow:inset 0 0 0 2px rgba(199,191,175,1);
	background:#c7bfaf url(../img/arow.png) center center no-repeat;
}




.company{
	background-color:#bacdd4;
}
.company h2{
	margin:0;
	padding:55px 0 10px 0px;
	font-size:30px;
	line-height:40px;
	color:#454040;
	font-weight:400;
}
.company h2::first-letter{
font-size:30px;
}
.company .intro-pic{
	float:left;
}
.company .article-pic{
	margin-left:85px;
	float:left;
}
.company .intro{
	margin:0 0 0 0px;
}
.company .slogan{
	margin:70px 0 36px 192px;
	font-size:28px;
	line-height:24px;
	color:rgba(235, 78, 43, 0.8);
	font-weight:600;
}
.company article{
	margin:0 0 0 192px;
	display:block;
	color:#707070;
}
.company article .cell_1{
    display:inline-block;
	width:232px;
	margin:0 20px 20px 0;
	vertical-align: top;
}
.company article .cell_2{
	padding-left:35px;
}
.company article .cell_2 p{
	width:456px;
}
.company article div p:first-child{
	margin-top:0;
}
.company article div.cell_1 p{
	margin:0;
	font-size:90%;
	line-height:20px;
	padding:10px;
	background-color: rgba(0, 40, 117, 0.8);
}
.company article div.cell_1 p:last-child{
    padding-top:0;
	color:#fff;
}
.company article a img{
	opacity:0.9;
	background:#fff;
}
.company article a img:hover{
	opacity:1.0;
}
.company .separator{
	margin:75px 0 27px;
	height:3px;
	overflow:hidden;
	background:url(../img/content_bg.png) repeat-x;
}

.menu-company{
    position:absolute;
	bottom:-93px;
	left:202px;
	width:638px;
	margin:0 auto;
	padding:0;
	list-style:none;
	white-space:nowrap;
	background:url(../img/body_bg.png) repeat;
}
.menu-company li{
float:left;
}
.menu-company li a{
	position:relative;
	padding:0 30px;
	display:block;
	font-size:18px;
	line-height:36px;
    color:#1f1a17;
    text-shadow:0 1px 0 #fff;
	text-decoration:none;
}
.menu-company li a::first-letter{
color:#d01c1a;
letter-spacing:1px;
}
.menu-company li a:hover{
color:#d01c1a;
}

.second-body .menu-company{
    position:relative;
	top:0;
	left:202px;
	margin:0 auto;
	padding:0;
	list-style:none;
	white-space:nowrap;
	background:url(../img/body_bg.png) repeat;
}
.second-body .menu-company li{
float:none;
}





.banner{
	padding:80px 0 0;
	/*background:url(../img/banner_bg.png) bottom center no-repeat,url(../img/banner_bg-top.png) top center no-repeat;*/
}
#rotator_view{overflow:hidden;}

.service{
	padding-bottom:73px;
	background:url(../img/streifen.png) 0 275px repeat-x;
	background-color:#bacdd4;
	
}
.service h2{
	margin:0;
	padding:1px 0 30px 192px;
	font-size:10px;
	line-height:60px;
	color:#454040;
	font-weight:600;
}
.service h2::first-letter{
font-size:10px;
}
.service .intro-pic{
	float:left;
}
.service .intro {
    margin: 0 0 0 0px;
}
.menu-service {
    margin: 0 0 0 192px;
	padding:80px 0;
	list-style: none;
	background:url(../img/menu-service_bg.png) right  130px no-repeat;
}
.menu-service li{
    width:380px;
	margin:0 0 38px;
	color:#1db1da;
	line-height:80px;
}
.menu-service li:hover{
    box-shadow:14px 14px 0px 0px rgba(0,0,0,0.04);
}
.menu-service li a{
	display:block;
	position:relative;
	font-size:18px;
    color:#fff;
	text-decoration:none;
	margin-left:-158px;
	padding-left:192px;
	background:#1db1da;
	box-shadow:0 0 0 7px rgba(255,255,255,1);	
    opacity:0.6;
}
.menu-service li a .item_img{
position:absolute;
top:0px;
left:0px;
padding:0;
background:#fff;
border-right:41px solid #fff;
}
.menu-service a:hover{
background:#30b8de;
opacity:1;
}



.principles{
position:absolute;
top:446px;
left:254px;
margin:0;
padding:0;
font-size:14px;
line-height:24px;
color:#fae6e4;
list-style: none;
}
.principles li{
white-space:nowrap;
}
.principles-title{
position:absolute;
top:365px;
left:19px;
margin:0;
padding:0;
width:800px;
font-size:36px;
line-height:46px;
color:#fff;
font-weight:600;
text-shadow:0 -1px 0 #666;
}



.contacts{
position:relative;
height:338px;
overflow:hidden;
background:url(../img/bg_logo_left.png) left 0 no-repeat,url(../img/content_bg.png) bottom repeat-x;
background-color:#076782;
box-shadow:0 25px 25px 0 rgba(64,88,137,0.21),0 -25px 25px 0 rgba(64,88,137,0.21);
z-index:2;
}
.contacts h2{
position:absolute;
top:85px;
left:210px;
margin:0;
padding:0;
font-size:78px;
line-height:60px;
color:#C8EFFA;
font-weight:600;
text-shadow:0 -1px 0 #666;
}
.contacts h2::first-letter{
font-size:82px;
}
.contacts .intro{
position:absolute;
top:154px;
left:271px;
margin:0;
padding:0;
width:205px;
font-size:14px;
line-height:24px;
color:#fefefe;
font-weight:400;
}

.selector{
position:absolute;
top:248px;
left:0;
margin:0;
padding:0;
width:994px;
font-size:36px;
line-height:60px;
color:#62688b;
font-weight:600;
list-style:none;
}
.selector li{
	float:left;
	width:50%;
}
.selector li.moscow{
	background:url(../img/car_in-moscow.png) right 5px no-repeat,url(../img/arow_in-moscow.png) right 22px no-repeat;
}
.selector li.piter{
	text-align:right;
	background:url(../img/car_in-piter.png) left 5px no-repeat,url(../img/arow_in-piter.png) left 22px no-repeat;
}
.selector li.active{
	visibility:hidden;
}
.selector li a{
	display:block;
    color:#408a9f;
	text-decoration:none;
	text-transform:uppercase;
}
.selector li a:hover{
	color:#dff3f9;
}

.in{
	position:absolute;
	top:360px;
	left:0;
	width:994px;
	height:270px;
	overflow:hidden;
	display:none;
}
.in.active{
	display:block;
}
.in h3{
position:absolute;
top:0;
left:210px;
margin:0;
padding:0;
font-size:36px;
line-height:60px;
text-transform:uppercase;
color:#dff3f9;
font-weight:600;
}
.in .tel {
position:absolute;
top:105px;
left:30px;
margin:0;
padding:0;
font-size:18px;
line-height:36px;
text-transform:uppercase;
color:#f4f4f4;
font-weight:600;
text-align:right;
}
.in .mail-link{
text-transform:none;
color:#f4f4f4;
text-decoration:none;
border-bottom:2px solid #f4f4f4;
}
.in address {
position:absolute;
top:105px;
left:210px;
width:370px;
margin:0;
padding:0;
font-size:24px;
font-style:normal;
line-height:36px;
text-transform:uppercase;
color:#f4f4f4;
font-weight:600;
}

.in .form-title{
position:absolute;
top:-60px;
left:0;
margin:0;
padding:0;
white-space:nowrap;
font-size:30px;
line-height:36px;
color:#c7bfaf;
font-weight:400;
text-shadow:0 -1px 0 #000;
}
.in .steps{
position:absolute;
top:112px;
left:0;
margin:0 0 0 690px;
padding:0;
width:4000px;
white-space:nowrap;
}
.in .step{
	float:left;
}
.in .step .inputs{
	padding-right:100px;
}
.in .step input{
	float:left;
	margin:0;
	padding:0 17px;
	border:0;
	width:180px;
	height:42px;
	color:#424242;
	font-size:18px;
	line-height:42px;
	box-shadow:inset 0 0 0 4px rgba(199,191,175,1),inset 0 4px 8px 0 rgba(0,0,0,0.3);
}
.in .step .more{
	float:left;
	display:inline-block;
	width:42px;
	height:42px;
	cursor:pointer;
	box-shadow:inset 0 0 0 4px rgba(199,191,175,1);
	background:#c7bfaf url(../img/arow.png) center center no-repeat;
}


.map{
	width:100%;
	height:650px;
	background:url(../img/map.jpg) center center no-repeat;
       -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ � Chrome 4.0+ */
         -o-background-size: 100%; /* Opera 9.6+ */
            background-size: 100%; /* ����������� �������� */
}
.map .m{
	width:100%;
	height:650px;
	display:none;
}
.map .moscow{
}
.map .piter{
	background:#fff;
}
.map .m.active{
	display: block;
}	
	
	
/* ------- second ---------------------------------------------------------------------------------------------------------------------------------------- */
	
	
.second{
}
.second h2{
	margin:0;
	padding:85px 0 60px 0;
	font-size:78px;
	line-height:60px;
	color:#454040;
	font-weight:600;
}
.second h2::first-letter{
font-size:82px;
}
.second .intro-pic{
	float:left;
}
.second .article-pic{
	margin-left:85px;
	float:left;
}
.second .intro{
	margin:0 0 0 192px;
	min-height:152px;
}
.second .slogan{
	margin:56px 0 56px 192px;
	font-size:18px;
	line-height:24px;
	color:#da251d;
	font-weight:600;
}
.second article{
	margin:0 0 0 192px;
	display:table;
	color:#707070;
}
.second article .cell_1,.second article .cell_2{
	display:table-cell;
}
.second article .cell_1{
	width:254px;
}
.second article .cell_2{
	padding-left:35px;
}
.second article .cell_2 p{
	width:456px;
}
.second article div p:first-child{
	margin-top:0;
}
.second article div.cell_1 p{
	margin:0;
	font-size:90%;
	line-height:20px;
	padding:10px;
	background-color: rgb(194, 123, 16);
}
.second article div.cell_1 p:first-child{
	padding-top:20px;
	color:#fff;
}
.second article a img{
	opacity:0.9;
}
.second article a img:hover{
	opacity:1.0;
}
.second .separator{
	margin:75px 0 27px;
	height:3px;
	overflow:hidden;
	background:url(../img/content_bg.png) repeat-x;
}