/**
 * @package      BSNotify v 1.0
 * @version      v 1.0
 * @link         https://github.com/dockfo/boot-strap-notify
*/

/* width/height/font-size/left are set inline per notification (see
   BSNotify#_iconSize in bsnotify.js): diameter == notifyHeight, shifted
   right of the card's left edge by 25% of that so .notify-icon-strip
   (below) can cover the edge behind it. It sits behind the text
   (position:absolute, no z-index, painted first) - .notify-text is
   positioned too and comes later in the DOM, so it paints on top. */
.icon-card, .icon-block {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}

/* only relevant when a theme swaps BSNotify.ICONS for SVG markup instead of
   a glyphicon class name (see BSNotify#_formatMessage) - stretches the icon
   to fill the square container sized inline by BSNotify#_applyIconSizing */
.icon-card svg, .icon-block svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* iconEffect option ('none'/'pulse'/'wobble'/'ripple'):
   BSNotify#_applyIconSizing adds one of these as an extra class on the
   icon element - 'none' adds no class, so no animation runs. It also sets
   --icon-effect-intensity (iconEffectIntensity/100, default 0.3) inline,
   which the keyframes below scale their magnitude by - the numbers here
   are calibrated so the default 0.3 reproduces the original fixed values
   (1.06 scale / 6deg / 1.6 ring scale). Falls back to 0.3 if unset. */
.icon-effect-pulse {
  animation: icon-effect-pulse 4s ease-in-out infinite;
}
@keyframes icon-effect-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(calc(1 + 0.2 * var(--icon-effect-intensity, 0.3))); }
}

.icon-effect-wobble {
  animation: icon-effect-wobble 3s ease-in-out infinite;
}
@keyframes icon-effect-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(calc(-20deg * var(--icon-effect-intensity, 0.3))); }
  75%      { transform: rotate(calc(20deg * var(--icon-effect-intensity, 0.3))); }
}

/* expanding ring behind the glyph, faded out - the icon's own box is a
   square (width==height), so border-radius:50% on the pseudo-element
   inscribes a circle in it, giving a radar-ping look */
.icon-effect-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: icon-effect-ripple 2s ease-out infinite;
}
@keyframes icon-effect-ripple {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(calc(1.3 + var(--icon-effect-intensity, 0.3))); opacity: 0; }
}

.notify-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 15px 10px 22px; /* left is a fallback; BSNotify#_sizeIcon overrides it to clear the icon's actual size */
  font-size: 13px;
}

.notify-title {
  display: block;
  text-align: center;
  font-size: 15px;
}

/* plain rectangle, full card height, flush against the left edge - covers
   the strip of card background the (shifted-right, circular) icon doesn't
   reach on its own. Width/height set inline (see BSNotify#_formatMessage),
   scaled with notifyHeight the same way the icon itself is. */
.notify-icon-strip {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.3);
  pointer-events: none;
}

/* solid accent colour per notification type - a brighter tint of the same
   base colour. The glyph (.icon-card/.icon-block) only ever gets `color`:
   it's a font glyph, so `color` is what paints its ink - giving it a
   background-color would tint its whole square box again, exactly the
   "square background" look that was rejected earlier. .notify-icon-strip is
   a plain empty div with no text, so it needs `background-color` instead -
   `color` alone would paint nothing on it. */
/* each glyph's ink sits slightly differently within its own em-box (the
   "+" vs "?" vs "i" vs "!" aren't drawn with the same visual centering), so
   each type gets a small top nudge on top of the shared top:0 to make them
   all look properly centered */
.notify-primary .icon-card, .notify-block-primary .icon-block {
  color: rgb(0,170,255);
  top: 3px;
}
.notify-primary .notify-icon-strip, .notify-block-primary .notify-icon-strip {
  background-color: rgb(0,170,255);
}

.notify-success .icon-card, .notify-block-success .icon-block {
  color: rgb(60,220,120);
}
.notify-success .notify-icon-strip, .notify-block-success .notify-icon-strip {
  background-color: rgb(60,220,120);
}

.notify-info .icon-card, .notify-block-info .icon-block {
  color: rgb(40,200,220);
  top: 3px;
}
.notify-info .notify-icon-strip, .notify-block-info .notify-icon-strip {
  background-color: rgb(40,200,220);
}

.notify-warning .icon-card, .notify-block-warning .icon-block {
  color: rgb(255,213,79);
  top: -2px;
}
.notify-warning .notify-icon-strip, .notify-block-warning .notify-icon-strip {
  background-color: rgb(255,213,79);
}

