/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Reset
2.0 Typography
3.0 Elements
4.0 Forms
5.0 Overall Site Structure
  5.1 Header
6.0 Navigation
  6.1 Links
  6.2 Menus
7.0 Content
  7.1 Posts and pages
8.0 Widgets
11.0 Clearings
14 Media Queries
  14.1 Phone-sized devices
  14.2 Tablets and up
  14.3 Desktops and big things

--------------------------------------------------------------*/

@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic);

/*--------------------------------------------------------------
1.0 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,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

html {
    /* Apply a natural box layout model to the document; see
    http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    box-sizing: border-box;
    /* Corrects text resizing oddly in IE6/7 when body font-size is set
    using em units http://clagnut.com/blog/348/#c790 */
    font-size: 62.5%;
    /* Keeps page centered in all browsers regardless of content height */
    overflow-y: scroll;

    /* Prevents iOS text size adjust after orientation change, without
    disabling user zoom
    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for
    components that leverage other behavior; see
    http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

table {
    /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}


/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #363431;
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.5;
    font-family: 'Crimson Text', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    line-height: 1.6;
}

h1 {
    color: #C64350;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 44px;
    font-size: 4.4rem;
    font-style: italic;
    margin: 1em 0 0.5em;
}

h2 {
    border-bottom: 1px solid #787065;
    color: #787065;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 21px;
    font-size: 2.1rem;
    letter-spacing: 2px;
    margin: 4em 0 2em;
    padding-bottom: 0.5em;
    text-transform: uppercase;
}

h3 {
    color: #a09a92;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 25px;
    font-size: 2.5rem;
    font-style: italic;
    margin: 2em 0 1em;
}

h4 {
    color: #787065;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin: 3em 0 1.5em;
    text-transform: uppercase;
}

h5 {
    color: #a09a92;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 21px;
    font-size: 2.1rem;
    font-style: italic;
    margin: 1.5em 0 0.75em;
}

h6 {
    color: #787065;
    font-family: "Crimson Text", Georgia, serif;
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin: 1.5em 0 0.75em;
    text-transform: uppercase;
}

p {
    margin-bottom: .5em;
    margin-top: .5em;
}

b,
strong {
    font-weight: bold;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    color: #a09a92;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 28px;
    font-size: 2.8rem;
    font-style: italic;
    line-height: 1.4;
    position: relative;
    z-index: 10000;
}

blockquote::before {
    color: #ebe7e1;
    content: "\201C";
    display: block;
    font-size: 208px;
    font-size: 20.8rem;
    font-style: normal;
    left: -35px;
    line-height: 1;
    position: absolute;
    top: -40px;
    z-index: -1;
}

blockquote cite {
    color: #787065;
    float: right;
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal;
    letter-spacing: 1px;
    margin-top: 1em;
    text-transform: uppercase;
}

blockquote cite::before {
    content: "\2013";
    display: inline;
}

blockquote.alignleft,
blockquote.alignright {
    background: #fff;
    border-bottom: 1px solid #ebe7e1;
    border-top: 2px solid #a09a92;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.025);
    font-size: 27px;
    font-size: 2.7rem;
    max-width: 75%;
    padding: 0.5em;
}

blockquote.alignleft p:last-of-type,
blockquote.alignright p:last-of-type {
    margin-bottom: 0;
}

blockquote.alignleft::before,
blockquote.alignright::before {
    display: none;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #d9d6d0;
    font-family: "Droid Sans Mono", "Andale Mono", Consolas, "DejaVu Sans Mono", monospace;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    padding: 1.6em;
    white-space: pre;
    white-space: pre-wrap;
}

code,
kbd,
tt,
var {
    font-family: "Droid Sans Mono", "Andale Mono", Consolas, "DejaVu Sans Mono", monospace;
    font-size: 16px;
    font-size: 1.6rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #a09a92;
    cursor: help;
}

mark,
ins {
    background: #faf9f5;
    text-decoration: none;
}

sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: 0.5ex;
}

small {
    font-size: 75%;
}

big {
    font-size: 125%;
}

strong em,
em strong,
b i,
i b,
b em,
em b,
strong i,
i strong,
.wp-caption strong {
    background: rgba(234, 233, 230, 0.5);
    color: #787065;
    font-size: 0.8em;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 2px 0;
    text-transform: uppercase;
}

em code,
strong code,
i code,
b code {
    font-style: normal;
    font-weight: normal;
}

::selection {
    background: #eae9e6;
    color: #787065;
}

::-moz-selection {
    background: #eae9e6;
    color: #787065;
}


/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
hr {
    background-color: #d9d6d0;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0 0 1.5em;
}

ul {
    list-style: disc outside;
}

ul ul {
    list-style: circle outside;
}

ol {
    list-style: decimal outside;
}

ol ol {
    list-style: lower-alpha outside;
}

li {
    line-height: 1.6;
    margin: 0.5em 0;
}

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

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

a img {
    max-width: 100%;
}

article .figure,
a img {
    /* Make sure images are scaled correctly. */
    height: auto;
    /* Adhere to container width. */
    display: table;
    margin: 1em auto;
    border: 12px;
    border-image: url(images/border.png) 54 51 55 52 repeat;
    border-style: solid;
}

