html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

}

body {
  font-kerning: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";

}

#content-page {
  background:#f3f5f8;
  font-family: 'Lora', serif;
  padding-top:1em;
  font-size:22px;
  color:rgba(0,0,0,0.7);

}


article,
aside,
cite,
code,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
small,
summary {
  display: block
}

article,
article ol,
article ul,
blockquote,
body,
div,
figure,
footer,
header,
input,
nav,
section {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

a {
  background: 0 0
}

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

abbr {
  letter-spacing: .1em
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

mark {
  background: #ff0;
  color: #000
}

small {
  font-size: 70%
}

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

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

em,
i {
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

img {
  border: 0
}

svg:not(:root) {
  overflow: hidden
}


#content-body hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box
}

pre {
  overflow-x: auto;
  margin: .5em 0;
  margin-bottom:2em;
  border:0;
  background: rgba(37, 49, 55, 0.18);
}



#content-body code,
kbd,
pre,
samp {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Source Code Pro',monospace,sans-serif;
  font-weight: 400;
  line-height: 1.5em;
  padding:.5em;
  font-size:.8em;
  color:rgba(0,0,0,0.8);
}

#content-body code strong {font-weight:700;
  color:rgba(0,0,0,1);
}

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

td,
th {
  padding: 0
}

.heroImage {
  max-width:100%;
  display: block;
  margin: 0 auto;

}

img {
  max-width:100%;
  display: block;
  margin: 0 auto;

}

#content-body img {
  max-width:100%;
  display: block;
  margin: 0 auto;
  margin-bottom:1.6em;
  border-radius:9px;
  box-shadow:0 16px 36px rgba(0,0,0,0.05);
}



/* Content Page Lists */

#content-body ol,
#content-body ul {
  line-height: 1.5; 
  font-style:normal;
  font-size:17px;
}

#content-body ol,
#content-body ul::last-child {
  padding-bottom:2em;
}

#content-body ol+p, #content-body ul+p {padding-top:1em;}


/*
#content-body ul, #content-body ul > li > ul {
  padding-left: 0;
}*/

#content-body ul > ul {
  padding-left: 2em;
}
/*
#content-body ol, #content-body ol > li > ol {
  padding-left: 0;
}
*/

#content-body ul li {
  list-style-position: outside;
  list-style-type:disc;
}
/*
#content-body ol, ol ol {
  margin-bottom:0;

}

#content-body ul, ul ul {
  margin-bottom:0;
}
*/
#content-body ol li {
  list-style-position: outside;
  list-style-type: decimal;
}

#content-body ul li {
  list-style-position: outside;
}

#content-body ol > ol li {
  list-style-position: outside;
  list-style-type: decimal;
  margin: 0 0 0 2em;
}

#content-body ul > ul li {
  list-style-position: outside;
}

#content-body ol > ul li {
  list-style-type:disc;
  list-style-position: outside;
  margin: 0 0 0 2em;
}

#content-body ul > ol {
  padding-left:2em;
  list-style-position: outside;
}

#content-body ol > ol > li {
  list-style-type:lower-alpha;
  list-style-position: outside;
  margin-left:2em;
}


#content-body ol > ol > ol > li {
  list-style-type: upper-roman;
  list-style-position: outside;
  margin-left:4em;
}

#content-body ul > ul > ul > li {
  list-style-position: outside;
  margin-left:4em;
}

#content-body ol > ol > ol > ol > li {
  list-style-type:lower-roman;
  list-style-position: outside;
  margin-left:6em;
}

#content-body ol > ol > ol > ol > ol > li {
  list-style-type:lower-latin;
  list-style-position: outside;
  margin-left:8em;
}



#content-body ol:last-child {
  margin-bottom:1em;
}