.notify-danger .icon-card, .notify-block-danger .icon-block {
  color: rgb(255,99,110);
  top: -1px;
}
.notify-danger .notify-icon-strip, .notify-block-danger .notify-icon-strip {
  background-color: rgb(255,99,110);
}

.notify-close {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.notify-close:hover {
  color: rgba(255,255,255,0.95);
}

/* absolutely positioned (flush against the notification's own edge, not
   the shorter content row) - progressBarPosition ('top'/'bottom') picks
   which edge via the modifier class below */
.progressbar {
  position: absolute;
  left: 0;
  width: 0; /* grows via inline style as BSNotify#_scheduleAutoRemoval ticks - starting at 0 avoids a flash of a full-width bar before the countdown begins */
  z-index: 3;
  background: rgb(230,230,230);
  height: 1px;
  opacity: 1;
  transition: opacity 500ms;
}

.progressbar-top {
  top: 0;
}

.progressbar-bottom {
  bottom: 0;
}

.progressbarfade {
  opacity: 0;
}

/* pushdown/pullup: entrance clearance effect shared by card and block notifications */
.pushdown {
  transition: all 100ms;
}
.pullup {
  transition: all 100ms;
}

/* NOTIFICATION CARD BASIC CLASS */
.notifycontainer {
  z-index: 9999;
  width: 400px;
  height: auto;
  position: fixed;
  overflow: visible;
  background: rgba(0,0,0,0);
}
.notify-primary, .notify-success, .notify-info, .notify-warning, .notify-danger,
.notify-block-primary, .notify-block-success, .notify-block-info, .notify-block-warning, .notify-block-danger {
  /* slight transparency so there's something visible to blur - backdrop-filter
     has no effect on a fully opaque background */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.notify-primary {
  position: relative;
  background: linear-gradient(to right, rgba(0,123,255,0.65), rgba(0,170,255,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  max-width: 400px;
  overflow: hidden;
  border-radius: 5px;
}
.notify-success {
  position: relative;
  background: linear-gradient(to right, rgba(40,167,69,0.65), rgba(60,220,120,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  overflow: hidden;
  max-width: 400px;
  border-radius: 5px;
}
.notify-info {
  position: relative;
  background: linear-gradient(to right, rgba(23,162,184,0.65), rgba(40,200,220,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  overflow: hidden;
  max-width: 400px;
  border-radius: 5px;
}
.notify-warning {
  position: relative;
  background: linear-gradient(to right, rgba(255,193,7,0.65), rgba(255,213,79,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  overflow: hidden;
  max-width: 400px;
  border-radius: 5px;
}
.notify-danger {
  position: relative;
  background: linear-gradient(to right, rgba(220,53,69,0.65), rgba(255,99,110,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  overflow: hidden;
  max-width: 400px;
  border-radius: 5px;
}
/* backgroundBlur:false - opaque version of each type's gradient (full alpha
   instead of the 0.65 used so there's something for backdrop-filter to blur -
   with no blur running, the translucency would just look washed out) */
.notify-primary.no-blur { background: linear-gradient(to right, rgb(0,123,255), rgb(0,170,255)); }
.notify-success.no-blur { background: linear-gradient(to right, rgb(40,167,69), rgb(60,220,120)); }
.notify-info.no-blur { background: linear-gradient(to right, rgb(23,162,184), rgb(40,200,220)); }
.notify-warning.no-blur { background: linear-gradient(to right, rgb(255,193,7), rgb(255,213,79)); }
.notify-danger.no-blur { background: linear-gradient(to right, rgb(220,53,69), rgb(255,99,110)); }
/* END NOTIFICATION CARD BASIC CLASS */

/* NOTIFY CARD CLASSES */
/* show classes created dynamically by script depending on user values */
.notify-show-slide {}
.notify-show-jelly {}
.notify-show-wall {}
.notify-show-fade {}
.notify-show-grow {}
.notify-show-neonLight {}
.notify-show-bounceDrop {}
.notify-show-flip3D {}
.notify-show-shake {}
.notify-show-glitch {}
/* hide classes created dynamically by script depending on user values */
.notify-hide-rocket {}
.notify-hide-fadeout {}
.notify-hide-shrink {}
/* END NOTIFY CARD CLASSES */

/* NOTIFY CARD ANIMATIONS */
/* pushdown/pullup animations - target height comes from --push-height
   (set by BSNotify#_showBlock to the notification's real, about-to-be-shown
   height), not a fixed value: animating to a taller-than-real height here
   would push existing block notifications further than necessary, which
   then snap back once the real (shorter) height gets applied afterwards */
@keyframes pushdown {
  0%   { height: 0px; }
  100% { height: var(--push-height, 105px); }
}
@keyframes pullup {
  0%   { height: var(--push-height, 105px); }
  100% { height: 0px; }
}
/* grow-in/shrink-out: like pushdown/pullup but dynamic, since card height
   varies with notifyHeight - the target values come in via custom
   properties (see BSNotify#_growIn/_shrinkOut) instead of being hardcoded */
@keyframes grow-in {
  0%   { height: 0px; margin: 0; }
  100% { height: var(--grow-height); margin: var(--grow-margin); }
}
@keyframes shrink-out {
  0%   { height: var(--shrink-height); margin: var(--shrink-margin); }
  100% { height: 0px; margin: 0; }
}
/* rocket animation */
@keyframes rocket-left {
    0% {transform:translate(4px,1px);}
    4%	{transform:translate(1px,2px);}
    8%	{transform:translate(6px,0px);}
   12%	{transform:translate(1px,4px);}
   16%	{transform:translate(10px,2px);}
   20%	{transform:translate(0px,4px);}
   24%	{transform:translate(8px,1px);}
   28%	{transform:translate(0px,5px);}
   32%	{transform:translate(13px,1px);}
   36%	{transform:translate(4px,3px);}
   40%	{transform:translate(15px,1px);}
   44%	{transform:translate(0px,5px);}
   48%	{transform:translate(20px,1px);}
   52%	{transform:translate(8px,1px);}
   56%	{transform:translate(25px,6px);}
   60%	{transform:translate(15px,3px);}
   64%	{transform:translate(26px,7px);}
   68%	{transform:translate(22px,1px);}
   72%	{transform:scale(1,1);opacity:1;}
   76%	{transform:scale(1,0.01);}
   80% {left:0px;}
   84%	{}
   88%	{}
   92%	{}
   96%	{}
  100%	{left:-450px;opacity:0;}
}
@keyframes rocket-right {
    0% {transform:translate(4px,1px);}
    4%	{transform:translate(1px,2px);}
    8%	{transform:translate(6px,0px);}
   12%	{transform:translate(1px,4px);}
   16%	{transform:translate(10px,2px);}
   20%	{transform:translate(0px,4px);}
   24%	{transform:translate(8px,1px);}
   28%	{transform:translate(0px,5px);}
   32%	{transform:translate(13px,1px);}
   36%	{transform:translate(4px,3px);}
   40%	{transform:translate(15px,1px);}
   44%	{transform:translate(0px,5px);}
   48%	{transform:translate(20px,1px);}
   52%	{transform:translate(8px,1px);}
   56%	{transform:translate(25px,6px);}
   60%	{transform:translate(15px,3px);}
   64%	{transform:translate(26px,7px);}
   68%	{transform:translate(22px,1px);}
   72%	{transform:scale(1,1);opacity:1;}
   76%	{transform:scale(1,0.01);}
   80% {left:0px;}
   84%	{}
   88%	{}
   92%	{}
   96%	{}
  100%	{left:450px;opacity:0;}
}
/* end rocket animation */
/* wall animation */
@keyframes wall-left {
   0%	{left: -450px; opacity: 0.6;}
   4%	{}
   8%	{}
  12%	{}
  16%	{}
  20%	{left: 30px; transform:scale(1 , 1);}
  24%	{left: 30px; top: 0px; transform:scale(0.91, 1.09);}
  25% {top: -17px; transform:scale(0.9, 1.1);}
  26%, 27% {left: 0px; top: -25px;}
  28%	{left: -20px; top: -26px;}
  29%	{left: -40px; top: -27px;}
  30%	{}
  31%	{top:-28px; transform:scale(1,1); opacity:1;}
  32%	{left: -70px; top:-30px;}
  36%	{transform:scale(0.95, 1.05);}
  39% {left: -55px; }
  40%	{top:0px; transform:scale(1,1);}
  43% {transform:scale(1.04,0.96);}
  44%	{top:-15px;}
  48%	{left: -42px;}
  52%	{top: 0px; transform:scale(1,1);}
  55% {transform:scale(1.03,0.97);}
  56%	{left: -30px;}
  60% {top: -10px;  transform:scale(1,1);}
  64%	{left: -22px;}
  68% {top: 0px;}
  71%	{transform:scale(1.03,0.97);}
  72%	{left: -15px;}
  76%	{top: -2px;}
  80%	{left: -11px;}
  84% {top: 0px; transform:scale(1,1);}
  88% {left: -7px;}
  90% {left: -6px;}
  92% {left: -5px;}
  94% {left: -4px;}
  96% {left: -3px;}
  98% {left: -2px;}
 100%	{left: 0px; transform:scale(1 , 1); }
}
@keyframes wall-right {
   0%	{right: -450px; opacity: 0.6;}
   4%	{}
   8%	{}
  12%	{}
  16%	{}
  20%	{right: 30px; transform:scale(1 , 1);}
  24%	{right: 30px; top: 0px; transform:scale(0.91, 1.09);}
  25% {top: -17px; transform:scale(0.9, 1.1);}
  26%, 27% {right: 0px; top: -25px;}
  28%	{right: -20px; top: -26px;}
  29%	{right: -40px; top: -27px;}
  30%	{}
  31%	{top:-28px; transform:scale(1,1); opacity:1;}
  32%	{right: -70px; top:-30px;}
  36%	{transform:scale(0.95, 1.05);}
  39% {right: -55px; }
  40%	{top:0px; transform:scale(1,1);}
  43% {transform:scale(1.04,0.96);}
  44%	{top:-15px;}
  48%	{right: -42px;}
  52%	{top: 0px; transform:scale(1,1);}
  55% {transform:scale(1.03,0.97);}
  56%	{right: -30px;}
  60% {top: -10px;  transform:scale(1,1);}
  64%	{right: -22px;}
  68% {top: 0px;}
  71%	{transform:scale(1.02,0.97);}
  72%	{right: -15px;}
  76%	{top: -2px;}
  80%	{right: -11px;}
  84% {top: 0px; transform:scale(1,1);}
  88% {right: -7px;}
  90% {right: -6px;}
  92% {right: -5px;}
  94% {right: -4px;}
  96% {right: -3px;}
  98% {right: -2px;}
 100%	{right: 0px; transform:scale(1 , 1); }
}
/* end wall animation */
/* slide animation */
@keyframes slide-left {
   0% {left: -450px; opacity: 0.6;}
  50% {left: 30px;}
  60% {left: -20px;}
  70% {left: 15px;}
  80% {left: -5px; opacity: 1;}
  90%	{left: 5px;}
 100% {left: 0px;}
}
@keyframes slide-right {
   0% {right: -450px; opacity: 0.6;}
  50% {right: 30px;}
  60% {right: -20px;}
  70% {right: 15px;}
  80% {right: -5px; opacity: 1;}
  90%	{right: 5px;}
 100% {right: 0px;}
}
/* end slide animation */
/* jelly animation */
@keyframes jelly-left {
   0%	{transform:scale(0 , 0); opacity:0;}
   4%	{}
   8%	{}
  12%	{}
  16%	{}
  20%	{transform:scale(1.2 , 1);}
  24%	{}
  28%	{transform:scale(1 , 1.1);}
  32%	{}
  36%	{transform:scale(0.9, 1);}
  40%	{}
  44%	{transform:scale(1 , 0.9); }
  48%	{}
  52% {transform:scale(1.05 , 1); opacity:1;}
  56%	{}
  60% {transform:scale(1, 1.05);}
  64%	{}
  68% {transform:scale(0.95, 1);}
  72%	{}
  76%	{transform:scale(1, 0.95);}
  80%	{}
  84% {}
  88%	{transform:scale(1.02, 1.02);}
  92% {}
  96%	{}
 100%	{transform:scale(1 , 1);}
}
@keyframes jelly-right {
   0%	{transform:scale(0 , 0); opacity:0;}
   4%	{}
   8%	{}
  12%	{}
  16%	{}
  20%	{transform:scale(1.2 , 1);}
  24%	{}
  28%	{transform:scale(1 , 1.1);}
  32%	{}
  36%	{transform:scale(0.9, 1);}
  40%	{}
  44%	{transform:scale(1 , 0.9); }
  48%	{}
  52% {transform:scale(1.05 , 1); opacity:1;}
  56%	{}
  60% {transform:scale(1, 1.05);}
  64%	{}
  68% {transform:scale(0.95, 1);}
  72%	{}
  76%	{transform:scale(1, 0.95);}
  80%	{}
  84% {}
  88%	{transform:scale(1.02, 1.02);}
  92% {}
  96%	{}
 100%	{transform:scale(1 , 1);}
}
/* end jelly animation */
/* fade/grow/shrink/fadeout: non-directional, shared by card and block */
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes grow {
  0%   { transform: scale(0); opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(0.96); }
  85%  { transform: scale(1.04); }
  93%  { transform: scale(0.98); }
  100% { transform: scale(1); opacity: 1; }
}
/* neonLight showTransition: irregular on/off flicker settling into fully
   lit, like a neon sign warming up */
@keyframes neonLight {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  12%  { opacity: 0.2; }
  20%  { opacity: 1; }
  26%  { opacity: 0.3; }
  32%  { opacity: 1; }
  45%  { opacity: 0.15; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes shrink {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
/* bounceDrop showTransition: falls in from above, bounces on landing */
@keyframes bounceDrop {
  0%   { transform: translateY(-60px); opacity: 0; }
  50%  { transform: translateY(0); opacity: 1; }
  65%  { transform: translateY(-14px); }
  80%  { transform: translateY(0); }
  90%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
/* flip3D showTransition: tips forward out of a 3D fold, settling flat */
@keyframes flip3D {
  0%   { transform: perspective(600px) rotateX(90deg); opacity: 0; }
  60%  { transform: perspective(600px) rotateX(-12deg); opacity: 1; }
  80%  { transform: perspective(600px) rotateX(6deg); }
  100% { transform: perspective(600px) rotateX(0deg); }
}
/* shake showTransition: appears, then wobbles side to side a few times */
@keyframes shake {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  20%  { transform: translateX(-8px); }
  35%  { transform: translateX(7px); }
  50%  { transform: translateX(-6px); }
  65%  { transform: translateX(4px); }
  80%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
/* glitch showTransition: jittery position/brightness jumps settling clean */
@keyframes glitch {
  0%   { opacity: 0; transform: translateX(0); filter: brightness(1); }
  10%  { opacity: 1; transform: translateX(-4px); filter: brightness(1.4) contrast(1.3); }
  20%  { transform: translateX(3px); filter: brightness(0.8); }
  30%  { transform: translateX(-2px); filter: brightness(1.3); }
  40%  { transform: translateX(0); opacity: 0.6; }
  50%  { transform: translateX(4px); opacity: 1; filter: brightness(1.2); }
  60%  { transform: translateX(-3px); }
  70%  { opacity: 0.7; }
  80%  { transform: translateX(2px); opacity: 1; filter: brightness(1); }
  100% { transform: translateX(0); opacity: 1; filter: none; }
}
/* end fade/grow/shrink/fadeout animations */
/* END NOTIFY CARD ANIMATIONS */



/* NOTIFICATION BLOCK BASIC CLASS */
.notifycontainer-block {
  z-index: 9999;
  width: 100%;
  left: 0px;
  position: fixed;
  overflow: visible;
  background: rgba(0,0,0,0);
}
.notify-block-primary {
  position: relative;
  background: linear-gradient(to right, rgba(0,123,255,0.65), rgba(0,170,255,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  width: 100%;
  overflow: hidden;
}
.notify-block-success {
  position: relative;
  background: linear-gradient(to right, rgba(40,167,69,0.65), rgba(60,220,120,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  width: 100%;
  overflow: hidden;
}
.notify-block-info {
  position: relative;
  background: linear-gradient(to right, rgba(23,162,184,0.65), rgba(40,200,220,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  width: 100%;
  overflow: hidden;
}
.notify-block-warning {
  position: relative;
  background: linear-gradient(to right, rgba(255,193,7,0.65), rgba(255,213,79,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  width: 100%;
  overflow: hidden;
}
.notify-block-danger {
  position: relative;
  background: linear-gradient(to right, rgba(220,53,69,0.65), rgba(255,99,110,0.65));
  box-shadow: 0 3px 7px rgba(0,0,0,0.3);
  width: 100%;
  overflow: hidden;
}
.notify-block-primary.no-blur { background: linear-gradient(to right, rgb(0,123,255), rgb(0,170,255)); }
.notify-block-success.no-blur { background: linear-gradient(to right, rgb(40,167,69), rgb(60,220,120)); }
.notify-block-info.no-blur { background: linear-gradient(to right, rgb(23,162,184), rgb(40,200,220)); }
.notify-block-warning.no-blur { background: linear-gradient(to right, rgb(255,193,7), rgb(255,213,79)); }
.notify-block-danger.no-blur { background: linear-gradient(to right, rgb(220,53,69), rgb(255,99,110)); }
/* END NOTIFICATION BLOCK BASIC CLASS */

/* NOTIFY BLOCK CLASSES */
/* show classes created dynamically by script depending on user values */
.notify-block-show-slide {}
.notify-block-show-jelly {}
.notify-block-show-fade {}
.notify-block-show-grow {}
.notify-block-show-neonLight {}
.notify-block-show-bounceDrop {}
.notify-block-show-flip3D {}
.notify-block-show-shake {}
.notify-block-show-glitch {}
/* hide classes created dynamically by script depending on user values */
.notify-block-hide-rocket {}
.notify-block-hide-fadeout {}
.notify-block-hide-shrink {}
.notify-block-hide-slide {}
/* END NOTIFY BLOCK CLASSES */

/* NOTIFY BLOCK ANIMATIONS */
/* rocket animation */
@keyframes rocket-top {
    0% {transform:translate(4px,1px);}
    4%	{transform:translate(1px,2px);}
    8%	{transform:translate(6px,0px);}
   12%	{transform:translate(1px,4px);}
   16%	{transform:translate(10px,2px);}
   20%	{transform:translate(0px,4px);}
   24%	{transform:translate(8px,1px);}
   28%	{transform:translate(0px,5px);}
   32%	{transform:translate(13px,1px);}
   36%	{transform:translate(4px,3px);}
   40%	{transform:translate(15px,1px);}
   44%	{transform:translate(0px,5px);}
   48%	{transform:translate(20px,1px);}
   52%	{transform:translate(8px,1px);}
   56%	{transform:translate(25px,6px);}
   60%	{transform:translate(15px,3px);}
   64%	{transform:translate(26px,7px);}
   68%	{transform:translate(22px,1px);}
   72%	{transform:scale(1,1);opacity:1;}
   76%	{transform:scale(1,0.01);}
   80% {left:0px;}
   84%	{}
   88%	{}
   92%	{}
   96%	{}
  100%	{left:-450px;opacity:0;}
}
@keyframes rocket-bottom {
    0% {transform:translate(4px,1px);}
    4%	{transform:translate(1px,2px);}
    8%	{transform:translate(6px,0px);}
   12%	{transform:translate(1px,4px);}
   16%	{transform:translate(10px,2px);}
   20%	{transform:translate(0px,4px);}
   24%	{transform:translate(8px,1px);}
   28%	{transform:translate(0px,5px);}
   32%	{transform:translate(13px,1px);}
   36%	{transform:translate(4px,3px);}
   40%	{transform:translate(15px,1px);}
   44%	{transform:translate(0px,5px);}
   48%	{transform:translate(20px,1px);}
   52%	{transform:translate(8px,1px);}
   56%	{transform:translate(25px,6px);}
   60%	{transform:translate(15px,3px);}
   64%	{transform:translate(26px,7px);}
   68%	{transform:translate(22px,1px);}
   72%	{transform:scale(1,1);opacity:1;}
   76%	{transform:scale(1,0.01);}
   80% {left:0px;}
   84%	{}
   88%	{}
   92%	{}
   96%	{}
  100%	{left:450px;opacity:0;}
}
/* end rocket animation */
/* slide animation */
@keyframes slide-top {
    0% {top:-150px;opacity:0.6;}
   40%	{top:0px;}
   50% {top:-30px;}
   60% {top:0px;}
   70% {top:-15px;opacity:1;}
   80% {top:0px;}
   90%	{top:-5px;}
  100% {top:0px;}
}
@keyframes slide-bottom {
    0% {bottom:-150px;opacity:0.6;}
   40% {bottom:0px;}
   50% {bottom:-30px;}
   60% {bottom:0px;}
   70% {bottom:-15px;opacity:1;}
   80% {bottom:0px;}
   90% {bottom:-5px;}
  100% {bottom:0px;}
}
/* end slide animation */
/* jelly animation */
@keyframes jelly-top {
    0%	{transform:scale(0 , 0); opacity:0;}
    4%	{}
    8%	{}
   12%	{}
   16%	{}
   20%	{}
   24%	{}
   28%	{}
   32%	{}
   36%	{}
   40%	{}
   44%	{transform:scale(1 , 1.1); opacity:1;}
   48%	{}
   52%	{}
   56%	{transform:scale(1.09 , 1);}
   60%	{}
   64%	{}
   68%	{transform:scale(1.03 , 0.9);}
   72%	{}
   76%	{}
   80% {transform:scale(1 , 1);}
   84%	{}
   88%	{}
   92%	{transform:scale(1.03 , 1.05);}
   96%	{}
  100%	{transform:scale(1 , 1);}
}
@keyframes jelly-bottom {
    0%	{transform:scale(0 , 0); opacity:0;}
    4%	{}
    8%	{}
   12%	{}
   16%	{}
   20%	{}
   24%	{}
   28%	{}
   32%	{}
   36%	{}
   40%	{}
   44%	{transform:scale(1 , 1.1); opacity:1;}
   48%	{}
   52%	{}
   56%	{transform:scale(1.09 , 1);}
   60%	{}
   64%	{}
   68%	{transform:scale(1.03 , 0.9);}
   72%	{}
   76%	{}
   80% {transform:scale(1 , 1);}
   84%	{}
   88%	{}
   92%	{transform:scale(1.03 , 1.05);}
   96%	{}
  100%	{transform:scale(1 , 1);}
}
/* end jelly animation */
/* END NOTIFY BLOCK ANIMATIONS */

/* Reserved for future show/hide transitions: not yet wired up to showTransition/hideTransition */
@keyframes drop {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.1% { transform: matrix3d(1.523, 0.108, 0, 0, 0.108, 1.523, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.2% { transform: matrix3d(1.662, 0.154, 0, 0, 0.154, 1.662, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.2% { transform: matrix3d(1.704, 0.18, 0, 0, 0.18, 1.704, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(1.556, 0.18, 0, 0, 0.18, 1.556, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.71% { transform: matrix3d(1.516, 0.175, 0, 0, 0.175, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.21% { transform: matrix3d(1.122, 0.117, 0, 0, 0.117, 1.122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.71% { transform: matrix3d(0.79, 0.066, 0, 0, 0.066, 0.79, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(0.714, 0.053, 0, 0, 0.053, 0.714, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.21% { transform: matrix3d(0.671, 0.041, 0, 0, 0.041, 0.671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.72% { transform: matrix3d(0.759, 0.03, 0, 0, 0.03, 0.759, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(0.921, 0.022, 0, 0, 0.022, 0.921, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.22% { transform: matrix3d(0.944, 0.021, 0, 0, 0.021, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.72% { transform: matrix3d(1.099, 0.011, 0, 0, 0.011, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.22% { transform: matrix3d(1.154, 0.002, 0, 0, 0.002, 1.154, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.147, -0.001, 0, 0, -0.001, 1.147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.23% { transform: matrix3d(1.026, -0.005, 0, 0, -0.005, 1.026, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(0.96, -0.005, 0, 0, -0.005, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.23% { transform: matrix3d(0.928, -0.005, 0, 0, -0.005, 0.928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.24% { transform: matrix3d(1.034, -0.001, 0, 0, -0.001, 1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  54.25% { transform: matrix3d(0.984, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(0.988, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  74.27% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  84.28% { transform: matrix3d(1.002, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  94.29% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes elastic {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);opacity:0;}
  3.4% {transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% {transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% {transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% {transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% {transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% {transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% {transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% {transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% {transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% { transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% {transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% {transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
  29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% {  transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% {  transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% {  transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% {  transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity:1;}
  59.86% {  transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% {  transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% {  transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% {transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% {  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
}

@keyframes smack {
  0% { transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.2% { transform: matrix3d(0.345, 0.383, 0, 0, 0.252, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.5% { transform: matrix3d(0.485, 0.5, 0, 0, 0.326, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(0.673, 0.603, 0, 0, 0.393, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.01% { transform: matrix3d(0.88, 0.616, 0, 0, 0.403, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(1.064, 0.467, 0, 0, 0.308, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.51% { transform: matrix3d(1.087, 0.424, 0, 0, 0.28, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.92% { transform: matrix3d(1.139, 0.197, 0, 0, 0.131, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(1.137, 0.155, 0, 0, 0.103, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.075, -0.003, 0, 0, -0.002, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.032, -0.03, 0, 0, -0.02, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(1.012, -0.033, 0, 0, -0.022, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.63% { transform: matrix3d(0.994, -0.029, 0, 0, -0.019, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40.14% { transform: matrix3d(0.985, -0.015, 0, 0, -0.01, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(1, 0.002, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.36% { transform: matrix3d(1.002, 0.001, 0, 0, 0.001, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  84.68% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes spin {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.2% { transform: matrix3d(0.763, 0.652, 0, 0, -0.501, 0.871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.614, 0.797, 0, 0, -0.649, 0.768, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(0.325, 0.953, 0, 0, -0.853, 0.534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.083, 1.002, 0, 0, -0.961, 0.296, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(-0.149, 0.992, 0, 0, -1.003, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { transform: matrix3d(-0.154, 0.991, 0, 0, -1.003, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { transform: matrix3d(-0.181, 0.984, 0, 0, -0.994, -0.111, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(-0.163, 0.987, 0, 0, -0.994, -0.116, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(-0.066, 0.998, 0, 0, -0.998, -0.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { transform: matrix3d(-0.028, 1, 0, 0, -0.999, -0.037, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(-0.004, 1, 0, 0, -1, -0.015, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { transform: matrix3d(0.013, 1, 0, 0, -1, 0.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { transform: matrix3d(-0.001, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes clock {
  0%     {transform: matrix3d( 1		  , 0		 	, 0 , 0 , 0			 , 1		  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.15%  {transform: matrix3d( 0.589  , 0		 	, 0 , 0 , 0			 , 1.514  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3%   {transform: matrix3d( 0.297  , 0		 	, 0 , 0 , 0			 , 1.879  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.46%  {transform: matrix3d( 0.158  , 0		 	, 0 , 0 , 0			 , 2.052  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61%  {transform: matrix3d( 0.125  , 0		 	, 0 , 0 , 0			 , 2.093  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.16% {transform: matrix3d( 0.183	, 0    	, 0 , 0 , 0			 , 2.021  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.72% {transform: matrix3d( 0.205	, 0		 	, 0 , 0 , 0			 , 1.994  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9%	 {transform: matrix3d( 0.201 	, 0		 	, 0 , 0 , 0			 , 1.998  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% 	 {transform: matrix3d( 0.201	, 0		 	, 0 , 0 , 0			 , 1.998  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.15% {transform: matrix3d( 0.138	, 0.145 , 0 , 0 , -1.445 , 1.382  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.3%  {transform: matrix3d( 0.038	, 0.196 , 0 , 0 , -1.964 , 0.379  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.83% {transform: matrix3d( -0.006 , 0.2	  , 0 , 0 , -2		 , -0.059 , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.46% {transform: matrix3d( -0.016 , 0.199 , 0 , 0 , -1.994 , -0.164 , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.61% {transform: matrix3d( -0.029 , 0.198 , 0 , 0 , -1.979 , -0.292 , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.16% {transform: matrix3d( -0.006 , 0.2		, 0 , 0 , -1.999 , -0.065 , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.99% {transform: matrix3d( 0			, 0.2		, 0 , 0 , -2		 , 0.005  , 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.72% {transform: matrix3d( 0.002	, 0.2		, 0 , 0 , -2		 , 0.02		, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  49.9%  {transform: matrix3d( 0.001	, 0.2		, 0 , 0 , -2		 , 0.005	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% 	 {transform: matrix3d( 0.001	, 0.2		, 0 , 0 , -2		 , 0.005	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% {transform: matrix3d( 0			, 0.611 , 0 , 0 , -1.486 , 0.001	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  54.3%  {transform: matrix3d( 0			, 0.903 , 0 , 0 , -1.121 , -0.001	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  55.83% {transform: matrix3d( -0.001 , 1.015 , 0 , 0 , -0.981 , -0.001	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% {transform: matrix3d( -0.001 , 1.042 , 0 , 0 , -0.948 , -0.001	, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.61% {transform: matrix3d( 0			, 1.075 , 0 , 0 , -0.907 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.16% {transform: matrix3d( 0		  , 1.017 , 0 , 0 , -0.979 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.99% {transform: matrix3d( 0		  , 0.999 , 0 , 0 , -1.001 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.72% {transform: matrix3d( 0		  , 0.995 , 0 , 0 , -1.006 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% 	 {transform: matrix3d( 0		  , 0.999 , 0 , 0 , -1.002 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.83% {transform: matrix3d( 0		  ,	1			, 0 , 0 , -1		 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  91.99% {transform: matrix3d( 0		  , 1			, 0 , 0 , -1		 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% 	 {transform: matrix3d( 0		  , 1			, 0 , 0 , -1		 , 0			, 0 , 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes splat {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
  2.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1); }
  3.37% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1); }
  3.47% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1); }
  4.58% { transform: matrix3d(2.061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1); }
  5.69% { transform: matrix3d(2.321, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1); }
  5.76% { transform: matrix3d(2.32, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1); }
  7.41% { transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1); }
  7.51% { transform: matrix3d(1.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1); }
  7.88% { transform: matrix3d(1.771, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1); }
  8.68% { transform: matrix3d(1.408, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1); }
  10.03% { transform: matrix3d(0.982, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1); }
  10.85% { transform: matrix3d(0.822, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1); }
  11.53% { transform: matrix3d(0.732, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1); }
  12.22% { transform: matrix3d(0.672, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1); }
  14.18% { transform: matrix3d(0.612, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1); }
  14.37% { transform: matrix3d(0.612, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1); }
  19.23% { transform: matrix3d(0.737, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1); }
  20.01% { transform: matrix3d(0.763, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1); }
  23.05% { transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1); }
  25.75% { transform: matrix3d(0.923, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1); }
  26.94% { transform: matrix3d(0.947, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1); }
  31.58% { transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1); }
  31.73% { transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1); }
  37.32% { transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1); }
  38.15% { transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1); }
  42.35% { transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1); }
  48.9% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1); }
  57.77% { transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  60.47% { transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1); }
  69.36% { transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}