/* reset */
* {
  margin: 0;
  padding: 0;
}
#wrapper  {
  position: absolute;
  width: 295px;
  height: 240px;
  overflow: hidden;
  z-index: 1;
}

label {
  cursor: pointer;
  &:focus;
    outline: none;
 }  
 
.menu  {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff5e8;
  width: 240px;
  height: 240px;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
}
      
  label.menu-toggle   {
    position: absolute;  
    right: -60px;
    width: 60px;
    height: 60px;
    line-height: 0px ;  
    display: block;
    padding: 0;
    text-indent: -9999px;


  background: #faf7f3 url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 30px 30px no-repeat  
}
   ul
    li
      > label   {
        background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat   }

      a, label {
        text-align: left;
        padding: 0 10px;
        line-height: 30px;
        text-decoration: none;
        color: #000;
        &:hover;
          color: #006a25;
        font-weight: bold;

      }

/* hide inputs */          
.menu-checkbox {
  display: none;
}

/* hide navigation icon for sublabels */    
.menu .menu label.menu-toggle  {
  background: none;
 }   
/* fade in checked menu */    
.menu-checkbox:checked + .menu  {
  transform: translate3d(0, 0, 0);
}
    
    
/* for show */
html, body {
  height: 100%;
}

p  {
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right; 20px;
}

   h4{
          font-size:25px;   
          text-align: left;
          position:relative;
          margin-top: 4px;
          margin-left: 20px;
          margin-bottom: 0px;
          color:#006a25;
          padding: 0 0 0 0; 
         
          }
a, a:link {
           color: #800080;
	   font-weight: bold;
	   text-decoration: none;
	 }

a:visited { color: #006189; }

a:hover {
	 background-color:transparent;
	 color: #ff00ff;
	 }