#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;
}
#legal,
#copy1{
    opacity: 1;
}
#copy2 {
  opacity          : 1;
  -webkit-transform: translate3d(-300px, 0, 0);
  transform        : translate3d(-300px, 0, 0);
}
#pack{
  -webkit-transform: translate3d(-300px, 0, 0);
  transform        : translate3d(-300px, 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,
#legal,
#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(550px, 0, 0);
       transform        : translate3d(550px, 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(-300px, 0, 0);
    transform        : translate3d(-300px, 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(-300px, 0, 0);
  transform                  : translate3d(-300px, 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;
}