@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700');

body {
    background-color: #34495e; 
    color: #c8c8c8; 
    font-family: 'Roboto', sans-serif; 
    font-size: 16px; 
    font-weight: 300; 
    line-height: 28px; 
    margin: 0;
    padding: 0;
}

input
{
    font-family: 'Roboto', sans-serif; 
    font-size: 19px; 
    font-weight: 300; 
    line-height: 28px; 
}

.clear {
    clear: both;
}

header {
    background: url(images/bg.jpg) 50% 0 no-repeat fixed;
    background-size: cover;
	color: #fff;
}

.wrapper {
    max-width: 1170px; 
    margin: 0 auto; 
}

#header-left {
    float: left;
    width: 60%;
}
#header-right {
    float: left;
    width: 40%;
    position: relative;
}

#header-shadow {
    background: rgba(0, 0, 0, 0.5);
}



h1 {
   margin-bottom: 30px;
   font-size: 60px;
   font-weight: 100;
   line-height: 1.1;
}

#header-left h1 {
    font-size: 72px;
    margin-top: 10px;
    line-height: 1.1;
}
#header-left h2 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 30px;
    line-height: 1.1;
}

#header-left p {
    font-size: 18px;
    margin-bottom: 70px;
    letter-spacing: 1px; /* увеличиваем межбуквенный интервал */
}


#header-left h1 strong {
    font-weight: 400;
}

header .wrapper {
    padding: 100px 15px 50px 50px;
}

#header-left h1, #header-left h2, #header-left p {
    margin-right: 40px;
}

#header-right img {
    max-width: 252px;
}

a.button-download {
    display: inline-block; /*  делаем ссылку блочным элементом, но обтекаемым другими */
    color: #fff; /* меняем цвет ссылок по умолчанию */
    border: 1px solid #fff; 
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 50px;
    padding-right: 20px;
    padding: 10px 16px; /* выставляем отступы в формате: 10px - сверху и снизу, 16px - слева и справаdisplay  */
    text-decoration: none; /* отменяем подчеркивание текста ссылки */
    background: #ffaf00;
}
a.button-download .fa {
    margin-right: 20px;
}

a.button-download:hover {
    background: #fff; /* меняем фон кнопки на белый */
    color: #111; /* меняем цвет шрифта на почти черный */
}




#navbar-top {
    min-height: 70px; 
	width:100%;
    background-color: #181b3d;
    box-shadow: 0 0px 10px rgba(0,0,0,.2); 
}
#navbar-top .logo {
    color: #fff;
    font-size: 40px;
    line-height: 40px; /* высота межстрочного интервала текста */
    font-weight: 700; 
    padding: 15px 0 15px 115px; /* внутренние отступы в формате двух значений: слева-справа, сверху-снизу */
    display: block;
    float: left; /* прижимаем логотип к краю левой части блока */
    text-decoration: none; /* отключаем подчеркивание ссылки */
	position:relative;
	transition: all 0.4s ease-in-out;
}
#navbar-top .logo img{
	position: absolute;
	background: #fff;
	border-radius: 100%;
	border: 1px solid #181b3d;
	top: -21px;
	left: -19px;
	padding: 7px;
	transition: all 0.4s ease-in-out;
	height:95px;
	width:96px;
	
}

#navbar-top menu {
    list-style: none; /* отключаем отображение маркеров */
    float: right; /* прижимаем меню к правой границе блока */
    margin: 0; /* сбрасываем внешние отступы */
    padding: 0; /* сбрасываем внутренние отступы */
}
#navbar-top menu li {
    float: left; /* чтобы пункты меню располагались в линию друг за другом */
    display: block; /* делаем пункты блочными элементами */
    padding-left: 15px;
    padding-right: 15px;
}
#navbar-top menu li a {
    color: #fff;
    font-weight: 400;
    text-decoration: none; 
    line-height: 70px; /* данный межстрочный интервал позволяет выравнить пункты меню вертикально по центру, за счет того что его значение равно высоте элемента #navbar-top  */
    display: block; /* делаем ссылки блочными элементами */
}
/* меняем цвет активных (выбранных) ссылок, а также тех на которые наведен курсор */ 
#navbar-top menu li a:hover, #navbar-top menu li.active a {
    
}




menu>li>a,menu>li
{
	transition: all 0.4s ease-in-out;
	
}

menu>li:hover
{
	background: #f0b91b;
}
menu>li.active
{
	background: #00af00;
}

#navbar-top {transition: all 0.4s ease-in-out;}
#navbar-wrapper
{
	height: 70px;
	
}