#content-page h1 {
  font-family:'Rubik', sans-serif;
  font-weight:500;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -.025em;
  color:rgba(0, 113, 188,1);
  margin-top: .5em;
  margin-bottom: 1.6rem
}
#content-page h2 {
  color:rgba(0,0,0,0.8);
  padding:0 1rem;
  font-family:'Lora', serif;
  font-weight:700;
  font-size: 36px;
  line-height: 1.2em;
  margin-top: 2em;
  margin-bottom: .8rem
}
#content-body h3 {
  color:rgba(0,0,0,0.7);
  padding:0 1rem;
  font-family:'Lora', serif;
  font-size: 28px;
  line-height: 32px;
  margin-top: 1.8em;
  margin-bottom: .8em;
  font-weight:700;
}
#content-page h4 {
  padding:0 1rem;
  font-family:'Lora', serif;
  font-weight:700;
  font-size: 22px;
  line-height: 32px;
  margin-top: 1.6em;
  margin-bottom: .8rem
}
#content-page h5 {
  padding:0 1rem;
  font-family:'Lora', serif;
  font-weight:700;
  font-size: 20px;
  line-height: 32px;
  margin-top: 1.6em;
  margin-bottom: .8em
}
#content-page h6 {
  padding:0 1rem;
  font-family:'Lora', serif;
  font-size: 20px;
  line-height: 32px;
  margin-top: 1.6em;
  margin-bottom: .8em;
  letter-spacing:2px;
}

#content-body p.lead {
  box-shadow:0 36px 60px -36px rgba(0,0,0,0.18);
  display:block;
  padding:0 .5em 1em .5em;
  margin:1em auto;
  color:rgba(0, 113, 188,0.65);
  text-align:center;
  font-family:'Lora',serif;
  font-size:22px;
  line-height:1.2;
  font-weight:700;
}

#content-body p {
  padding:0 1rem;
  font-family:'Lora',serif;
  line-height:1.5;
  margin-bottom:1em;
}









#content-body h1+h2 {
  margin-top: 1.6rem
}
#content-body h2+h3,
#content-body h3+h4,
#content-body h4+h5 {
  margin-top: .8em
}
#content-body  h5+h6 {
  margin-top: -.8rem
}

#content-body .note {
  margin: 1em 0;
  padding:1em;
  background:rgba(0, 113, 188,0.18);
  border-radius:3px;


}

#content-body figure blockquote {
  padding: 3.2rem 0 1.6rem;
  text-align: center;
  border:0;

}



#content-body figure blockquote p {
  font-size: 28px;
  line-height: 36px;
  font-style:italic;
}






#content-body figure.floatLeft,
#content-body figure.floatRight {
  max-width: 320px;
  padding: 1.6em;
  margin-bottom: 0
}
#content-body figure.floatLeft blockquote,
#content-body figure.floatRight blockquote {
  text-align: left;
  padding: 0;
  margin-top: 1.6em
}
#content-body figure.floatLeft blockquote p,
#content-body figure.floatRight blockquote p {
  font-size: 28px;
  font-weight:700;
  line-height: 32px;
  line-height: 1.6em;
  color:#0f9d58;
}
#content-body figcaption {
  line-height: 32px;
  line-height: 1.6em;
  margin-bottom: 0
}
#content-body .floatLeft {
  float: left;

}
#content-body .floatCenter {
  margin-left: auto;
  margin-right: auto
}
#content-body .floatRight {
  float: right
}
#content-body blockquote {
  padding-left: 2em
}
small {
  line-height: 16px;
  line-height: .8em
}



#content-body hr {
  margin: .4em auto 1.7em ;
  font-size:2em;
  text-align: center;
  display: block;
  border: 0;
}

#content-body hr:before {
  color:#0f9d58;
  opacity:0.5;
  content: "···";
  letter-spacing: 1em
}


code {
  padding: 1.6em
}
.attention-grabber {
  font-size: 19.2px;
  font-size: 1.2em
}



#contentCTA {background:#ebeef0;
  padding:96px 0;
  margin:64px auto;
}



#contentCTA .btn-cta {background:#11b565;
  color:white;}


#contentCTA .btn-cta:hover {background:#0f9d58;
  color:white;}

#author {
  font-size:.8em;
}

#author div:nth-child(2) {
  opacity:0.7;
}

#author-block {
  padding-bottom:2em;
}

#author-block h2 {
  font-family:'Lora', serif;
  font-size:1em;
  padding:0;
  color:rgba(0,0,0,0.54);
}
#author-block p {
  font-family:'Lora', serif;
  font-size:.8em;
  padding:0;
  color:rgba(0,0,0,0.54);
}

