html, body{ 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%;
    background: #007b47;
}
body{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px;
    color: #f8f8f8;
    overflow-y: hidden;
}
h1, h2, h3, h4{
    padding: 0; 
    margin: 0;
}
p{
    line-height: 20px; 
    padding: 0; 
    margin: 0 0 20px; 
}
img{ 
    border: none; 
}

@font-face {
    font-family: 'pf_dintext_promedium';
    src: url('pfdintextpro-medium-webfont.eot');
    src: url('pfdintextpro-medium-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('pfdintextpro-medium-webfont.woff') format('woff'),
         url('pfdintextpro-medium-webfont.html') format('truetype'),
         url('pfdintextpro-medium-webfont.svg#pf_dintext_promedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*header*/
#header{    
    position: relative;
    z-index: 10;
    width: 100%;    
    min-width: 1230px;    
}
#header .logo{
    position: absolute;    
    left: 20px;
    top: 20px;
}
#icon{
    position: absolute;
    z-index: 4;
    width: 100%;
    min-width: 1230px;
}
#readme{
    cursor: pointer;
    position: absolute;      
    right: 0;
    top: 25px;
    width: 157px; 
    height: 45px; 
    overflow: hidden;    
}
#readme .out{
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 157px; 
    height: 45px; 
    background: url('../img/readme2.png') no-repeat left top;
}
#readme .over{
    display: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 157px; 
    height: 45px; 
    background: url('../img/readme2.png') no-repeat left bottom;
}

/*main*/
#main{ 
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%; 
    height: 100%;    
    min-width: 1230px; 
}
.frames{ 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
.frame{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}
.box{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
    min-width: 1230px; 
    min-height: 690px; 
}
.scene{ display: none; } 

/*content*/
#content{
    position: absolute;
    width: 100%; 
    height: 100%;
    min-width: 1230px; 
    z-index: 5;    
}
.hidden{
    display: none;
}
#content_page {
	width: 900px;
	margin: 50px auto;
}

/*navigation*/
#nav{
    width: 100%;
    height: 100%;
    min-width: 1230px;
    
    position: absolute;
    left: 0;
    top: 0;
}
#prev, #next{
    position: absolute;
    z-index: 2;
    cursor: pointer;
    top: 50%;
    margin-top: -40px;
    width: 80px;
    height: 80px;    
    background: url('../img/nav.png');
    outline: none;
}
#prev{    
    left: 0;
    background-position: left top;
}
#next{
    right: 0;
    background-position: right top;
}
#prev:hover{    
    left: 0;
    background-position: left bottom;
}
#next:hover{
    right: 0;
    background-position: right bottom;
}

#tool{ 
    position: relative;
    z-index: 2;
    width: 100%;    
    min-width: 1230px; 
}
#tool .wrap{ 
    position: absolute; 
    top: -85px; 
    height: 57px; 
    width: 100%;
    overflow: hidden;
    background: #e0e1e0 url('../img/tool.png') repeat-x;
}
#panel{ 
    position: absolute; 
}
#panel ul, #panel li{
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu{
    float: left; 
    overflow: hidden;
    background: #26302c url('../img/menu.png') repeat-x;    
}
#menu li{
    float: left;
    width: 93px;
    height: 62px;   
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: url('../img/hr.png') no-repeat right;
}
#menu .bg, #menu .icon, #menu .txt{
    position: absolute;    
    width: 100%;
    height: 100%;
}
#menu .bg{
    width: 0;
    right: 0;
    background: url('../img/fill.png') repeat-x;
}
#menu .icon{
    width: 50px;
    height: 50px;
    top: 5px;
    left: 22px;    
}
#menu .txt{
    width: 100px;
    height: 50px;
    left: 75px;
    top: 3px;
    background: url('../img/txt.png') no-repeat;
}
#menu .txt1{ background-position: 0 0; }
#menu .txt2{ background-position: 0 -50px; }
#menu .txt3{ background-position: 0 -100px; }
#menu .txt4{ background-position: 0 -150px; }
#menu .txt5{ background-position: 0 -200px; }
#menu .txt6{ background-position: 0 -250px; }
#menu .txt7{ background-position: 0 -300px; }
#menu .txt8{ background-position: 0 -350px; }
#menu .txt85{ background-position: 0 -400px; }
#menu .txt9{ background-position: 0 -450px; }
.green{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/icons.png') no-repeat;
}
.white{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../img/icons.png') no-repeat;
}
.i1.green{ background-position: 0 0; }
.i2.green{ background-position: -50px 0; }
.i3.green{ background-position: -100px 0; }
.i4.green{ background-position: -150px 0; }
.i5.green{ background-position: -200px 0; }
.i6.green{ background-position: -250px 0; }
.i7.green{ background-position: -300px 0; }
.i8.green{ background-position: -350px 0; }
.i85.green{ background-position: -400px 0; }
.i9.green{ background-position: -450px 0; }