#navbar-top.fixed
{
position: fixed;
top: 0px;
opacity: 0.75;
min-height: 30px;
z-index: 9999;
box-sizing: border-box;

}
#navbar-top.fixed menu a
{
	line-height:30px;
}
#navbar-top.fixed a.logo
{
	padding:0px 0 0px 115px;
	font-size:30px;
	line-height:30px;
}


#navbar-top.fixed a.logo img
{

background: #fff;
border-radius: 100%;
top:  -10px;
width: 50px;
height:49px;
padding: 5px 5px;
transition: all 0.4s ease-in-out;
	
}



div.header {
    width: 80%; 
    margin: 0 auto; /* выравниваем блок по центру */
    text-align: center; /* выравниванием содержимое блока по центру */
}


.features {
    background: #fff; /* белый фон блока */
    padding-top: 40px;
    margin-bottom:40px;
}
.features h1 {
    color: #111; 
}
.features p {
    font-weight: 300;
    letter-spacing: 0.5px; /* увеличиваем интервал между символами в тексте */
    margin: 0 0 10px; /* внешний отступ в формате: сверху, слева-справа и снизу, т.е. по сути мы сбрасываем отступы со всех сторон, кроме низа в 10 пикселей */
    color: #222;
}


.pricing {
    background: #fff; /* белый фон блока */
    padding-top: 40px;
}
.pricing h1 {
    color: #111; 
}
.pricing p {
    font-weight: 300;
    letter-spacing: 0.5px; /* увеличиваем интервал между символами в тексте */
    margin: 0 0 10px; /* внешний отступ в формате: сверху, слева-справа и снизу, т.е. по сути мы сбрасываем отступы со всех сторон, кроме низа в 10 пикселей */
    color: #222;
}

.pricing .items
{
    display: block;
    position: relative;
    text-align: center;
    
}

.pricing .items.short .item:nth-child(n+5){display:none !important;}


.pricing .item
{
    
    display: inline-block;
    width:24.5%;
    margin:0px;
    padding:35px 10px;
    box-sizing:border-box;
    vertical-align: top;
    position: relative;

}

.pricing .plus
{
    margin: 15px auto;
    height: 70px;
    width: 70px;
    border-radius: 100%;
    background: #ccc;
    color: #fff;
    font-size: 35px;
    text-align: center;
    box-sizing: border-box;
}

.pricing .short .plus .fa-minus
{display:none;}
.pricing .full .plus .fa-plus
{display:none;}



.pricing .plus i{line-height: 70px;}
.pricing .plus:hover{background: #fff; color: 000; border:3px solid #000;}
.pricing .item:hover
{
    margin-top: -3px;
    
}
.pricing .item:hover .inner
{
    background: #ffe;
    
}

.pricing .item .inner
{
    background:#fff;
    display: block;
    width:100%;
    margin:0;
    padding:15px;
    box-sizing:border-box;
    min-height: 220px;
    position: relative;
}
.pricing .item h3
{
    text-align: center;
    color: #000;
    text-transform: uppercase;
}

.pricing .item ul
{
    text-align: left;
    list-style: none;
    margin-bottom: 30px;
}

.pricing .item li
{
   color: #000;
}
.pricing .item .disable
{
   color: #888;
}
.pricing .item li i
{
   color: #3d3;
}
.pricing .item li.disable i
{
   color: #f33;
}

.pricing .price
{
    text-align: center;
    color: #fff;
    display: block;
    position: relative;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    background: #cf0000;
    font-weight: bold;
    line-height: 70px;
    margin: -45px auto -15px auto;
}
.pricing .more
{
    bottom: 5px;
    width: 100%;
    color: #fff;
    font-size: 19px;
    position: relative;
    
}
.pricing .more div
{
    padding: 10px;
    cursor: pointer;
    margin: -35px -25%;
    display: block;
    position: absolute;
    left: 50%;  
}

#egais.pricing .more div {
    padding: 10px;
    cursor: pointer;
    margin: -25px -18%;
    display: block;
    position: absolute;
    left: 50%;
}

.pricing .more i
{
    height:25px;
    width:25px;
}
.contact {
    background: #fff; /* белый фон блока */
    padding-top: 40px;
    position: relative;
}
.contact h1 {
    color: #111; 
}
.contact p {
    font-weight: 300;
    letter-spacing: 0.5px; /* увеличиваем интервал между символами в тексте */
    margin: 0 0 10px; /* внешний отступ в формате: сверху, слева-справа и снизу, т.е. по сути мы сбрасываем отступы со всех сторон, кроме низа в 10 пикселей */
    color: #222;
}

#ecp,#egais
{
    background: #F3F3FD;
}

#egais.pricing .item
{
width:33%;    
}

