/*!
Theme Name: Narratively
Theme URI: http://underscores.me/
Author: Team Narratively
Author URI: http://narrative.ly
Description: Custom WP Theme for Narratively
Version: 1.0.0
Text Domain: narratively
Tags:

Based on Underscores http://underscores.me/
Underscores is distributed under the terms of the GNU GPL v2 or later.

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

--------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Lora:400,700,700italic,400italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
a, 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-size: 100%;
  font: inherit;
  vertical-align: baseline;
  background: transparent;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  position: relative; }

html {
  font-size: 100%;
  line-height: 1; }

body {
  line-height: 1; }

ul {
  list-style: none; }

ol {
  list-style: decimal; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title], acronym[title] {
  border-bottom: 1px dotted;
  cursor: help; }

input, select {
  vertical-align: middle; }

i, em {
  font-style: oblique; }
  i i, i em, em i, em em {
    font-style: normal; }

b, strong {
  font-weight: bold; }

a:focus {
  outline: 1px dotted; }

.branding-vera span, header#masthead h1.site-title, .homepage-intro, .homepage-intro .intro-text h1 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  animation: fadein 1s; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
html {
  font-size: 20px; }

body {
  font-family: "Lora", "Times New Roman", serif;
  background: #f6f6f6;
  color: #444;
  font-size: 1rem;
  padding-top: 0; }

.optional {
  display: none; }
  @media screen and (min-width: 50em) {
    .optional {
      display: auto; } }

h1, h2 {
  font-family: "Montserrat", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
  text-transform: uppercase;
  text-rendering: optimizeLegibility; }

a {
  text-decoration: none;
  color: #444; }

.byline {
  font-style: italic; }

.branding-vera {
  color: white;
  text-align: center;
  background-color: transparent;
  display: block;
  width: 114px;
  height: 44px;
  font-size: 6px;
  line-height: 1;
  font-weight: normal;
  font-family: "Montserrat","Helvetica Neue", "Arial", "Helvetica", sans-serif;
  text-transform: uppercase;
  z-index: 2;
  letter-spacing: 0.2em; }
  .branding-vera span {
    margin-top: 2px;
    display: block;
    height: 35px;
    width: 114px;
    color: transparent;
    background-image: url("Vera-logo-white-hi-res.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; }

body.admin-bar header#masthead {
  top: 32px; }

header#masthead {
  width: 100%;
  padding: 2.5rem  0.5rem 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  height: auto;
  color: white;
  z-index: 3;
  font-size: 0.8em;
  line-height: 1; }
  header#masthead a {
    color: white; }
  header#masthead h1.site-title {
    display: block;
    z-index: 2;
    background-image: url("Human-Toll-logo-1-line.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
    max-width: 100%;
    height: 2rem;
    margin: 0 auto; }
  header#masthead h2 {
    display: block;
    position: relative;
    font-family: "Lora", "Times New Roman", serif;
    text-transform: none;
    font-weight: normal;
    font-style: italic;
    letter-spacing: .05em;
    color: #f5f5f5;
    top: 0.25em;
    line-height: 1.2;
    font-size: 0.8em; }
  header#masthead nav {
    margin: 0.6rem auto 0;
    display: block;
    font-size: 0; }
    header#masthead nav a {
      vertical-align: bottom;
      display: inline-block;
      font-size: 0.7rem;
      font-family: "Montserrat", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
      text-transform: uppercase;
      color: #f5f5f5;
      padding: 0.25em 0.4em;
      margin: 0 0.25em;
      line-height: 1;
      background-color: rgba(255, 255, 255, 0.7);
      color: rgba(0, 0, 0, 0.65); }
      header#masthead nav a:first-child {
        margin-left: 0; }
      header#masthead nav a:last-child {
        margin-right: 0;
        border: 0; }
      header#masthead nav a:hover {
        background-color: rgba(255, 255, 255, 0.8); }
  header#masthead .branding-vera {
    zoom: 70%;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem; }
  @media screen and (min-width: 50em) {
    header#masthead {
      height: 3.75rem;
      padding: 0.5rem 0.75rem;
      text-align: left; }
      header#masthead h1.site-title {
        display: block;
        z-index: 2;
        background-image: url("Human-Toll-logo-2-line.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color: transparent;
        max-width: 7.5rem;
        height: 2.8rem;
        margin-right: 1rem;
        display: block;
        float: left; }
      header#masthead h2 {
        font-size: 1em; }
      header#masthead .branding-vera {
        zoom: 100%; }
      header#masthead nav {
        margin: 0.6rem inherit 0; }
        header#masthead nav a {
          font-size: 0.7rem;
          padding: 0.35em 1em;
          margin-right: 0.5em; } }

footer#site-footer {
  background: #999;
  margin-top: 1rem;
  font-size: 0.75em;
  clear: both;
  line-height: 1.3;
  color: #f5f5f5; }
  @media screen and (min-width: 37.5em) {
    footer#site-footer {
      margin-top: 3rem; } }
  footer#site-footer a {
    color: #f5f5f5;
    text-decoration: none; }
  footer#site-footer h2 {
    margin-bottom: 0.15rem;
    font-size: 0.9em; }
    @media screen and (min-width: 37.5em) {
      footer#site-footer h2 {
        font-size: 1em; } }
    footer#site-footer h2.vera {
      display: block;
      position: relative;
      font-family: "Lora", "Times New Roman", serif;
      text-transform: none;
      font-weight: normal;
      font-style: italic;
      color: #f5f5f5;
      margin: 0 0 1.75rem;
      max-width: 100%; }
      footer#site-footer h2.vera a {
        color: #f5f5f5; }
  footer#site-footer .credits {
    padding: 1rem 0.5rem 0; }
    @media screen and (min-width: 37.5em) {
      footer#site-footer .credits {
        padding: 2rem 2rem 0; } }
  footer#site-footer .narratively, footer#site-footer .supported-by, footer#site-footer nav {
    margin: 0 0 1.75rem;
    max-width: 100%; }
  footer#site-footer nav {
    background-color: #4D4D4D;
    padding: 1rem;
    font-family: "Montserrat", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
    text-transform: none;
    line-height: 1.5;
    margin-bottom: 0; }
    footer#site-footer nav a {
      margin-right: 2rem; }
    @media screen and (min-width: 37.5em) {
      footer#site-footer nav {
        padding: 2rem; } }
  footer#site-footer .narratively {
    display: inline-block;
    margin-right: 5rem; }
  footer#site-footer .supported-by {
    display: inline-block; }
  footer#site-footer .supporters {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0; }
    footer#site-footer .supporters h2 {
      align-self: flex-start; }
  footer#site-footer a[class^="branding-"], footer#site-footer span[class^="branding-"] {
    display: inline-block;
    margin: 0 1rem 0.75rem 0; }
    footer#site-footer a[class^="branding-"] > span, footer#site-footer span[class^="branding-"] > span {
      display: block;
      padding: 0;
      color: transparent;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      background-color: transparent;
      width: 200px;
      height: 100px; }
    footer#site-footer a[class^="branding-"]:last-child, footer#site-footer span[class^="branding-"]:last-child {
      margin-bottom: 0;
      margin-right: 0; }
    footer#site-footer a[class^="branding-"].branding-narratively span, footer#site-footer span[class^="branding-"].branding-narratively span {
      background-image: url("Narratively-logo-white-red-trans.svg");
      width: 266px;
      height: 73px; }
    footer#site-footer a[class^="branding-"].branding-sjc span, footer#site-footer span[class^="branding-"].branding-sjc span {
      background-image: url("SJC_WebLogo.svg");
      width: 184px;
      height: 73px;
      background-color: white; }
    footer#site-footer a[class^="branding-"].branding-wilson span, footer#site-footer span[class^="branding-"].branding-wilson span {
      background-image: url("WilsonTrust_logo_BlueWithBorder.svg");
      width: 295px;
      height: 73px;
      background-color: white; }

.homepage-intro {
  width: 100%;
  padding: 0;
  background-color: #d4d4d4;
  background-image: url("Human-Toll-Cover-Image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  margin: 0; }
  .homepage-intro .branding-vera {
    zoom: 150%;
    position: absolute;
    top: 0.5rem;
    right: calc(50% - 57px); }
    @media screen and (min-width: 37.5em) {
      .homepage-intro .branding-vera {
        right: 1rem; } }
  .homepage-intro .social-tools {
    position: absolute;
    top: 5rem;
    right: calc(50% - 97px); }
    .homepage-intro .social-tools .fb-share-button, .homepage-intro .social-tools .twitter-share-button {
      margin: 0 0.5rem; }
    @media screen and (min-width: 37.5em) {
      .homepage-intro .social-tools {
        top: 1.5rem;
        left: 1rem; } }
  .homepage-intro .intro-text {
    color: white;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 5em 0.5em 2em;
    width: 100%;
    height: 100%;
    text-shadow: 0 0 2em rgba(0, 0, 0, 0.4); }
    .homepage-intro .intro-text h1 {
      max-width: 100%;
      font-size: 1.75em;
      margin: 1.5rem auto 1rem;
      text-align: center;
      line-height: 1;
      background-image: url("Human-Toll-logo-2-line.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      color: transparent;
      text-shadow: none;
      max-width: 23rem;
      height: 9rem; }
      @media screen and (min-width: 37.5em) {
        .homepage-intro .intro-text h1 {
          margin: 1.5rem auto 2rem; } }
      @media screen and (min-width: 48em) {
        .homepage-intro .intro-text h1 {
          background-image: url("Human-Toll-logo-1-line.png");
          max-width: 46rem;
          height: 5rem; } }
    .homepage-intro .intro-text p {
      text-align: justify;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      font-size: 0.9em;
      line-height: 1.4;
      margin: 0 auto 1em;
      max-width: 40em;
      margin: 0 0.5em 1em; }
      @media screen and (min-width: 37.5em) {
        .homepage-intro .intro-text p {
          margin: 0 2em 1em;
          font-size: 1em;
          line-height: 1.6; } }
      @media screen and (min-width: 56.25em) {
        .homepage-intro .intro-text p {
          font-size: 0.9em; } }
      @media screen and (min-width: 64em) {
        .homepage-intro .intro-text p {
          font-size: 1em; } }
    .homepage-intro .intro-text p:nth-of-type(1):first-letter {
      float: left;
      font-size: 4.85em;
      line-height: 0.8em;
      padding: 0.06em 0.07em 0 0.04em; }
    @media screen and (min-width: 56.25em) {
      .homepage-intro .intro-text .bespoke {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; }
        .homepage-intro .intro-text .bespoke p:nth-of-type(1) {
          width: 32%;
          margin: 0 0 1em 0; } }
    @media screen and (min-width: 56.25em) and (min-width: 37.5em) {
      .homepage-intro .intro-text .bespoke p:nth-of-type(1) {
        margin: 0 0 1em 2em; } }
    @media screen and (min-width: 56.25em) {
        .homepage-intro .intro-text .bespoke p:nth-of-type(2) {
          width: 32%;
          margin: 0 0 1em 0; } }
    @media screen and (min-width: 56.25em) and (min-width: 37.5em) {
      .homepage-intro .intro-text .bespoke p:nth-of-type(2) {
        margin: 0 2em 1em 0; } }

body.home {
  padding-top: 0; }
  body.home .stories {
    padding: 1rem 0.5rem; }
  body.home .each-story {
    max-width: 56em;
    background: white;
    padding: 0.75em;
    text-align: center;
    border: 1px solid #d4d4d4;
    line-height: 1.3em;
    overflow: hidden;
    margin: 1em auto;
    display: block; }
    body.home .each-story:hover {
      cursor: pointer; }
    @media screen and (min-width: 48em) {
      body.home .each-story {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        align-content: flex-start; } }
    body.home .each-story img {
      width: 100%;
      height: auto; }
      @media screen and (min-width: 48em) {
        body.home .each-story img {
          width: 66%; } }
    body.home .each-story .text {
      padding: 0.5em 0 0;
      width: 100%; }
      @media screen and (min-width: 48em) {
        body.home .each-story .text {
          width: 33%; } }
      @media screen and (min-width: 37.5em) {
        body.home .each-story .text {
          padding: 1em; } }
    body.home .each-story h1 {
      display: block;
      font-size: 0.9em;
      margin: 0;
      width: 100%;
      line-height: 1.4; }
      @media screen and (min-width: 37.5em) {
        body.home .each-story h1 {
          font-size: 1em;
          margin: 0 0 1em;
          line-height: 1.6; } }
    body.home .each-story .byline {
      display: block;
      margin: 0.5em 0;
      font-size: 0.75em;
      width: 100%;
      line-height: 1.4; }
      @media screen and (min-width: 37.5em) {
        body.home .each-story .byline {
          line-height: 1.6;
          margin: 1em 0; } }
    body.home .each-story .dek {
      display: block;
      margin: 0.5em 0 0;
      font-size: 0.75em;
      width: 100%;
      line-height: 1.4;
      text-align: left; }
      @media screen and (min-width: 37.5em) {
        body.home .each-story .dek {
          margin: 1em 0 0;
          text-align: center;
          line-height: 1.6; } }

body.single #main, body.page #main {
  text-align: center; }
body.single article > header, body.page article > header {
  margin: 2rem auto 1em auto; }
  body.single article > header h1, body.page article > header h1 {
    font-size: 1.2em;
    max-width: 30em;
    line-height: 1.3;
    margin: 0 auto;
    padding: 0 0.25em; }
    @media screen and (min-width: 37.5em) {
      body.single article > header h1, body.page article > header h1 {
        font-size: 1.5em; } }
  body.single article > header .byline, body.page article > header .byline {
    margin: 0.5em auto;
    font-size: 0.9em;
    max-width: 44em;
    line-height: 1.3;
    padding: 0 0.25em; }
    @media screen and (min-width: 37.5em) {
      body.single article > header .byline, body.page article > header .byline {
        margin: 1em auto;
        font-size: 1em; } }
  body.single article > header .dek, body.page article > header .dek {
    margin: 1em auto 1.5em;
    max-width: 44em;
    line-height: 1.4;
    padding: 0 0.25em;
    font-size: 0.8em; }
    @media screen and (min-width: 37.5em) {
      body.single article > header .dek, body.page article > header .dek {
        font-size: 1em; } }
  body.single article > header .social-tools .fb-share-button, body.page article > header .social-tools .fb-share-button {
    margin: 0 0.25rem; }
  body.single article > header .social-tools .twitter-share-button, body.page article > header .social-tools .twitter-share-button {
    margin: 0 0.25rem; }
  body.single article > header .social-tools .email-share-button, body.page article > header .social-tools .email-share-button {
    margin: 0 0.25rem; }
body.single article .wp-post-image, body.page article .wp-post-image {
  width: 100%;
  height: auto; }
body.single article .body-text, body.page article .body-text {
  margin: 3em auto 2em;
  font-size: 0.9em;
  line-height: 1.6;
  text-align: left;
  padding: 0 0.5em; }
  body.single article .body-text .alignright, body.page article .body-text .alignright {
    display: block;
    margin: 0.5em auto 0.5em;
    max-width: 100%;
    height: auto;
    float: none;
    clear: both; }
    @media screen and (min-width: 37.5em) {
      body.single article .body-text .alignright, body.page article .body-text .alignright {
        margin: 0.5em 0 0.5em 1em;
        max-width: 65%;
        float: right;
        clear: none; } }
    @media screen and (min-width: 50em) {
      body.single article .body-text .alignright, body.page article .body-text .alignright {
        margin: 0.5em 1em 1em 1em; } }
    @media screen and (min-width: 56.25em) {
      body.single article .body-text .alignright, body.page article .body-text .alignright {
        max-width: 640px; } }
  body.single article .body-text .alignleft, body.page article .body-text .alignleft {
    display: block;
    float: none;
    clear: both;
    margin: 0.5em auto 0.5em;
    max-width: 100%;
    height: auto; }
    @media screen and (min-width: 37.5em) {
      body.single article .body-text .alignleft, body.page article .body-text .alignleft {
        margin: 0.5em 1em 0.5em 0;
        max-width: 65%;
        float: left;
        clear: none; } }
    @media screen and (min-width: 50em) {
      body.single article .body-text .alignleft, body.page article .body-text .alignleft {
        margin: 0.5em 1em 1em 1em; } }
    @media screen and (min-width: 56.25em) {
      body.single article .body-text .alignleft, body.page article .body-text .alignleft {
        max-width: 640px; } }
  body.single article .body-text .aligncenter, body.page article .body-text .aligncenter {
    display: block;
    float: none;
    clear: both;
    margin: 0.5em auto 1em;
    max-width: 100%;
    height: auto; }
  body.single article .body-text p, body.single article .body-text ul, body.single article .body-text ol, body.single article .body-text blockquote, body.single article .body-text h2, body.page article .body-text p, body.page article .body-text ul, body.page article .body-text ol, body.page article .body-text blockquote, body.page article .body-text h2 {
    margin: 0 auto 1em;
    display: block;
    width: 100%;
    max-width: 800px; }
    body.single article .body-text p .alignright, body.single article .body-text ul .alignright, body.single article .body-text ol .alignright, body.single article .body-text blockquote .alignright, body.single article .body-text h2 .alignright, body.page article .body-text p .alignright, body.page article .body-text ul .alignright, body.page article .body-text ol .alignright, body.page article .body-text blockquote .alignright, body.page article .body-text h2 .alignright {
      margin-top: .25em;
      margin-right: auto; }
    body.single article .body-text p .alignleft, body.single article .body-text ul .alignleft, body.single article .body-text ol .alignleft, body.single article .body-text blockquote .alignleft, body.single article .body-text h2 .alignleft, body.page article .body-text p .alignleft, body.page article .body-text ul .alignleft, body.page article .body-text ol .alignleft, body.page article .body-text blockquote .alignleft, body.page article .body-text h2 .alignleft {
      margin-top: .25em;
      margin-left: auto; }
  body.single article .body-text .responsive-embed-wrapper, body.page article .body-text .responsive-embed-wrapper {
    margin: 0 auto 1em;
    display: block;
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    clear: both;
    z-index: 2; }
  body.single article .body-text ul, body.page article .body-text ul {
    list-style: disc; }
  body.single article .body-text li, body.page article .body-text li {
    margin: 0.25em; }
  body.single article .body-text a, body.page article .body-text a {
    text-decoration: underline;
    color: #4f2a82; }
  body.single article .body-text img, body.page article .body-text img {
    display: block;
    z-index: 2; }
    body.single article .body-text img .aligncenter.size-full, body.page article .body-text img .aligncenter.size-full {
      text-align: center;
      max-width: 100%;
      height: auto;
      display: block; }
  body.single article .body-text figure, body.page article .body-text figure {
    line-height: 1;
    display: block;
    z-index: 2; }
    body.single article .body-text figure img, body.page article .body-text figure img {
      max-width: 100%;
      height: auto; }
    body.single article .body-text figure figcaption, body.page article .body-text figure figcaption {
      font-size: 0.75em;
      padding: 0.5em 1em;
      background: white;
      border: solid #d4d4d4;
      border-width: 0 1px 1px;
      line-height: 1.3em; }
    body.single article .body-text figure.aligncenter, body.page article .body-text figure.aligncenter {
      text-align: center;
      max-width: 100%; }
      body.single article .body-text figure.aligncenter img.size-full, body.page article .body-text figure.aligncenter img.size-full {
        max-width: 100%;
        height: auto; }

.caption {
  font-size: 0.75em;
  padding: 0.5em 1em;
  font-style: italic;
  text-align: left;
  line-height: 1.3; }

body.single-format-aside article > header .intro-text h2 {
  font-size: 0.9em;
  margin: 0 auto 0.25em; }
body.single-format-aside article > header .intro-text h1 {
  font-size: 1.2em;
  margin: 0 auto;
  text-align: center; }
body.single-format-aside article > header .caption {
  display: none; }
body.single-format-aside article > header .social-tools {
  position: relative;
  top: 1.25rem; }
@media screen and (min-width: 37.5em) {
  body.single-format-aside article > header {
    background-color: #d4d4d4;
    background-image: url("Human-Toll-Cover-Image-16x9.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 42em;
    height: 20em;
    margin-bottom: 4em; }
    body.single-format-aside article > header .intro-text {
      line-height: 1.6;
      color: white;
      background-color: rgba(0, 0, 0, 0.35);
      padding: 2em;
      width: 100%;
      height: 100%;
      text-shadow: 0 0 2em rgba(0, 0, 0, 0.4); }
      body.single-format-aside article > header .intro-text h2 {
        font-size: 1em;
        max-width: 40em;
        color: #f6f6f6; }
      body.single-format-aside article > header .intro-text h1 {
        max-width: 100%;
        font-size: 2em; }
    body.single-format-aside article > header .caption {
      display: block; }
    body.single-format-aside article > header .social-tools {
      top: 0; } }

.dropcap {
  float: left;
  font-size: 350%;
  height: .7em;
  line-height: .85em;
  margin: 2px 0 -5px;
  padding: 0 0.1em 0 0; }

a.related {
  color: black !important;
  z-index: 2; }

aside.related {
  z-index: 2;
  width: 50%;
  float: right;
  background: white;
  padding: 0.75em;
  text-align: center;
  border: 1px solid #d4d4d4;
  line-height: 1.1em;
  overflow: hidden;
  margin: 0 0 1em 1em; }
  aside.related:hover {
    cursor: pointer; }
  @media screen and (min-width: 37.5em) {
    aside.related {
      width: 300px; } }
  @media screen and (min-width: 56.25em) {
    aside.related {
      margin: 0 5em 1em 1em; } }
  aside.related img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; }
  aside.related .text {
    width: 100%;
    padding: 1em 0 0; }
    @media screen and (min-width: 37.5em) {
      aside.related .text {
        padding: 1em 1em 0; } }
  aside.related h1 {
    display: block;
    font-size: 0.8em;
    margin: 0;
    width: 100%; }
    @media screen and (min-width: 37.5em) {
      aside.related h1 {
        font-size: 1em; } }
  aside.related h2 {
    font-size: 0.75em;
    color: #8e8e8e;
    margin-bottom: 0.75em; }

footer.read-more {
  clear: both;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  padding: 1rem;
  width: 100%; }
  @media screen and (min-width: 37.5em) {
    footer.read-more {
      flex-wrap: nowrap; } }
  footer.read-more aside.read-next {
    display: block;
    margin: 1rem;
    min-width: 15rem;
    max-width: 30rem;
    z-index: 2;
    background: white;
    padding: 0.75em;
    text-align: center;
    border: 1px solid #d4d4d4;
    line-height: 1.1em;
    overflow: hidden; }
    footer.read-more aside.read-next:hover {
      cursor: pointer; }
    footer.read-more aside.read-next img {
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0; }
    footer.read-more aside.read-next .text {
      width: 100%;
      padding: 1em 1em 0; }
    footer.read-more aside.read-next h1 {
      display: block;
      font-size: 1em;
      margin: 0;
      width: 100%; }
    footer.read-more aside.read-next h2 {
      font-size: 0.75em;
      color: #8e8e8e;
      margin-bottom: 0.75em; }
    @media screen and (min-width: 37.5em) {
      footer.read-more aside.read-next {
        display: inline-block; } }

.social-tools {
  height: 1rem; }
  .social-tools .fb-share-button {
    vertical-align: bottom;
    margin: 0 1rem; }
  .social-tools .twitter-share-button {
    vertical-align: bottom;
    margin: 0 1rem; }
  .social-tools .email-share-button {
    vertical-align: bottom;
    border-radius: 0.15rem;
    margin: 0 1rem;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.4rem 0 1.4rem;
    display: inline-block;
    color: white;
    font-family: "Montserrat", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
    font-size: 0.6rem;
    background-color: #747474;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTE0cHgiIGhlaWdodD0iMTE0cHgiIHZpZXdCb3g9IjAgMCAxMTQgMTE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4gICAgICAgIDx0aXRsZT5TbGljZSAxPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0iQWlnYV9tYWlsX2ludmVydGVkIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMTQiIGhlaWdodD0iMTE0IiByeD0iMTEiPjwvcmVjdD4gICAgICAgICAgICA8cGF0aCBkPSJNMTYsMjUgTDk4LDI1IEw5OCw4NSBMMTYsODUgTDE2LDI1IFogTTE2LDI1IEw1Myw2MiBDNTUuNjY2NjY2Nyw2NCA1OC4zMzMzMzMzLDY0IDYxLDYyIEw5OCwyNSBMMTYsMjUgWiBNMTYsODUgTDQ2LDU1IEwxNiw4NSBaIE02OCw1NSBMOTgsODUgTDY4LDU1IFoiIGlkPSJTaGFwZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: 1rem;
    background-position: 0.2rem;
    background-repeat: no-repeat; }
    .social-tools .email-share-button:hover {
      background-color: #666; }

/*# sourceMappingURL=style.css.map */