/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
@import url(fonts.googleapis.com/css?family=Open+Sans:300,400,800); @import url(fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic); html {
line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%
}
article, aside, footer, header, nav, section {
display: block
}
h1 {
font-size: 2em; margin: 0 auto; text-align: center
}
figcaption, figure, main {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box; height: 0; overflow: visible
}
pre {
font-family: monospace, monospace; font-size: 1em
}
a {
background-color: transparent; -webkit-text-decoration-skip: objects
}
abbr {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted
}
b, strong {
font-weight: inherit; font-weight: bolder
}
code, kbd, samp {
font-family: monospace, monospace; font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0; color: #000
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio, video {
display: inline-block
}
audio:not() {
display: none; height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button, input, optgroup, select, textarea {
margin: 0
}
button, input {
overflow: visible
}
button, select {
text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none; padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
outline: 1px dotted ButtonText
}
legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal
}
progress {
display: inline-block; vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
- type=radio
-
{
box-sizing: border-box; padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto
}
- type=search
-
{
-webkit-appearance: textfield; outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit
}
details, menu {
display: block
}
summary {
display: list-item
}
canvas {
display: inline-block
}
[hidden], template {
display: none
}
body .intro {
font-size: 1.25em; line-height: 1.7
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin: .5rem 0 1.5rem; font-family: Open Sans, Helvetica, Arial, sans-serif
}
.h1, h1 {
font-size: 2em; line-height: 1.25
}
@media (min-width:43.75em) {
.h1, h1 { font-size: 2.5em; line-height: 1.125 }
}
@media (min-width:56.25em) {
.h1, h1 { font-size: 3em; line-height: 1.05 }
}
.h2, h2 {
font-size: 1.625em; line-height: 1.15384615
}
@media (min-width:43.75em) {
.h2, h2 { font-size: 2em; line-height: 1.25 }
}
@media (min-width:56.25em) {
.h2, h2 { font-size: 2.25em; line-height: 1.25 }
}
.h3, h3 {
font-size: 1.375em; line-height: 1.13636364
}
@media (min-width:43.75em) {
.h3, h3 { font-size: 1.5em; line-height: 1.25 }
}
@media (min-width:56.25em) {
.h3, h3 { font-size: 1.75em; line-height: 1.25 }
}
.h4, h4 {
font-size: 1.125em; line-height: 1.11111111
}
@media (min-width:43.75em) {
.h4, h4 { line-height: 1.22222222 }
}
blockquote {
font-size: 1.25em; line-height: 1.25; padding: 0
}
@media (min-width:43.75em) {
blockquote { font-size: 1.5em; line-height: 1.45833333 }
}
.clearfix {
zoom: 1
}
.clearfix:after, .clearfix:before {
content: "\0020"; display: block; height: 0; overflow: hidden
}
.clearfix:after {
clear: both
}
.button, .button-secondary, .button-tertiary, .button__outline {
background-color: #2e8b57; display: inline-block; position: relative; font-family: Open Sans, Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; font-size: 1em; line-height: 1.2em; font-weight: 400; padding: .5em 1.5em; border: 0; border-radius: 4px; cursor: pointer; margin-bottom: .5em; transition: background-color .14s ease-in-out
}
.button-secondary:focus, .button-secondary:hover, .button-tertiary:focus, .button-tertiary:hover, .button:focus, .button:hover, .button__outline:focus, .button__outline:hover {
color: #fff; text-decoration: none; background-color: #21653f
}
.button-secondary:active, .button-tertiary:active, .button:active, .button__outline:active {
top: 1px
}
.button-secondary {
background-color: #233e5b
}
.button-secondary:hover {
background-color: #152536
}
.button-tertiary {
background-color: #aaa
}
.button-tertiary:hover {
background-color: #919191
}
.button__outline {
background-color: transparent; border: 3px solid #2e8b57; color: #2e8b57
}
.button__outline:hover {
background-color: #2e8b57; color: #fff
}
label {
display: block; margin-bottom: 5px
}
input, input, input, input, input, input, textarea {
background: #e6e6e6; padding: 5px; outline: none; border: none; height: 44px; width: 300px; margin-bottom: .5rem
}
input:focus, input:focus, input:focus, input:focus, input:focus, input:focus, textarea:focus {
border: 1px solid #2e8b57
}
input.full-width, input.full-width, input.full-width, input.full-width, input.full-width, input.full-width, textarea.full-width {
width: 100%
}
textarea {
height: 132px
}
form {
margin-bottom: 40px
}
form .field {
margin-bottom: 20px
}
form .note {
margin-top: 5px; color: #aaa
}
form .req {
font-style: italic
}
form .error .reason {
margin-top: 5px; color: #ff4136
}
form .error input, form .error input, form .error input, form .error input, form .error input, form .error input, form .error textarea {
border-color: #ff4136
}
table {
width: 100%; border: 1px solid #d0d0d0; margin-bottom: 1.5em
}
table caption {
margin: 0 0 7px; font-size: .75em; color: #aaa; text-transform: uppercase; letter-spacing: 1px
}
tr {
border-bottom: 1px solid #d0d0d0
}
tr:nth-child(2n) {
background-color: #f7f7f7
}
td {
padding: 7px; border-right: 1px solid #d0d0d0
}
td:last-child {
border-right: 0
}
th {
background-color: #f7f7f7; border-bottom: 1px solid #d0d0d0; border-right: 1px solid #d0d0d0
}
th:last-child {
border-right: 0
}
.highlight {
white-space: pre; overflow: auto; word-wrap: normal; border-radius: 3px; padding: 20px; background: #343642; color: #c1c2c3
}
.highlight .hll {
background-color: #ffc
}
.highlight .gd {
color: #2e3436; background-color: #0e1416
}
.highlight .gr {
color: #eeeeec; background-color: #c00
}
.highlight .gi {
color: #babdb6; background-color: #1f2b2d
}
.highlight .go {
color: #2c3032; background-color: #2c3032
}
.highlight .kt {
color: #e3e7df
}
.highlight .ni {
color: #888a85
}
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs {
color: #8d9684
}
.highlight .bp, .highlight .err, .highlight .g, .highlight .ge, .highlight .gp, .highlight .gs, .highlight .gt, .highlight .l, .highlight .ld, .highlight .n, .highlight .nc, .highlight .nd, .highlight .ne, .highlight .nl, .highlight .nn, .highlight .nx, .highlight .ow, .highlight .p, .highlight .py, .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sr, .highlight .ss, .highlight .sx, .highlight .w, .highlight .x {
color: #c1c2c3
}
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .nt {
color: #729fcf
}
.highlight .cp, .highlight .gh, .highlight .gu, .highlight .na, .highlight .nf {
color: #e9a94b
}
.highlight .il, .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .nb, .highlight .no {
color: #8ae234
}
.highlight .o {
color: #989daa
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi {
color: #fff
}
html {
box-sizing: border-box
}
*, :after, :before {
box-sizing: inherit
}
body {
font-family: PT Serif, Georgia, Times, serif; line-height: 1.75; font-size: 112.5%; color: #111; overflow-x: hidden; margin: 0
}
body p, body ul {
margin: 0 0 2rem
}
::-moz-selection {
background: #2e8b57; color: #fff
}
::selection {
background: #2e8b57; color: #fff
}
audio, iframe, img, object, video {
max-width: 100%
}
.container {
max-width: 610px; padding: 0 20px; margin-left: auto; margin-right: auto
}
a {
color: #2e8b57
}
a:hover {
color: #1b5233
}
.nav-collapse {
z-index: 1
}
.nav-collapse ul {
margin: 0; padding: 0; width: 100%; display: block; list-style: none
}
.nav-collapse ul li {
width: 100%; display: block; background: #2e8b57; border-bottom: 2px solid #349e63
}
.nav-collapse ul li a {
color: #fff; text-decoration: none; display: block; padding: 5px 2rem
}
.js .nav-collapse {
clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; clear: both; width: 100%
}
.nav-collapse.opened {
max-height: 9999px
}
.nav-toggle {
-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: right; line-height: 2em; margin-top: .5em; background-color: #2e8b57; border-radius: 4px; padding: 0 .5em; color: #fff; text-decoration: none; position: relative; right: 2rem; transition: all .2s ease-in-out
}
.nav-toggle:hover {
color: #fff; background-color: #21653f
}
.noList {
list-style: none; padding-left: 0; margin-left: 0
}
dt {
font-weight: 700
}
dd {
margin: 0 0 1.5rem
}
.post ol ol, .post ol ul, .post ul ol, .post ul ul {
margin: 0
}
.pageTitle {
margin: 2rem auto 1em; text-align: center
}
.content {
padding-top: 1em
}
.header {
background-color: #2092df;
}
.header .container {
padding: 0; max-width: 100%; text-align: center
}
.header h1 {
margin: 0 auto; float: left; padding-left: 2rem; font-size: 1em; line-height: 3em; font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; text-align: center
}
.header h1 a {
color: #d0d0d0; text-decoration: none; text-align: center
}
.post .postTitle {
text-align: center; margin-top: 2rem; margin-bottom: 1rem
}
.post blockquote {
clear: both; margin: 2.5em 0; padding: 0; line-height: 1.8; position: relative
}
.post blockquote:before {
top: -1.25em
}
.post blockquote:after, .post blockquote:before {
content: ""; position: absolute; background: #2e8b57; display: block; height: 2px; width: 150px; left: calc(50% - 75px)
}
.post blockquote:after {
bottom: -1.25em
}
.post .meta {
text-align: center; color: gray; font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: 300
}
.post figure {
margin: 3rem 0
}
.post figure figcaption {
text-align: center; font-size: .9em; font-style: italic; color: #5e5e5e
}
.post figure img {
margin: 0 auto; display: block
}
.post .highlight, .post img {
margin-bottom: 2rem
}
.post .highlight {
clear: both
}
.post .dropcap {
color: #2e8b57; margin-right: .45rem
}
.post .featuredImage {
position: relative; margin-top: 2rem
}
.post .featuredImage img {
margin-bottom: 0
}
.postNav {
border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; overflow: hidden
}
.postNav .next, .postNav .prev {
display: block; width: 100%; height: 5rem; overflow: hidden; position: relative; font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: 800; font-size: .9em; text-transform: uppercase; text-align: center
}
.postNav .next img, .postNav .prev img {
z-index: 1; display: block; position: absolute; left: 0; height: auto
}
.postNav .next img, .postNav .next span, .postNav .prev img, .postNav .prev span {
top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%
}
.postNav .next span, .postNav .prev span {
z-index: 10; position: relative; padding: .5rem; position: absolute; line-height: 1.4
}
.postNav .next.image, .postNav .prev.image {
text-decoration: none; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .8); padding: 0 .5rem; position: relative; transition: all .2s ease-in-out
}
.postNav .next:hover.image, .postNav .prev:hover.image {
opacity: .8
}
.postNav .prev span {
left: 0
}
.postNav .next span {
right: 0
}
.footer {
text-align: center; padding: 2rem 0; clear: both
}
.footer .container {
border-top: 4px solid #d9d9d9; padding-top: .5em; max-width: 90%
}
.footer .copy, .footer .footer-links {
font-size: .8em
}
.footer .copy {
margin-bottom: 1rem
}
.footer-links ul {
text-align: center
}
.footer-links ul li {
display: inline-block
}
.footer-links ul li a {
display: inline-block; width: 30px; height: 30px; transition: all .2s ease-in-out
}
.footer-links ul li a svg {
display: block; width: 100%; height: 100%
}
.footer-links ul li a svg .outer-shape {
fill: #2e8b57
}
.footer-links ul li a svg .inner-shape {
fill: #fff
}
.footer-links ul li:hover a svg .outer-shape {
fill: #21653f
}
.pagination .next {
float: left
}
.pagination .previous {
float: right
}
.posts li {
margin-bottom: 4rem; position: relative
}
.posts li:before {
content: ""; position: absolute; bottom: -2rem; left: 0; background: #e6e6e6; height: 2px; width: 60px
}
.posts li a {
text-decoration: none
}
.posts li a:hover {
text-decoration: underline
}
.posts li .date {
color: gray; font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: 300; font-size: .8em
}
.posts li h3 {
margin: 0 0 .5em
}
@media only screen and (min-width:800px) {
body { font-size: 125% } .content { padding-top: 0; position: relative; z-index: 1 } .content:after { z-index: -1; background: #fff; content: ""; display: block; width: 100%; height: 10em; position: absolute; top: -2em; left: 0; -webkit-transform: skewY(-2deg); transform: skewY(-2deg); -webkit-transform-origin: bottom left; transform-origin: bottom left } .container { max-width: 880px; margin-left: auto; margin-right: auto; padding: 0 } #home .pageTitle, #home .pagination, #home .posts { width: 75%; float: none; margin: 0 auto 1.5em } #home .pageTitle { margin: 2rem auto 1em } .header { height: 15em; position: relative; padding-bottom: 2em; margin: 0% auto } .header .container { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 800px; overflow: hidden } .header h1 { font-size: 3em; line-height: 1; letter-spacing: -3px; padding-left: 0; margin: 0% auto; text-align: center } .header nav { float: left; clear: left } .header nav ul { margin: 0 } .header nav ul li { display: inline; line-height: 3em; background: none; padding: 0 5px; border: none } .header nav ul li a { color: #fff; font-size: .9em; text-decoration: none; padding: 0 .25em } .header nav ul li a:hover { color: #ccc } .header nav ul li.current { padding-bottom: .25em; border-bottom: 4px solid hsla(0, 0%, 100%, .4) } .js .nav-collapse { position: relative; max-height: none } .js .nav-collapse.closed { max-height: none } .js .nav-collapse ul li a { display: inline-block } .nav-toggle { display: none } .post .pageTitle, .post dl, .post h1, .post h2, .post h3, .post h4, .post h5, .post h6, .post ol, .post p, .post ul { width: 75%; float: none; margin: 0 auto 2rem } .post .h1, .post .h2, .post .h3, .post .h4, .post .h5, .post .h6, .post h1, .post h2, .post h3, .post h4, .post h5, .post h6 { margin: 1rem auto } .post .pageTitle { margin: 2rem auto 1em } .post .featuredImage { position: relative; margin-top: 2rem } .post .featuredImage:before { background: #fff; content: ""; display: block; width: 100%; height: 4em; position: absolute; top: -2em; left: 0; -webkit-transform: skewY(-2deg); transform: skewY(-2deg); -webkit-transform-origin: bottom left; transform-origin: bottom left } .postNav .next, .postNav .prev { width: 50% } .postNav .prev { float: left; text-align: left } .postNav .next { text-align: right; float: right } .footer-links { float: right } .footer .copy { float: left } .footer .container { padding: 1rem 0; max-width: 800px } .contactContent { max-width: 48%; margin-right: 2%; float: left } #contact form { max-width: 48%; width: 48%; float: right; margin-right: 0 }
}
@media only screen and (min-width:1200px) {
body { font-size: 137.5% } .container { max-width: 990px }
}