/* --------------- reset.css --------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label,  {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;                             
	vertical-align: baseline;         
	background: transparent;    
	font-size: 100%;             
}
a {   color: #142027;                                    	  
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent; text-decoration:none; outline:none;
}

a:visited {
	color: #142027;
}
a:hover {
	color: #507f9e;
}
a:active {
	color: #507f9e;
}

#blockinfo a{color: #142027; }
a:visited{text-decoration:none}
a:hover{text-decoration:none}
input, select, button, textarea {
	margin: 0; 				
	font-size: 100%; 		
}

input[type="checkbox"] { 		
	vertical-align: bottom;
}
input[type="radio"] {
	vertical-align: text-bottom;
}
sub {
	vertical-align: sub;
	font-size: smaller;
}
sup {
	vertical-align: super;
	font-size: smaller;
}

* {
margin: 0;
padding: 0;
}

.clearfix:after {
	content		: ".";
	visibility	: hidden;
	display		: block;
	height		: 0;
	clear		: both;
}
.clboth{ clear:both}
/* --------------- reset.css --------------- */



/* CSS Document */

.go-up, .go-down {
   /*  background: none repeat scroll 0 0 #4f4f4f;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 10px 0.3em -0.1em rgba(0, 0, 6, 0.5);
    color: #fff;
  
    font-size: 24px;
   
    margin-bottom: 5px;
    opacity: 0.7;
    padding: 0 3px 5px;*/
	 height: 40px;
	  cursor: pointer;
    display: none;
    position: fixed;
    right: 45px;
    text-align: center;
    text-shadow: 0 1px 2px #000, 0 0 10px #e0f1ff;
    width: 40px;
    z-index: 9999;
}
.go-up {
    bottom: 90px; background:url(js/up2.png)
}
.go-down {
    bottom: 40px; background: url(js/down2.png)
}
.go-up:hover {
    opacity: 1; background:url(js/up2-h.png)
}
.go-down:hover {
    opacity: 1; 
background: url(js/down2-h.png)}

body,td,th {
	font-family: Trebuchet MS;
	font-size: 14px;
	color: #000000; font-weight:400
}
body {
	background: #3298e2 url(img/fon.jpg) repeat center top; 
	margin: 0px; background-attachment: fixed;	 
}
a:link {
	color: #db3e1a;
}
a:visited {
	color: #e86649;
}
a:hover {
	color: #024164;
}
a:active {
	color: #024164;
}
h1 {
	font-size: 24px;
	color: #0169af; font-style:italic; text-transform:uppercase
}
h2 {
	font-size: 24px;
	color: #db3e1a;text-transform:uppercase;font-style:italic; margin-bottom:10px
}
#txt h2 {color: #0169af;font-size: 22px;}
/*#content h2{font-size: 24px;	color: #0169af;text-transform:uppercase; padding-bottom:5px; display:inline-block; border-bottom: solid 1px #0169af; clear:both}*/
h3 {
	font-size: 18px;
	color: #024164; font-style:italic;
}
h4 {
	font-size: 16px;
	color: #024164; text-transform:uppercase; font-style:italic; margin-bottom:10px
}
h5{font-size: 24px;
	color: #0169af; font-style:italic; text-transform:uppercase; text-align:center}

/*main */
#outer{ margin:0 auto; width:960px; background:#fff; position:relative}
#header{ background:url(img/spacer.jpg)  0 67px no-repeat; width:100%;  position:relative;  font-style:italic}
#header #address{ position:absolute; top:20px; left:25px; text-align:left; font-size:18px }
#header #tel{position:absolute; top:20px; right:25px; text-align:right; font-size:18px }
#header i{ color: #333333; font-size:12px}
#icons{ margin:43px 0 0 0}
#eng{ margin:43px 0 0 0; vertical-align:middle; line-height:19px}
#eng a { display:block; background:url(img/lang.jpg) no-repeat right 0px; padding-right: 21px; height:19px; line-height:19px}
#eng a:hover{background:url(img/lang2.jpg) no-repeat right 0px;}
#eng img{vertical-align:middle}
#header a:hover i{ 	color: #0169af;}
#header p{ margin: 0 0 15px 0; padding:0; line-height:100%}
#menu, #menuf{ background:#008bd2; padding:20px 0; width:100%; text-align:center; margin-top:10px; text-transform:uppercase; font-style:italic}
#menu ul, #menuf ul{ list-style:none; text-indent:0}
#menu ul li, #menuf ul li{ display:inline-block; padding:0 7px}
#menu ul li a:link, #menu ul li a:visited  , #menuf ul li a:link, #menuf ul li a:visited  { color:#FFFFFF}
#menu ul li a:hover, #menuf ul li a:hover { color:#FFFFFF; text-decoration:underline}
#copy{margin:30px auto; width:960px; text-align:right; position:relative}
/*main */

#inner{ margin:20px}
/*razdely */
#razdely{ background:url(img/gr.jpg) repeat-x; border-top: solid 1px #929292}
#razdely ul{ list-style:none; text-align: center; margin:0 10px}
#razdely ul li{ display:inline-block;  margin:20px 9px; max-width: 213px}
#razdely ul li img{border: solid 1px #fff; width: 195px;transition: all 0.2s 0.3s; opacity: 1; padding:0; margin:0 }
#razdely ul li a{ display:block; margin:0; padding:0}

#razdely ul li:hover img{border: solid 1px #848484; transition: all 0.2s 0.3s;  opacity: 0.7;}
.box {

	position: relative;
	background: #CCCCCC;
	display: block;
	cursor: pointer;
	color: #CCCCCC;
	box-shadow: inset 0 0 0 1px #848484;
	-webkit-transition: background 0.2s 0.3s;
	transition: background 0.2s 0.3s;padding:6px 7px 7px 6px;
	 border:solid 1px #999999; border-right: none;border-bottom: none;
}

.box:hover {
	background:  #FFFFFF;
	-webkit-transition-delay: 0s;
	transition-delay: 0s; border: solid 1px #ccc;border-right: none;border-bottom: none;
}


.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 3;
	stroke: #ecf0f1;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom {
	stroke-dasharray: 330 240; 
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 490 400;
}

