body::before {
 background-size: cover;
 background-attachment: fixed;
 content: '';
 will-change: transform;
 z-index: -1;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 position: fixed;
}
@media (max-width: 512px) and (-webkit-min-device-pixel-ratio: 1.5),
 (max-width: 512px) and (min-resolution: 1.5dppx),
 (max-width: 1024px) and (-webkit-max-device-pixel-ratio: 1.5),
 (max-width: 1024px) and (max-resolution: 1.5dppx) {
 body::before {
 background-image: url('/images/bg_1024.jpg');
 }
}
@media (min-width: 513px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5),
 (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx),
 (min-width: 1025px) and (max-width: 2048px) and (-webkit-max-device-pixel-ratio: 1.5),
 (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {
 body::before {
 background-image: url('/images/bg_2048.jpg');
 }
}
@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 1.5),
 (min-width: 1025px) and (min-resolution: 1.5dppx),
 (min-width: 2049px) and (-webkit-max-device-pixel-ratio: 1.5),
 (min-width: 2049px) and (max-resolution: 1.5dppx) {
 body::before {
 background-image: url('/images/bg_2048.jpg');
 }
}
body .demo-blog {
 font-family: 'Roboto', 'Helvetica', sans-serif;
}

.demo-blog .demo-blog__posts {
 max-width: 900px;
 padding: 0;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 margin: 0 auto;
 -webkit-flex-shrink: 0;
 -ms-flex-negative: 0;
 flex-shrink: 0;
}

.demo-blog.mdl-layout .mdl-layout__content {
 padding-top: 230px;
 position: relative;
 -webkit-overflow-scrolling: touch;
}
.demo-blog .mdl-card {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: stretch;
 -webkit-align-items: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
 min-height: 360px;
}
.demo-blog .mdl-card__title {
 padding: 16px;
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
}
.demo-blog .mdl-card__media {
 box-sizing: border-box;
 background-size: cover;
 padding: 24px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: end;
 -webkit-align-items: flex-end;
 -ms-flex-align: end;
 align-items: flex-end;
 cursor: pointer;
}
.demo-blog .mdl-card__media a,
.demo-blog .mdl-card__title a {
 color: inherit;
}
.demo-blog .mdl-card__supporting-text {
 width: 100%;
 padding: 16px;
 min-height: 64px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
}
.demo-blog .mdl-card__supporting-text strong {
 font-weight: 400;
}
.demo-blog .mdl-card__media ~ .mdl-card__supporting-text {
 min-height: 64px;
}
.demo-blog .mdl-card__supporting-text:not(:last-child) {
 box-sizing: border-box;
 min-height: 76px;
}
.demo-blog:not(.demo-blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
 border-top: 1px solid rgba(0,0,0,0.1);
}

