#nav-icon{position:fixed;right:1em;top:1em;z-index:100;width:2em;height:2em;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer}#nav-icon span{-webkit-box-shadow:0 1px 4px 0 rgba(50,50,50,.5);-moz-box-shadow:0 1px 4px 0 rgba(50,50,50,.5);box-shadow:0 1px 4px 0 rgba(50,50,50,.5);display:block;position:absolute;height:4px;width:100%;background:#000000;opacity:1;left:0;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}#nav-icon span:nth-child(1){top:0}#nav-icon span:nth-child(2),#nav-icon span:nth-child(3){top:12px}#nav-icon span:nth-child(4){top:24px}#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(4){top:12px;width:0;left:50%}#nav-icon.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#nav-icon.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}