.i1.white{ background-position: 0 -50px; }
.i2.white{ background-position: -50px -50px; }
.i3.white{ background-position: -100px -50px; }
.i4.white{ background-position: -150px -50px; }
.i5.white{ background-position: -200px -50px; }
.i6.white{ background-position: -250px -50px; }
.i7.white{ background-position: -300px -50px; }
.i8.white{ background-position: -350px -50px; }
.i85.white{ background-position: -400px -50px; }
.i9.white{ background-position: -450px -50px; }


#menu .current .bg{
    left: 0;
}

#social{
    float: left;
    position: relative;
    left: -1px;
    background: #e0e1e0 url('../img/tool.png') repeat-x;
}
#social li{
    float: left;
    width: 65px;
    height: 57px;
    background: url('../img/sep.png') no-repeat left center;
}
#social a{
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/social.png');
}
#social .facebook{ background-position: left top; }
#social .facebook:hover{ background-position: left bottom; }
#social .photo{ background-position: right top; }
#social .photo:hover{ background-position: right bottom; }
/*#social .vk{ background-position-x: 76px; background-position-y:0px;}
#social .vk:hover{background-position-y:60px;}*/
#social .vk{ background-position-x: 140px; background-position-y:0px;}
#social .vk:hover{background-position-y:60px;}
#social .hot{ background-position-x: 76px; background-position-y:0px;}
#social .hot:hover{background-position-y:60px;}
#phone{ position: absolute; right: 0; }

/*footer*/
#footer{ 
    position: relative;
    z-index: 4;
    width: 100%;
    min-width: 1230px; 
}
#footer .wrap{ 
    position: absolute; 
    top: -28px; 
    height: 28px; 
    width: 100%; 
    background: white url('../img/footer.png') repeat-x;
}
#footer span, #footer a{
    font-family: 'arial narrow', arial;
    font-weight: bold;
    font-size: 10px;
    font-stretch: ultra-condensed;
    text-transform: uppercase;
    text-decoration: none;    
    line-height: 28px; 
    color: #a5b0ac; 
    border-left: solid 1px #d9dcdc; 
    margin-left: -1px; 
    padding: 0 15px;
}

/*backgrounds*/
#bg{ 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    min-width: 1230px; 
    overflow: hidden;
    background: #007b47;     
}
#bg img{ 
    display: block; 
    position: absolute; 
    width: 100%;
    height: 100%;
}


/*text pages*/
#bg2{
    position: absolute; 
    width: 100%; 
    height: 100px; 
    background: #00a249;
}
#close{
    position: absolute; 
    top: 30px; 
    right: 30px; 
    cursor: pointer;
    width: 40px; 
    height: 40px; 
    background-image: url('../img/close.png'); 
    background-repeat: no-repeat; 
    background-position: left top;
}
#close:hover{
    background-position: left bottom;
}
#content .wrap{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background: #27312e; 
}
#pages{ 
    /*width: 816px; ch2017*/
	width: 86px;
    height: 480px; 
    position: absolute; 
    left: 50%; 
    /*margin-left: -290px; ch2017*/
	margin-left: -290px; 
    top: 50%; 
    margin-top: -180px; 
}
#scrollable{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
}
.page{ 
    /*width: 816px; ch2017*/
	width: 816px;
    height: 480px; 
    position: absolute; 
}
.title{ 
    margin: 0 0 40px; 
    border-bottom: solid 1px #323b38; 
}
.title h2{ 
    margin: 0 0 -9px; 
    font-size: 36px; 
    line-height: 40px; 
    font-weight: normal; 
    color: #f8f8f8; 
}
.title span{ 
    background: #27312e; 
    padding-right: 18px; 
}
.text{ 
    width: 100%; 
    overflow: hidden; 
}
.text .node{ 
    float: left; 
    width: 345px; 
    margin-right: 60px; 
}
.style1{ 
    font-size: 20px; 
    color: #00ad74; 
    line-height: 26px; 
}

.use{
    cursor: pointer;
    position: relative;
    left: -30px;
    margin: -20px auto 0;
    width: 128px; 
    height: 69px;
    background-image: url('../img/use.png');
    background-repeat: no-repeat;
    background-position: left top;
}
.use:hover{
    background-position: left bottom;
}

#menu2, #menu2 li{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}
#menu2{ 
    position: absolute; 
    top: 50%; 
    margin-top: -115px; 
    height: 236px; 
    cursor: pointer; 
}
#menu2 li{ 
    height: 59px; 
    width: 58px; 
    background-image: url('../img/menu2.png'); 
    background-position: no-repeat; 
}
#tab1{ background-position: 0 0; }
#tab2{ background-position: 0 -59px; }
#tab3{ background-position: 0 -118px; }
#tab4{ background-position: 0 -177px; }
#tab1.current{ background-position: -58px 0; }
#tab2.current{ background-position: -58px -59px; }
#tab3.current{ background-position: -58px -118px; }
#tab4.current{ background-position: -58px -177px; }

