/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Body */
body { background: #f0f0f0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }

.mdl-layout__content { margin-top: 300px; padding-bottom: 40px; }

header.mdl-layout__header { background-color: #fff; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 1rem; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

/** Lists */
ul, ol { margin-left: 2rem; }

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

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: scroll; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(960px - (2rem * 2)); max-width: calc(960px - (2rem * 2)); margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; }
@media screen and (max-width: 960px) { .wrapper { max-width: -webkit-calc(960px - (2rem)); max-width: calc(960px - (2rem)); padding-right: 1rem; padding-left: 1rem; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

.float-left { float: left; }

.float-right { float: right; }

.disqus-comment-count { font-weight: normal; }

.site-title { display: inline-block; margin: 0; padding-left: 9%; color: #363638; text-decoration: none; text-align: center; transition: color .3s ease-out; }
.site-title.active { color: #2f51ff; }
.site-title:hover { color: #2f51ff; box-shadow: none; }
.site-title:first-child { padding-left: 0; }

.post-block { background: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; }
.post-block a { text-decoration: none; }
.post-block .post-card { -webkit-transition: all 0.3s; transition: all 0.3s; height: 100%; position: relative; }
.post-block .post-card:hover img { -webkit-filter: brightness(104%); filter: brightness(104%); }
.post-block .post-card__fade { position: absolute; bottom: 0; width: 100%; height: 4rem; background: url(data:image/svg+xml;base64,alotofcodehere); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, white)); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%); }

.mdl-grid .mdl-cell { display: inline-block; vertical-align: middle; width: 240px; height: 290px; margin-top: 20px; margin-right: 35px; padding: 16px; }
.mdl-grid .mdl-cell:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.mdl-grid .mdl-cell .mdl-card__title { line-height: 30px; color: #363638; }
.mdl-grid .mdl-cell .mdl-card__img { text-align: center; line-height: 160px; height: 160px; }
.mdl-grid .mdl-cell .mdl-card__img img { max-height: 160px; max-width: 100%; }
.mdl-grid .mdl-cell .mdl-card__supporting-text { display: -webkit-box; box-sizing: border-box; overflow-y: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; height: 50px; color: #b1b1b1; font-size: 12px; padding-top: 15px; }
.mdl-grid .mdl-cell .item-footer { display: inline-block; width: 100%; box-sizing: border-box; padding: 10px 0; color: #2f51ff; }

@media (min-width: 1023px) { .mdl-grid .mdl-cell:nth-child(3n) { margin-right: 0; } }
@media (max-width: 1023px) and (min-width: 640px) { .mdl-grid { width: 590px; margin: 0 auto; }
  .mdl-grid .mdl-cell:nth-child(2n) { margin-right: 0; } }
@media (max-width: 640px) { .mdl-grid { width: 272px; margin: 0 auto; }
  .mdl-grid .mdl-cell:nth-child(n) { margin-right: 0; } }
.mdl-layout__header-row { position: fixed; top: 0; left: 0; width: 100%; padding: 0; height: auto; background-color: #ffffff; overflow: hidden; z-index: 1; }
.mdl-layout__header-row .header-logo { transition: all 0.4s ease; background: url("../assets/images/header-bg.jpg") repeat; width: 100%; height: 300px; overflow: hidden; }
.mdl-layout__header-row .header-logo .logo { transition: all 0.4s; display: block; width: 400px; margin: 0 auto; margin-top: 110px; }
.mdl-layout__header-row .header-logo.small { background: none; width: 100%; height: 80px; }
.mdl-layout__header-row .header-logo.small .logo { width: 200px; margin-top: 10px; transition: all 0.4s; }
.mdl-layout__header-row .header { display: block; margin: 0 auto; padding: 20px 0; width: 750px; background-color: #fff; position: relative; z-index: 2; }

@media (max-width: 1023px) and (min-width: 640px) { .mdl-layout__header-row .header-logo { height: 185px; }
  .mdl-layout__header-row .header-logo .logo { margin-top: 65px; width: 300px; }
  .mdl-layout__content { margin-top: 200px; } }
@media (max-width: 640px) { .mdl-layout__header-row .header-logo { background-image: none; height: 90px; }
  .mdl-layout__header-row .header-logo .logo { margin-top: 20px; width: 180px; }
  .mdl-layout__header-row .header-logo.small { background: none; width: 100%; height: 70px; }
  .mdl-layout__header-row .header-logo.small .logo { width: 130px; margin-top: 20px; transition: all 0.4s; }
  .mdl-layout__content { margin-top: 100px; } }
.post { background: #fff; padding: 1rem; margin: 1rem 0 1rem 0; }
.post .post-header { margin: 1rem 0; }
.post .post-hero { text-align: center; }
.post .post-hero img { max-height: 500px; max-width: 100%; margin-top: 1rem; }
.post .post-content { margin: 1rem 0; line-height: 2rem; }
.post .post-content h2 { font-size: 20px; font-weight: bold; }
.post .post-content p:last-child a { border: 2px solid #333f48; background: #fff; color: #444; display: inline-block; transition-duration: 0.4s; border-radius: 4px; padding: 8px 30px; text-decoration: none; text-align: center; font-weight: bold; margin: 0 5px; }
.post .post-content p:last-child a:hover { background: #333f48; color: #fff; }
.post .post-content p:last-child a:first { margin-left: 0; }