@media (max-width: 699px) { /* 480 Handy Querformat */
}
@media (min-width: 700px) AND (max-width: 768px) { /* 768 Handy Querformat/Ipad Hochformat */
}
@media (min-width: 769px) and (max-width: 1024px) { /* 1024 Monitor, Ipad Querformat */
}
@media (min-width: 1025px) and (max-width: 1280px) { /* 1280 Monitor */
}
@media (min-width: 1281px) {  /* > 1280 Monitor */
}


.hamburger-menu-button-layer, .hamburger-menu {
	position: fixed;
	left: 0px;
	top: 0px;
	padding: 0px;
	margin: 0px;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 200;
	vertical-align: middle;
	z-index: 0;
}


/* +++++++ BUTTON  ++++++++++ */
@media (min-width: 769px) {
	.hamburger-menu-button-layer {
		z-index: 99999 !important;
	}
	
	.hamburger-menu-button-layer.after.expand_hamburger_btn  {
		position:fixed; 
		background: #2b2b2b; 
		width: 270px;
		
		visibility: visible;
		opacity: 1;
	}
	.hamburger-menu-button-layer.first > .hamburger-menu-btn {
		width:34px;
		background:rgba(112,112,112,0.99);
	} 

	.hamburger-menu-button-layer.after, .hamburger-menu-button-layer.first.expand_hamburger_btn {
		width: 0px;
		visibility: hidden;
		opacity: 0;
		
		-webkit-transition: width .2s linear, opacity .2s ease-in-out;
		-moz-transition: width .2s linear, opacity .2s ease-in-out;
		-o-transition: width .2s linear, opacity .2s ease-in-out;
		transition: width .2s linear, opacity .2s ease-in-out;
	}
	
	.hamburger-menu-button-layer > .hamburger-menu-btn {
		padding: 6px 4px 4px 10px;
		height: 31px;
		width:31px;
		cursor:pointer;
		border-radius:0px 0px 0px 0px;
		float:left;
	} 
	
	/* Button Linien */
	.hamburger-menu-button-layer > .hamburger-menu-btn > .hb_linie {
		display: block;
		width: 27px;
		height: 3px;
		margin: 5px 0px 5px 0px;
		z-index: 99;
	}
	.hamburger-menu-button-layer > .hamburger-menu-btn > .hb_linie {
		background: rgba(255,255,255,0.80);
	}

	.hamburger-menu-button-layer.expand_hamburger_btn > .hamburger-menu-btn > .hb_linie {
		background: rgba(255,255,255,0.80);
	}
}



@media (max-width: 768px) { /* 480 Handy Querformat */

	.body_div {
		margin-top:41px;
	}

	.hamburger-menu-button-layer {
		width:100% !important;
		position:fixed; 
		background: #2b2b2b; 
	}
	
	.hamburger-menu-button-layer > .hamburger-menu-btn {
		padding: 5px 5px 5px 10px;
		height: 31px;
		width:31px;
		cursor:pointer;
		float:left;
	} 
	
	/* Button Linien */
	.hamburger-menu-button-layer > .hamburger-menu-btn > .hb_linie {
		display: block;
		width: 27px;
		height: 3px;
		margin: 5px 0px 5px 0px;
		z-index: 99;
		background: rgba(255,255,255,0.80);
	}
}








/* EIN & AUSBLENDEN */
.hamburger-menu.expand_hamburger {
	top:41px;
	
	float: left;
	width: 270px;
	
  visibility: visible;
  opacity: 1;
	
	z-index: 99999 !important;
	
	overflow-y: scroll;
	overflow-x: hidden;
}


.hamburger-menu { /* Standardmässig wird das Menü ausgeblendet! */
	width: 0px;
  visibility: hidden;
  opacity: 0;
	
	-webkit-transition: width .2s linear, opacity .2s ease-in-out;
	-moz-transition: width .2s linear, opacity .2s ease-in-out;
	-o-transition: width .2s linear, opacity .2s ease-in-out;
	transition: width .2s linear, opacity .2s ease-in-out;
}
/*
@media (max-width: 768px) {
	.body_div .navigation_vertikal, .body_div .navigation_horizontal {
		display: none;
	}
}
*/



/* MENÜ */
.hamburger-menu {
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;

	list-style: none;
	background: #2b2b2b;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.3);
}

.hamburger-menu-list {
}

.hamburger-menu-list li a, .hamburger-menu-list li .text_only, .title_menu {
	width: 100%;
	display: block;
	padding: 15px 10px 15px 10px;
	background: #2b2b2b;
	color: #b1b1b1;
	font-size: 1.0em;
	text-decoration: none;
	transition: color 0.2s, background 0.5s;
}

.hamburger-menu-list li a:hover, .hamburger-menu-list li a:active  {
	color: #fff;
	background: #3a3a3a;
}

.hamburger-menu-list li .active > a {
	color: #fff;
	background: #555555;
}

.title_menu {
	font-weight: bold;
	color: #fff;
}