#menu2 .txt{ 
    display: none; 
    height: 59px; 
    width: 58px; 
    background-image: url('../img/menu2_hover.png'); 
    background-repeat: no-repeat; 
}
#tab1 .txt{ background-position: 100% 0; }
#tab2 .txt{ background-position: 100% -59px; }
#tab3 .txt{ background-position: 100% -118px; }
#tab4 .txt{ background-position: 100% -177px; }

#nav2{ 
    position: absolute; 
    width: 100%; 
}
#nav2comp{ 
    position: absolute; 
    width: 100%; 
}
#prev2, #next2{
    position: absolute; 
    width: 40px; 
    height: 40px; 
    top: 208px; 
    cursor: pointer; 
    background: url('../img/nav2.png') no-repeat; 
}
#prev2comp, #next2comp{
    position: absolute; 
    width: 40px; 
    height: 40px; 
    top: 208px; 
    cursor: pointer; 
    background: url('../img/nav2.png') no-repeat; 
}
#prev2{ 
    left: -70px; 
    background-position: left top; 
}
#prev2comp{ 
    left: -70px; 
    background-position: left top; 
}
#next2{
    right: -70px; 
    background-position: right top; 
}
#next2comp{
    right: -70px; 
    background-position: right top; 
}
#prev2:hover{ 
    background-position: left bottom; 
}
#prev2comp:hover{ 
    background-position: left bottom; 
}
#next2:hover{ 
    background-position: right bottom; 
}
#next2comp:hover{ 
    background-position: right bottom; 
}

#content h3{ 
    margin: 0 0 12px; 
    font-size: 16px; 
    text-transform: uppercase; 
    color: #f8f8f8; 
}

.text ul, .text li{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}
.text ul{ 
    color: #f8f8f8; 
    line-height: 20px; 
}
.text li{ 
    background: url('../img/marker.png') no-repeat 0 9px; 
    padding-left: 42px; 
    margin: 0 0 22px; 
}

#subpages{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}
#subpages .clip{ 
    width: 100%; 
    overflow: hidden; 
    margin: 0 0 10px; 
}
#slides{ 
    width: 100%; 
    overflow: hidden; 
    width: 1632px; 
    position: relative; 
    left: 0; 
}
#slidescomp{ 
    width: 100%; 
    overflow: hidden; 
    width: 1632px; 
    position: relative; 
    left: 0; 
}

.subpage{ 
    float: left; 
    width: 816px; 
}

#bullets{ 
    position: absolute; 
    left: 50%; 
    margin-left: -50px; 
}
#bulletscomp{ 
    position: absolute; 
    left: 50%; 
    margin-left: -50px; 
}
#bullets .bullet{ 
    width: 16px; 
    height: 16px; 
    float: left; 
    margin: 0 3px 0 0; 
    background: url('../img/bullets.png') no-repeat left bottom; 
    cursor: pointer; 
}
#bulletscomp .bullet{ 
    width: 16px; 
    height: 16px; 
    float: left; 
    margin: 0 3px 0 0; 
    background: url('../img/bullets.png') no-repeat left bottom; 
    cursor: pointer; 
}
#bullets .bullet.current{ 
    background-position: left top; 
    cursor: default; 
}
#bulletscomp .bullet.current{ 
    background-position: left top; 
    cursor: default; 
}

.nodes{ 
    width: 100%; 
    overflow: hidden;
}
.subpage .node.first{
    margin-left: -40px; 
    border: none; 
}
.subpage .node{ 
    float: left; 
    width: 33%; 
    border-left: solid 1px #323c39; 
    padding-bottom: 500px; 
    margin-bottom: -500px; 
}
.subpage .node.merge{ 
    width: 66%; 
}
.subpage .txt{ 
    padding: 0 40px; 
}
.subpage img{ 
    display: block; 
}

/*add text*/
.subpage .node50 .first{
    margin-left: -40px; 
    border: none; 
}
.subpage .node50{ 
    float: left; 
    width: 49%; 
    border-left: solid 1px #323c39; 
    padding-bottom: 500px; 
    margin-bottom: -500px; 
}
.subpage .node50 .merge{ 
    width: 98%; 
}

/*popups*/
#pop1, #pop2, #pop3{
    position: absolute;
    height: 308px;
    width: 237px; 
    top: 0; 
}
#pop1{ left: 18%; }
#pop2{ left: 40%; }
#pop3{ left: 62%; }

#pop4{
    position: absolute; 
    left: 20%; 
    margin-left: -100px; 
    top: 252px; 
}
#pop5{ 
    position: absolute; 
    left: 60%; 
    margin-left: -100px; 
    top: 40px; 
}
#pop6{ 
    position: absolute; 
    left: 85%; 
    margin-left: -100px; 
    top: 156px;
}
#pop7{ 
    position: absolute; 
    left: 60%; 
    margin-left: -50px; 
    top: 440px;
}
#pop8{ 
    position: absolute; 
    left: 40%; 
    margin-left: -50px; 
    top: 440px;
}
#pop8 a{text-decoration:none;}