.underline i.fa {
    font-size: 20px; /* увеличиваем размер иконки до 20х20 пикселей */
    color: #0099FF; /* цвет иконки */
}
.underline {
    position: relative;
    font-size: 20px;
    max-width: 350px;
    margin: auto;
    margin-bottom: 60px;
}
.underline:before, .underline:after {
    background-color: #777; /* цвет фона, но в нашем случае это цвет линий  */
    position: absolute; /* абсолютное позиционирование элементов внутри .underline */
    content: ""; /* пустой контент псевдоэлементов */
    width: 150px; /* ширина псевдоэлемнета - у нас это длинна линии */
    height: 1px; /* высота псевдоэлемента - толщина линии */
    top: 50%; /* отступ сверху линии на 50% от высоты .underline (10px, потому что у .underline высота 20px) */
}
.underline:before {
    left: 0; /* прижимаем линию к левому краю .underline */
}
.underline:after {
    right: 0; /* прижимаем линию к правому краю .underline */
}






#features-list .item {
    width: 50%;
    float: left;
    position: relative;
}

#features-list .price
{
    text-align: center;
    color: #fff;
    display: block;
    position: absolute;
    border-radius: 100%;
    width: 75px;
    height: 75px;
    top:110px;
    left:110px;
    background: #cf0000;
    font-weight: bold;
    line-height: 70px;
    
}

#features-list, #features-list .item {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;	/* изменяем алгоритм расчета ширины и высоты элементов */ 
    -webkit-box-sizing: border-box; /* тоже свойство box-sizing только для FireFox */
    -moz-box-sizing: border-box; /* тоже свойство box-sizing для Safari, Chrome, Android */
}


#features-list .item .product {
    width: 150px; 
    height: 150px;
    float: left; /* прижимаем к левой границе, остальной контент обтекает справа */
    border: 1px solid #0099FF;
    text-align: center; /* выравниваем иконку внутри круга по центру */
	box-sizing: border-box;
    border-radius: 100%; /* закругляем углы на 100% - в итоге получим круг */
}
#features-list .item .text {
    margin-left: 200px;
}
#features-list .item .text h3 {
    color: #2E2E2E;
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 24px;
}
#features-list .item .text  p {
    letter-spacing: 0.5px;
    margin: 0 0 10px;
    margin-bottom: 50px;
    font-size: 16px;
}

.ymaps-2-1-56-controls__toolbar{display: none;}
.gotoymaps__text{display: none !important;}

.place_order_button, .order_components, .content a[href='#search-tariff']{display:none;}



#footer .dflex
{
    display: flex;
}

#footer {
    margin: 30px 0;
}
#footer a
{
    color:#fff;
    text-decoration: none;
    
}

#footer a:hover
{
    text-decoration: underline;
}

.column4
{
    display: inline-block;
    width: 25%;
    margin: 0;
    padding: 5px 15px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
}

.column4:last-child
{border-right:none;}

.column2
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 5px 15px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
}

.column2:last-child
{border-right:none;}


.social i
{
    display: inline-block;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    color: #fff;
    
}

.contact_form
{
    width:30%;
    background: rgba(255,255,255,0.8);
    padding: 25px 25px 0 25px;
    margin: 10px 0px;
    position: absolute;
    z-index: 99;
}
.contact_form input
{
    width: 100%;
    margin: 0 0 15px 0;
    border:1px solid #eee;
    padding: 5px;
}
.contact_form input[type=button]
{
    background: #00af00;
    color: #FFF;
    cursor: pointer;
}
.contact_form input[type=button]:hover
{
    background: #ffaf00;
    color: #FFF;
    
}
.contact_form textarea
{
    width: 100%;
    margin: 15px 0;
    border:1px solid #eee;
    padding: 5px;
    font-family: 'Roboto', sans-serif; 
    font-size: 17px; 
    font-weight: 300; 
    line-height: 28px;  
}




#map_wrapper
{
    min-height: 400px;
    background: url(/images/mapbg.png) center no-repeat;
}



#lightbox 
{
    position: fixed;
    display: none;
    z-index: 999;
    border:3px solid #ccc;
    background: #fff;
    height: 90%;
    top:5%;
    left: 10%;
    width:80%;
    right: 10%;
    padding: 25px;
    color:#000;
     z-index: 10002;
}


#filler
{
    display:none;
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10001;
}
#lightbox .content
{
    height: 100%;
    width: 100%;  
    overflow-y: scroll;
}

#lightbox .content a
{
    color: #000;
    text-decoration: none;  
}

#lightbox .content ul
{
    line-height: 20px;
}

#lightbox .close_btn {position: absolute; top: 10px; right: 10px; color: red; font-size: 19px;}