input#nav,label.nav-label{display:none;}
input#nav[type=checkbox]:checked ~ nav{min-height:30em;width:auto;padding-top:10%;padding-bottom:5em;}
nav{position:absolute;z-index:2;max-height:0;right:5em;overflow:hidden;-webkit-transition:max-height .0s ease,padding .3s ease;-moz-transition:max-height .0s ease,padding .3s ease;-o-transition:max-height .0s ease,padding .3s ease;transition:max-height .0s ease,padding .3s ease;}
nav ul{width:auto;float:left;}
nav ul li{display:block;list-style:none;height:auto;}
nav ul li a{margin:0.25em;padding:0.5em;color:rgba(250,250,250,1);text-transform:none;text-decoration:none;font:'Source Sans Pro', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease;}
nav ul li a:hover{color:rgba(0,102,153,1);transition:color .2s, .2s, border .2s;}
input#nav,label.nav-label{text-transform:uppercase;text-decoration:none;font:30px 'Source Sans Pro',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-transition:border-color .3s ease;-moz-transition:border-color .3s ease;-o-transition:border-color .3s ease;transition:border-color .3s ease;}
label.nav-label{position:absolute;display:block;height:38px;width:1.75em;right:0.5em;top:20px;padding:10px;cursor:pointer;}
label.nav-label:after{content:'';position:fixed;top:0;right:0;bottom:0;left:0;display:block;background:rgba(43,46,51,1);border-bottom:solid 2px rgb(0,102,153);z-index:1;pointer-events:none;opacity:0;-webkit-transition:opacity .2s ease;-moz-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease;}
label.nav-label span,
label.nav-label span:before,
label.nav-label span:after{content:'';position:absolute;right:1%;display:block;width:30px;height:3px;font-size:0;background-color:rgba(0,102,153,1);-webkit-transition:background-color .3s ease;-moz-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease;}
label.nav-label span{top:0;border:20px solid transparent;border-top-width:28px;border-bottom-width:28px;background-clip:padding-box;z-index:3;}
label.nav-label span:before,
label.nav-label span:after{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;}
label.nav-label span:before{top:-11px;}
label.nav-label span:after{bottom:-11px;}
input#nav[type=checkbox]:checked ~ label.nav-label:after{opacity:0.98;}
input#nav[type=checkbox]:checked ~ label.nav-label span{background-color:transparent;}
input#nav[type=checkbox]:checked ~ label.nav-label span:before,
input#nav[type=checkbox]:checked ~ label.nav-label span:after{left:-5px;width:40px;}
input#nav[type=checkbox]:checked ~ label.nav-label span:before{top:0;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
input#nav[type=checkbox]:checked ~ label.nav-label span:after{bottom:0;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);}
@media only screen and (min-width:0em) and (max-width:35em){input#nav[type=checkbox]:checked ~ nav{min-height:70em;top:1em;width:100%;}
nav{right:1em;}
label.nav-label{top:5px;}
}
@media only screen and (min-width:35em) and (max-width:60em){label.nav-label{top:5px;}
}
@media only screen and (min-width:80em){input#nav[type=checkbox]:checked ~ nav{min-height:10em;padding-top:10%;}
nav{right:10em;}
}