/**
* Comments
* ----------------------------------------------------------------------------
*/
.gf-comments-area {
  .comments-list {
    margin-top: 90px;
  }


  .comment-body {
    .avatar {
      .border-radius(50%);
      width: 80px;
      height: 80px;
      float: left;
      + .comment-text {
        padding-left: 110px;
      }
    }
  }

  .comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
    li.comment,
    li.pingback {
      margin-bottom: 35px;
      padding-bottom: 35px;
      border-bottom: 2px solid @border_color;
    }
    .children {
      margin: 35px 0 0 0;
      padding-top: 35px;
      border-top: 2px solid @border_color;
      padding-left: 110px;
      list-style: none;
      li.comment:last-child,
      li.pingback:last-child{
        margin-bottom: 0;
        padding: 0;
        border-bottom: none;
      }

    }
  }

  .children .comment-body .avatar {
    width: 50px;
    height: 50px;
    + .comment-text {
      padding-left: 80px;
    }
  }

  .children .children {
    padding-left: 80px;
  }

  .comment-meta-top {
    margin-bottom: 12px;
    .author-name {
      margin: 0;
      font-family: @primary_font;
      font-size: 15px;
      font-weight: bold;
      font-style: normal;
      font-stretch: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: uppercase;
    }

    .comment-meta-author {
      margin-right: auto;
    }

    .comment-meta-date {
      font-size: 15px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: 1.4;
      letter-spacing: normal;
    }
  }

  .comment-meta-footer {
    margin-top: 25px;
    a {
      color: inherit;
      margin-right: 15px;
      &:last-child {
        margin-right: 0;
      }
      i {
        margin-right: 5px;
      }
      &:hover {
        text-decoration: none;
      }
    }
  }


  .comment-respond {
    margin-top: 90px;
  }

  .comment-form {
    &:after {
      content: '';
      clear: both;
      display: block;
    }
    a {
      color: inherit;
      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }

  .comment-form-comment,
  .comment-form-author,
  .comment-form-email {
    float: left;
    width: 100%;
    margin-bottom: 30px;
    font-size: 0;
    label {
      display: none;
    }
    textarea,
    input {
      width: 100%;
    }
  }

  textarea {
    height: 170px;
  }

  .comment-form-author,
  .comment-form-email {
    width: 50%;

  }
  .comment-form-email {
    padding-left: 10px;
  }

  .comment-form-author {
    padding-right: 10px;
  }

  .form-submit {
    float: left;
    width: 100%;
    margin-bottom: 0;
    margin-top: 10px;
  }
}

@media (max-width: 1199px) {
  .gf-comments-area {
    .comment-body {
      .avatar {
        width: 60px;
        height: 60px;
        + .comment-text {
          padding-left: 90px;
        }
      }
    }

    .comment-list {
      li.comment {
        margin-bottom: 30px;
        padding-bottom: 30px;
      }
      .children {
        margin: 30px 0 0 0;
        padding-top: 30px;
        padding-left: 90px;
        li.comment:last-child {
          margin-bottom: 0;
          padding: 0;
        }
      }
    }

    .children .comment-body .avatar {
      width: 40px;
      height: 40px;
      + .comment-text {
        padding-left: 60px;
      }
    }

    .children .children {
      padding-left: 60px;
    }
  }
}

@media (max-width: 767px) {
  .gf-comments-area {
    .comment-body {
      .avatar {
        width: 50px;
        height: 50px;
        + .comment-text {
          padding-left: 70px;
        }
      }
    }

    .comment-list {
      .children {
        padding-left: 2em;
      }
    }

    .children .comment-body .avatar {
      width: 30px;
      height: 30px;
      + .comment-text {
        padding-left: 45px;
      }
    }
  }
}