/*******************************************************************************
1. IMPORTS
*******************************************************************************/
/*******************************************************************************
1. VENDOR IMPORTS
*******************************************************************************/
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Merriweather:400,400italic,700,700italic");
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

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

[hidden], template {
  display: none; }

html {
  background: white;
  color: black;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

html, button, input, select, textarea {
  font-family: sans-serif; }

body {
  margin: 0; }

a {
  background: transparent; }
  a:focus {
    outline: thin dotted; }
  a:hover, a:active {
    outline: 0; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

h2 {
  font-size: 1.5em;
  margin: 0.83em 0; }

h3 {
  font-size: 1.17em;
  margin: 1em 0; }

h4 {
  font-size: 1em;
  margin: 1.33em 0; }

h5 {
  font-size: 0.83em;
  margin: 1.67em 0; }

h6 {
  font-size: 0.75em;
  margin: 2.33em 0; }

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

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: yellow;
  color: black; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

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

small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }


img {
  border: 0; }

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

figure {
  margin: 0; }

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0;
  white-space: normal; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline; }

button, input {
  line-height: normal; }

button, select {
  text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled], input[disabled] {
  cursor: default; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

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; }

textarea {
  overflow: auto;
  vertical-align: top; }

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

/*******************************************************************************
1. VARIABLES
*******************************************************************************/
/*******************************************************************************
1. INCLUDES
*******************************************************************************/
@font-face {
  font-family: 'pg-font';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/pg-font.eot');
  src: url('../fonts/pg-font.eot?#iefix') format('embedded-opentype'), url('../fonts/pg-font.woff') format('woff'), url('../fonts/pg-font.ttf') format('truetype'), url('../fonts/pg-font.svg#pg-font') format('svg'); }

/*******************************************************************************
1. FUNCTIONS
*******************************************************************************/
/*******************************************************************************
1. MIXINS
*******************************************************************************/
/*******************************************************************************
1. KEYFRAMES
*******************************************************************************/
@-webkit-keyframes slideInFadeUp {
  from {
    -webkit-transform: translateY(2em);
    opacity: 0; }

  to {
    -webkit-transform: translateY(0);
    opacity: 1; } }

@-moz-keyframes slideInFadeUp {
  from {
    -moz-transform: translateY(2em);
    opacity: 0; }

  to {
    -moz-transform: translateY(0);
    opacity: 1; } }

@-o-keyframes slideInFadeUp {
  from {
    -o-transform: translateY(2em);
    opacity: 0; }

  to {
    -o-transform: translateY(0);
    opacity: 1; } }

@keyframes slideInFadeUp {
  from {
    transform: translateY(2em);
    opacity: 0; }

  to {
    transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translateX(-20em);
    opacity: 0; }

  to {
    -webkit-transform: translateX(0);
    opacity: 1; } }

@-moz-keyframes slideInLeft {
  from {
    -moz-transform: translateX(-20em);
    opacity: 0; }

  to {
    -moz-transform: translateX(0);
    opacity: 1; } }

@-o-keyframes slideInLeft {
  from {
    -o-transform: translateX(-20em);
    opacity: 0; }

  to {
    -o-transform: translateX(0);
    opacity: 1; } }

@keyframes slideInLeft {
  from {
    transform: translateX(-20em);
    opacity: 0; }

  to {
    transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-o-keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1; } }

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0); }

  10% {
    -webkit-transform: translateY(0.9em) rotateZ(-80deg); }

  70% {
    -webkit-transform: translateY(-2em); }

  100% {
    -webkit-transform: translateY(0) rotateZ(0); } }

@-moz-keyframes bounce {
  0% {
    -moz-transform: translateY(0); }

  10% {
    -moz-transform: translateY(0.9em) rotateZ(-80deg); }

  70% {
    -moz-transform: translateY(-2em); }

  100% {
    -moz-transform: translateY(0) rotateZ(0); } }

@-o-keyframes bounce {
  0% {
    -o-transform: translateY(0); }

  10% {
    -o-transform: translateY(0.9em) rotateZ(-80deg); }

  70% {
    -o-transform: translateY(-2em); }

  100% {
    -o-transform: translateY(0) rotateZ(0); } }