#pop9{ 
    position: absolute; 
    left: 30%; 
    margin-left: -50px; 
    top: 40px;
}
#pop9 a{text-decoration:none;}

#alert1{ left: -35px; top: -150px; }
#alert2{ left: -35px; top: -20px; }
#alert3{ left: -35px; top: -40px; }
#alert4{ left: -35px; top: -250px; }

.pop, .pop2{    
    cursor: default;
}
.pop-hover, .pop-hover2{
    z-index: 2;
    position: absolute;
}
.pop-target, .pop-target2{
    position: absolute;            
    width: 273px;
    top: 25px; 
    left: -15px;
}
.pop-target2{
    overflow: hidden;
	z-index: 1000;
}
.view{
    background: #303c38;
    min-height: 384px;
    position: absolute;
    bottom: 0;
}
.view2{
    background: #f8f8f8;
}
.view h4, .view2 h4{
    border-bottom: solid 1px #45504c; 
    background: url('../img/arr1.png') no-repeat right bottom;
    margin: 0 0 20px; 
    padding: 13px 10px 13px 0; 
    font-size: 12px; 
    text-transform: uppercase;
}
.view2 h4{
    color: #2b3632;
    border-bottom: solid 1px #e3e3e3;
    background: url('../img/arr2.png') no-repeat right bottom;
}        
.view p, .view2 p{
    font-size: 13px;
}
.view2 p,
.view2 div
{
    color: #2b3632;
}
.view{
    padding: 25px;
}
.view2 .padding{
    padding: 0 25px 25px;
}

/*calculator*/
#calc{ 
    width: 784px; 
    position: absolute; 
    left: 50%; 
    margin-left: -392px; 
    top: 114px; 
    border-radius: 4px; 
}
#calc .head{ 
    background: #242e2b url('../img/calc.png') 23px center no-repeat; 
	width: 784px;
    height: 76px; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
}
#calc .cont{ 
    width: 100%; 
    overflow: hidden; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px;
}
.inputdata{ 
    float: left; 
    width: 50%; 
	height: 342px;
    padding-bottom: 500px;
    margin-bottom: -500px; 
    border-top: solid 1px #04774a; 
    background: #005c47; 
}
#calc input.error {
	color: #242E2B;
	background: #FFD862;
}
#calc .error_msg {
	display: none;
	position: absolute;
	width: 250px;
	margin: 4px 0 0 380px;
	color: #FFD862;
}
.calc_index {
	position: absolute;
	right: 23px;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 11px;
    color: #0a8664;
    font-weight: bold;
}
#result_error {
	display: none;
	text-align: center;
}
.outdata{ 
    float: left; 
    width: 50%; 
    padding-bottom: 500px; 
    margin-bottom: -500px;
    border-top: solid 1px #04774a; 
    background: #006a4d;
	overflow: hidden;
}
.inputdata .td{ 
    border-bottom: solid 1px #0b6851; 
    padding: 11px 24px 8px; 
    position: relative; 
}
.inputdata .td.last{ 
    border-bottom: none; 
}
#calc label{ 
    display: block; 
    text-transform: uppercase; 
    font-size: 11px; 
    line-height: 11px; 
    color: #0a8664; 
    font-weight: bold; 
}
.input input{ 
    width: 340px; 
    padding: 0 5px; 
    margin: 0 0 0 -5px; 
    font-family: 'arial narrow', arial;
    font-size: 26px;
    background: none; 
    border: none; 
    color: #f8f8f8; 
    outline: none; 
    border-radius: 4px; 
}
.input_dd {
    width: 340px; 
    height:30px;
    background: url(../img/arr3.png) right 12px no-repeat !important;
    overflow:hidden;
}
.input select{
    width: 380px; 
    height:30px;
    padding: 0px; 
    margin: 0 0 0 0px; 
    font-family: 'arial narrow', arial;
    font-size: 26px;
    background: transparent;
    border: none; 
    color: #f8f8f8; 
    outline: none; 
    border-radius: 0px; 
    border-image-width:0px;
    -webkit-appearance: none;
    background-color:#005C47;
}

.input select:focus{
    color:#FFD862;
}

.input select option{ 
    font-size:16px;
    background:#005C47;
    border:none;
    padding:3px;
}
/*.input input:focus{ background: #017757; }*/
#selector{ 
    cursor: pointer; 
    font-family: 'arial narrow', arial;
    font-size: 26px;
    background-image: url('../img/arr3.png');
    background-repeat: no-repeat;
    background-position: right 12px;
}
#selector:hover{
    background-position: right -21px;
}
.submit{ 
    padding: 2px 23px 0; 
    margin: 0 0 15px;    
}
.submit input{
    border: none; 
    cursor: pointer; 
    width: 354px; 
    height: 49px; 
    background-image: url('../img/submit.png'); 
    background-repeat: no-repeat; 
    background-position: left top;
}
.submit input.focus, .submit input:focus, .submit input:hover{
    background-position: left -49px;
}
.submit input:active{
    background-position: left bottom;
}
#calc_loader {
	display: none;
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -35px 0 0 230px;
    background-image: url('../img/ajax-loader.gif'); 
}