#related-block {
  padding-bottom:2em;
}

#related-block h5 {
  font-family:'Lora', serif;
  font-weight:700;
  padding:0;
  color:rgba(0,0,0,0.54);
}
#related-block p {
  margin-top:1em;
  font-family:'Lora', serif;
  font-style:italic;
  font-size:.7em!important;
  letter-spacing:-.5px;
  padding:0;
  color:rgba(0,0,0,0.54);
}

#related-block a:hover p {
  color:rgba(0,0,0,1);
}

#related-block img {
  max-width:80%;
  opacity:0.75;
}

#related-block a:hover img {
  opacity:1;
}

#related-block .keep-center {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}

#related-block .related-item {
  width:250px;
  margin:0 auto;
  padding:.5em;
}


.vertical-align {
  display: flex;
  flex-wrap:wrap;
  align-items: center;
}

/* Johnson Box */

#content-body-inner > p.johnson {
  display:block;
  color:rgba(0,0,0,.8);
  font-size:.8em;
  background:rgba(15, 157, 88, 0.25);
  border: 1px solid rgba(15, 157, 88, 0.5);
  padding:1em 1.5em;
  margin-bottom:1.6em;
  box-shadow:0 6px 9px rgba(0,0,0,0.05);
  transition: all .2s ease-in-out;
}

#content-body-inner > p.johnson:hover {
  color:black;
  background:rgba(15, 157, 88, 0.5);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
}

#content-body-inner > p.johnson > a {
  color:rgba(0,0,0,.8);
  transition: all .2s ease-in-out;
}

#content-body-inner > p.johnson > a:hover {
  color:black;
}

#disqus {
    background:#f3f5f8;
}


@media only screen and (min-width: 480px) {

  #content-page h1 {
    font-size: 42px;
    line-height: 42px;
  }

  #content-body p.lead {
    font-size:22px;
    box-shadow:0 36px 60px -36px rgba(0,0,0,0.18);
  }

  #content-page p {
    font-size: 18px;
  }

  #content-page ul, #content-page ol {
    font-size:18px;
  }

  #content-body figure.wideQuote blockquote {
    position:relative;
    width:100%;
    padding: 3.2rem 0 1.6rem;
    text-align: center;
    border:0;
    left:0;
  }

  #content-body figure blockquote p {
    font-size: 28px;
    line-height: 36px;
    font-style:italic;
  }

  #drip h3 {
    font-size:28px;
  }

}

@media only screen and (min-width: 768px) {

  #content-page h1 {
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -.025em
  }

  #content-body p.lead {
    font-size:22px;
    box-shadow:0 36px 60px -36px rgba(0,0,0,0.18);
  }

  #content-page p {
    font-size: 20px;
  }
  #content-page ul, #content-page ol  {
    font-size:20px;
  }

  #content-body figure.wideQuote blockquote {
    position:relative;
    width:100%;
    padding: 3.2rem 0 1.6rem;
    text-align: center;
    border:0;
    left:0;
  }

  #content-body figure blockquote p {
    font-size: 32px;
    line-height: 36px;
    font-style:italic;
  }

  #drip h3 {
    font-size:36px;
  }


}

@media only screen and (min-width: 960px) {

  #content-page h1 {
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -.025em
  }

  #content-body p.lead {
    font-size:26px;
    box-shadow:0 36px 60px -36px rgba(0,0,0,0.18);
  }

  #content-page p {
    font-size: 18px;}

  #content-page ul, #content-page ol {
    font-size:18px;
  }

  #content-body figure.wideQuote blockquote {
    position:relative;
    width:150%;
    padding: 3.2rem 0 1.6rem;
    text-align: center;
    border:0;
    left:-25%;
  }

  #content-body figure blockquote p {
    font-size: 48px;
    line-height: 48px;
    font-style:italic;
  }

    #drip h3 {
    font-size:36px;
  }


}


.conversion-header {background:#253137;}


blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  background:white;
  padding: 2em;

}

blockquote.twitter-tweet p {
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}