@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #FFF;
	background-image: url(../../../images/wp-content/bg2.png);
	background-repeat: repeat;
	background-attachment:fixed;
}
/* ~~ Селекторы элементов/тегов ~~ */
ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
	padding-right: 15px;
	padding-left: 15px;
	text-align: left;
	font-size: 16px;
	color: #000;
}
h5 {
	color: #03C;
}
strong {
	color: #03C;
}
.container .content p strong {
	color: #06C;
}
h5 {
	color: #F00;
}
h6 {
	color: #F00;
}
a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
	border: none;
}

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

/* ~~ этот контейнер окружает все остальные контейнеры DIV, задавая их ширину на процентной основе ~~ */
.container {
	opacity:0.98;
	width: 90%;
	max-width: 1260px;/* желательно задать максимальную ширину, чтобы макет не стал слишком широким на большом экране. Это повышает удобство чтения строк. В IE6 это объявление не соблюдается. */
	min-width: 780px;
	margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет. Это необязательно, если ширина контейнера составляет 100 %. */
	background-color: #FFF;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;
}

/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */
.header {
	/*background-image: url(../../../images/wp-content/head.jpg);*/
	background: -webkit-linear-gradient(270deg,#000 0,#555 100%);
	background: linear-gradient(180deg,#000 0,#555 100%);
	background-size:cover;
	position:relative;
	height:160px;
	display:block;
}
.header_center{
	position:absolute;
	z-index:1;
	top:50%;
	transform:translateY(-50%);
	right:35%;
	padding:0;
	width:28%;

}
.header_center a{
	background-color: #FFFE05;
	text-align: center;
	position: relative;
	display: block;
	text-decoration: none;
	color:#000;
	padding: 10px;
	border-radius:5px;
	font-weight: bold;
	animation: animprice 2s ease-in-out 5s normal none infinite running;
	-webkit-box-shadow: 0 2px 5px #000;
	-moz-box-shadow: 0 2px 5px #000;
	box-shadow: 0 2px 5px #000;
}
.header_center span{
	margin-top: 10px;
	line-height: 1.2;
	font-size: 0.9rem;
	background-color: #FF0000;
	text-align: center;
	position: relative;
	display: block;
	text-decoration: none;
	color:#FFF;
	padding: 5px;
	border-radius:5px;
	animation: animprice 3s ease-in-out 2s normal none infinite running;
	-webkit-box-shadow: 0 2px 5px #000;
	-moz-box-shadow: 0 2px 5px #000;
	box-shadow: 0 2px 5px #000;
}
.header_center a i{
	color:#000;
}
.header_center a:hover{
	background-color: #FFF;

}
@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
.header_right{
	min-width:370px;
	position:absolute;
	z-index:1;
	top:5%;
	right:2%;
	padding:0;
	width:30%;
}

/* ~~ Столбцы для макета. ~~ 

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

2) Столбцы не снабжаются полями, поскольку все они обтекающие. Если нужно добавить поля, то  желательно не с той стороны, с которой обтекается столбец (например, правое поле у div, настроенного на обтекание справа).  Часто вместо этого можно применить padding. В случаях, когда это правило приходится нарушить, следует добавить к правилу div объявление "display:inline", чтобы исправить ошибку с удвоением полей в некоторых версиях Internet Explorer. 

3) Поскольку классы можно использовать в документе многократно (а к элементу можно применять несколько классов), то столбцам вместо идентификаторов назначены имена классов. Например, два DIV с боковыми панелями могут при необходимости стыковаться. По желанию имена можно легко заменить на идентификаторы при условии, что они используются по одному на документ.

4) Если вы предпочитаете, чтобы панель навигации была справа, а не слева, просто установите обтекание столбцов в противоположном направлении (все справа, а не слева), они выстроятся в обратном порядке. Перемещать DIV в исходном коде HTML-документа не нужно.

*/
.nav-activ{
	font-weight:bold;
}
.sidebar1 {
	z-index:1;
	float: left;
	width: 25%;
	clip: rect(auto,auto,auto,2%);
	margin-top:10px;
	margin-right: 2%;
	margin-left: 2%;
}
.content {
	width: 70%;
	text-align: center;
	color: #000;
	float: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	background-color:#FFF;
}
.cat_table{
	width:100%;
	color:#000;
	background-color:#FFF;
	border-collapse:collapse;
	text-align:left;
}
.cat_table td{
	padding:5px;
}
.cat_table tr:hover{
	background-color: #FDFFA4;
}
.cat_table a{
	font-size:0.9rem;
	color:#000;
	text-decoration:none;
}
.cat_table_for a {
	max-width:100%;
}
.cat_table_for img {
	max-width:100%;
}
.cat_table_shapka{
	background-color: #FFF;
	text-shadow:1px 1px 1px#FFF;
	color:#000;
	height:35px;
	padding:5px;
	text-align:center;
	font-weight:bold;
}
.cat_table_shapka td{
	border:1px solid#787878;

}
.cat_table_shapka a{
	color:#000;
	text-decoration:none;
	font-weight:bold;
}
.cat_table_shapka img{
	opacity:0.73;
}
.cat_table_for {
	font-weight:bold;
	font-size:0.9rem;
	height:15px;
	padding:1%;
	min-width:100px;
	border:1px solid#787878;
	text-align:left;
}
.cat_table_for2 {
	font-size:0.9rem;
	padding:1%;
	border:1px solid#787878;
	text-align:center;
}
.cat_table_for2 i{
	display: block;
	color:#787878;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.cat_table_for2 i:hover{
	cursor:pointer;
	color:#000;
}
/* ~~ Этот сгруппированный селектор выдает списки в пространстве .content ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* это поле зеркально повторяет правое поле в правиле для заголовков и параграфов выше. Внизу поле помещено как граница между элементами списков, а слева — как отступ. Поля можно настраивать по желанию. */
}

/* ~~ Стили списка навигации (можно убрать, если решено использовать готовое подменю, например Spry) ~~ */
ul.nav {
	list-style: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	margin-bottom: 30px;
}
ul.nav li {
	font-weight:bold;
	position:relative;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D8DADA;
}
ul.nav li img{
	width:15px;
	height:15px;
	left:2.5%;
	top:33%;
	position:absolute;
}
ul.nav a, ul.nav a:visited { /* группировка этих селекторов гарантирует, что ссылки будут выглядеть как кнопки даже после того, как пользователь перейдет по ним */
	display: block; /* наделяет ссылку свойствами блока, из-за чего она заполняет весь содержащий ее элемент LI. При этом вся область реагирует на щелчок мышью. */
	text-decoration: none;
	color: #000;
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 35px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* изменяет цвет текста и фона при навигации с помощью клавиатуры и мыши */
	color: #000;
	background-color: #FDFFA4;
}
ul.nav a:hover{
	animation-name: spin2;
	animation-duration:300ms;
	animation-direction:alternate;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode:forwards;

}
@keyframes spin2 {
	from {
		padding-left:35px;	
	}	
	to {
		padding-left:40px;	
	}
}


/* ~~ Нижний колонтитул ~~ */
.footer {
	font-size:0.95rem;
	color:#FFF;
	padding: 10px 0;
	position: relative;/* IE6 получает hasLayout для правильной очистки */
	clear: both; /* это свойство очистки заставляет .container видеть место окончания столбцов и включать их */
	background-color: #212A31;
}
.footer a{
	color:#FFF;
	text-decoration:none;
}

/* ~~ прочие классы 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;
}.breakline {
	height: 1px;
	background-repeat: repeat-x;
	background-image: url(../../../images/wp-content/line3.png);
	clear: left;
}
.aboute {
	float: right;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding-top: 35px;
	padding-right: 30px;
	padding-left: 30px;
	color: #003560;

}
.logo {
	position:absolute;
	float: left;
	top:6%;
	left: 10%;
	z-index:1;
}

.logo2 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #FFFE00;
	z-index:1;
	font-size:1.6rem;
	position:relative;
	float: right;
	text-align:center;
	width:100%;
	padding:3px 0;
}


.logo2{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	animation-name: spin;
	animation-duration:5000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes spin {
	from {
	   -moz-box-shadow: 0 0 10px 0px #FFF;
	   -webkit-box-shadow: 0 0 10px 0px #FFF;
	   box-shadow: 0 0 10px 0px #FFF;

	}	
	to {
	   -moz-box-shadow: 0 0 10px 1px #FFF;
	   -webkit-box-shadow: 0 0 10px 1px #FFF;
	   box-shadow: 0 0 10px 1px #FFF;
	}
}
.logo2 a{
	text-shadow:2px 2px 2px#FFF;
	color:#000;
	text-decoration:none;
	font-weight:bold;
}
.logo3 {
	width:86%;
	margin-top:10px;
	min-height:50px;
	text-shadow:1px 1px 1px#FFF;
	line-height:1.5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #FFF;
	z-index:1;
	font-size:0.88rem;
	position:relative;
	float: right;
	text-align:center;
	padding-left:50px;
}
.logo3 a{
	font-size:1rem;
	text-shadow:1px 1px 1px#FFF;
	color:#000;
	text-decoration:none;
	font-weight:bold;
}
	.logo3 a:hover{;
	text-decoration:underline;
	}
.logo3 i {
	color:#000;
	text-shadow:0px 0px 1px#000;
	font-size:2.2rem;
	position:absolute;
	top:50%;
	left:3%;
	transform:translateY(-50%);
}

.topmenu {
	background-color: #787878;
	background: -webkit-linear-gradient(270deg,#787878 0,#000 100%);
	background: linear-gradient(180deg,#787878 0,#000 100%);
	background-position: 10% 90%;
	display:block;
	width:100%;
	text-align:center;
	margin:0 auto;
	position:relative;
	bottom:0;
	right:0;	
	float: left;
	font-size:0.85rem;
	padding: 0;
}
.topmenu a{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow:2px 2px 2px#000;
	font-weight:bold;
	text-align:center;
	display:inline-block;
	padding:1% 1%;
	text-decoration:none;
	color:#FFF;
	margin:3px;
}

.topmenu a:hover{
	background: -webkit-linear-gradient(270deg,#000 0,#787878 100%);
	background: linear-gradient(180deg,#000 0,#787878 100%);
	color:#FFF;

}
.topmenu a i{
	color:#FFFE00;
	margin-right:5px;
}
.whitelayer {
	background-color: #09F;
	height: 300px;
}
.headpanel {

}
.panelphone {
	background-color: #FFF;
	position:relative;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 94%;
	min-height: 105px;
	text-align: center;
	color: #000;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 10px;
	-webkit-box-shadow: 0 0px 5px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0px 5px rgba(0,0,0,0.6);
    box-shadow: 0 0px 5px rgba(0,0,0,0.6);
    line-height: 1.2;

}
.panelphone a {
	display: block;
	font-weight: bold;	
	text-decoration:none;
	color:#000;	
}
.spase {
	height: 10px;
	clear: left;
}
.grafics {
	background-color: #FC3;
	float: left;
	width: 33%;
}
.24gold {
	float: left;
	font-size: 100%;
}
.24silver {
	float: left;
}
.grafics2 {
	background-color: #CCC;
	float: left;
	width: 33%;
}
.24platinum {
	float: left;
}
.24palladium {
	float: left;
	width: 80px;
}
.grafics3 {
	background-color: #999;
	float: left;
	width: 33%;
}
.phone {
	text-shadow:1px 1px 1px#FFF;
	color: #000;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	
}
.kursvalut {
}
.tovarrinok {
	margin-top: 30px;
}
#box_for_detals
{
   background-color: #FAFAFA;
   border: 0px #000000 solid;
   -moz-box-shadow: 1px 1px 3px #000000;
   -webkit-box-shadow: 1px 1px 3px #000000;
   box-shadow: 1px 1px 3px #000000;
}



#imagedetal
{
	cursor:pointer;
}

.tableheader {
	background-color: #09C;
	float: left;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 100%;
	height: 30px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
	background-image: url(../../../images/wp-content/pixblue_small.png);
	background-repeat: repeat-x;
	text-align: center;
	color: #FC0;
	font-weight: bold;
	padding-top: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
}

.welcom {
	width: 100%;
	height: 120px;
	color: #FF0;
	font-weight: bold;
	text-align: center;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../../../images/wp-content/111.jpg);
	border-radius: 9px;
	margin-bottom: 30px;
}
.ng {
	width: 100%;
	height: 130px;
	color: #FF0;
	font-weight: bold;
	text-align: center;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../../../images/wp-content/111_ng.jpg);
	border-radius: 9px;
	margin-bottom: 30px;
	
}
.achtung {
	background-color: #FFF9B7;
	background: -webkit-linear-gradient(270deg,#FFF9B7 0,#FEFEE1 100%);
	background: linear-gradient(180deg,#FFF9B7 0,#FEFEE1 100%);
	background-position: 70% 30%;
	border-radius: 9px;
	color: #FFF;
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	height: 47px;
	padding-top: 3px;
}

.img_index {
	width: 100%;
	margin: 4%;
	
}
.detali {
	width: 31%;
	float: left;
	border-radius: 9px;
	text-align:left;
	background-image: url(../../../images/wp-content/detali.jpg);
	height: 176px;
}
.proc {
	width: 31%;
	float: left;
	border-radius: 9px;
	text-align:center;
	background-image: url(../../../images/wp-content/proc.jpg);
	height: 176px;
	margin-right: 1%;
	margin-left: 1%;
}
.plata {
	width: 31%;
	float: left;
	border-radius: 9px;
	text-align:right;
	background-image: url(../../../images/wp-content/plata.jpg);
	height: 176px;
}
.footbar {
	width: 100%;
	height: 260px;
	display:block;
	text-align: center;
}

.futeradress {
	height: 60px;
}
.futerkont {
	text-align:left;
	float: left;
	height: 150px;
	width: 34%;
}
.futerkont a{
	color:#fff;
	padding:5px;
	text-align:left;
	display:block;
	position:relative;
}
.futerkont a:hover{
	text-decoration: underline;
}
.futerkont a i{
	color:#FFFE05;
	margin-right:10px;
}
.copyrigh {
	height: 60px;
	float: left;
	width: 33%;
}

.futerkontact {
	text-align:left;
	height: 80px;
	float: left;
	width: 33%;
}
.futerkontact a{
	color:#FFF;
	padding:5px;
	text-align:left;
	display:block;
	position:relative;
}
.futerkontact a i{
	color:#FFFE05;
	margin-right:10px;
}
.futmenu {
	float: left;
}
.Copyright {
}

.popup{
          display : none;
          position :fixed;
}

.popup img{
	  
	  background-color: #FAFAFA;
   border: 0px #000000 solid;
   -moz-box-shadow: 1px 1px 3px #000000;
   -webkit-box-shadow: 1px 1px 3px #000000;
   box-shadow: 1px 1px 3px #000000;
}

#close-button {
          position : absolute;
          padding : 0px;
          top : 0%;
          left : 100%;
          width : 22px;
          height : 22px;
          margin-left : -15px;
          margin-top : -5px;
	  background-color : #ccc;
	  border : none;
}

#close-button:hover {
          margin-left : -16px;
          margin-top : -6px;
	  border : 1px solid #aaa;
}

#close-button img{
          width : 22px;
          height : 22px;
	  border : none;
}
.graphicskontent {
	margin-top:10px;
	width: 100%;
	height: 120px;
}
.hourjob {
	border-radius: 9px;
	background-image: url(../../../images/wp-content/pixblue_small2.png);
	color: #FC0;
	text-align: center;
	font-weight: bold;
	height: 50px;
	margin-bottom: 15px;
}
.aboutdetalpage {
	text-align:left;
	font-size: 24px;
	padding-top: 4px;
	padding-bottom: 7px;
	padding-right: 0px;
	padding-left: 0px;
	color: #000;
}
.container .content p strong {
	color: #016AA3;
}
strong {
	color: #016AA3;
}
.feedback {
	color:#787878;
	background: #FCFCFB;
	line-height:1.7;
	display: block;
	text-align:left;
	padding:10px;
	margin-top:10%;
}
.feedback input,textarea{
	width:50%;
	margin:5px auto;
	display: block !important;
	color:#787878;
	font:16px Arial;
	padding:8px;
	border:1px solid#EEEEEE;
	background-color:#FFF;
}
.feedback form{
}
.feedback input:focus,.feedback textarea:focus,.feedback button:focus {
	color:#000;
	border:1px solid#2590BD;
	outline:none;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}

.feedback a{
	border:1px solid#EEEEEE;
	margin:5px auto;
	text-align:center;
	background-color:#FFF;
	padding:8px;
	width:50%;
	display: block !important;
	color:#787878;
	cursor:pointer;
}
.feedback  input:hover{
	color:#000;
	border:1px solid#B9B9B9;
}.feedback  a:hover{
	color:#000;
	border:1px solid#B9B9B9;
}
#res_feedback{
	width:52%;
	text-align:center;
	margin:5px auto;
	display: block !important;

}
.table_drag{
	margin-top:20px;
	margin-bottom:20px;
	width:100%;
	color:#787878;
	background-color:#FFF;
	border-collapse:collapse;
	text-align:center;
}
.table_drag td{
	border:1px solid#eee;
	padding:1%;
}
.table_drag tr:hover{
	background-color: #FDFFA4;
}
.table_drag a{
	font-size:0.9rem;
	color:#000;
	text-decoration:none;
}
.single_image img{
	display:block;
	margin:0 auto;
	width:100px;
	height:100px;
	border:1px solid#eee;
	padding:2px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.single_image img:hover{
	cursor:pointer;
	background-color:#FFF;
}
#locate{
	background: linear-gradient(-45deg, #FFF, #FFFE00, #FFFE00, #FFF);
	background-size: 1600% 300%;
	animation: Gradient 5s ease infinite;
	color:#000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:relative;
	text-align:center;
	margin-top:10px;
	padding:10px;
	font-weight:bold;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;
}
@keyframes animprice {
   0%, 50%, 100%, 10%, 20% {
     transform: rotate(0deg);
   }
   30% {
     transform: rotate(-1deg);
   }
   40% {
     transform: rotate(1deg);
   }
}
@keyframes animprice2 {
   0%, 50%, 100%, 10%, 20% {
     transform: rotate(0deg);
   }
   30% {
     transform: rotate(-2deg);
   }
   40% {
     transform: rotate(2deg);
   }
}
#locate i{
	margin: 0;
}
#locate:hover{
	cursor:pointer;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;

}
#locate:hover #city{
	display:block;
	z-index:1;
	visibility:visible;
	overflow:visible;
}

#city{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-top:10px;
	display:none;
	list-style:none;
	text-align:center;
	color:#000;
}
#city li{
	padding:1%;
	list-style:none;
	position:relative;
	text-decoration:underline;
	color:#000;

}
#city a{
	color:#000;
}
#city li i{
	position:absolute;
	right:0;
    top: 50%;
    transform: translateY(-50%);

}
#city li:hover{
	color:#000;
	text-decoration:none;

}
#city li:hover{
	animation-name: spin3;
	animation-duration:200ms;
	animation-direction:alternate;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-fill-mode:forwards;
}

#city li ul{
	opacity:1;
	background-color:#FFF;
	z-index:999;
	text-align: left;
	visibility: hidden;
	position: absolute;
	left: 100%;
	top: -10px;
	padding:10px;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: linear-gradient(-45deg, #FFF, #FFFE00, #FFFE00, #FFF);
	background-size: 1600% 300%;
	animation: Gradient 5s ease infinite;
}
#city li ul li{
	min-width:200px;
	padding:1%;
	margin:1%;
}
#city li ul li:hover{
	border:none;
}
#city li:hover > ul{
	display:block;
	z-index:999;
	visibility: visible;
	overflow:visible;
	opacity:1;
}
.city2{
	color:#000;
}
.predst{
	background-color:#FFFE00;
	border-radius: 5px;
	font-weight:bold;
	margin-top:5px;
	text-align:center;
	padding:2%;
}
.predst a{
	color:#000;
}
/* картинка на странице */
.minimized {
  width: 300px;
  cursor: pointer;
  border: 1px solid #FFF;
}
 
.minimized:hover {
  border: 1px solid yellow;
}
 
/* увеличенная картинка */
#magnify {
  display: none;
 
  /* position: absolute; upd: 24.10.2016 */
  position: fixed;
  max-width: 600px;
  height: auto;
  z-index: 9999;
}
 