#products{ 
    display: none; 
    position: absolute;
    overflow: hidden;
    width: 392px; 
    background: #005c47; 
    top: -34px; 
    left: 0; 
}
#products ul, .products li{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}
#products ul{ 
    font: 18px arial; 
    line-height: 22px; 
}
#products li{ 
    padding: 17px 22px; 
    background: url('../img/border.png') repeat-x top; 
    cursor: pointer; 
    position: relative; 
}
#products li:hover{ 
    background: #044e3d url('../img/border-hover.png') top repeat-x; 
    border-right: solid 1px #044c3b; 
    margin-bottom: -1px; 
    padding-bottom: 18px; 
    z-index: 1; 
}
#products li:first-child{ background-image: none; }

.outdata .td{
    border-bottom: dashed 1px #2e7b66;
    margin: 0 90px 0 24px;
    padding: 18px 0 18px 60px;
    background-image: url('../img/tariff_icons.png');
    background-repeat: no-repeat;
}
.td1{ background-position: 0 24px; }
.td2{ background-position: 0 -77px; }
.td3{ background-position: 0 -182px; }
.outdata big{
    font-family: 'pf_dintext_promedium', arial;
    font-size: 50px;
    line-height: 50px;
}
.outdata small{
    position: relative;
    margin-left: 5px;
    margin-top: 6px;
}
#calc .info{
    padding: 15px 24px; 
    text-transform: uppercase; 
    color: #429676;
    font-family: 'arial narrow', arial;
    font-size: 10px;
    font-weight: bold;
}

#calc .info a:link, #calc .info a:visited{
    color: #429676;
    text-decoration:underline;
}

#calc .info a:hover, #calc .info a:active{
    color: #ffffff;
    text-decoration:underline;
}

/*contacts*/
#offices{ 
    position: absolute;
    width: 472px; 
    left: 37px; 
    bottom: 130px; 
}
.office{ 
    position: absolute;
    width: 472px;
    z-index: 1; 
    left: 0; 
    bottom: 0; 
    display: none;  
    background: white; 
} 
.office.current{ 
    display: block; 
}
.office .head{ 
    font: 20px arial; 
    padding: 0 20px; 
    line-height: 60px; 
    cursor: pointer; 
    line-height: 60px; 
    background: url('../img/head.png');
}
.office .cont{ 
    color: #2d3834; 
}
.office address{ 
    font: 18px arial; 
    padding: 22px 0 15px; 
    margin: 0 20px; 
    border-bottom: solid 1px #eaebea; 
}
.office .info{ 
    width: 100%; 
    overflow: hidden; 
}
.office .phone{ 
    padding: 18px 0; 
    float: left; 
    width: 220px; 
    margin-left: 22px; 
}
.office .info small{ 
    display: block; 
    margin: 0 0 2px; 
    font-family: 'arial narrow', arial;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase; 
}
.office .info big{ 
    display: block; 
    font: 24px arial;
}
.office .info .mail{ 
    padding: 18px 0; 
    float: right; 
    width: 185px; 
}
.office .info .mail a{ 
    font: 18px arial; 
    color: #2a902e; 
}

#selector2{ 
    position: absolute; 
    width: 100%; 
    overflow: hidden; 
    left: 0; 
    bottom: 30px; 
    z-index: 2; 
    display: none; 
}
#selector2 ul, #selector2 li{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}
#selector2 ul{ 
    background: #0d9b56; 
}
#selector2 li{ 
    cursor: pointer; 
    padding: 18px 20px; 
    font: 22px arial; 
    color: #63d290;
    background: url('../img/border2.png') repeat-x top; 
    position: relative; 
}
#selector2 li:first-child{ 
    background: none; 
}
#selector2 li.current{ 
    color: white; 
}
#selector2 li:hover{ 
    z-index: 1; 
    margin-bottom: -2px; 
    padding-bottom: 20px; 
    background: #05874e url('../img/border3.png') repeat-x top; 
    color: white; 
}


/*railway*/
#railway{
    -webkit-transform: scale(1); 
    position: absolute; 
    z-index: 2; 
    width: 100%; 
    height: 100%; 
    min-height: 690px;
}
#railway .pos{    
    position: absolute; 
    top: 50%; 
    width: 100%;
}
.shadow-cistern{
    position: absolute; 
    left: 50%; 
    margin-left: -287px; 
    top: 155px;
}
#rails{
    position: absolute; 
    width: 100%; 
    height: 100px; 
    top: 170px; 
    text-align: center;
}
#rails .wrap{
    width: 1280px;
    position: relative; 
    margin: 0 auto; 
    text-align: left;
}
#rails .shadow{
    position: absolute; 
    left: 65px; 
    width: 1150px; 
    height: 77px;
}
#rails .img1, #rails .img2{
    position: absolute; 
    left: 0; 
    width: 100%;
}
#rails .extension{
    width: 1150px; 
    position: absolute; 
    left: 65px; 
    text-align: left;
}
.extension .left, .extension .right{
    width: 1000px; 
    position: absolute;
    overflow: hidden; 
}
.extension .left{                
    left: -1000px;                
    text-align: right;
}
.extension .right{
    right: -1000px; 
}
.rails_left, .rails_right{
    width: 100%; 
    height: 77px; 
}
.rails_left{                
    background: url('../img/rails_left.png') repeat-x right top;
}
.rails_right{
    background: url('../img/rails_right.png') repeat-x left top;
}
#cistern{
    z-index: 2; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-top: -29px; 
    margin-left: -270px;
}

