#panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;

}

#panel:target .panel-content { /* greift auf hash "panel" als target; "wenn #panel das hash in der url ist, dann mach mit .panel-content {...}*/
	-webkit-transform: translate3d(17em, 0, 0);
	-moz-transform: translate3d(17em, 0, 0);
	-o-transform: translate3d(17em, 0, 0);
	-ms-transform: translate3d(17em, 0, 0);
	transform: translate3d(17em, 0, 0);
}

.panel-content {
	background-color: #f4eded;
}

#panel .panel-content {
	background-color: #f4eded;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	opacity: 1;
	-webkit-overflow-scrolling: touch;
	/*background-color: #F2D6A2;*/
	z-index: 1;
	-webkit-transition: -webkit-transform 0.6s ease-out, background-color 0.6s ease-out;
	-moz-transition: -moz-transform 0.6s ease-out, background-color 0.6s ease-out;
	-o-transition: -o-transform 0.6s ease-out, background-color 0.6s ease-out;
	-ms-transition: -ms-transform 0.6s ease-out, background-color 0.6s ease-out;
	transition: transform 0.6s ease-out, background-color 0.6s ease-out;

}

#panel .panel-content > * {
    -webkit-transition: opacity 0.6s ease-out;
    -moz-transition: opacity 0.6s ease-out;
    -o-transition: opacity 0.6s ease-out;
    -ms-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#panel:target .panel-content > * {
	opacity: 0.15;
}

#panel:target .panel-content {
	background-color: rgba(1, 61, 64, .3);
}

#panel:target .panel-open {
	opacity: 0;
}

#panel .panel-aside {
	position: absolute;
	top: 0;
	left: -8.5em;
	bottom: 0;
	width: 17em;
	overflow: auto;
	padding: 1.2em;
	-webkit-overflow-scrolling: touch;
	background-color: #ffffff;
	z-index: 0;
	-webkit-transition: -webkit-transform 0.6s ease-out;
	-moz-transition: -moz-transform 0.6s ease-out;
	-o-transition: -o-transform 0.6s ease-out;
	-ms-transition: -ms-transform 0.6s ease-out;
	transition: transform 0.6s ease-out;
	
}

#panel:target .panel-aside {
	-ms-transform: translate(8.5em, 0); /* IE kann kein 3d */
	-webkit-transform: translate(8.5em, 0);
	transform: translate(8.5em, 0);

	-webkit-transform: translate3d(8.5em, 0, 0);
	-moz-transform: translate3d(8.5em, 0, 0);
	-o-transform: translate3d(8.5em, 0, 0);
	-ms-transform: translate3d(8.5em, 0, 0);
	transform: translate3d(8.5em, 0, 0);
}

#panel .panel-close {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: transparent;
	display: none;
}

#panel:target .panel-close {
	display: block;
}

@media screen and (min-width: 64em) {

	#panel .panel-content {
		left: 0em;
		-ms-transform: translate(0, 0) !important; /* IE kann kein 3d */
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;

		-webkit-transform: translate3d(0, 0, 0) !important;
		-moz-transform: translate3d(0, 0, 0) !important;
		-o-transform: translate3d(0, 0, 0) !important;
		-ms-transform: translate3d(0, 0, 0) !important;
		transform: translate3d(0, 0, 0) !important;
	}

	#panel:target .panel-content > * {
		opacity: 1;
	} 

	#panel:target .panel-content {
		background-color: #ffffff;
	}

	#panel .panel-aside {
		left: -20em;
		-ms-transform: translate(0, 0) !important; /* IE kann kein 3d */
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;

		-webkit-transform: translate3d(0, 0, 0) !important;
		-moz-transform: translate3d(0, 0, 0) !important;
		-o-transform: translate3d(0, 0, 0) !important;
		-ms-transform: translate3d(0, 0, 0) !important;
		transform: translate3d(0, 0, 0) !important;
	}

	#panel .panel-close,
	#panel .panel-open {
		display: none !important;
	}
}