header { background: #fff; position: fixed; z-index: 99; left: 0; right: 0; height: 112px; font-size: 16px; line-height: 24px; box-shadow: 8px 8px 16px 4px rgba(133, 139, 146, 0.06); .container { height: inherit; display: flex; align-items: center; justify-content: space-between; padding: 0; background: #fff; &:after { display: none; } } a { text-decoration: none; color: #000; &.logo { transform: translateY(4px); } } .header_menu { margin: 0 32px; padding: 0 32px; border-left: 1px solid #e7e9f0; border-right: 1px solid #e7e9f0; display: flex; align-items: center; justify-content: space-between; height: 32px; width: 100%; &:last-child { border-right: 0; padding-right: 0; margin-right: 0; } nav { .nav_toggle { display: none; } ul { display: flex; li { &:not(:last-child) { margin-right: 24px; } &:last-child { margin-right: 63px; } a.active { color: var(--blue); font-weight: 700; } &.active { a { color: var(--blue); font-weight: 700; } } } } } } .lk { display: block; text-decoration: none; min-width: 32px; width: 32px; height: 32px; background: url("/assets/images/icons/icon-lk.svg") no-repeat center; } @media all and (max-width: 1420px) { font-size: 15px; line-height: 24px; a { &.logo { img { width: 180px; height: 26px; object-fit: contain; } } } .header_menu { padding: 0 16px; margin: 0 16px; nav { ul li { &:not(:last-child) { margin-right: 15px; } &:last-child { margin-right: 30px; } } } } } @media all and (max-width: 1279px) { font-size: 15px; line-height: 24px; height: 86px; a { &.logo { img { width: 130px; height: 20px; } } } .header_menu { padding: 0 16px 0 32px; margin: 0 16px 0 32px; nav { height: 23px; position: relative; .nav_toggle { display: block; height: 23px; z-index: 3; background-image: url("/assets/images/icons/icon-select.svg"); background-repeat: no-repeat; background-position: 100% 50%; font-size: 15px; color: var(--blue); font-weight: 700; padding-right: 24px; padding-left: 0; cursor: pointer; } ul { display: block; position: absolute; background: #fff; padding: 15px 20px; top: 25px; left: -20px; width: 320px; &:not(.open) { display: none; } li { &:not(:last-child) { margin-bottom: 6px; } a { font-size: 15px; } } } } a[href^="tel:"] { width: 32px; height: 32px; background: url("/assets/images/icons/icon-header-phone.svg") no-repeat center; text-indent: -9999px; overflow: hidden; margin-left: auto; } } } @media all and (max-width: 768px) { height: 84px; .container { padding-bottom: 35px; } .header_menu { border-left: 0; padding-left: 0; margin-left: 0; height: 24px; nav { position: absolute; left: 0; bottom: 9px; } a[href^="tel:"] { width: 24px; height: 24px; background-size: contain; } } .lk { width: 24px; height: 24px; min-width: 24px; background-size: contain; } } }