.bar01 {
  width:calc(100% / 8);
  height: 0%;
  display: block;
  background-color: rgba(204,0,0,0.85);
  position: absolute;
  top:0;
  left:62.5%;
  z-index:1001;
  opacity: 1;
}
.bar01 {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-name: bar01;
  animation-name: bar01;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
@-webkit-keyframes bar01 {
  0% {
  height:0%;
  opacity: 1;
  }
  20% {
  height:80%;
  opacity: 1;
  }
  80% {
  height:80%;
  opacity: 1;
  }
  100% {
  height:80%;
  opacity: 0;
  }
}
@keyframes bar01 {
  0% {
  height:0%;
  opacity: 1;
  }
  20% {
  height:80%;
  opacity: 1;
  }
  80% {
  height:80%;
  opacity: 1;
  }
  100% {
  height:80%;
  opacity: 0;
  }
}

.bar02 {
  width:0%;
  height: calc(100% / 5);
  display: block;
  background-color: rgba(204,0,0,0.85);
  position: absolute;
  top:60%;
  left:0;
  z-index:1002;
  opacity: 1;
}
.bar02 {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-name: bar02;
  animation-name: bar02;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
@-webkit-keyframes bar02 {
  0% {
  width:0%;
  opacity: 1;
  }
  20% {
  width:87.5%;
  opacity: 1;
  }
  80% {
  width:87.5%;
  opacity: 1;
  }
  100% {
  width:87.5%;
  opacity: 0;
  }
}
@keyframes bar02 {
  0% {
  width:0%;
  opacity: 1;
  }
  20% {
  width:87.5%;
  opacity: 1;
  }
  80% {
  width:87.5%;
  opacity: 1;
  }
  100% {
  width:87.5%;
  opacity: 0;
  }
}


.bar03 {
  width:calc(100% / 4);
  height: 0%;
  display: block;
  background-color: rgba(204,0,0,0.85);
  position: absolute;
  bottom:0;
  left:12.5%;
  z-index:1003;
  opacity: 1;
}
.bar03 {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-name: bar03;
  animation-name: bar03;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
@-webkit-keyframes bar03 {
  0% {
  height:0%;
  opacity: 1;
  }
  20% {
  height:40%;
  opacity: 1;
  }
  80% {
  height:40%;
  opacity: 1;
  }
  100% {
  height:40%;
  opacity: 0;
  }
}
@keyframes bar03 {
  0% {
  height:0%;
  opacity: 1;
  }
  20% {
  height:40%;
  opacity: 1;
  }
  80% {
  height:40%;
  opacity: 1;
  }
  100% {
  height:40%;
  opacity: 0;
  }
}


.bar04 {
  width:0%;
  height: calc(100% / 5);
  display: block;
  background-color: rgba(204,0,0,0.85);
  position: absolute;
  top:20%;
  right:0;
  z-index:1002;
  opacity: 1;
}
.bar04 {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-name: bar04;
  animation-name: bar04;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
@-webkit-keyframes bar04 {
  0% {
  width:0%;
  opacity: 1;
  }
  20% {
  width:62.5%;
  opacity: 1;
  }
  80% {
  width:62.5%;
  opacity: 1;
  }
  100% {
  width:62.5%;
  opacity: 0;
  }
}
@keyframes bar04 {
  0% {
  width:0%;
  opacity: 1;
  }
  20% {
  width:62.5%;
  opacity: 1;
  }
  80% {
  width:62.5%;
  opacity: 1;
  }
  100% {
  width:62.5%;
  opacity: 0;
  }
}