@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Hattori'; /* Имя шрифта */
    src: url('hattori-webfont.eot'); /* Путь к файлу со шрифтом */
	font-style: normal;
}

@font-face {
    font-family: Hattori; /* Имя шрифта */
    src: url(fonts/Hattori.otf); /* Путь к файлу со шрифтом */
	font-style: normal;
   }

@font-face {
    font-family: Hattori; /* Имя шрифта */
    src: url(fonts/Hattori_italic.otf); /* Путь к файлу со шрифтом */
	font-style: italic;
   }
   
* { margin: 0px; padding: 0px; }

body {
    width: 100%;
    background: #171616 url(../images/body_bg.jpg) repeat;
    font-family: Hattori, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #fff;
}

.clearblock { clear: both; }

a {
    font-size: 15px;
    color: #04C1C1 !important;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
    color: #D8F019 !important;
}

img {
    border: 0px;
}

.header {
    margin: 30px 0px 0px 0px;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff;
    height: 67px;
}
.header .logo {
    float: left;
    margin: 5px 0px 0px 10px;
}
.header .logo a {
    display: block;
}

.header .info {
    float: left;
    margin: 37px 0px 0px 135px;
    padding: 1px 0px 4px 35px;
    background: url(../images/info_ico.png) no-repeat left;
}
.header_contacts {
    float: right;
    width: 300px;
    margin: 18px 40px 0px 0px;
    background: url(../images/header_phone_ico.png) no-repeat left bottom;
    padding: 0px 0px 0px 40px
}
.header_contacts span.big { display: block; font-size: 18px;  }
.header_contacts span.big .code { color: #D8F019; }

.main_menu { padding: 22px 0px 34px 0px; }
.main_menu li { list-style:none; float:left; padding: 0px 20px; }
.main_menu .item5, .main_menu .item6 {float:right;}

.topmenu { display: flex; background: url(../images/white_alpha.png) repeat; padding: 8px 10px 6px 20px; margin: 25px 0px 0px; }
.topmenu ul { padding: 0px 0px 0px 35px; background: url(../images/topmenu_bg.png) no-repeat left; min-height: 20px; } 
.topmenu ul li { list-style: none; float: left; margin: 0px 35px 0px 0px; }
.topmenu ul li a:hover, .topmenu ul li.active a { #color: #D8F019; }
.topmenu ul li:last-child { margin-right: 0px; }

.news-box { margin: 40px 0px 0px; }
.news-box h3 { width: 125px; height: 25px; padding: 7px 5px 3px 55px; background: url(../images/news_h3bg.png) no-repeat; margin: 0px 0px 30px; }
.news-box h3 a { font-size: 15px; font-weight: normal; }
.news-box .item-box { float: left; width: 300px; margin: 0px 0px 0px 33px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.news-box .item-box .date { float: left; width: 51px; margin: 0px 12px 0px 0px; padding: 3px 3px; background: #D8F019; color: #000; text-align: center; }

.news-box .item-box .info { float: left; width: 230px; line-height: 140%; }
.news-box .item-box .info p { text-indent: -6px; }
.news-box .item-box h4 { font-weight: normal; margin: 0px 0px 5px; }
.news-box .item-box h4 a { font-size: 12px;  }

.about {background: url(../images/white_alpha.png) repeat; padding: 18px 0px 36px 0px; margin: 20px 0px 60px 0px;  }
.about h3 { font-size: 15px; font-weight: normal; color: #04C1C1; text-decoration:underline; background: url(../images/about_uralvik.png) no-repeat; padding: 10px 0px 8px 50px;  font-family: Hattori, "Trebuchet MS", Arial, Helvetica, sans-serif; }
.about_text {padding: 23px 37px 0px 50px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 130%; }

.box-categories li { list-style: none; background: url(../images/white_alpha.png) repeat; padding: 9px 10px 9px 46px; min-height: 17px; width: 138px; position: relative; margin: 0px 0px 5px;  }
.box-categories li:hover, .box-categories li.active { background: none;}
.box-categories li a { background: url(../images/leftmenu_li.png) no-repeat right; display: block; }
.box-categories li:hover a, .box-categories li.active a { background: url(../images/leftmenu_lihov.png) no-repeat right;  }
.box-categories li ul { position: absolute; display: none; top: 0px; left: 194px; width: 190px; padding: 0px 0px 0px 6px; }
.box-categories li ul li, .box-categories li ul li:hover { padding: 9px 10px 9px 16px; margin: 0px; width: 164px; background: url(../images/white_alpha.png) repeat; }
.box-categories li ul li a, .box-categories li:hover ul li a { background: url(../images/leftmenu_cli.png) no-repeat left; padding: 0px 0px 0px 13px; }
.box-categories li ul li:hover a, .box-categories li:hover ul li:hover a { background: url(../images/leftmenu_clihov.png) no-repeat left; }
.box-categories li:hover ul , .box-categories li.active ul { display: block; }

.box-news { margin: 0px 0px 35px 0px; }
.box-news .news-left { float: left; width: 110px; margin: 3px 0px 0px 0px; }
.box-news .news-right { float: left; }
.box-news .news-desc { text-indent: -6px; margin: 0px 0px 10px 0px; }
.box-news .date { padding: 3px 7px; background: #D8F019; color: #111; text-align: center; font-size: 12px;  }
.box-news h3 { font-size: 15px; color: #fff; margin: -3px 0px 10px 0px; }

.box-categories h3 { background: url(../images/leftmenu_h3bg.png) no-repeat; padding: 9px 10px 5px 46px; height: 21px; font-size: 15px; color: #d8f019; font-weight: normal; margin: 13px 0px 7px 0px;   }

.breadcrumb { display: none; }

h1 { font-size: 15px; font-weight: normal; color: #d8f019; background: url(../images/about_uralvik.png) no-repeat; padding: 9px 0px 9px 50px; margin: 0px 0px 30px -30px; font-family: Hattori, "Trebuchet MS", Arial, Helvetica, sans-serif; }

h2 { font-size: 15px; font-weight: normal; color: #d8f019; margin: 0px 0px 30px 0px; font-family: Hattori, "Trebuchet MS", Arial, Helvetica, sans-serif;  }

.category-list ul li { list-style: none; margin: 10px 0px 10px 0px; }
	
.products-grid { margin: 0px 0px 30px 0px; }
.product-box { float: left; margin: 0px 55px 0px 0px; width: 122px; font-size: 12px; }
.product-box .image { height: 120px; margin: 0px 0px 10px 0px; }
.product-box .image img { border: 1px solid #fff; }
.product-box .name { margin: 0px 0px 0px 0px; height: 30px;}
.product-box .name a {  margin: 0px 0px 10px 0px; color: #fff !important; }
.product-box .price { margin: 0px 0px 5px 0px; font-size: 12px; color: #fff; }
.product-box .price-old  { text-decoration: line-through; color: #ccc; }

.category-info table { border-top: 1px dashed #fff; border-left: 1px dashed #fff; margin: 0px 0px 30px 0px; }
.category-info td { border-bottom: 1px dashed #fff; border-right: 1px dashed #fff; padding: 6px 12px; }

.product-info .desc { line-height: 20px; font-size: 12px; }

#fancy_cart a,  #fancy_cart h3 { color: #000 !important; font-size: 18px; padding: 10px; }
#fancy_cart { text-align: center; }



#order_call h3, #order_call a  { font-size: 18px; color: #000 !important; text-align: center; margin: 0px 0px 10px;  }
#order_call .field { color: #333; width: 400px; margin: 10px 5px; min-height: 22px; }
#order_call .field .oc_left { float: left; width: 190px; } 
#order_call .field .oc_right { float: left; width: 205px; } 
#order_call .field input[type="text"] { width: 190px; padding: 1px; }
#order_call #order_ok { color: #C00; height: 22px; text-align: center;  }

.box-products { margin: 30px -30px 0px; padding: 20px 30px 0px; border-top: 1px dashed #fff; } 
.box-products { }
.footer { margin: 0px 0px 23px 0px; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff; height: 100px; }
.footer .copyright { float: left; margin: 20px 0px 41px 50px}
.footer .contacts {float: left; margin: 20px 0px 20px 203px; padding: 0px 0px 0px 86px; background: url(../images/phone_ico.png) no-repeat left; line-height: 140%;}
.copyright span, .contacts span { display: block; }

/*.footer .contacts .mail {font-size: 15px; font-weight: normal; color: #04C1C1; display: inline; text-decoration:underline;}*/

.footer .design { float:left; margin: 20px 0px 41px 108px; }

@media only screen and (max-width: 550px) {
    .main_menu li[class^="item"] {
        /*float: none;*/
        padding: 0;
    }
    .main_menu ul {
        display: flex;
        gap: 20px 30px;
        flex-wrap: wrap;
        padding: 0 20px;
    }
    .topmenu ul {
        display: flex;
        gap: 10px 20px;
        flex-wrap: wrap;
    }
    .topmenu ul li {
        margin: 0;
        min-width: 120px;
    }
    div.footer {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-direction: column;
        height: auto;
        padding: 10px 0;
    }
    .content div.footer div {
        margin: 0;
    }
    .content div.footer div:nth-child(2) {
        order: 1;
    }
    .content div.footer div:first-child {
        order: 2;
    }
    .content div.footer div:last-child {
        order: 3;
    }
}
@media only screen and (min-width: 1200px) {
    .wrapper {
        width: 1190px;
        margin: 0px auto;
    }
}