@charset "UTF-8";
/*---------------------
   Lista de comentarios
   ----------------------- */
.comments-info-title {
  margin-top: 1rem;
  margin-left: 1rem;
}

.comments-container {
  margin: 0px 2rem 15px;
  width: 100%;
}
.comments-container > ul {
  list-style: none;
}
.comments-container > ul > li > ul {
  list-style: none;
}

.comments-list {
  margin-top: 30px;
  position: relative;
}

.comments-main {
  margin-left: 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: start;
      align-items: flex-start;
}

.comment-main-level {
  margin-left: -30px;
}

/**
 * Lineas / Detalles
   -----------------------*/
.comments-list:before {
  content: '';
  width: 2px;
  height: 100%;
  background: #c7cacb;
  position: absolute;
  /* left: 2%; /\* 100/2 centra la línea con la imagen avatar *\/ */
  left: 2px;
  top: 0;
}
.comments-list:after {
  content: '';
  width: 7px;
  height: 7px;
  border: 3px solid #dee1e3;
  border-radius: 50%;
}

.reply-list {
  margin-left: -15px;
}
.reply-list:before, .reply-list:after {
  display: none;
}
.reply-list li:before {
  content: '';
  width: 60px;
  height: 2px;
  background: #c7cacb;
  position: absolute;
  top: 25px;
  left: -55px;
}

/* End Líneas
   ------------------------*/
.comments-list li {
  margin-bottom: 15px;
  position: relative;
}
.comments-list li:after {
  content: '';
  display: block;
  clear: both;
  height: 0px;
  width: 0px;
}

.reply-list {
  padding-left: 88px;
  clear: both;
  margin-top: 15px;
}

/*---------------------
   Avatar
   ----------------------- */
.comments-list .comment-avatar {
  width: 65px;
  height: 65px;
  position: relative;
  z-index: 2;
  border: 3px solid #FFF;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.comments-list .comment-avatar img {
  width: 100%;
  height: 100%;
}

.reply-list .comment-avatar {
  width: 50px;
  height: 50px;
}

.comment-main-level:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
}

/**
 * Caja del Comentario
   ---------------------------*/
.comments-list .comment-box {
  width: 80%;
  position: relative;
  margin-left: 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.comments-list .comment-box:before, .comments-list .comment-box:after {
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  display: block;
  border-width: 10px 12px 10px 0;
  border-style: solid;
  border-color: transparent #222;
  top: 8px;
  left: -11px;
}
.comments-list .comment-box:before {
  border-width: 11px 13px 11px 0;
  border-color: transparent rgba(0, 0, 0, 0.05);
  left: -12px;
}

.reply-list .comment-box {
  width: 75%;
}

.comment-box .comment-head {
  background: #222;
  padding: 10px 12px;
  border-bottom: 1px solid #ccc;
  /* color de flecha */
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
.comment-box .comment-head i {
  float: right;
  margin-left: 14px;
  position: relative;
  color: #A6A6A6;
  cursor: pointer;
  transition: color 0.3s ease;
}
.comment-box .comment-head i:hover {
  color: red;
}
.comment-box .comment-name {
  color: #283035;
  font-size: 14px;
  font-weight: 700;
  float: left;
  margin-right: 10px;
}
.comment-box .comment-name a {
  color: #007fdb;
}
.comment-box .comment-head span {
  float: left;
  color: #999;
  font-size: 13px;
  position: relative;
}
.comment-box .comment-content {
  background: #333;
  padding: 12px;
  font-size: 15px;
  color: #fff;
  border-radius: 0 0 4px 4px;
}
.comment-box .comment-name.by-author {
  color: #00aee6;
}
.comment-box .comment-name.by-author a {
  color: #00aee6;
}
.comment-box .comment-name.by-author:after {
  content: 'autor';
  background: #03658c;
  color: #FFF;
  font-size: 12px;
  padding: 3px 5px;
  font-weight: 700;
  margin-left: 10px;
  border-radius: 3px;
}

/** =====================
 * Responsive
   ========================*/
@media only screen and (max-width: 766px) {
  .comments-container {
    width: 480px;
  }

  .comments-list .comment-box {
    width: 390px;
  }

  .reply-list .comment-box {
    width: 320px;
  }
}
@media only screen and (max-width: 480px) {
  .comments-container {
    width: 480px;
  }

  /* Líneas */
  .comments-list:before {
    left: -13px;
  }
  .comments-list.reply-list {
    margin-left: -30px;
  }
  .comments-list:after {
    left: -15px;
    position: relative;
  }

  /* End lineas */
  .comment-box .comment-head, .comment-box .comment-content {
    font-size: 12px;
  }

  .comments-list .comment-avatar {
    width: 35px;
    height: 35px;
  }
  .comments-list .comment-box {
    max-width: 250px;
  }

  .reply-list .comment-box {
    max-width: 170px;
  }
}
@media only screen and (max-width: 360px) {
  .comments-list .comment-avatar {
    width: 35px;
    height: 35px;
  }
  .comments-list .comment-box {
    max-width: 200px;
  }

  .reply-list .comment-box {
    max-width: 120px;
  }
}