header
{
	width: 100%;
	/* height: 100px; */
	z-index: 2000;
	background-color: #fff;
	box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}

header h1
{
	padding-left: 30px;
	color: rgba(0, 0, 0, 1);
	font-family: "User title";
	font-size: 36px;
}

header nav .nav-menu {
	margin: 10px;
	padding: 0px;
	display: flex;
	overflow-x: auto;
}

header nav .nav-menu > li
{
	display: inline-block;
}


header nav .nav-menu > li
{
	/*line-height: 30px;*/
	margin: 10px;
	padding: 0 15px;
	color: rgba(0, 0, 0, 0.6);
	font-family: "User title";
	font-size: 20px;
	font-weight: bold;
}

header nav .nav-menu > li.active
{
	color: rgba(0, 0, 0, 1);
	background-color: #dde0ee;
	border: 0px;
	border-radius: 3px;
}

header nav .nav-menu > li:hover
{
	color: rgba(0, 0, 0, 1);
}


header .nav-toggle
{
	display: none;
}


header .nav-icon 
{
	float: right;
	height: 0px;
	padding: 28px 15px;
	position: absolute;
	top: 10px; right: 0;
	display: none;

}

header .nav-icon-bar 
{
	display: block;
	width: 20px;
	height: 3px;
	position: relative;
	background-color: #333;
	transition: background-color .2s ease-out;
}

header .nav-icon-bar::before,
header .nav-icon-bar::after 
{
	background-color: #333;
	content: "";
	display: block;
  	width: 100%;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
}

header .nav-icon-bar::before 
{
	top: -7px;
}

header .nav-icon-bar::after 
{
	top: 7px;
}

header .nav-toggle:checked ~ .nav-icon > .nav-icon-bar 
{
	background: transparent;
}

header .nav-toggle:checked ~ .nav-icon > .nav-icon-bar::before 
{
	transform: rotate(45deg);
	top: 0;
}

header .nav-toggle:checked ~ .nav-icon > .nav-icon-bar::after 
{
	transform: rotate(-45deg);
	top: 0;
}


@media all and (orientation: portrait) and (max-width: 600px) 
{
	header h1 
	{
		padding-bottom: 5px;
	}

	header .nav-icon 
	{
		display: block;
	}

	header .nav-toggle:checked ~ nav .nav-menu 
	{
		display: block;
	}

	header .nav-toggle:checked ~ h1 
	{
		padding-bottom: 0px;
	}


	header nav .nav-menu > li
	{
		display: block;
	}

	header nav .nav-menu 
	{
		display: none;
	}

}