#magnify img {
  width: 100%;
}
 
/* затемняющий фон */
#overlay {
  display: none;
 
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 9990;
}
 
/* кнопка закрытия */
#close-popup {
  width: 30px;
  height: 30px;
 
  background: #FFFFFF;
  border: 1px solid #AFAFAF;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
}
 
#close-popup i {
  width: 30px;
  height: 30px;
  background: url(https://codernote.ru/files/cross.png) no-repeat center center;
  background-size: 16px 16px;
  display: block;
}
 
@keyframes rota {
 25% { transform: rotate(360deg); }
}
 
#close-popup:hover {
  animation: rota 4s infinite normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.start_cat{
	visibility:visible;
	border:1px solid#eee;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:relative;
	float:left;
	width:29%;
	margin:1%;
	padding:1%;
	min-width:200px;
	min-height:260px;
	height:280px;
	font-size:0.88rem;
}
.start_cat_div1 {
	height:80px;
}
.start_cat_div1 p{
	border:1px solid#dotted;
	font-size:0.88rem;
	text-align:center;
	font-weight:bold;
}
.start_cat img{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin:0 auto;
}

.start_cat a{
	text-align:center;
	color:#000;
	text-decoration:none;
}
.start_cat a:hover{
	cursor:pointer;
	color:#cc0000;

}
.start_cat:hover{
	cursor:pointer;
	background-color:#FFF;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;

}
/* Постраничная навигация */
.pagination{
    text-align:center;
    margin: 0px 10px;
	padding:1%;
	font-size:0.9rem;
	
}
.pagination a {
	padding:1.4% 2%;
	margin:0.8%;
	color:#000;
	text-decoration:none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#eee;
}
.pagination a:hover {
	background-color:#FFE406;

}
a.nav_active{
	background-color:#FFE406;
	font-weight:bold;
    color: #000;
}
a.nav_link{
    padding: 5px 7px;
    text-decoration: none;
    color: #777;
}
a.nav_link:hover{
    background-color: #0196e3;
    color: #fff;
}
/* Постраничная навигация */

