.comment-metadata,
.comments-title,
.comment-author .fn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.comments-title,
.comment-author .fn {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.comments-title {
  font-size: 1.6875em;
}

.comment-author .fn {
  font-size: 1.125em;
}

.comment-content {
  font-size: 0.88889em;
}

.comment-metadata,
.comment-notes {
  font-size: 0.71111em;
}

.comments-title {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}

/* Clearings */
.comment-content:before,
.comment-content:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.comment-content:after {
  clear: both;
}

.comment-content a {
  word-wrap: break-word;
}

.comments-area {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

@media only screen and (min-width: 768px) {
  .comments-area {
    max-width: calc(8 * (100vw / 12) - 28px);
  }
}

@media only screen and (min-width: 1168px) {
  .comments-area {
    max-width: calc(6 * (100vw / 12) - 28px);
  }
}

.comments-area > * {
  margin-top: calc(2 * 1rem);
  margin-bottom: calc(2 * 1rem);
}

@media only screen and (min-width: 768px) {
  .comments-area > * {
    margin-top: calc(3 * 1rem);
    margin-bottom: calc(3 * 1rem);
  }
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list .children {
  margin: 0;
  padding: 0 0 0 1rem;
}

.comment-list > .comment:first-child {
  margin-top: 0;
}

.comment {
  list-style: none;
  position: relative;
}

@media only screen and (min-width: 768px) {
  .comment {
    padding-left: calc(.5 * (1rem + calc(100vw / 12 )));
  }
  .comment.depth-1,
  .comment .children {
    padding-left: 0;
  }
  .comment.depth-1 {
    margin-left: calc(3.25 * 1rem);
  }
}

.comment .comment-body {
  margin: calc(2 * 1rem) 0 0;
}

.comment .comment-meta {
  position: relative;
}

.comment .comment-content blockquote {
  background: #e9ecee;
  border: 1px solid #c4bebe;
  border-left: 2px solid #4a4a4a;
  font-size: 80%;
  padding:5px 10px;
  margin:0 0 10px 0;
}

.avatar {
  border-radius: 100%;
  display: block;
  height: calc(2.25 * 1rem);
  min-height: inherit;
  width: calc(2.25 * 1rem);
}

.comment .comment-author .avatar {
  float: left;
  margin-right: 1rem;
  position: relative;
}

@media only screen and (min-width: 768px) {
  .comment .comment-author .avatar {
    float: inherit;
    margin-right: inherit;
    position: absolute;
    top: 0;
    right: calc(100% + 1rem);
  }
}

.comment .comment-author .fn {
  position: relative;
  display: block;
}

.comment .comment-author .fn a {
  color: inherit;
}

.comment .comment-author .fn a:hover {
  color: #005177;
}

.comment .comment-metadata > a {
  display: inline;
  font-weight: 500;
  color: #767676;
  vertical-align: baseline;
}

.comment .comment-metadata > a time {
  vertical-align: baseline;
}

.comment .comment-metadata > a:hover {
  color: #005177;
  text-decoration: none;
}

.comment .comment-metadata > * {
  display: inline-block;
}

.comment .comment-content {
  margin: 1rem 0;
}

@media only screen and (min-width: 1168px) {
  .comment .comment-content {
    padding-right: 1rem;
  }
}

.comment .comment-content > *:first-child {
  margin-top: 0;
}

.comment .comment-content a {
  text-decoration: underline;
}

.comment .comment-content a:hover {
  text-decoration: none;
}