@charset "windows-1251";

@font-face {
    font-family: ARBAT; /* Гарнитура шрифта */
    src: url(ARBAT.eot); /* Для IE5-8 */
    src: local(ARBAT), url(ARBAT.ttf); /* Для остальных браузеров */
   }
   
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: url(img/fon.jpg) 50% 100% no-repeat;
	-moz-background:  url(img/fon.jpg) 50% 100% no-repeat;
	-webkit-background:  url(img/fon.jpg) 50% 100% no-repeat;
	 -o-background:  url(img/fon.jpg) 50% 100% no-repeat;
	background-color: #fafafa;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ Селекторы элементов/тегов ~~ */
ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */text-indent: 20px;
	padding-right:40px;
	padding-left: 40px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
}
p{
	text-align:justify;
}
a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
	border: none;
}

/* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */
a:link {
	color:#414958;
	text-decoration: none; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */
}
a:visited {
	color: #414958;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */
	text-decoration: none;
}

/* ~~ этот контейнер окружает все остальные контейнеры DIV, задавая их ширину на процентной основе ~~ */
.container {
	width: 1100px;
	margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет. Это необязательно, если ширина контейнера составляет 100P%. */
}

/* ~~верхнему колонтитулу не задана ширина. Он растянется по всей ширине макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке~~ */
.header {
	
}

/* ~~ Информация по макету. ~~ 

1) Поля размещены только вверху и/или внизу DIV. Элементы в этом DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.

*/
.content {
	padding: 20px 0;
	background: url(img/podtekst.png) ;
}

/* ~~ Этот сгруппированный селектор выдает списки в пространстве .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 20px; /* это поле зеркально повторяет правое поле в правиле для заголовков и параграфов выше. Внизу поле помещено как граница между элементами списков, а слева ЂЂЂ как отступ. Поля можно настраивать по желанию. */
}

/* ~~ Нижний колонтитул ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
}

/* ~~ прочие классы float/clear ~~ */
.fltrt {  /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.up{
	background: url(ib/conth.png) no-repeat center;
	}
.down{
	background: url(ib/contf.png) no-repeat center;
	margin-bottom:150px;
	}

.dno{
	
	text-align:center;
	padding:20px;
	padding-bottom:50px;
	}


#mainmenu{
    position:relative;
    height:30px;
    margin:50px auto;
    padding:0;
    width:850px;
    z-index:10 /* для отображения подпунктов поверх остальных блоков */
}
#mainmenu ul, /* сбрасываем поля и отступы у списков */
#mainmenu ul ul {
	list-style:none;
    padding:0;
    margin:0;
}
#mainmenu ul {	
    clear:left;
    position:relative;
    right:50%;
    height:40px;
    float:right;
    text-align:center;
    font-family: ARBAT;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;    
}
#mainmenu ul li {	
    position:relative;
    left:50%;
    float:left;
    height:40px;
    padding:0;
    margin:0
}
#mainmenu ul li:last-child {
	border:none;
	box-shadow:none
}	
#mainmenu ul li a {
    display:block;
    color: #000;
    text-decoration: none;
    padding:13px 20px
}
#mainmenu ul li a:hover {
	background-color: #0186BA;
    background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
border-radius: 3px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	color: #000
}
#mainmenu ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}
 
/*************************** Выпадающие подпункты */
#mainmenu ul li ul {
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);    
	background: -o-linear-gradient(#444, #111);	
	background: -ms-linear-gradient(#444, #111);	
	background: linear-gradient(#444, #111);		
	border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-webkit-border-radius: 3px;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;	
	text-transform:none;
	opacity: 0;
	visibility: hidden;
    position:absolute;
    left:0;
    top:40px;
    color: #fafafa;
    font-size:12px;
	height:auto;
    width:150px    
}
#mainmenu ul li ul li {
	border:none;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-o-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    position:relative;
	left:0;
    float:none;
    height:auto;
    margin:0;
    text-align:left !important;
    color: #fafafa;
}
#mainmenu ul li ul li:last-child {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
        color: #fafafa;
}
#mainmenu ul li ul li a {
    padding:10px 8px;
    border:none;
    color: #fafafa;
}

/*************************** Выпадающие пункты второго уровня */
#mainmenu ul li ul li ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-o-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-ms-box-shadow: -1px 0 0 rgba(255,255,255,.3);
	-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);	
}

/* Стрелочки на подпунктах */
#mainmenu ul ul li:first-child > a {
	border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	-o-border-radius: 3px 3px 0 0;
	-ms-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;	
}
#mainmenu ul ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}
#mainmenu ul ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}
#mainmenu ul ul li:first-child a:hover:after {border-bottom-color: #04acec}

#mainmenu ul ul ul li:first-child a:hover:after {
	border-right-color: #0299d3; 
	border-bottom-color: transparent; 	
}
#mainmenu ul ul li:last-child > a {
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

#owl-demo .owl-item div{
  padding:5px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
/* Базовые стили модального окна  */
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color:  #FF9;
    border: 3px solid #ff9;
    display: inline-block;
    left: 30%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
	font: 14px Helvetica, Arial, Sans-Serif;
    top: 25%;
    visibility: hidden;
    z-index: 10;
	
    -webkit-transform: translate(-17%, -17%);
    -moz-transform: translate(-17%, -17%);
    -ms-transform: translate(-17%, -17%);
    -o-transform: translate(-17%, -17%);
    transform: translate(-17%, -17%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 25%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}

.popup p, .popup div {
    padding: 0px 5px 0px 5px;
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('img/loading.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}