/*scenes objects*/
.frames h1{ position: absolute; left: 50%; margin-left: -260px; top: 15%; margin-top: -60px; width: 505px; padding: 20px 0; border: solid 7px white; font-size: 32px; text-align: center; }
#pr{ position: absolute; left: 50%; width: 300px; margin-left: -150px; top: 25%; margin-top: 65px; text-align: center; text-transform: uppercase; font-family: "arial narrow", arial; font-size: 11px; font-weight: bold; color: #006a4a; }
#dash{ margin: 15px auto 0; width: 37px; border-top: solid 2px #006a4a; }

.light{ position: absolute; right: 10%; margin-right: -95px; top: 50%; margin-top: 190px; }
.pillar{ position: absolute; left: 20%; margin-left: -30px; top: 50%; margin-top: 190px; }

/*scene1*/
#tower2{ position: absolute; left: 15%; top: 15%; margin-top: 30px; width: 21%; min-width: 339px; max-width: 407px; }
#tower3{ position: absolute; left: 70%; margin-left: -120px; top: 5%; margin-top: 195px; width: 9%; min-width: 146px; max-width: 172px; }
#tower4{ position: absolute; left: 80%; top: 10%; margin-left: -140px; margin-top: -55px; width: 34%; min-width: 548px; max-width: 652px; }
#tower{ position: absolute; left: 0; top: 20%; margin-top: -120px; width: 28%; min-width: 454px; max-width: 537px; }
#octo2{ position: absolute; left: 75%; top: 35%; margin-top: 37px; margin-left: -55px; width: 12%; min-width: 197px; max-width: 230px; }
#man1{ position: absolute; left: 10%;  margin-left: -15px; top: 45%; margin-top: 53px; width: 7%; min-width: 114px; max-width: 134px; }
#octo1{ position: absolute; left: 12%; margin-left: -87px; bottom: 63px; width: 22%; min-width: 358px; max-width: 422px; }
#stavrolen{ position: absolute; left: 13%; margin-left: -87px; bottom: 148px; width: 22%; min-width: 358px; max-width: 422px; text-align:center; color:#404; font-weight:bold; font-size:15pt;-webkit-filter:opacity(0.6);}
#stavrolen:hover{ -webkit-filter:opacity(0.8);}
/*#octo1{ position: absolute; left: 45%; margin-left: -87px; bottom: 63px; width: 22%; min-width: 358px; max-width: 422px; }*/
#lukoil{     position: absolute; left: 8%; margin-left: -90px; bottom: 12%; margin-top: 25px; max-width: 60px;
-webkit-filter:grayscale(0.7);}
#lukoil:hover {-webkit-filter:grayscale(0);}
#lukoil,#lukoil:hover,#stavrolen,#stavrolen:hover{-webkit-transition: 1s;-moz-transition: 1s;-o-transition: 1s;transition: 1s;}

/*scene2*/
#txt0{ position: absolute; left: 50%; margin-left: -400px; top: 12%; margin-top: -10px; }
#txt1{ position: absolute; left: 50%; margin-left: -400px; top: 12%; margin-top: 22px; }
#txt2{ position: absolute; left: 50%; margin-left: -400px; top: 12%; margin-top: 220px; }
#txt3, #circle1, #circle2{ position: absolute; left: 50%; margin-left: -425px; top: 12%; margin-top: 270px; }
#circle1, #circle2{ opacity: 0; width: 118px; height: 118px; }
#circle1{ background: url('../img/circle.png') top; }
#circle2{ background: url('../img/circle.png') bottom; }
#octo4{ position: absolute; left: 45%; margin-left: 265px; top: 10%; margin-top: 160px; width: 7%; min-width: 127px; max-width: 134px; }
#stack2{ position: absolute; left: 70%; margin-left: 10px; top: 20%; margin-top: 200px; width: 12%; min-width: 206px; max-width: 245px; }
#stack{ position: absolute; left: 20%; margin-left: -190px; top: 30%; margin-top: 200px; width: 9%; min-width: 155px; max-width: 172px; }
#octo3{ position: absolute; left: 90%; margin-left: -260px; bottom: 48px; width: 20%; min-width: 321px; max-width: 384px;}

