/* --------------- comments -------------- */
#comments {
  width: 100%;
  #respond {
    h3#reply-title {
      font-weight: normal;
      font-size: 32px;
    }
    input[type=text] {
      max-width: 550px;
    }
    input, textarea {
      background: darken(@background,5%);
      border: solid 1px darken(@background,20%);
      color: @content;
      outline: none;
    }
    .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {
      position: relative;
      input, textarea {
        padding: 4px 5px 5px 10px;
        border-radius: 0;
      }
      label {
        background: none;
        color: @content;
        font-weight: 400;
        text-transform: uppercase;
        padding: 5px 10px;
        margin-right: -5px;
        min-width: 70px;
      }
    }
    .comment-form-comment {
      label {
        margin-bottom: 0px;
      }
    }
    .form-submit {
      input[type=submit] {
        box-shadow: none;
        border-radius: 0px;
        border: 0px;
        text-shadow: none;
        padding: 10px;
        background: @content;
        font-weight: 400;
        color: @onaccent;
        margin-bottom: 60px;
      }
    }
    .comment-notes, .logged-in-as {
      color: @content;
    }
  }
}

#comments {
    margin-top: 55px;
    h2.comments-title {
      font-size: x-large;

    }
    ol.comment-list {
      list-style: none;
      margin-left: 0px;
    }
    li.comment {
      padding: 10px;
      margin-top: 15px;
      list-style: none;
      overflow: auto;
      span.says {
	      display: none;
      }
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      .comment-container {
	      display: flex;
	      display: -webkit-flex;
	      figure {
		      img {
			      border-radius: 50%;
		      }
	      }
	      .comment-data {
		      margin-left: 15px;
		      .comment-meta {
			      display: flex;
			      display: -webkit-flex;
			      align-items: baseline;
			      h2.comment-author {
				      margin: 0px;
				      font-size: 20px;
				      line-height: 1em;
				      a {
					      color: #333;
				      }
			      }
			      span {
				      font-size: 13px;
				      font-style: italic;
				      color: #aaa;
				      margin-left: 10px;
			      }
			      p.comment-meta-item {
				      margin: 0px;
				      margin-left: 10px;
				      color: @s-accent;
			      }
		      }
		      .comment-content {
			      margin-top: 5px;
			      .comment-reply-link {
				      text-transform: uppercase;
				      color: @content;
				      font-weight: 700;
			      }
		      }
	      }
      }
    }
    li.trackback {
      background: darken(@background,10%);
      padding: 10px;
      margin-top: 15px;
      margin-bottom: 15px;
      border: solid 1px #eee;
      font-weight: bold;
      a { font-weight: normal; }
    }
    .vcard img {
      border: solid 4px @background;
      border-radius: 5px;
      margin: 0 10px 10px 0;
    }
    .form-allowed-tags {
      display: none;
    }
  }
  @media screen and (max-width:480px) {
    li.comment {
      margin-left: -5%;
    }
  }