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

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

label#sidemenutogglerFran {   /* 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: 47%;
    left:35%; */
/*  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 */
}


label#sidemenutogglerFran::before,
label#sidemenutogglerFran::after {
  /* inner stripes inside label */
  content: "";
 /* display: block; */
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;



 /* 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 */
}


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

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

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

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

}

#rightsidemenuFran{
  position: fixed;
  top: 0;
  right: 0;
  /*width: 250px; /* width of menu */ */
   width: 600px;
  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);
}

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

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

#rightsidemenuFran ul li{
}

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

#rightsidemenuFran 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%; */
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

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


#rightsidemenuFran label#closexFran::before,
#rightsidemenuFran label#closexFran::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);
}

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

#sidemenucheckboxFran:checked ~ #rightsidemenuFran{
  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;
}

#sidemenucheckboxFran:checked ~ #rightsidemenuFran 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;
}

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