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

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

label#sidemenutoggler {   /* Main label icon to toggle menu state */
  z-index: 100;
  display: block;
  /* position: relative; */
    position: absolute;
  font-size: 10px; /* change font size to change label dimensions. Leave width/height below alone */
   width: 3.5em;
   height: 2em;

 /* top: 0;
  left: 0;  */
    top: 30%;
    left:65%;
  background: white;
  text-indent: -1000px;
  border: 0.6em solid black; /* border color */
  border-width: 0.6em 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; /* transition for animating label */
/*  width:10%; */
}

label#sidemenutoggler::before,
label#sidemenutoggler::after {
  /* inner stripes inside label */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  left: 0; 
  margin-top: -0.3em;
  background: black; /* stripes background color. Change to match border color of parent label above */
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; /* transition for flipping label */
}

#sidemenucheckbox:checked ~ label#sidemenutoggler {
  /* state of main menu label when menu is open  */
  border-color: transparent;
}

#sidemenucheckbox:checked ~ label#sidemenutoggler::before {
  /* state of main menu label::before when menu is open  */
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#sidemenucheckbox:checked ~ label#sidemenutoggler::after {
  /* state of main menu label::after when menu is open  */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

#rightsidemenu{
  position: fixed;
  top: 0;
  right: 0;
  width: 250px; /* width of menu */
  height: 100%;
  /*background: #F7D48A; /* background of menu */
  background: #A9ADDA;
  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: 5px 0 10px 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);
}

#rightsidemenu a{
  text-decoration: none;
  color: black;
 /* text-transform: uppercase; */
}

#rightsidemenu 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;
}

#rightsidemenu ul li{
}

#rightsidemenu ul li a{
  /*padding: 30px 10px; */
  display: block;
}

#rightsidemenu ul li a:hover{
  background: #F7AC6A;
  transition: all 0.5s;
  
}
.overlay{
  content: '';
  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;
}

.overlay label{
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

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


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

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

#sidemenucheckbox:checked ~ #rightsidemenu{
  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;
}

#sidemenucheckbox:checked ~ #rightsidemenu ul{
  -webkit-transform: translate3d(0,50px,0); /* shift menu downwards when revealed */
  transform: translate3d(0,50px,0);
  opacity: 1;
  -webkit-transition: opacity 1s .5s, -webkit-transform 1s .5s;
  transition: opacity 1s .5s, transform 1s .5s;
}

#sidemenucheckbox:checked ~ .overlay{
  opacity: .8;
  visibility: visible;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}