/******************************************************************************
  Social Feed
*******************************************************************************/
.social-feed {
  background-image: url($preloader-img), none;
  background-repeat: no-repeat;
  background-position: 50% 100px;
  background-size: 40px;
  
  > * {
    opacity: 0;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
  }
  .isotope-item {
    margin-bottom: 20px;
  }
  .post {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 19px;
    
    &.bg {
      background: #ccc;
      color: #fff;
    }
    &.bg-danger {
      border-color: $danger;
    }
    &.bg-warning {
      border-color: $warning;
    }
    &.bg-info {
      border-color: $info;
    }
    &.bg-success {
      border-color: $success;
    }
    &.bg-primary {
      border-color: $primary;
    }
    &.number {
      padding-left: 40px;
      padding-right: 40px;
      position: relative;
      text-align: center;
      
      .post-icon {
        font-size: 24px;
        left: 10px;
        opacity: .8;
        filter: alpha(opacity=80);
        position: absolute;
        top: 10px;
      }
      .social-data {
        display: inline-block;
        font-style: italic;
        line-height: 1;
        vertical-align: middle;
        
        .count {
          font-size: 60px;
          font-style: normal;
        }
      }
    }
  }
  .add-post {
    background: none;
    border: 0 none;
    padding: 0;
    
    .nav-tabs {
      border: 0 none;
      
      > li {
        > a {
          border-radius: 3px 3px 0 0;
          padding: 6px 10px 7px;
          
          .fa {
            color: #7f7f7f;
          }
        }
        &.active {
          > a,
          > a:hover,
          > a:focus {
            color: #555;
            font-weight: normal;
          }
        }
      }
    }
    .tab-content {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 20px;
      
      .tab-pane {
        padding: 0;
        
        form {
          margin: 0;
        }
      }
    }
    .tab-pane input {
      margin-bottom: 22px;
    }
  }
  .author-info {
    margin-bottom: 15px;
    
    .avatar {
      border-radius: 50%;
      float: left;
      height: 50px;
      margin: 0 20px 0 0;
      overflow: hidden;
      width: 50px;
    }
    .user-name {
      font-size: 16px;
      
      a {
        color: #1e1e1e;
        text-decoration: none;
        -webkit-transition: opacity .2s linear;
        transition: opacity .2s linear;
        
        &:hover {
          opacity: .8;
          filter: alpha(opacity=80);
          -webkit-transition: opacity .2s linear;
          transition: opacity .2s linear;
        }
      }
    }
    time {
      color: #7f7f7f;
      font-style: italic;
    }
  }
  .preview {
    margin: 0 -20px 20px;
    text-align: center;
    
    img {
      display: block;
      margin: 0 auto;
    }
  }
  .buttons {
    margin-bottom: 20px;
    text-align: right;
    
    .btn {
      background: none;
      border: 1px solid rgba(0,0,0,.5);
      color: rgba(0,0,0,.5);
      -webkit-transition: opacity .2s linear;
      transition: opacity .2s linear;
      
      &:hover {
        opacity: .8;
        filter: alpha(opacity=80);
        -webkit-transition: opacity .2s linear;
        transition: opacity .2s linear;
      }
    }
  }
  .comments {
    background: rgba(0,0,0,.1);
    margin: 0 -20px -20px;
    padding: 20px;
    
    .comment {
      margin: 0 0 25px;
      
      .avatar {
        border-radius: 50%;
        float: left;
        height: 40px;
        margin: 0 10px 5px 0;
        overflow: hidden;
        width: 40px;
      }
      .author-details {
        margin-bottom: 5px;
      }
      .user-name a {
        color: #1e1e1e;
        text-decoration: none;
        -webkit-transition: opacity .2s linear;
        transition: opacity .2s linear;
        
        &:hover {
          opacity: .8;
          filter: alpha(opacity=80);
          -webkit-transition: opacity .2s linear;
          transition: opacity .2s linear;
        }
      }
      time {
        color: #7f7f7f;
        font-size: 12px;
        font-style: italic;
      }
    }
    .form {
      margin: 0;
      
      .form-control {
        height: 62px;
        margin: 0;
      }
      textarea {
        resize: none;
      }
    }
  }
  &.loaded {
    background: none;
    
    > * {
      opacity: 1;
      -webkit-transition: opacity .2s linear;
      transition: opacity .2s linear;
    }
  }
  .bg {
    .author-info .user-name a,
    .comments .comment .user-name a {
      color: #fff;
    }
    .author-info time,
    .comments .comment time {
      color: rgba(255,255,255,.8);
    }
    .buttons .btn {
      background: #fff;
      border-color: #fff;
      color: #1e1e1e;
    }
  }
}
.social-feed .bg-danger .buttons .btn {
  color: $danger;
}
.social-feed .bg-warning .buttons .btn {
  color: $warning;
}
.social-feed .bg-info .buttons .btn {
  color: $info;
}
.social-feed .bg-success .buttons .btn {
  color: $success;
}
.social-feed .bg-primary .buttons .btn {
  color: $primary;
}
.social-feed .post.number.twitter {
  background: #00aced;
  border-color: #00aced;
}
.social-feed .post.number.facebook {
  background: #3B5998;
  border-color: #3B5998;
}
.social-feed .post.number.google {
  background: #dd4b39;
  border-color: #dd4b39;
}
.social-feed .post.number.pinterest {
  background: #cb2027;
  border-color: #cb2027;
}
.social-feed .post.number.linkedin {
  background: #007bb6;
  border-color: #007bb6;
}
.social-feed .post.number.youtube {
  background: #bb0000;
  border-color: #bb0000;
}