#check {
 display: none;
}

label #btn,
label #cancle {
	position: absolute;
	cursor: pointer;
	color: #F9FAF3;
}

label #btn {
	left: 0.6em;
	top: 0.6em;
	height: 0.6em;
	font-size: 1.3em;	
	padding: 0.6em;
	transition: all 0s;
    background-image: url('../buttons_gifs/menu_button.gif');
	background-repeat: no-repeat;
}

label #cancle {
	z-index: 1111;
	left: -12em;
	top: 0.2em;
	font-size: 1.9em;
	padding: 0.8em;
	transition: all 0s;
	background-image: url('../buttons_gifs/cancel_button_20.gif');
	background-repeat: no-repeat;
}

/* active side bar */
li{ 
	text-align:center;
}

#check:checked ~ .sidebar {
 	left: 0em;
}

#check:checked ~ label #btn {
	left: 1em;
	opacity: 0;
	pointer-events: none;
}

#check:checked ~ label #cancle {
	top: 0.4em;
	left: 5.3em;
}

#check:checked ~ section {
	margin-left: 3em;
}

.sidebar {
	margin: 0.6em 0.6em;
	position: absolute;
	left: -16em;
	width: 9em;
	background: #A02000;
	transition: all 0.5s;
	border-radius: 1em;
}

.sidebar header img {
	border-radius: 100%;
	width: 6em;
}

.sidebar header {
	padding-top: 1em;
	font-size: 1.2em;
	color: #F9FAF3;
	text-align: center;
	line-height: 0.2em;
	background: #CC2800;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	user-select: none;
	border-radius: 1em;
}

 .sidebar header p {
 font-size: 1.5em;
 font-weight: bold;
 padding: 0em 0em 0.8em;
}
 
.sidebar ul a {
	margin: 0.06em -1.2em ;
	display: block;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 0.9em;
	float: left;
	color: #F9FAF3;
	text-align: left;
	padding: 0.3em 0em 0.3em 0.8em;
	text-decoration: none;
  	box-sizing: border-box;
 	border-top: 0.06em solid rgba(255,255,255,0.1);
 	border-bottom: 0.06em solid black;
 	border-radius: 1em;

	transition: 0.5s;
	width: 7em;

}

.sidebar ul a i {
 margin-right: 1.1em;
}

/* hover effect (beim Überfahren nach rechts) */
ul li:hover a {
	/*padding-left: 2.5em;*/
    background-color: #CC2800;
	padding: 0.3em 2em;
	text-decoration: none;
	font-size: 1em;
	text-align: center;
	color: #F9FAF3;
	width: 9em;
}

ul li:focus a {
	/*padding-left: 2.5em;*/
    background-color: #CC2800;
	padding: 0.3em 2em;
	text-decoration: none;
	font-size: 1em;
	text-align: center;
	color: #F9FAF3;
	width: 9em;
}


/* Social Links */
.social-links i {
	padding: 0.3em;
	margin-left: 0.5em;
	margin-top: 0.8em;
	color: #FFFFFF;
	background: #000000;
	font-size: 2em;
}

/* icons hover effect */
.social-links i:hover {
 background: #1492d1;
}

.dropdown {
  position: relative;
  display: inline-block;
  background-color: #A02000;

}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #A02000;
	min-width: 6em;
	box-shadow: 0em 0.8em 1.2em 0em rgba(0,0,0,0.2);
	padding: 0.8em 2em;
	z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
  left: 8em;
  font-size: 0.8em;
   	border-radius: 2em;
}

.dropdown:focus .dropdown-content {
  display: block;
  left: 8em;
  font-size: 0.8em;
   	border-radius: 2em;