/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
html.isfullscreen #video-player {
  width: auto !important;
  height: auto !important;
  position: static !important;
}
html.isfullscreen .pbskids-onhover-overlay {
  position: static;
}
.splash-logo img:hover {
  animation: none !important;
}
#home {
  /**
   * Medium Large
   */
}
@media (min-width: 641px) {
  #home .content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #home .characters {
    position: relative;
    z-index: 1;
    opacity: 0;
    -ms-transition: opacity 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
    top: 40%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #home .characters:before {
    content: "";
    display: block;
    padding-top: 50.5494505495%;
  }
  #home .characters .character {
    position: absolute;
    height: auto;
    cursor: pointer;
  }
  #home .characters .character:after {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #home .characters .hero-splash {
    width: 33.7362637363%;
    top: 0;
    left: 45%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    backface-visibility: hidden;
  }
  #home .characters .hero-splash:before {
    content: "";
    display: block;
    padding-top: 68.4039087948%;
  }
  #home .characters .hero-splash:after {
    background-image: url(../static/home/character-splash.png);
    -ms-animation: floatSplash 21.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatSplash 21.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatSplash 21.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #home .characters .hero-ripple {
    width: 12.1428571429%;
    height: auto;
    top: 50%;
    right: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #home .characters .hero-ripple:before {
    content: "";
    display: block;
    padding-top: 196.8325791855%;
  }
  #home .characters .hero-ripple:after {
    background-image: url(../static/home/character-ripple.png);
    -ms-animation: floatRipple 7.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatRipple 7.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatRipple 7.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #home .characters .hero-dunk {
    width: 26.7032967033%;
    top: 50%;
    left: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  #home .characters .hero-dunk:before {
    content: "";
    display: block;
    padding-top: 89.9176954733%;
  }
  #home .characters .hero-dunk:after {
    background-image: url(../static/home/character-dunk.png);
    -ms-animation: floatDunk 17.33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatDunk 17.33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatDunk 17.33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #home .characters .hero-bubbles {
    width: 40.5494505495%;
    height: auto;
    bottom: 0;
    left: 60%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  #home .characters .hero-bubbles:before {
    content: "";
    display: block;
    padding-top: 72.0867208672%;
  }
  #home .characters .hero-bubbles:after {
    background-image: url(../static/home/character-bubbles.png);
    -ms-animation: floatBubbles 23.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatBubbles 23.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatBubbles 23.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #home .promos {
    position: absolute;
    width: calc(100% - 40px);
    margin: 0 20px;
    height: 0;
    z-index: 101;
    opacity: 0;
    -ms-transition: opacity 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
  }
  #home .promos .left, #home .promos .right {
    display: none;
  }
  #home .promos .left.visible, #home .promos .right.visible {
    display: block;
  }
  #home .promos a {
    width: 386px;
    display: none;
    position: absolute;
    bottom: 60px;
  }
  .no-touchevents #home .promos a:hover {
    -ms-animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #home .promos a .frame {
    display: block;
    width: 100%;
    position: relative;
    z-index: 3;
  }
  #home .promos a .promo {
    display: block;
    width: 91.97%;
    height: auto;
    top: 4%;
    left: 4%;
    z-index: 1;
    position: absolute;
  }
  #home .promos a.left {
    left: 0;
  }
  #home .promos a.right {
    right: 0;
  }
  #home .promos a:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    background-size: contain;
    background-repeat: no-repeat;
  }
  #home .promos a.type-games:before {
    width: 18.92%;
    padding-top: 10%;
    bottom: 14%;
    left: 10%;
    background-image: url(../static/home/promo-icon-games.png);
  }
  #home .promos a.type-videos:before {
    width: 16.06%;
    padding-top: 13.5%;
    bottom: 14%;
    left: 10%;
    background-image: url(../static/home/promo-icon-videos.png);
  }
  #home .promos a.type-activities:before {
    width: 20%;
    padding-top: 11.5%;
    bottom: 14%;
    left: 10%;
    background-image: url(../static/home/promo-icon-activities.png);
  }
  #home nav {
    display: none;
  }
}
@media (min-width: 641px) and (min-width: 1600px) {
  #home .promos {
    width: 1560px;
    margin: 0 20px;
    position: absolute;
    left: 50%;
    margin-left: -780px;
  }
}
@media (min-width: 641px) and (max-width: 1420px), (min-width: 641px) and (max-height: 850px) {
  #home .promos a {
    width: 370px;
    bottom: 40px;
  }
}
@media (min-width: 641px) and (max-width: 1400px) {
  #home .promos a {
    width: 360px;
  }
}
@media (min-width: 641px) and (max-width: 1375px) {
  #home .promos a {
    width: 350px;
  }
}
@media (min-width: 641px) and (max-width: 1350px) {
  #home .promos a {
    width: 340px;
  }
}
@media (min-width: 641px) and (max-width: 1325px) {
  #home .promos a {
    width: 330px;
  }
}
@media (min-width: 641px) and (max-width: 1300px) {
  #home .promos a {
    width: 320px;
  }
}
@media (min-width: 641px) and (max-width: 1275px) {
  #home .promos a {
    width: 310px;
  }
}
@media (min-width: 641px) and (max-width: 1250px) {
  #home .promos a {
    width: 300px;
  }
}
@media (min-width: 641px) and (max-width: 1225px) {
  #home .promos a {
    width: 290px;
  }
}
@media (min-width: 641px) and (max-width: 1200px) {
  #home .promos a {
    width: 280px;
  }
}
@media (min-width: 641px) and (max-width: 1175px) {
  #home .promos a {
    width: 265px;
  }
}
@media (min-width: 641px) and (max-width: 1150px) {
  #home .promos a {
    width: 250px;
  }
}
@media (min-width: 641px) and (max-width: 1125px) {
  #home .promos a {
    width: 240px;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  #home .promos a {
    width: 235px;
  }
}
@media (min-width: 641px) and (max-width: 1075px) {
  #home .promos a {
    width: 220px;
  }
}
@media (min-width: 641px) and (max-width: 1050px) {
  #home .promos a {
    width: 205px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 700px) {
  #home .promos a {
    width: 270px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 800px) {
  #home .promos a {
    width: 260px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 830px) {
  #home .promos a {
    width: 250px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 860px) {
  #home .promos a {
    width: 240px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 890px) {
  #home .promos a {
    width: 230px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 920px) {
  #home .promos a {
    width: 220px;
  }
}
@media (min-width: 641px) and (min-width: 1024px) and (max-width: 1200px) and (min-height: 960px) {
  #home .promos a {
    width: 210px;
  }
}
@media (min-width: 641px) and (min-width: 641px) and (max-width: 870px) {
  #home .promos {
    display: none;
  }
}
@media (min-width: 641px) and (max-aspect-ratio: 0.9) and (max-width: 1024px) and (min-height: 915px) {
  #home .promos {
    display: block;
    position: absolute;
    bottom: 34%;
    text-align: center;
  }
  #home .promos .left.visible, #home .promos .right.visible {
    display: inline-block;
  }
  #home .promos a {
    position: relative;
    display: inline-block;
    margin: 0 10px;
  }
}
@media (max-width: 640px) {
  #home .characters, #home .promos {
    display: none;
  }
  #home nav {
    margin: 0 40px;
  }
  #home nav a {
    display: block;
  }
  #home nav img {
    margin: 20px 0;
    display: block;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 480px) {
  #home nav {
    margin: 0 20px;
  }
}
/**
 * Backgrounds
 */