.articles_block{
	border:1px solid#eee;
	margin:2% 0;
	padding:1%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 5px #eee;
    -moz-box-shadow: 0 1px 5px #eee;
    box-shadow: 0 1px 5px #eee;
}
.articles_block:hover{

}
.articles_block h1{
	
}
.articles_block p{
	line-height:1.5;
	
}

.articles_block a{
	cursor:pointer;
	color:#000;
	text-decoration:none;
}
.articles_block a i{
	margin-right:10px;
}
.contacty{	
	margin-top:10px;
}
.contacty a{
	position:relative;
	text-decoration:none;
	color:#000;	
	padding-left:40px;
}
.contacty a img{
	position:absolute;
	left:0;
	top:-5px;
}
.myButton{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #787878;
	background: -webkit-linear-gradient(270deg,#787878 0,#000 100%);
	background: linear-gradient(180deg,#787878 0,#000 100%);
	background-position: 10% 90%;
	color:#FFF;
	z-index:1;
	font-size:1rem;
	position:relative;
	float: right;
	text-align:center;
	width:100%;
	margin-top:10px;
	padding:5px 0;
	text-decoration:underline;
	font-weight:bold;
}
.myButton i{
	font-size:1rem;
	position:relative;
	margin-right: 2%;
}
.myButton:hover{
	background: -webkit-linear-gradient(270deg,#000 0,#787878 100%);
	background: linear-gradient(180deg,#000 0,#787878 100%);
	cursor:pointer;
	color:#FFF;
}
#wrap{
	display: none;
	opacity: 0.9;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 16px;
	background-color: rgba(1, 1, 1, 0.8);
	z-index: 100;
	overflow: auto;
}
#window{
	overflow-y: auto;
	width: 60%;
	height: auto;
	margin: 50px auto;
	display: none;
	background: #fff;
	z-index: 11111;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 16px;
	}
	#window ul{
		list-style:none;
	}
	#window ul li {
		color:#000;
		padding-left:25px;
		position:relative;
		line-height: 1.7;
	}	
	#window a{
		color:#000!important;
}
	#window ul li:hover {
		cursor:pointer;
	}
	#window ul li:click ul{
		display:block;
		visibility:visible;
		overflow:visible;
		cursor:pointer;
	}	
	
	
	#window ul li i{
		color:#4FA051;
		font-size:1.1rem;
		top:3px;
		left:0;
		position:absolute;
	}
	#window ul li:hover i{
		color:#000;
	}
			#window ul li ul{
				overflow:hidden;
				visibility:hidden;
				display:none;
				background-color:#f1f1f1;
				padding:1%;
				margin:1% 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
			}
	#window ul li ul li a{
	color:#000;
	}
	#window ul li ul li i{
	color:#787878;
	}
	#window ul li ul li a:hover{
		color:#000;
	}	
	#window ul li ul li a:hover i{
		color:#000;
	}
	#close,#close2{
		color:#000;
		position:absolute;
		right:20px;
		top:20px;
		cursor:pointer;
		font-size:1.4rem;
	}
	#close:hover,#close2:hover{
			animation-name: rrr;
	animation-duration:2000ms;
	animation-direction:alternate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode:forwards;

	}


