/*@font-face {font-family: 'Roboto'; src: url(fonts/roboto.ttf);} */
html, body {margin: 0; padding: 0;}
body {background: #fff; font: 400 16px 'Roboto'; text-align: center; color: #333;}
a {color: #226ebc;}
a img {border: none;}
div {text-align: left;}
ul {list-style-type: square;}
.row {display: flex;}
.row div {flex:1;}
ul.row {margin:0; padding:0; list-style:none;}
ul.row li {padding: 8px; margin-right: 20px;}
ul.row li b {font-size: 24px; color: #226ebc;}
.right {float: right;}
.left {float: left;}
.float-left {
  float: left;
  max-width: 200px;
}
.both {clear: both;}
.float-right {float:right;}
.float-left {float:left;}
.pointer {cursor:pointer;}
figure {margin:0; padding:0; display:inline-block;}
input.t,input.b {display:block; box-sizing: border-box; width: 100%; line-height: 44px; height:44px; border: 1px solid #f0f0f0; font-size: 14px; margin: 5px 0;}
input.b{background: #226ebc; color:#fff; border:none; font-size:16px; cursor:pointer;}
input.t {background: #f7f7f7;}

#topfix {left: 0; top: 0; width: 100%; height: 44px; position: fixed; display:none; z-index:2000;}

#mtel {bottom: 0; right: 10px; position: fixed; display:none; z-index:1000;}
#mtel img {margin:10px; opacity: 0.8;}
#mtel figure {margin:0; display:block;}
#topfon {height: 70px; position: relative;}
#top {width:90%; max-width: 1200px; position: relative; margin: auto; z-index: 1500;}
#logo {top: 15px; left: 0; position: absolute;}
.topcontact {top: 15px; left: 200px; position: absolute;}
.topcontact ul {margin:0; padding:0; list-style:none;}
.topcontact ul li {display: inline-block; margin-right: 15px; color:#000; font-size: 16px;}
.topcontact a {display:block; color:#000; font-size: 16px;}
.topwp {top: 15px; right: 0px; position: absolute;}
.topwp ul.row li {background: none; padding: 0; margin: 0 5px;}
.topwp a {line-height: 50px; text-decoration:none; display:block}
.topwp a.iframe {background: #226ebc; color:#fff; padding: 0 15px;}
.topwp a.iframe:hover {background: #fff; color:#226ebc; border: 1px solid #226ebc;}
.mobtel {top: 22px; left: 220px; position: absolute; display:none; z-index:1000;}
#search {width:980px; position: relative; margin: 10px auto; border: 1px solid #ccc; background: #fff url(img_d/lupa.png) 100% 50% no-repeat; z-index:1800;}
input.search {display: block; width: 94%; border:none; padding: 10px 10px;}
input.search:focus { outline: none; }
#res {top: 40px; left: 0; display:none; position: absolute; padding: 0 15px; border: 1px solid #ddd; background: #fff;}

#imenu {width: 48px; position: relative; float:right; display:none; margin: 14px 8px; z-index: 2000;}

#menu {position: relative; margin:auto; background: #226ebc; min-height: 56px; z-index: 1500; text-align:center;}
#menu ul {margin: 0 auto; width: 90%; max-width: 1200px; padding: 0; list-style: none; min-height: 56px; display:table;}
#menu ul li {margin: 0; padding: 0; display: table-cell; position: relative;}
#menu ul ul {margin: 0; padding: 6px 0; width: 250px; height: auto; background: #fff; list-style: none; display: none; position: absolute; top: 56px; left: 0; box-shadow: 0px 0px 32px 7px rgba(50, 50, 50, 0.17);}
#menu ul ul:after {clear: both; display: block; font-size: 1px; content: "."; height: 0; visibility: hidden;}
#menu ul ul li {width: 250px; display: block; position: relative;}
/* Main Menu */
#menu ul a {margin: 0; padding: 0 15px; text-align:center; display: block; color: #fff; font: 400 16px 'Roboto'; text-decoration: none; line-height: 56px; height: auto !important; height: 1%;}
#menu ul a span {line-height: 30px; display:inline-block;}
#menu ul a span.curs {display:inline-block; width: 14px; height: 11px; background: url(img_d/curs.png) no-repeat 100% 0;}
#menu ul a:hover span.curs {background: url(img_d/curs1.png) no-repeat 100% 0;}
/* Main Menu Hover */
#menu ul a:hover,#menu ul li:hover a {text-decoration: none;}
#menu a.self span:not(.curs) {border-bottom: 2px solid #cf2e2e;}
/* Second Menu */
#menu ul li:hover li a {background: none; float: none; color: #333; border:none; text-decoration: none;}
#menu ul li:hover li a.self,#menu ul li:hover li a.self:hover {border:none; font-size: 15px; color:#024c8f;}
/* Second Menu Hover */
#menu ul li:hover li a:hover, #menu ul li:hover li:hover a {color: #999;}
#menu ul li:hover ul,#menu ul ul li:hover ul {display: block;}
#menu ul ul a {font: 400 14px Arial; margin: 0; padding: 8px 12px; display: block; text-decoration: none; text-transform: none; text-align: left; border-bottom: none;}
#mmenu0 {display:none; z-index:2000;}
#mmenu0 a.close {position: relative; display:block; text-align:right;}
#mmenu0 a.close img {margin: 8px 12px 0 0;}

#docsfon {position: relative; text-align:center; z-index:100;}
#docs {position: relative; width:90%; display:flex; margin:auto; padding: 0;}
div.hk {width:90%; margin: 20px auto;}
div.hk,#docs p.hk a {font-size:14px;}
.fopen {display:none; padding: 8px 0 8px 25px; border-bottom: 1px solid #eee; background: url(img_d/list-filter.png) no-repeat 98% 14px / 12px 8px;}
.fopen1 {background: url(img_d/list-filter1.png) no-repeat 98% 14px / 12px 8px;}
div.filter {width: 260px; margin: 0 20px 0 0; border: 1px solid #eee;}
div.filter ul {margin:0; padding:0; list-style: none;}
div.filter ul ul {display:none;}
div.filter ul:not(.rcat) li {cursor:pointer; padding: 8px 0 8px 25px; border-bottom: 1px solid #eee; background: url(img_d/list-filter.png) no-repeat 4px 14px / 12px 8px;}
div.filter ul:not(.rcat) ul li {padding: 2px 0 2px 25px; border-bottom: none; background: none; font-size:12px;}

#doc .itop {margin: 15px 0;}
#doc .itop a {display:block; position: relative;}
#doc .itop img {width:100%; height:auto;}
#doc .itop div.text {top: 0px; left: 0px; position: absolute; color:#fff; background-color: #094A8D; padding: 8px;}

#doc .services-list {display: flex; justify-content: space-between;}
#doc .services-list a {display:block; width:23%; position: relative; text-decoration:none; color:#333;}
#doc .services-list img {width:100%; height:auto; display:block;margin:0 0 10px 0;}

#doc {margin: 0; flex: 1; position: relative; min-height: 500px;}
#doc h1 {font-size: 32px; margin-top: 0;}
#doc h2 {font-size: 24px;}
#doc h3 {font-size: 18px;}
#doc td img {border: 1px #999999 solid;}
#doc table {border-collapse: collapse;}
#doc table td {padding: 3px 8px; border: 1px #eee solid;}
#doc table img {border:none;}
#doc table tr.t td {background: #ccc; font-weight: bold;}
#doc table td.l {font-weight: bold;}
#doc tr.even {background-color: #EEF3F9;}
#doc table.attr {width:100%;}
#doc table.attr tr:nth-child(even) {background-color: #fff;}
#doc table.attr tr:nth-child(odd) {background-color: #EEF3F9;}
#doc li {margin-bottom: 5px; list-style-image: url(img_d/list.png);}
#doc em.s {background: #fffc00;}
#doc div.list {margin: 20px 0;}
#doc div.list ul {margin:0; padding:0; list-style:none;}
#doc div.list ul li {width: 200px; height: 300px; display:inline-block; font-size:14px; vertical-align:top;}
#doc table.table {margin: 0 0 20px 0; font-size: 16px;}
#doc table.table a {display:block;}

#doc div.foto {display:inline-block; background: #fff; padding:20px; border: 1px solid #f0f0f0; box-shadow: 0px 0px 32px 7px rgba(50, 50, 50, 0.17);}

#doc div.gal {display:inline-block; margin: 0 10px 15px 0; width: 260px; height: 400px; position: relative; vertical-align:top; background: #fff; text-align: center; border: 1px solid #eee;}
#doc div.gal div.title {padding: 0 8px; height: 70px;}
#doc div.gal div.title a {color: #333; text-decoration:none;}
#doc div.gal div.product-image {margin: 15px; height: 120px; text-align:center; overflow:hidden;}
#doc div.gal div.product-image img {width: 160px; height:auto;}
a.zapros {display:inline-block; width: 180px; text-align:center; background: #226ebc; color:#fff; text-decoration:none; padding: 6px 0;}
#doc div.gal ul.prodattr {height: 90px;}
#doc div.gal p.price {height: 15px; margin: 0; padding: 10px 0; font-weight:bold;}
#doc ul.prodattr {margin:15px; padding:0; list-style:none;}
#doc ul.prodattr li {font-size: 14px; display: grid; grid-auto-flow: column; place-content: space-between; margin-bottom: 5px;}
#doc ul.prodattr li p {margin:0; text-align:right;}
#doc ul.prodattr li span {text-align:left;}

#doc div.product-card {background-color: #DEE9F5; padding: 20px 0; position: relative;}
#doc div.product-card div.product-image {margin: 15px; width: 50%; text-align:center; overflow:hidden; float:left;}
#doc div.product-card div.product-image img {width: 360px; height:auto;}
#doc div.product-card li {line-height: 25px; border-bottom: 1px solid #ccc;}

#doc div.news {background:#226ebc; margin: 0 0 20px 0; padding: 1px 20px 30px 20px; color:#fff;}
#doc div.news h3 {font-size: 36px;}
#doc div.news a {display: inline-block; background:#fff; padding: 6px 30px;}

#doc ul.row li {background: #dee9f5;}

.carouse {position: relative; text-align:center;}
.carousel-container {position: relative; overflow: hidden; max-width: 980px; margin:auto; text-align:center;}
.gal-block {display: flex; transition: transform 0.5s ease; width: 100%; height: 400px; white-space: nowrap;}
#doc .gal-block div.gal {white-space: normal; width: 260px;}
.prev,.next {display:inline-block; width:16px; height:24px; border:none; margin: 0 8px; cursor:pointer;}
.prev {background: url(img_d/list-left.png) no-repeat 50% 50%;}
.next {background: url(img_d/list-right.png) no-repeat 50% 50%;}

ul.rcat {margin:0 0 20px 0; padding:0; list-style:none;}
ul.rcat li {display:inline-block;}
ul.rcat li a {display:block; margin: 0 10px 10px 0; padding: 8px; border: 1px solid #ccc; text-decoration:none;}
div.filter ul.rcat li {display:block;}
div.filter ul.rcat li a {border: none;}

.pagination { margin: 20px 0; font-family: Arial; }
.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
.pagination a:hover { background: #eee; }
.pagination .current {
    background: #226ebc;
    color: white;
    border-color: #0073aa;
}
.pagination span:not(.current) { color: #999; }

#feedback {text-decoration:none; display:block; width: 220px; margin: auto; text-align:center; color:#fff; font-size:18px; line-height: 42px; border-radius: 21px; background: linear-gradient(to right, #2478e3, #114284);}

#ffb {position: relative; padding: 30px 10px; z-index: 25; text-align:center; background: #DEE9F5; margin-top:20px;}
#ffb .fb {width: 980px; position: relative; margin: auto;}
#ffb .row div {margin-right: 10px;}

#bottom {position: relative; padding: 20px; z-index: 25; text-align:center; background: #226ebc;}
#bot {width: 980px; position: relative; padding: 20px 0 0 0; margin: auto; font-size:15px;}
#bottom div,#bottom a {color: #fff;}
#bottom a.iframe {background: #fff; color:#226ebc; border: 1px solid #226ebc; text-decoration:none; display:inline-block; padding: 6px 10px;}
#bot .row div {margin: 0 20px; width: 23%;}
#bot hr {border: none; height: 1px; background:#fff;}
#bot ul {margin:0; padding:0; list-style:none;}
#bot ul li {margin: 0 0 8px 0;}
.copy {font-size: 14px; line-height: 50px; background-color: #094a8d; color:#eee; text-align:center;}
.copy div {width: 980px; margin:auto;}
.copy a {color:#eee;}

#acookie {left:0; bottom:0; width: 100%; position: fixed; z-index: 2000; padding: 0 0 20px 0; text-align:center; background: #ffffff; box-shadow: 0px -6px 8px 0px rgba(50, 50, 50, 0.2);}
#acookie p {padding: 0 20px;}
#acookie .yes {background: #226ebc; cursor:pointer; display:inline-block; padding: 6px 10px;  margin:auto; color:#fff; border-radius: 12px;}


@media screen and (max-width: 980px) {
#topfon {height: 60px;}
#top{width: auto; position: relative;}
#menu,.topcontact,.topwp {display:none;}
#mtel,.mobtel {display:block;}
#imenu {display:block; z-index:100;}
#tel a {color:#95ca95; text-decoration:none;}
#logo {left: 10px;}
#search {width:auto; margin: 10px;}

#mmenu0 {top: 0px; right: 0px; position: absolute; width: 90%; height:auto; background: #226ebc;}
#mmenu {position: relative; margin: 10px; background:#226ebc;}
#mmenu ul {margin: 0; padding: 0; list-style: none;}
#mmenu ul ul {margin-left:10px; display:block;}
#mmenu ul li {background: #226ebc; border-bottom: 1px solid #85a4bb;}
#mmenu ul ul li {background: none;}
#mmenu ul a {text-decoration:none; color:#d5e1ed; font-size: 16px; display:block; padding: 9px 10px; margin-right: 10px;}
#mmenu ul a {background: url(img_d/mcurs.png) no-repeat 100% 10px;}
#mmenu a.m2 {background: url(img_d/mcurs1.png) no-repeat 100% 10px;}
#mmenu a.self {border-bottom: 2px solid #cf2e2e;}
#menu ul ul a {font-weight:normal;}
.topz {top: auto; right: auto; width: 30%; height: 60px; position: relative;}
#fb {top: auto; right: auto; width:380px; height:287px; border-radius: 50px; position: relative; text-align:center; margin:auto;}
#docs {margin: 0; flex-wrap: wrap; padding: 0; width: auto;}
#docs p.hk {margin:10px;}
div.filter {width: 100%; margin: 0 20px 0 20px;}
.fopen {display:block;}
.filterform {display:none;}
#doc {width: auto; margin: 10px;}
#doc .catlist {text-align:center;}

#imenu {display:block;}

#bot,.copy div,#ffb .fb {width: auto;}
.copy div {padding: 0 10px;}
.row {flex-wrap: wrap;}
.row div,.row a {width: auto; flex: 1 0 46%;}
}

@media screen and (max-width: 680px) {
#ide .adr {display:none;}
#doc h1 {font-size:24px;}
#doc table {display:block; overflow-x: auto;}
#doc div.product-card {text-align:center;}
#doc div.product-card div.product-image {width: auto; float:none;}
#doc div.product-card div.product-image img {width: 360px; height:auto;}
}

@media screen and (max-width: 480px) {
#doc div.gal {width: 300px;}
.carousel-container {width: 315px; margin-left: 10px;}
#doc .gal-block div.gal {width: 300px;}
#doc .itop a {width:100%;}
#doc div.product-card div.product-image img {width: 300px; height:auto;}
#fb {width:320px;}
.row div,.row a {width: auto; flex: 1 0 90%;}
}