.top-bar-contact {background-color: var(--two); color: var(--one); height: 40px; font-size: 14px; line-height: 20px;}
.top-bar-contact .phones,
.top-bar-contact .mails {display: flex; gap: 30px;}
.top-bar-contact a {color: var(--light); white-space: nowrap; padding: 10px 0; display: flex; gap: 10px; flex-wrap: nowrap; align-items: center;}
.top-bar-contact li:hover {opacity: 0.7;}
.top-bar-contact svg {display: block; height: 15px; width: 15px;}
.top-bar-contact li svg * {fill: var(--one);}
.top-bar-contact .d-flex {gap: 30px;}
.top-bar-contact .social-media {display: flex; gap: 20px;}

.menu-bar {height: 110px; background-color: var(--three); z-index: 1000;}
.menu-bar.sticky {position: sticky; top: 0;}
.menu-bar__logo {padding: 10px 0; display: block;}
.menu-bar__logo img,
.menu-bar__logo__svg {display: block; width: auto; max-width: 320px; max-height: 50px;}
.menu-bar .menu {display: flex; font-weight: 400;}
.menu-bar .menu .menu-item > a {padding: 44px 15px; display: block; color: var(--one);}
.menu-bar .menu .menu-item.current-menu-item > a {color: var(--two);}
.menu-bar .menu .menu-item:hover > a {opacity: 0.7;}
.menu-bar .menu > .menu-item.button {margin-left: 15px;}

@media (min-width: 768px) {
	.menu-bar .menu > .menu-item.button {padding: 29px 0;}
	.menu-bar .menu > .menu-item.button a {padding: 15px 40px; background-color: var(--two); color: var(--one); border-radius: 5px;}
	.menu-bar .menu > .menu-item.button:hover a {background-color: var(--two-dark); opacity: 1;}
}

.sub-menu { display: none }
.menu-bar__bars {cursor: pointer;}
.menu-container { z-index: 1000; visibility: visible;}
.menu-item--return { display: none; }

@media (max-width: 1199.98px) {
	.top-bar-contact li:nth-child(2) {display: none;}
	.menu-bar__logo__svg {max-width: 220px; max-height: 30px;}
	.menu-bar .menu .menu-item > a { padding: 44px 10px };
}

@media (max-width: 991.98px) {
	.menu-bar .menu .menu-item > a {padding: 44px 5px; font-size: 14px;}
	.menu-bar .menu > .menu-item > a {font-size: 14px;}
}

@media (max-width: 767.98px) {
	.top-bar-contact li span {display: none;}
	.menu-bar {position:relative; height: 50px;}
	.menu-bar .menu-container {position: absolute; width: 100%; top: 100%; left: 0; padding: 15px;}
	.menu-bar .menu-container--hidden {opacity: 0; visibility: hidden; transform: translateY(10px);}
	.menu-bar .menu-container--hidden .menu, 
	.menu-bar .menu-container--hidden .sub-menu,
	.menu-bar .menu-container--hidden .menu-item,
	.menu-bar .menu-container--hidden .menu .menu-item > a {transition: none;}
	.menu-bar .menu, 
	.menu-bar .sub-menu, 
	.menu-bar .menu-item-has-children > a::after {transition: 0.3s all ease; transform: translateX(0);}
	.menu-bar .menu {flex-direction: column;}
	.menu-bar .sub-menu {display: block; opacity: 0; position: absolute; top: 0; width: 100%; left: 100%;}
	.menu-bar .menu-item {padding-right: 3em; background-color: var(--three);}
	.menu-bar .menu > .menu-item.button {margin-left: 0;}
	.menu-bar .menu-item--return {display: flex; cursor: pointer; align-items: center; background-color: var(--three-light); padding: 0 0.5em;}
	.menu-bar .menu-item--return__img {width: 1.5em;}
	.menu-bar .menu .menu-item > .menu-item--return__link {padding-left: 1em;}
	.menu-bar .menu-item:hover {background-color: var(--three-light); color: var(--one); cursor: pointer;}
	.menu-bar .menu .menu-item > a {font-size: 16px; padding: 0.6em 1.5em; position: relative;}
	.menu-bar .menu .menu-item:hover > a {opacity: 1;}
	.menu-bar .menu-item-has-children > a::after {position: absolute; left: 100%; top: 0; opacity: 1; content: ""; background-image: url(/wp-content/themes/ks/images/next.png); background-size: 50%; background-repeat: no-repeat; background-position: center; width: 3em; height: 100%;}
	.menu-bar .menu--hide {transform: translateX(-100%);}
	.menu-bar .menu--hide > .menu-item {background-color: transparent;}
	.menu-bar .menu--hide > .menu-item > a, 
	.menu-bar .menu--hide > .menu-item > a:hover,
	.menu-bar .menu--hide > .menu-item-has-children > a::after {opacity: 0;}
	.menu-bar .menu--hide > .menu-item > .sub-menu {opacity: 1;}
}

@media (min-width: 768px) {
	.menu-bar .menu-item {position: relative}
	.menu-bar .sub-menu {display: none;}
	.menu-bar .menu-item > .sub-menu {flex-direction: column; position: absolute; width: max-content; top: 100%; left: 0;}
	.menu-bar .sub-menu .sub-menu {top: 0; left: 100%;}
	.menu-bar .menu-item:hover > .sub-menu {display: flex;}
	.menu-bar .sub-menu .menu-item {background-color: var(--three); transition: 0.3s all ease;}
	.menu-bar .sub-menu .menu-item:hover {background-color: var(--three-dark);}
	.menu-bar .sub-menu .menu-item:hover > a {opacity: 1;}
	.menu-bar .sub-menu .menu-item > a {padding: 1em 15px;}
}