article .figure a img,
.site-footer a img {
    border: 0;
    margin: 0;
}



table {
    font-size: 0.85em;
    line-height: 1.4;
    margin: 0.5em 0 1.5em;
    width: 100%;
}

tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.2);
}

th,
td {
    border-bottom: 1px solid #d9d6d0;
    padding: 0.8em 1em;
}

th {
    font-style: italic;
}

thead:nth-of-type(odd) tr {
    background: none;
}

thead th {
    border-width: 2px;
    color: #a09a92;
    font-style: normal;
    font-weight: bold;
    padding: 0.4em 1em;
}

tr:hover {
    background: rgba(0, 0, 0, 0.1);
}


/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
button,
input,
select,
textarea {
    /* Corrects font size not being inherited in all browsers */
    font-size: 100%;
    /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
    margin: 0;
    /* Improves appearance and consistency in all browsers */
    vertical-align: baseline;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    /* Improves usability and consistency of cursor style between image-type
    'input' and others */
    cursor: pointer;

    /* Corrects inability to style clickable 'input' types in iOS */
    -webkit-appearance: button;
}

input[type="checkbox"],
input[type="radio"] {
    /* Addresses box sizing set to content-box in IE8/9 */
    box-sizing: border-box;
    /* Addresses excess padding in IE8/9 */
    padding: 0;
}

input[type="search"]::-webkit-search-decoration {
    /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    /* Corrects inner padding and border displayed oddly in FF3/4
    www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border: 0;
    padding: 0;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea {
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    background: rgba(255, 255, 255, 0.75);
    border: 0;
    border-bottom: 2px solid #a09a92;
    color: #a09a92;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.6;
    padding: 1.2rem 1.4rem;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus {
    background: #fff;
    border: 1px solid #d9d6d0;
    box-shadow: 0 0 5px rgba(255, 255, 255, 1);
    color: #363431;
    outline: none;
}

textarea {
    /* Removes default vertical scrollbar in IE6/7/8/9 */
    overflow: auto;
    /* Improves readability and alignment in all browsers */
    vertical-align: top;
    width: 100%;
}

/* Vendor prefixes for placeholder text */
::-webkit-input-placeholder {
    color: #d9d6d0;
}

::-moz-placeholder {
    color: #d9d6d0;
}

:-ms-input-placeholder {
    color: #d9d6d0;
}

/* Submit buttons */
.form-submit,
.contact-submit,
form p {
    margin: 1em 0;
    text-align: center;
}

input[type="submit"],
button {
    background: #a09a92;
    border: 1px solid #eae9e6;
    color: #eae9e6;
    font-size: 12px;
    font-size: 1.2rem;
    letter-spacing: 1px;
    outline: 4px solid #a09a92;
    padding: 0.7rem 1.4rem;
    position: relative;
    text-transform: uppercase;
}

