#banner {
  background             : #b71a17;
  text-align             : left;
  width                  : 100%;
  height                 : 100%;
  line-height            : 1;
  overflow               : hidden;
  -webkit-box-sizing     : border-box;
  box-sizing             : border-box;
  position               : absolute;
  top                    : 0;
  left                   : 0;
  opacity                : 1;
  color                  : #fff;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: greyscale;
}
#border {
  border            : 1px solid #333333;
  height            : 100%;
  z-index           : 10;
  position          : relative;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}
#banner:hover {
  cursor: pointer
}

#bg,
#bg_blur,
#pack,
#legal,
#logo {
  position: absolute;
  top     : 0;
  left    : 0;
}
#bg,
#bg_blur,
#pack,
#copy1,
#copy2
{
  position: absolute;
  top     : 0;
  left    : 0;
  opacity : 0;
}
#copy1{
  opacity: 1;
}
#copy2 {
opacity          : 1;
-webkit-transform: translate3d(-1350px, 0, 0);
transform        : translate3d(-1350px, 0, 0);
}
#pack{
-webkit-transform: translate3d(-1350px, 0, 0);
transform        : translate3d(-1350px, 0, 0);
opacity          : 1;
left             : 0px;
top              : 0px;
}
  #copy1.paused,
  #bg.paused,
  #legal.paused{
  position: absolute;
  top     : 0;
  left    : 0;
  opacity : 1 !important;
}
#bg,
#copy1,
#copy2,
#pack,
#logo
{
 
  -webkit-animation-fill-mode: forwards !important;
  animation-fill-mode        : forwards !important;
}

@-webkit-keyframes fadenone {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes fadenone {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@-webkit-keyframes fadein {
  0% {
      opacity: 0;
      top    : 0px;
  }
  100% {
      opacity: 1;
      top    : 0px;
  }
}

@keyframes fadein {
  0% {
      opacity: 0;
      top    : 0px;
  }
  100% {
      opacity: 1;
      top    : 0px;
  }
}

@-webkit-keyframes fadeout {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

@keyframes fadeout {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
.fadein {
  
  -webkit-animation-name: fadein;
  animation-name        : fadein;

  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  -webkit-perspective        : 1000px;
  perspective                : 1000px;

}

@keyframes shakeOut {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform        : translate3d(0, 0, 0);
  }
 
  100% {
     -webkit-filter   : blur(2px);
     filter           : blur(2px);
     -webkit-transform: translate3d(1250px, 0, 0);
     transform        : translate3d(1250px, 0, 0);
  }
 
   /* 100% {
    
     -webkit-filter: blur(2px);
    
             filter           : blur(2px);
             -webkit-transform: translate3d(250px, 0px, 0);
             transform        : translate3d(250px, 0px, 0);
  } */
}
.shakeOut {
  opacity               : 1;
  -webkit-animation-name: shakeOut;
  animation-name        : shakeOut;
  /* animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite; */
  /*transform: translate3d(0, 0, 0);*/
  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  -webkit-perspective        : 1000px;
  perspective                : 1000px;

}

@keyframes shakeIn {
0% {
  -webkit-filter   : blur(2px);
  filter           : blur(2px);
  -webkit-transform: translate3d(-1250px, 0, 0);
  transform        : translate3d(-1250px, 0, 0);
}

20% {
  -webkit-filter   : blur(0px);
  filter           : blur(0px);
  -webkit-transform: translate3d(0px, 0, 0);
  transform        : translate3d(0px, 0, 0);
}

 100% {
  
   -webkit-filter: blur(0px);
  
           filter           : blur(0px);
           -webkit-transform: translate3d(0px, 0, 0);
           transform        : translate3d(0px, 0, 0);
}
}
.shakeIn {
opacity                    : 1;
-webkit-transform          : translate3d(-1250px, 0, 0);
transform                  : translate3d(-1250px, 0, 0);
-webkit-animation-name     : shakeIn;
animation-name             : shakeIn;
-webkit-animation          : shakeIn cubic-bezier(.36,.07,.19,.97) both infinite;
animation                  : shakeIn cubic-bezier(.36,.07,.19,.97) both infinite;
-webkit-transform          : translate3d(0, 0, 0);
transform                  : translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility        : hidden;
-webkit-perspective        : 1000px;
perspective                : 1000px;

}

.easeOutBack {
   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
   animation-timing-function        : cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
}
.easeInOut {
   -webkit-animation-timing-function: ease-in-out !important;
   animation-timing-function        : ease-in-out !important;;
}
.paused{
 -webkit-animation-play-state: paused !important;
 animation-play-state        : paused !important;
}