/*scene3*/
#worldmap{ position: absolute; left: 50%; margin-left: -537px; top: 10%; margin-top: -117px; }
#worldmap_cities{ position: absolute; left: 50%; margin-left: -537px; top: 10%; margin-top: -117px; opacity: 0; }
#txt4{ position: absolute; left: 50%; margin-left: 2000px; top: 166px; top: 10%; margin-top: 97px; }
#octo6{ position: absolute; left: 20%; margin-left: -50px; top: 20%; margin-top: 95px; width: 7%; min-width: 125px; max-width: 134px; }
#octo5{ position: absolute; left: 80%; margin-left: -85px; top: 45%; margin-top: -37px; width: 14%; min-width: 232px; max-width: 268px; }
#stack3{ position: absolute; left: 20%; margin-left: -80px; top: 40%; margin-top: 50px; width: 16%; min-width: 271px; max-width: 307px; }
#octo7{ position: absolute; left: 5%; margin-left: -110px; bottom: 48px; width: 22%; min-width: 366px; max-width: 422px; }

/*scene4*/
#semafor{ position: absolute; left: 50%; margin-left: -200px; top: 45%; margin-top: -45px; width: 5%; min-width: 87px; max-width: 96px; }
#octo9{ position: absolute; left: 15%; margin-left: -160px; top: 30%; width: 17%; min-width: 282px; max-width: 326px; }
#stack4{ position: absolute; left: 62%; top: 40%; margin-top: 90px; width: 10%; min-width: 167px; max-width: 192px; }
#octo8{ position: absolute; left: 10%; margin-left: -100px; bottom: 48px; width: 23%; min-width: 377px; max-width: 441px; }
#light2{ position: absolute; left: 80%; margin-left: -30px; bottom: 48px; width: 15%; min-width: 249px; max-width: 288px;}

/*scene5*/
#station{ position: absolute; left: 50%; margin-left: -475px; top: 97px; width: 60%; min-width: 972px; max-width: 1152px; }
#car{ position: absolute; left: 20%; margin-left: -250px; top: 35%; margin-top: 100px; width: 22%; min-width: 363px; max-width: 422px; }
#car2{ position: absolute; left: 90%; margin-left: -260px; top: 15%; margin-top: 120px; width: 37%; min-width: 594px; max-width: 710px; }
#octo10{ position: absolute; left: 90%; margin-left: -90px; top: 35%; margin-top: 25px; width: 11%; min-width: 189px; max-width: 211px; }
#tractor{ position: absolute; left: 80%; margin-left: -310px; bottom: 48px; width: 25%; min-width: 415px; max-width: 480px; }

/*scene6*/
#octo12{ position: absolute; left: 25%; margin-left: -185px; top: 20%; margin-top: 75px; width: 8%; min-width: 137px; max-width: 153px; }
#octo13{ position: absolute; left: 80%; margin-left: -70px; top: 35%; margin-top: 0; width: 15%; min-width: 248px; max-width: 288px; }
#stack5{ position: absolute; left: 60%; margin-left: -200px; top: 40%; margin-top: 100px; width: 15%; min-width: 252px; max-width: 288px; }
#octo11{ position: absolute; left: 10%; margin-left: -115px; bottom: 48px; width: 22%; min-width: 354px; max-width: 422px; }


/*counter*/
#counter{
    position: absolute; 
    width: 800px; 
    left: 50%; 
    margin-left: -400px; 
    top: 12%; 
    margin-top: 24px;
}
.num{
    position: relative;
    float: left;
    width: 102px; 
    height: 148px; 
    background: #006146; 
    margin-right: 12px;
    overflow: hidden;    
    font-family: 'pf_dintext_promedium', arial;
    font-size: 136px;
    line-height: 148px;
    text-align: center;                    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.from, .to, .eight, .seven{ 
    position: absolute; 
    width: 102px; 
    height: 148px;                        
}
.to, .eight, .last .from{
    top: 148px;
}   

/*worldmap*/
#cities,
#cities_down {
    position: absolute; 
    left: 50%; 
    margin-left: -537px; 
    top: 10%; 
    margin-top: -117px; 
    width: 1060px; 
    height: 506px;
}
.city_new {
	position: absolute;
	width: 12px;
	height: 12px;
    background: url('../img/city_point.png') no-repeat 0 0;
	cursor: move;
}
.city_new:hover {
	width: auto;
	height: auto;
	padding-top: 12px;
}
.city:hover .buttons {
	width: 150px;
	padding-top: 12px;
}
.city:hover .buttons a,
.city_new:hover .buttons a {
	display: inline-block;
}
.city .buttons a,
.city_new .buttons a {
	position: relative;
	display: none;
	margin-right: 2px;
	padding: 0 3px;
	color: #333;
	font-size: 11px;
	background: #fafafa;
	border-radius: 3px;
	text-decoration: none;
	z-index: 9999;
}
.city .buttons a:hover,
.city_new .buttons a:hover {
	background: #ccc;
}
.city {
	opacity: 0;
	width: 12px;
	height: 12px;
}
.all_visible#cities .city {
    background: url('../img/city_point.png') no-repeat 0 0;	
}
#cities_down .city {
	opacity: 0;
	width: 12px;
	height: 12px;
    background: url('../img/city_point.png') no-repeat 0 0;	
}
.city.hover{
    background: url('../img/city.png') no-repeat;
}
.city .alert{    
    opacity: 0;
    margin-left: -2000px;
	z-index: 1000;
    /*-webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease; */
}
.city.hover .alert{
    margin-left: 0;
    opacity: 1;     
}
.city{
    position: absolute;
    width: 13px; 
    height: 13px;
}
#cities .alert_in{
	min-width: 50px;
    max-width: 300px;
    min-height: 34px;
	max-height: 250px;
	margin-bottom: 11px;
    background: #103820;
	oveflow: hidden;
}
#cities .alert{
    position: absolute; 
    bottom: 15px; 
    left: 16px; 
    background: url('../img/alert_corner.png') no-repeat 0 100%;
}
#cities .txt{
    padding: 10px;  
    font-family: "arial narrow", arial; 
    font-size: 13px; 
    line-height: 13px; 
    font-weight: bold; 
    text-transform: uppercase;
}
#cities .txt p {
	margin: 0;
}
.oil_drop {
	min-height: 26px;
	margin: 0;
	padding: 8px 10px 0 48px;  
	background: url('../img/oil_drop.png') no-repeat 0 0;
}