.demo-blog .mdl-card__actions:first-child {
 margin-left: 0;
}
.demo-blog .meta {
 box-sizing: border-box;
 padding: 16px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-pack: start;
 -webkit-justify-content: flex-start;
 -ms-flex-pack: start;
 justify-content: flex-start;
 height: auto;
}
.demo-blog .meta > .meta__favorites{
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 margin: 0 8px;
 font-size: 13px;
 font-weight: 500;
}
.demo-blog .meta > .meta__favorites .material-icons {
 font-size: 2em;
 cursor: pointer;
 margin-left: 12px;
}
.demo-blog .mdl-card .meta.meta--fill {
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
.demo-blog .meta > *:first-child {
 margin-right: 16px;
}
.demo-blog .meta > * {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}
.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.coffee-pic {
 -webkit-box-ordinal-group: 1;
 -webkit-order: 0;
 -ms-flex-order: 0;
 order: 0;
}
.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.something-else {
 -webkit-box-ordinal-group: 0;
 -webkit-order: -1;
 -ms-flex-order: -1;
 order: -1;
}
.demo-blog .coffee-pic .mdl-card__media {
 background-image: url('/images/Helloblog.jpg');
}
.demo-blog .something-else .mdl-card__media {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
}
.demo-blog .something-else > button {
 position: absolute;
 top: 0;
 right: 28px;
 -webkit-transform: translate(0px, -28px);
 -ms-transform: translate(0px, -28px);
 transform: translate(0px, -28px);
}
.demo-blog .something-else .mdl-card__media {
 font-size: 13px;
 font-weight: 500;
 border-top-left-radius: 2px;
 border-top-right-radius: 2px;
}
.demo-blog .something-else .mdl-card__media img {
 width: 64px;
 height: 64px;
 margin-bottom: 10px;
}
.demo-blog .something-else .mdl-card__supporting-text {
 background-color: #F5F5F5;
 border-bottom-left-radius: 2px;
 border-bottom-right-radius: 2px;
}
.demo-blog .on-the-road-again .mdl-card__media {
 background-image: url($IMG_URL1$);
}
.demo-blog .shopping .mdl-card__media {
 background-image: url(/images/BgTitle.jpg);
 
}
.demo-blog .demo-blog__posts > .demo-nav {
 margin: 12px 15px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 color: white;
 font-weight: 500;
}
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button {
 color: white;
 text-decoration: none;
}
.demo-blog .demo-blog__posts > .demo-nav .mdl-button {
 color: rgba(0,0,0,0.54);
 background-color: white;
}
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:first-child .mdl-button {
 margin-right: 16px;
}
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:last-child .mdl-button {
 margin-left: 16px;
}
.demo-blog .mdl-card > a {
 color: inherit;
 text-decoration: none;
 font-weight: inherit;
}
.demo-blog .mdl-card h3 {
 margin: 0;
}
.demo-blog .mdl-card h3 a {
 text-decoration: none;
}
.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after {
 display: block;
 font-size: 3em;
 margin-top: 0.5em;
}
.demo-blog .mdl-card h3.quote:before {
 content: '“';
}
.demo-blog .mdl-card h3.quote:after {
 content: '”';
}
.demo-blog--blogpost .custom-header {
 background-color: transparent;
}
.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media {
 background-image: url('$IMG_URL1$');
 height: 280px;
}
.demo-blog--blogpost .comments {
 background-color: #EEE;
}
.demo-blog--blogpost .meta > * {
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
}
.demo-blog--blogpost .meta + .mdl-card__supporting-text {
 border: 0;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}
.demo-blog--blogpost .meta + .mdl-card__supporting-text p {
 max-width: 512px;
 margin: 16px auto;
 font-size: 16px;
 line-height: 28px;
}

.demo-blog--blogpost .comments {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-pack: start;
 -webkit-justify-content: flex-start;
 -ms-flex-pack: start;
 justify-content: flex-start;
 -webkit-box-align: stretch;
 -webkit-align-items: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
 padding: 32px;
 box-sizing: border-box;
}
.demo-blog--blogpost .comments > form {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 flex-diretion: row;
 margin-bottom: 16px;
}
.demo-blog--blogpost .comments > form .mdl-textfield {
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 margin-right: 16px;
 color: rgb(97, 97, 97);
}
/* Workaround for Firefox.
 * User agent stylesheet kept overwriting the font in FF only.
 */
.demo-blog--blogpost .comments > form .mdl-textfield .mdl-textfield__input {
 font-family: 'Roboto', 'Helvetica', sans-serif;
}
.demo-blog--blogpost .comments > form .mdl-textfield input,
.demo-blog--blogpost .comments > form .mdl-textfield textarea {
 resize: none;
}
.demo-blog--blogpost .comments > form button {
 margin-top: 20px;
 background-color: rgba(0, 0, 0, 0.24);
 color: white;
}
.demo-blog--blogpost .comments .comment {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: stretch;
 -webkit-align-items: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
}
.demo-blog--blogpost .comments .comment > .comment__header {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 margin-bottom: 16px;
}
.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar {
 width: 48px;
 height: 48px;
 border-radius: 24px;
 margin-right: 16px;
}
.demo-blog--blogpost .comments .comment > .comment__header > .comment__author {
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}
.demo-blog--blogpost .comments .comment > .comment__text {
 line-height: 1.5em;
}
.demo-blog--blogpost .comments .comment > .comment__actions {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
 -webkit-box-pack: start;
 -webkit-justify-content: flex-start;
 -ms-flex-pack: start;
 justify-content: flex-start;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 font-size: 0.8em;
 margin-top: 16px;
}
.demo-blog--blogpost .comments .comment > .comment__actions button {
 margin-right: 16px;
 color: rgba(0, 0, 0, 0.24);
}
.demo-blog--blogpost .comments .comment > .comment__answers {
 padding-top: 32px;
 padding-left: 48px;
}

.demo-blog--blogpost .demo-back {
 position: absolute;
 top: 16px;
 left: 16px;
 color: white;
 z-index: 9999;
}
.demo-blog .section-spacer {
 -webkit-box-flex: 1;
 -webkit-flex-grow: 1;
 -ms-flex-positive: 1;
 flex-grow: 1;
}
.demo-blog .something-else {
 overflow: visible;
 z-index: 10;
}
.demo-blog .amazing .mdl-card__title {
 background-color: #263238;
}
.demo-blog .minilogo {
 width: 44px;
 height: 44px;
 background-image: url('/images/avatar.png');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;
 border-radius: 22px;
 background-color: #F5F5F5;
}

/* Fixes for IE 10 */
.mdl-grid {
 display: -webkit-box !important;
 display: -webkit-flex !important;
 display: -ms-flexbox !important;
 display: flex !important;
}

.social-btn {
 background-position: center;
 background-size: contain;
 background-repeat: no-repeat;
 background-color: transparent;
 margin: 0 16px;
 width: 24px;
 height: 24px;
 cursor: pointer;
 opacity: 0.46;
 border-radius: 2px;
}
.social-btn__twitter {
 background-image: url('/images/social/post_twitter_black_24dp.png');
}
.social-btn__blogger {
 background-image: url('/images/social/post_facebook_black_24dp.png');
}
.social-btn__gplus {
 background-image: url('/images/social/post_gplus_black_24dp.png');
}
.social-btn__share {
 color: rgba(0, 0, 0, 0.54);
 background: transparent;
}

.demo-blog .mdl-mini-footer {
 margin-top: 80px;
 height: 120px;
 padding: 40px;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 background-color: white;
 box-sizing: border-box;
}