/* post small light */
.post {
  width: 100%;  
}

.post .avatar {
  width: 380px;
  height: 237.5px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines 1.6s infinite linear;
}

.post .line-lg {
  width: 380px;
  height: 40px;
  margin-top: 8px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines 1.6s infinite linear;
}

.post .line-sm {
  width: 380px;
  height: 48px;
  margin-top: 14px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines 1.6s infinite linear;
}

.post .info-conatiner {
  margin-top: 2px;
  height: 24px;
}

.post .info {
  float: left;
  width: 80px;
  height: 19px;
  margin-top: 5px;
  margin-right: 10px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines 1.6s infinite linear;
}

@keyframes shine-lines {
  0% {
    background-position: -100px
  }
  40%, 100% {
    background-position: 380px
  }
}
/* post small light */

/* post mini light */
.post-mini {
  width: 100%;
  height: 88px;  
}

.post-mini .avatar {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines 1.6s infinite linear;
}

.post-mini .line-lg {
  float: left;
  width: 270px;
  height: 42px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines-mini 1.6s infinite linear;
}

.post-mini .line-sm {
  width: 250px;
  height: 20px;
  margin-top: 10px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines-mini 1.6s infinite linear;
}

.post-mini .info-conatiner {
  height: 25px;
}

.post-mini .info {
  float: left;
  width: 80px;
  height: 25px;
  margin-top: 10px;
  margin-right: 10px;
  background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
  background-size: 600px;
  animation: shine-lines-mini 1.6s infinite linear;
}

@keyframes shine-lines-mini {
  0% {
    background-position: -100px
  }
  40%, 100% {
    background-position: 270px
  }
}
/* post mini light */

/* post large dark */
.post-dark-lg {
  width: 100%;
  height: 323px;  
  background: #232323;
}

.post-dark-lg .avatar {
  width: 517px;
  height: 323px;
  background-image: linear-gradient(90deg, #343434 0px, #383838 40px, #343434 80px);
  background-size: 600px;
  animation: shine-lines-lg 1.6s infinite linear;
}

.post-dark-lg .line-lg {
  width: 517px;
  height: 42px;
  margin-top: 15px;
  background-image: linear-gradient(90deg, #343434 0px, #383838 40px, #343434 80px);
  background-size: 600px;
  animation: shine-lines-lg 1.6s infinite linear;
}

.post-dark-lg .line-sm {
  width: 250px;
  height: 20px;
  margin-top: 10px;
  background-image: linear-gradient(90deg, #343434 0px, #383838 40px, #343434 80px);
  background-size: 600px;
  animation: shine-lines-lg 1.6s infinite linear;
}

.post-dark-lg .info {
  float: left;
  width: 75px;
  height: 20px;
  margin-top: 10px;
  margin-right: 10px;
  background-image: linear-gradient(90deg, #343434 0px, #383838 40px, #343434 80px);
  background-size: 600px;
  animation: shine-lines-lg 1.6s infinite linear;
}

@keyframes shine-lines-lg {
  0% {
    background-position: -100px
  }
  40%, 100% {
    background-position: 510px
  }
}
/* post large dark */

/* post small dark */
.post-dark-sm {
  width: 100%;  
  background: #232323;
}

.post-dark-sm .avatar {
  height: 161px;
  background-image: linear-gradient(90deg, #343434 0px, #383838 40px, #343434 80px);
  background-size: 600px;
  animation: shine-lines-sm 1.6s infinite linear;
}

@keyframes shine-lines-sm {
  0% {
    background-position: -100px
  }
  40%, 100% {
    background-position: 255px
  }
}
/* post small dark */