body {
  position: relative;
}

.modula-regular {
  font-family: modula-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.modula-bold {
  font-family: modula-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.pinot-grigio-regular {
  font-family: pinot-grigio-modern, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.pinot-grigio-italic {
  font-family: pinot-grigio-modern, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.sky-bg {
  background: linear-gradient(270deg, #e6fffa, #629fe3);
  background-size: 400% 400%;

  -webkit-animation: sky-bg 20s ease infinite;
  -moz-animation: sky-bg 20s ease infinite;
  animation: sky-bg 20s ease infinite;
}

@-webkit-keyframes sky-bg {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes sky-bg {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes sky-bg {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.color-bath {
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  pointer-events: all;
}

/* 
 *
 * GRADIENT ANIMATIONS
 *
 */


/*
 * EMMA
 */
@keyframes emma-thunderstorm {
   0.00% { background-color: #002255; opacity: 0; }
   2.00% { background-color: #002255; opacity: 1; }
  25.00% { background-color: #552255; opacity: 1; }
  29.64% { background-color: #552255; opacity: 1; }
  30.17% { background-color: #555522; opacity: 1; }
  30.83% { background-color: #552255; opacity: 1; }
  32.29% { background-color: #aa5599; opacity: 1; }
  32.76% { background-color: #555522; opacity: 1; }
  33.16% { background-color: #aa5599; opacity: 1; }
  33.49% { background-color: #555522; opacity: 1; }
  33.95% { background-color: #552255; opacity: 1; }
  34.08% { background-color: #552255; opacity: 1; }
  34.42% { background-color: #555522; opacity: 1; }
  34.75% { background-color: #aa5599; opacity: 1; }
  36.41% { background-color: #aa5599; opacity: 1; }
  37.47% { background-color: #555522; opacity: 1; }
  38.99% { background-color: #552255; opacity: 1; }
  39.39% { background-color: #552255; opacity: 1; }
  40.38% { background-color: #444411; opacity: 1; }
  41.45% { background-color: #aa5599; opacity: 1; }
  42.24% { background-color: #aa5599; opacity: 1; }
  42.77% { background-color: #444411; opacity: 1; }
  43.30% { background-color: #552255; opacity: 1; }
  50.00% { background-color: #aa5599; opacity: 1; }
  98.00% { background-color: #002255; opacity: 1; }
  100.0% { background-color: #002255; opacity: 0; }
}

@keyframes emma-fireplace {
   0.00% { background-color: #901111; opacity: 0; }
   2.00% { background-color: #901111; opacity: 1; }
   3.00% { background-color: #dd620e; opacity: 1; }
   3.25% { background-color: #dd620e; opacity: 1; }
   3.32% { background-color: #fbc034; opacity: 1; }
   3.38% { background-color: #dd230e; opacity: 1; }
   6.50% { background-color: #dd230e; opacity: 1; }
   6.56% { background-color: #fbc034; opacity: 1; }
   6.70% { background-color: #dd620e; opacity: 1; }
   7.43% { background-color: #dd620e; opacity: 1; }
   7.69% { background-color: #fbc034; opacity: 1; }
   9.62% { background-color: #dd230e; opacity: 1; }
  10.81% { background-color: #dd230e; opacity: 1; }
  11.54% { background-color: #fbc034; opacity: 1; }
  12.20% { background-color: #901111; opacity: 1; }
  13.20% { background-color: #901111; opacity: 1; }
  15.65% { background-color: #fbc034; opacity: 1; }
  20.82% { background-color: #dd620e; opacity: 1; }
  21.15% { background-color: #dd620e; opacity: 1; }
  25.20% { background-color: #fbc034; opacity: 1; }
  30.50% { background-color: #dd230e; opacity: 1; }
  40.72% { background-color: #dd230e; opacity: 1; }
  40.78% { background-color: #fbc034; opacity: 1; }
  41.11% { background-color: #901111; opacity: 1; }
  41.78% { background-color: #901111; opacity: 1; }
  42.04% { background-color: #fbc034; opacity: 1; }
  43.77% { background-color: #dd620e; opacity: 1; }
  43.90% { background-color: #dd620e; opacity: 1; }
  44.23% { background-color: #fbc034; opacity: 1; }
  47.35% { background-color: #dd230e; opacity: 1; }
  48.87% { background-color: #dd620e; opacity: 1; }
  50.40% { background-color: #901111; opacity: 1; }
  61.21% { background-color: #dd230e; opacity: 1; }
  63.40% { background-color: #fbc034; opacity: 1; }
  64.19% { background-color: #dd620e; opacity: 1; }
  68.90% { background-color: #dd230e; opacity: 1; }
  70.16% { background-color: #fbc034; opacity: 1; }
  73.41% { background-color: #dd230e; opacity: 1; }
  75.86% { background-color: #901111; opacity: 1; }
  76.72% { background-color: #dd230e; opacity: 1; }
  77.98% { background-color: #901111; opacity: 1; }
  88.20% { background-color: #dd230e; opacity: 1; }
  90.72% { background-color: #901111; opacity: 1; }
  95.69% { background-color: #dd620e; opacity: 1; }
  98.50% { background-color: #901111; opacity: 1; }
 100.00% { background-color: #901111; opacity: 0; }
}

@keyframes emma-soccer {
   0.00% { background-color: #09d6bc; opacity: 0; }
   1.00% { background-color: #09d6bc; opacity: 1; }
   1.21% { background-color: #00ff85; opacity: 1; }
   2.06% { background-color: #e3ff00; opacity: 1; }
   3.13% { background-color: #e3ff00; opacity: 1; }
   3.20% { background-color: #09d6bc; opacity: 1; }
   4.91% { background-color: #00ff85; opacity: 1; }
   9.60% { background-color: #09d6bc; opacity: 1; }
  17.57% { background-color: #00ff85; opacity: 1; }
  17.71% { background-color: #e3ff00; opacity: 1; }
  17.85% { background-color: #00ff85; opacity: 1; }
  18.85% { background-color: #09d6bc; opacity: 1; }
  22.48% { background-color: #00ff85; opacity: 1; }
  22.90% { background-color: #09d6bc; opacity: 1; }
  23.12% { background-color: #00ff85; opacity: 1; }
  23.26% { background-color: #09d6bc; opacity: 1; }
  23.40% { background-color: #e3ff00; opacity: 1; }
  23.76% { background-color: #09d6bc; opacity: 1; }
  23.90% { background-color: #00ff85; opacity: 1; }
  25.18% { background-color: #09d6bc; opacity: 1; }
  25.46% { background-color: #e3ff00; opacity: 1; }
  25.75% { background-color: #00ff85; opacity: 1; }
  26.24% { background-color: #09d6bc; opacity: 1; }
  42.53% { background-color: #00ff85; opacity: 1; }
  49.64% { background-color: #09d6bc; opacity: 1; }
  49.72% { background-color: #e3ff00; opacity: 1; }
  49.79% { background-color: #00ff85; opacity: 1; }
  51.85% { background-color: #00ff85; opacity: 1; }
  51.92% { background-color: #e3ff00; opacity: 1; }
  51.99% { background-color: #00ff85; opacity: 1; }
  59.25% { background-color: #09d6bc; opacity: 1; }
  61.74% { background-color: #00ff85; opacity: 1; }
  66.36% { background-color: #09d6bc; opacity: 1; }
  67.35% { background-color: #00ff85; opacity: 1; }
  67.43% { background-color: #e3ff00; opacity: 1; }
  67.50% { background-color: #09d6bc; opacity: 1; }
  71.05% { background-color: #00ff85; opacity: 1; }
  78.24% { background-color: #09d6bc; opacity: 1; }
  82.22% { background-color: #00ff85; opacity: 1; }
  82.57% { background-color: #09d6bc; opacity: 1; }
  82.93% { background-color: #00ff85; opacity: 1; }
  83.43% { background-color: #e3ff00; opacity: 1; }
  84.85% { background-color: #e3ff00; opacity: 1; }
  85.49% { background-color: #00ff85; opacity: 1; }
  87.27% { background-color: #09d6bc; opacity: 1; }
  90.04% { background-color: #00ff85; opacity: 1; }
  90.18% { background-color: #e3ff00; opacity: 1; }
  90.26% { background-color: #00ff85; opacity: 1; }
  94.10% { background-color: #09d6bc; opacity: 1; }
  98.50% { background-color: #00ff85; opacity: 1; }
 100.00% { background-color: #00ff85; opacity: 0; }
}

@keyframes emma-freight-train {
   0.00% { background-color: #392e47; opacity: 0; }
   1.00% { background-color: #392e47; opacity: 1; }
  21.89% { background-color: #262527; opacity: 1; }
  21.96% { background-color: #c5c5c5; opacity: 1; }
  36.66% { background-color: #eae2f4; opacity: 1; }
  39.19% { background-color: #5d5b60; opacity: 1; }
  48.57% { background-color: #29293c; opacity: 1; }
  58.95% { background-color: #5d5d60; opacity: 1; }
  69.39% { background-color: #1c1c22; opacity: 1; }
  99.00% { background-color: #383969; opacity: 1; }
 100.00% { background-color: #383969; opacity: 0; }
}

.emma-thunderstorm {
  animation-duration: 15s;
  animation-name: emma-thunderstorm;
}

.emma-fireplace {
  animation-duration: 15.08s;
  animation-name: emma-fireplace;
}

.emma-soccer {
  animation-duration: 14.06s;
  animation-name: emma-soccer;
}

.emma-freight-train {
  animation-duration: 15.03s;
  animation-name: emma-freight-train;
}

/*
 * MELINDA
 */
@keyframes mel-airplane {
   0.00% { background-color: #F4EDCE; opacity: 0;}
   1.00% { background-color: #F4EDCE; opacity: 1;}
  13.33% { background-color: #FAE172; opacity: 1;}
  26.67% { background-color: #ECFA72; opacity: 1;}
  40.00% { background-color: #72FA7D; opacity: 1;}
  53.33% { background-color: #FAE172; opacity: 1;}
  66.67% { background-color: #F4EDCE; opacity: 1;}
  78.67% { background-color: #9C915F; opacity: 1;}
  81.67% { background-color: #F4EDCE; opacity: 1;}
  83.33% { background-color: #756414; opacity: 1;}
  84.67% { background-color: #F4EDCE; opacity: 1;}
  91.73% { background-color: #756414; opacity: 1;}
  92.80% { background-color: #F4EDCE; opacity: 1;}
  99.00% { background-color: #F4EDCE; opacity: 1;}
 100.00% { background-color: #F4EDCE; opacity: 0;}
}
@keyframes mel-bubble {
   0.00% { background-color: #1B26D4; opacity: 0; }
   1.00% { background-color: #1B26D4; opacity: 1; }
   5.00% { background-color: #65A1F9; opacity: 1; }
   6.67% { background-color: #1B26D4; opacity: 1; }
   7.92% { background-color: #A2E3FC; opacity: 1; }
   8.92% { background-color: #1B26D4; opacity: 1; }
   9.92% { background-color: #65A1F9; opacity: 1; }
  10.93% { background-color: #1B26D4; opacity: 1; }
  11.76% { background-color: #BFEBFC; opacity: 1; }
  13.09% { background-color: #1B26D4; opacity: 1; }
  14.68% { background-color: #65A1F9; opacity: 1; }
  15.68% { background-color: #1B26D4; opacity: 1; }
  17.60% { background-color: #A2E3FC; opacity: 1; }
  18.93% { background-color: #1B26D4; opacity: 1; }
  25.27% { background-color: #EFFBFF; opacity: 1; }
  26.86% { background-color: #1B26D4; opacity: 1; }
  29.86% { background-color: #A2E3FC; opacity: 1; }
  31.03% { background-color: #F3FBFF; opacity: 1; }
  33.11% { background-color: #1B26D4; opacity: 1; }
  35.36% { background-color: #A2E3FC; opacity: 1; }
  37.03% { background-color: #F3FBFF; opacity: 1; }
  37.78% { background-color: #EFFBFF; opacity: 1; }
  38.53% { background-color: #F3FBFF; opacity: 1; }
  40.03% { background-color: #EFFBFF; opacity: 1; }
  41.53% { background-color: #1B26D4; opacity: 1; }
  44.20% { background-color: #A2E3FC; opacity: 1; }
  47.29% { background-color: #65A1F9; opacity: 1; }
  49.21% { background-color: #F3FBFF; opacity: 1; }
  50.71% { background-color: #1B26D4; opacity: 1; }
  54.55% { background-color: #A2E3FC; opacity: 1; }
  56.21% { background-color: #65A1F9; opacity: 1; }
  58.38% { background-color: #F3FBFF; opacity: 1; }
  60.22% { background-color: #1B26D4; opacity: 1; }
  61.97% { background-color: #A2E3FC; opacity: 1; }
  65.80% { background-color: #D6F8FF; opacity: 1; }
  68.31% { background-color: #1B26D4; opacity: 1; }
  70.06% { background-color: #A2E3FC; opacity: 1; }
  71.89% { background-color: #1B26D4; opacity: 1; }
  74.65% { background-color: #F3FBFF; opacity: 1; }
  76.90% { background-color: #A2E3FC; opacity: 1; }
  79.48% { background-color: #65A1F9; opacity: 1; }
  80.57% { background-color: #D6F8FF; opacity: 1; }
  86.32% { background-color: #1B26D4; opacity: 1; }
  88.16% { background-color: #F3FBFF; opacity: 1; }
  89.66% { background-color: #1B26D4; opacity: 1; }
  90.41% { background-color: #A2E3FC; opacity: 1; }
  92.99% { background-color: #65A1F9; opacity: 1; }
  99.00% { background-color: #1B26D4; opacity: 1; }
 100.00% { background-color: #1B26D4; opacity: 0; }
}
@keyframes mel-car-start {
   0.00% { background-color: #000000; opacity: 0; }
   1.00% { background-color: #000000; opacity: 1; }
   2.93% { background-color: #FF0303; opacity: 1; }
   5.73% { background-color: #F46262; opacity: 1; }
   6.80% { background-color: #A33C3C; opacity: 1; }
   8.80% { background-color: #EC3838; opacity: 1; }
  26.67% { background-color: #ECC938; opacity: 1; }
  37.47% { background-color: #A33C3C; opacity: 1; }
  39.00% { background-color: #FED101; opacity: 1; }
  41.67% { background-color: #A33C3C; opacity: 1; }
  45.07% { background-color: #EC3838; opacity: 1; }
  57.93% { background-color: #CF5252; opacity: 1; }
  59.73% { background-color: #EB3F3F; opacity: 1; }
  67.20% { background-color: #A33C3C; opacity: 1; }
  73.13% { background-color: #EC3838; opacity: 1; }
  76.33% { background-color: #A33C3C; opacity: 1; }
  82.13% { background-color: #D65454; opacity: 1; }
  88.33% { background-color: #A33C3C; opacity: 1; }
  92.73% { background-color: #CF5252; opacity: 1; }
  99.00% { background-color: #A33C3C; opacity: 1; }
 100.00% { background-color: #A33C3C; opacity: 0; }
}
@keyframes mel-chime {
   0.00% { background-color: #793354; opacity: 0; }
   0.87% { background-color: #FFC247; opacity: 1; }
   5.33% { background-color: #793377; opacity: 1; }
   5.53% { background-color: #FFC247; opacity: 1; }
  10.00% { background-color: #793377; opacity: 1; }
  10.20% { background-color: #FFC247; opacity: 1; }
  14.60% { background-color: #793377; opacity: 1; }
  14.80% { background-color: #FFC247; opacity: 1; }
  24.93% { background-color: #793377; opacity: 1; }
  25.20% { background-color: #FFC247; opacity: 1; }
  29.53% { background-color: #793377; opacity: 1; }
  29.73% { background-color: #FFC247; opacity: 1; }
  34.33% { background-color: #793377; opacity: 1; }
  34.53% { background-color: #FFC247; opacity: 1; }
  38.73% { background-color: #793377; opacity: 1; }
  38.93% { background-color: #FFC247; opacity: 1; }
  48.47% { background-color: #793354; opacity: 1; }
  54.67% { background-color: #793354; opacity: 1; }
  54.87% { background-color: #FFC247; opacity: 1; }
  64.67% { background-color: #793354; opacity: 1; }
  70.53% { background-color: #793354; opacity: 1; }
  70.73% { background-color: #FFC247; opacity: 1; }
  80.00% { background-color: #793354; opacity: 1; }
  86.67% { background-color: #793354; opacity: 1; }
  86.93% { background-color: #FFC247; opacity: 1; }
  97.07% { background-color: #793354; opacity: 1; }
  99.00% { background-color: #793354; opacity: 1; }
 100.00% { background-color: #793354; opacity: 0; }
}
@keyframes mel-crowd {
   0.00% { background-color: #1A94A9; opacity: 0; }
   1.00% { background-color: #1A94A9; opacity: 1; }
  15.07% { background-color: #20D98A; opacity: 1; }
  24.33% { background-color: #1A94A9; opacity: 1; }
  29.33% { background-color: #56FFB7; opacity: 1; }
  33.87% { background-color: #56FFB7; opacity: 1; }
  40.27% { background-color: #1A94A9; opacity: 1; }
  60.00% { background-color: #1A94A9; opacity: 1; }
  73.33% { background-color: #72D4E5; opacity: 1; }
  87.87% { background-color: #97FFD3; opacity: 1; }
  99.00% { background-color: #1A94A9; opacity: 1; }
 100.00% { background-color: #1A94A9; opacity: 0; }
}
@keyframes mel-dial-up {
   0.00% { background-color: #248717; opacity: 0; }
   1.00% { background-color: #248717; opacity: 1; }
   5.64% { background-color: #248717; opacity: 1; }
   5.97% { background-color: #C2FABC; opacity: 1; }
  14.66% { background-color: #C2FABC; opacity: 1; }
  14.80% { background-color: #248717; opacity: 1; }
  17.72% { background-color: #248717; opacity: 1; }
  18.05% { background-color: #FC9FD3; opacity: 1; }
  25.08% { background-color: #FC9FD3; opacity: 1; }
  25.35% { background-color: #248717; opacity: 1; }
  26.01% { background-color: #FC9FD3; opacity: 1; }
  31.32% { background-color: #FC9FD3; opacity: 1; }
  31.79% { background-color: #FAF778; opacity: 1; }
  36.96% { background-color: #FAF778; opacity: 1; }
  37.56% { background-color: #FCB249; opacity: 1; }
  44.19% { background-color: #FA9506; opacity: 1; }
  48.18% { background-color: #248717; opacity: 1; }
  48.51% { background-color: #7815C6; opacity: 1; }
  51.09% { background-color: #248717; opacity: 1; }
  52.16% { background-color: #BC7BEF; opacity: 1; }
  53.35% { background-color: #FF50EB; opacity: 1; }
  59.39% { background-color: #FF50EB; opacity: 1; }
  59.59% { background-color: #F08EF4; opacity: 1; }
  64.57% { background-color: #F08EF4; opacity: 1; }
  64.96% { background-color: #248717; opacity: 1; }
  73.39% { background-color: #248717; opacity: 1; }
  76.71% { background-color: #E6FEE3; opacity: 1; }
  77.17% { background-color: #248717; opacity: 1; }
  77.44% { background-color: #2BFC15; opacity: 1; }
  93.90% { background-color: #2BFC15; opacity: 1; }
  94.03% { background-color: #248717; opacity: 1; }
  99.00% { background-color: #248717; opacity: 1; }
 100.00% { background-color: #248717; opacity: 0; }
}
@keyframes mel-grocery {
   0.00% { background-color: #E87E7E; opacity: 0; }
   1.00% { background-color: #E87E7E; opacity: 1; }
   8.81% { background-color: #E81F1F; opacity: 1; }
   9.21% { background-color: #28B4EC; opacity: 1; }
  11.94% { background-color: #E81F1F; opacity: 1; }
  15.21% { background-color: #E81F1F; opacity: 1; }
  15.54% { background-color: #28B4EC; opacity: 1; }
  17.61% { background-color: #E81F1F; opacity: 1; }
  18.68% { background-color: #E81F1F; opacity: 1; }
  18.95% { background-color: #28B4EC; opacity: 1; }
  20.21% { background-color: #E81F1F; opacity: 1; }
  30.82% { background-color: #E81F1F; opacity: 1; }
  31.15% { background-color: #28B4EC; opacity: 1; }
  33.29% { background-color: #E81F1F; opacity: 1; }
  34.76% { background-color: #28B4EC; opacity: 1; }
  36.49% { background-color: #E81F1F; opacity: 1; }
  40.76% { background-color: #E81F1F; opacity: 1; }
  41.69% { background-color: #28B4EC; opacity: 1; }
  43.36% { background-color: #E81F1F; opacity: 1; }
  53.70% { background-color: #E81F1F; opacity: 1; }
  53.57% { background-color: #28B4EC; opacity: 1; }
  55.90% { background-color: #E81F1F; opacity: 1; }
  71.78% { background-color: #E81F1F; opacity: 1; }
  72.18% { background-color: #28B4EC; opacity: 1; }
  74.12% { background-color: #E81F1F; opacity: 1; }
  86.72% { background-color: #E81F1F; opacity: 1; }
  87.06% { background-color: #28B4EC; opacity: 1; }
  89.39% { background-color: #E81F1F; opacity: 1; }
  99.00% { background-color: #E87E7E; opacity: 1; }
 100.00% { background-color: #E87E7E; opacity: 0; }
}
@keyframes mel-ice {
   0.00% { background-color: #6DD3FC; opacity: 0; }
   1.00% { background-color: #6DD3FC; opacity: 1; }
   7.54% { background-color: #AEFAFB; opacity: 1; }
  15.89% { background-color: #6DD3FC; opacity: 1; }
  25.28% { background-color: #6DD3FC; opacity: 1; }
  33.54% { background-color: #AEFAFB; opacity: 1; }
  39.88% { background-color: #AFE6ED; opacity: 1; }
  44.30% { background-color: #E7F5FB; opacity: 1; }
  54.25% { background-color: #6DD3FC; opacity: 1; }
  58.34% { background-color: #AFE6ED; opacity: 1; }
  63.32% { background-color: #6DD3FC; opacity: 1; }
  70.62% { background-color: #AEFAFB; opacity: 1; }
  79.61% { background-color: #6DD3FC; opacity: 1; }
  82.42% { background-color: #6DD3FC; opacity: 1; }
  85.87% { background-color: #AFE6ED; opacity: 1; }
  94.70% { background-color: #6DD3FC; opacity: 1; }
  99.00% { background-color: #6DD3FC; opacity: 1; }
  100.0% { background-color: #6DD3FC; opacity: 0; }
}
@keyframes mel-rail {
   0.00% { background-color: #D01818; opacity: 0; }
   1.00% { background-color: #D01818; opacity: 1; }
  11.37% { background-color: #D01818; opacity: 1; }
  12.04% { background-color: #756868; opacity: 1; }
  18.60% { background-color: #C3B8B8; opacity: 1; }
  20.80% { background-color: #756868; opacity: 1; }
  24.95% { background-color: #FEFEFE; opacity: 1; }
  47.56% { background-color: #756868; opacity: 1; }
  62.88% { background-color: #E5DDDD; opacity: 1; }
  70.10% { background-color: #756868; opacity: 1; }
  70.64% { background-color: #953232; opacity: 1; }
  76.52% { background-color: #756868; opacity: 1; }
  76.92% { background-color: #953232; opacity: 1; }
  82.27% { background-color: #756868; opacity: 1; }
  82.61% { background-color: #953232; opacity: 1; }
  84.95% { background-color: #756868; opacity: 1; }
  85.62% { background-color: #953232; opacity: 1; }
  88.96% { background-color: #756868; opacity: 1; }
  89.63% { background-color: #953232; opacity: 1; }
  92.31% { background-color: #756868; opacity: 1; }
  92.71% { background-color: #953232; opacity: 1; }
  94.31% { background-color: #756868; opacity: 1; }
  94.98% { background-color: #953232; opacity: 1; }
  99.00% { background-color: #756868; opacity: 1; }
 100.00% { background-color: #756868; opacity: 0; }
}
@keyframes mel-rotary {
   0.00% { background-color: #333333; opacity: 0; }
   1.00% { background-color: #333333; opacity: 1; }
   3.16% { background-color: #E7E7E7; opacity: 1; }
  12.16% { background-color: #333333; opacity: 1; }
  14.37% { background-color: #E7E7E7; opacity: 1; }
  26.25% { background-color: #333333; opacity: 1; }
  28.45% { background-color: #E7E7E7; opacity: 1; }
  35.15% { background-color: #333333; opacity: 1; }
  38.12% { background-color: #E7E7E7; opacity: 1; }
  55.94% { background-color: #333333; opacity: 1; }
  59.77% { background-color: #E7E7E7; opacity: 1; }
  69.06% { background-color: #333333; opacity: 1; }
  76.25% { background-color: #E7E7E7; opacity: 1; }
  89.56% { background-color: #333333; opacity: 1; }
  92.91% { background-color: #E7E7E7; opacity: 1; }
  98.18% { background-color: #333333; opacity: 1; }
  99.00% { background-color: #333333; opacity: 1; }
 100.00% { background-color: #333333; opacity: 0; }
}
@keyframes mel-scan {
   0.00% { background-color: #000000; opacity: 0; }
   1.00% { background-color: #000000; opacity: 1; }
   3.85% { background-color: #FFFFFF; opacity: 1; }
   8.39% { background-color: #000000; opacity: 1; }
  14.99% { background-color: #000000; opacity: 1; }
  48.76% { background-color: #FFFFFF; opacity: 1; }
  49.66% { background-color: #000000; opacity: 1; }
  50.41% { background-color: #FFFFFF; opacity: 1; }
  83.77% { background-color: #000000; opacity: 1; }
  97.18% { background-color: #FFFFFF; opacity: 1; }
  97.87% { background-color: #000000; opacity: 1; }
  99.00% { background-color: #000000; opacity: 1; }
 100.00% { background-color: #000000; opacity: 0; }
}
@keyframes mel-sew {
   0.00% { background-color: #4757F8; opacity: 0; }
   1.00% { background-color: #4757F8; opacity: 1; }
  12.67% { background-color: #A6AEF8; opacity: 1; }
  19.23% { background-color: #7783FA; opacity: 1; }
  27.27% { background-color: #A6AEF8; opacity: 1; }
  52.91% { background-color: #CCA6F8; opacity: 1; }
  78.76% { background-color: #CCA6F8; opacity: 1; }
  83.76% { background-color: #EDA6F8; opacity: 1; }
  88.30% { background-color: #A6AEF8; opacity: 1; }
  95.38% { background-color: #A6AEF8; opacity: 1; }
  99.00% { background-color: #4757F8; opacity: 1; }
 100.00% { background-color: #4757F8; opacity: 0; }
}
@keyframes mel-subway {
   0.00% { background-color: #881F20; opacity: 0; }
   1.00% { background-color: #881F20; opacity: 1; }
   6.67% { background-color: #D52A2C; opacity: 1; }
  26.67% { background-color: #D52AA1; opacity: 1; }
  40.00% { background-color: #7F2AD5; opacity: 1; }
  46.67% { background-color: #4C2AD5; opacity: 1; }
  53.33% { background-color: #2A3DD5; opacity: 1; }
  56.67% { background-color: #2AA7D5; opacity: 1; }
  60.00% { background-color: #2AD577; opacity: 1; }
  61.67% { background-color: #5AD52A; opacity: 1; }
  63.33% { background-color: #E7E289; opacity: 1; }
  65.00% { background-color: #EDE795; opacity: 1; }
  65.53% { background-color: #D7D6C9; opacity: 1; }
  67.80% { background-color: #ABABA1; opacity: 1; }
  69.87% { background-color: #4A4A46; opacity: 1; }
  72.87% { background-color: #ABABA1; opacity: 1; }
  76.67% { background-color: #4A4A46; opacity: 1; }
  77.33% { background-color: #ABABA1; opacity: 1; }
  82.93% { background-color: #ABABA1; opacity: 1; }
  84.67% { background-color: #4A4A46; opacity: 1; }
  85.93% { background-color: #ABABA1; opacity: 1; }
  86.53% { background-color: #4A4A46; opacity: 1; }
  87.73% { background-color: #ABABA1; opacity: 1; }
  95.00% { background-color: #ABABA1; opacity: 1; }
  98.00% { background-color: #4A4A46; opacity: 1; }
  99.00% { background-color: #4A4A46; opacity: 1; }
 100.00% { background-color: #4A4A46; opacity: 0; }
}
@keyframes mel-typing {
   0.0% { background-color: #FFFFFF; opacity: 0; }
   0.8% { background-color: #FFFFFF; opacity: 0.5; }
   1.2% { background-color: #9DCEFC; opacity: 1; }
   1.6% { background-color: #FFFFFF; opacity: 1; }
   2.5% { background-color: #FFFFFF; opacity: 1; }
   2.8% { background-color: #ADFC9D; opacity: 1; }
   3.3% { background-color: #FFFFFF; opacity: 1; }
   4.7% { background-color: #FFFFFF; opacity: 1; }
   4.8% { background-color: #FC9DCC; opacity: 1; }
   6.5% { background-color: #FFFFFF; opacity: 1; }
   7.0% { background-color: #F59DFC; opacity: 1; }
   8.5% { background-color: #FFFFFF; opacity: 1; }
   9.6% { background-color: #FFFFFF; opacity: 1; }
  10.0% { background-color: #FC9D9D; opacity: 1; }
  11.2% { background-color: #FFFFFF; opacity: 1; }
  11.5% { background-color: #9DFCDB; opacity: 1; }
  14.5% { background-color: #FFFFFF; opacity: 1; }
  16.7% { background-color: #FFFFFF; opacity: 1; }
  17.1% { background-color: #FCC69D; opacity: 1; }
  19.1% { background-color: #FFFFFF; opacity: 1; }
  21.1% { background-color: #CE9DFC; opacity: 1; }
  23.3% { background-color: #FFFFFF; opacity: 1; }
  24.6% { background-color: #FFFFFF; opacity: 1; }
  25.1% { background-color: #FC9DBD; opacity: 1; }
  26.4% { background-color: #FFFFFF; opacity: 1; }
  27.7% { background-color: #FFFFFF; opacity: 1; }
  28.0% { background-color: #FBFC9D; opacity: 1; }
  29.4% { background-color: #FFFFFF; opacity: 1; }
  30.0% { background-color: #D59DFC; opacity: 1; }
  31.5% { background-color: #FFFFFF; opacity: 1; }
  31.9% { background-color: #9DFCB8; opacity: 1; }
  35.9% { background-color: #FFFFFF; opacity: 1; }
  36.6% { background-color: #FC9DCF; opacity: 1; }
  39.5% { background-color: #FFFFFF; opacity: 1; }
  39.8% { background-color: #B6FC9D; opacity: 1; }
  41.3% { background-color: #FFFFFF; opacity: 1; }
  41.8% { background-color: #FCEB9D; opacity: 1; }
  46.3% { background-color: #FFFFFF; opacity: 1; }
  48.6% { background-color: #9DA7FC; opacity: 1; }
  53.9% { background-color: #FFFFFF; opacity: 1; }
  67.8% { background-color: #FFFFFF; opacity: 1; }
  67.9% { background-color: #CEFC9D; opacity: 1; }
  69.6% { background-color: #FFFFFF; opacity: 1; }
  70.0% { background-color: #FC9D9D; opacity: 1; }
  72.0% { background-color: #FFFFFF; opacity: 1; }
  72.4% { background-color: #9DFCAC; opacity: 1; }
  77.5% { background-color: #FFFFFF; opacity: 1; }
  77.6% { background-color: #9DB6FC; opacity: 1; }
  78.7% { background-color: #FFFFFF; opacity: 1; }
  79.1% { background-color: #FA9DFC; opacity: 1; }
  81.2% { background-color: #FFFFFF; opacity: 1; }
  82.8% { background-color: #FC9D9D; opacity: 1; }
  84.3% { background-color: #FFFFFF; opacity: 1; }
  85.7% { background-color: #FFFFFF; opacity: 1; }
  85.8% { background-color: #D3FC9D; opacity: 1; }
  88.0% { background-color: #FFFFFF; opacity: 1; }
  88.8% { background-color: #B39DFC; opacity: 1; }
  92.7% { background-color: #FFFFFF; opacity: 1; }
  93.0% { background-color: #FCD99D; opacity: 1; }
  95.0% { background-color: #FFFFFF; opacity: 1; }
  98.5% { background-color: #FFFFFF; opacity: 1; }
  98.7% { background-color: #FC9DE4; opacity: 1; }
  99.6% { background-color: #FFFFFF; opacity: 0.5; }
 100.0% { background-color: #FFFFFF; opacity: 0; }
}
@keyframes mel-writing {
   0.00% { background-color: #E1B86B; opacity: 0; }
   0.72% { background-color: #1A150B; opacity: 1; }
   7.97% { background-color: #1A150B; opacity: 1; }
   9.20% { background-color: #E1B86B; opacity: 1; }
   9.99% { background-color: #E1B86B; opacity: 1; }
  10.21% { background-color: #1A150B; opacity: 1; }
  16.51% { background-color: #1A150B; opacity: 1; }
  17.16% { background-color: #E1B86B; opacity: 1; }
  18.83% { background-color: #E1B86B; opacity: 1; }
  19.26% { background-color: #1A150B; opacity: 1; }
  30.63% { background-color: #1A150B; opacity: 1; }
  31.43% { background-color: #E1B86B; opacity: 1; }
  33.74% { background-color: #E1B86B; opacity: 1; }
  34.03% { background-color: #1A150B; opacity: 1; }
  40.12% { background-color: #1A150B; opacity: 1; }
  40.55% { background-color: #E1B86B; opacity: 1; }
  42.72% { background-color: #E1B86B; opacity: 1; }
  42.94% { background-color: #1A150B; opacity: 1; }
  48.95% { background-color: #E1B86B; opacity: 1; }
  49.82% { background-color: #1A150B; opacity: 1; }
  59.30% { background-color: #1A150B; opacity: 1; }
  59.52% { background-color: #E1B86B; opacity: 1; }
  60.61% { background-color: #E1B86B; opacity: 1; }
  60.83% { background-color: #1A150B; opacity: 1; }
  67.27% { background-color: #E1B86B; opacity: 1; }
  67.78% { background-color: #1A150B; opacity: 1; }
  73.43% { background-color: #E1B86B; opacity: 1; }
  73.86% { background-color: #1A150B; opacity: 1; }
  81.61% { background-color: #E1B86B; opacity: 1; }
  82.04% { background-color: #1A150B; opacity: 1; }
  87.83% { background-color: #1A150B; opacity: 1; }
  90.08% { background-color: #E1B86B; opacity: 1; }
  90.37% { background-color: #1A150B; opacity: 1; }
  98.33% { background-color: #1A150B; opacity: 1; }
 100.00% { background-color: #E1B86B; opacity: 0; }
}

.mel-airplane {
  animation-duration: 15s;
  animation-name: mel-airplane;
}
.mel-bubble {
  animation-duration: 11.99s;
  animation-name: mel-bubble;
}
.mel-car-start {
  animation-duration: 15s;
  animation-name: mel-car-start;
}
.mel-chime {
  animation-duration: 15s;
  animation-name: mel-chime;
}
.mel-crowd {
  animation-duration: 15s;
  animation-name: mel-crowd;
}
.mel-dial-up {
  animation-duration: 15.07s;
  animation-name: mel-dial-up;
}
.mel-grocery {
  animation-duration: 14.99s;
  animation-name: mel-grocery;
}
.mel-ice {
  animation-duration: 12.46s;
  animation-name: mel-ice;
}
.mel-rail {
  animation-duration: 14.95s;
  animation-name: mel-rail;
}
.mel-rotary {
  animation-duration: 10.44s;
  animation-name: mel-rotary;
}
.mel-scan {
  animation-duration: 14.54s;
  animation-name: mel-scan;
}
.mel-sew {
  animation-duration: 13.42s;
  animation-name: mel-sew;
}
.mel-subway {
  animation-duration: 15s;
  animation-name: mel-subway;
}
.mel-typing {
  animation-duration: 10s;
  animation-name: mel-typing;
}
.mel-writing {
  animation-duration: 13.81s;
  animation-name: mel-writing;
}

/*
 * JAE
 */

@keyframes jae-bell {
   0.00% { background-color: #F8850A; opacity: 0;}
   1.00% { background-color: #F8850A; opacity: 1;}
  13.93% { background-color: #E12908; opacity: 1;}
  21.67% { background-color: #FF2700; opacity: 1;}
  23.33% { background-color: #FA8715; opacity: 1;}
  43.67% { background-color: #B115FA; opacity: 1;}
  46.67% { background-color: #F96505; opacity: 1;}
  66.67% { background-color: #E57933; opacity: 1;}
  83.33% { background-color: #E53353; opacity: 1;}
  99.00% { background-color: #E59F33; opacity: 1;}
 100.00% { background-color: #E59F33; opacity: 0;}
}

@keyframes jae-market {
   0.00% { background-color: #E89949; opacity: 0; }
   1.00% { background-color: #E89949; opacity: 1; }
   5.61% { background-color: #FF8000; opacity: 1; }
  28.73% { background-color: #515B75; opacity: 1; }
  41.52% { background-color: #DA9342; opacity: 1; }
  44.88% { background-color: #E7B962; opacity: 1; }
  56.10% { background-color: #FA8908; opacity: 1; }
  66.20% { background-color: #7CBCC1; opacity: 1; }
  78.55% { background-color: #3ABDCD; opacity: 1; }
  99.00% { background-color: #D96248; opacity: 1; }
 100.00% { background-color: #D96248; opacity: 0; }
}

@keyframes jae-montmontre {
   0.00% { background-color: #D46F59; opacity: 0; }
   1.00% { background-color: #D46F59; opacity: 1; }
   2.84% { background-color: #B63E24; opacity: 1; }
   9.33% { background-color: #A8B0CB; opacity: 1; }
  12.00% { background-color: #5E647A; opacity: 1; }
  16.45% { background-color: #2E3447; opacity: 1; }
  22.22% { background-color: #D19627; opacity: 1; }
  23.11% { background-color: #FF9B00; opacity: 1; }
  33.34% { background-color: #FF0093; opacity: 1; }
  44.89% { background-color: #DBA0B9; opacity: 1; }
  58.23% { background-color: #D3C6BD; opacity: 1; }
  68.01% { background-color: #FF0000; opacity: 1; }
  68.45% { background-color: #FFE400; opacity: 1; }
  83.12% { background-color: #68D4E7; opacity: 1; }
  91.12% { background-color: #97BDC3; opacity: 1; }
  95.12% { background-color: #9AE5F1; opacity: 1; }
  99.00% { background-color: #5FE7FC; opacity: 1; }
 100.00% { background-color: #5FE7FC; opacity: 0; }
}

@keyframes jae-playing {
   0.00% { background-color: #FCBE25; opacity: 0; }
   1.00% { background-color: #FCBE25; opacity: 1; }
   4.34% { background-color: #FCE525; opacity: 1; }
  20.31% { background-color: #FF8754; opacity: 1; }
  25.69% { background-color: #FF4D00; opacity: 1; }
  32.97% { background-color: #9F6E59; opacity: 1; }
  41.65% { background-color: #FBD5BC; opacity: 1; }
  51.20% { background-color: #5A48F0; opacity: 1; }
  52.07% { background-color: #FBD5BC; opacity: 1; }
  61.44% { background-color: #FFC501; opacity: 1; }
  73.06% { background-color: #FF8F01; opacity: 1; }
  87.12% { background-color: #5186FF; opacity: 1; }
  99.00% { background-color: #FF9351; opacity: 1; }
 100.00% { background-color: #FF9351; opacity: 0; }
}

@keyframes jae-station {
   0.00% { background-color: #F6BAF0; opacity: 0;}
   1.00% { background-color: #F6BAF0; opacity: 1;}
   3.43% { background-color: #F338DF; opacity: 1;}
   8.58% { background-color: #F9C607; opacity: 1;}
  26.32% { background-color: #B7F2F3; opacity: 1;}
  38.91% { background-color: #F338DF; opacity: 1;}
  44.63% { background-color: #FF0068; opacity: 1;}
  57.22% { background-color: #E71D88; opacity: 1;}
  67.52% { background-color: #FFA600; opacity: 1;}
  84.69% { background-color: #FFD100; opacity: 1;}
  99.00% { background-color: #C3EEFC; opacity: 1;}
 100.00% { background-color: #C3EEFC; opacity: 0;}
}

@keyframes jae-umbrella {
   0.00% { background-color: #9DA2C9; opacity: 0; }
   1.00% { background-color: #9DA2C9; opacity: 1; }
  28.36% { background-color: #001DFF; opacity: 1; }
  29.85% { background-color: #B5B0CB; opacity: 1; }
  46.27% { background-color: #2700D1; opacity: 1; }
  61.69% { background-color: #665C8E; opacity: 1; }
  99.00% { background-color: #525155; opacity: 1; }
 100.00% { background-color: #525155; opacity: 0; }
}

.jae-bell {
  animation-duration: 30s;
  animation-name: jae-bell;
}
.jae-market {
  animation-duration: 44.56s;
  animation-name: jae-market;
}
.jae-montmontre {
  animation-duration: 112.49s;
  animation-name: jae-montmontre;
}
.jae-playing {
  animation-duration: 57.62s;
  animation-name: jae-playing;
}
.jae-station {
  animation-duration: 43.69s;
  animation-name: jae-station;
}
.jae-umbrella {
  animation-duration: 20.1s;
  animation-name: jae-umbrella;
}