.box:hover svg line.top {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

.box:hover svg line.bottom {
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(920px);
	transform: translateY(920px);
}

.box:hover svg line.right {
	-webkit-transform: translateY(-920px);
	transform: translateY(-920px);
}

#razdely h3{ font-size:24px; color:#c8431e;  font-style:italic; text-transform:uppercase; font-weight:400; margin-top:10px}
#razdely h3 span{font-size:20px; color:#000;  font-style:italic; text-transform:uppercase; display: block}
#razdely p{ font-size:12px; width:205px; color:#515151; height:51px; overflow:hidden; display: block }
/*razdely */

.spacer{ background:url(img/spacer.jpg) no-repeat center; height: 30px; width:100%; margin:10px 0px 20px 0; clear:both; display: block}
#content{ padding:20px;  clear:both; font-size:16px}
#content ul{ list-style-image:url(js/list.png) ; margin: 10px 0 10px 20px}
#content ul li{ margin:2px; padding:0}
#content h1{ margin-top:0}
#content p{ line-height:150%; padding:0; margin:0px 0 10px 0}
#nesout{ margin:19px; background:url(img/line.jpg) top left repeat-x; padding-top:5px; position:relative}
#nesout2{  background:url(img/line.jpg)  bottom left repeat-x; padding-bottom:5px}
#nesout3{ background:url(img/linev.jpg) center top repeat-y; clear:both; margin-bottom:40px; width:100% }
#news{  width:50%; text-align:center; float:left; }
#arts{  width:50%; text-align:center; float:left; }
.inner{ padding:0 10px 10px 10px; position:relative; text-align:left; clear:both    }
.inner img{ padding:7px;  background:#fff; 
-webkit-box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53);
-moz-box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53);
box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53); float:left; margin-right:10px   }
.title{ display:inline-block;  margin-top:-26px; width:50%; text-align:center; float:left; margin-bottom:16px }
.title p{ display:inline-block; padding:10px; background-color:#FFFFFF;  font-size:24px; color:#363636; text-transform:uppercase;}
.newsblock{ clear:both; margin-bottom:20px}
.newsblock p.tit { font-size:18px; margin-bottom:10px; line-height:18px}
.newsblock p{ font-size:13px; color:#666666}
.newsblock p a{; line-height:18px}
.newsinner { padding:10px}
.newsinner .newsblock{ float: left; width: 50%; clear:none}
#footermain{ background:url(img/footer.jpg) repeat-x; padding:20px 40px; background-position: 10px 70px;}
.leftblock, .rightblock{ width:50%; float: left; text-align: center}
#pfd, #excel{ background:url(img/ikrapdf.jpg) no-repeat ;  max-width:414px; height:100px; border:solid 2px grey ; outline:10px #fff solid; 
-webkit-box-shadow: -4px -4px 5px 0px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    -4px -4px 5px 0px rgba(50, 50, 50, 0.55);
box-shadow:         -4px -4px 5px 0px rgba(50, 50, 50, 0.55); padding:49px 0 0 0; text-align:left }

#excel{ background:url(img/ikraprice.jpg); margin-left:20px; text-align:right}
.opacitybl{ background:url(img/opacity.png) repeat; width:199px; height:53px; padding:10px 10px; display:inline-block}
#pfd .opacitybl img{ text-align: left; margin:0 10px 0 0; float:left}
 #excel .opacitybl img{margin:0 0 0 10px; float: right }
.opacitybl p{ font-size:14px; margin-top:4px; text-transform:uppercase; font-weight:bold}
.opacitybl a{ display:block; color:#000000} .opacitybl a:hover{color:#fd5c16}

#footer{ background:url(img/spacer.jpg)  0 67px no-repeat;   position:relative; font-style:italic; text-align:center; padding:0 10px 50px 10px }
.centercol{ float:left; width:350px}
.leftcol{ float:left; width:265px; text-align:left; margin-top:60px;  padding-left:20px}
.rightcol{ float:right; width:265px; text-align: right;  margin:60px 20px 0 0;}
.leftcol .tit,.rightcol .tit{font-size:18px;  text-transform:uppercase; margin-bottom:15px}
.flimg{ border:solid 10px #e0e0e0;  margin-right:10px; float:left;-webkit-box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53);
-moz-box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53);
box-shadow: 7px 9px 10px -6px rgba(0,0,0,0.53);  }



#copy{ text-align: right; text-transform:uppercase; margin:30px  auto ; width:960px; color:#FFFFFF; clear:both}



/*внутренние*/
#prevnext{ float:right; margin-right:15px; font-style:italic}
#topbread{ background:url(img/bread.jpg) right bottom no-repeat; font-size:12px}
#topbread h1{ background:#FFFFFF; display:inline; float: left; margin:0; padding:5px 0; font-size:20px; line-height:20px}
#vypuska{ float:left; background:#FFFFFF; display:inline; float: left; margin:0; padding:0; font-size:20px; line-height:28px; color: #0169af;

    font-style: italic;
    text-transform: uppercase;}