#window2{
	overflow-y: scroll;
	width: 90%;
	min-width:100px;
	height: auto;
	margin: 50px auto;
	display: none;
	background: #fff;
	z-index: 11111;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 16px;
}






@keyframes rrr {
	from {
		transform: rotate(0deg);
	}	
	to {
		transform: rotate(180deg);
	}
}	
	
.calculator{
	font: 100%/1 Helvetica, sans-serif;
	position: relative;
	font-size: 1rem;
}	

.calculator table{
	font: 100%/1 Helvetica, sans-serif;
	font: 100%/1 Helvetica, sans-serif;
	font-size: 1rem;
    width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.calculator table td{
	font: 100%/1 Helvetica, sans-serif;
	border:1px solid#eee;
	line-height: 1.2;
	padding: 1% 0.5%;
	overflow: none;
	text-align: center;
}
.calculator table tr:first-child td i{
	color:#787878;
}
.calculator table td i{
	color:#cc0000;
}


.calculator table td i:hover{
	cursor:pointer;
}

.calculator h1{
	text-align: center !important;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.calculator-main,.calculator-main2{
	position: relative;
	display: block;
    width: 100%;
	border-collapse: collapse;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 2% 0;
	margin:0 auto;
	margin-bottom: 1rem;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;
}

.calculator select {
	font: 100%/1 Helvetica, sans-serif;
	width: 98%;
	border:1px solid#FFF;
	padding: 1%;
	outline: none;
	box-shadow:none;
	text-align: center;
}	
.calculator input{
	border:1px solid#eee;
	font: 100%/1 Helvetica, sans-serif;
	width: 50%;
	padding: 1%;
	outline: none;
	box-shadow:none;
	text-align: center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-right:5px;
}	
.calculator input:focus,.calculator select:focus{
	border:1px solid#999;
}
.calculator label{
	display: block;
	font-weight: bold;
	padding: 1%;
	margin:1% 0;
}

.calculator-phone{
	border:1px solid#eee;
	background: #efefef;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 2px 5px #787878;
    -moz-box-shadow: 0 2px 5px #787878;
    box-shadow: 0 2px 5px #787878;
	margin-top: 30px;
	margin-bottom: 10px;
	text-align: center;
	padding: 1%;
	border:1px solid#eee;
}	
.calculator-phone:hover{
	cursor:pointer;
	background-color:#FFF;
}
.calculator-phone p {
	text-align: center;
	line-height: 1.5;
	font-weight: bold;

}
.calculator-phone a{
	text-align: center;
	font-weight: bold;
	color:#000;
	text-decoration: none !important;

}
#add_element{
	display: inline-block;
	width:33%;
	padding: 1.5% 3%;
	margin: 1%;
	margin-right: 10%;
	margin-left:0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #FFFE00;
	text-decoration: none;
	text-align: center;
	text-shadow:1px 1px 1px#FFF;
	color: #000;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	cursor: pointer;
	}
#add_element i{
	margin-right: 3%;
}
#print_element{
	display: inline-block;
	width:37%;
	padding: 1.25% 2%;
	margin: 1%;
	margin-left:0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #444;
	border:1px solid#444;
	text-decoration: none;
	text-align: center;
	text-shadow:1px 1px 1px#000;
	color: #FFF;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	cursor: pointer;
	}
