﻿
/*------ СТИЛИ КНОПКИ МЕНЮ НАЧАЛО ------*/

.main-menu-span-box {
    display: none;
    width: 33px;
    height: 33px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
	z-index:1030;
}

.custom-logo-link img {
	max-height:40px!important;
	width:auto;
}

.main-menu-span-box span {
    position: relative;
    background: black;
    width: 33px;
    height: 2px;
    opacity: 1;
    z-index: 21;
    transition: all .3s;
}

.main-menu-span-box.menu-clicked span {
    background: transparent;
    transition: all .3s;
}

.main-menu-span-box span:before {
    position: absolute;
    content: '';
    background: black;
    height: 2px;
    width: 33px;
    top: -14px;
    left: 0;
    z-index: 6;
    transition: all .3s;
}

.main-menu-span-box.menu-clicked span:before {
    transform: rotate(45deg);
    top:0px;
    transition: all .3s;
}

.main-menu-span-box span:after {
    position: absolute;
    content: '';
    background: black;
    height: 2px;
    width: 33px;
    bottom: -14px;
    left: 0;
    z-index: 6;
    transition: all .3s;
}

.main-menu-span-box.menu-clicked span:after {
    transform: rotate(-45deg);
    bottom: 0px;
    transition: all .3s;
}


/*------ СТИЛИ КНОПКИ МЕНЮ КОНЕЦ ------*/


/*------СТИЛИ МЕНЮ НАЧАЛО------*/
#phone-in-header-box a {
	position:relative;
	z-index:100;
}

.main-menu-block {
	background:#fff;
}

.main-menu-company-name {
	margin:0;
	margin:0;
	padding: 0px 0px 0px 10px;
}

.oficial-sales {
	font-size:12px;
	text-transform:lowercase;
	line-height:120%;
	color:#000;
}

.main-menu-logo-box {
	z-index:100;
}

.main-menu-logo-box a {
	color:black;
}

.navbar-box {
    position: relative;
    height: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
	z-index:1200!important;
}

.navbar-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
	z-index:51;
}

.navbar-middle {
    width: 100%;
	height:100%;
	z-index:20;
}

.navbar-middle li {
    list-style-type: none;
}

.navbar-middle li a {
    padding: 5px 15px;
		line-height:125%;
}

#header-menu-container li {
	text-transform:uppercase!important;
}

.sub-menu li a {
	text-transform:capitalize!important;
	
}

.sub-menu li {
	background:#fff;
	
}

.main-menu-box {
	display: flex;
	align-items:center;
    flex-wrap: wrap;
    transition: all .3s ease-in-out;
	background:#fff;
}


/* ЕСЛИ НУЖНО ВЫДЕЛИТЬ ЦВЕТОМ КНОПКУ ТЕКУЩЕЙ СТРНИЦЫ */

/*
li.current-menu-item a {
	color:#000!important;
}
*/

/*  ЕСЛИ НУЖНО ВЫДЕЛИТЬ ЦВЕТОМ КНОПКУ ТЕКУЩЕЙ СТРНИЦЫ КОНЕЦ   */


.navbar-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

/* ---------- СТИЛИ КНОПОК МЕНЮ НАЧАЛО ---------- */



#header-menu-container ul.menu {
	padding:0;
	margin:0;
	display:flex;
	align-items:center;
}


li.menu-item-has-children>a {
	padding-right:25px;
	position:relative;
}

li.menu-item-has-children>a:before {
	position: absolute;
	content:'';
	top:42%;
	right:10px;
	border: 5px solid transparent; border-top: 5px solid #fff;
	z-index:100;
}

li.menu-item-has-children>a:after {
	position: absolute;
	content:'';
	top:45%;
	right:10px;
	border: 5px solid transparent; border-top: 5px solid teal;
}


ul.sub-menu li a {
	display:flex;
}

ul.sub-menu li a:hover {
	color:#fff!important;
	background:orange;
}

li.menu-item-has-children {
	position:relative;
}

li.menu-item-has-children ul.sub-menu {
	padding-left:0;
	position:absolute;
	left:10px;
	top:27px;
	display:none;
	background:#fff;
	min-width:200px;
}

ul.sub-menu {
	margin-left:none;
	box-shadow:0 0 10px rgba(0,0,0,.5);
}

ul.sub-menu li.menu-item-has-children {
	position:relative;
}

ul.sub-menu li.menu-item-has-children ul {
	position:absolute;
	left:100%;
	top:0px;
	display:none!important;
	min-width:200px;
}

li.menu-item-has-children:hover ul.sub-menu {
	display:block;
}

ul.sub-menu li.menu-item-has-children:hover ul {
	display:block!important;
}

ul.sub-menu li.menu-item-has-children ul.sub-menu ul {
	display:none!important;
}

ul.sub-menu ul.sub-menu li.menu-item-has-children:hover ul {
	display:block!important;
}










@media only screen and (max-width: 992px) {
	
	#header-menu-container {
		width:100%;
	}
	
	#header-menu-container ul.menu {
		display:block;
		width:100%;
	}
	
	.main-menu-box {
		box-shadow: none;
		position:absolute;
		top:48px;
		left:-100%;
		width:100%;
		padding-top:10px;
		padding-bottom:15px;
	}
	
	.main-menu-box.menu-clicked {
		overflow:auto;
		max-height:92vh;
		left: 0;
		z-index:5!important;
		transition: all .3s ease-in-out;
	}
	
	.main-menu-box li a {
		display:flex;
		font-size:22px;
		padding-top:7px;
		padding-bottom:7px;
		text-transform:uppercase;
		border-bottom: solid 1px #efefef;
	}
	
	.main-menu-span-box {
		display:flex;
		align-items:center;
	}
	
	li.menu-item-has-children ul.sub-menu {
		display:block!important;
		top:0!important;
		left:0!important;
		width:100%!important;
		position:relative!important;
	}
	
	ul.sub-menu {
		box-shadow:none;
	}
	
	ul.sub-menu li.menu-item-has-children ul {
		display:block!important;
		width:100%;
		position:relative!important;
	}

	
	li.menu-item-has-children>a:before {
		right:10px;
	}
		
	li.menu-item-has-children>a:after {
		right:10px;
	}
	
	ul.sub-menu li.menu-item-has-children ul.sub-menu ul {
		display:block!important;
	}

	
}

@media only screen and (max-width: 321px) {
		
}

/* --------- СТИЛИ КНОПОК МЕНЮ КОНЕЦ --------- */

/*------СТИЛИ МЕНЮ КОНЕЦ------*/


