/* ----------------------------------------------------
  BLOG STYLES
------------------------------------------------------- */
.blog-item {
  margin-bottom:50px;
  text-align:left;
  img {
    width:100%;
    height:auto;
  }
  .blog-title {
    letter-spacing: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    margin: 15px 0 5px;
    a {
      color: #141414;
    }
  }
  .blog-meta {
    margin-bottom: 27px;
    .author {
      color: #141414;
    }
    ul {
      padding-left: 0;
      padding-right: 57px;
      margin: 15px 0 0;
      border-top: 1px solid #ececec;
      border-bottom: 1px solid #ececec;
      position: relative;
      width: 100%;
      li {
        display: inline-block;
        font-size: 12px;
        margin-right: 20px;
        line-height: 35px;
        color: #6f6f6f;
        i {
          padding-right: 10px;
          font-size: 16px;
        }
        a {
          color: #6f6f6f;
          &:hover {
            color: @base_color;
          }
        }
      }
    }
    .blog-date {
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 0;
      color: #fff;
      background: @base_color;
      width: 58px;
      height: 52px;
      text-transform: uppercase;
      line-height: normal;
      text-align: center;
      font-style: italic;
      font-size: 16px;
      .transition(all,420ms,ease);
      padding-top: 7px;
      span {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .blog-desc {
    font-size: 13px;
    line-height: 24px;
    color: #6f6f6f;
  }
  .btn-readmore {
    margin-top:30px;
  }
  .sharethis-buttons {
    text-align: right;
    margin-top:20px;
  }
}

/* ----------------------------------------------------
  BLOG STYLES HOME PAGE
------------------------------------------------------- */
.blog-style-01 {
  .blog-item {
    background-color: #eaeaea;
    overflow: hidden;
    margin-bottom:0;
    /*display: flex;*/
    .blog-image {
      position: absolute;
      height: 100%;
      width: 50%;
      float:left;
      &:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border: 25px solid transparent;
        border-right-color: #eaeaea;
        top: 50%;
        right: 0;
        .transform-rotateY(50%);
        .translateY(-50%);
      }
    }
    .blog-info {
      width: 50%;
      float: left;
      padding: 10px 20px 0;
      .blog-category {
        font-size: 14px;
        font-style: italic;
        margin-bottom: 5px;
        a {
          color: #333333;
          &:hover {
            color: @base_color;
          }
        }
      }
      .blog-title {
        line-height: normal;
        margin: 0 0 10px;
        padding: 0;
        a {
          font-size: 24px;
          font-weight: 400;
          color: #141414;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          letter-spacing: 0;
        }
      }
      .blog-desc {
        font-size: 14px;
        color: #6f6f6f;
        max-height: 89px;
        overflow: hidden;
      }
      .link-readmore {
        color: #333333;
        &:hover {
          color: @base_color;
        }
        i {
          margin-left:10px;
        }
      }
    }
  }
  .dexp-grid-item:nth-child(1n),.dexp-grid-item:nth-child(2n){
    .node-article.view-mode-teaser_alt_2 .blog-info {
      float: right;
    }
  }
  .dexp-grid-item:nth-child(3n),.dexp-grid-item:nth-child(4n){
    .node-article.view-mode-teaser_alt_2 .blog-image {
      right: 0;
    }
    .node-article.view-mode-teaser_alt_2 .blog-info {
      float: left;
    }
  }
  .dexp-grid-item:nth-child(3n), .dexp-grid-item:nth-child(4n) {
    .node-article.view-mode-teaser_alt_2 .blog-image {
      float:right;
      &:after {
        border-right-color: transparent;
        border-left-color: #eaeaea;
        top: 50%;
        right: auto;
        left: 0;
      }
    }
  }
}

.blog-style-03 {
  .blog-date {
    position: absolute;
    left: 0;
    margin-top:-90px;
    color: #fff;
    background-color: rgb(red(@base_color), green(@base_color), blue(@base_color), 1.7);
    width: 58px;
    height: 52px;
    padding-top: 7px;
    font-size: 16px;
    font-style: italic;
    text-transform: uppercase;
    line-height: normal;
    .transition(all,420ms,ease);
    span {
      display: inline-block;
      text-align: center;
      width: 100%;
    }
  }
  .blog-meta {
    ul {
      padding-right: 0;
      li.more {
        float:right;
        margin-right:0;
        a.link-more {
          margin-right:0;
          i {
            font-size:14px;
            margin-left:10px;
            padding-right:0;
          }
        }
      }
    }
  }
}

.blog-style-06 {
  .blog-media {
    width:33%;
    float:left;
  }
  .blog-detail {
    padding-left: ~"calc(33% + 30px)";
  }
}
.blog-style-06, .blog-style-07 {
  .blog-item {
    .blog-meta {
      display:none;
    }
    .blog-title {
      margin-bottom: 15px;
    }
    .btn-readmore {
      background-color: @base_color;
      border-color: @base_color;
      font-size: 12px;
      letter-spacing: 0.1em;
      font-weight: bold;
      padding: 8px 20px;
      color: #FFF;
      &:hover {
        color: @base_color;
        background-color: #fff;
      }
    }
  }
}
.next-prev {
  .flippy {
    margin-bottom:50px !important;
    a {
      display: unset;
      font-size: unset;
      width: unset;
      height: unset;
      line-height: unset;
      text-align: unset;
      border: unset;
      color: #141414;
      text-transform: uppercase;
      font-size: 16px;
      font-family: 'Crimson Text', serif;
      i {
        font-size: 14px;
        line-height: unset;
      }
    }
    .next, .prev {
      .fa {
        &:before {
          content: unset;
        }
      }
     .fa-long-arrow-right{
       &:before {
          content: "\f178" !important;
       }
      }
      .fa-long-arrow-left{
       &:before {
          content: "\f177" !important;
       }
      }
    }
  }
  margin-top: 50px;
  padding: 10px 0;
  border-top: 1px solid #141414;
  border-bottom: 1px solid #141414;
}
/*#################################################################
	BLOG CATEGORY
################################################################# */
.view-blog-categories {
  ul {
    margin: 20px 0;
    li {
      margin-bottom:15px;
      margin-left: 0px;
      overflow:hidden;
      &:before {
        content: "\f054";
        font-family: FontAwesome;
        margin-right: 10px;
        font-size:10px;
      }
      &:hover {
        color: @base_color;
        a {
          color: @base_color;
          padding-left:8px;
          .transition(all,0.3s,ease-in-out);
        }
        .count {
          background: @base_color;
          color: #FFF;
        }
      }
      .count {
        float:right;
        display: inline-block;
        text-align: center;
        background:#6f6f6f;
        border-radius:3px;
        line-height:25px;
        width:25px;
        height:25px;
        color: #FFF;
      }
     a {
        color: #6f6f6f;
        text-transform: capitalize;
      }
    }
  }
}
.recent-posts {
  ul {
    padding:0;
    list-style:none;
    li {
      margin:0;
      display: inline-block!important;
      position: relative;
      width:100%;
      margin: 4px 0;
      img {
        float:left;
        width: 81px;
        height:81px;
        margin: 11px 13px 15px 0;
     }
      .metabox {
        font-style: italic;
      }
      h3 {
        line-height:normal;
        a {
          text-transform: capitalize;
          padding-bottom: 0!important;
          font-size: 14px;
          color: #6f6f6f;
        }
      }
    }
  }
}
.archives {
  ul {
    li {
       list-style:none;
       margin:0 0 15px 0;
       padding:0;
       &:before {
        content: "\f054";
        font-family: FontAwesome;
        margin-right: 10px;
        font-size:10px;
      }
      &:hover {
        color: @base_color;
        a {
          color: @base_color;
          padding-left:8px;
          .transition(all,0.3s,ease-in-out);
        }
      }
      a {
        text-transform: capitalize;
        color: #6f6f6f;
      }
    }
  }
}
/*#################################################################
	BLOG TAGS SIDEBAR
################################################################# */
.tags {
   ul {
      padding:0;
      li {
        margin: 0 6px 10px 0;
        display:inline-block;
        border: 1px solid #ececec;
        padding:5px 10px;
        a {
          display: inline-block;
          font-size: 11px ;
          line-height: 16px;
          color: #778;
          letter-spacing: 0.5px;
          .transition(all,.4s,linear);
          &.big { 
            font-size:13px; 
          }
          &:hover {
            .transition(all,.3s,ease-out);
            color:#445;
            text-shadow:2px 2px 4px rgba(0,0,0,0.4);
          }
        }
      }
   }
}
/* ----------------------------------------------------
  BLOG COMMENTS
------------------------------------------------------- */

.comments-single {
  margin-top:80px;
  .section-title {
    h3 {
      margin: 0 0 65px;
      padding-bottom: 12px;
      color: #141414;
      position: relative;
      font-size: 24px;
      font-style: italic;
      font-weight: 700;
      border-bottom: 2px solid #141414;
      line-height: normal;
      letter-spacing: 0;
      &:before {
        content: '';
        width: 11px;
        height: 11px;
        display: inline-block;
        background-color: #fcc403;
        margin-right: 20px;
        .transform-rotate(45deg);
      }
    }
  }
}

.comment-form-wrapper {
  margin-top:100px;
}
.comment-form {
  label {
    display:block;
  }
}
.comment-row {
   margin-top: 75px;
   &:first-child {
     margin-top:0;
   }
  .comment-text {
    overflow: hidden;
  }
  .comment-avatar {
    float:left;
    img {
      .border-radius(50%, 50%, 50%, 50%);
      width:75px;
      margin-right:15px;
    }
  }
  .comment-content {
    margin-left: 100px;
    border: 1px solid #ececec;
    padding: 15px 40px 25px;
    color: #272727;
  }
  .comment-heading {
    font-size: 12px;
    line-height: 60px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:0;
    a {
      color: @base_color;
      &:hover {
        color: #282828;
      }
    }
  }
  .reply {
    text-align: right;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    a {
      color: #272727;
    }
  }
}