/* Menu overline */
._p-menu-overline{
	display: flex;
	width: calc(100% - var(--page-hor-padding) * 2);
	height: 20px;
	position: relative;
	z-index: calc(var(--z-over) + 1);
	padding: 5px var(--page-hor-padding) 0 var(--page-hor-padding);
	background: linear-gradient(90deg, #000, var(--green));
	overflow: hidden;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	font-size: 14px;
	color: #fff;
}
._p-menu-overline > .sub{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	font-style: normal;
}
._p-menu-overline > .sub a{
	white-space: nowrap;
}

/* Menu */
._p-menu{
	display: flex;
	width: 100%;
	height: 70px;
	position: sticky;
	top: 0;
	z-index: var(--z-over);
	margin-top: -2px;
	transition: box-shadow var(--menu-duration);
	/* transition: transform 200ms linear;
	will-change: transform;
	transform: translateY( calc(-80px - var(--page-hor-padding)) ); */
	border-top: 2px solid var(--green);
	box-shadow: 0 3px 7px rgba(var(--bgrey-20-rgb),0.9);
	flex-direction: column;
	font-size: 16px;
}

/* Body */
._p-menu > div{
	display: flex;
	height: 100%;
	position: relative;
	padding: 0 var(--page-hor-padding);
	transition: background-color var(--menu-duration);
	background-color: rgba(var(--bgrey-20-rgb), 0.9);
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

/* Logo */
._p-menu > div > .logo{
	display: flex;
	transition: color var(--menu-duration);
	align-items: center;
	text-decoration: none;
	color: var(--bgrey-160);
}
._p-menu > div > .logo > img{
	height: 32px;
}
._p-menu > div > .logo > img:first-child{ display: inline-block; }
._p-menu > div > .logo > img:last-child{ display: none; }

/* Menu inner */
._p-menu > div > .inner{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 40px;
}

/* Menu items */
._p-menu > div > .inner > nav{
	display: flex;
	align-items: center;
	gap: 30px;
}
._p-menu > div > .inner > nav > a{
	display: flex;
	transition: color var(--menu-duration);
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
}
._p-menu > div > .inner > nav > a > span{
	display: flex;
	position: relative;
	justify-content: center;
}
._p-menu > div > .inner > nav > a > span::before,
._p-menu > div > .inner > nav > a > span::after{
	content: "";
	display: inline-block;
    position: absolute;
    width: 0;
	transition: width var(--menu-duration), height var(--menu-duration);
	pointer-events: none;
    background-color: var(--green);
    height: 10px;
}
._p-menu > div > .inner > nav > a > span::before{ bottom: 1.4em; }
._p-menu > div > .inner > nav > a > span::after{ top: 1.4em; }

._p-menu > div > .inner > nav > a:hover > span::before,
._p-menu > div > .inner > nav > a:hover > span::after{
	height: 2px;
	width: 100%;
}

/* Menu user */
._p-menu .user{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
._p-menu .user > div{
	display: flex;
	transition: color var(--menu-duration);
	align-items: center;
	gap: 5px;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 300;
	color: white;
}
._p-menu .user > a{
	transition: color var(--menu-duration), border var(--menu-duration);
}
._p-menu .user > button{
	transition: color var(--menu-duration), border var(--menu-duration);
}

/* Menu button open */
._p-menu > div > .button-open{
	display: none;
	min-width: 10px;
	min-height: 10px;
	transition: color var(--menu-duration);
	cursor: pointer;
	font-size: 32px;
	color: white;
}
._p-menu > div > .button-open:hover{
	color: var(--green);
}



/* --- SCROLL --- */
._p-menu.scroll{
	transition: box-shadow var(--menu-duration);
	box-shadow: 0 1px 8px rgba(var(--bgrey-20-rgb),0.8);
}
._p-menu.scroll > div{
	transition: background-color var(--menu-duration);
	background-color: rgba(var(--bgrey-160-rgb),0.9);
}
._p-menu.scroll > div > .logo{
	transition: color var(--menu-duration);
	color: var(--green);
}
._p-menu.scroll > div > .logo > img:first-child{ display: none; }
._p-menu.scroll > div > .logo > img:last-child{ display: inline-block; }

._p-menu.scroll > div > .inner > nav > a{
	transition: color var(--menu-duration);
	color: var(--bgrey-20);
}
._p-menu.scroll .user > div{
	transition: color var(--menu-duration);
	color: var(--bgrey-20);
}
._p-menu.scroll .user > a{
	transition: color var(--menu-duration), border var(--menu-duration);
}
._p-menu.scroll .user > button{
	transition: color var(--menu-duration), border var(--menu-duration);
}
._p-menu.scroll > div > .button-open{
	transition: color var(--menu-duration);
	color: var(--bgrey-40);
}
._p-menu.scroll > div > .button-open:hover{
	color: var(--green);
}



/* --- SHRINK --- */
._p-menu.shrink{
	font-size: 18px;
}
._p-menu.shrink > div > .button-open{
	display: inline-block;
}
._p-menu.shrink > div > .inner{
	display: none;
	width: calc(100% - var(--page-hor-padding) * 2);
	position: absolute;
	top: 70px;
	right: 0;
	padding: 20px var(--page-hor-padding);
	background-color: rgba(var(--bgrey-40-rgb),0.9);
	border-radius: 0 0 0 var(--r-1);
	flex-direction: column;
	gap: 20px;
}
._p-menu.shrink > div > .inner.opened{
	display: flex;
}
._p-menu.shrink > div > .inner > nav{
	gap: 15px;
}
._p-menu.shrink > div > .inner > nav > a{
	text-align: center;
}
._p-menu.shrink .user{
	width: 100%;
	padding-top: 20px;
	border-top: 1px solid #fff;
	gap: 50px;
}



/* SCROLL + SHRINK */
._p-menu.scroll.shrink .inner{
	background-color: rgba(var(--bgrey-160-rgb),0.9);
	box-shadow: 0 1px 8px rgba(var(--bgrey-20-rgb),0.8);
}
._p-menu.scroll.shrink .user{
	border-top: 1px solid #000;
}