*, *:before, *:after {
  box-sizing: border-box;
}
.phone {
  margin: 10px auto;
}
.clear {
  clear: both;
}
.phone {
  height: 355px;
  width: 226px;
  background: #415260;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  margin-top: 100px;
}
.phone .phone-shade {
  position: absolute;
  height: 500px;
  width: 200px;
  left: 50%;
  background: #555f6b;
  transform: rotate(18deg);
}
.phone .phone-speaker {
  height: 8px;
  width: 42px;
  border-radius: 4px;
  background: #3e4752;
  position: relative;
  top: 23px;
  left: 50%;
  margin-left: -21px;
}
.phone-button {
  height: 40px;
  width: 40px;
  background: #49525b;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: 10px;
}
.phone-screen {
  height: 230px;
  width: 208px;
  background: #f2ebe2;
  position: absolute;
  left: 9px;
  top: 58px;
  overflow: hidden;
}
.phone-header {
  width: 100%;
  height: 30px;
  background: #a68f71;
  position: relative;
  /* z-index: 1; */
  color: white;
}
.phone-header .phone-menu {
  position: absolute;
  right: 10px;
  top: 9px;
  background: white;
  width: 15px;
  height: 2px;
}
.phone-header .phone-menu:before {
  content: "";
  width: 15px;
  height: 2px;
  top: 5px;
  background: #f2ebe2;
  position: absolute;
}
.phone-header .phone-menu:after {
  content: "";
  width: 15px;
  height: 2px;
  top: 10px;
  background: #f2ebe2;
  position: absolute;
}
.phone-post {
  padding: 15px 10px;
  border-bottom: 2px solid #62605d;
  overflow: hidden;
  height: 60px;
  position: relative;
  transform: translateY(-60px);
  z-index: 0;
}
.phone-post.active {
  animation: new-post 1s ease forwards;
}
.phone-post .post-thumb {
  height: 29px;
  width: 27px;
  background: #a68f71;
  position: absolute;
  margin-right: 5px;
}
.phone-post .post-title-1 {
  height: 4px;
  width: 14px;
  margin-top: 3px;
  background: #dadada;
  position: absolute;
  left: 44px;
}
.phone-post .post-title-2 {
  height: 4px;
  width: 26px;
  margin-top: 3px;
  background: #dadada;
  position: absolute;
  left: 63px;
}
.phone-post .post-line-1 {
  height: 4px;
  width: 150px;
  background: #b0b0b0;
  position: absolute;
  left: 44px;
  top: 27px;
}
.phone-post .post-line-2 {
  height: 4px;
  width: 100px;
  background: #b0b0b0;
  position: absolute;
  left: 44px;
  top: 36px;
}
#first-post .line {
  width: 0;
}
#first-post.active .post-thumb {
  transform: scale(0);
  animation: box-grow 500ms ease 500ms forwards;
}
#first-post.active .line {
  transition: width 500ms ease;
  transition-delay: 600ms;
}
#first-post.active .post-title-1 {
  width: 14px;
}
#first-post.active .post-title-2 {
  width: 26px;
}
#first-post.active .post-line-1 {
  width: 150px;
}
#first-post.active .post-line-2 {
  width: 100px;
}
@keyframes new-post {
  0% {
    transform: translateY(-100%);
 }
  100% {
    transform: translateY(0px);
 }
}
@keyframes box-grow {
  0% {
    transform: scale(0) rotate(25deg);
 }
  60% {
    transform: scale(1.2) rotate(-10deg);
 }
  100% {
    transform: scale(1) rotate(0);
 }
}