/* Foundations: layout column, typography, header, navigation, footer. */
*, *:before, *:after { box-sizing: border-box; }
::-moz-selection { background: #cef4ab; text-shadow: none; }
::selection { background: #cef4ab; text-shadow: none; }
body { margin: 0; background: #ffffff; color: #424242; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.8; padding-top: 48px; }
a { color: #66bb18; text-decoration: none; }
a:hover { color: #41770f; }
img { max-width: 100%; height: auto; }
strong { font-weight: 600; }
em { font-style: italic; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0 0 15px 0; }
ul, ol { margin: 0 0 20px 0; padding: 0 0 0 20px; }
li { margin: 0 0 4px 0; }
button { font-family: inherit; cursor: pointer; }

/* The single centred content column every block sits in. */
.article-heading, .article-content, .featured-image, .card-index, .footer-inner, .header-inner { width: 90%; margin-right: auto; margin-left: auto; }

/* Page chrome */
header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 48px; background-color: #5aa415; color: #ffffff; }
header .header-inner { display: flex; align-items: center; height: 48px; }
header .site-logo { flex-grow: 1; font-size: 20px; line-height: 1.2; font-weight: 700; }
header .site-logo a { color: #ffffff; }
header .site-logo a span { opacity: 0.5; }
header .nav-toggle { width: 40px; height: 40px; padding: 0; border: 0; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 26px 26px; font-size: 0; color: transparent; }
header .nav-close { position: absolute; top: 4px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; font-size: 0; color: transparent; }
header .site-nav ul { margin: 0; padding: 0; list-style: none; }
header .site-nav li { margin: 0; }
header .site-nav a { display: block; color: #ffffff; font-size: 13px; font-weight: 600; text-transform: uppercase; }

/* Off-canvas navigation, shown below the tablet breakpoint. */
.site-nav { position: fixed; top: 0; right: 0; z-index: 1000; width: 82%; height: 100%; overflow-y: auto; background-color: #66bb18; transform: translate(100%, 0); transition: transform 0.4s; }
.site-nav.is-visible { transform: translate(0, 0); box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2); }
.site-nav ul { padding-top: 48px; }
.site-nav a { padding: 10px 15px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.site-nav a:hover { background-color: #4d8e12; color: #ffffff; }

/* Logged-in users get the WP admin bar above everything; drop the fixed
   header below it so the logo is not hidden underneath. */
.admin-bar header { top: 32px; }

footer { margin-top: 60px; background-color: #222222; }
footer .footer-inner { padding: 20px 0; }
footer .footer-copyright { color: #999999; font-size: 12px; line-height: 1.2; text-align: center; }

/* Article body typography */
.article-content { color: #000000; font-size: 16px; line-height: 1.6; }
.article-content h2 { margin: 60px 0 15px 0; padding: 10px 0; border-bottom: 1px solid #dddddd; color: #4d8e12; font-size: 24px; line-height: 1.1; clear: both; }
.article-content h3 { margin: 10px 0 5px 0; padding-top: 20px; color: #66bb18; font-size: 21px; line-height: 1.4; clear: both; }
.article-content h4 { margin: 10px 0 5px 0; padding-top: 15px; color: #333333; font-size: 19px; line-height: 1.5; }
.article-content a { color: #66bb18; font-weight: 600; text-decoration: underline; }
.article-content a:hover { color: #4d8e12; text-decoration: none; }
.article-content ul { margin-bottom: 20px; padding: 0; list-style: none; }
.article-content ul li { display: table; width: 100%; padding: 4px 0; line-height: 1.6; }
.article-content ul li:before { display: table-cell; width: 18px; color: #333333; font-size: 20px; vertical-align: top; content: "\2022"; }
.article-content ol { margin: 20px 0; padding-left: 20px; }
.article-content blockquote { clear: both; margin: 25px 0; padding: 15px 25px 5px 25px; border-left: 3px solid #66bb18; background-color: #f9f9f9; color: #777777; }
.article-content img { height: auto; }
.article-content .alignright { float: right; margin: 0 0 15px 20px; }
.article-content .alignleft { float: left; margin: 0 20px 15px 0; }
.article-content .aligncenter { display: block; margin: 0 auto 15px auto; }
.article-content .alignnone { display: block; margin: 0 0 15px 0; }

/* The admin bar grows to 46px on narrow screens. */
@media (max-width: 782px) {
  .admin-bar header { top: 46px; }
}

@media (max-width: 640px) {
  .article-content .alignright, .article-content .alignleft { float: none; margin: 0 0 15px 0; }
}

/* Below 600px WordPress makes the admin bar scroll away with the page, so a
   pinned header would leave a gap under it. Let the header scroll too. */
@media (max-width: 600px) {
  .admin-bar header { position: absolute; top: 46px; }
}

@media (min-width: 641px) {
  body { padding-top: 52px; }
  header { height: 52px; }
  header .header-inner { height: 52px; }
  header .site-logo { font-size: 26px; }
  header .nav-toggle, header .nav-close { display: none; }
  .site-nav { position: static; width: auto; height: auto; overflow: visible; background-color: transparent; transform: none; }
  .site-nav ul { display: flex; padding-top: 0; }
  header .site-nav a { padding: 0 15px; border: 0; }
  header .site-nav a:hover { background-color: transparent; opacity: 0.6; }
  .article-heading, .article-content, .featured-image, .card-index, .footer-inner, .header-inner { max-width: 850px; }
  footer .footer-inner { display: flex; align-items: center; }
  footer .footer-copyright { font-size: 13px; text-align: left; }
}

@media (min-width: 1280px) {
  .header-inner, .footer-inner { width: 1200px; max-width: 1200px; }
  .article-heading, .article-content, .featured-image, .card-index { width: 850px; }
}