/* Important styles */
#toggle {
  display: block;
  width: 28px;
  height: 30px;
  margin: 15px auto 0px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span{color:#333;font-weight:600;font-size:15px}
#toggle span:hover{color:#dd6c07;}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

/* menu appearance*/
.menu-toggle #menu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  text-align: center;
  border-radius: 4px;
  background: #4D95C4;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  /* just for this demo */
  opacity: 0;
  visibility: hidden;
  ttransition: opacity .4s;top: 2px;left: 12px;
}
.menu-toggle #menu:after {
  position: absolute;
  top: -12px;
  left: 8px;
  content: "";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 12px solid #4D95C4;
}
.menu-toggle ul, .menu-toggle li, .menu-toggle li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
.menu-toggle li{border-top: #3B79A2 solid 1px;border-bottom: #56A5D9 solid 1px;}
.menu-toggle li:first-child{border-top: none }
.menu-toggle li:last-child{border-bottom: none }

.menu-toggle li a {
  padding: 5px;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
}
.menu-toggle li a:hover,
.menu-toggle li a:focus {
  color: #dd6c07;
}