#print_element i{
	margin-right: 3%;
}
.hidden{overflow: none;display: none;visibility: none;}
.view{visibility: visible;}
.itogo{
	margin-top: 1%;
	font-weight: bold;
	padding: 1%;
	text-align: left;
	width:98%;
	display: block;
}
#spinningSquaresG{
	position:relative;
	width:192px;
	height:23px;
	margin:auto;
}

.spinningSquaresG{
	position:absolute;
	top:0;
	background-color:rgb(255,229,16);
	width:23px;
	height:23px;
	animation-name:bounce_spinningSquaresG;
		-o-animation-name:bounce_spinningSquaresG;
		-ms-animation-name:bounce_spinningSquaresG;
		-webkit-animation-name:bounce_spinningSquaresG;
		-moz-animation-name:bounce_spinningSquaresG;
	animation-duration:0.975s;
		-o-animation-duration:0.975s;
		-ms-animation-duration:0.975s;
		-webkit-animation-duration:0.975s;
		-moz-animation-duration:0.975s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.3);
		-o-transform:scale(.3);
		-ms-transform:scale(.3);
		-webkit-transform:scale(.3);
		-moz-transform:scale(.3);
}

#spinningSquaresG_1{
	left:0;
	animation-delay:0.386s;
		-o-animation-delay:0.386s;
		-ms-animation-delay:0.386s;
		-webkit-animation-delay:0.386s;
		-moz-animation-delay:0.386s;
}

