/* hamburger Menu - Background */
.hamburger {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
 list-style: none;
  background: #111;
	font-family: Ubuntu, Arial, Helvetica, sans-serif;
	font-size:1em;
}

/* hamburger Menu - List items */
.hamburger-item {
  /* non-critical appearance styles */
  width: 305px;
  background:none;
  border-top: 0px;
  border-bottom: 0px;
}

.hamburger-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: white;
  color: white;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.hamburger-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}



/* Site Wrapper - Everything that isn't hamburger */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
/*  padding: 0em; */

}



/* Nav Trigger */
.hamburger-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(100, 100, 100, 100);

}

.hamburger-trigger:hover {
background:white;

}

 

  
label[for="hamburger-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 1px; top: 110px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 20px;
  width: 20px;
  cursor: pointer;
  background-image: url('/images/icon-menu.png');
   background-repeat:no-repeat;
background-size: contain;
}


label[for="hamburger-trigger"]:hover {
  position: fixed;
  left: 1px; top: 110px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 20px;
  width: 20px;
  cursor: pointer;
	background-image: url('/images/icon-menu.png');
	background-repeat:no-repeat;

  background-size: contain;

}

label:hover {
background:white;
}



/* Make the Magic Happen */
.hamburger-trigger + label, .site-wrap {
  transition: left 0.2s;
}

.hamburger-trigger:checked + label {
  left: 215px;
}

.hamburger-trigger:checked ~ .site-wrap {
  left: 305px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

<!---

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
    padding: 2px;
    background: #ddd;
}

/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }



.no-scroll {
   position: fixed;
}





	
	@media (min-width: 641px) {
	
		.hamburger {
			display: none;
		}
	}
	
	
	

$('body').on('click', '.js-side-nav-toggle', function(ev) {
    $('html, body').toggleClass('no-scroll');
});