#banner {
    background:#9c141e;
    text-align: left;
    width: 100%;
    height: 100%;

    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

#copy1
 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-animation-fill-mode: forwards !important;
    animation-fill-mode: forwards !important;
}

#logo,
#pack
 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;
    -webkit-animation-fill-mode: forwards !important;
    animation-fill-mode: forwards !important;
}

#dot_1,
#dot_2,
#dot_3
 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
   /* transform: scale(0); */
    -webkit-animation-fill-mode: forwards !important;
    animation-fill-mode: forwards !important;
}
/* #dot_1 {
    transform-origin: 10px 310px;
}
#dot_2{
    transform-origin: 46px 278px;
}
#dot_3 {
    transform-origin: 92px 211px;
} */
#logo.paused,
#pack.paused,
#copy1.paused,
#dot_1.paused,
#dot_2.paused,
#dot_3.paused
{
    position: absolute;
    top: 0;
    left: 0;
    opacity:1 !important;
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0, 0, 0);
    transform: scale(0, 0, 0);
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale(0, 0, 0);
    transform: scale(0, 0, 0);
  }

  100% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  100% {
    opacity: 0;

  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  100% {
    opacity: 0;

  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

.paused{
   -webkit-animation-play-state:paused !important;
   animation-play-state:paused !important;
}