input[type="submit"]:hover,
button:hover {
    background: #a09a92;
    color: #faf9f5;
    outline: 2px solid #a09a92;
}

input[type="submit"]:active,
button:active {
    background: #363431;
    outline: 5px solid #363431;
}

/* Labels */
label {
    color: #a09a92;
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    text-align: left;
}

label span {
    font-size: 0.9em;
    padding-left: 2px;
}

/* Selected text */
input::selection {
    background: #eae9e6;
}

input::-moz-selection {
    background: #eae9e6;
}


/*--------------------------------------------------------------
5.0 Overall Site Structure
--------------------------------------------------------------*/
body {
    background: #FDF6E3;
    color: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    text-shadow:0px 0px 1px #BFBFBF;
    padding-top:10px;
}

.site-content {
    margin: 4rem auto;
    max-width: 680px;
    padding: 0;
    width: auto;
}

.widget {
    margin: 4rem auto;
    max-width: 680px;
    padding: 0;
    width: auto;
}


/*--------------------------------------------------------------
  5.1 Header
--------------------------------------------------------------*/
.nav-bar {
    border-bottom: 1px solid #d9d6d0;
    position: relative;
    width: 100%;
}

.nav-bar:after {
    clear: both;
    content: "";
    display: block;
}

h1.site-branding {
    font-size: 36px;
    font-size: 3.6rem;
    font-style: italic;
    line-height: 1;
    margin: 0;
}

/* Style page title blocks */
.title-block {
    text-align: center;
}

.title-block h1 {
    font-style: normal;
    line-height: 1.2;
    margin: 0;
}

/* If header image is not present */
body:not(.libretto-has-header-image) .title-block {
    margin: 2rem auto;
    max-width: 680px;
}


/*--------------------------------------------------------------
  5.2 Footer
---------------------------------------------------------------*/

.site-footer .site-info {
    color: #a09a92;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6;
}

.site-footer a {
    color: #787065;
}

.site-footer .site-info p {
    margin-bottom: 0;
}

.social ul {
    list-style-type: none;
    margin-bottom: 0;
}

.social li {
    display: inline;
}

.social a:before {
    background: #d9d6d0;
    border-radius: 2px;
    color: #faf9f5;
    content: "y";
    display: inline-block;
    font-family: libretto-icons;
    font-size: 22px;
    height: 30px;
    line-height: 26px;
    padding: 2px;
    text-align: center;
    text-shadow: none;
    transition: background-color 0.75s ease;
    width: 30px;
}

.social a:hover:before {
    background-color: #787065;
}

/* Icons */
.social a[href*="dribbble.com"]:before {
  content: "D";
}

.social a[href*="facebook.com"]:before {
  content: "F";
}

.social a[href*="flickr.com"]:before {
  content: "K";
}

.social a[href*="google.com"]:before {
  content: "G";
}

.social a[href*="instagram.com"]:before {
  content: "I";
}

.social a[href*="linkedin.com"]:before {
  content: "L";
}

.social a[href*="pinterest.com"]:before {
  content: "N";
}

.social a[href*="getpocket.com"]:before {
  content: "O";
}

.social a[href*="reddit.com"]:before {
  content: "E";
}

.social a[href*="stumbleupon.com"]:before {
  content: "S";
}

.social a[href*="tumblr.com"]:before {
  content: "U";
}

.social a[href*="twitter.com"]:before {
  content: "T";
}

.social a[href*="vimeo.com"]:before {
  content: "V";
}

.social a[href*="youtube.com"]:before {
  content: "Y";
}

/* Colours */
.social a[href*="dribbble.com"]:hover:before {
  background: #ea4c89;
}

.social a[href*="facebook.com"]:hover:before {
  background: #3b5998;
}

.social a[href*="flickr.com"]:hover:before {
  background: #ff0084;
}

.social a[href*="google.com"]:hover:before {
  background: #dd4b39;
}

.social a[href*="instagram.com"]:hover:before {
  background: #517fa4;
}

