/***Fonts***/

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=latin,latin-ext,cyrillic-ext);

@font-face {
font-family:'ubuntu';
font-style:normal;
font-weight:100;
src:local('ubuntu'), local('ubuntu'), url(../style/fonts/ubuntu.ttf) format('truetype');
}

@font-face {
font-family:'ubuntu_light';
font-style:normal;
font-weight:100;
src:local('ubuntu_light'), local('ubuntu_light'), url(../style/fonts/ubuntu_light.ttf) format('truetype');
}

@font-face {
font-family:'bicubik';
font-style:normal;
font-weight:100;
src:local('bicubik'), local('bicubik'), url(../style/fonts/bicubik.ttf) format('truetype');
}

/***End.Fonts***/

html,body {height:100%;}
body {
margin:0;
font:300 15px/25px 'Roboto', Tahoma, Calibri;
color:#000;
background:#f5f5f6;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
height:100%;
min-width:1240px;
letter-spacing:0.5px;
}

body:before {
display:block;	
position:fixed;
content:"";
top:0;
left:0;
width:100%;
height:100%;
background:rgba(51,51,51,.3);
transition:all .4s ease;
opacity:0;
}

body.show-menu:before {
transition:all .4s ease;
opacity:1;
z-index:998;
}

*, *:after, *:before {-webkit-box-sizing:border-box;box-sizing:border-box;}
.clearfix:before, .clearfix:after {content:'';display:table;}
.clearfix:after {clear:both;}

::selection {
background-color:#F7E800;
}

.wrap {
position:relative;
display:block;
width:1240px;
height:auto;
margin:auto;
}

.container {
position:relative;
display:block;
width:1180px;
height:auto;
margin:auto;
}

.ptb {padding:20px 0;}
.pt {padding-top:20px;}
.pb {padding-bottom:20px;}
.ptbmin {padding:10px 0;}

.table {display:table;}

.white {
background:#fff;
-webkit-box-shadow:0 0 15px #bcbcbd;
-moz-box-shadow:0 0 15px #bcbcbd;
box-shadow:0 0 15px #bcbcbd;
}
.grey {background:#ececed;}
.darkgrey {background:#d8d8d8;}

/***Header***/

header {
position:relative;
display:block;
width:100%;
min-width:1180px;
height:auto;
z-index:558;
background:#fff;
transition:all .4s ease;
}

.logo {
float:left;
background:url(../img/honsberg_logo.png) no-repeat transparent;
background-size:200px;
background-position:center;
text-transform:uppercase;
transition:all .4s ease;
width:200px;
height:135px;
overflow:hidden;
}

.logo p {font:300 15px/15px 'bicubik', Tahoma, Calibri;margin:0 0 10px 2px !important;letter-spacing:2px;}

#logo-msintegra {float:left;width:200px;height:135px;margin:0 80px 0 0;background:url(../img/logo-msi.png) no-repeat center transparent;background-size:200px;}

.city {
display:none;    
padding:0 0 0 20px;
float:left;
font:300 15px/135px 'ubuntu_light', Tahoma, Calibri;
}

#ghm {
float:left;
width:106px;
height:135px;
margin:0 0 0 80px;
background:url(../img/ghm.png) no-repeat center transparent;
background-size:106px;
}

.contacts {
float:right;
text-align:right;
padding:28px 0;
font:300 20px/20px 'ubuntu_light', Tahoma, Calibri;
transition:all .4s ease;
}

.contacts a,
.contacts a:hover {border:0; color:#000;}

.contacts p {font:300 20px/20px 'ubuntu_light', Tahoma, Calibri;margin:0;}
.contacts p:last-child {margin:15px 0 0;}

.contacts span {border-bottom:1px dashed #000;cursor:pointer;}
.contacts span:hover {border-bottom:1px solid #000;}

/***End.Header***/

/***Nav***/

.topmenu {
width:100%;
height:51px;
border-top:4px solid #6d6e6f;
border-bottom:1px solid #bcbcbd;
background:#ececed;
}

#search {
float:left;
width:220px;
}

#nav {
text-align:center;
width:1180px;
margin:auto;
}

#nav:after {
content:"";
display:block;
clear:both;
}

#nav,#nav li ul{
margin:auto;
padding:0px;
list-style:none;
}

#nav > li{
float:left;
}

#nav li ul{
display:none;
position:absolute;
z-index:100;
}