@keyframes bounce {
  0% {
    transform: translateY(0); }

  10% {
    transform: translateY(0.9em) rotateZ(-80deg); }

  70% {
    transform: translateY(-2em); }

  100% {
    transform: translateY(0) rotateZ(0); } }

@-webkit-keyframes fly {
  0% {
    -webkit-transform: translateX(0); }

  35% {
    -webkit-transform: translateX(2em); }

  36% {
    opacity: 1; }

  37% {
    opacity: 0; }

  63% {
    opacity: 0; }

  64% {
    opacity: 1; }

  65% {
    -webkit-transform: translateX(-2em); }

  100% {
    -webkit-transform: translateX(0); } }

@-moz-keyframes fly {
  0% {
    -moz-transform: translateX(0); }

  35% {
    -moz-transform: translateX(2em); }

  36% {
    opacity: 1; }

  37% {
    opacity: 0; }

  63% {
    opacity: 0; }

  64% {
    opacity: 1; }

  65% {
    -moz-transform: translateX(-2em); }

  100% {
    -moz-transform: translateX(0); } }

@-o-keyframes fly {
  0% {
    -o-transform: translateX(0); }

  35% {
    -o-transform: translateX(2em); }

  36% {
    opacity: 1; }

  37% {
    opacity: 0; }

  63% {
    opacity: 0; }

  64% {
    opacity: 1; }

  65% {
    -o-transform: translateX(-2em); }

  100% {
    -o-transform: translateX(0); } }

@keyframes fly {
  0% {
    transform: translateX(0); }

  35% {
    transform: translateX(2em); }

  36% {
    opacity: 1; }

  37% {
    opacity: 0; }

  63% {
    opacity: 0; }

  64% {
    opacity: 1; }

  65% {
    transform: translateX(-2em); }

  100% {
    transform: translateX(0); } }

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg); }

  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg); }

  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg); }

  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg); }

  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg); }

  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg); }

  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg); }

  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg); }

  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg); }

  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg); }

  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg); } }

@-moz-keyframes shake {
  0% {
    -moz-transform: translate(2px, 1px) rotate(0deg); }

  10% {
    -moz-transform: translate(-1px, -2px) rotate(-1deg); }

  20% {
    -moz-transform: translate(-3px, 0px) rotate(1deg); }

  30% {
    -moz-transform: translate(0px, 2px) rotate(0deg); }

  40% {
    -moz-transform: translate(1px, -1px) rotate(1deg); }

  50% {
    -moz-transform: translate(-1px, 2px) rotate(-1deg); }

  60% {
    -moz-transform: translate(-3px, 1px) rotate(0deg); }

  70% {
    -moz-transform: translate(2px, 1px) rotate(-1deg); }

  80% {
    -moz-transform: translate(-1px, -1px) rotate(1deg); }

  90% {
    -moz-transform: translate(2px, 2px) rotate(0deg); }

  100% {
    -moz-transform: translate(1px, -2px) rotate(-1deg); } }

@-o-keyframes shake {
  0% {
    -o-transform: translate(2px, 1px) rotate(0deg); }

  10% {
    -o-transform: translate(-1px, -2px) rotate(-1deg); }

  20% {
    -o-transform: translate(-3px, 0px) rotate(1deg); }

  30% {
    -o-transform: translate(0px, 2px) rotate(0deg); }

  40% {
    -o-transform: translate(1px, -1px) rotate(1deg); }

  50% {
    -o-transform: translate(-1px, 2px) rotate(-1deg); }

  60% {
    -o-transform: translate(-3px, 1px) rotate(0deg); }

  70% {
    -o-transform: translate(2px, 1px) rotate(-1deg); }

  80% {
    -o-transform: translate(-1px, -1px) rotate(1deg); }

  90% {
    -o-transform: translate(2px, 2px) rotate(0deg); }

  100% {
    -o-transform: translate(1px, -2px) rotate(-1deg); } }

@keyframes shake {
  0% {
    transform: translate(2px, 1px) rotate(0deg); }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg); }

  20% {
    transform: translate(-3px, 0px) rotate(1deg); }

  30% {
    transform: translate(0px, 2px) rotate(0deg); }

  40% {
    transform: translate(1px, -1px) rotate(1deg); }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg); }

  60% {
    transform: translate(-3px, 1px) rotate(0deg); }

  70% {
    transform: translate(2px, 1px) rotate(-1deg); }

  80% {
    transform: translate(-1px, -1px) rotate(1deg); }

  90% {
    transform: translate(2px, 2px) rotate(0deg); }

  100% {
    transform: translate(1px, -2px) rotate(-1deg); } }