.scroll-pane {
	width: 100%;
	overflow: auto;
	height:200px;
}
.ui-menu {
	position:absolute;
	z-index:10;
	border-radius:4px;
}
.ui-menu li {
	list-style-type:none;
	background:#006A4D;
	padding:5px;
	cursor:pointer;
}

#ui-id-1,
#ui-id-2 {
	height: 270px;
	padding-left: 0;
	padding-bottom: 20px;
	overflow-x: hidden;
	overflow-y: hidden;
	/*
	margin-left: -37px;
    margin-top: 22px;*/
}

.ui-autocomplete::-webkit-scrollbar {
    width: 12px;
}
 
.ui-autocomplete::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
.ui-autocomplete::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

#ui-id-1a:before {
	position:absolute;right:0px;top:0px;width:80px;text-align:center;padding:5px 5px 8px 5px;border-radius:3px;background:#15BD5E;color:#ffffff;content:"Начните вводить название станции отправления";
	font-size:10px;text-transform:uppercase;
}

#ui-id-2a:before {
	position:absolute;right:0px;top:0px;width:80px;text-align:center;padding:5px 5px 8px 5px;border-radius:3px;background:#15BD5E;color:#ffffff;content:"Начните вводить название станции назначения";
	font-size:10px;text-transform:uppercase;
}

.ui-menu-item:hover {
	background:#15BD5E;
}

/* ADD 2020-03-12 */
				@-webkit-keyframes fadeInUp {
					from {
						opacity: 0;
						-webkit-transform: translate3d(0, 100%, 0);
						transform: translate3d(0, 100%, 0)
					}
					to {
						opacity: 1;
						-webkit-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0)
					}
				}

				@keyframes fadeInUp {
					from {
						opacity: 0;
						-webkit-transform: translate3d(0, 100%, 0);
						transform: translate3d(0, 100%, 0)
					}
					to {
						opacity: 1;
						-webkit-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0)
					}
				}

				.a_jija {
					position: absolute;
					left: 50%;
					margin-left: -270px;
					/*border:0; */
					background-color:#17b9b6 !important; 
					background-image: url('/templates/jump/img/bg.png');					
					font-weight: bold;
					color:#ffffff;  
					top:25%;
					text-decoration: none;
					cursor: pointer;
					text-transform: uppercase;
					padding: 1rem 2.4rem;
					font-size: .94rem;
				    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
					outline: 0;		
				    visibility: visible;
					animation-name: fadeInUp;
				}
				.a_trader {
					position: absolute;
					left: 50%;
					margin-left: -270px;
					/*border:0; */
					background-color:#17b9b6 !important; 
					background-image: url('/templates/jump/img/robot_sm.png');					
					font-weight: bold;
					color:#ffffff;  
					top:25%;
					text-decoration: none;
					cursor: pointer;
					text-transform: uppercase;
					padding: 1rem 2.4rem;
					font-size: .94rem;
				    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
					outline: 0;		
				    visibility: visible;
					animation-name: fadeInUp;
				}

				/*
				.a_jija:before {
					animation-duration: 2s;
					animation-name: falre_by_button;
					animation-iteration-count: infinite;
					
					content: '';
					position: absolute;
					top: 0;
					left: -200px;
					width: 60px;
					height: 100%;
					background-color: #fff;
					filter: blur(40px);
					transform: skewX(-30deg);										
				}
				
				.a_jija:after{
					content: '';
					position: absolute;
					top: 0;
					left: -200px;
					width: 60px;
					height: 100%;
					background-color: #fff;
					filter: blur(40px);
					transform: skewX(-30deg);			
				}
*/