#blog-index {
  background: #ebebeb; }
  #blog-index .featured h1 {
    text-shadow: 0 1px 1px #fff;
    margin-top: 5px; }
  #blog-index .featured h2 {
    font-size: 15px;
    text-shadow: 0 1px 1px #fff; }
  #blog-index .featured h4 {
    font-size: 16px;
    color: #999;
    text-shadow: 0 1px 1px #fff;
    font-style: italic; }
  #blog-index .featured .feature-btn {
    background: transparent;
    border: 1px solid #222;
    padding: 5px 30px;
    color: #222;
    font-size: 16px;
    transition: all 0.2s ease; }
    #blog-index .featured .feature-btn:hover {
      background: #111;
      color: #eee; }
  #blog-index .blog-category {
    color: #999;
    padding: 2px 6px;
    border-radius: 3px;
    font-style: italic;
    margin-bottom: 6px;
    font-size: 14px;
    transition: all 0.2s ease; }
    #blog-index .blog-category:hover {
      color: #333; }
  #blog-index .items {
    padding-top: 20px; }
    #blog-index .items .item {
      position: relative;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 0 1px 1px #ddd;
      background: #f5f5f5; }
      #blog-index .items .item:hover {
        background: #fff; }
        #blog-index .items .item:hover .read-hover {
          background: rgba(0, 0, 0, 0.8); }
          #blog-index .items .item:hover .read-hover .read-btn {
            opacity: 1; }
      #blog-index .items .item .info {
        height: 170px; }
      #blog-index .items .item .category {
        color: #999;
        text-shadow: 0 1px 1px #fff;
        margin-top: 15px;
        font-style: italic; }
      #blog-index .items .item .title {
        color: #222;
        font-size: 16px;
        padding: 10px 0; }
      #blog-index .items .item .excerpt {
        color: #999;
        font-size: 13px;
        overflow: hidden;
        -webkit-line-clamp: 6;
        display: -webkit-box;
        -webkit-box-orient: vertical; }
      #blog-index .items .item .read-hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        text-align: center;
        transition: all 0.2s ease; }
        #blog-index .items .item .read-hover .read-btn {
          border: 1px solid #eee;
          padding: 5px 30px;
          color: #eee;
          font-size: 16px;
          position: absolute;
          top: 50%;
          margin: -20px;
          left: 35%;
          right: 35%;
          opacity: 0;
          transition: all 0.2s ease; }

@media (max-width: 768px) {
  #blog {
    background: #ebebeb; }
    #blog .items .item .info {
      height: auto; } }
#blog-item {
  background: #fff;
  font-size: 1.1em;
  line-height: 1.5em; }
  #blog-item .box {
    background: #f5f5f5; }
  #blog-item .blog-top {
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px 0 #000; }
    #blog-item .blog-top .bg {
      filter: blur(5px);
      position: absolute;
      width: 120%;
      bottom: -100px;
      left: -20px; }
    #blog-item .blog-top .cover {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)); }
    #blog-item .blog-top .main {
      margin: -20px 0 -50px 0;
      box-shadow: 0 0 1px 0 #000; }
  #blog-item h1 {
    font-weight: bold;
    margin-bottom: 1em;
    font-size: 2em;
    text-align: center; }
  #blog-item .btn-like[state="like"] {
    color: #999; }
  #blog-item .btn-like[state="liked"] {
    color: #d9534f; }
  #blog-item .btn-like:hover {
    color: #333; }
  #blog-item .category {
    font-size: 16px;
    color: #999;
    text-shadow: 0 1px 1px #fff;
    font-style: italic; }
  #blog-item .blog-body {
    line-height: 1.5em; }
    #blog-item .blog-body em {
      color: #999;
      line-height: 1.1em; }
    #blog-item .blog-body h2 {
      margin-bottom: 1em;
      margin-top: 1.7em;
      font-weight: bold; }
    #blog-item .blog-body h3 {
      font-weight: bold; }
    #blog-item .blog-body p {
      margin: 0 0 1.4em;
      line-height: 1.5em; }
    #blog-item .blog-body a {
      text-decoration: underline; }
    #blog-item .blog-body blockquote {
      padding: 10px;
      margin-top: 15px;
      background-color: #f3f3f3;
      font-size: inherit; }
    #blog-item .blog-body div.youtube-short {
      text-align: center;
      margin-bottom: 15px; }
    @media (min-width: 480px) {
      #blog-item .blog-body img.img-responsive, #blog-item .blog-body div.youtube-embed, #blog-item .blog-body div.spotify-embed, #blog-item .blog-body div.soundcloud-embed {
        max-width: 80%;
        max-height: 70vh;
        width: auto;
        height: auto;
        margin: 0 auto;
        display: block; }
      #blog-item .blog-body .media-item {
        max-width: 80%;
        max-height: 70vh;
        margin: 0 auto; } }
  #blog-item .related {
    padding: 10px 0; }
    #blog-item .related .title {
      padding-top: 4px;
      color: #999; }
  #blog-item .media-item {
    height: 300px; }
    #blog-item .media-item .media-description {
      padding-top: 140px; }
  @media (max-width: 768px) {
    #blog-item .top .main {
      margin: -10px 0; }
    #blog-item .media-item {
      height: 250px; }
      #blog-item .media-item .media-description {
        padding-top: 100px; } }