html, body {
  font-family: 'Merriweather', serif;
  font-weight: 300;
  height: 100%; }

body {
  font-size: 100%;
  background: white;
  line-height: 1.5; }

img {
  width: 100%; }

a {
  color: #a5d389; }

p {
  font-size: 1em; }
  @media (min-width: 480px) {
    p {
      font-size: 1.1em; } }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none; }

h1 {
  font-size: 1.6em; }
  @media (min-width: 820px) {
    h1 {
      font-size: 2.75em; } }

h2 {
  font-size: 1.4em;
  margin: 1em 0 0.5em 0; }
  @media (min-width: 820px) {
    h2 {
      font-size: 1.85em; } }

h3 {
  font-size: 1.2em;
  margin: 1em 0 0 0; }
  @media (min-width: 820px) {
    h3 {
      font-size: 1.6em; } }

h4 {
  font-size: 1.1em; }
  @media (min-width: 820px) {
    h4 {
      font-size: 1.4em; } }

h5, h6 {
  font-size: 1.1em; }

pre code {
  background: #1f242e;
  display: block;
  padding: 0.5em 1em;
  color: #a5d389; }

blockquote {
  position: relative; }
  blockquote:before {
    content: '\e607';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'pg-font';
    position: absolute;
    left: -1.5em;
    font-size: 1em; }

hr {
  border: none;
  height: 2px;
  background: #a5d389; }

iframe {
  margin-bottom: 1em;
  max-width: 100%; }

input[type=text], textarea {
  color: #a5d389;
  font-family: 'Montserrat', sans-serif;
  background: #1f242e;
  padding: 0.8em 0.8em;
  border: 1px solid #1f242e;
  font-size: 0.8em;
  width: 100%;
  margin-bottom: 1em; }
  input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 3px 2px #a5d389;
    outline: none; }

textarea {
  width: 100%;
  height: 200px; }

label {
  font-size: 0.9em;
  font-family: 'Montserrat', sans-serif;
  color: #1f242e; }

input[type=submit] {
  -webkit-transition: background 0.25s ease-in-out;
  -moz-transition: background 0.25s ease-in-out;
  transition: background 0.25s ease-in-out;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  background: #a5d389;
  border: none;
  padding: 1em;
  color: #526944; }
  input[type=submit]:hover {
    background: #b7dba0; }

.site-wrapper-pxl {
  *zoom: 1;
  padding-bottom: 6em;
  position: relative;
  min-height: 100%; }
  .site-wrapper-pxl:before, .site-wrapper-pxl:after {
    content: " ";
    display: table; }
  .site-wrapper-pxl:after {
    clear: both; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.site-header-pxl {
  background: #1f242e;
  color: white;
  text-align: center; }
  @media (min-width: 820px) {
    .site-header-pxl {
      width: 35%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1; } }
  .site-header-pxl a {
    color: white; }

.cssanimations .site-header-pxl {
  -webkit-animation: fadeIn 0.4s ease-in;
  -moz-animation: fadeIn 0.4s ease-in;
  animation: fadeIn 0.4s ease-in;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

.cover-pxl {
  background-size: cover !important;
  background-position: center !important;
  padding: 1em;
  position: relative; }
  .cover-pxl:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(31, 36, 46, 0.8); }
  @media (min-width: 820px) {
    .cover-pxl {
      padding: 4em; }
      .cover-pxl:before {
        background: -webkit-linear-gradient( transparent, #1f242e) left repeat;
        background: linear-gradient( transparent, #1f242e) left repeat;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 10em;
        z-index: 1; } }

.logo-pxl {
  display: block;
  position: relative;
  z-index: 1;
  float: left;
  height: 3em; }
  .logo-pxl img {
    height: 100%;
    width: auto; }
  @media (min-width: 820px) {
    .logo-pxl {
      float: none;
      width: 40%;
      height: auto;
      margin: 0 auto; }
      .logo-pxl img {
        width: 100%;
        height: auto; } }

.cssanimations .logo-pxl {
  -webkit-animation: slideInFadeUp 0.4s ease-in;
  -moz-animation: slideInFadeUp 0.4s ease-in;
  animation: slideInFadeUp 0.4s ease-in;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom; }

.blog-title-pxl {
  margin: 80px auto 0;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
  width: 60%; }
  @media (min-width: 480px) {
    .blog-title-pxl {
      width: 40%; } }
  @media (min-width: 820px) {
    .blog-title-pxl {
      width: auto;
      margin: 0.5em 0 0 0; } }
  .blog-title-pxl a {
    color: #a5d389; }

.blog-description-pxl {
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 1em 0;
  position: relative;
  z-index: 1; }
  .blog-description-pxl a {
    text-decoration: none; }
  @media (min-width: 820px) {
    .blog-description-pxl {
      margin: 2em 0 0 0; }
      .blog-description-pxl:before {
        content: "";
        background: rgba(255, 255, 255, 0.75);
        height: 0.5em;
        width: 0.5em;
        position: absolute;
        top: -1.25em;
        left: 50%;
        margin: -0.25em 0 0 -0.25em;
        box-shadow: -0.5em 0 0 0.05em rgba(255, 255, 255, 0.5), 0.5em 0 0 0.05em rgba(255, 255, 255, 0.5); } }

.social-pxl {
  margin: 1em 1em 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0; }
  @media (min-width: 820px) {
    .social-pxl {
      margin: 2em 0 0 0;
      position: static; } }

.social-pxl .dribbble span:before {
  content: '\e601';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-family: 'pg-font'; }
.social-pxl .dribbble:after {
  content: "Dribbble"; }
.social-pxl .dribbble:hover {
  color: #ea4c89; }

.cssanimations .social-pxl .dribbble:hover span:before {
  -webkit-animation: bounce 0.7s linear;
  -moz-animation: bounce 0.7s linear;
  animation: bounce 0.7s linear;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.social-pxl .twitter span:before {
  content: '\e602';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-family: 'pg-font'; }
.social-pxl .twitter:after {
  content: "Twitter"; }
.social-pxl .twitter:hover {
  color: #00acee; }

.cssanimations .social-pxl .twitter:hover span:before {
  -webkit-animation: fly 1s linear;
  -moz-animation: fly 1s linear;
  animation: fly 1s linear;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.social-pxl .facebook span:before {
  content: '\e603';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-family: 'pg-font'; }
.social-pxl .facebook:after {
  content: "Facebook"; }
.social-pxl .facebook:hover {
  color: #3b5998; }

.social-pxl .linkedin span:before {
  content: '\e608';
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: none;
  line-height: 1;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-family: 'pg-font'; }
.social-pxl .linkedin:after {
  content: "Linkedin"; }
.social-pxl .linkedin:hover {
  color: #0e76a8; }

.cssanimations .social-pxl .facebook:hover span:before, .cssanimations .social-pxl .linkedin:hover span:before {
  -webkit-animation: shake 0.5s linear;
  -moz-animation: shake 0.5s linear;
  animation: shake 0.5s linear;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.social-pxl .dribbble, .social-pxl .twitter, .social-pxl .facebook, .social-pxl .linkedin {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  font-size: 1.2em;
  position: relative;
  margin: 0 0.1em;
  width: 2.5em;
  line-height: 2.5em;
  text-align: center;
  z-index: 1;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .social-pxl .dribbble span, .social-pxl .twitter span, .social-pxl .facebook span, .social-pxl .linkedin span {
    position: relative;
    overflow: hidden;
    width: 2.5em;
    height: 2.5em;
    display: block; }
  .social-pxl .dribbble:hover, .social-pxl .twitter:hover, .social-pxl .facebook:hover, .social-pxl .linkedin:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
  .social-pxl .dribbble span:before, .social-pxl .twitter span:before, .social-pxl .facebook span:before, .social-pxl .linkedin span:before {
    position: absolute;
    top: 0.8em;
    margin-left: -0.5em;
    width: 1em;
    left: 50%; }
  .social-pxl .dribbble:after, .social-pxl .twitter:after, .social-pxl .facebook:after, .social-pxl .linkedin:after {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    letter-spacing: 0.05em;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7em;
    pointer-events: none;
    position: absolute;
    width: 6.5em;
    margin-left: -3.25em;
    left: 50%;
    bottom: -3.8em;
    color: white;
    opacity: 0;
    overflow: hidden; }
  .social-pxl .dribbble:hover:after, .social-pxl .twitter:hover:after, .social-pxl .facebook:hover:after, .social-pxl .linkedin:hover:after {
    opacity: 1;
    bottom: -3.4em; }

@media (min-width: 820px) {
  .main-pxl {
    float: left;
    width: 65%;
    margin-left: 35%;
    padding-top: 2em; } }

.article-pxl {
  padding: 1em;
  max-width: 45em;
  color: #4b4f57; }
  .article-pxl h1, .article-pxl h2, .article-pxl h3, .article-pxl h4, .article-pxl h5, .article-pxl h6 {
    color: #1f242e; }
  @media (min-width: 480px) {
    .article-pxl {
      padding: 2em; } }

.date-pxl {
  font-family: 'Montserrat', sans-serif;
  background: #a5d389;
  padding: 0 1.5em 0 4.6em;
  color: #526944;
  font-weight: 700;
  font-size: 0.8em;
  display: inline-block;
  margin: 0 0 0.5em -2.7em;
  position: relative;
  line-height: 4em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }
  .date-pxl:before {
    content: '\e600';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'pg-font';
    font-size: 1.6em;
    position: absolute;
    top: 0.68em;
    left: 1.8em; }
  .date-pxl:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.25em;
    background: #73935f; }

.cssanimations .date-pxl {
  -webkit-animation: slideInLeft 0.25s ease-in-out;
  -moz-animation: slideInLeft 0.25s ease-in-out;
  animation: slideInLeft 0.25s ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

.cssanimations .article-pxl:nth-child(1) .date-pxl {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.cssanimations .article-pxl:nth-child(2) .date-pxl {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s; }

.cssanimations .article-pxl:nth-child(3) .date-pxl {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s; }

.cssanimations .article-pxl:nth-child(4) .date-pxl {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s; }

.cssanimations .article-pxl:nth-child(5) .date-pxl {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s; }

.cssanimations .article-pxl .post-title-pxl, .cssanimations .article-pxl .post-content-pxl {
  -webkit-animation: fadeIn 0.25s ease-in-out;
  -moz-animation: fadeIn 0.25s ease-in-out;
  animation: fadeIn 0.25s ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both; }

.cssanimations .article-pxl:nth-child(1) .post-title-pxl {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.cssanimations .article-pxl:nth-child(2) .post-title-pxl {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s; }

.cssanimations .article-pxl:nth-child(3) .post-title-pxl {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  animation-delay: 1.3s; }

.cssanimations .article-pxl:nth-child(4) .post-title-pxl {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
  animation-delay: 1.7s; }

.cssanimations .article-pxl:nth-child(5) .post-title-pxl {
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s; }

.cssanimations .article-pxl:nth-child(1) .post-content-pxl {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.cssanimations .article-pxl:nth-child(2) .post-content-pxl {
  -webkit-animation-delay: 0.9s;
  -moz-animation-delay: 0.9s;
  animation-delay: 0.9s; }

.cssanimations .article-pxl:nth-child(3) .post-content-pxl {
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  animation-delay: 1.3s; }

.cssanimations .article-pxl:nth-child(4) .post-content-pxl {
  -webkit-animation-delay: 1.7s;
  -moz-animation-delay: 1.7s;
  animation-delay: 1.7s; }

.cssanimations .article-pxl:nth-child(5) .post-content-pxl {
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s; }

.post-title-pxl a {
  -webkit-transition: color 0.4s ease-in-out;
  -moz-transition: color 0.4s ease-in-out;
  transition: color 0.4s ease-in-out;
  color: #1f242e; }
  .post-title-pxl a:hover {
    color: #a5d389; }

.pagination-pxl {
  max-width: 45em;
  padding-bottom: 2em; }
  @media (min-width: 820px) {
    .pagination-pxl {
      float: left;
      max-width: 0;
      margin-left: 2em; } }

.pagination {
  text-align: center;
  position: relative;
  width: 8em;
  line-height: 3em;
  background: #1f242e;
  margin: 0 auto; }
  .pagination a {
    position: absolute;
    text-decoration: none; }
  .pagination .newer-posts {
    left: 1em; }
  .pagination .older-posts {
    right: 1em; }
  .pagination .page-number {
    color: white; }

.post-tags-pxl {
  *zoom: 1;
  list-style: none;
  padding: 0; }
  .post-tags-pxl:before, .post-tags-pxl:after {
    content: " ";
    display: table; }
  .post-tags-pxl:after {
    clear: both; }

.post-tag-pxl {
  font-size: 1em;
  float: left;
  margin-right: 0.3em;
  line-height: 2.3em; }
  .post-tag-pxl:first-child:before {
    content: '\e604';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'pg-font';
    font-size: 1em;
    margin-right: 0.6em;
    background: #a5d389;
    width: 2em;
    line-height: 2em;
    display: inline-block;
    text-align: center;
    color: #526944;
    border-radius: 2em; }
  .post-tag-pxl:after {
    content: ","; }
  .post-tag-pxl:last-child:after {
    display: none; }

.cssanimations .post-tag-pxl {
  -webkit-animation: fadeIn 0.25s ease-in-out;
  -moz-animation: fadeIn 0.25s ease-in-out;
  animation: fadeIn 0.25s ease-in-out;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.share-post-pxl {
  border-top: 2px solid #a5d389;
  padding: 1em 0;
  margin-top: 2em; }

.share-post-title {
  margin: 0 1em 0 0;
  float: left;
  line-height: 2.5em; }
  @media (min-width: 820px) {
    .share-post-title {
      line-height: 2em; } }

.share-pxl {
  -webkit-transition: color 0.25s ease-in-out;
  -moz-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
  margin-right: 0.2em;
  display: inline-block;
  text-decoration: none; }
  .share-pxl:before {
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'pg-font';
    background: #1f242e;
    line-height: 3em;
    display: block;
    width: 3em;
    float: left;
    text-align: center; }
  .share-pxl:hover {
    color: white; }
  .share-pxl.twitter:before {
    content: '\e602'; }
  .share-pxl.facebook:before {
    content: '\e603'; }
  .share-pxl.google:before {
    content: '\e605'; }

.post-footer-pxl {
  *zoom: 1;
  padding: 2em 0 0 0;
  border-top: 2px solid #a5d389;
  position: relative; }
  .post-footer-pxl:before, .post-footer-pxl:after {
    content: " ";
    display: table; }
  .post-footer-pxl:after {
    clear: both; }

.author-image-pxl {
  width: 20%;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 1em 1em 0;
  float: left; }

.author-website-pxl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.author-image-pxl img {
  width: 100%;
  display: block; }

.author-name-pxl {
  margin: 0 0 0.25em;
  font-style: normal; }

.author-bio-pxl p {
  font-size: 0.9em;
  margin: 0.25em 0; }

.more-pxl {
  display: inline-block;
  text-decoration: none;
  position: relative; }
  .more-pxl:after {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    content: "";
    background: transparent;
    height: 0.05em;
    position: absolute;
    bottom: -0.2em;
    left: 0;
    right: 0; }
  .more-pxl:hover:after {
    background: #a5d389;
    bottom: 0em; }

.site-footer-pxl {
  *zoom: 1;
  background: #a5d389;
  padding: 1em;
  color: white;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0; }
  .site-footer-pxl:before, .site-footer-pxl:after {
    content: " ";
    display: table; }
  .site-footer-pxl:after {
    clear: both; }
  .site-footer-pxl a {
    color: #526944; }
  @media (min-width: 480px) {
    .site-footer-pxl {
      padding: 2em; } }
  @media (min-width: 820px) {
    .site-footer-pxl {
      width: 65%;
      margin-left: 35%;
      left: auto; } }
  .site-footer-pxl p {
    margin: 0; }

.footer-text-pxl {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  float: left;
  width: 90%; }

.subscribe-pxl {
  width: 10%;
  text-decoration: none;
  font-size: 1.5em;
  float: right;
  line-height: 1; }
  .subscribe-pxl:before {
    content: '\e606';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-family: 'pg-font';
    float: right; }

.hidden-pxl {
  color: transparent;
  font: 0/0 a;
  text-shadow: none; }