.social a[href*="linkedin.com"]:hover:before {
  background: #007bb6;
}

.social a[href*="pinterest.com"]:hover:before {
  background: #cb2027;
}

.social a[href*="getpocket.com"]:hover:before {
  background: #ef4056;
}

.social a[href*="reddit.com"]:hover:before {
  background: #ff5700;
}

.social a[href*="stumbleupon.com"]:hover:before {
  background: #eb4924;
}

.social a[href*="tumblr.com"]:hover:before {
  background: #2c4762;
}

.social a[href*="twitter.com"]:hover:before {
  background: #00aced;
}

.social a[href*="vimeo.com"]:hover:before {
  background: #aad450;
}

.social a[href*="youtube.com"]:hover:before {
  background: #b00;
}

/*--------------------------------------------------------------
6.0 Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  6.1 Links
--------------------------------------------------------------*/
a {
    color: #932817;
    text-decoration: none;
}

a:visited {
    color: #943526;
}

a:hover,
a:focus,
a:active {
    color: #712012;
}


/*--------------------------------------------------------------
  6.2 Menus
--------------------------------------------------------------*/
/* Main site navigation (most code is within media queries) */
.site-navigation {
    border-top: none;
}

.site-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0 5px 0 0;
}

.site-navigation .menu li {
    margin: 0;
}

.site-navigation a {
    display: block;
    padding: 1.5rem 1.5rem;
    text-decoration: none;
}

/* In-page or in-post navigation */
.navigation-post {
    line-height: 1.6;
}

.navigation-post .previous {
    text-align: left;
}

.navigation-post .next {
    text-align: right;
}

.navigation-post .previous a,
.navigation-post .next a {
    color: #a09a92;
    display: block;
    font-style: italic;
    position: relative;
}

