/*
author : http://joren.co/sass-burger/
usage:
html:
<a href="#" class="menu-button" id="menuButton">
    <span class="burger-icon"></span>
</a>
javasciprt:
var menuButton = document.getElementById('menuButton');
	menuButton.addEventListener('click', function (e) {
		menuButton.classList.toggle('is-active');
		e.preventDefault();
	});

*/

.menu-button {
  display: inline-block;
  padding: .5em;
  border: transparent;
  }

.burger-icon {
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .burger-icon, .burger-icon::before, .burger-icon::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #171717;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
	
	.home .burger-icon, 
	.home .burger-icon::before, 
	.home .burger-icon::after {
		background-color:#fff;
	}
   .navbar_fixed .burger-icon, 
   .navbar_fixed .burger-icon::before, 
   .navbar_fixed .burger-icon::after {
   	    background-color:#000;
   } 
  .burger-icon::before, .burger-icon::after {
    position: absolute;
    content: ""; }
  .burger-icon::before {
    top: -8px; }
  .burger-icon::after {
    top: 8px; }

.menu-button.is-active .burger-icon {
  background-color: transparent; }

.menu-button.is-active .burger-icon::before {
  -webkit-transform: translateY(8px) rotate(45deg);
  -moz-transform: translateY(8px) rotate(45deg);
  -ms-transform: translateY(8px) rotate(45deg);
  -o-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg); }

.menu-button.is-active .burger-icon::after {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  -moz-transform: translateY(-8px) rotate(-45deg);
  -ms-transform: translateY(-8px) rotate(-45deg);
  -o-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg); }