:root 
{
	--blau: #2a6bb7;
	--hellblau: #639bd1;
	--dunkelblau: #0f487e;
	--grau: #6b6b6b;
	--hellgrau: #adadad;
	--lightgrau: #ebebeb;
}

* 
{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body 
{
	font-size: 1.05em;
	color: var(--grau);
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 300;
	line-height: 1.6;
	overflow-x: hidden;
}

::selection 
{
	background-color: var(--blau);
 	color: #fff;
}

::-moz-selection 
{
  	background-color: var(--blau);
 	color: #fff;
}

#navCol
{
	position: fixed;
	width: 300px;
	height: 100%;
	z-index: 10000;
	transition: all 0.4s;
	left: 0;
}

#navCol.hidden
{
	left: -300px;
}

#navColInner
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: auto;
}

#logo
{
	padding: 35px 30px;
	width: 100%;
	background-color: var(--blau);
	margin-bottom: -9px;
}

#logoContainer
{
	position: sticky;
	position: -webkit-sticky;
	z-index: 100;
	top: 0;
	left: 0;
}

#navColBottom
{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	z-index: 10;
	background-color: var(--hellblau);
	padding: 20px 30px;
}

#navColBottom a
{
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 0.75em 1.2em 0.59em;
	text-align: center;
	border: 1px solid #fff;
	line-height: 1.4;
	width: 100%;
	transition: all 0.2s;
}

#navColBottom a:hover
{
	background-color: #fff;
	color: var(--hellblau);
}

#navCol:before
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--blau);
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 0.68;
}

#navigation
{
	padding: 28px 30px 104px;
}

#navigation ul li 
{
	list-style: none;
	display: block;
	margin-bottom: 15px;
	position: relative;
}

#navigation ul li a
{
	color: #fff;
	text-decoration: none;
	position: relative;
	padding-left: 1.6em;
	display: inline-block;
}

#navigation ul li a:before
{
	content: "";
	position: absolute;
	width: 1em;
	height: 1em;
	background-image: url(right.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	left: 0;
	top: 0.18em;
}

#view
{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	border: none;
}

#close
{
	position: absolute;
	width: 45px;
	height: 45px;
	left: 100%;
	cursor: pointer;
	transform: translateY(-50%);
	transition: all 0.2s;
}

#close:before
{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--blau);
	left: 0;
	top: 0;
	z-index: -1;
	opacity: 1;
}

#navOpener
{
	position: absolute;
	width: 48%;
	height: 38%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.line
{
	position: absolute;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	height: 1.5px;
	background-color: #fff;
	transition: all 0.2s;
}

#navOpener .line:nth-child(1)
{
	top: 0;
}

#navOpener .line:nth-child(2)
{
	top: 50%;
	transform: translate(-50%, -50%);
}

#navOpener .line:nth-child(3)
{
	bottom: 0;
}

#navOpener.active .line:nth-child(1)
{
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

#navOpener.active .line:nth-child(2)
{
	width: 0;
}

#navOpener.active .line:nth-child(3)
{
	bottom: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media all and (max-width: 900px){
	#navCol
	{
		width: 240px;
		font-size: 0.88em;
	}

	#navCol.hidden
	{
		left: -240px;
	}

	#logo
	{
		padding: 25px 20px;
	}

	#navigation
	{
		padding: 21px 20px 82px;
	}

	#navColBottom
	{
		padding: 15px 20px;
	}

	#close
	{
		width: 40px;
		height: 40px;
	}
}