.clearfix {
  clear: both;
}

body {
  font-family: 'Roboto', helvetica, arial, sans-serif;
  color: #576c7b;
}
a {
  color: #1f8edd;
}
h1 {
  color: #4c6474;
}

input {
  border-radius: 4px;
  padding: 6px 10px 7px 10px;
  border: 1px solid #9aa3aa;
}
ul,ol {
  padding-left: 2em;
}
.container {
  max-width: 870px;
  margin: 20px auto;
  padding: 0 10px;
}
.content {
  margin-top: 40px;
  clear: both;
}
.content h1 {
  margin-top: 30px;
  margin-bottom: 20px;
}
.content h1 a {
  color: #4c6474;
  text-decoration: none;
}
.content h1 a:hover {
  color: #1f8edd;
}
.content h2 {
  color: #576c7b;
  margin-top: 30px;
  margin-bottom: 20px;
}
.content h2 a {
  color: #576c7b;
}
.content h2.category {
  border-bottom: 6px solid #aeb6bc;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.content h2.has-category {
  margin-bottom: 0;
}
.content h3 {

}
.content h3.category {
  margin-top: 5px;
  border-left: 4px solid #aeb6bc;
  padding-left: 8px;
  font-weight: normal;
  color: #9aa3aa;
  font-size: 0.9em;
  text-transform: uppercase;
}

strong.category {
  border-bottom: 4px solid #aeb6bc;
}

.content h2.category.purple,
.content h3.category.purple,
.content strong.category.purple {
  border-color: #c8b6f8;
}
.content h2.category.blue,
.content h3.category.blue,
.content strong.category.blue {
  border-color: #9AC3FF;
}
.content h2.category.teal,
.content h3.category.teal,
.content strong.category.teal {
  border-color: #7ED6D6;
}
.content h2.category.green,
.content h3.category.green,
.content strong.category.green {
  border-color: #a6db95;
}
.content h2.category.yellow,
.content h3.category.yellow,
.content strong.category.yellow {
  border-color: #f0e29c;
}
.content h2.category.red,
.content h3.category.red,
.content strong.category.red {
  border-color: #fc9c92;
}
.content h2.category.pink,
.content h3.category.pink,
.content strong.category.pink {
  border-color: #FF9ED4;
}

.content p {
  line-height: 1.7em;
  font-size: 1.2em;
}
.content table {
  line-height: 1.7em;
  font-size: 1.2em;
}
.content li {
  font-size: 1.2em;
  margin-bottom: 0.4em;
  line-height: 1.5em;
}
.content span.code {
  font-family: 'Roboto Mono', monospace;
  background: #e7ebee;
  padding: 0.17em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  word-wrap: break-word;
}
.content pre.code {
  font-family: 'Roboto Mono', monospace;
  background: #e7ebee;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9em;
}
pre code.hljs{
  font-family: 'Roboto Mono', monospace;
  background: #e7ebee;
  border-radius: 5px;
  font-size: 0.9em;
}
pre code:first-line {
  line-height: 0px;
}
.header .logo {
  float: left;
}
.header .logo img {
  width: 110px;
  border-radius: 100%;
  margin-right: 20px;
  
  /* ALTERNATE STYLE */
  width: 94px;
  border: 4px solid #1f8edd;
  padding: 4px;
}
.header .name {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 1.5em;
  font-weight: bold;
}
.header .name a {
  color: #4c6474;
  text-decoration: none;
}
.header .name a:hover {
  color: #1f8edd;
}
.header .summary, .header .summary-separator {
  display: inline-block
}
.header .summary {
  line-height: 1.5em;
}
.header .links {
  margin: 0;
  padding-top: 2px;
  list-style: none;
}
.header .links a {
  color: #576c7b;
  text-decoration: none;
}
.header .links a:hover {
  color: #1f8edd;
}
.footer {
  margin: 30px 0 30px 0;
  color: #9aa3aa;
}
.time {
  display: none;
}
.post {
  margin-top: 20px;
  margin-bottom: 40px;
  style: relative;
}
.post .block-image {
  text-align: center;
}
.post .block-image img {
  width: 100%;
}
.post .border-image img {
  padding: 2px;
  width: 98%;
  border: 1px solid #b7c3cd;
  border-radius: 4px;
}
.cta {
  padding: 40px;
  font-size: 1.2em;
  text-align: center;
  color: #EEE;
  background-color: #3b465d;
  margin: 40px 0;
  border-radius: 10px;
}
.cta .inner {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}
.cta input {
  border: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
}
.cta input + input {
  margin-top: 10px;
}
.cta input[type="text"] {
  color: #444;
}
.cta input[type="submit"] {
  background-color: #e42e00;
  color: white;
  transition-duration: 0.2s;
}
.cta input[type="submit"]:hover, .cta input[type="submit"]:focus {
  background: #CC2900;
}
.cta .title {
  margin-top: 0;
  text-align: center;
  font-weight: bold;
}
.cta .message {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

.scrollbox {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 25px;
  background: white;
  style: relative;
  border: 5px solid #cc5a5a;
  text-align: center;
  border-top-left-radius: 15px;
  max-width: 250px;
}

.scrollbox .message {
  margin-top: 15px;
  margin-bottom: 15px;
}

.scrollbox form {
  text-align: center;
  margin: 0;
  padding: 0;
}

.scrollbox input {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.scrollbox input[type=submit] {
  border: 0;
  background-color: #cc5a5a;
  color: white;
}

.scrollbox input + input {
  margin-top: 10px;
}

.scrollbox .close {
  position: absolute;
  top: 4px;
  right: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #9aa3aa;
}


.tweet {
  margin: 50px 0;
  min-height: 180px;
}

.share-box {
  background: white;
  border-radius: 4px;
  position: fixed;
  left: 50px;
  top: 175px;
}

.share-box .share-link {
  font-size: 2em;
  color: #c8cdd0;
  display: block;
}

.share-box .share-link.twitter:hover {
  color: #1a8bf0;
}

.share-box .share-link.facebook:hover {
  color: #3b5998;
}

.share-box .share-link.reddit:hover {
  color: #ff4500;
}

.share-box .share-link.linkedin:hover {
  color: #0077b5;
}

.share-box .share-link.email:hover {
  color: #607077;
}

.share-box .share-link + .share-link {
  margin-top: 15px;
}


@media (max-width: 1200px) {
  .share-box {
    position: static;
  }
  .share-box .share-link {
    display: inline-block;
  }
  .share-box .share-link + .share-link {
    margin-left: 10px;
    margin-top: 0;
  }
}

@media (max-width: 500px) {
  .header { text-align: center;}
  .header .logo { display: none; }
  .header .summary-separator { display: none; }
  .header .summary { display: block; }
  .header { padding-bottom: 20px; border-bottom: 1px solid #9aa3aa;}
  .content { margin-top: 20px; font-size: 0.9em }
  .cta { padding: 20px; }
  .cta .message { margin-bottom: 20px; }
  .scrollbox { left: 0; text-align: center;  border-top-left-radius: 0px; max-width: 500px;}
}