#nav li a {
display:block;
}

#nav li:hover ul{display:block}

#nav > li{
width:20%;
text-align:center;
padding:0;
}

#nav > li > a{	
display:inline-block;
color:#000;
text-decoration:none; 
font:300 15px/19px 'ubuntu_light', Tahoma, Calibri;
margin:14px 0; 
border-bottom:1px solid rgba(0,0,0,.4);
}

#nav > li.hover > a,
#nav > li > a:hover {
color:#32597a;
border-bottom:1px solid #32597a;
}

#nav > li.active > a,
#nav > li.active > span{
display:block;
color:#fff;
background:#6d6e6f;
padding:14px 0;
margin:0;
border:1px solid transparent;
}

/***End.Nav***/

/***Page***/

#breadcrumbs {
float:left;
font:300 13px/25px 'ubuntu_light', Tahoma, Calibri;
margin:0 20px 0 0;
}

#ya-search-honsberg {
float:right;
width:300px;
margin:0 0 0 20px;
}

#sidebar_l {
float:left;
width:270px;
height:auto;
/**background:#ececed;**/
border-top:0;
}

#sidebar_l .title {
background:#6d6e6f/**#32597a**/;
width:100%;
color:#fff;
font:300 15px/45px 'ubuntu_light', Tahoma, Calibri;
text-transform:none;
text-align:center;
}

#sidebar_l #new_arrival {
padding:10px;
}

#sidebar_l #new_arrival img{
width:auto;
height:200px;
}

#content {
float:right;
width:890px;
height:auto;
}

.block {
position:relative;
float:left;
width:220px;
height:auto;
padding:10px;
margin:10px 20px 0 0;
background:#ececed;
transition:all .4s ease;
}

.block:hover {
background:#32597a;
transition:all .4s ease;
}

.last {margin-right:0 !important;}

.block img {
position:relative;
width:200px;
height:200px;
opacity:1;
z-index:1;
background:#fff;
padding:20px;
}

a.ctlg, a.ctlg:hover {
display:block;
padding:10px 20px;
text-align:center;
background:#fff;
border:0;
color:#000;
font:300 15px/25px 'ubuntu_light', Tahoma, Calibri;
}

/**.block a {
position:absolute;
bottom:10px;
display:block;
width:160px;
padding:9px 0;
margin:10px;
font:300 15px/25px 'ubuntu_light', Tahoma, Calibri;
border:1px solid rgba(0,0,0,.4);
background:rgba(255,255,255,.6);
color:#000;
text-align:center;
z-index:699;
}

.block:hover a {
background:rgba(50,89,122,.2);
border:1px solid #32597a;
}**/

ul.spec {width:100%;height:auto;margin:0 0 20px;}
ul.spec li {width:100%;height:auto;padding:10px;background:#f1f1f2;margin:0 0 2px;}
ul.spec li.small {font-size:13px;}
ul.spec li:nth-child(2n+1) {background-color:#ececed;}
ul.spec li:last-child {margin:0;}
ul.spec li:hover {background:#32597a;color:#fff;}
ul.spec li a {color:#000;border-bottom:1px solid rgba(0,0,0,.4);}
ul.spec li:hover a {color:#fff;border-bottom:1px solid rgba(255,255,255,.4) !important;}
ul.spec li a:hover {color:#fff;border-bottom:1px solid #fff !important;}

.clear {
clear:both;
height:0;
overflow:hidden;
}

/***End.Page***/

/***Catalognav***/

#catalognav {
text-align:center;
width:100%;
margin:auto;
background:#ececed;
}

#catalognav:after {
content:"";
display:block;
clear:both;
}

#catalognav,#catalognav li ul{
margin:auto;
padding:0px;
list-style:none;
}

#catalognav > li{
/**float:left;**/
}

#catalognav li ul{
display:none;
position:absolute;
z-index:100;
}

#catalognav li a {
display:block;
}

#catalognav li:hover ul{display:block}

#catalognav > li{
text-align:left;
padding:0;
}

#catalognav > li > a{
display:inline-block;
color:#000;
text-decoration:none; 
font:300 15px/25px 'Roboto', Tahoma, Calibri;
width:auto;
margin:10px; 
text-transform:none;
border-bottom:1px dashed #000;
}

#catalognav > li > a.full{
border-bottom:1px solid rgba(0,0,0,.4);
}

