.avatar {
  margin-top: 20px;
}
.avatar-box{
  text-align: center;
  /* box-sizing: content-box; */
  /* box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.29); */
}
.avatar-box p{
  font-size: 12px;
  height: 2.6em;
  overflow: hidden;
  margin-bottom: 10px;
  color: grey;
  padding: 0 .4em;
}
.avatar-box h5{
  margin-bottom: 6px;
  font-size: 16px;
}
.avatar-box img{
  height: 155px;
  margin-bottom: .5em;
}
@media all and (max-width: 1199px) {
  .avatar-box img{
    height: 130px;
  }
}

@media all and (max-width: 767px) {
  .avatar-box img{
    height: 290px;
  }
}
@media all and (max-width: 700px) {
  .avatar-box img{
    height: 260px;
  }
}
@media all and (max-width: 600px) {
  .avatar-box img{
    height: 210px;
  }
}
@media all and (max-width: 500px) {
  .avatar-box img{
    height: 170px;
  }
}
@media all and (max-width: 450px) {
  .avatar-box img{
    height: 150px;
  }
}
@media all and (max-width: 400px) {
  .avatar-box img{
    height: 126px;
  }
}

.avatar-inner {
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.29);
    border-bottom: 4px solid #ececec;
    /* border-bottom: 4px solid #ececec; */
    margin-bottom: 20px;
}