@charset "UTF-8";

#ham input[id="hamburger"] {
  display: none;
}
#ham  input[id="hamburger"] + label {
  display: block;
  width: 30px;
  height: 20px;
  position: absolute;
z-index:99999999999999999999999999999999999999999999999999;

  cursor: pointer;
right:3%;
top:53px;
}
#ham  input[id="hamburger"] + label span {
  display: block;
  position: absolute;

  width: 100%;
  height: 3px;
  border-radius: 0;
  background: #555;
  transition: all 0.35s;
}
#ham  input[id="hamburger"] + label span:nth-child(1) {
  top: 0;
}
#ham  input[id="hamburger"] + label span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
#ham  input[id="hamburger"] + label span:nth-child(3) {
  bottom: 0;
}
#ham  input[id="hamburger"]:checked + label {
 
  top:40px; 
left:80%; background-color:#31af0a;  position:fixed; height:40px; width:40px;  
z-index:99999999999999999999999999999999999999999999999999;
 }
#ham  input[id="hamburger"]:checked + label span {
  background: #fff; z-index:99999999999999999999999999999999999999999999999999;
 
}
#ham  input[id="hamburger"]:checked + label span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#ham  input[id="hamburger"]:checked + label span:nth-child(2) {
  opacity: 0;
}
#ham  input[id="hamburger"]:checked + label span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}
#ham  div[class="sidebar"] {
  width: 80%;
  height: 100%;
  background: #222;
  position: fixed;
  top: 0;
  left: -80%;
  z-index:99999999999999999999999999999999;
  transition: all 0.35s;
}
#ham  input[id="hamburger"]:checked + label + div {
  left: 0;
}

#ham  div ul {width:89%; float:left; margin-left:5%; margin-top:40px;  border-top:1px solid rgba(255,255,255,.2);  }
#ham  div ul li {font-size:1em; color:#fff; line-height:50px; border-bottom:1px solid rgba(255,255,255,.2);  width:100%;}
#ham  div ul li  a {color:#fff !important; width:100%; display:inline-block}