.media {
    margin-top: 20px;
    background: #fff;
    padding: 15px;
    overflow: visible;

    .post-actions {
      color:#5b5b5b;
      .caret {
        border-top: 8px solid;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
      }
    }
    .post-actions:hover {
      color: #3b3b3b;
    }

    div.media-image {
      margin-right: 10px;
      max-width: 120px;
      max-height: 120px;
      border-radius: 120px;
      overflow: hidden;
      margin-right: 30px;
    }

    img.media-object {
      max-height: 120px;
    }

    .single {
      text-align:center;
      max-width: 100%;
      background: #f8f8f8;
      padding: 15px 10px;
      border-radius: 10px;
    }

    .media-body abbr {
      margin-top: 2px;
      margin-right: 10px;
      border-bottom: none;
      cursor: default;
      color: #A3A3A3;
      font-weight: 100;
      font-size: 1.2em;
    }

    .media-toolbar {
      margin-top:10px;
    }

    hr {
      margin-top:20px;
      margin-bottom:20px;
    }

    .comment-list {
      .comment {
        margin-top:5px;
        padding: 7px;

        img.media-object {
          max-width: 80px;
        }

        h2.media-heading {
          font-size: 20px;
        }

        p.lead {
          font-size: 16px;
        }

        .edit-comment {
          cursor: pointer;
        }

        .edit-comment-container {
          div {
            margin-top:10px;
          }
          button {
            margin-left:10px;
          }
        }

        hr {
          margin-top:20px;
          margin-bottom:10px;
        }
      }
    }
}

@media (max-width: @screen-xs-max) {
  .media {
    div.media-image {
      margin-top: 30px;
      max-width: 60px;

      img {
        max-width: 60px;
      }
    }

    .media-heading {
      margin-top:30px;
    }

    .single {
      text-align:center;
      max-width: 100%;
      background: transparent;
      padding: 0px;
      border-radius: 0px;
    }
  }
}
