@keyframes horizontalLines{
  100% {
    width: 95%;
  }
}
@keyframes verticalLines{
  100% {
    height: 120%;
  }
}
@keyframes generalVerticalLines{
  100% {
    height: 95%;
  }
}
@keyframes journalVerticalLines{
  100% {
    height: 105%;
  }
}
@keyframes journalHorizontalLines{
  100% {
    width: 115%;
  }
}
@keyframes hrLines{
  100% {
    width: 100%;
  }
}

hr.animate__line-horizontal-1 {
  width: 1%;
  -webkit-animation: horizontalLines 2s;
  -moz-animation: horizontalLines 2s;
  -o-animation: horizontalLines 2s;
  animation: horizontalLines 2s;
  animation-fill-mode: forwards;
}

hr.animate__line-horizontal-2 {
  width: 1%;
  -webkit-animation: hrLines 2s;
  -moz-animation: hrLines 2s;
  -o-animation: hrLines 2s;
  animation: hrLines 2s;
  animation-fill-mode: forwards;
}

hr.animate__line-horizontal-3 {
  width: 1%;
  -webkit-animation: journalHorizontalLines 2s;
  -moz-animation: journalHorizontalLines 2s;
  -o-animation: journalHorizontalLines 2s;
  animation: journalHorizontalLines 2s;
  animation-fill-mode: forwards;
}

.animate__line-vertical-1::after,
.animate__line-vertical-1::before {
  height: 1%;
  -webkit-animation: verticalLines 2s;
  -moz-animation:    verticalLines 2s; 
  -o-animation:      verticalLines 2s; 
  animation:         verticalLines 2s; 
  animation-fill-mode: forwards;
}

.animate__line-vertical-2::after,
.animate__line-vertical-2::before {
  height: 1%;
  -webkit-animation: journalVerticalLines 2s;
  -moz-animation:    journalVerticalLines 2s; 
  -o-animation:      journalVerticalLines 2s; 
  animation:         journalVerticalLines 2s; 
  animation-fill-mode: forwards;
}