#catalognav > li:first-child > a{
margin-top:20px; 
}

#catalognav > li:last-child > a{
margin-bottom:20px; 
}

#catalognav > li.hover > a,
#catalognav > li > a:hover,
#catalognav > li.active > a,
#catalognav > li.active > span {
color:#32597a;	
border-bottom:1px solid #32597a;
}

#catalognav li ul{
display:block;	
margin:0; 
width:auto;
max-width:270px;
padding:0;
background:#fff;
border-right:2px solid #ececed;
border-left:2px solid #ececed;
}

#catalognav li ul li{
text-align:left;
vertical-align:top;
}

#catalognav li ul li a{
color:#fff;
font:300 14px/20px 'Roboto', Tahoma, Calibri;
padding:10px 20px;
display:block;
border-bottom:0;
}

#catalognav li ul li:first-child a{
padding-top:20px;
}

#catalognav li ul li:last-child a{
padding-bottom:20px;
}

#catalognav li ul li a {color:#000;}

#catalognav #nav li ul li a.none {display:none;}

#catalognav li ul li a:hover{
color:#32597a;	
}
/***End.Catalognav***/

/***Fixed***/

.autofix_sb.fixed {
position:fixed !important;
left:auto;
top:190px;
right:auto;
bottom:auto;
height:100%;
width:280px;
overflow:auto;
}

.autofix_sb.fixed.bottom {
bottom:0;
position:absolute;
}

.sticky_div {
position:fixed;
z-index:101;
}
.stop {
position:relative;
z-index:101;
}

/***End.Fixed***/

/***Footer***/

footer {
width:100%;
background:#6d6e6f;
padding:20px 0;
color:#fff !important;
}

footer .logo {
float:left;
background:url(../img/honsberg_logo_w.png) no-repeat transparent;
background-size:270px;
background-position:center;
text-transform:uppercase;
transition:all .4s ease;
width:270px;
height:70px;
overflow:hidden;
}

footer .f_menu {
float:left;
margin-left:125px;
}

footer .f_menu p {margin:0;}

