.panel-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  transform: translateX(100%);
  transition: .3s ease-out;
}
.panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  color: #FFF;
  overflow: auto;
  border:0;
}

.panel li{text-align:left;list-style:none;display:block;font-family:arial;padding:0.5rem 0 0.5rem 1.5rem;border-bottom:1px Solid #777;}

.panel a{text-decoration:none;font-family:'Roboto Condensed', sans-serif; padding:0 12px;color:#ffdd00;font-size:1.25rem;}
.panel a:visited{color:#ffdd00;}
.panel a:hover{color:white;}
.panel active{color:#eee;}
.panel .selected{color:#eee;}



[type="checkbox"]:checked ~ .panel-wrap {
  transform: translateX(0%);
}
[type="checkbox"] {
  font-size: 1em;
}