/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  /* 1 */
  /* 2 */
  /* 1 */
  display: block;
}
/**
 * Add the correct display in IE 9-.
 */
audio, canvas, progress, video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template, [hidden] {
  /* 1 */
  display: none;
}
/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active, a:hover {
  outline-width: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b, strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong {
  font-weight: bolder;
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button, input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button, select {
  /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button, html [type="button"], [type="reset"], [type="submit"] {
  /* 1 */
  -webkit-appearance: button;
  /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
}
body.backyard {
  background: #fcddec url(../static/common/pink_site_bg_short.jpg) repeat-x center top;
  background-size: initial;
  min-height: 600px;
  overflow-x: hidden;
}
@media (max-width: 640px) {
  body.backyard {
    background: #fcddec url(../static/common/pink_site_bg.jpg) repeat-x center top;
    background-size: auto 1315px;
  }
}
body.backyard .butterflies {
  display: block;
}
body.rainbow {
  background: #ade4f8 url(../static/theme/pinka_BG_rainbow_2.jpg) repeat-x center top;
  background-size: 1500px 1000px;
  min-height: 600px;
  overflow-x: hidden;
}
@media (max-width: 640px) {
  body.rainbow {
    background: #ade4f8 url(../static/theme/pinka_BG_rainbow_mobile.jpg) repeat-x center top;
    background-size: auto 1315px;
  }
}
body.rainbow .stars {
  display: block;
}
@media (max-width: 670px) {
  body.rainbow .stars .star {
    animation: falling-star-mobile 6s linear infinite;
  }
  body.rainbow .stars .star-1 {
    animation-delay: 2s;
  }
  body.rainbow .stars .star-2 {
    animation-delay: 1s;
  }
  body.rainbow .stars .star-3 {
    animation-delay: 0s;
  }
  body.rainbow .stars .star-4 {
    animation-delay: 3s;
  }
  body.rainbow .stars .star-5 {
    animation-delay: 4s;
  }
  body.rainbow .stars .star-6 {
    animation-delay: 2.5s;
  }
}
body.fairyland {
  background: #fcddec url(../static/theme/pinka_BG_fairyland_no_clouds.jpg) repeat-x center top;
  background-size: 1300px 1000px;
  min-height: 600px;
  overflow-x: hidden;
}
@media (max-width: 640px) {
  body.fairyland {
    background-size: 1300px 1315px;
  }
}
body.fairyland .fairyland-bg {
  display: block;
}
body.fairyland .stars {
  display: block;
}
body.fairyland .stars .star {
  background: url(../static/common/sparkle.png) center center !important;
  background-size: contain !important;
}
body.fairyland .twinklers, body.fairyland .twinkling {
  display: block;
}
body.sunrise {
  background: #fce9ff url(../static/theme/pinka_BG_sunrise_sky.jpg) repeat-x center top;
  min-height: 600px;
  overflow-x: hidden;
  background-size: 1300px 1000px;
}
@media (max-width: 640px) {
  body.sunrise {
    background: #fce9ff url(../static/theme/pinka_BG_sunrise.jpg) repeat-x center top;
  }
}
body.sunrise .clouds {
  display: block;
}
body.party {
  background: #fce9ff url(../static/theme/pinka_BG_party.jpg) repeat-x center top;
  min-height: 600px;
  overflow-x: hidden;
}
@media (max-width: 640px) {
  body.party {
    background: #fce9ff url(../static/theme/pinka_BG_party_mobile.jpg) repeat-x center top;
  }
}
body.party .confettis {
  display: block;
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *:before, *:after {
  box-sizing: inherit;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a:focus, a:hover, a:active, button:focus, button:hover, button:active {
  outline: 0;
}
/**
 * Elements
 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.butterflies {
  display: none;
  position: absolute;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
@media (max-width: 850px) {
  .butterflies {
    top: 50px;
  }
}
.butterflies .pink {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  animation: pink-butterfly 20s ease-in infinite;
  transform: rotate(0deg);
  z-index: 1;
}
.butterflies .pink .butterfly {
  background: url(../static/common/butterfly-frames.png);
  width: 30px;
  height: 30px;
  background-size: auto 100%;
  animation: butterfly 0.75s steps(5) infinite;
}
.butterflies .pink.two {
  animation: pink-butterfly-alt 40s linear infinite;
  transform: rotate(9deg);
  animation-delay: 5s;
  left: -9999px;
}
.butterflies .pinker {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  animation: pinker-butterfly 25s linear infinite;
  transform: rotate(-8deg);
  z-index: 1;
}
.butterflies .pinker .butterfly {
  background: url(../static/common/pink-dark-butterfly-frames.png);
  width: 30px;
  height: 30px;
  background-size: auto 100%;
  animation: butterfly 0.75s steps(5) infinite;
}
.butterflies .purple {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  animation: purple-butterfly 30s linear infinite;
  transform: rotate(8deg);
  z-index: 1;
}
.butterflies .purple .butterfly {
  background: url(../static/common/purple-butterfly-frames.png);
  width: 30px;
  height: 30px;
  background-size: auto 100%;
  animation: butterfly 0.75s steps(5) infinite;
}
.clouds {
  display: none;
  position: absolute;
  width: 100%;
  height: 450px;
  overflow: hidden;
}
@media (max-width: 850px) {
  .clouds {
    top: 50px;
  }
}
.clouds .cloud-1 {
  animation: cloud_1 60s linear infinite;
  background: transparent url(../static/theme/cloud_1.png) center center no-repeat;
  width: 250px;
  height: 120px;
  background-size: contain;
  animation-delay: 5s;
  position: absolute;
  top: 0px;
  right: -250px;
}
.clouds .cloud-2 {
  animation: cloud_2 40s linear infinite;
  background: transparent url(../static/theme/cloud_2.png) center center no-repeat;
  width: 300px;
  height: 200px;
  background-size: contain;
  animation-delay: 5s;
  position: absolute;
  top: 10px;
  right: -300px;
}
.clouds .cloud-3 {
  animation: cloud_3 80s linear infinite;
  background: transparent url(../static/theme/cloud_3.png) center center no-repeat;
  width: 300px;
  height: 200px;
  background-size: contain;
  right: 50%;
  position: absolute;
  top: 100px;
}
.clouds .cloud-4 {
  animation: cloud_4 70s linear infinite;
  background: transparent url(../static/theme/cloud_4.png) center center no-repeat;
  width: 250px;
  height: 120px;
  background-size: contain;
  position: absolute;
  top: 15px;
  right: 25%;
}
.fairyland-bg {
  display: none;
}
.fairyland-bg .cloud-bg {
  width: 100%;
  height: 189px;
  background: transparent url(../static/theme/pinka_fairyland_clouds_darker.png) repeat-x center top;
  background-size: 1300px 189px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.fairyland-bg .hanging-star {
  position: absolute;
  opacity: 0.9;
  padding-top: 120px;
  border-right: 1px solid #fff;
  z-index: 0;
  top: 30px;
  box-shadow: 0 0 6px 0 #ffffff;
}
.fairyland-bg .hanging-star .star-lg {
  width: 80px;
  height: 84px;
  background: transparent url(../static/theme/star_sprite.png) repeat-x center top;
  background-size: 80px 167px;
  position: absolute;
  left: -40px;
  top: 82px;
}
.fairyland-bg .hanging-star .star-lg:after {
  content: "";
  width: 80px;
  height: 84px;
  background: transparent url(../static/theme/star_sprite.png) repeat-x center top;
  background-size: 80px 167px;
  background-position: 0 -84px;
  position: absolute;
  opacity: 0;
}
.fairyland-bg .hanging-star .star-sm {
  width: 45px;
  height: 47px;
  background: transparent url(../static/theme/star_sprite.png) repeat-x center top;
  background-size: 45px 94px;
  position: absolute;
  left: -22px;
  top: 100px;
}
.fairyland-bg .hanging-star .star-sm:after {
  content: "";
  width: 45px;
  height: 47px;
  background: transparent url(../static/theme/star_sprite.png) repeat-x center top;
  background-size: 45px 94px;
  background-position: 0 -47px;
  position: absolute;
  opacity: 0;
}
.fairyland-bg .hanging-star.s1 {
  left: 52%;
}
.fairyland-bg .hanging-star.s1 .star-lg:after {
  animation-delay: 1s;
  animation: star-glow 9s linear infinite;
}
.fairyland-bg .hanging-star.s2 {
  left: 20%;
  top: 95px;
}
.fairyland-bg .hanging-star.s2 .star-lg:after {
  animation-delay: 2.5s;
  animation: star-glow2 10s linear infinite;
}
.fairyland-bg .hanging-star.s3 {
  left: 72.5%;
  top: 51px;
}
.fairyland-bg .hanging-star.s3 .star-lg:after {
  animation-delay: 2s;
  animation: star-glow3 8s linear infinite;
}
.fairyland-bg .hanging-star.s4 {
  left: 98%;
  top: 50px;
}
.fairyland-bg .hanging-star.s4 .star-lg:after {
  animation-delay: 2.5s;
  animation: star-glow 7s linear infinite;
}
.fairyland-bg .hanging-star.s5 {
  left: 93%;
  border-color: #f9e1ea;
}
.fairyland-bg .hanging-star.s5 .star-sm:after {
  animation: star-glow2 6s linear infinite;
  animation-delay: 1s;
}
.fairyland-bg .hanging-star.s6 {
  left: 35.5%;
  top: 70px;
  border-color: #f9e1ea;
}
.fairyland-bg .hanging-star.s6 .star-sm:after {
  animation: star-glow3 7s linear infinite;
  animation-delay: 1.5s;
}
.fairyland-bg .hanging-star.s7 {
  left: 5%;
  top: 85px;
}
.fairyland-bg .hanging-star.s7 .star-lg:after {
  animation-delay: 6s;
  animation: star-glow 4s linear infinite;
}
.stars {
  display: none;
  position: absolute;
  width: 100%;
  height: 650px;
  overflow: hidden;
  top: 100px;
}
.stars .star {
  background: transparent url(../static/theme/star.png) center center no-repeat;
  width: 45px;
  height: 45px;
  background-size: contain;
  position: absolute;
  top: 0;
  opacity: 0;
  animation: falling-star 6s linear infinite;
}
.stars .star-1 {
  left: 10%;
  animation-delay: 2s;
  transform: rotate(6deg);
}
.stars .star-2 {
  left: 33%;
  animation-delay: 1s;
  width: 35px;
  height: 35px;
  transform: rotate(-10deg);
}
.stars .star-3 {
  left: 50%;
  animation-delay: 0s;
  width: 30px;
  height: 30px;
  transform: rotate(20deg);
}
.stars .star-4 {
  left: 75%;
  animation-delay: 3s;
  transform: rotate(8deg);
}
.stars .star-5 {
  left: 60%;
  animation-delay: 4s;
  width: 30px;
  height: 30px;
  transform: rotate(-30deg);
}
.stars .star-6 {
  left: 95%;
  width: 25px;
  height: 25px;
  animation-delay: 2.5s;
  transform: rotate(16deg);
}
.twinklers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-image: url(../static/theme/twinklers.png);
}
.twinklers .star {
  border-radius: 100%;
  background-color: #fff;
  margin: 0;
  width: 2px;
  height: 2px;
  display: block;
  position: absolute;
}
.twinklers .star:after {
  content: "";
  opacity: 0;
  box-shadow: 0 0 10px 5px #fff;
  width: 2px;
  height: 2px;
  display: block;
}
.twinklers .star.star-1 {
  position: absolute;
  left: 10%;
  top: 30%;
}
.twinklers .star.star-1:after {
  animation: sparkle 4s ease-in-out infinite;
  animation-delay: 3.5s;
}
.twinklers .star.star-2 {
  position: absolute;
  left: 30%;
  top: 10%;
}
.twinklers .star.star-2:after {
  animation: sparkle3 4s ease-in-out infinite;
  animation-delay: 2.5s;
}
.twinklers .star.star-3 {
  position: absolute;
  left: 65%;
  top: 20%;
}
.twinklers .star.star-3:after {
  animation: sparkle2 4s ease-in-out infinite;
  animation-delay: 4.5s;
}
.twinklers .star.star-4 {
  position: absolute;
  left: 90%;
  top: 25%;
}
.twinklers .star.star-4:after {
  animation: sparkle1 4s ease-in-out infinite;
  animation-delay: 7.5s;
}
.twinklers .star.star-5 {
  position: absolute;
  left: 75%;
  top: 40%;
}
.twinklers .star.star-5:after {
  animation: sparkle3 4s ease-in-out infinite;
  animation-delay: 10s;
}
.twinklers .star.star-6 {
  position: absolute;
  left: 22%;
  top: 30%;
}
.twinklers .star.star-6:after {
  animation: sparkle2 4s ease-in-out infinite;
  animation-delay: 3.1s;
}
.confettis {
  display: none;
  position: absolute;
  width: 100%;
  height: 750px;
  overflow: hidden;
  top: 0;
}
.confettis .confetti {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  opacity: 0;
  animation: falling-confetti 6s linear infinite;
}
.confettis .confetti-image {
  width: 100%;
  height: 100%;
  background: transparent url(../static/theme/star.png) center center no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  animation: confetti-rotate 3s linear infinite;
}
.confettis .confetti-block {
  width: 20px;
  height: 10px;
}
.confettis .confetti-block .confetti-image {
  background-image: url(../static/theme/conf_block.png);
}
.confettis .confetti-block2 {
  width: 20px;
  height: 10px;
}
.confettis .confetti-block2 .confetti-image {
  background-image: url(../static/theme/conf_block2.png);
}
.confettis .confetti-circ {
  width: 14px;
  height: 10px;
}
.confettis .confetti-circ .confetti-image {
  background-image: url(../static/theme/conf_circ.png);
}
.confettis .confetti-circ2 {
  width: 11px;
  height: 11px;
}
.confettis .confetti-circ2 .confetti-image {
  background-image: url(../static/theme/conf_circ2.png);
}
.confettis .confetti-loop {
  width: 77px;
  height: 49px;
}
.confettis .confetti-loop .confetti-image {
  background-image: url(../static/theme/conf_loop.png);
}
.confettis .confetti-loop2 {
  width: 55px;
  height: 48px;
}
.confettis .confetti-loop2 .confetti-image {
  background-image: url(../static/theme/conf_loop2.png);
}
.confettis .confetti-loop3 {
  width: 43px;
  height: 79px;
}
.confettis .confetti-loop3 .confetti-image {
  background-image: url(../static/theme/conf_loop3.png);
}
.confettis .confetti-loop4 {
  width: 38px;
  height: 26px;
}
.confettis .confetti-loop4 .confetti-image {
  background-image: url(../static/theme/conf_loop4.png);
}
.confettis .confetti-star {
  width: 48px;
  height: 49px;
}
.confettis .confetti-star .confetti-image {
  background-image: url(../static/theme/conf_star.png);
}
.confettis .confetti-tri {
  width: 14px;
  height: 18px;
}
.confettis .confetti-tri .confetti-image {
  background-image: url(../static/theme/conf_tri.png);
}
.confettis .confetti-tri2 {
  width: 14px;
  height: 16px;
}
.confettis .confetti-tri2 .confetti-image {
  background-image: url(../static/theme/conf_tri2.png);
}
.confettis .confetti-1 {
  left: 10%;
  animation-delay: 2s;
}
.confettis .confetti-1 .confetti-image {
  animation-delay: -1s;
}
.confettis .confetti-2 {
  left: 33%;
  animation-delay: 1s;
}
.confettis .confetti-2 .confetti-image {
  animation-delay: -3s;
}
.confettis .confetti-3 {
  left: 50%;
  animation-delay: 0s;
}
.confettis .confetti-3 .confetti-image {
  animation-delay: -0.5s;
}
.confettis .confetti-4 {
  left: 75%;
  animation-delay: 3s;
}
.confettis .confetti-4 .confetti-image {
  animation-delay: -0.25s;
}
.confettis .confetti-5 {
  left: 60%;
  animation-delay: 4.5s;
}
.confettis .confetti-5 .confetti-image {
  animation-delay: -3s;
}
.confettis .confetti-6 {
  left: 95%;
  animation-delay: 2.5s;
}
.confettis .confetti-6 .confetti-image {
  animation-delay: -2.1s;
}
.confettis .confetti-7 {
  left: 56%;
  animation-delay: 2.5s;
}
.confettis .confetti-7 .confetti-image {
  animation-delay: -2.6s;
}
.confettis .confetti-8 {
  left: 40%;
  animation-delay: 3.5s;
}
.confettis .confetti-8 .confetti-image {
  animation-delay: -1.2s;
}
.confettis .confetti-9 {
  left: 48%;
  animation-delay: 4.25s;
}
.confettis .confetti-9 .confetti-image {
  animation-delay: -3.2s;
}
.confettis .confetti-10 {
  left: 60%;
  animation-delay: 2.1s;
}
.confettis .confetti-10 .confetti-image {
  animation-delay: -0.25s;
}
.confettis .confetti-11 {
  left: 72%;
  animation-delay: 3.2s;
}
.confettis .confetti-11 .confetti-image {
  animation-delay: -0.75s;
}
.confettis .confetti-12 {
  left: 83%;
  animation-delay: 0.8s;
}
.confettis .confetti-12 .confetti-image {
  animation-delay: -2.25s;
}
.confettis .confetti-13 {
  left: 37%;
  animation-delay: 2.1s;
}
.confettis .confetti-13 .confetti-image {
  animation-delay: -4s;
}
.confettis .confetti-14 {
  left: 8%;
  animation-delay: 2.6s;
}
.confettis .confetti-14 .confetti-image {
  animation-delay: -3.25s;
}
.confettis .confetti-15 {
  left: 15%;
  animation-delay: 1.1s;
}
.confettis .confetti-15 .confetti-image {
  animation-delay: -3.75s;
}
.confettis .confetti-16 {
  left: 76%;
  animation-delay: 2.7s;
}
.confettis .confetti-16 .confetti-image {
  animation-delay: -2.75s;
}
.confettis .confetti-17 {
  left: 48%;
  animation-delay: 3.6s;
}
.confettis .confetti-18 {
  left: 89%;
  animation-delay: 2.75s;
}
.confettis .confetti-18 .confetti-image {
  animation-delay: -1.8s;
}
.confettis .confetti-19 {
  left: 66%;
  animation-delay: 2.6s;
}
.confettis .confetti-19 .confetti-image {
  animation-delay: -2.3s;
}
.confettis .confetti-20 {
  left: 53%;
  animation-delay: 4.2s;
}
.confettis .confetti-20 .confetti-image {
  animation-delay: -2.7s;
}
.confettis .confetti-21 {
  left: 37%;
  animation-delay: 1.9s;
}
.confettis .confetti-21 .confetti-image {
  animation-delay: -3.1s;
}
.confettis .confetti-22 {
  left: 79%;
  animation-delay: 2.4s;
}
.confettis .confetti-22 .confetti-image {
  animation-delay: -2.5s;
}
.confettis .confetti-23 {
  left: 46%;
  animation-delay: 6.25s;
}
.confettis .confetti-23 .confetti-image {
  animation-delay: -3.1s;
}
.confettis .confetti-24 {
  left: 59%;
  animation-delay: 6s;
}
.confettis .confetti-24 .confetti-image {
  animation-delay: -2.5s;
}
@media (max-width: 670px) {
  .confettis {
    height: 90%;
  }
  .confettis .confetti {
    animation-name: falling-confetti;
    animation-duration: 8s;
  }
  .confettis .confetti-1 {
    animation-delay: 5.5s;
  }
  .confettis .confetti-4 {
    animation-delay: 6.3s;
  }
  .confettis .confetti-7 {
    animation-delay: 0s;
  }
  .confettis .confetti-11 {
    animation-delay: 6.75s;
  }
  .confettis .confetti-11 {
    animation-delay: 0.75s;
  }
  .confettis .confetti-13 {
    animation-delay: 0.5s;
  }
  .confettis .confetti-15 {
    animation-delay: 5.25s;
  }
  .confettis .confetti-18 {
    animation-delay: 7s;
  }
  .confettis .confetti-18 {
    animation-delay: 7.9s;
  }
}
h1.title {
  font-size: 0;
  position: absolute;
  left: -9999px;
}
/**
 * Site & page
 */
#site {
  position: relative;
  height: 900px;
}
@media (max-width: 640px) {
  #site {
    height: auto;
    max-height: 900px;
  }
}
main {
  position: relative;
  background-size: cover;
  background-position: center top;
  padding-bottom: 1px;
  height: calc(100% - 40px);
  min-height: 500px;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2;
}
@media (max-width: 640px) {
  main {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 641px) and (max-width: 850px) {
  .tablet-as-mobile main {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }
}
main > .page {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 641px) {
  .page {
    position: relative;
    height: 100%;
  }
}
/**
 * Header
 */
header {
  z-index: 2;
}
@media (min-width: 641px) {
  header {
    width: 100%;
    position: absolute;
    z-index: 99;
  }
}
header .pbs-logo img {
  width: 70px;
  height: auto;
  margin-left: 15px;
}
header .pink-logo img {
  height: auto;
  width: 214px;
  margin-left: 30px;
}
.no-touchevents header .pink-logo img:hover, .touchevents header .pink-logo img:active {
  animation: bouncer 350ms ease-out;
}
header .pink-logo img.high {
  display: none;
}
header .sponsors {
  background-color: #ff79b5;
  color: #ffffff;
  font-size: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
}
header .sponsors .sponsor {
  color: #fff;
}
header .site-nav {
  margin-top: 40px;
  z-index: 2;
}
header .site-nav img {
  vertical-align: top;
}
@media (min-width: 851px) {
  header .sponsors {
    font-size: 16px;
    position: absolute;
    right: 0;
    padding: 10px 20px;
    border-radius: 0 0 0 20px;
  }
  header .sponsors > * {
    margin-right: 30px;
  }
  header .sponsors > *:last-child {
    margin-right: 0;
  }
  header .sponsors img {
    max-width: 90px;
    max-height: 48px;
    height: auto;
  }
  header .site-nav {
    height: 0;
  }
  header .pink-logo {
    margin: 40px auto 0;
  }
}
@media (max-width: 850px) {
  header .sponsors {
    right: 0;
    top: 0;
    margin-bottom: 10px;
    height: 50px;
    padding: 0 10px;
    justify-content: flex-end;
  }
  header .sponsors span {
    font-size: 14px;
  }
  header .sponsors > * {
    margin-right: 20px;
  }
  header .sponsors > *:last-child {
    margin-right: 0;
  }
  header .sponsors .sponsor {
    height: 29px;
  }
  header .sponsors .sponsor img {
    max-width: 55px;
    max-height: 29px;
    height: auto;
  }
}
@media (max-width: 640px) {
  header {
    position: relative;
    margin: 0;
    padding: 0;
  }
  header .pbs-logo {
    top: 40px;
    left: 40px;
    position: absolute;
    max-width: 70px;
    width: 15.9%;
  }
  header .pbs-logo img {
    width: 100%;
    margin-left: 0;
  }
  header .pink-logo {
    width: 45%;
    max-width: 200px;
    padding-top: 32px;
    display: inline-block;
  }
  header .pink-logo img {
    width: 100%;
    margin-left: 0;
  }
  header .site-nav {
    text-align: center;
    position: relative;
    margin-bottom: 40px;
    margin-top: 0;
  }
}
@media (min-width: 641px) and (max-width: 850px) {
  .tablet-as-mobile header {
    position: relative;
    margin: 0;
    padding: 0;
  }
  .tablet-as-mobile header .pbs-logo {
    top: 40px;
    left: 40px;
    position: absolute;
    max-width: 70px;
    width: 15.9%;
  }
  .tablet-as-mobile header .pbs-logo img {
    width: 100%;
    margin-left: 0;
  }
  .tablet-as-mobile header .pink-logo {
    width: 45%;
    max-width: 250px;
    padding-top: 32px;
    display: inline-block;
  }
  .tablet-as-mobile header .pink-logo img {
    width: 100%;
    margin-left: 0;
  }
  .tablet-as-mobile header .site-nav {
    text-align: center;
    position: relative;
    margin: 0;
    height: auto;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  header .pink-logo img.high {
    display: inline;
  }
  header .pink-logo img.low {
    display: none;
  }
}
@media (max-width: 400px) {
  header .pbs-logo img {
    margin-left: -50px;
  }
}
/**
 * Nav
 */
.mobile-nav {
  display: none;
}
.main-nav {
  position: absolute;
  bottom: -45px;
  width: 100%;
  z-index: 99;
  height: 250px;
  overflow: hidden;
  pointer-events: none;
}
.main-nav ul {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-43%);
  width: 512px;
  font-size: 0;
  z-index: 1;
}
@media (max-width: 600px) and (min-width: 500px) {
  .main-nav ul {
    width: 450px;
    transform: translateX(-50%);
  }
}
.main-nav ul li {
  font-size: 21px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  width: 25%;
}
.main-nav ul li.active a {
  background-position: 0 0 !important;
}
.main-nav ul a {
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
  font-size: 0;
}
.main-nav ul a img.mobile {
  display: none;
}
.main-nav ul a:hover {
  animation: bouncer 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.main-nav ul a.nav-games {
  width: 110px;
  height: 114px;
  background-image: url(../static/common/nav-games.png);
  background-position: 0 -124px;
  background-size: 110px auto;
}
.main-nav ul a.nav-games:hover {
  background-position: 0 -4px;
}
.main-nav ul a.nav-videos {
  width: 110px;
  height: 114px;
  background-image: url(../static/common/nav-videos.png);
  background-position: 0 -122px;
  background-size: 110px auto;
}
.main-nav ul a.nav-videos:hover {
  background-position: 0 2px;
}
.main-nav ul a.nav-activities {
  width: 110px;
  height: 114px;
  background-image: url(../static/common/nav-activities.png);
  background-position: 0 -123px;
  background-size: 110px auto;
}
.main-nav ul a.nav-activities:hover {
  background-position: 0 0;
}
.main-nav ul a.nav-podcast {
  width: 110px;
  height: 114px;
  background-image: url(../static/common/nav-podcast.png);
  background-position: 0 -120px;
  background-size: 110px auto;
}
.main-nav ul a.nav-podcast:hover {
  background-position: 1px -2px;
}
@media (max-width: 640px) {
  .main-nav {
    position: static;
    background-size: auto 100%, auto 100%;
    padding-top: 30px;
  }
  .main-nav:before, .main-nav:after {
    display: none;
  }
  .main-nav ul {
    transform: translateX(-50%);
  }
}
@media (min-width: 641px) and (max-width: 850px) {
  .tablet-as-mobile .main-nav:before, .tablet-as-mobile .main-nav:after {
    display: none;
  }
  .tablet-as-mobile .main-nav ul {
    transform: translateX(-50%);
  }
}
@media (min-width: 641px) {
  .main-nav:before, .main-nav:after {
    display: none;
  }
  .main-nav ul {
    transform: translateX(-50%);
  }
}
.menu-bottom {
  bottom: 70px;
}
@media (min-width: 641px) and (max-width: 849px) {
  .tablet-as-mobile .main-nav {
    height: 300px;
    position: relative;
  }
  .tablet-as-mobile .main-nav ul {
    transform: translateX(-50%);
  }
  .tablet-as-mobile .main-nav .menu-bottom {
    bottom: 114px;
  }
}
@media (max-width: 500px) {
  .main-nav {
    height: 200px;
    padding-top: 0;
  }
  .main-nav ul {
    transform: translateX(-50%) scale(0.67);
  }
}
@media (max-width: 380px) {
  .main-nav {
    height: 190px;
  }
  .main-nav ul {
    transform: translateX(-50%) scale(0.63);
  }
}
@media (max-width: 360px) {
  .main-nav {
    height: 180px;
  }
  .main-nav ul {
    transform: translateX(-50%) scale(0.6);
  }
}
@media (max-width: 340px) {
  .main-nav {
    height: 170px;
  }
  .main-nav ul {
    transform: translateX(-50%) scale(0.57);
  }
}
/**
 * Footer
 */
footer {
  width: 100%;
  margin-top: -39px;
  background: #fcddec;
  color: #333;
  position: relative;
  z-index: 4;
  padding-bottom: 30px;
}
footer:before {
  content: "";
  top: -29px;
  display: block;
  height: 29px;
  background: transparent url(../static/common/lace-hor.png) repeat-x center top;
  position: relative;
  z-index: 2;
}
footer.alt .flowers, footer.backyard .flowers, footer.fairyland .fairyland-fg, footer.sunrise .sunrise-fg, footer.sunrise .sun, footer.party .party-fg {
  display: block;
}
footer.backyard, footer.fairyland, footer.alt, footer.party {
  z-index: 0;
}
footer .flowers {
  display: none;
  width: 100%;
  background: url(../static/common/flowers_short.png) repeat-x center top;
  background-size: auto;
  height: 145px;
  position: absolute;
  left: 0;
  right: 0;
  top: -145px;
  z-index: 1;
}
@media (max-width: 640px) {
  footer .flowers {
    display: none !important;
  }
}
footer .fairyland-fg {
  display: none;
  width: 100%;
  min-height: 360px;
  position: absolute;
  left: 0;
  right: 0;
  top: -360px;
  z-index: 0;
}
@media (max-width: 640px) {
  footer .fairyland-fg {
    display: none !important;
  }
}
footer .fairyland-fg .fg-l {
  background: url(../static/theme/fairyland_foreground_L.png) no-repeat right bottom;
  background-size: 100%;
  position: absolute;
  left: 0;
  right: unset;
  z-index: 0;
  width: 50%;
  height: 360px;
}
@media (min-width: 1700px) {
  footer .fairyland-fg .fg-l {
    background-size: contain;
  }
}
footer .fairyland-fg .fg-r {
  background: url(../static/theme/fairyland_foreground_R.png) no-repeat right bottom;
  background-size: 100%;
  position: absolute;
  left: unset;
  right: 0;
  height: 360px;
  width: 30%;
  z-index: 0;
}
@media (min-width: 1700px) {
  footer .fairyland-fg .fg-r {
    background-size: contain;
  }
}
footer.sunrise {
  z-index: 0;
}
footer .sunrise-fg {
  display: none;
  width: 100%;
  background: url(../static/theme/sunrise_ground_trimmed.png) repeat-x center bottom;
  background-size: 1300px 524px;
  min-height: 524px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  top: -524px;
  max-width: 1300px;
  z-index: 0;
}
@media (max-width: 640px) {
  footer .sunrise-fg {
    display: none !important;
  }
}
footer .sun {
  display: none;
  width: 100%;
  background-size: 100%;
  height: 675px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  top: -850px;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
}
@media (max-width: 1000px) {
  footer .sun {
    top: -825px;
  }
}
@media (max-width: 768px) {
  footer .sun {
    top: -825px;
  }
}
@media (max-width: 640px) {
  footer .sun {
    display: none !important;
  }
}
footer .sun img {
  display: block;
  margin: 0 auto;
  width: 1024px;
  height: 1024px;
  transform: rotate(0deg);
  animation: spinning-sun 60s linear infinite;
}
footer .party-fg {
  display: none;
  width: 100%;
  min-height: 255px;
  position: absolute;
  left: 0;
  right: 0;
  top: -255px;
  z-index: 0;
}
@media (max-width: 640px) {
  footer .party-fg {
    display: none !important;
  }
}
footer .party-fg .fg-l {
  background: url(../static/theme/party_foreground_L.png) no-repeat right bottom;
  position: absolute;
  left: 0;
  right: unset;
  z-index: 0;
  width: 50%;
  height: 255px;
  max-width: 614px;
}
footer .party-fg .fg-r {
  background: url(../static/theme/party_foreground_R.png) no-repeat left bottom;
  position: absolute;
  left: unset;
  right: 0;
  height: 255px;
  width: 50%;
  z-index: 0;
  max-width: 668px;
}
footer .wrapper {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 20px;
}
@media (max-width: 1024px) {
  footer .wrapper {
    width: 95%;
    margin: 0 auto;
  }
}
footer .wrapper .funder-blocks {
  position: relative;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.4;
}
footer .wrapper .funder-blocks::after {
  display: block;
  content: "";
  clear: both;
}
footer .wrapper .funder-blocks .block {
  width: 66%;
  float: left;
}
@media (max-width: 641px) {
  footer .wrapper .funder-blocks .block {
    width: 100%;
    max-width: 100%;
  }
}
footer .wrapper .funder-blocks .block::after {
  display: block;
  content: "";
  clear: both;
}
footer .wrapper .funder-blocks .block .produced {
  color: #8a8a8a;
}
@media (max-width: 400px) {
  footer .wrapper .funder-blocks .block .produced {
    margin: 15px 0 30px;
  }
}
footer .wrapper .funder-blocks .block .funding {
  max-width: 310px;
  line-height: 1.8;
}
footer .wrapper .funder-blocks .block .funding img {
  display: block;
  max-width: 130px;
  height: auto;
  float: none;
}
@media (max-width: 400px) {
  footer .wrapper .funder-blocks .block .funding {
    margin: 15px 0;
  }
}
footer .wrapper .funder-blocks .block .produced, footer .wrapper .funder-blocks .block .funding {
  display: block;
  width: 49%;
  float: left;
}
@media (max-width: 400px) {
  footer .wrapper .funder-blocks .block .produced, footer .wrapper .funder-blocks .block .funding {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
  }
}
footer .wrapper .funder-blocks .app-promo {
  width: 33%;
  float: left;
  font-size: 0;
}
@media (max-width: 641px) {
  footer .wrapper .funder-blocks .app-promo {
    width: 100%;
    max-width: 100%;
    float: none;
  }
  footer .wrapper .funder-blocks .app-promo a.app {
    background-position: center center;
  }
}
footer .wrapper .funder-blocks .app-promo .block {
  float: right;
  text-align: center;
  max-width: 100%;
  width: 95%;
}
@media (max-width: 641px) {
  footer .wrapper .funder-blocks .app-promo .block {
    width: 100%;
    max-width: 100%;
  }
}
footer .wrapper .funder-blocks .app-promo .block a.app {
  color: #333;
  text-decoration: none;
  width: 100%;
  max-width: 310px;
  border-radius: 10px;
  background: url(../static/common/app-promo-banner-site.png) no-repeat right 0;
  background-size: contain;
  height: 88px;
  display: block;
}
footer .wrapper .funder-blocks .app-promo .block a.app:hover {
  background-position: right 2px;
}
@media (max-width: 641px) {
  footer .wrapper .funder-blocks .app-promo .block a.app {
    background-position: center center;
    margin: 15px auto;
  }
  footer .wrapper .funder-blocks .app-promo .block a.app:hover {
    background-position: center 2px;
  }
}
footer .wrapper .funder-blocks img {
  display: block;
  float: left;
  margin: 15px 10px;
  width: auto;
  max-width: 100%;
}
footer .wrapper .funder-blocks img:first-child {
  margin-left: 0;
}
@media (max-width: 641px) {
  footer .wrapper .funder-blocks img {
    margin: 10px auto;
    float: none;
  }
  footer .wrapper .funder-blocks img:first-child {
    margin-left: auto;
  }
}
footer .wrapper .copyright {
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}
footer .wrapper .copyright p {
  margin-bottom: 0;
}
footer .wrapper .copyright ul.footer-menu {
  text-align: center;
  clear: both;
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  line-height: 2;
}
@media (max-width: 400px) {
  footer .wrapper .copyright ul.footer-menu {
    margin: 0 auto 25px;
  }
}
footer .wrapper .copyright ul.footer-menu li {
  display: inline-block;
  margin: 0 10px;
}
footer .wrapper .copyright a {
  text-decoration: underline;
  color: #ef1ca5;
  font-weight: normal;
  line-height: 1.3;
}
.no-touchevents footer .wrapper .copyright a:hover, .touchevents footer .wrapper .copyright a:active {
  text-decoration: none;
}
@media (min-width: 641px) {
  footer {
    font-size: 12px;
    padding: 0 0 30px 0;
  }
}
.hero-pink, .hero-kendra, .hero-rafael, .hero-jasmine, .hero-peter {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.modal-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: none;
  opacity: 1;
  z-index: 100000;
}
.modal-prompt .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.modal-prompt .modal {
  background: transparent;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-prompt .modal .cancel-overlay {
  position: absolute;
  top: -37px;
  right: -37px;
  width: 74px;
  height: 74px;
  line-height: 40px;
  font-size: 0px;
  font-weight: bolder;
  color: #e7209f;
  cursor: pointer;
  background: url(../static/activities/button_close.png) repeat-x 0 0;
}
.modal-prompt .modal .cancel-overlay:hover {
  background-position: 0 -149px;
}
.modal-prompt .modal .activity-image {
  margin: 0 auto;
  display: block;
  z-index: 0;
}
.modal-prompt .modal .activity-image img {
  margin: 0 auto;
  display: block;
  border: 10px solid #e7209f;
  outline: 10px solid #eb6cca;
  position: relative;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
  width: auto;
  max-width: 450px;
  height: auto;
  max-height: 62vh;
  z-index: -1;
}
@media (max-width: 400px) {
  .modal-prompt .modal .activity-image img {
    max-width: 80%;
  }
}
.modal-prompt .modal .modal-link {
  z-index: 1;
  display: block;
  margin: -7px auto 0;
  text-align: center;
  font-size: 0;
  width: 320px;
  height: 90px;
  background: transparent url(../static/activities/download_button.png) repeat-x 0 0;
  background-size: 100% auto;
}
.modal-prompt .modal .modal-link:hover {
  background-position: 0 -95px;
}
@media (max-width: 400px) {
  .modal-prompt .modal .modal-link {
    width: 250px;
    height: 75px;
  }
  .modal-prompt .modal .modal-link:hover {
    background-position: 0 100%;
  }
}
@-webkit-keyframes floatHover {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-6%);
  }
  30% {
    transform: translateY(2%);
  }
  45% {
    transform: translateY(-1%);
  }
  70% {
    transform: translateY(0.25%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-moz-keyframes floatHover {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-6%);
  }
  30% {
    transform: translateY(2%);
  }
  45% {
    transform: translateY(-1%);
  }
  70% {
    transform: translateY(0.25%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-o-keyframes floatHover {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-6%);
  }
  30% {
    transform: translateY(2%);
  }
  45% {
    transform: translateY(-1%);
  }
  70% {
    transform: translateY(0.25%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes floatHover {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-6%);
  }
  30% {
    transform: translateY(2%);
  }
  45% {
    transform: translateY(-1%);
  }
  70% {
    transform: translateY(0.25%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes bouncer {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes bouncer {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes bouncer {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bouncer {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes floatBasicUp {
  0% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
  40% {
    transform: translate(0, 0) rotate(0.002deg);
  }
  100% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
}
@-moz-keyframes floatBasicUp {
  0% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
  40% {
    transform: translate(0, 0) rotate(0.002deg);
  }
  100% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
}
@-o-keyframes floatBasicUp {
  0% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
  40% {
    transform: translate(0, 0) rotate(0.002deg);
  }
  100% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
}
@keyframes floatBasicUp {
  0% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
  40% {
    transform: translate(0, 0) rotate(0.002deg);
  }
  100% {
    transform: translate(-2px, -15px) rotate(0.001deg);
  }
}
@-webkit-keyframes floatBasicUpI {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(-2px, -15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-moz-keyframes floatBasicUpI {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(-2px, -15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-o-keyframes floatBasicUpI {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(-2px, -15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@keyframes floatBasicUpI {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(-2px, -15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-webkit-keyframes floatBasicUpDown {
  0% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
  50% {
    transform: translate(-1px, -10px) rotate(0.002deg);
  }
  100% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
}
@-moz-keyframes floatBasicUpDown {
  0% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
  50% {
    transform: translate(-1px, -10px) rotate(0.002deg);
  }
  100% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
}
@-o-keyframes floatBasicUpDown {
  0% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
  50% {
    transform: translate(-1px, -10px) rotate(0.002deg);
  }
  100% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
}
@keyframes floatBasicUpDown {
  0% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
  50% {
    transform: translate(-1px, -10px) rotate(0.002deg);
  }
  100% {
    transform: translate(4px, 12px) rotate(0.001deg);
  }
}
@-webkit-keyframes floatBasicDown {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(5px, 15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-moz-keyframes floatBasicDown {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(5px, 15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-o-keyframes floatBasicDown {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(5px, 15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@keyframes floatBasicDown {
  0% {
    transform: translate(0, 0) rotate(0.001deg);
  }
  50% {
    transform: translate(5px, 15px) rotate(0.002deg);
  }
  100% {
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-webkit-keyframes sparkle {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes sparkle {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes sparkle {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sparkle {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes sparkle2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes sparkle2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes sparkle2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sparkle2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes sparkle3 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes sparkle3 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes sparkle3 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sparkle3 {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0%, 18%, 22%, 58%, 62% {
    height: 4px;
  }
  20%, 60% {
    height: 0px;
  }
}
@keyframes head-shake {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1.5deg);
  }
  75% {
    transform: rotate(-1.5deg);
  }
}
@keyframes head-shake-alt {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1.5deg);
  }
  75% {
    transform: rotate(1.5deg);
  }
}
@keyframes butterfly {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -150px;
  }
}
@keyframes path-butterfly {
  0% {
    left: 0%;
  }
  30% {
    transform: rotate(90deg);
    top: 200px;
  }
  40% {
    top: 150px;
    transform: rotate(0deg);
    left: 25%;
  }
  50% {
    transform: rotate(-180deg);
    top: 100px;
    left: 25%;
  }
  60% {
    transform: rotate(-270deg);
    left: 30%;
  }
  65% {
    top: 200px;
    left: 33%;
  }
  100% {
    left: 100%;
    transform: rotate(-270deg);
  }
}
@keyframes purple-butterfly {
  0% {
    left: 0;
    top: 150px;
  }
  25% {
    left: 30%;
    top: 100px;
  }
  35% {
    left: 27%;
    top: 70px;
  }
  45% {
    left: 35%;
    top: 0;
  }
  50% {
    left: 43%;
    top: 20px;
  }
  55% {
    left: 47%;
    top: 0;
  }
  60% {
    left: 52%;
    top: 40px;
  }
  70% {
    top: 100px;
    left: 68%;
  }
  75% {
    top: 125px;
    left: 66%;
  }
  100% {
    left: 100%;
    top: 150px;
  }
}
@keyframes pink-butterfly-alt {
  0% {
    left: 0;
    top: 150px;
  }
  10% {
    left: 15%;
  }
  15% {
    left: 30%;
    top: 100px;
  }
  35% {
    left: 40%;
    top: 70px;
  }
  45% {
    left: 35%;
    top: 30px;
  }
  55% {
    left: 43%;
    top: 0px;
  }
  70% {
    left: 55%;
    top: 100px;
  }
  85% {
    top: 85px;
    left: 75%;
  }
  95% {
    left: 90%;
    top: 130px;
  }
  100% {
    left: 100%;
    top: 100px;
  }
}
@keyframes pink-butterfly {
  0% {
    right: 0%;
    top: 100px;
  }
  15% {
    right: 15%;
    top: 150px;
  }
  35% {
    right: 27%;
    top: 70px;
  }
  45% {
    right: 40%;
    top: 0;
  }
  100% {
    right: 100%;
    top: 180px;
  }
}
@keyframes pinker-butterfly {
  0% {
    right: 0%;
    top: 140px;
  }
  10% {
    right: 5%;
    top: 100px;
  }
  15% {
    right: 10%;
    top: 130px;
  }
  25% {
    right: 15%;
    top: 100px;
  }
  45% {
    right: 25%;
    top: 95px;
  }
  65% {
    right: 45%;
  }
  100% {
    right: 100%;
    top: 180px;
  }
}
.home .character.hero-pink.jump {
  animation: hero-pink-jump 1s linear;
}
@media (max-width: 1000px) {
  .home .character.hero-pink.jump {
    animation: hero-pink-jump-scaled 1s linear;
  }
}
.home .character.hero-pink.jump:after {
  animation: pink-jump-shadow 1s linear;
}
.home .character.hero-pink.jump .head .pony-left {
  animation: hero-pink-pony-left 1s ease-in;
}
.home .character.hero-pink.jump .head .pony-right {
  animation: hero-pink-pony-right 1s ease-in;
}
.home .character.hero-pink.jump .head .smile {
  animation: hero-pink-smile 1s linear;
}
.home .character.hero-pink.jump .head .smile .open {
  animation: hero-pink-smile-open 1s linear;
}
.home .character.hero-pink.jump .body .left {
  animation: hero-pink-left-arm 1s linear;
}
.home .character.hero-pink.jump .body .left .arm-lower {
  animation: hero-pink-left-arm-lower 1s linear;
}
.home .character.hero-pink.jump .body .left .arm-lower .hand-open-back {
  animation: hero-pink-left-hand-open-back 1s linear;
}
.home .character.hero-pink.jump .body .left .arm-lower .hand-open-front {
  animation: hero-pink-left-hand-open-front 1s linear;
}
.home .character.hero-pink.jump .body .right {
  animation: hero-pink-right-arm 1s linear;
}
.home .character.hero-pink.jump .body .right .arm-lower {
  animation: hero-pink-right-arm-lower 1s linear;
}
.home .character.hero-pink.jump .body .right .arm-lower .hand-open-back {
  animation: hero-pink-left-hand-open-back 1s linear;
}
.home .character.hero-pink.jump .body .right .arm-lower .hand-open-front {
  animation: hero-pink-left-hand-open-front 1s linear;
}
.home .character.hero-pink.jump .legs .left {
  animation: hero-pink-left-leg 1s linear;
}
.home .character.hero-pink.jump .legs .right {
  animation: hero-pink-right-leg 1s linear;
}
@keyframes hero-pink-jump {
  0% {
    top: 32.2%;
    transform: translate(-50%);
  }
  20% {
    top: 34%;
    transform: translate(-50%);
  }
  50% {
    top: 15%;
    transform: translate(-50%) rotate(-7deg);
  }
  80% {
    top: 32.2%;
    transform: translate(-50%) rotate(0);
  }
}
@keyframes hero-pink-jump-scaled {
  0% {
    top: 32.2%;
    transform: scale(0.8);
  }
  20% {
    top: 34%;
    transform: scale(0.8);
  }
  50% {
    top: 15%;
    transform: scale(0.8) rotate(-7deg);
  }
  80%, 100% {
    top: 32.2%;
    transform: scale(0.8) rotate(0);
  }
}
@keyframes pink-jump-shadow {
  0%, 80% {
    width: 205px;
    transform: rotate(0deg);
    left: 0%;
    top: 380px;
  }
  20% {
    width: 205px;
    transform: rotate(0deg);
    left: 0%;
    top: 368px;
  }
  50% {
    transform: rotate(7deg);
    width: 100px;
    left: 12%;
    top: 495px;
  }
}
@keyframes hero-pink-pony-left {
  0, 100% {
    transform: rotate(0);
    top: 43px;
  }
  10% {
    transform: rotate(20deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(40deg);
  }
}
@keyframes hero-pink-pony-right {
  0, 100% {
    transform: rotate(0);
    top: 43px;
  }
  10% {
    transform: rotate(-20deg);
  }
  20% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-40deg);
  }
}
@keyframes hero-pink-smile {
  0%, 34%, 80% {
    background-image: url(../static/animations/pink/smile_thin.png);
  }
  35%, 79% {
    background-image: none;
  }
}
@keyframes hero-pink-smile-open {
  0%, 34%, 80% {
    opacity: 0;
  }
  35%, 79% {
    opacity: 1;
  }
}
@keyframes hero-pink-left-arm {
  0, 100% {
    transform: rotate(-15deg);
  }
  20% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(84deg);
  }
}
@keyframes hero-pink-left-arm-lower {
  0, 100% {
    transform: rotate(34deg);
  }
  20% {
    transform: rotate(34deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes hero-pink-left-hand-open-back {
  0%, 19%, 70%, 100% {
    display: block !important;
    opacity: 1;
  }
  20%, 69% {
    display: none;
    opacity: 0;
  }
}
@keyframes hero-pink-left-hand-open-front {
  0%, 19%, 70%, 100% {
    display: none;
    opacity: 0;
  }
  20%, 69% {
    display: block !important;
    opacity: 1;
  }
}
@keyframes hero-pink-right-arm {
  0, 100% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(-56deg);
  }
}
@keyframes hero-pink-right-arm-lower {
  0, 100% {
    transform: rotate(-34deg);
    top: 166px;
  }
  20% {
    transform: rotate(-34deg);
    top: 166px;
  }
  50% {
    transform: rotate(-70deg);
    top: 170px;
  }
}
@keyframes hero-pink-left-leg {
  0% {
    transform: rotate(0);
    left: 70px;
  }
  20% {
    transform: rotate(-8deg);
    left: 70px;
  }
  50% {
    transform: rotate(23deg);
    left: 50px;
  }
  80% {
    transform: rotate(0);
    left: 70px;
  }
}
@keyframes hero-pink-right-leg {
  0% {
    transform: rotate(0);
    left: 123px;
  }
  20% {
    transform: rotate(8deg);
    left: 123px;
  }
  50% {
    transform: rotate(-23deg);
    left: 143px;
  }
  80% {
    transform: rotate(0);
    left: 123px;
  }
}
.home .hero-peter.jump {
  animation: hero-peter-jump 1.5s linear;
}
@media (max-width: 1000px) {
  .home .hero-peter.jump {
    animation: hero-peter-jump-scaled 1.5s linear;
  }
}
.home .hero-peter.jump:after {
  animation: peter-jump-shadow 1.5s linear;
}
.home .hero-peter.jump .head .smile {
  animation: hero-peter-smile 1.5s linear;
}
.home .hero-peter.jump .head .smile .open {
  animation: hero-peter-smile-open 1.5s linear;
}
.home .hero-peter.jump .body .left {
  animation: hero-peter-jump-left-arm 1.5s linear;
}
.home .hero-peter.jump .body .left .arm-lower {
  animation: hero-peter-jump-left-arm-lower 1.5s linear;
}
.home .hero-peter.jump .body .left .arm-lower .hand-down {
  animation: hero-peter-jump-hand-down 1.5s linear;
}
.home .hero-peter.jump .body .left .arm-lower .hand-open {
  animation: hero-peter-jump-hand-open 1.5s linear;
}
.home .hero-peter.jump .body .right {
  animation: hero-peter-jump-right-arm 1.5s linear;
}
.home .hero-peter.jump .body .right .arm-lower .hand-down {
  animation: hero-peter-jump-hand-down 1.5s linear;
}
.home .hero-peter.jump .body .right .arm-lower .hand-open {
  animation: hero-peter-jump-hand-open 1.5s linear;
}
.home .hero-peter.jump .legs .left .leg {
  animation: hero-peter-jump-left-leg 1.5s linear;
}
.home .hero-peter.jump .legs .left .leg .foot {
  animation: hero-peter-jump-left-foot 1.5s linear;
}
.home .hero-peter.jump .legs .right .leg {
  animation: hero-peter-jump-right-leg 1.5s linear;
}
.home .hero-peter.jump .legs .right .leg .foot {
  animation: hero-peter-jump-right-foot 1.5s linear;
}
@keyframes hero-peter-jump {
  0%, 40%, 100% {
    top: 46.5%;
    left: 42.5%;
    transform: translate(-50%) rotate(0deg) scale(0.9);
  }
  10% {
    top: 47.5%;
    left: 42.5%;
    transform: translate(-50%) scale(0.9);
  }
  25% {
    top: 36%;
    left: 42%;
    transform: translate(-50%) rotate(-5deg) scale(0.9);
  }
}
@keyframes hero-peter-jump-scaled {
  0%, 40%, 100% {
    top: 46.5%;
    transform: translate(-50%) rotate(0deg) scale(0.7);
  }
  10% {
    top: 47.5%;
    transform: translate(-50%) scale(0.7);
  }
  25% {
    top: 36%;
    transform: translate(-50%) rotate(-5deg) scale(0.7);
  }
}
@keyframes peter-jump-shadow {
  0%, 40%, 100% {
    width: 205px;
    transform: rotate(0deg);
    left: 0%;
    top: 89.5%;
  }
  10% {
    width: 205px;
    transform: rotate(0deg);
    left: 0%;
    top: 88%;
  }
  25% {
    transform: rotate(5deg);
    width: 150px;
    left: 10%;
    top: 111%;
  }
}
@keyframes hero-peter-smile {
  0%, 9%, 40%, 100% {
    background-image: url(../static/animations/peter/mouth.png);
  }
  10%, 39% {
    background-image: none;
  }
}
@keyframes hero-peter-smile-open {
  0%, 9%, 40%, 100% {
    opacity: 0;
  }
  10%, 39% {
    opacity: 1;
  }
}
@keyframes hero-peter-jump-hand-down {
  0%, 9%, 85%, 100% {
    display: block !important;
    opacity: 1;
  }
  10%, 84% {
    display: none;
    opacity: 0;
  }
}
@keyframes hero-peter-jump-hand-open {
  0%, 9%, 85%, 100% {
    display: none;
    opacity: 0;
  }
  10%, 84% {
    display: block !important;
    opacity: 1;
  }
}
@keyframes hero-peter-jump-left-arm {
  0%, 10%, 80% {
    transform: rotate(-19deg);
  }
  25%, 80% {
    transform: rotate(80deg);
  }
  90% {
    transform: rotate(65deg);
  }
}
@keyframes hero-peter-jump-left-arm-lower {
  0%, 25%, 100% {
    transform: rotate(23deg);
  }
  30%, 70% {
    transform: rotate(60deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes hero-peter-jump-right-arm {
  0%, 10%, 80% {
    transform: rotate(19deg);
  }
  25%, 50% {
    transform: rotate(-80deg);
  }
  70% {
    transform: rotate(-65deg);
  }
}
@keyframes hero-peter-jump-left-leg {
  0%, 10%, 40%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
}
@keyframes hero-peter-jump-right-leg {
  0%, 10%, 40%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
}
@keyframes hero-peter-jump-left-foot {
  0%, 10%, 40%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
}
@keyframes hero-peter-jump-right-foot {
  0%, 10%, 40%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
}
.home .hero-rafael.wave .body .left {
  animation: rafael-wave-arm 1.5s linear;
}
.home .hero-rafael.wave .body .left .arm-lower {
  animation: rafael-wave-lower-arm 1.5s linear;
}
.home .hero-rafael.wave .body .left .arm-lower .hand {
  animation: rafael-wave-hand 1.5s linear;
}
.home .hero-jasmine.wave .body .left {
  animation: rafael-wave-arm 2s linear;
}
.home .hero-jasmine.wave .body .left .arm-lower {
  animation: jasmine-wave-lower-arm 2s linear;
}
.home .hero-jasmine.wave .body .left .arm-lower .hand {
  animation: jasmine-wave-hand 2s linear;
}
@keyframes rafael-wave-arm {
  0%, 100% {
    transform: rotate(-12deg);
  }
  30%, 75% {
    transform: rotate(30deg);
  }
}
@keyframes rafael-wave-lower-arm {
  0%, 100% {
    transform: rotate(13deg);
    left: 32px;
  }
  30%, 75% {
    transform: rotate(120deg);
    left: 30px;
  }
}
@keyframes jasmine-wave-lower-arm {
  0%, 100% {
    transform: rotate(13deg);
  }
  30%, 75% {
    transform: rotate(120deg);
  }
}
@keyframes jasmine-wave-hand {
  0%, 30%, 60%, 100% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes rafael-wave-hand {
  0%, 100% {
    transform: rotate(0);
  }
  30%, 75% {
    transform: rotate(20deg);
  }
}
.home .hero-kendra.wave .body .right {
  animation: kendra-wave-arm 1.5s linear;
}
.home .hero-kendra.wave .body .right .arm-lower {
  animation: kendra-wave-lower-arm 1.5s linear;
}
.home .hero-kendra.wave .body .right .arm-lower .hand {
  animation: kendra-wave-hand 1.5s linear;
}
.home .hero-kendra.wave .body .right .arm-lower .hand img.wave {
  animation: kendra-wave-hand-img 1.5s linear;
}
.home .hero-kendra.wave .body .right .arm-lower .hand img.down {
  animation: kendra-wave-hand-down 1.5s linear;
}
@keyframes kendra-wave-arm {
  0%, 100% {
    transform: rotate(-12deg);
  }
  30%, 75% {
    transform: rotate(-40deg);
  }
}
@keyframes kendra-wave-lower-arm {
  0%, 100% {
    transform: rotate(-12deg);
  }
  30%, 75% {
    transform: rotate(-130deg);
  }
}
@keyframes kendra-wave-hand {
  0%, 30%, 60%, 100% {
    transform: rotate(0deg);
  }
  45% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes kendra-wave-hand-img {
  0%, 100% {
    opacity: 0;
  }
  1%, 99% {
    opacity: 1;
  }
}
@keyframes kendra-wave-hand-down {
  0%, 100% {
    opacity: 1;
  }
  1%, 99% {
    opacity: 0;
  }
}
@keyframes spinning-sun {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes cloud_1 {
  0% {
    right: -250px;
  }
  100% {
    right: 100%;
  }
}
@keyframes cloud_2 {
  0% {
    right: -300px;
  }
  100% {
    right: 100%;
  }
}
@keyframes cloud_3 {
  0% {
    right: 50%;
  }
  50% {
    right: 100%;
    opacity: 1;
  }
  51% {
    opacity: 0;
    right: 100%;
  }
  52% {
    opacity: 0;
    right: -350px;
  }
  53% {
    opacity: 1;
    right: -350px;
  }
  100% {
    right: 50%;
  }
}
@keyframes cloud_4 {
  0% {
    right: 25%;
    opacity: 1;
  }
  74% {
    right: 100%;
    opacity: 1;
  }
  75% {
    right: 100%;
    opacity: 0;
  }
  76% {
    opacity: 0;
    right: -250px;
  }
  77% {
    opacity: 1;
    right: -250px;
  }
  100% {
    right: 25%;
    opacity: 1;
  }
}
@keyframes falling-star {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  70% {
    top: 70%;
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes falling-star-mobile {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    top: 40%;
    opacity: 1;
  }
  60% {
    top: 60%;
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes box-shadow-anim {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes star-glow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes star-glow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes star-glow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes star-glow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes star-glow2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes star-glow2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes star-glow2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes star-glow2 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes star-glow3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes star-glow3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes star-glow3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes star-glow3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes falling-confetti {
  0% {
    top: -10%;
    opacity: 1;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  70% {
    top: 70%;
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes confetti-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.videos .hero-pink.wave {
  animation: pink-wave-wrap 2s linear !important;
}
.videos .hero-pink.wave .head {
  animation: pink-wave-head 2s linear;
}
.videos .hero-pink.wave .body .right {
  animation: pink-wave-arm 2s linear;
}
.videos .hero-pink.wave .body .right .arm-lower {
  animation: pink-wave-lower-arm 2s linear;
}
.videos .hero-pink.wave .body .right .hand-open-front {
  animation: pink-wave-hand 2s linear;
}
@keyframes pink-wave-wrap {
  0%, 100% {
    transform: rotate(0deg);
  }
  25%, 75% {
    transform: rotate(-3deg);
  }
}
@keyframes pink-wave-head {
  0%, 100% {
    transform: rotate(0deg);
    margin-left: 0;
  }
  50% {
    transform: rotate(-8deg);
    margin-left: -2px;
  }
}
@keyframes pink-wave-left-arm {
  0%, 100% {
    top: 0;
  }
  50% {
    top: 5px;
  }
}
@keyframes pink-wave-arm {
  0%, 100% {
    transform: rotate(12deg);
  }
  25%, 75% {
    transform: rotate(-11deg);
  }
}
@keyframes pink-wave-lower-arm {
  0%, 100% {
    transform: rotate(-34px);
  }
  25%, 50% {
    transform: rotate(-120deg);
    top: 173px;
  }
  37.5%, 75% {
    transform: rotate(-150deg);
    top: 175px;
  }
}
@keyframes pink-wave-hand {
  0%, 50%, 100% {
    transform: rotate(23deg);
  }
  25% {
    transform: rotate(28deg);
  }
  75% {
    transform: rotate(18deg);
  }
}
.videos .hero-peter.wave {
  animation: peter-wave-wrap 2s linear !important;
}
.videos .hero-peter.wave .head {
  animation: peter-wave-head 2s linear;
}
.videos .hero-peter.wave .body .left {
  animation: peter-wave-arm 2s linear;
}
.videos .hero-peter.wave .body .left .arm-lower {
  animation: peter-wave-lower-arm 2s linear;
}
.videos .hero-peter.wave .body .left .hand-open {
  animation: peter-wave-hand 2s linear;
}
@keyframes peter-wave-wrap {
  0%, 100% {
    transform: rotate(0deg) scale(0.9);
  }
  25%, 75% {
    transform: rotate(10deg) scale(0.9);
  }
}
@keyframes peter-wave-head {
  0%, 100% {
    transform: rotate(0deg);
    margin-left: 0;
  }
  50% {
    transform: rotate(-8deg);
    margin-left: -2px;
  }
}
@keyframes peter-wave-arm {
  0%, 100% {
    transform: rotate(-10deg);
  }
  25%, 75% {
    transform: rotate(15deg);
  }
}
@keyframes peter-wave-lower-arm {
  0%, 100% {
    transform: rotate(23px);
  }
  25%, 50% {
    transform: rotate(120deg);
    left: 47px;
  }
  37.5%, 75% {
    transform: rotate(150deg);
    left: 47px;
  }
}
@keyframes peter-wave-hand {
  0%, 50%, 100% {
    transform: rotate(-147deg);
  }
  25% {
    transform: rotate(-142deg);
  }
  75% {
    transform: rotate(-132deg);
  }
}
.games .hero-pink.turn .head .crown, .games .hero-pink.turn .head .pony-left, .games .hero-pink.turn .head .pony-right, .games .hero-pink.turn .head .head-base, .games .hero-pink.turn .head .right.eyebrow, .games .hero-pink.turn .head .left.eyebrow, .games .hero-pink.turn .head .eye.left, .games .hero-pink.turn .head .eye.right, .games .hero-pink.turn .head .nose, .games .hero-pink.turn .head .smile {
  animation: pink-turn-head-base 2s linear;
}
.games .hero-pink.turn .head-turn {
  animation: pink-turn-head-turn 2s linear;
}
.games .hero-pink.turn .body .left {
  animation: pink-turn-arm 2s linear;
}
.games .hero-pink.turn .body .left .arm-lower {
  animation: pink-turn-arm-lower 2s linear;
}
.games .hero-pink.turn .body .left .arm-lower .hand-open-front {
  animation: pink-turn-hand-open 2s linear;
}
.games .hero-pink.turn .body .left .arm-lower .hand-open-back {
  animation: pink-turn-hand-back 2s linear;
}
@keyframes pink-turn-head-base {
  0%, 100% {
    opacity: 1;
    display: block;
  }
  12% {
    opacity: 1;
    display: none;
  }
  12.5% {
    opacity: 0;
    display: none;
  }
  82% {
    opacity: 0;
    display: block;
  }
  82.5% {
    opacity: 1;
    display: block;
  }
}
@keyframes pink-turn-head-turn {
  0%, 100% {
    opacity: 0;
    display: none;
    transform: rotate(0deg);
  }
  5% {
    opacity: 0;
    display: none;
    transform: rotate(6deg);
  }
  12% {
    display: block;
    opacity: 0;
    transform: rotate(6deg);
  }
  12.5% {
    opacity: 1;
    display: block;
    transform: rotate(6deg);
  }
  82% {
    display: none;
    opacity: 1;
    transform: rotate(6deg);
  }
  82.5% {
    display: block;
    opacity: 0;
    transform: rotate(6deg);
  }
}
@keyframes pink-turn-arm {
  0%, 100% {
    transform: rotate(-15deg);
  }
  25%, 75% {
    transform: rotate(64deg);
  }
}
@keyframes pink-turn-arm-lower {
  0%, 100% {
    transform: rotate(34deg);
    top: 166px;
  }
  25%, 75% {
    transform: rotate(70deg);
    top: 170px;
  }
}
@keyframes pink-turn-hand-open {
  0%, 100% {
    opacity: 1;
    display: block;
  }
}
@keyframes pink-turn-hand-back {
  0%, 100% {
    opacity: 0;
    display: none;
  }
}
@keyframes balloon-idle {
  0%, 100% {
    margin-top: 0;
    transform: rotate(0deg);
  }
  33% {
    margin-top: 5px;
    transform: rotate(2deg);
  }
  66% {
    transform: rotate(-2deg);
    margin-top: 5px;
  }
}
@keyframes balloon-grow {
  0% {
    max-width: 105px;
    height: 150px;
    top: 30px;
    left: 35%;
  }
  100% {
    max-width: 185px;
    height: 260px;
    top: 5px;
    left: 45%;
  }
}
@keyframes balloon-grow-scale {
  0% {
    max-width: 105px;
    height: 150px;
    top: 14%;
  }
  100% {
    max-width: 185px;
    height: 260px;
    top: 65px;
  }
}
@keyframes balloon-shrink {
  0% {
    max-width: 185px;
    height: 260px;
    top: 5px;
    left: 45%;
  }
  100% {
    max-width: 105px;
    height: 150px;
    top: 30px;
    left: 35%;
  }
}
@keyframes balloon-shrink-scale {
  0% {
    max-width: 185px;
    height: 260px;
    top: 65px;
  }
  100% {
    max-width: 105px;
    height: 150px;
    top: 14%;
  }
}