﻿/*------ СТИЛИ КНОПКИ МЕНЮ НАЧАЛО ------*/

#mm-block {
    transition: top 0.3s;
}

.main-menu-span-box {
    display: flex;
    width: 33px;
    height: 33px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
	z-index: 1300!important;
	margin-left: 10px;
}

.custom-logo-link img {
	max-height:40px!important;
	width:auto;
	margin-right:10px;
}

.main-menu-span-box span {
    position: relative;
    background: #652d94;
    width: 33px;
    height: 6px;
    opacity: 1;
    z-index: 21;
    transition: all .3s;
	border-radius: 5px;
}

.main-menu-span-box.menu-clicked span {
    background: transparent;
    transition: all .3s;
}

.main-menu-span-box span:before {
    position: absolute;
    content: '';
    background: #652d94;
    height: 6px;
    border-radius: 5px;
	width: 33px;
    top: -10px;
    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: #652d94;
    height: 6px;
	border-radius: 5px;
    width: 33px;
    bottom: -10px;
    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;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
}

.main-menu-company-name {
	margin-left:10px;
	padding:0;
}

.oficial-sales {
	font-size:12px;
	line-height:120%;
	color:#000;
}

.main-menu-logo-box {
	z-index:100;
    padding-right: 10px;
}

.main-menu-logo-box a {
	color:black;
	display:flex;
	align-items:center;
}

.main-menu-logo-box a img {
	
}

.navbar-box {
    position: relative;
    height: 50px;
	z-index:1200!important;
}

.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;	
}

.black-shore {
    position: absolute;
    content: '';
    width: 100%;
    height:calc(100vh - 50px);
    background: rgba(0,0,0,.4);
    top: 50px;
    left: 0;
    z-index: 2!important;
    backdrop-filter:blur(2px);
    transform: translateX(-200%);
    opacity: 0;
    transition: opacity .3s, transform .1s .3s;
}

.black-shore.menu-clicked {
    transform: translateX(0%);
    opacity: 1;
    transition: opacity .3s;
}

.main-menu-box {
	opacity: 0;
    box-shadow: none;
	position:absolute;
	right: 2px;
	top: 60px;
	padding:10px 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    z-index:5!important;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s ease-out, opacity .2s .1s;
}

.main-menu-box.menu-clicked {
    overflow:auto;
	height: auto;	
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform .4s, opacity .1s;
}

.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__btn-box {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}


/* ЕСЛИ НУЖНО ВЫДЕЛИТЬ ЦВЕТОМ КНОПКУ ТЕКУЩЕЙ СТРНИЦЫ */

/*
li.current-menu-item a {
	color:#000!important;
}
*/

/*  ЕСЛИ НУЖНО ВЫДЕЛИТЬ ЦВЕТОМ КНОПКУ ТЕКУЩЕЙ СТРНИЦЫ КОНЕЦ   */


.main-menu__phone-link {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}

.main-menu__ordrecall {
    text-transform: uppercase;
    /* color: #652d94!important; */
    /* border: solid 2px #652d94; */
    color: #fff!important;
    background: #652d94;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    margin-right: 20px;
    padding: 4px 15px;
    cursor: pointer;
}

.cta__btn-ordercall-menu {
    cursor: pointer;
}


.main-menu__btn-ordercall {
    padding: 5px 25px;
    margin: 0 5px;
    background: #ABDCFF;
    border-radius: 5px;
    font-weight: bold;
    color: #fff!important;
    transition: all .5s;
}

.main-menu__btn-ordercall:hover {
    background: #0396FF;
    transition: all .5s;
}

.main-menu__btn-tobook {
    padding: 5px 25px;
    margin: 0 5px;
    background: #FEB692;
    border-radius: 5px;
    font-weight: bold;
    color: #fff!important;
}

.main-menu__btn-tobook:hover {
    background: #EA5455;
}

.main-menu__msgr-link img {
    height: 30px;
    filter: brightness(.8);
    border-radius: 5px;
    margin: 0 2px;
    transition: all .3s;
}

