:root {

--main-menu-height: 80px;

}

.main-menu {
height: var( --main-menu-height );
z-index: 10;
position: relative;
}

.main-menu,
.main-menu:hover,
.main-menu:active,
.main-menu *,
.main-menu *::after,
.main-menu *::before,
.main-menu *:hover,
.main-menu *:active {
transition: .3s;
}

.main-menu > * {
position: relative;
z-index: 10;
}

.main-menu::before {
content: "";
width: 100vw;
height: var( --main-menu-height );
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}

.main-menu * {
list-style: none;
text-decoration: none;
color: #fff;
}

.main-menu a {
}

.main-menu .menu-content {
display: flex;
height: 100%;
}

/* ------- logo ------- */

/*
.main-menu .logo-link {
display: block;
flex: 1 0 auto;
width: 220px;
box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.4);
}

.main-menu .logo-link:hover {
box-shadow: 0px 0px 30px 5px rgba(255, 255, 255, 0.6);
}

.main-menu .logo-link span {
display: block;
}

.main-menu .logo-link .logo {
width: 100%;
height: 100%;
position: relative;
text-indent: -5000em;
margin: 0;
padding: 0;
}

.main-menu .logo-link .text {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}

.main-menu .logo-link .pic {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.main-menu .logo-link .top {
top: 0;
background: rgba(255, 255, 255, .8);
height: 67px;
}

.main-menu .logo-link:hover .top {
background: rgba(0, 0, 0, .8);
}

.main-menu .logo-link .top .pic {
width: 182px;
height: 58px;
background: #000;
-webkit-mask: var( --svg-main-logo-top ) center center no-repeat;
mask: var( --svg-main-logo-top ) center center no-repeat;
}

.main-menu .logo-link:hover .top .pic {
background: #fff;
}

.main-menu .logo-link .bottom {
bottom: 0;
background: rgba(0, 0, 0, 0.6);
height: 33px;
}

.main-menu .logo-link:hover .bottom {
background: rgba(255, 255, 255, .8);
}

.main-menu .logo-link .bottom .pic {
width: 184px;
height: 20px;
background: #fff;
-webkit-mask: var( --svg-main-logo-bottom ) center center no-repeat;
mask: var( --svg-main-logo-bottom ) center center no-repeat;
}

.main-menu .logo-link:hover .bottom .pic {
background: #000;
}

.main-menu .logo-link .tail {
top: 100%;
background: rgba(255, 255, 255, 1);
height: 24px;
}

.main-menu .logo-link:hover .tail {
background: #222;
}

.main-menu .logo-link .tail .pic {
width: 180px;
height: 10px;
background: #444;
-webkit-mask: var( --svg-main-logo-tail ) center center no-repeat;
mask: var( --svg-main-logo-tail ) center center no-repeat;
}

.main-menu .logo-link:hover .tail .pic {
background: #fff;
}
*/



/* ------- menu items ------- */

/* d-flex flex-column flex-lg-row align-items-center justify-content-between */

.main-menu .menu-wrapper {
display: flex;
align-items: center;
flex: 0 1 auto;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.main-menu .menu-wrapper ul {
__display: none;
padding: 0;
}

.main-menu .menu-wrapper > li {
flex: 1 0 auto;
width: auto;
line-height: calc( var( --main-menu-height ) / 2);
line-height: var( --main-menu-height );
__max-width: 100%;
font-size: 85%;
font-weight: 700;
position: relative;
height: 100%;
__width: 100%;
}

.main-menu .menu-wrapper li li {
line-height: 1.5;
}

.main-menu .menu-wrapper > li > a {
display: block;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}

.main-menu .menu-wrapper > li:hover > a,
.main-menu .menu-wrapper > li.clicked > a {
background: #212121;
}

.main-menu .menu-wrapper .inner {

display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;

}

.main-menu .menu-wrapper .menu-item-has-children .inner {
top: calc( 50% - 1px );
}

.main-menu .menu-wrapper .menu-item-has-children .inner::after {
font-family: "Font Awesome 6 Pro";
content: "\f0d7";
display: inline-block;
margin-left: 8px;
}

.main-menu .menu-wrapper > li > .sub-menu {
/*overflow: hidden;*/
font-size: 95%;
font-weight: 300;
color: #999;
background: #212121;
position: absolute;
top: 100%;
width: calc( 100% + 60px );
height: 0;
opacity: 0;
}

.main-menu .menu-wrapper > li:last-child > .sub-menu {
right: 0;
}

.main-menu .menu-wrapper > li:hover > .sub-menu,
.main-menu .menu-wrapper > li.clicked > .sub-menu {
opacity: 1;
height: auto;
}

.main-menu .menu-wrapper > li > .sub-menu > li {
position:relative;
}

.main-menu .menu-wrapper > li > .sub-menu > li .sub-menu {
display:none;
position:absolute;
left:100%;
top:0;
}
.main-menu .menu-wrapper > li > .sub-menu > li:hover .sub-menu,.main-menu .menu-wrapper > li > .sub-menu > li.clicked .sub-menu {
display:block;
}

.main-menu .menu-wrapper > li > .sub-menu > li a {
display: block;
width: 100%;
height: 100%;
padding: 12px 20px 12px 26px;
position: relative;
color: #fff;
}

.main-menu .menu-wrapper > li > .sub-menu > li a::before {
content: "";
display: block;
width: 6px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #ea8d00; /* naranja */
opacity: 0;
}

.main-menu .menu-wrapper > li > .sub-menu > li:hover a {
background: #111;
}

.main-menu .menu-wrapper > li > .sub-menu > li a:hover::before {
opacity: 1;
}

.main-menu .arrow-down {
display: inline-block;
margin-left: 4px;
}

@media (max-width: 991px) {
	.main-menu .menu-wrapper > li > .sub-menu > li .sub-menu {
	position:static;
	}
}