:root {
	--navigation-width : 0px;
	--navigation-button-size : 50px;
  --navigation-bgcolor : #F5F5F5;
}

#navigation_wrapper {
  position: fixed;
	z-index: 1;

  width: var(--navigation-width);
  height: 100vh;
  margin-left: auto;

  background-color: var(--navigation-bgcolor);
}

#navigation_portrait_wrapper {
	position: relative;

	width: var(--navigation-width);
	height: var(--navigation-width);

	background-color: var(--navigation-bgcolor);
}

#navigation_portrait_image{
	position: absolute;
	top: 0;
	z-index: 2;
	height: 100%;
}

#navigation_portrait {
	position: relative;

 	height: 100%;
	margin: 0px;

	//background-color: #FFFFFF;
}


#navigation_portrait image{
	position: absolute;
	width: 100%;
	height: 100%;
}

#navigation_menu {
	position: relative;

	width: 100%;
	margin-top: 5px;
	padding-top: 5px;
	padding-bottom: 5px;

	background-color: var(--navigation-bgcolor);
}

.navigation_button {
		position: relative;

		height: var(--navigation-button-size);

		text-align: center;
		vertical-align: middle;
		line-height: var(--navigation-button-size);

    background-color: var(--navigation-bgcolor);
		transition-duration: 0.3s;

		cursor: pointer;
}

.navigation_button:hover {
		background-color: #f5ce42;
}

.navigation_button:active {
		background-color: #404040;
}