#line_3 {
  height: 100%;
  animation: line_3 4.5s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_3 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_4 {
  height: 100%;
  animation: line_4 3.5s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_4 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_5 {
  height: 100%;
  animation: line_5 3s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_5 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_6 {
  height: 100%;
  animation: line_6 2.7s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_6 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_7 {
  height: 100%;
  animation: line_7 2.6s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_7 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_8 {
  height: 100%;
  animation: line_8 2.6s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_8 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_9 {
  height: 100%;
  animation: line_9 2.6s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_9 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_10 {
  height: 100%;
  animation: line_10 2.7s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_10 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_11 {
  height: 100%;
  animation: line_11 3s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_11 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_12 {
  height: 100%;
  animation: line_12 3.5s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_12 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}

#line_13 {
  height: 100%;
  animation: line_13 4.5s cubic-bezier(0.3, 0.55, 0.45, 1);
}

@keyframes line_13 {
  0%   { height: 0%}
  20%   { height: 0%}
  100%  { height: 100%}
 
}


#text_fade1, #text_fade2{
    animation: text_fade 3s linear ;
}
@keyframes text_fade {

    0%    { opacity: 0%}
    50%   { opacity: 0%}
    100%  { opacity: 100%}
}



@keyframes showTopText {

    0%   { opacity: 0%}
    80%  { opacity: 10%; transform: translate3d(0, 100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}


#reveal_p_1 {
  animation: showTopText 4s;
  animation-fill-mode: forwards;
  bottom: 0;
  transform: translate(0, 100%);
}

#line_3 > div {
    height: 48px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 0.1rem;
}

@keyframes showBottomText {
    0%   { opacity: 0% }
    80%  { opacity: 10%; transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}


#reveal_p_2 {

    animation: showBottomText 4s;
    animation-fill-mode: forwards;
    bottom: 0;
    transform: translate(0, -100%);
}

#line_4 > div {
    margin-top: 0.1rem;
    height: 48px;
    overflow: hidden;
    width: 100%;
}


#content_fade_1, #content_fade_5{
    animation: content_fade_1 4s linear ;
}

#content_fade_3, #content_fade_7{
    animation: content_fade_1 4.5s linear ;
}

@keyframes content_fade_1 {

    0%    { opacity: 0%}
    40%   { opacity: 0%}
    100%  { opacity: 100%}
}

#content_fade_2, #content_fade_6{
    animation: content_fade_2 2.5s linear ;
}

#content_fade_4,#content_fade_8{
    animation: content_fade_2 3s linear ;
}

@keyframes content_fade_2 {

    0%    { opacity: 0%}
    50%   { opacity: 0%}
    100%  { opacity: 100%}
}

.text-cursor {
  animation: showBottomText 0.4s;
  animation-fill-mode: forwards;
  bottom: 0;
  transform: translate(0, -100% , 0 );
}

@keyframes Textcursor {
  0%   { opacity: 0%; transform: translate3d(0,-100%, 0); }
  100% { opacity: 100%; transform: translate3d(0, 0, 0); }
 
}