/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; }
img { max-width: 100%; height: auto; }
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }

/* DEFAULTS */
body { font-family: "EB Garamond", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; color: #252525; background: #046782 url(/assets/images/bg-body.png) fixed top center repeat-x; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; margin: 0 0 1rem 0; }
h1 { font-size: 1.6em; color: #04708d; text-transform: uppercase; padding: 0 0 0.5rem 0; border-bottom: 1px solid #79b2c2; margin: 0 0 2rem 0; }
h2 { font-size: 1.4em; font-weight: bold; color: #04708d; }
h3 { font-size: 1.2em; }
h4,h5,h6 { font-size: 1.0em; text-transform: uppercase; }
p { line-height: 1.7; margin: 0 0 1rem 0; }
blockquote { margin: 0 0 1rem 0; }
blockquote p { font-size: 1.1em; font-style: italic; margin: 0; }
blockquote p::before { content: "\201C"; }
blockquote p::after { content: "\201D"; }
blockquote cite { font-size: 0.9em; font-style: italics; }
ul { list-style: disc; line-height: 1.7em; margin: 0 0 1rem 2rem; }
ol { list-style: decimal; line-height: 1.7em; margin: 0 0 1rem 2rem; }
dl { line-height: 1.7em; margin: 0 0 1rem 0; }
dt { font-weight: bold; }
figure { margin: 0 0 1rem 0; }
figcaption { font-size: 0.85em; font-style: italic; color: #757575; }
hr { height: 0; border: 0; clear: both; }
b, strong { font-weight: bold; }
em, i { font-style: italic; }
small { font-size: 0.8em; }
a { color: #04708d; text-decoration: none; transition: 0.5s; }
a:hover { color: #4798c1; text-decoration: none; }



/* FORMS */
form p { margin: 0 0 1rem 0; }
label { display: block; cursor: pointer; }
input[type='text'], input[type='email'], input[type='url'], input[type='password'], input[type='tel'], input[type='num'] { width: 100%; height: 40px; font-size: 16px; text-indent: 5px; background: #e6f1f4; border: 0; }
select { max-width: 100%; height: 40px; font-size: 16px; }
textarea { width: calc(100% - 10px); height: 240px; font-size: 16px; padding: 5px; background: #e6f1f4; border: 0; }
input[type='submit'] { display: block; width: 100%; font-size: 16px; color: #FFF; text-align: center; padding: 1em; background: transparent; margin: 0; border: 0; }

/* LAYOUT */
.row-top {}
.top { position: relative; max-width: 960px; margin: 0 auto; }
.row-nav { width: 100%; background: #079bc3; z-index: 999; overflow: hidden; }
.nav { max-width: 960px; margin: 0 auto; }
.row-content {  }
.content { max-width: 960px; padding: 1em; background: #FFF; margin: 0 auto; overflow: hidden; clear: both; }
.row-bottom {  }
.bottom { max-width: 960px; padding: 1em; margin: 0 auto; }

/* GRIDS */
.grid-page { display: grid; grid-template-columns: 5fr 2fr; grid-gap: 1em; }
.grid-book { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 1em; padding-bottom: 1.5em; border-bottom: 1px solid #79b2c2; margin-bottom: 1.5em; }
.grid-about { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; }
.grid-events { display: grid; grid-template-columns: 4fr 3fr; grid-gap: 1em; }
.grid-contact { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; }

/* LOGO AND NAV */
.logo img { display: block; }
.top-quote { position: absolute; right: 0; bottom: 1rem; left: 0; text-align: center; }
.menu-toggle { display: none; }
.menu { list-style: none; text-align: center; line-height: 40px; text-transform: lowercase; letter-spacing: 2px; padding: 0 1em; margin: 0; }
.menu li { display: inline-block; }
.menu a { display: block; color: #FFF; padding: 0 0.75rem; }
.menu a:hover { color: #FFFF00; }

/* ASIDES */
.aside { border-left: 1px solid #79b2c2; }
.aside-section { padding: 0 0 0 1rem; }
.aside-heading { font-size: 1.4em; font-weight: normal; color: #04708d; text-transform: uppercase; padding: 0 0 0.5rem 0; border-bottom: 1px solid #04708d; margin: 0 0 1rem 0; }
.aside-subheading { font-weight: bold; font-style: italic;  margin: 0; }
.aside-links { font-style: italic; line-height: 1.25; list-style: none; margin: 0 0 1rem 0; }
.aside-links li { margin: 0 0 0.75em 0; }
.aside-archive-links { font-style: italic; list-style: none; margin: 0 0 1rem 0; }

/* NEWS ENTRIES */
.news { padding-bottom: 1.5em; border-bottom: 1px solid #79b2c2; margin-bottom: 1.5em; }
.news-date { font-size: 0.9em; font-style: italic; }
.news-heading { font-weight: bold; margin: 0 0 0.5rem 0; }
.news-author { font-size: 0.8em; font-style: italic; }

/* SOCIAL ICON LINKS */
.social-list { display: grid; max-width: 245px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 0.5rem; font-size: 16px; list-style: none; padding: 0; text-align: center; margin: 0 0 1rem 0; }
.social-list li { }
.social-list a { opacity: 0.5; }
.social-list a:hover { opacity: 1; }

/* FOOTER */
.bottom p { font-size: 0.8em; color: #FFF; text-align: center; margin: 0 0 0.5rem 0; }
.bottom a { color: #FFF; }
.bottom a:hover { color: yellow; }

/* VARIOUS ENTRY REALTED BITS */
.thing { float: left; width: 40%; margin-right: 1rem; }
.subtitle { font-size: 1.2em; font-style: italic; margin: 0 0 1rem 0; }
.portrait { margin: 0.5rem 0 1rem 0; }
.book-cover img { display: block; margin: 0 0 1rem 0; }
.link-button { max-width: 100%; letter-spacing: 1px; line-height: 1.2; background: #04708d url(/assets/images/bg-button.png) no-repeat top right; margin: 0 0 1rem 0; }
.link-button a { display: block; font-size: 1.4rem; color: #FFF; text-align: center; padding: 0.5rem 1rem; cursor: pointer; }
.link-button button { display: block; width: 100%; font-family: "EB Garamond", Helvetica, Arial, sans-serif; font-size: 1.4rem; color: #FFF; text-align: center; padding: 0.5rem 0; background: transparent; border: 0; }
.link-button:hover { opacity: 0.7; }
.quote { font-style: italic; }
.quote cite { font-style: normal; }
.summary { margin: 0 0 1rem 0; }
.illo { width: 75%; margin: 0 12.5% -1.5em 12.5%; }

/* PAGINATION */
.pagination { list-style: none; text-align: center; margin: 0 0 1.5rem 0; }
.pagination li { display: inline-block; margin: 0 0.25rem; }
.pagination a { padding: 0.5rem 3rem; }

/* MISC */
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 0 0 1em 0; }
.video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.audio iframe { width: 100%; }
.offscreen { display: none; }
.hide-on-mobile { display: block; }
.show-on-mobile { display: none; }

/* STICKY NAV BAR */
.navfix { position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 9999; background: #079bc3; }
.navfix + .row-content { padding-top: 40px; }

/* MEDIA QUERIES */
@media screen and (max-width: 840px) {
.top-quote { position: relative; color: #FFF; padding: 0.5rem; background: #7acce2; bottom: 0; }
#navbar { display: none; }
.menu { text-align: left; }
.menu li { display: block; }
.menu a { padding: 0; }
.menu-toggle { display: block; color: #FFF; text-align: center; padding: 5px 0 0 0; background: #079BC3; }
.menu-toggle a { display: inline-block; width: 40px; }
.menu-bar { display: block; width: 36px; height: 3px; background: #FFF; margin: 3px 0 0 0; }
.navfix { position: relative; top: 0; width: 100%; min-height: 40px; }
.navfix + .row-content { padding-top: 0px; }

.hide-on-mobile { display: none; }
.show-on-mobile { display: block; }

}

@media screen and (max-width: 480px) {
body { font-size: 18px; }
.grid-page { display: grid; grid-template-columns: 1fr; grid-gap: 1em; }
.aside { border-left: 0; }
.aside-section { padding: 0; }
.grid-book { display: grid; grid-template-columns: 1fr; grid-gap: 0; }
.grid-about { display: grid; grid-template-columns: 1fr; grid-gap: 0; }
.grid-events { display: grid; grid-template-columns: 1fr; grid-gap: 0; }
.grid-contact { display: grid; grid-template-columns: 1fr; grid-gap: 0; }



}