#spinningSquaresG_2{
	left:24px;
	animation-delay:0.4825s;
		-o-animation-delay:0.4825s;
		-ms-animation-delay:0.4825s;
		-webkit-animation-delay:0.4825s;
		-moz-animation-delay:0.4825s;
}

#spinningSquaresG_3{
	left:48px;
	animation-delay:0.589s;
		-o-animation-delay:0.589s;
		-ms-animation-delay:0.589s;
		-webkit-animation-delay:0.589s;
		-moz-animation-delay:0.589s;
}

#spinningSquaresG_4{
	left:72px;
	animation-delay:0.6855s;
		-o-animation-delay:0.6855s;
		-ms-animation-delay:0.6855s;
		-webkit-animation-delay:0.6855s;
		-moz-animation-delay:0.6855s;
}

#spinningSquaresG_5{
	left:96px;
	animation-delay:0.782s;
		-o-animation-delay:0.782s;
		-ms-animation-delay:0.782s;
		-webkit-animation-delay:0.782s;
		-moz-animation-delay:0.782s;
}

#spinningSquaresG_6{
	left:120px;
	animation-delay:0.8785s;
		-o-animation-delay:0.8785s;
		-ms-animation-delay:0.8785s;
		-webkit-animation-delay:0.8785s;
		-moz-animation-delay:0.8785s;
}