@media (max-width: 640px) {
  main {
    background-image: url("../static/home/mobile-background.jpg");
    padding-bottom: 1px;
  }
  .main-nav {
    display: none !important;
  }
  #home-canvas {
    display: none;
  }
  .bg {
    display: none;
  }
}
@media (min-width: 641px) {
  #home {
    overflow: hidden;
  }
  #home #home-canvas {
    position: absolute;
    z-index: 1;
  }
  #home .bg {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    top: 50%;
    left: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -ms-transition: opacity 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
  }
  #home .bg video {
    width: 100%;
    height: 100%;
  }
  .touchevents #home .bg {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}
@-webkit-keyframes floatSplash {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  25% {
    -ms-transform: translate(-5px, -13px) rotate(0deg);
    -webkit-transform: translate(-5px, -13px) rotate(0deg);
    transform: translate(-5px, -13px) rotate(0deg);
  }
  50% {
    -ms-transform: translate(3px, 7px) rotate(0.001deg);
    -webkit-transform: translate(3px, 7px) rotate(0.001deg);
    transform: translate(3px, 7px) rotate(0.001deg);
  }
  75% {
    -ms-transform: translate(-7px, -11px) rotate(0deg);
    -webkit-transform: translate(-7px, -11px) rotate(0deg);
    transform: translate(-7px, -11px) rotate(0deg);
  }
  100% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-moz-keyframes floatSplash {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  25% {
    -ms-transform: translate(-5px, -13px) rotate(0deg);
    -webkit-transform: translate(-5px, -13px) rotate(0deg);
    transform: translate(-5px, -13px) rotate(0deg);
  }
  50% {
    -ms-transform: translate(3px, 7px) rotate(0.001deg);
    -webkit-transform: translate(3px, 7px) rotate(0.001deg);
    transform: translate(3px, 7px) rotate(0.001deg);
  }
  75% {
    -ms-transform: translate(-7px, -11px) rotate(0deg);
    -webkit-transform: translate(-7px, -11px) rotate(0deg);
    transform: translate(-7px, -11px) rotate(0deg);
  }
  100% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-o-keyframes floatSplash {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  25% {
    -ms-transform: translate(-5px, -13px) rotate(0deg);
    -webkit-transform: translate(-5px, -13px) rotate(0deg);
    transform: translate(-5px, -13px) rotate(0deg);
  }
  50% {
    -ms-transform: translate(3px, 7px) rotate(0.001deg);
    -webkit-transform: translate(3px, 7px) rotate(0.001deg);
    transform: translate(3px, 7px) rotate(0.001deg);
  }
  75% {
    -ms-transform: translate(-7px, -11px) rotate(0deg);
    -webkit-transform: translate(-7px, -11px) rotate(0deg);
    transform: translate(-7px, -11px) rotate(0deg);
  }
  100% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@keyframes floatSplash {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  25% {
    -ms-transform: translate(-5px, -13px) rotate(0deg);
    -webkit-transform: translate(-5px, -13px) rotate(0deg);
    transform: translate(-5px, -13px) rotate(0deg);
  }
  50% {
    -ms-transform: translate(3px, 7px) rotate(0.001deg);
    -webkit-transform: translate(3px, 7px) rotate(0.001deg);
    transform: translate(3px, 7px) rotate(0.001deg);
  }
  75% {
    -ms-transform: translate(-7px, -11px) rotate(0deg);
    -webkit-transform: translate(-7px, -11px) rotate(0deg);
    transform: translate(-7px, -11px) rotate(0deg);
  }
  100% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
}
@-webkit-keyframes floatRipple {
  0% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
  40% {
    -ms-transform: translate(0, 0) rotate(0deg);
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
}
@-moz-keyframes floatRipple {
  0% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
  40% {
    -ms-transform: translate(0, 0) rotate(0deg);
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
}
@-o-keyframes floatRipple {
  0% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
  40% {
    -ms-transform: translate(0, 0) rotate(0deg);
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
}
@keyframes floatRipple {
  0% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
  40% {
    -ms-transform: translate(0, 0) rotate(0deg);
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -ms-transform: translate(-2px, -15px) rotate(-1deg);
    -webkit-transform: translate(-2px, -15px) rotate(-1deg);
    transform: translate(-2px, -15px) rotate(-1deg);
  }
}
@-webkit-keyframes floatDunk {
  0% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(-2px, -11px) rotate(0deg);
    -webkit-transform: translate(-2px, -11px) rotate(0deg);
    transform: translate(-2px, -11px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(3px, -3px) rotate(0.001deg);
    -webkit-transform: translate(3px, -3px) rotate(0.001deg);
    transform: translate(3px, -3px) rotate(0.001deg);
  }
  60% {
    -ms-transform: translate(0px, -13px) rotate(0deg);
    -webkit-transform: translate(0px, -13px) rotate(0deg);
    transform: translate(0px, -13px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(-2px, -5px) rotate(0.002deg);
    -webkit-transform: translate(-2px, -5px) rotate(0.002deg);
    transform: translate(-2px, -5px) rotate(0.002deg);
  }
  100% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
}
@-moz-keyframes floatDunk {
  0% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(-2px, -11px) rotate(0deg);
    -webkit-transform: translate(-2px, -11px) rotate(0deg);
    transform: translate(-2px, -11px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(3px, -3px) rotate(0.001deg);
    -webkit-transform: translate(3px, -3px) rotate(0.001deg);
    transform: translate(3px, -3px) rotate(0.001deg);
  }
  60% {
    -ms-transform: translate(0px, -13px) rotate(0deg);
    -webkit-transform: translate(0px, -13px) rotate(0deg);
    transform: translate(0px, -13px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(-2px, -5px) rotate(0.002deg);
    -webkit-transform: translate(-2px, -5px) rotate(0.002deg);
    transform: translate(-2px, -5px) rotate(0.002deg);
  }
  100% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
}
@-o-keyframes floatDunk {
  0% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(-2px, -11px) rotate(0deg);
    -webkit-transform: translate(-2px, -11px) rotate(0deg);
    transform: translate(-2px, -11px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(3px, -3px) rotate(0.001deg);
    -webkit-transform: translate(3px, -3px) rotate(0.001deg);
    transform: translate(3px, -3px) rotate(0.001deg);
  }
  60% {
    -ms-transform: translate(0px, -13px) rotate(0deg);
    -webkit-transform: translate(0px, -13px) rotate(0deg);
    transform: translate(0px, -13px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(-2px, -5px) rotate(0.002deg);
    -webkit-transform: translate(-2px, -5px) rotate(0.002deg);
    transform: translate(-2px, -5px) rotate(0.002deg);
  }
  100% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
}
@keyframes floatDunk {
  0% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(-2px, -11px) rotate(0deg);
    -webkit-transform: translate(-2px, -11px) rotate(0deg);
    transform: translate(-2px, -11px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(3px, -3px) rotate(0.001deg);
    -webkit-transform: translate(3px, -3px) rotate(0.001deg);
    transform: translate(3px, -3px) rotate(0.001deg);
  }
  60% {
    -ms-transform: translate(0px, -13px) rotate(0deg);
    -webkit-transform: translate(0px, -13px) rotate(0deg);
    transform: translate(0px, -13px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(-2px, -5px) rotate(0.002deg);
    -webkit-transform: translate(-2px, -5px) rotate(0.002deg);
    transform: translate(-2px, -5px) rotate(0.002deg);
  }
  100% {
    -ms-transform: translate(3px, 3px) rotate(0.001deg);
    -webkit-transform: translate(3px, 3px) rotate(0.001deg);
    transform: translate(3px, 3px) rotate(0.001deg);
  }
}
@-webkit-keyframes floatBubbles {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(5px, 4px) rotate(0deg);
    -webkit-transform: translate(5px, 4px) rotate(0deg);
    transform: translate(5px, 4px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(-2px, -1px) rotate(1deg);
    -webkit-transform: translate(-2px, -1px) rotate(1deg);
    transform: translate(-2px, -1px) rotate(1deg);
  }
  60% {
    -ms-transform: translate(0px, 10px) rotate(0deg);
    -webkit-transform: translate(0px, 10px) rotate(0deg);
    transform: translate(0px, 10px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(4px, -5px) rotate(1deg);
    -webkit-transform: translate(4px, -5px) rotate(1deg);
    transform: translate(4px, -5px) rotate(1deg);
  }
  100% {
    -ms-transform: translate(0px, 0px) rotate(0.001deg);
    -webkit-transform: translate(0px, 0px) rotate(0.001deg);
    transform: translate(0px, 0px) rotate(0.001deg);
  }
}
@-moz-keyframes floatBubbles {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(5px, 4px) rotate(0deg);
    -webkit-transform: translate(5px, 4px) rotate(0deg);
    transform: translate(5px, 4px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(-2px, -1px) rotate(1deg);
    -webkit-transform: translate(-2px, -1px) rotate(1deg);
    transform: translate(-2px, -1px) rotate(1deg);
  }
  60% {
    -ms-transform: translate(0px, 10px) rotate(0deg);
    -webkit-transform: translate(0px, 10px) rotate(0deg);
    transform: translate(0px, 10px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(4px, -5px) rotate(1deg);
    -webkit-transform: translate(4px, -5px) rotate(1deg);
    transform: translate(4px, -5px) rotate(1deg);
  }
  100% {
    -ms-transform: translate(0px, 0px) rotate(0.001deg);
    -webkit-transform: translate(0px, 0px) rotate(0.001deg);
    transform: translate(0px, 0px) rotate(0.001deg);
  }
}
@-o-keyframes floatBubbles {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(5px, 4px) rotate(0deg);
    -webkit-transform: translate(5px, 4px) rotate(0deg);
    transform: translate(5px, 4px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(-2px, -1px) rotate(1deg);
    -webkit-transform: translate(-2px, -1px) rotate(1deg);
    transform: translate(-2px, -1px) rotate(1deg);
  }
  60% {
    -ms-transform: translate(0px, 10px) rotate(0deg);
    -webkit-transform: translate(0px, 10px) rotate(0deg);
    transform: translate(0px, 10px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(4px, -5px) rotate(1deg);
    -webkit-transform: translate(4px, -5px) rotate(1deg);
    transform: translate(4px, -5px) rotate(1deg);
  }
  100% {
    -ms-transform: translate(0px, 0px) rotate(0.001deg);
    -webkit-transform: translate(0px, 0px) rotate(0.001deg);
    transform: translate(0px, 0px) rotate(0.001deg);
  }
}
@keyframes floatBubbles {
  0% {
    -ms-transform: translate(0, 0) rotate(0.001deg);
    -webkit-transform: translate(0, 0) rotate(0.001deg);
    transform: translate(0, 0) rotate(0.001deg);
  }
  20% {
    -ms-transform: translate(5px, 4px) rotate(0deg);
    -webkit-transform: translate(5px, 4px) rotate(0deg);
    transform: translate(5px, 4px) rotate(0deg);
  }
  40% {
    -ms-transform: translate(-2px, -1px) rotate(1deg);
    -webkit-transform: translate(-2px, -1px) rotate(1deg);
    transform: translate(-2px, -1px) rotate(1deg);
  }
  60% {
    -ms-transform: translate(0px, 10px) rotate(0deg);
    -webkit-transform: translate(0px, 10px) rotate(0deg);
    transform: translate(0px, 10px) rotate(0deg);
  }
  80% {
    -ms-transform: translate(4px, -5px) rotate(1deg);
    -webkit-transform: translate(4px, -5px) rotate(1deg);
    transform: translate(4px, -5px) rotate(1deg);
  }
  100% {
    -ms-transform: translate(0px, 0px) rotate(0.001deg);
    -webkit-transform: translate(0px, 0px) rotate(0.001deg);
    transform: translate(0px, 0px) rotate(0.001deg);
  }
}