#bread{ float: right; margin: 10px 20px 10px 0; font-size:12px; font-style:italic }
#bread a:link{ color:#000000}
#bread a:visited{ color:#000000}
#bread a:hover{ color:#008BD2}
#bottombread{ background:url(img/bottombread.jpg) repeat-x top; padding-bottom:30px; text-align:right; clear:both}
#bread2{ padding:6px 20px; display:inline-block; background:#e3e3e3; font-size:12px; line-height:18px}

#breadart{ text-align:right; margin: 0px 20px 0px 0; clear: both; font-size:12px}
.kataloginfo,.tovary{ float:left; max-width:416px; font-size:18px; color:#005682; font-style:italic;  line-height: 100%;}
#content .kataloginfo p{line-height: 100%;}
.kataloginfo{ margin-top:15px; text-align:left; margin-left:20px}
.tovary a { display:inline-block; margin:5px 10px 10px 0}
.tovary a:last-child{ margin-right:0}
.katalog.tovary{ text-align:center; margin-left:0}

#katalog{ text-align:center; margin-left:-5px}
.katalog{ width:416px; text-align: center; display:inline-block; margin:10px 15px 10px 15px  }
.katalog:hover img{ transition: all 0.2s 0.3s;  opacity: 0.7;}
.katalog:hover h3 a{ color:#008BD2}
.katalog a{ display:inline-block;; width:415px background:#f2efef; border: solid 1px #9e9e9e; text-align:center}
.katalog a img{ border: solid 1px #9e9e9e; margin: 5px}
.katalog h3 a{ border: none}
#txt .katalog h3{ margin-bottom:3px}
#txt{ text-align:left; clear:both}
/*contacts */
.list { background:url(img/list.jpg) no-repeat left top; padding: 5px 0 0 40px; margin-top:20px ; text-indent: 0px; width: 405px; text-align:left }
.addr{ }
.addr u{  font-size:18px; font-style:italic }

.addr [class^="icon-"]::before, .addr [class*=" icon-"]::before{margin:0; font-size:18px}
#content .addr p{ padding-left:20px; font-size:16px}

#map{ border:solid 1px #666666; margin:30px -1px}
#cform{ background:url(img/list2.jpg) top  right no-repeat; width:60%; padding:10px 50px 10px 0; font-size:14px}
#cform h3 { border-bottom: solid 2px #065b92; background:url(img/question.jpg) no-repeat right center; line-height:50px; font-size:20px}
#cform .list{ width:90%; margin:0 ; padding:0 0 0 10% }
#cform label{ text-transform:uppercase; font-style:italic; width:120px; display: inline-block;  }
#cform p{ padding:10px 0; margin:0; background:url(img/form.jpg) no-repeat  95px 0;  border-bottom: solid 1px #065b92;}
#cform  fieldset{ border: none}
#cform input { width:150px}
#cform textarea{width:280px; min-height:170px}

.btn, input[type^="submit"] {
  background: #008bd2;
  background-image: -webkit-linear-gradient(top, #008bd2, #2980b9);
  background-image: -moz-linear-gradient(top, #008bd2, #2980b9);
  background-image: -ms-linear-gradient(top, #008bd2, #2980b9);
  background-image: -o-linear-gradient(top, #008bd2, #2980b9);
  background-image: linear-gradient(to bottom, #008bd2, #2980b9);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 20px 10px 20px; width:140px;
  text-decoration: none; text-transform:uppercase ; margin:20px 0 20px 110px
}

.btn:hover, input[type^="submit"]   {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
input[type^="submit"] {margin:20px 0 20px 0px}
#ajaxSearch_submit{ font-size: 13px;  padding: 2px 10px; width:auto; border-radius: 5px; text-transform:none}
#poisk{width:320px; float: right; text-align:center}


#copyin {
    border: 1px solid #c0c0c0;
    float: left;
    padding: 30px 10px;
    text-align: center;
    width: 300px;
}
/* end contacts */

#header p {
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 100%;
	font-size: 14px;
}
#ajaxSearch_intro{ display:none}
#icons2, #eng2{ display:none} 
#content .prod h2{ display:block; float:none;  border-bottom:none; clear:both;  margin:10px 0; font-size:20px}
.prod img{ border:solid 3px #D4D4D4; float:left; margin-right:10px}
.prod{ clear:both; margin:20px 0; width:100%; display:block; font-size:10pt}
.prod a.tit{ display:block; text-align:right; clear:both  }
#txt{ padding:20px 0; font-size:14px}
#txt h2,#txt h3 { clear:both; display:block; border-bottom: none; text-align:center; margin:20px 0; font-size:18px }
@media all and (min-width: 200px) and (max-width: 940px){
.kataloginfo, .tovary{ max-width:90%}

#outer{ width:100%}
#header{ background: url("img/spacer.jpg") no-repeat scroll center 47px rgba(0, 0, 0, 0); }
#header #address, #header #tel{  top: 150px;}
#menu ul{ padding:0 10px; display:block}

#icons, #eng{ display:none} 
#icons2, #eng2{ position:absolute; top: 10px ; display:block } 
#icons2{ left:20px}
#eng2{ right:20px}
#footer .leftcol{ display:none}
#footer .centercol{ float:none; display:block; text-align:center; width: 100%;}
#footer {
    background: url("img/spacer.jpg") no-repeat scroll center 67px rgba(0, 0, 0, 0);}
#footer 	.rightcol{float:none; display:block; text-align:center; width:100%; margin-top:10px}
#footer 	.rightcol .tit{ display: none}
#poisk, #copyin{ width:100%; float: none  ;  padding: 30px 0px;}
#copy{ width:90%; text-align:center}
#copy div{ display:block}
body {
	background: #3298e2 repeat center top; 
	margin: 0px; background-attachment: fixed;	 
}
#logotip{ margin:-20px 0 10px 0}
 #header #tel { display: block; text-align:center; float:none; clear: both; position: static}
#header #address{ display:none}
#topbread #bread{ display:none}
}

@media all and (min-width: 200px) and (max-width: 660px){

#header #address, #header #tel { display: block; text-align:center; float:none; clear: both; position: static}
#footermain{ display:none}
#nesout .inner img { float: none}
#slider{ display: none}
#logotip, .centercol img{ width:100%; max-width: 350px}
#cform { width:90%}
#header #address{ display:none}
.leftcol, .rightcol{ float: none}
#cform h3, #topbread h1, #vypuska{ font-size:18px}
#cform p{ background:none}
#cform label{ width:auto; min-width:60px}
#footer{ padding-bottom:20px}
#cform textarea{ width:98%}
.newsinner .newsblock{ float: none; width:100%}
.newsblock a.tit{ text-align:center; display:block; margin-bottom:10px }
.newsblock p.tit{ text-align:center; }
#txt .newsblock p.tit{ text-align:left; }
#content{ padding:10px 5px}


.katalog a img{ max-width:98%; margin:1%}
.katalog a  { display: block; width:100%}
.katalog { max-width:94%; padding:3%; margin:0}
#katalog{ margin:0}
#katalog p{ text-align:left}
 #katalogrel p{ text-align:center}
#menu ul li, #menuf ul li{ padding-bottom:5px}

}