@media screen and (min-width: 651px) {
nav { display: none; }
}
@media screen and (max-width: 650px) {
nav ul { display: none;  background: #fff; box-shadow: #666 0px 0px 10px 0px; }
nav label { display: block; background: #eee; width: 40px; height: 40px; cursor: pointer; position: absolute; left: 20px; top: 50px; z-index: 100; }
nav label:after { content: ''; display: block; width: 30px; height: 5px; background: #555; margin: 7px 5px; box-shadow: 0px 10px 0px #555, 0px 20px 0px #555 }
nav [type="checkbox"]:checked ~ ul { display: block; z-index: 9999; position: absolute; right: 20px; left: 20px; top: 113px; }
nav a { color: #777; text-decoration: none; }
nav ul li { display: block; float: none; width: 100%; text-align: left;text-indent: 20px; line-height: 3.0em }
nav > ul > li > a { color: #fff; }
nav > ul > li { margin-left: 0px; }
nav > ul > li:hover {background: none #eee repeat-x bottom;}
nav > ul li ul li { display: block; float: none; }
nav > ul li ul { display: block; position: relative; width: 100%; z-index: 9999; float: none; }
h1 { font-size: 26px; }
#navMain {display: none;}
nav input {  top: -1000px;
  position: relative;}
}