/*
Theme Name: Bone
Theme URI: https://wordpress.org/themes/bone/
Author: deer
Author URI: https://deer.tokyo
Description: This is made by using the Google Material Design Lite Library.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: bone

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import '//fonts.googleapis.com/earlyaccess/notosansjapanese.css';
@import '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
@import '//fonts.googleapis.com/css?family=Source+Code+Pro';
@import '//fonts.googleapis.com/icon?family=Material+Icons';
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px /* Preferred icon size */;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
/* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
/* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
/* Support for IE. */
  font-feature-settings: 'liga';
}
/*--------------------------------------------

  WP Default Style

---------------------------------------------*/
.alignnone {
  margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
.gallery-caption {
  font-size: 12px;
  color: #666;
}
.bypostauthor {
  font-size: inherit;
}
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
/*--------------------------------------------

  Common Style

---------------------------------------------*/
body {
  font-family: 'Noto Sans Japanese', sans-serif;
  background: #fafafa;
}
img {
  max-width: 100%;
  height: auto;
}
.mdl-logo a,
.mdl-layout-title a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bone-content {
  min-height: calc(100vh - 164px);
}
.bone-content:first-child {
  margin-top: 16px;
}
.bone-container {
  max-width: 1250px;
  padding: 0 16px;
  margin: 0 auto;
}
.bone-header-button {
  float: right;
}
.avatar {
  -webkit-border-radius: 24px;
  border-radius: 24px;
  margin-right: 16px;
}
.bone-icon--small {
  font-size: 1em;
  margin-left: 3px;
}
#jp-relatedposts.jp-relatedposts .jp-relatedposts-items p {
  font-size: 0.7em;
}
.jp-relatedposts-post-img {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
/*--------------------------------------------

  Header style in Under Page

---------------------------------------------*/
.bone-content-header {
  padding: 0 16px;
  margin-top: 16px;
}
.bone-content-header .bone-content-header__title {
  margin-top: 0;
  font-size: 20px;
  font-weight: bold;
}
.bone-content-header + .mdl-grid {
  padding-top: 0;
}
@media (min-width: 840px) {
  .bone-container {
    padding: 0;
  }
}
/*--------------------------------------------

  Grid

---------------------------------------------*/
@media (max-width: 479px) {
  .mdl-cell.bone-cell {
    margin-bottom: 16px;
  }
}
@media (min-width: 480px) {
  .bone-grid {
    padding: 0;
  }
  .bone-cell {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
  }
  .bone-grid-space-small .bone-grid {
    margin: 8px -8px;
  }
  .bone-grid-space-small .bone-grid .bone-cell {
    padding: 8px;
  }
  .bone-grid-space-midium .bone-grid {
    margin: 16px -16px;
  }
  .bone-grid-space-midium .bone-grid .bone-cell {
    padding: 16px;
  }
  .bone-grid-space-large .bone-grid {
    margin: 32px -32px;
  }
  .bone-grid-space-large .bone-grid .bone-cell {
    padding: 32px;
  }
}
@media (min-width: 480px) and (max-width: 839px) {
  .bone-grid-space-small .bone-container {
    padding: 0 16px;
  }
  .bone-grid-space-midium .bone-container {
    padding: 0 32px;
  }
  .bone-grid-space-large .bone-container {
    padding: 0 64px;
  }
}
/*--------------------------------------------

  Article

---------------------------------------------*/
code {
  font-family: 'Source Code Pro';
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #eee;
  font-size: 85%;
  padding: 0.2em;
}
pre {
  margin-top: 2em;
  margin-bottom: 2em;
}
kbd {
  font-family: monospace;
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #555;
  vertical-align: middle;
  background-color: #fcfcfc;
  border: solid 1px #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 #bbb;
  box-shadow: inset 0 -1px 0 #bbb;
}
.bone-article {
  display: block;
  margin-bottom: 16px;
}
@media (max-width: 479px) {
  .bone-article {
    margin-right: -16px;
    margin-left: -16px;
    width: 100vw;
  }
}
.bone-article .bone-article__thumbnail {
  min-height: 150px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center;
  padding: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.bone-article .bone-article__title {
  color: #fff;
  padding: 0;
  word-wrap: break-word;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.bone-article .bone-article__by:before {
  content: '-';
  margin-right: 5px;
}
.bone-article .bone-article__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.bone-article .bone-article__meta .time {
  display: block;
}
.bone-article .bone-article__body-pager {
  margin-top: 32px;
  text-align: center;
}
.bone-article .bone-article__body-pager a {
  margin: 0 10px;
  text-decoration: none;
}
.bone-article .bone-article__body {
  padding: 16px;
}
.bone-article .bone-article__body p,
.bone-article .bone-article__body li,
.bone-article .bone-article__body dl,
.bone-article .bone-article__body table,
.bone-article .bone-article__body blockquote {
  font-size: 14px;
  line-height: 1.8;
}
.bone-article .bone-article__body p,
.bone-article .bone-article__body ul,
.bone-article .bone-article__body dl,
.bone-article .bone-article__body ol,
.bone-article .bone-article__body table,
.bone-article .bone-article__body blockquote {
  margin-bottom: 2em;
}
.bone-article .bone-article__body ul ul {
  margin-bottom: 0;
}
.bone-article .bone-article__body iframe {
  height: 300px;
}
.bone-article .bone-article__body blockquote {
  margin-right: 0;
  margin-left: 0;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #eee;
  padding: 12px 18px;
}
.bone-article .bone-article__body blockquote:before,
.bone-article .bone-article__body blockquote:after {
  content: none;
}
.bone-article .bone-article__body blockquote p:last-child {
  margin-bottom: 0;
}
.bone-article .bone-article__body .footnotes {
  margin-top: 64px;
}
.bone-article .bone-article__body .footnotes li {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
.bone-article .bone-article__body table:not([class*=highlight]) {
  border: 1px solid #ddd;
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
  table-layout: fixed;
}
.bone-article .bone-article__body table:not([class*=highlight]) tr {
  width: 800px;
}
.bone-article .bone-article__body table:not([class*=highlight]) th,
.bone-article .bone-article__body table:not([class*=highlight]) td {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 3px 8px;
}
.bone-article .bone-article__body table:not([class*=highlight]) td:last-child {
  border-right: 1px solid #ddd;
}
.bone-article .bone-article__body .attachment {
  margin-bottom: 10px;
}
.bone-article .bone-article__body .attachment + p {
  font-size: 12px;
}
.bone-article .bone-article__body .gallery .gallery-item {
  margin: 0;
  word-wrap: break-word;
}
.bone-article .bone-article__body .gallery img {
  height: auto;
}
.bone-article .bone-article__body .gallery-columns-1 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-1 .gallery-item {
  width: 100%/1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-2 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-2 .gallery-item {
  width: 100%/2;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-3 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-3 .gallery-item {
  width: 100%/3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-4 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-4 .gallery-item {
  width: 100%/4;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-5 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-5 .gallery-item {
  width: 100%/5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-6 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-6 .gallery-item {
  width: 100%/6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-7 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-7 .gallery-item {
  width: 100%/7;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-8 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-8 .gallery-item {
  width: 100%/8;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-9 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-9 .gallery-item {
  width: 100%/9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body .gallery-columns-10 {
  margin: -2.5px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
.bone-article .bone-article__body .gallery-columns-10 .gallery-item {
  width: 100%/10;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2.5px;
}
.bone-article .bone-article__body table.highlight {
  margin-bottom: 0;
}
.bone-article .bone-article__body table.highlight th,
.bone-article .bone-article__body table.highlight td,
.bone-article .bone-article__body table.highlight tr {
  line-height: 1.4;
}
.bone-article .bone-article__footer {
  text-align: right;
  color: #616161;
  vertical-align: middle;
  padding: 16px;
}
.bone-article .bone-article__footer i {
  vertical-align: middle;
}
.bone-article .bone-article__footer a {
  margin-left: 5px;
  text-decoration: none;
  font-size: 12px;
  line-height: 24px;
}
.bone-article .bone-article__footer a:not(:hover) {
  color: inherit;
}
.bone-article h2 {
  font-size: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  line-height: 1.225;
  margin-top: 64px;
}
.bone-article h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.43;
  margin-top: 64px;
  margin-bottom: 14px;
}
.bone-article h4 {
  font-size: 18px;
  line-height: 1.4;
  margin: 1.35em 0 0.7em;
}
.bone-article h2 + h3 {
  margin-top: 24px;
}
.bone-article .sharedaddy {
  margin: 32px 0;
  text-align: center;
}
.bone-article figcaption {
  font-size: 12px;
  color: #666;
}
.bone-article .trackback-url p {
  word-wrap: break-word;
}
.bone-article sup a {
  text-decoration: none;
}
@media (min-width: 480px) {
  .bone-content-header {
    padding: 0;
  }
  .bone-content-header .bone-content-header__title {
    font-size: 30px;
  }
  .bone-article {
    width: 100%;
    margin-bottom: 0;
  }
  .bone-article .bone-article__thumbnail {
    min-height: 280px;
    padding: 24px;
  }
  .bone-article .bone-article__title {
    font-size: 34px;
  }
  .bone-article .bone-article__header {
    padding: 32px 32px 0;
  }
  .bone-article .bone-article__title {
    font-size: 30px;
  }
  .bone-article .bone-article__body {
    padding: 0 32px;
    max-width: 700px;
    margin: 0 auto;
  }
  .bone-article .bone-article__body p,
  .bone-article .bone-article__body li,
  .bone-article .bone-article__body dl,
  .bone-article .bone-article__body table,
  .bone-article .bone-article__body blockquote {
    font-size: 16px;
    line-height: 1.875;
  }
  .bone-article .bone-article__body .gallery {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
  }
  .bone-article .bone-article__body .gallery .gallery-item {
    margin: 5px;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-1 {
    width: 100%/1;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-2 {
    width: 100%/2;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-3 {
    width: 100%/3;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-4 {
    width: 100%/4;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-5 {
    width: 100%/5;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-6 {
    width: 100%/6;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-7 {
    width: 100%/7;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-8 {
    width: 100%/8;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-9 {
    width: 100%/9;
  }
  .bone-article .bone-article__body .gallery .gallery-columns-10 {
    width: 100%/10;
  }
  .bone-article .bone-article__body h3 {
    font-size: 20px;
  }
  .bone-article .sharedaddy {
    margin-top: 64px;
    text-align: left;
  }
}
/*--------------------------------------------

  Icon

---------------------------------------------*/
.bone-icon {
  display: inline-block;
}
.bone-icon + .bone-icon {
  margin-left: 10px;
}
.bone-icon:before {
  width: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #eee;
  color: #666;
}
/*--------------------------------------------

  Bread

---------------------------------------------*/
.bone-bread {
  list-style: none;
  padding: 16px;
}
.bone-bread .bone-bread__item {
  display: inline;
  line-height: 24px;
}
.bone-bread .bone-bread__item + .bone-bread__item:before {
  content: 'keyboard_arrow_right';
  font-family: 'Material Icons';
  text-rendering: optimizelegibility;
  vertical-align: bottom;
  line-height: 24px;
  margin: 0 5px;
}
.bone-bread a,
.bone-bread i {
  line-height: 24px;
}
.bone-bread a {
  text-decoration: none;
}
.bone-bread a:hover {
  text-decoration: underline;
}
.bone-bread i {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .bone-bread {
    padding: 16px 25px;
  }
  .bone-bread__item:first-child {
    margin-right: -5px;
  }
}
.bone-hero {
  height: 200px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center, center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
@media (max-width: 479px) {
  .bone-hero {
    margin-bottom: 16px;
  }
}
@media (min-width: 840px) {
  .bone-hero {
    height: 600px;
  }
}
.bone-hero .bone-container {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.bone-hero .bone-hero__title,
.bone-hero .bone-hero__sub-title {
  margin: 0;
}
.bone-hero .bone-hero__title {
  font-size: 30px;
  font-weight: bold;
}
.bone-hero .bone-hero__sub-title {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}
/*--------------------------------------------

  List Card

---------------------------------------------*/
.bone-card {
  max-width: 100%;
  width: 100%;
  min-height: 0;
  z-index: auto;
}
.bone-card--expand {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  color: inherit;
  text-decoration: none;
  -webkit-transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
  -moz-transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
  -o-transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
  -ms-transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
  transition: 0.2s cubic-bezier(0.4, 0, 1, 1);
  -webkit-transition-property: box-shadow z-index;
  -moz-transition-property: box-shadow z-index;
  -o-transition-property: box-shadow z-index;
  -ms-transition-property: box-shadow z-index;
  transition-property: box-shadow z-index;
  position: relative;
}
.bone-card--expand:hover {
  -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2);
  z-index: 10;
}
.sticky .bone-card--expand {
  position: relative;
}
.sticky .bone-card--expand:after {
  content: 'stars';
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  display: block;
  font-size: 30px;
  line-height: 1;
  font-family: 'Material Icons';
}
.bone-card--expand .bone-card__thumbnail {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 200px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.bone-card--expand .bone-card__title {
  color: #fff;
  font-size: 16px;
  word-wrap: break-word;
  padding: 16px;
  line-height: 1.5;
}
.bone-card--expand .mdl-card__supporting-text p {
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 10px;
}
.bone-card--expand .time {
  display: block;
  font-weight: 200;
}
/*--------------------------------------------

  Comment

---------------------------------------------*/
.bone-comment {
  width: 100%;
  padding: 32px;
  margin-bottom: 16px;
}
.bone-comment form {
  zoom: 1;
}
.bone-comment form:before,
.bone-comment form:after {
  content: "";
  display: table;
}
.bone-comment form:after {
  clear: both;
}
.bone-comment .avatar {
  float: left;
}
.bone-comment .mdl-textfield {
  margin-right: 16px;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 55px);
}
.bone-comment .comment-metadata {
  zoom: 1;
  margin-bottom: 16px;
}
.bone-comment .comment-metadata:before,
.bone-comment .comment-metadata:after {
  content: "";
  display: table;
}
.bone-comment .comment-metadata:after {
  clear: both;
}
.bone-comment .comment-metadata a {
  color: inherit;
  text-decoration: none;
  color: #616161;
  font-weight: 400;
}
.bone-comment .says,
.bone-comment .form-submit {
  display: none;
}
.bone-comment .comment-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.bone-comment .comment-list li {
  margin: 32px 0;
}
.bone-comment .comment-list li .children {
  padding-left: 48px;
  list-style: none;
}
.bone-comment .bone-comment__pager a,
.bone-comment .bone-comment__pager span {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
}
.bone-comment .bone-comment__pager a:hover {
  text-decoration: underline;
}
@media (min-width: 480px) {
  .bone-comment {
    margin-bottom: 0;
  }
}
/*--------------------------------------------

  Pagination

---------------------------------------------*/
.infinite-scroll .bone-pager {
  display: none;
}
.bone-pager .bone-pager__body {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 16px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.bone-pager .bone-pager__body .bone-pager__item {
  display: block;
  text-decoration: none;
  vertical-align: bottom;
  line-height: 32px;
}
.bone-pager .bone-pager__body .bone-pager__item.bone-pager__item--next:first-child {
  text-align: right;
  width: 100%;
}
.bone-pager .bone-pager__body .bone-pager__item.bone-pager__item--next .mdl-button {
  margin-left: 16px;
}
.bone-pager .bone-pager__body .bone-pager__item.bone-pager__item--prev .mdl-button {
  margin-right: 16px;
}
.bone-pager .bone-pager__body .bone-pager__item:not(:hover) {
  color: inherit;
}
span.infinite-loader {
  width: 100%;
  text-align: center;
  text-indent: 0;
}
span.infinite-loader div.spinner {
  text-indent: 0;
  display: inline-block;
  width: 28px;
  height: 28px;
}
/*--------------------------------------------

  Footer

---------------------------------------------*/
.bone-logo {
  margin-bottom: 0;
}
/*--------------------------------------------

  Widget

---------------------------------------------*/
.bone-widget {
  width: 100%;
}
.bone-widget .bone-widget__item.bone-card {
  padding: 8px;
}
.bone-widget .bone-widget__item + .bone-widget__item {
  margin-top: 16px;
}
.bone-widget .bone-widget__title {
  zoom: 1;
  margin: -8px -8px 8px;
  font-size: 1em;
  line-height: 32px;
  padding: 8px;
  border-bottom: 1px solid #eee;
  position: relative;
}
.bone-widget .bone-widget__title:before,
.bone-widget .bone-widget__title:after {
  content: "";
  display: table;
}
.bone-widget .bone-widget__title:after {
  clear: both;
}
.bone-widget .current_page_item a {
  color: inherit;
  text-decoration: none;
}
.bone-widget .tagcloud a:not(:last-of-type) {
  margin-right: 10px;
}
@media (min-width: 480px) {
  .bone-grid-space-small .bone-widget .bone-widget__item+.bone-widget__item {
    margin-top: 16px;
  }
  .bone-grid-space-midium .bone-widget .bone-widget__item+.bone-widget__item {
    margin-top: 32px;
  }
  .bone-grid-space-large .bone-widget .bone-widget__item+.bone-widget__item {
    margin-top: 64px;
  }
  .bone-author {
    zoom: 1;
  }
  .bone-author:before,
  .bone-author:after {
    content: "";
    display: table;
  }
  .bone-author:after {
    clear: both;
  }
  .bone-author .bone-author__image {
    float: left;
    margin-right: 8px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
}