#spinningSquaresG_7{
	left:144px;
	animation-delay:0.975s;
		-o-animation-delay:0.975s;
		-ms-animation-delay:0.975s;
		-webkit-animation-delay:0.975s;
		-moz-animation-delay:0.975s;
}

#spinningSquaresG_8{
	left:168px;
	animation-delay:1.0715s;
		-o-animation-delay:1.0715s;
		-ms-animation-delay:1.0715s;
		-webkit-animation-delay:1.0715s;
		-moz-animation-delay:1.0715s;
}



@keyframes bounce_spinningSquaresG{
	0%{
		transform:scale(1);
		background-color:rgb(255,229,16);
	}

	100%{
		transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_spinningSquaresG{
	0%{
		-o-transform:scale(1);
		background-color:rgb(255,229,16);
	}

	100%{
		-o-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_spinningSquaresG{
	0%{
		-ms-transform:scale(1);
		background-color:rgb(255,229,16);
	}

	100%{
		-ms-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_spinningSquaresG{
	0%{
		-webkit-transform:scale(1);
		background-color:rgb(255,229,16);
	}

	100%{
		-webkit-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_spinningSquaresG{
	0%{
		-moz-transform:scale(1);
		background-color:rgb(255,229,16);
	}

	100%{
		-moz-transform:scale(.3) rotate(90deg);
		background-color:rgb(255,255,255);
	}
}


.noview{
	display: none;
	overflow: hidden;
	visibility: none;
	font-size:0.01rem;
	opacity: 0.9;
}
.left-info{
	text-align: center; border-radius:4%;
	box-shadow: 0 0 0 3px rgba(221,79,67,0.8);
	padding: 3%;
}
.left-info p{ text-align: center; }
.left-info img{ text-align: center; }
.narket{
	position:relative;
	display: block;
	width:100%;
	text-align: center;
	padding:5px;
	color:#262F35!important;
	font-size: 12px;
}
.narket:hover{
	color:#262F35;
}
.fair_prices{
	padding:10px;
	animation: Gradient 5s ease infinite;
	border-radius:10px;
	box-shadow: 0px 0px 5px #222;
}
.fair_prices p{
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}
.fair_prices div{
	color:#000;
	font-size: 1rem;
	text-align: center;
	font-weight: normal;
}
.fair_prices span{
	font-size: 0.9rem;
	text-align: center!important;
}
.fair_prices i{
	color:rgba(255,254,5,0.9);
	font-size: 5rem;
	text-align: center;
	margin-bottom: 10px;
	display: block;
	position:relative;
	animation: animrotate3d 4s linear 0s normal none infinite running;
}
.fair_dangerous{
	margin-top: 20px;
	background: #FF0000;
	padding:10px;
	border-radius:10px;
	box-shadow: 0px 0px 5px #222;
}
.fair_dangerous p{
	color: #fff;
	font-size: 1rem;
	text-align: center;
	font-weight: bold;
}
.fair_dangerous span{
	display: block;
	color: #fff;
	font-size: 0.9rem;
	text-align: center!important;
}
@keyframes animrotate3d {
   0% {
   //	color:#FFF;
    transform: rotate3d(0,1,0, 0deg);
	//text-shadow:0px 3px 20px #FFFF63;
   }
   50% {
     transform: rotate3d(0,1,0, 180deg);
 	//text-shadow:0px 3px 20px #FFF;
  }
   100% {
     transform: rotate3d(0,1,0, 360deg);
 	//text-shadow:0px 3px 20px #FFFF63;
  }
}