footer .f_menu a {color:#fff;border-bottom:1px solid rgba(255,255,255,.4);text-transform:none;line-height:40px;}
footer .f_menu a:hover {border-bottom:1px solid #fff;}

footer .f_menu a.big {text-transform:uppercase;}

footer .copyright {
float:right;
text-align:right;
}

footer .copyright p {line-height:40px;margin:0;}

footer .copyright a,
footer .copyright a:hover {color:#fff;border-bottom:0 !important;}

footer .container:first-child {
padding-bottom:40px;
margin-bottom:40px;
border-bottom:1px solid #a7a8a8;
}

footer .container:last-child p {
font:300 13px/20px 'Roboto', Tahoma, Calibri;
color:#e1e2e2;
margin:0;
}

#brvppl {
display:none;    
position:absolute;
bottom:20px;
right:20px;
text-align:right;
}

#brvppl a {color:#fff;border-bottom:1px solid rgba(255,255,255,.4);}
#brvppl a:hover {border-bottom:1px solid #fff;}

/***End.Footer***/

/***Элементы страницы***/

header, footer, article, section, hgroup, nav, figure {display:block;}
img {border-style:none;vertical-align:top;}
td {vertical-align:middle;}

span.color {color:#1364ad;}

a {text-decoration:none;color:#32597a;border-bottom:1px solid rgba(50,89,122,.4);}
a:hover {text-decoration:none;color:#000;border-bottom:1px solid #000;}

a.pseudo_link {border-bottom:1px dashed rgba(50,89,122,.4);}
a.pseudo_link:hover {border-bottom:1px solid #000;}

a.more {
position:relative;
display:inline-block;
margin:10px auto 0;
padding:10px 20px;
color:#000;
border:1px solid rgba(31,31,31,.4);
}
a.more:hover {color:#fff;background:#000;}

h1,h2,h3,h4,h5,h6,.h {font:300 18px/28px 'ubuntu_light', Tahoma, Calibri;text-transform:none;padding:0;margin:0 0 10px;}
h1 {font-size:30px;line-height:45px;}
h2 {font-size:27px;line-height:37px;}
h3 {font-size:24px;line-height:34px;}
h4 {font-size:21px;line-height:31px;}
h5 {font-size:18px;line-height:28px;}
h6 {font-size:15px;line-height:25px;letter-spacing:0;}

p {font:300 15px/25px 'Roboto', Tahoma, Calibri;margin:10px 0;}
p:first-child {margin-top:0;}
p:last-child {margin-bottom:0;}

.text__color-grey {color: #6d6e6f;}
.text__small {font-size:12px;line-height:20px;}

ul {margin:0;padding:0;list-style:none;}
address {font-style:normal;margin:0;padding:0;}

/***End.Элементы страницы***/

/***BackCall***/

.menubutton {color:#0082c2;border-bottom:1px dotted #0082c2;cursor:pointer;}
.menubutton:hover {color:#000;border-bottom:1px solid #000;}

.close-button {
width:25px;
height:25px;
position:absolute;
right:25px;
top:25px;
overflow:hidden;
text-indent:25px;
font-size:25px;
border:none;
cursor:pointer;
background:transparent;
color:transparent;
}

.close-button::before,
.close-button::after {
content:'';
position:absolute;
width:2px;
height:100%;
top:0;
left:50%;
background:#fff;
}

.close-button::before {
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

.close-button::after {
-webkit-transform: rotate(-45deg);
transform:rotate(-45deg);
}

.menu-container {
position:absolute;
width:100%;
top:50%;
left:0;
transform:translate(0,-50%);
-webkit-transform:translate(0,-50%);
}

.menu-container input[type="text"], .menu-container input[type="Tel"] { 
display:inline-block;
width:300px;
height:auto;
padding:10px;  
margin:0 auto 40px;
background:transparent; 
border:2px solid #fff;
font:300 15px/30px 'ubuntu', Tahoma, Calibri;
outline:none; 
text-transform:none;
color:#fff;
}

.menu-container > * {display:block;width:300px;margin:auto;}

.menu-container > * {color:#fff;}

.menu-container h5 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.menu-container p + p {
    margin-top: 16px;
}

.menu-container p a {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}

.menu-container p a:hover {
    color: #fff;
    border-color: #fff;
}

.menu-container input[type="text"]:focus, .menu-container input[type="Tel"]:focus {border:2px solid #66829b;}

.menu-container input[type="text"]::-webkit-input-placeholder, .menu-container input[type="Tel"]::-webkit-input-placeholder {color:#d8d8d8;}

.menu-container input[type="submit"], .menu-container input[type="button"] {
cursor:pointer;
display:inline-block;
width:300px;
padding:10px 20px;
margin:0 auto;
background:#32597a;
border:2px solid transparent;
color:#fff;
font:300 15px/30px 'ubuntu', Tahoma, Calibri;
text-transform:none;
}

.menu-container input[type="submit"]:hover, .menu-container input[type="button"]:hover {
border:2px solid #66829b;
background:#66829b;
}

.menu-wrap {
display:block;	
position:fixed;
z-index:1001;
width:33%;
min-width:360px;
height:100%;
min-height:auto;
right:0;
background:#000;
padding:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
-webkit-transition:-webkit-transform 1.2s;
transition:transform 1.2s;
-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1);
transition-timing-function:cubic-bezier(0.7,0,0.3,1);
overflow:auto;
}

.menu-wrap::-webkit-scrollbar{width:0px;}
.menu-wrap::-webkit-scrollbar-thumb{}
.menu-wrap::-webkit-scrollbar-thumb:hover{}
.menu-wrap::-webkit-scrollbar-track{}
.menu-wrap::-webkit-scrollbar-track:hover{}

.show-menu .menu-wrap {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transition:-webkit-transform 0.6s;
transition:transform 0.6s;
-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1);
transition-timing-function:cubic-bezier(0.7,0,0.3,1);
}

/***End.BackCall***/



/*** ----------------- mobile ----------------- ***/

@media screen and (max-width: 920px) {
		
	body {
		min-width: 320px;
	}	
        
    header,
    .wrap {
        width: 100%;
        min-width: 100%;
    }

    .container {
        width: calc(100% - 32px);
    }

    #sidebar_l,
    #content {
        float: none;
        width: 100%;
    }

    * + #content {
        margin-top: 32px;
        padding-top: 32px;
        border-top: 1.5px solid rgb(109,110,111,.32);
    }

    #sidebar_l .title {
        font-size: 14px;
        line-height: 40px;
    }

    header > .container {
        display: flex;
        flex-wrap: wrap;
    }

    header > .container > a,
    header > .container > #ghm {
        position: relative;
        width: 50%;
        height: 64px;
        margin: 0;
        border: 0;
    }

    header > .container > a .logo {
        float: none;
        background: url(../img/honsberg_logo.png) no-repeat transparent;
        background-size: contain;
        background-position: left center;
        text-transform: uppercase;
        transition: all .4s ease;
        width: 100%;
        height: 100%;
    }

    header > .container > #ghm {
        background: url(../img/ghm.png) no-repeat right center transparent;
        background-size: 50%;
    }

    header .contacts {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 12px 0 24px;
    }

    header .contacts,
    header .contacts p {
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        margin: 0 !important;
    }

    header .contacts > * {
        position: relative;
        width: calc(50% - 12px);
        height: 16px;
    }
    
    header .contacts > *:first-child {
        text-align: left;
    }

    header .contacts #open-button {
        display: none;
    }

    #breadcrumbs,
    #ya-search-honsberg {
        width: 100%;
        float: none;
        margin: 0;
    }

    * + #ya-search-honsberg {
        margin-top: 12px;
    }

    .block {
        float: none;
        width: 100%;
        margin: 10px 0 0;
    }

    .block > a:not(.ctlg) {
        width: 100%;
        position: relative;
        display: block;
        border: 0;
        background: #fff;
    }

    .block > a:not(.ctlg) > img {
        display: block;
        margin: auto;
    }

    footer > a,
    footer .logo,
    footer .f_menu {
        float: none;
        margin: 0;
    }

    footer a + .f_menu {
        margin-top: 32px;
    }

    footer .copyright {
        float: none;
        text-align: left;
        margin-top: 32px;
    }

    .sticky_div {
        position: relative !important;
    }

    ul.spec {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    ul.spec li {
        float: none;
        width: calc(50% - 2px);
        height: auto;
        min-height: 128px;
        padding: 24px 12px;
        margin: 2px 0 !important;
    }
    
    ul.spec li img {
        display: block;
        width: 128px;
        height: 128px;
        margin: 0 auto 16px;
    }

    ul.spec li a {
        font-size: 12px;
        line-height: 16px;
        width: fit-content;
    }

    .item-page {
        position: relative;
        max-width: 100%;
        overflow-x: scroll;
    }

    header + .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    header + .container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    header + .container > #sidebar_l {
        order: 99;
    }

    * + #content {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    header + .container > #sidebar_l {
        margin-top: 32px;
        padding-top: 32px;
        border-top: 1.5px solid rgb(109,110,111,.32);
    }

    header .topmenu {
        position: relative;
    }

    header .topmenu:before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('https://honsberg.ru/images/icons/icon__menu.svg') no-repeat center transparent;
        background-size: 8%;
        z-index: 1;
        transition: all .64s ease-in-out;
    }

    header .topmenu.__clicked:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        background: url('https://honsberg.ru/images/icons/icon__close.svg') no-repeat center transparent;
        background-size: 8%;
        transition: all .64s ease-in-out;
    }

    header .topmenu > nav {
        position: absolute;
        top: calc(100% + 16px);
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        pointer-events: none;
        opacity: 0;
        transition: all .64s ease-in-out;
        background: #6d6e6f;
        z-index: 123;
    }

    header .topmenu.__clicked > nav {
        position: absolute;
        top: 100%;
        opacity: 1;
        pointer-events: all;
        transition: all .64s ease-in-out;
        z-index: 123;
    }

    #nav,
    #nav > li {
        float: none;
        width: 100%;
    }

    #nav > li {
        border-top: 1.5px solid #6d6e6f;
    }

    #nav > li + li {
        border-color: rgba(255,255,255,.12);
    }

    #nav > li > a {	
        display: block;
        color: #fff;
        font: 500 14px/64px 'ubuntu_light', Tahoma, Calibri;
        margin: 0; 
        border-bottom: 0;
        text-transform: uppercase;
    }

    #nav > li.hover > a,
    #nav > li > a:hover {
        color: #6d6e6f;
        background: #fff;
        border-bottom: 0;
    }

    #nav > li.active > a,
    #nav > li.active > span {
        display:block;
        color:#fff;
        background:#6d6e6f;
        padding: 0;
        margin: 0;
        border: 0;
    }

    body.__open-menu {
        overflow: hidden;
    }

    body.__open-menu:before {
        transition: all .4s ease;
        opacity: 1;
        z-index: 408;
    }

}