.vguitar-series {
  background: #fff;
  font-size: 1.1em;
  line-height: 1.5em; }
  .vguitar-series .box {
    background: #f5f5f5; }
  .vguitar-series .blog-top {
    padding: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px 0 #000; }
    .vguitar-series .blog-top .bg {
      filter: blur(5px);
      position: absolute;
      width: 120%;
      bottom: -100px;
      left: -20px; }
    .vguitar-series .blog-top .cover {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)); }
    .vguitar-series .blog-top .main {
      margin: -20px 0 -50px 0;
      box-shadow: 0 0 1px 0 #000; }
  .vguitar-series h1 {
    font-weight: bold;
    margin-bottom: 1em;
    font-size: 2em;
    text-align: center; }
  .vguitar-series .btn-like[state="like"] {
    color: #999; }
  .vguitar-series .btn-like[state="liked"] {
    color: #d9534f; }
  .vguitar-series .btn-like:hover {
    color: #333; }
  .vguitar-series .category {
    font-size: 16px;
    color: #999;
    text-shadow: 0 1px 1px #fff;
    font-style: italic; }
  .vguitar-series .blog-body {
    font-size: 1.1em;
    line-height: 1.5em; }
    .vguitar-series .blog-body em {
      color: #999;
      line-height: 1.1em; }
    .vguitar-series .blog-body h2 {
      margin-bottom: 1em;
      margin-top: 1.7em;
      font-weight: bold; }
    .vguitar-series .blog-body h3 {
      font-weight: bold; }
    .vguitar-series .blog-body p {
      margin: 0 0 1.4em;
      line-height: 1.7em; }
    .vguitar-series .blog-body a {
      text-decoration: underline; }
    .vguitar-series .blog-body blockquote {
      padding: 10px;
      margin-top: 15px;
      background-color: #f3f3f3;
      font-size: inherit; }
    .vguitar-series .blog-body div.youtube-short {
      text-align: center;
      margin-bottom: 15px; }
    @media (min-width: 480px) {
      .vguitar-series .blog-body img.img-responsive, .vguitar-series .blog-body div.youtube-embed, .vguitar-series .blog-body div.spotify-embed, .vguitar-series .blog-body div.soundcloud-embed {
        max-width: 80%;
        max-height: 70vh;
        width: auto;
        height: auto;
        margin: 0 auto;
        display: block; }
      .vguitar-series .blog-body .media-item {
        max-width: 80%;
        max-height: 70vh;
        margin: 0 auto; } }
  .vguitar-series .related {
    padding: 10px 0; }
    .vguitar-series .related .title {
      padding-top: 4px;
      color: #999; }
  .vguitar-series .media-item {
    height: 300px; }
    .vguitar-series .media-item .media-description {
      padding-top: 140px; }
  @media (max-width: 768px) {
    .vguitar-series .top .main {
      margin: -10px 0; }
    .vguitar-series .media-item {
      height: 250px; }
      .vguitar-series .media-item .media-description {
        padding-top: 100px; } }

/*# sourceMappingURL=blog.css.map */