.previous .meta-nav,
.next .meta-nav {
    color: #787065;
    display: block;
    font-family: Montserrat;
    font-size: 12px;
    font-size: 1.2rem;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.previous .meta-nav a,
.next .meta-nav a {
    color: #787065;
    display: inline;
    font-style: normal;
}

.previous .meta-nav a:before,
.next .meta-nav a:after,
.previous a .meta-nav:before,
.next a .meta-nav:after {
    border: solid transparent 4px;
    content: "";
    display: inline-block;
    height: 0;
    margin: 0 0.5rem;
    top: 0.8em;
    width: 0;
}

.previous .meta-nav a:before,
.previous a .meta-nav:before {
    border-left: 0;
    border-right-color: #a09a92;
}

.next .meta-nav a:after,
.next a .meta-nav:after {
    border-left-color: #a09a92;
    border-right: 0;
}

.tag-head {
    color: #787065;
    display: block;
    font-family: Montserrat;
    font-size: 16px;
    font-size: 1.6rem;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.tag-head:before {
    content: "\E027\ ";
    display: inline-block;
    font-family: libretto-icons;
    font-size: 20px;
    font-size: 2.0rem;
    margin: 0 0.25rem;
    text-shadow: none;
    text-transform: none;
    vertical-align: -4px;
}

.tag-list {
    margin-bottom: -20px;
}

.tag-list a {
    display: inline-block;
    background: #faf9f5;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    font-size: 14px;
    color: #787065;
    margin: 0.5rem 0.25rem;
}


/*--------------------------------------------------------------
7.0 Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  7.1 Posts and pages
--------------------------------------------------------------*/

/* Post format icons, need title-block to work */
.post-format-icon-pin:before {
    content: "p";
}

.post-format-icon-star:before {
    content: "y";
}

.post-format-icon-lock:before {
    content: "w";
}

.post-format-icon-search:before {
    content: "o";
}

.title-block:before {
    background: #faf9f5;
    border: 1px solid #d9d6d0;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #faf9f5;
    color: #a09a92;
    display: inline-block;
    font-family: libretto-icons;
    font-size: 21px;
    line-height: 21px;
    margin: 1rem auto 2rem;
    padding: 10px;
    text-shadow: none;
}

.title-block {
    border-bottom: 1px solid #d9d6d0;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    text-align: center;
    word-wrap: break-word;
}

.entry-meta {
    color: #a09a92;
    font-style: italic;
    line-height: 1.4;
}

.entry-meta a {
    color: #787065;
}

.title-block .entry-meta:before,
.title-block .entry-meta:after {
    color: #d9d6d0;
    content: "~";
    display: inline-block;
    font-family: libretto-icons;
    font-size: 24px;
    margin: 0 0.25rem;
    text-shadow: none;
    vertical-align: -6px;
}

.title-block .entry-meta:after {
    content: "`";
    margin-left: -4px;
}

/* Drop cap and first line */
.full-text p.first-paragraph::first-letter {
    color: #903;
    display: inline-block;
    float: left;
    font-family: "Crimson Text";
    font-size: 100px;
    font-style: normal;
    line-height: 75px;
    margin: 6px 10px 0 -5px;
}

.full-text p.first-paragraph:first-line {
    color: #903;
    font-family: "Playfair Display SC";
    font-size: 1em;
    font-style: normal !important; /* Cheat to preserve visual sanity */
    font-weight: bold;
    letter-spacing: 1px;
}

.ildflue-long-form {
    background: #FDF6E3;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
}

/* "Read more" link */
.teaser-more,
.teaser-more>a {
    color: #a09a92;
    display: inline-block;
    font-family: "Playfair Display";
    font-size: 12px;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    text-transform: lowercase;
    width: 100%;
}

.teaser-more>a:before,
.teaser-more>a:after {
    display: inline;
    font-size: 1.5em;
    font-style: normal;
    padding: 0 10px;
    vertical-align: -0.15em;
}

.teaser-more>a:before {
    content: "{";
}

.teaser-more>a:after {
    content: "}";
}

.teaser-more>a:hover {
    color: #712012;
}

/* Different color for index titles */
article .title-block h1 a {
    color: #C64350;
}

p.caption {
    font-size: 1.8rem;
    padding: 0 1rem;
    margin-bottom: .5em;
    display: table-caption;
    caption-side: bottom;
    color: #b24e5c;
}
/*--------------------------------------------------------------
8.0 Widgets
--------------------------------------------------------------*/

.footer-sidebar {
    background: #FDF6E3;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    margin: 2rem 0 2rem 0;
    width: 100%;
}

.footer-sidebar .widget-block {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0rem 3rem;
}

.widget-title {
    border-bottom: 1px solid #d9d6d0;
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    text-align: center;
}

.widget-text {
    color: #a09a92;
    font-size: 1.1em;
    font-style: italic;
    text-align: center;
}


/*--------------------------------------------------------------
11.0 Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
}

.clear:after,
.entry-content:after,
.site-content:after,
.site-footer:after {
    clear: both;
}


/*--------------------------------------------------------------
14 Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  14.1 Phone-sized devices
--------------------------------------------------------------*/
@media only screen and (max-width: 640px) {

    /* Tweak font sizes and margins */
    body {
        font-size: 16px;
        font-size: 1.6rem;
    }

    blockquote {
        font-size: 24px;
        font-size: 2.4rem;
    }

    ul,
    ol {
        margin-left: 1em;
    }

    .site-content {
        font-size: 16px;
        font-size: 1.6rem;
        margin: 0;
        max-width: none;
        min-width: 320px;
        padding: 0 10px;
    }

    .site-branding {
        display: none;
    }

    /* Use a condensed mobile menu */
    .site-navigation {
        background: #26231e;
        width: 100%;
    }

    .site-navigation a {
        color: #cacabc;
    }

    .menu-toggle {
        background: #363431;
        border-bottom: 2px solid #787065;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
        color: #eae9e6;
        cursor: pointer;
        display: block;
        font-size: 21px;
        font-size: 2.1rem;
        line-height: 1.4;
        margin: 0;
        min-height: 5rem;
        padding: 1.5rem 1.5rem;
        position: relative;
        z-index: 50;
    }

    /* Style menu items a bit differently */
    .site-navigation .menu li {
        border-top: 1px solid #787065;
        display: block;
        text-align: left;
    }

    .title-block:before {
        display: none;
    }

    .title-block {
        margin-bottom: 2rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .entry-meta {
        font-size: 14px;
        font-size: 1.4rem;
    }

    .title-block h1 {
        font-size: 28px;
        font-size: 2.8rem;
    }

    /* Long-form posts should be full-width, plus padding */
    .ildflue-long-form {
        margin-left: -10px;
        padding: 10px;
        width: calc(100% + 20px);
    }

    /* Footer is arranged in a stack */
    .site-footer .site-info,
    .social {
        padding: 0.75rem 0.5rem;
        text-align: center;
        width: 100%;
    }

    /* In-page navigation should be pretty simple */
    .navigation-post .previous,
    .navigation-post .next {
        padding: 1rem 0;
        text-align: center;
        width: 100%;
    }

    .navigation-post .previous {
        border-bottom: 1px solid #d9d6d0;
    }

    .navigation-post .previous,
    .navigation-post .next {
        text-align: center;
    }

    .tag-head {
        text-align: center;
        font-size: 14px;
        font-size: 1.4rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .tag-head:before {
        font-size: 18px;
        font-size: 1.8rem;
        vertical-align: -3px;
    }

    .tag-list {
        text-align: center;
        border-bottom: 1px solid #d9d6d0;
        padding-bottom: 10px;
        margin-bottom: 0px;
    }

}


/*--------------------------------------------------------------
  14.2 Tablets and up
--------------------------------------------------------------*/
@media only screen and (min-width: 641px) {

    .site-branding {
        display: block;
    }

    /* Main menu is styled differently from mobile */
    .menu-toggle {
        display: none;
    }

    .site-navigation {
        display: block;
        text-align: center;
        font-size: 16px;
        font-size: 1.6rem;
        position: relative;
    }

    .site-navigation .menu > li {
        display: inline-block;
        line-height: 1;
        margin: 0.25rem 0;
        position: relative;
    }

    .site-navigation li a {
        border-bottom: 2px solid transparent;
        color: #787065;
        padding: 1rem 1rem 0.8rem;
    }

    .title-block {
        margin: 10rem auto 1.5rem;
        display: block;
    }

    .ildflue-long-form {
        margin-left: -1.5em;
        margin-right: -1.5em;
        max-width: calc(100% + 3em);
        padding: 1.5em;
    }

    /* Use a bigger drop cap */
    /* .format-standard .entry-content div:first-child > p:not(.no-emphasis):first-of-type:first-letter { */
    /*     font-size: 121px; */
    /*     line-height: 70px; */
    /*     margin: 6px 10px 0 -5px; */
    /* } */

    /* Footer can stretch out a bit */
    .site-footer {
        padding: 0 2rem 1rem;
        width: 100%;
    }

    .site-footer .site-info {
        float: left;
    }

    .social {
        float: right;
        line-height: 1;
    }

    /* In-page navigation can be arranged in floats and take up a bit more space */
    .navigation-post {
        border-top: 1px solid #d9d6d0;
    }

    .navigation-post .previous,
    .navigation-post .next {
        float: left;
        margin: 2rem 0;
        width: 50%;
    }

    .navigation-post .next {
        border-left: 1px solid #d9d6d0;
        min-height: 4.8rem;
    }
}


/*--------------------------------------------------------------
  14.3 Desktops and big things
--------------------------------------------------------------*/
@media only screen and (min-width: 860px) {

    .site-branding {
        margin-left: 4rem;
    }

    .ildflue-long-form {
        margin-left: -3em;
        margin-right: -3em;
        max-width: calc(100% + 6em);
        padding: 1em 1em 1em;
    }

    /* Footer can be spaced out more, too */
    .site-footer {
        padding-left: 4rem;
        padding-right: 4rem;
    }

}


/** Custom */
.drop {
    float: left;
    color: #903;
    font-size: 124px;
    line-height: 64px;
    padding-right: 8px;
    padding-left: 3px;
}