#menu
{
	position			: fixed;
	z-index				: 5;
	right				: 0;
	top					: 0;
	left				: 0;
	height				: 34px;
	max-width			: 100vw;
	max-height			: 100vh;
	padding				: var(--size-s);
	color				: var(--color-white);
	background			: var(--color-medium);
	box-shadow			: var(--size-s) var(--size-s) var(--size-s) rgba(0, 0, 0, 0.3);
	font-weight			: bold;
}

#menu A,
#menu A:visited
{
	color				: var(--color-white);
	text-decoration		: none;
}

#menu A:hover,
#menu LI:hover
{
	color				: var(--color-hover);
}

#menu>UL>LI:first-child
{
	width				: auto;
}

#menu>UL>LI 
{
	float				: left;
	width				: 150px;
	margin				: 0 var(--size);
	list-style			: none;
	white-space			: nowrap;
	text-overflow		: ellipsis;
	color				: var(--color-white);
}

#menu LI UL
{
	display				: none;
	margin-top			: 9px;
	margin-left			: -10px;
}

#menu LI:hover UL
{
	display				: block;
}

#menu LI UL LI
{
	display				: block;
	margin-left			: 0;
/*	padding				: var(--size-s) var(--size-s) 0 var(--size-s);*/
	text-align			: left;
	list-style			: inside;
	background			: var(--color-medium);
}

#menu LI UL LI:last-child
{
	padding-bottom		: var(--size-s);
}

#menu LI UL LI A
{
	display				: block;
	font-size			: var(--size-m);
	padding				: var(--size-s);
	overflow			: hidden;
	white-space			: nowrap;
	text-overflow		: ellipsis;
}

#menu LI UL LI A:hover
{
	background			: var(--color-light);
}

#menu LI UL LI UL LI
{
	margin				: 0;
	padding				: 0;
	background			: transparent;
}

#menu UL UL UL
{
	margin-left		: 0.25rem;
}

#breadcrumb,
#submenu
{
	z-index				: 5;
	position			: fixed;
	height				: 20px;
	font-size			: 16px;
	background			: var(--color-dark);
	text-align			: center;
}

#breadcrumb
{
	top					: 40px;
	left				: 1rem;
}

#submenu
{
	top					: 31px;
	right				: 0;
}

#breadcrumb A,
#submenu A /*,
#submenu A:visited*/
{
	color				: var(--color-white);
	color				: white;
	text-decoration		: none;
}

UL#submenu
{
	display				: block;
}

#submenu LI 
{
	margin				: 0;
	list-style			: none;
	color				: white;
	display				: inline-block;
	padding				: 5px 10px;
	border-top			: 1px solid var(--color-dark);
	border-right		: 1px solid var(--color-dark);
	border-radius		: 0 0 10px 10px;
	background			: rgba(0, 53, 101, 1);
	box-shadow			: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

#breadcrumb A:hover,
#submenu LI A:hover,
#submenu LI.active A
{
	color				: #E56000;
}

#submenu LI.start
{
	border				: none;
	border-radius		: 0 0 0 10px;
}
#submenu LI.middle
{
	border				: none;
	border-radius		: 0 0 0 0;
}
#submenu LI.end
{
	border-radius		: 0 0 10px 0;
}

#submenu LI:last-child
{
	border				: none;
}

#menu-burger
{
	display				: none;
	z-index				: 1;
	position			: fixed;
	top					: 19px;
	left				: 10px;
	width				: 20px;
	height				: 20px;
	cursor				: pointer;
}

#menu-burger > SPAN,
#menu-burger > SPAN::before,
#menu-burger > SPAN::after
{
	display				: block;
	position			: absolute;
	width				: 100%;
	height				: 2px;
	background			: white;
	transition-duration	: .25s;
}

#menu-burger > SPAN::before
{
	content				: '';
	top					: -8px;
}

#menu-burger > SPAN::after
{
	content				: '';
	top					: 8px;
}

#menu-toggle
{
	display				: none;
}

#menu-toggle:checked + #menu-burger > SPAN
{
	transform			: rotate(45deg);
}

#menu-toggle:checked + #menu-burger > SPAN::before
{
	top					: 0;
	transform			: rotate(0deg);
}

#menu-toggle:checked + #menu-burger > SPAN::after
{
	top					: 0;
	transform			: rotate(90deg);
}

#menu #logo
{
	position			: absolute;
	top					: 0;
	right				: 0;
}

#menu #logo IMG
{
	height				: 34px;
}

#page
{
	z-index				: 1;
	position			: absolute;
	top					: 30px;
	/*bottom				: 0;*/
	left				: 0;
	width				: 100%;
	padding				: var(--size-xl) var(--size) var(--size);
	/*overflow			: auto; headerFixed:'( */
	max-width				: 100vw;
}

@media (max-width: 1550px)
{
	#menu
	{
		font-size		: var(--size-m);
	}

	#menu>UL>LI 
	{
		width				: 100px;
	}
}

@media (max-width: 1155px)
{
	#menu>UL>LI 
	{
		width				: 80px;
	}
}

@media (max-width: 992px)
{

	#menu-burger
	{
		display				: block;
	}

	#menu #menu-content
	{
		overflow			: scroll;
		background			: var(--color-medium);
		box-shadow			: 5px 5px 6px rgba(0, 0, 0, .4);
		position			: fixed;
		top					: 34px;
		left				: -100%;
		width				: 180px;
		height				: 100%;
		margin				: 0;
		padding				: 5px;
		transition-duration	: 1s;
		font-size			: 14px;
	}

	#menu-toggle:checked ~ #menu-content
	{
		left				: 0;
	}

	#menu #logo
	{
		right				: 5px;
	}

	#menu LI
	{
		float				: none;
		width				: 150px;
		margin				: 0;
		padding				: 5px;
		text-align			: left;
	}

	#menu LI A
	{
		width				: 140px;
	}

	#menu LI UL
	{
		display				: block;
		position			: relative;
		left				: auto;
		width				: auto;
	}

	#menu LI UL LI
	{
		width				: auto;
		padding				: 0;
		background			: transparent;
	}

	#submenu
	{
		font-size			: var(--size-m);
	}

	#submenu LI A
	{
		width				: 60px;
	}
}
