.menu { display: none;}
.menu ul { padding: 15px 0 0; line-height: 1;}
.menu li { position: relative; margin: 0 0 0.2em; list-style: none;}
.menu a {
  display: block;
  background: #626262;
  padding: 0.5em 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.menu a:hover { background: #ccc;}

.menu ul ul { margin: 0.2em 0 0; padding: 0;}
.menu ul ul a { background: #8c8c8c;}

.footer-menu { margin: 0 0 3em; padding: 0;}
.footer-menu li { list-style: none; margin: 0 0 .5em;}
.footer-menu a { color: #ccc; text-decoration: none;}
.footer-menu a:hover { color: #fff;}

.footer_social { margin: 0 0 2em; padding: 0;}
.footer_social li { list-style: none; font-size: 1.8rem;}
.footer_social a { color: #ccc;}
.footer_social a:hover { color: #fff;}

.btn-m-menu { 
  position: relative;
  float: right;
  display: block;
  width: 25px;
  margin: -32px 0 0;
  padding: 8px 0;
}
.btn-m-menu span,
.btn-m-menu:before,
.btn-m-menu:after {
  display: block;
  background: #fff;
  height: 4px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.btn-m-menu:before,
.btn-m-menu:after { position: absolute; content: " "; width: 100%;}
.btn-m-menu:before { top: 0;}
.btn-m-menu:after { bottom: 0; width: 75%;}
.btn-m-menu span {  width: 50%;}

.btn-m-menu.active span { opacity: 0;}
.btn-m-menu.active:before {
  -webkit-transform: translate(0px, 7px) rotate(45deg);
  transform: translate(0px, 7px) rotate(45deg);
}
.btn-m-menu.active:after {
  width: 100%;
  -webkit-transform: translate(0px, -9px) rotate(-45deg);
  transform: translate(0px, -9px) rotate(-45deg);
}
a.btn-m-menu { outline: none;}