.top-op,.top-op2{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
}
.top-op{
  z-index: 99;
  background: #f2f2f2;
  animation-duration: 1.2s;
  animation-delay:1.4s;
  animation-fill-mode: forwards;
  animation-name: top-op;
}
.top-op2{
  z-index: 100;
  background: #e2e2e2;
  animation-duration: 0.7s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  animation-name: top-op2;
}

@keyframes top-op{
0% {
  width: 100%;
  left:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  left: 100%;
}
}
@keyframes top-op2{
0% {
  width: 100%;
  right:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  right: 100%;
}
}



.shutter{
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  background-color:#fff;
  z-index:99;
  -webkit-animation: byeShutter 5s forwards;
  animation: byeShutter 5s forwards;
}
.logo {
  position: absolute;
  width: 250px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: logo 2.6s forwards;
  animation: logo 2.6s forwards;
  animation-delay: 1.3s;
}
@keyframes byeShutter {
70% {
  opacity: 1;
}
100% {
  display: none;
  opacity: 0;
  z-index: -1;
}
}
@keyframes logo {
0% {
  opacity: 1;
}
  
50% {
  transform: rotate(0deg);     
}
  100% {
  transform: scale(0.8);
  }
}