﻿<style>


body {  /* webkit adjacent sibling bug fix */
  -webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

label#sidemenutoggler2 {   /* Main label icon to toggle menu state */
  z-index: 100;
  /*display: block;       orig.*/
  position: relative;
  font-size: 14px; /* change font size to change label dimensions. Leave width/height below alone */
  width: 3.5em;
  height: 2em;
  top: 0;
  left: 0;
  /*background: white;
  text-indent: -1000px;
  border: 0.6em solid black; /* border color */
  border-width: 0.0em 0;   /* orig. 0.4em LINK für Webpublishing*/
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; /* transition for animating label */
}


#sidemenucheckbox2{ /* main side bar menu style */
	display: none;
}

#rightsidemenu2{
	position: fixed;
	top: 60;/* pos.Form of menu */
	right: 30;/* pos.Form of menu */
	width: 750px; /* orig. 250px width of menu */
	height: 450px; /*orig. 100% */
	background: #F7D48A; /* background of menu */
  font: bold 1em 'Bitter', sans-serif; /* Use google custom fonts for this menu */
  z-index: 1001;
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  visibility: hidden;
  box-shadow: 15px 0 20px rgba(0,0,0,.2);
	-webkit-transform: translate3d(100%,0,0) rotate(-20deg); /* offset and rotate menu. Remove rotate() if desired */
	transform: translate3d(100%,0,0) rotate(-20deg);
}
#rightsidemenu2 a{
	text-decoration: none;
  color: black;
  text-transform: uppercase;
}

#rightsidemenu2 ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
	text-align: center;
  font-size: 1.5em;
  -webkit-transform: translate3d(0,-20%,0); /* move UL upwards slightly, so it slides down menu opened */
  transform: translate3d(0,-20%,0);
  opacity: 0;
}

.overlay{
  content: 'eeeeeee';
  position: fixed;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: gray;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1000;
  -webkit-transition: opacity .3s, visibility 0s .3s;
  transition: opacity .3s, visibility 0s .3s;
}

#rightsidemenu2 label#closex{ /* Large x close button inside nav */
  width: 30px;
  height: 50px;
	overflow: hidden;
  display: block;
  position: absolute;
  cursor: pointer;
	text-indent: -1000px;
  z-index: 10;
  top: 0;
  left: 10px;
}

#rightsidemenu2 label#closex::before,
#rightsidemenu2 label#closex::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 6px;
  background: gray;  /* Farbe cross inside close button */
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}

#rightsidemenu2 label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}

#sidemenucheckbox2:checked ~ #rightsidemenu2{
  visibility: visible;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
}

</style>


<script>

document.createElement('nav')

function legacybrowsertoggle2(){
	if (!document.getElementsByClassName){ // legacy browsers only
		var mobilemenunav = document.getElementById("rightsidemenu")
		if (mobilemenunav.style.visibility != 'visible')
			mobilemenunav.style.visibility = 'visible'
		else
			mobilemenunav.style.visibility = 'hidden'
	}
}

</script>

<!--[if lte IE 8]>

	<style>

	/* IE8 specific CSS */

	#rightsidemenu2 label#closex{
		position: static;
		width: auto;
		text-align: center;
		font-size: 2em;
		text-indent: 0;
	}


	.auto-style1 {
		text-align: center;
	}


	</style>


<![endif]-->