.main-menu__msgr-link:hover img {
    filter: brightness(1);
    transition: all .3s;
}


/* ---------- СТИЛИ КНОПОК МЕНЮ НАЧАЛО ---------- */

#header-menu-container ul.menu {
	padding:0;
	margin:0;
	display:block;
	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;
}

li.menu-item:nth-child(1) {
    animation-delay: .05s;
}

li.menu-item:nth-child(2) {
    animation-delay: .1s;
}

li.menu-item:nth-child(3) {
    animation-delay: .15s;
}

li.menu-item:nth-child(4) {
    animation-delay: .2s;
}

li.menu-item:nth-child(5) {
    animation-delay: .25s;
}

li.menu-item:nth-child(6) {
    animation-delay: .3s;
}

li.menu-item:nth-child(7) {
    animation-delay: .35s;
}

li.menu-item:nth-child(8) {
    animation-delay: .40s;
}

li.menu-item:nth-child(9) {
    animation-delay: .45s;
}

li.menu-item:nth-child(10) {
    animation-delay: .5s;
}

li.menu-item:last-child a {
    border-bottom: none;
}

.login-box {
    padding: 0px 5px;
}

.login-box img {
    opacity: .5;
    transition: all .3s;
}

.login-box:hover img {
    opacity: 1;
    transition: all .3s;
}

.login-box a img {
    opacity: .5;
    transition: all .3s;
}

.login-box:hover a img {
    opacity: 1;
    transition: all .3s;
}

.user-logon-txt {
    padding-left: 10px;
    line-height: 110%;
}

ul.menu li.menu-item {
    transition: all .3s;
}

ul.menu li.menu-item:hover {
    background: #f6f6f6;
    transition: all .3s;
}

.main-menu__msgr-box {
    margin-left: auto;
}


/*--------- МЕДИАЗАПРОСЫ НАЧАЛО ---------*/

@media only screen and (max-width: 2560px) {

}


@media only screen and (max-width: 1920px) {

}


@media only screen and (max-width: 1600px) {

}


@media only screen and (max-width: 1366px) {

}


@media only screen and (max-width: 992px) {
	
    .main-menu-box {
        width:calc(100% - 50px);
        right:10px;
    }
	
	#header-menu-container ul.menu {
		display:block;
    		
	}	
    
    .main-menu-span-box {
        display: flex!important;
        z-index: 12!important;
        align-items:center;
    }


    .navbar-middle {
        z-index: 11;
    }

    .nav-tiem {
        font-size: 18px!important;
    }
 

	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;
	}

    .login-box {
        padding: 10px 15px;
    }
    
    .phone-under-menu {
        font-size: 1.8rem;
    }
    
   #header-menu-container ul.menu {
	    margin-bottom: 20px;
    }
    
   .main-menu-cart-box {
	    margin-left: auto;
        padding: 0;
    }

	
}


@media only screen and (max-width: 810px) {
    
    .main-menu__ordrecall {
        display: none;
    }
}


@media only screen and (max-width: 768px) {
	 
    .main-menu__phone-link {
        display: none;
    }

    .main-menu-company-name {
		font-size:14px;
	}
	
	.oficial-sales {
		font-size:11px;
	}

    .main-menu__search-box {
        display: none;
    }
    
    .main-menu__search-box-2 {
        display: flex;
    }

    .main-menu-box li a {
	    font-size:18px;
    }
    
}


@media only screen and (max-width: 640px) {

}


@media only screen and (max-width: 460px) {
    .main-menu__msgr-box {
        display: none;
    }
    
    .main-menu-span-box {
        margin-left: auto;
    }
}


@media only screen and (max-width: 321px) {
	.small-logo {
		display:none;
	}

}

/*--------- СТИЛИ КНОПОК МЕНЮ КОНЕЦ ---------*/

/*------ СТИЛИ МЕНЮ КОНЕЦ ------*/


