#nav, #nav ul { list-style: none; margin: 0; padding: 0; }

#nav #toggleMenu, #nav #hideMenu { display: none; }

.navbar { height: 44px; background-color: #272727; }

#nav .primary-nav { z-index: 2; position: relative; display: block; }

#nav > .primary-nav > li { display: block; float: left; position: relative; }

#nav > .primary-nav > .right > a { padding: 0px; }

#nav > .primary-nav > li > a { /* Layout */ line-height: 44px; display: block; padding: 0 22px; border-color: #aaa; /* Typography */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; color: #aaa; text-decoration: none; /* Transitions */ -webkit-transition: color .2s ease-in, border-top-color .2s ease-in; -ms-transition: color .2s ease-in, border-top-color .2s ease-in; -moz-transition: color .2s ease-in, border-top-color .2s ease-in; -o-transition: color .2s ease-in, border-top-color .2s ease-in; transition: color .2s ease-in, border-top-color .2s ease-in; }

#nav > .primary-nav > li:hover > a { color: #fff; border-top-color: #fff; }

#nav > .primary-nav > li.active { background-color: #404040; }

#nav > .primary-nav > li.dropdown > a { padding-right: 28px; }

#nav > .primary-nav > li.dropdown > a[role="button"] { cursor: pointer; }

.dropdown > a::after { position: absolute; display: block; content: ""; height: 0; width: 0; border: 4px solid transparent; border-top-color: inherit; right: 11px; top: 22px; }

#nav .primary-nav ul { z-index: auto; display: block; position: absolute; top: 44px; left: -9999px; opacity: 0; background: #272727; cursor: pointer; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: opacity .22s ease-in; -ms-transition: opacity .22s ease-in; -moz-transition: opacity .22s ease-in; -o-transition: opacity .22s ease-in; transition: opacity .22s ease-in; }

#nav .primary-nav ul li { display: block; position: absolute; height: 0px; -webkit-transition: height .15s ease-in; -ms-transition: height .15s ease-in; -moz-transition: height .15s ease-in; -o-transition: height .15s ease-in; transition: height .15s ease-in; }

#nav > .primary-nav > li:hover > ul { left: 0px; opacity: 1; }

#nav .primary-nav li:hover > ul > li { position: relative; height: 31px; }

#nav .primary-nav ul li a { /* Layout */ display: block; padding: 7px 12px 7px 22px; width: 200px; /* Typography */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 14px; text-decoration: none; color: #aaa; font-weight: 400; /* Background & effects */ background: #272727; -webkit-transition: color .2s ease-in, border-left-color .2s ease-in; -ms-transition: color .2s ease-in, border-left-color .2s ease-in; -moz-transition: color .2s ease-in, border-left-color .2s ease-in; -o-transition: color .2s ease-in, border-left-color .2s ease-in; transition: color .2s ease-in, border-left-color .2s ease-in; }

#nav .primary-nav ul li:hover > a { color: #fff; }

.nav ul ul { display: none; }

@media screen and (max-width: 900px) { #nav .primary-nav { width: 100%; max-width: 900px; height: auto; background: #272727; }
  #nav .primary-nav li { float: none; padding: 0 10px; display: none; }
  #nav > .primary-nav > li > a { line-height: 45px; padding: 0 10px; }
  .dropdown > a::after { display: none; }
  #nav .primary-nav ul { position: relative; top: 0px; left: 0px; right: auto; opacity: 1; clear: both; }
  #nav .primary-nav ul li, #nav > .primary-nav > li:hover > ul > li { height: auto; position: relative; }
  #nav .primary-nav ul li a { padding: 5px 10px; width: auto; }
  #nav #toggleMenu { display: block; padding-left: 15px; }
  #nav #toggleMenu > a, #nav #hideMenu > a { padding: 0px 10px; z-index: 1; line-height: 45px; }
  #nav:target li { display: block; }
  #nav:target #toggleMenu { display: none; }
  #nav:target #hideMenu { display: block; background: rgba(0, 0, 0, 0.3); border-top-left-radius: 3px; border-top-right-radius: 3px; padding-left: 25px; padding: 0 15px 0 15px; }
  #nav #hideMenu > a { color: #aaa; }
  #toggleMenu > a::after, #hideMenu > a::after { position: absolute; content: ""; right: 35px; top: 21px; height: 9px; width: 20px; border-top: 2px solid #aaa; border-bottom: 2px solid #aaa; z-index: 1; }
  #toggleMenu > a::before, #hideMenu > a::before { position: absolute; content: ""; right: 35px; top: 13px; height: 3px; width: 20px; border-bottom: 2px solid #aaa; z-index: 1; }
  #hideMenu > a::after, #hideMenu > a::before { border-color: #aaa; }
  .navbar { background-color: #272727; height: 44px; display: inline; }
  #nav > .right.primary-nav { background-color: #414141; } }
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 15px; }

/** Also set `margin-top` of paragraphs to maintain spacing with images. Margins between paragraphs will automatically collapse, so that will not be a concern. */
p { margin-top: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 1em; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #3366cc; }
h2 { font-size: 1.5em; }
/** Links */
a { color: #3366cc; text-decoration: none; }
a:visited { color: #330099; }
a:hover { color: link-hover-color; text-decoration: underline; }

/** Blockquotes */
blockquote { color: #bdbdbd; border-left: 4px solid white; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }

/** Clearfix */
/** Banner */
nav + header { background: linear-gradient(to bottom, #808080, #ffffff); }

.wrap { max-width: 1920px; min-height: 100%; display: block; margin-bottom: -3em; margin-left: auto; margin-right: auto; }

@media screen and (max-width: 900px) { .wrap { margin-bottom: -8.4em; } }
.wrap:after { content: ""; display: block; }

.page-content { padding: 30px; max-width: 800px; }

.page-heading { font-size: 20px; }

.post-header { margin: 30px 0; clear: both; }

.post-title { font-size: 2em; letter-spacing: 0px; line-height: 1; }

.post-content { margin-bottom: 30px; padding: 0 30px 30px; max-width: 800px; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 0.875em; color: #a6a6a6; }

.post-link { display: block; font-size: 24px; }

.wrap header + .row { margin-left: 0; }

#footer { background-color: #676767; }

.site-footer, .wrap:after { height: 3em; }

.site-footer { background: #676767; position: fixed; top: 100%; right: 0; left: 0; bottom: 0; margin-top: -3em; z-index: 9999; background-color: rgba(0, 0, 0, 0.9); }

@media screen and (max-width: 768px) { .site-footer, .wrap:after { height: 8.4em; }
  .recent-posts ul li { margin-bottom: 2em; } }
.row figure { display: inline-block; }

figcaption { text-align: center; }

td { text-align: center; }

.center { display: block; margin: 0 auto; }

.blocky { position: relative; overflow: hidden; }

.center-text { text-align: center; }

@media screen and (min-width: 481px) { .hide-for-large { display: none; } }
@media screen and (max-width: 768px) { .hide-for-small { display: none; } }
@media screen and (min-width: 481px) { img.left, figure.left { clear: left; float: left; margin: 0 15px 15px; }
  img.right, figure.right { clear: right; float: right; margin: 0 15px 15px; } }
.key-concept { text-align: center; font-weight: bold; }

/* Above styles are adapted from the Slim Pickins jekyll theme https://github.com/chrisanthropic/slim-pickins-jekyll-theme */
/** Snippets below from: Foundation for Sites by ZURB Version 6.2.0 foundation.zurb.com Licensed under MIT Open Source */
html { font-size: 100%; box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

body { padding: 0; margin: 0; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: normal; line-height: 1.5; color: #222; background: #fefefe; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle; }

.row { max-width: 75rem; margin-right: auto; clear: both; }

.row::before, .row::after { content: ' '; display: table; flex-basis: 0; order: 1; }

.row::after { clear: both; }

/** End Foundation content */