/* @override 
	http://xmas/css/animate.css */
/* DAY #1 -- Boys */
#hill1, #hill2, #hill3 { position: absolute; bottom: 130px; left: 80%; width: 200px; height: 65px; background: url(/img/north/hill1.png) top left no-repeat; }

#hill2 { bottom: 100px; left: 0%; width: 260px; height: 90px; background: url(/img/north/hill2.png) top left no-repeat; }

#hill3 { bottom: 10px; left: 40%; width: 400px; height: 120px; background: url(/img/north/hill3.png) top left no-repeat; }

#boy1, #boy2 { background: url(/img/north/boy1.png) no-repeat 0 75%; /* red boy */ -webkit-background-size: 100% 500%; -moz-background-size: 100% 500%; -ms-background-size: 100% 500%; background-size: 100% 500%; width: 150px; height: 60px; bottom: 95px; left: 65%; position: absolute; }

#boy2 { /* yellow boy  */ background: url(/img/north/boy2.png) no-repeat 0 75%; -webkit-background-size: 100% 500%; -moz-background-size: 100% 500%; -ms-background-size: 100% 500%; background-size: 100% 500%; left: 15%; bottom: 150px; width: 180px; }

.animated #boy1 { -webkit-animation: throw 5s infinite, positionleft 35s infinite steps(1); -moz-animation: throw 5s infinite, positionleft 35s infinite steps(1); -o-animation: throw 5s infinite, positionleft 35s infinite steps(1); animation: throw 5s infinite, positionleft 35s infinite steps(1); }

.animated #boy2 { -webkit-animation: throw 6s infinite, positionleft 42s steps(1) infinite alternate; -moz-animation: throw 6s infinite, positionleft 42s steps(1) infinite alternate; -o-animation: throw 6s infinite, positionleft 42s steps(1) infinite alternate; animation: throw 6s infinite, positionleft 42s steps(1) infinite alternate; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; }

@-moz-keyframes throw { /* sprite animation - throwing action */
  0%, 50%, 100% { background-position: 0 0; }
  70% { background-position: 0 25%; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  75% { background-position: 0 50%; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  80% { background-position: 0 75%; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  85% { background-position: 0 100%; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  90% { background-position: 0 25%; }
  95% { background-position: 0 25%; } }

@-webkit-keyframes throw { /* sprite animation - throwing action */
  0%, 50%, 100% { background-position: 0 0; }
  70% { background-position: 0 25%; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  75% { background-position: 0 50%; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  80% { background-position: 0 75%; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  85% { background-position: 0 100%; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  90% { background-position: 0 25%; }
  95% { background-position: 0 25%; } }

@-o-keyframes throw { /* sprite animation - throwing action */
  0%, 50%, 100% { background-position: 0 0; }
  70% { background-position: 0 25%; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  75% { background-position: 0 50%; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  80% { background-position: 0 75%; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  85% { background-position: 0 100%; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); }
  90% { background-position: 0 25%; }
  95% { background-position: 0 25%; } }

@keyframes throw { /* sprite animation - throwing action */
  0%, 50%, 100% { background-position: 0 0; }
  70% { background-position: 0 25%; animation-timing-function: steps(1); }
  75% { background-position: 0 50%; animation-timing-function: steps(1); }
  80% { background-position: 0 75%; animation-timing-function: steps(1); }
  85% { background-position: 0 100%; animation-timing-function: steps(1); }
  90% { background-position: 0 25%; }
  95% { background-position: 0 25%; } }

@-moz-keyframes positionleft { /* this re-positions the kids */
  0%, 100% { left: 65%; bottom: 95px; }
  14.28% { left: 13%; bottom: 150px; }
  28.57% { left: 82%; bottom: 170px; width: 100px; height: 40px; }
  42.85% { left: 43%; bottom: 70px; width: 150px; height: 60px; }
  57.14% { left: 9%; bottom: 160px; }
  71.42% { left: 43%; bottom: 70px; }
  85.71% { left: 82%; bottom: 170px; width: 100px; height: 40px; } }

@-webkit-keyframes positionleft { /* this re-positions the kids */
  0%, 100% { left: 65%; bottom: 95px; }
  14.28% { left: 13%; bottom: 150px; }
  28.57% { left: 82%; bottom: 170px; width: 100px; height: 40px; }
  42.85% { left: 43%; bottom: 70px; width: 150px; height: 60px; }
  57.14% { left: 9%; bottom: 160px; }
  71.42% { left: 43%; bottom: 70px; }
  85.71% { left: 82%; bottom: 170px; width: 100px; height: 40px; } }

@-o-keyframes positionleft { /* this re-positions the kids */
  0%, 100% { left: 65%; bottom: 95px; }
  14.28% { left: 13%; bottom: 150px; }
  28.57% { left: 82%; bottom: 170px; width: 100px; height: 40px; }
  42.85% { left: 43%; bottom: 70px; width: 150px; height: 60px; }
  57.14% { left: 9%; bottom: 160px; }
  71.42% { left: 43%; bottom: 70px; }
  85.71% { left: 82%; bottom: 170px; width: 100px; height: 40px; } }

@keyframes positionleft { /* this re-positions the kids */
  0%, 100% { left: 65%; bottom: 95px; }
  14.28% { left: 13%; bottom: 150px; }
  28.57% { left: 82%; bottom: 170px; width: 100px; height: 40px; }
  42.85% { left: 43%; bottom: 70px; width: 150px; height: 60px; }
  57.14% { left: 9%; bottom: 160px; }
  71.42% { left: 43%; bottom: 70px; }
  85.71% { left: 82%; bottom: 170px; width: 100px; height: 40px; } }

/* DAY #2 -- Skate */
#mask { position: absolute; bottom: 50px; left: 0px; overflow: hidden; margin: 0; width: 100%; height: 180px; border-radius: 0 0 38% 38%; -webkit-mask: url(http://sitepointstatic.com/images/fill.svg) center; }

#ice-rink { background-color: rgba(187, 240, 240, 0.5); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(120, 194, 194, 0.5)), color-stop(100%, rgba(187, 240, 240, 0.5))); background-image: -webkit-linear-gradient(top, rgba(120, 194, 194, 0.5), rgba(187, 240, 240, 0.5)); background-image: -moz-linear-gradient(top, rgba(120, 194, 194, 0.5), rgba(187, 240, 240, 0.5)); background-image: -ms-linear-gradient(top, rgba(120, 194, 194, 0.5), rgba(187, 240, 240, 0.5)); background-image: -o-linear-gradient(top, rgba(120, 194, 194, 0.5), rgba(187, 240, 240, 0.5)); background-image: linear-gradient(top, rgba(120, 194, 194, 0.5), rgba(187, 240, 240, 0.5)); position: relative; top: 50%; height: 95px; border-radius: 50%; -webkit-box-shadow: inset 0px 3px 14px rgba(20, 40, 100, 0.2); box-shadow: inset 0px 3px 14px rgba(20, 40, 100, 0.2); }

#skater { position: absolute; top: 0px; width: 130px; left: 100px; height: 200px; background: url(/img/north/skater.png) top left no-repeat; }

.animated #skater { -webkit-background-size: 400% 100%; -moz-background-size: 400% 100%; -ms-background-size: 400% 100%; background-size: 400% 100%; -webkit-animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), spinsprite 8s infinite steps(1); -moz-animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), spinsprite 8s infinite steps(1); -o-animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), spinsprite 8s infinite steps(1); animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1), updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), spinsprite 8s infinite steps(1); }

@-moz-keyframes leftright { 0%, 100% { left: 5%; }
  16.666% { left: 75%; }
  33.333% { left: 10%; }
  50% { left: 45%; }
  66.666% { left: 80%; }
  83.333% { left: 40%; } }

@-webkit-keyframes leftright { 0%, 100% { left: 5%; }
  16.666% { left: 75%; }
  33.333% { left: 10%; }
  50% { left: 45%; }
  66.666% { left: 80%; }
  83.333% { left: 40%; } }

@-o-keyframes leftright { 0%, 100% { left: 5%; }
  16.666% { left: 75%; }
  33.333% { left: 10%; }
  50% { left: 45%; }
  66.666% { left: 80%; }
  83.333% { left: 40%; } }

@keyframes leftright { 0%, 100% { left: 5%; }
  16.666% { left: 75%; }
  33.333% { left: 10%; }
  50% { left: 45%; }
  66.666% { left: 80%; }
  83.333% { left: 40%; } }

@-moz-keyframes updown { 0%, 50%, 100% { top: 0px; width: 130px; height: 200px; }
  25%, 75% { top: 30px; width: 156px; height: 240px; } }

@-webkit-keyframes updown { 0%, 50%, 100% { top: 0px; width: 130px; height: 200px; }
  25%, 75% { top: 30px; width: 156px; height: 240px; } }

@-o-keyframes updown { 0%, 50%, 100% { top: 0px; width: 130px; height: 200px; }
  25%, 75% { top: 30px; width: 156px; height: 240px; } }

@keyframes updown { 0%, 50%, 100% { top: 0px; width: 130px; height: 200px; }
  25%, 75% { top: 30px; width: 156px; height: 240px; } }

@-moz-keyframes spinsprite { 0%, 100% { background-position: 0% 0%; }
  40% { background-position: 100% 0%; }
  43% { background-position: 66.66% 0%; }
  47% { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  50% { -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 0% 0%; }
  90% { -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  93% { background-position: 33.33% 0%; }
  97% { background-position: 100% 0%; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } }

@-webkit-keyframes spinsprite { 0%, 100% { background-position: 0% 0%; }
  40% { background-position: 100% 0%; }
  43% { background-position: 66.66% 0%; }
  47% { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  50% { -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 0% 0%; }
  90% { -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  93% { background-position: 33.33% 0%; }
  97% { background-position: 100% 0%; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } }

@-o-keyframes spinsprite { 0%, 100% { background-position: 0% 0%; }
  40% { background-position: 100% 0%; }
  43% { background-position: 66.66% 0%; }
  47% { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -o-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  50% { -o-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 0% 0%; }
  90% { -o-animation-timing-function: steps(1); animation-timing-function: steps(1); background-position: 100% 0%; }
  93% { background-position: 33.33% 0%; }
  97% { background-position: 100% 0%; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } }

@keyframes spinsprite { 0%, 100% { background-position: 0% 0%; }
  40% { background-position: 100% 0%; }
  43% { background-position: 66.66% 0%; }
  47% { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); animation-timing-function: steps(1); background-position: 100% 0%; }
  50% { animation-timing-function: steps(1); background-position: 0% 0%; }
  90% { animation-timing-function: steps(1); background-position: 100% 0%; }
  93% { background-position: 33.33% 0%; }
  97% { background-position: 100% 0%; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } }

/* DAY #3  -- Angels */
#angel1, #angel2 { position: absolute; background: url(/img/north/snow-angel-sprite.png) no-repeat; background-position: 0 50%; height: 70px; width: 178px; left: 20%; bottom: 75px; -webkit-background-size: 200% 300%; -moz-background-size: 200% 300%; -ms-background-size: 200% 300%; background-size: 200% 300%; }

#angel2 { background: url(/img/north/snow-angel-sprite.png) no-repeat; height: 70px; width: 178px; background-position: 100% 50%; left: 50%; bottom: 45px; }

.animated #angel1 { -webkit-animation: angelsprite1 8s infinite steps(1); -moz-animation: angelsprite1 8s infinite steps(1); -o-animation: angelsprite1 8s infinite steps(1); animation: angelsprite1 8s infinite steps(1); }

.animated #angel2 { -webkit-animation: angelsprite2 6s infinite steps(1); -moz-animation: angelsprite2 6s infinite steps(1); -o-animation: angelsprite2 6s infinite steps(1); animation: angelsprite2 6s infinite steps(1); }

@-moz-keyframes angelsprite1 { 0%, 90%, 95%, 100% { background-position: 0 50%; }
  82.5%, 92.5% { background-position: 0 100%; }
  87.5%, 97.5% { background-position: 0 0%; } }

@-webkit-keyframes angelsprite1 { 0%, 90%, 95%, 100% { background-position: 0 50%; }
  82.5%, 92.5% { background-position: 0 100%; }
  87.5%, 97.5% { background-position: 0 0%; } }

@-o-keyframes angelsprite1 { 0%, 90%, 95%, 100% { background-position: 0 50%; }
  82.5%, 92.5% { background-position: 0 100%; }
  87.5%, 97.5% { background-position: 0 0%; } }

@keyframes angelsprite1 { 0%, 90%, 95%, 100% { background-position: 0 50%; }
  82.5%, 92.5% { background-position: 0 100%; }
  87.5%, 97.5% { background-position: 0 0%; } }

@-moz-keyframes angelsprite2 { 0%, 90%, 95%, 100% { background-position: 100% 50%; }
  82.5%, 92.5% { background-position: 100% 100%; }
  87.5%, 97.5% { background-position: 100% 0%; } }

@-webkit-keyframes angelsprite2 { 0%, 90%, 95%, 100% { background-position: 100% 50%; }
  82.5%, 92.5% { background-position: 100% 100%; }
  87.5%, 97.5% { background-position: 100% 0%; } }

@-o-keyframes angelsprite2 { 0%, 90%, 95%, 100% { background-position: 100% 50%; }
  82.5%, 92.5% { background-position: 100% 100%; }
  87.5%, 97.5% { background-position: 100% 0%; } }

@keyframes angelsprite2 { 0%, 90%, 95%, 100% { background-position: 100% 50%; }
  82.5%, 92.5% { background-position: 100% 100%; }
  87.5%, 97.5% { background-position: 100% 0%; } }

/*  DAY 4 - 5 - 6 - dog-sled  */
/* SASS variables */
#dog-sled { width: 618px; height: 145px; background: url(/img/north/sled.png); position: absolute; bottom: 60px; left: 200px; }

#dogs-row1, #dogs-row2, #dogs-row3 { position: absolute; right: 0; bottom: 0; width: 130px; height: 78px; background: url(/img/north/runningdogs-sprite.png); }

.dogsled-fixed-to-screen.dogs-legs-moving #dogs-row1, .dogsled-fixed-to-screen.dogs-legs-moving #dogs-row2, .dogsled-fixed-to-screen.dogs-legs-moving #dogs-row3 { -webkit-animation: runningdogs 0.5s infinite steps(1); -moz-animation: runningdogs 0.5s infinite steps(1); -o-animation: runningdogs 0.5s infinite steps(1); animation: runningdogs 0.5s infinite steps(1); }

#dogs-row2 { right: 120px; bottom: 0; background: url(/img/north/runningdogs-sprite.png); }

#dogs-row3 { right: 240px; bottom: 0; background: url(/img/north/runningdogs-sprite.png); }

@-moz-keyframes runningdogs { 0%, 100% { background-position: 0 78px; }
  20% { background-position: 0 390px; }
  40% { background-position: 0 312px; }
  60% { background-position: 0 234px; }
  80% { background-position: 0 156px; } }

@-webkit-keyframes runningdogs { 0%, 100% { background-position: 0 78px; }
  20% { background-position: 0 390px; }
  40% { background-position: 0 312px; }
  60% { background-position: 0 234px; }
  80% { background-position: 0 156px; } }

@-o-keyframes runningdogs { 0%, 100% { background-position: 0 78px; }
  20% { background-position: 0 390px; }
  40% { background-position: 0 312px; }
  60% { background-position: 0 234px; }
  80% { background-position: 0 156px; } }

@keyframes runningdogs { 0%, 100% { background-position: 0 78px; }
  20% { background-position: 0 390px; }
  40% { background-position: 0 312px; }
  60% { background-position: 0 234px; }
  80% { background-position: 0 156px; } }

/*  DAY 7 8 9 -  Train station */
.puff { width: 0px; height: 0px; z-index: 500; opacity: 0; position: absolute; top: -215px; left: 0px; margin-left: -120px; border-radius: 50%; -webkit-box-shadow: -30px 0px 30px 45px rgba(255, 255, 255, 0.7), 0px 40px 30px 55px rgba(255, 255, 255, 0.7), -50px 24px 30px 45px rgba(255, 255, 255, 0.7); box-shadow: -30px 0px 30px 45px rgba(255, 255, 255, 0.7), 0px 40px 30px 55px rgba(255, 255, 255, 0.7), -50px 24px 30px 45px rgba(255, 255, 255, 0.7); }

.train-fixed-to-screen ~ div .puff { -webkit-animation: addsmoke 3s infinite ease-out; -moz-animation: addsmoke 3s infinite ease-out; -o-animation: addsmoke 3s infinite ease-out; animation: addsmoke 3s infinite ease-out; }

.train-fixed-to-screen ~ div .puff:nth-of-type(2) { -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; -o-animation-delay: 0.75s; animation-delay: 0.75s; }

.train-fixed-to-screen ~ div .puff:nth-of-type(3) { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; }

.train-fixed-to-screen ~ div .puff:nth-of-type(4) { -webkit-animation-delay: 2.25s; -moz-animation-delay: 2.25s; -o-animation-delay: 2.25s; animation-delay: 2.25s; }

@-moz-keyframes addsmoke { 0% { opacity: 1; -webkit-transform: translateY(0px) rotateZ(0deg) scale(0.2); -moz-transform: translateY(0px) rotateZ(0deg) scale(0.2); -ms-transform: translateY(0px) rotateZ(0deg) scale(0.2); -o-transform: translateY(0px) rotateZ(0deg) scale(0.2); transform: translateY(0px) rotateZ(0deg) scale(0.2); }
  100% { opacity: 0; -webkit-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -moz-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -ms-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -o-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); } }

@-webkit-keyframes addsmoke { 0% { opacity: 1; -webkit-transform: translateY(0px) rotateZ(0deg) scale(0.2); -moz-transform: translateY(0px) rotateZ(0deg) scale(0.2); -ms-transform: translateY(0px) rotateZ(0deg) scale(0.2); -o-transform: translateY(0px) rotateZ(0deg) scale(0.2); transform: translateY(0px) rotateZ(0deg) scale(0.2); }
  100% { opacity: 0; -webkit-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -moz-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -ms-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -o-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); } }

@-o-keyframes addsmoke { 0% { opacity: 1; -webkit-transform: translateY(0px) rotateZ(0deg) scale(0.2); -moz-transform: translateY(0px) rotateZ(0deg) scale(0.2); -ms-transform: translateY(0px) rotateZ(0deg) scale(0.2); -o-transform: translateY(0px) rotateZ(0deg) scale(0.2); transform: translateY(0px) rotateZ(0deg) scale(0.2); }
  100% { opacity: 0; -webkit-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -moz-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -ms-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -o-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); } }

@keyframes addsmoke { 0% { opacity: 1; -webkit-transform: translateY(0px) rotateZ(0deg) scale(0.2); -moz-transform: translateY(0px) rotateZ(0deg) scale(0.2); -ms-transform: translateY(0px) rotateZ(0deg) scale(0.2); -o-transform: translateY(0px) rotateZ(0deg) scale(0.2); transform: translateY(0px) rotateZ(0deg) scale(0.2); }
  100% { opacity: 0; -webkit-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -moz-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -ms-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); -o-transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); transform: translateY(-200px) translateX(-50px) rotateZ(-170deg) scale(1.2); } }

/*  DAY 10 -  Fishing */
.animated .fish { -webkit-animation: jumpingfish 7s infinite ease-out; -moz-animation: jumpingfish 7s infinite ease-out; -o-animation: jumpingfish 7s infinite ease-out; animation: jumpingfish 7s infinite ease-out; }

.hole:nth-of-type(1) .fish { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; }

.hole:nth-of-type(2) .fish { -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; animation-duration: 8s; }

.hole:nth-of-type(3) .fish { -webkit-animation-duration: 9s; -moz-animation-duration: 9s; -o-animation-duration: 9s; animation-duration: 9s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }

@-moz-keyframes jumpingfish { 0% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(0deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(0deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(0deg); -o-transform: translateY(0px) translateX(0px) rotateZ(0deg); transform: translateY(0px) translateX(0px) rotateZ(0deg); background-position: center center; width: 30px; height: 50px; }
  10% { -webkit-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -moz-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -ms-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -o-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  15% { -webkit-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(14px) rotateZ(-720deg); transform: translateY(0px) translateX(14px) rotateZ(-720deg); background-position: center center; -moz-animation-timing-function: step(1); animation-timing-function: step(1); width: 30px; height: 50px; -webkit-background-size: 140% 200%; -moz-background-size: 140% 200%; -ms-background-size: 140% 200%; background-size: 140% 200%; }
  /* splash starts here */
  15.1% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(0px) rotateZ(-720deg); transform: translateY(0px) translateX(0px) rotateZ(-720deg); -webkit-background-size: 100% 400%; -moz-background-size: 100% 400%; -ms-background-size: 100% 400%; background-size: 100% 400%; -moz-animation-timing-function: step(1); animation-timing-function: step(1); background-position: center top; width: 49px; height: 30px; }
  19% { -webkit-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 70px; height: 30px; }
  23% { -webkit-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 91px; height: 30px; }
  100% { -webkit-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(36px) rotateZ(-720deg); transform: translateY(0px) translateX(36px) rotateZ(-720deg); background-position: center top; } }

@-webkit-keyframes jumpingfish { 0% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(0deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(0deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(0deg); -o-transform: translateY(0px) translateX(0px) rotateZ(0deg); transform: translateY(0px) translateX(0px) rotateZ(0deg); background-position: center center; width: 30px; height: 50px; }
  10% { -webkit-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -moz-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -ms-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -o-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  15% { -webkit-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(14px) rotateZ(-720deg); transform: translateY(0px) translateX(14px) rotateZ(-720deg); background-position: center center; -webkit-animation-timing-function: step(1); animation-timing-function: step(1); width: 30px; height: 50px; -webkit-background-size: 140% 200%; -moz-background-size: 140% 200%; -ms-background-size: 140% 200%; background-size: 140% 200%; }
  /* splash starts here */
  15.1% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(0px) rotateZ(-720deg); transform: translateY(0px) translateX(0px) rotateZ(-720deg); -webkit-background-size: 100% 400%; -moz-background-size: 100% 400%; -ms-background-size: 100% 400%; background-size: 100% 400%; -webkit-animation-timing-function: step(1); animation-timing-function: step(1); background-position: center top; width: 49px; height: 30px; }
  19% { -webkit-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 70px; height: 30px; }
  23% { -webkit-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 91px; height: 30px; }
  100% { -webkit-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(36px) rotateZ(-720deg); transform: translateY(0px) translateX(36px) rotateZ(-720deg); background-position: center top; } }

@-o-keyframes jumpingfish { 0% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(0deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(0deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(0deg); -o-transform: translateY(0px) translateX(0px) rotateZ(0deg); transform: translateY(0px) translateX(0px) rotateZ(0deg); background-position: center center; width: 30px; height: 50px; }
  10% { -webkit-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -moz-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -ms-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -o-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  15% { -webkit-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(14px) rotateZ(-720deg); transform: translateY(0px) translateX(14px) rotateZ(-720deg); background-position: center center; -o-animation-timing-function: step(1); animation-timing-function: step(1); width: 30px; height: 50px; -webkit-background-size: 140% 200%; -moz-background-size: 140% 200%; -ms-background-size: 140% 200%; background-size: 140% 200%; }
  /* splash starts here */
  15.1% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(0px) rotateZ(-720deg); transform: translateY(0px) translateX(0px) rotateZ(-720deg); -webkit-background-size: 100% 400%; -moz-background-size: 100% 400%; -ms-background-size: 100% 400%; background-size: 100% 400%; -o-animation-timing-function: step(1); animation-timing-function: step(1); background-position: center top; width: 49px; height: 30px; }
  19% { -webkit-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 70px; height: 30px; }
  23% { -webkit-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 91px; height: 30px; }
  100% { -webkit-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(36px) rotateZ(-720deg); transform: translateY(0px) translateX(36px) rotateZ(-720deg); background-position: center top; } }

@keyframes jumpingfish { 0% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(0deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(0deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(0deg); -o-transform: translateY(0px) translateX(0px) rotateZ(0deg); transform: translateY(0px) translateX(0px) rotateZ(0deg); background-position: center center; width: 30px; height: 50px; }
  10% { -webkit-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -moz-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -ms-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); -o-transform: translateY(-200px) translateX(7px) rotateZ(-360deg); transform: translateY(-200px) translateX(7px) rotateZ(-360deg); animation-timing-function: ease-in; }
  15% { -webkit-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(14px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(14px) rotateZ(-720deg); transform: translateY(0px) translateX(14px) rotateZ(-720deg); background-position: center center; animation-timing-function: step(1); width: 30px; height: 50px; -webkit-background-size: 140% 200%; -moz-background-size: 140% 200%; -ms-background-size: 140% 200%; background-size: 140% 200%; }
  /* splash starts here */
  15.1% { -webkit-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(0px) rotateZ(-720deg); transform: translateY(0px) translateX(0px) rotateZ(-720deg); -webkit-background-size: 100% 400%; -moz-background-size: 100% 400%; -ms-background-size: 100% 400%; background-size: 100% 400%; animation-timing-function: step(1); background-position: center top; width: 49px; height: 30px; }
  19% { -webkit-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -moz-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -ms-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); -o-transform: translateY(-60px) translateX(0px) rotateZ(-720deg); transform: translateY(-60px) translateX(0px) rotateZ(-720deg); animation-timing-function: ease-out; width: 70px; height: 30px; }
  23% { -webkit-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(-10px) rotateZ(-720deg); transform: translateY(0px) translateX(-10px) rotateZ(-720deg); animation-timing-function: ease-in; width: 91px; height: 30px; }
  100% { -webkit-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -moz-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -ms-transform: translateY(0px) translateX(36px) rotateZ(-720deg); -o-transform: translateY(0px) translateX(36px) rotateZ(-720deg); transform: translateY(0px) translateX(36px) rotateZ(-720deg); background-position: center top; } }

/*  Day 12 - walking fishermen */
.animated #walking-eskimo { -webkit-animation: rock 3s infinite ease-in-out; -moz-animation: rock 3s infinite ease-in-out; -o-animation: rock 3s infinite ease-in-out; animation: rock 3s infinite ease-in-out; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; }

.animated #walking-eskimo .frontleg, .animated #walking-eskimo .backleg { -webkit-animation: rotate 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); -moz-animation: rotate 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); -o-animation: rotate 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); animation: rotate 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); }

.animated #walking-eskimo .backleg { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; }

/*  Day 13 - fire */
#fire .flame { width: 56px; height: 71px; background: url(/img/north/red-flame.png); }

#fire .flame .flame { width: 56px; height: 71px; background: url(/img/north/orange-flame.png); -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }

#fire .flame .flame .flame { width: 56px; height: 71px; background: url(/img/north/yellow-flame.png); }

.animated .flame { -webkit-animation: rotate 0.5s infinite linear; -moz-animation: rotate 0.5s infinite linear; -o-animation: rotate 0.5s infinite linear; animation: rotate 0.5s infinite linear; }

@-moz-keyframes rotate { /*used in flame and walking */
  0% { -webkit-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -moz-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -ms-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -o-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); perspective: 200; }
  100% { -webkit-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -ms-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -o-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); } }

@-webkit-keyframes rotate { /*used in flame and walking */
  0% { -webkit-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -moz-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -ms-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -o-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); perspective: 200; }
  100% { -webkit-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -ms-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -o-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); } }

@-o-keyframes rotate { /*used in flame and walking */
  0% { -webkit-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -moz-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -ms-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -o-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); perspective: 200; }
  100% { -webkit-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -ms-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -o-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); } }

@keyframes rotate { /*used in flame and walking */
  0% { -webkit-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -moz-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -ms-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); -o-transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); transform: rotateZ(0deg) translateX(-2px) rotateZ(0deg); perspective: 200; }
  100% { -webkit-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -moz-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -ms-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); -o-transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); transform: rotateZ(360deg) translateX(-2px) rotateZ(-360deg); } }

@-moz-keyframes rock { /*used in dancing bear and walking */
  0% , 100% { perspective: 200; -webkit-transform: rotateZ(-2.5deg); -moz-transform: rotateZ(-2.5deg); -ms-transform: rotateZ(-2.5deg); -o-transform: rotateZ(-2.5deg); transform: rotateZ(-2.5deg); }
  50% { -webkit-transform: rotateZ(2.5deg); -moz-transform: rotateZ(2.5deg); -ms-transform: rotateZ(2.5deg); -o-transform: rotateZ(2.5deg); transform: rotateZ(2.5deg); } }

@-webkit-keyframes rock { /*used in dancing bear and walking */
  0% , 100% { perspective: 200; -webkit-transform: rotateZ(-2.5deg); -moz-transform: rotateZ(-2.5deg); -ms-transform: rotateZ(-2.5deg); -o-transform: rotateZ(-2.5deg); transform: rotateZ(-2.5deg); }
  50% { -webkit-transform: rotateZ(2.5deg); -moz-transform: rotateZ(2.5deg); -ms-transform: rotateZ(2.5deg); -o-transform: rotateZ(2.5deg); transform: rotateZ(2.5deg); } }

@-o-keyframes rock { /*used in dancing bear and walking */
  0% , 100% { perspective: 200; -webkit-transform: rotateZ(-2.5deg); -moz-transform: rotateZ(-2.5deg); -ms-transform: rotateZ(-2.5deg); -o-transform: rotateZ(-2.5deg); transform: rotateZ(-2.5deg); }
  50% { -webkit-transform: rotateZ(2.5deg); -moz-transform: rotateZ(2.5deg); -ms-transform: rotateZ(2.5deg); -o-transform: rotateZ(2.5deg); transform: rotateZ(2.5deg); } }

@keyframes rock { /*used in dancing bear and walking */
  0% , 100% { perspective: 200; -webkit-transform: rotateZ(-2.5deg); -moz-transform: rotateZ(-2.5deg); -ms-transform: rotateZ(-2.5deg); -o-transform: rotateZ(-2.5deg); transform: rotateZ(-2.5deg); }
  50% { -webkit-transform: rotateZ(2.5deg); -moz-transform: rotateZ(2.5deg); -ms-transform: rotateZ(2.5deg); -o-transform: rotateZ(2.5deg); transform: rotateZ(2.5deg); } }

/*  Day 14 - polar bear */
.animated #polar-bear { -webkit-animation: rock 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); -moz-animation: rock 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); -o-animation: rock 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); animation: rock 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; }

.animated #polar-bear .arms { -webkit-animation: bodyrock 3s infinite linear alternate; -moz-animation: bodyrock 3s infinite linear alternate; -o-animation: bodyrock 3s infinite linear alternate; animation: bodyrock 3s infinite linear alternate; }

.animated #polar-bear .hands { -webkit-animation: hands 3s infinite ease-in-out alternate; -moz-animation: hands 3s infinite ease-in-out alternate; -o-animation: hands 3s infinite ease-in-out alternate; animation: hands 3s infinite ease-in-out alternate; perspective: 200; }

.animated #polar-bear .rightleg, .animated #polar-bear .leftleg { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-animation: jig 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1) alternate; -moz-animation: jig 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1) alternate; -o-animation: jig 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1) alternate; animation: jig 3s infinite cubic-bezier(0.84, 0.01, 0.3, 1) alternate; }

.animated #polar-bear .rightleg { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; }

@-moz-keyframes bodyrock { /*  wiggle arms*/
  0% { background-position: 0px 0px; }
  100% { background-position: 111px 0px; } }

@-webkit-keyframes bodyrock { /*  wiggle arms*/
  0% { background-position: 0px 0px; }
  100% { background-position: 111px 0px; } }

@-o-keyframes bodyrock { /*  wiggle arms*/
  0% { background-position: 0px 0px; }
  100% { background-position: 111px 0px; } }

@keyframes bodyrock { /*  wiggle arms*/
  0% { background-position: 0px 0px; }
  100% { background-position: 111px 0px; } }

@-moz-keyframes hands { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } }

@-webkit-keyframes hands { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } }

@-o-keyframes hands { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } }

@keyframes hands { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); }
  50% { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } }

@-moz-keyframes jig { /* foot stomp*/
  0%, 20%, 80%, 100% { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(1, 0.8); -moz-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); transform: scale(1, 0.8); } }

@-webkit-keyframes jig { /* foot stomp*/
  0%, 20%, 80%, 100% { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(1, 0.8); -moz-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); transform: scale(1, 0.8); } }

@-o-keyframes jig { /* foot stomp*/
  0%, 20%, 80%, 100% { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(1, 0.8); -moz-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); transform: scale(1, 0.8); } }

@keyframes jig { /* foot stomp*/
  0%, 20%, 80%, 100% { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
  50% { -webkit-transform: scale(1, 0.8); -moz-transform: scale(1, 0.8); -ms-transform: scale(1, 0.8); -o-transform: scale(1, 0.8); transform: scale(1, 0.8); } }

/*  Day 15 - The gift */
.animated #hunter { -webkit-animation: heyguys 8s infinite steps(1); -moz-animation: heyguys 8s infinite steps(1); -o-animation: heyguys 8s infinite steps(1); animation: heyguys 8s infinite steps(1); }

.animated .caveback { -webkit-animation: bear1 24s infinite ease-in-out; -moz-animation: bear1 24s infinite ease-in-out; -o-animation: bear1 24s infinite ease-in-out; animation: bear1 24s infinite ease-in-out; }

.animated .cavefront { -webkit-animation: bear2 24s infinite ease-in-out; -moz-animation: bear2 24s infinite ease-in-out; -o-animation: bear2 24s infinite ease-in-out; animation: bear2 24s infinite ease-in-out; }

.animated .caveside { -webkit-animation: bear3 24s infinite ease-in-out; -moz-animation: bear3 24s infinite ease-in-out; -o-animation: bear3 24s infinite ease-in-out; animation: bear3 24s infinite ease-in-out; }

@-moz-keyframes heyguys { 0%,100% { /* guy looking back */ background: url(/img/north/hunter.png) no-repeat top right; }
  50% { background: url(/img/north/hunter.png) no-repeat top left; } }

@-webkit-keyframes heyguys { 0%,100% { /* guy looking back */ background: url(/img/north/hunter.png) no-repeat top right; }
  50% { background: url(/img/north/hunter.png) no-repeat top left; } }

@-o-keyframes heyguys { 0%,100% { /* guy looking back */ background: url(/img/north/hunter.png) no-repeat top right; }
  50% { background: url(/img/north/hunter.png) no-repeat top left; } }

@keyframes heyguys { 0%,100% { /* guy looking back */ background: url(/img/north/hunter.png) no-repeat top right; }
  50% { background: url(/img/north/hunter.png) no-repeat top left; } }

@-moz-keyframes bear1 { 0%,18%, 33%, 100% { background: url(/img/north/multi-bear.png) no-repeat -80px 50px; }
  22%, 26% { background: url(/img/north/multi-bear.png) no-repeat -80px 0px; } }

@-webkit-keyframes bear1 { 0%,18%, 33%, 100% { background: url(/img/north/multi-bear.png) no-repeat -80px 50px; }
  22%, 26% { background: url(/img/north/multi-bear.png) no-repeat -80px 0px; } }

@-o-keyframes bear1 { 0%,18%, 33%, 100% { background: url(/img/north/multi-bear.png) no-repeat -80px 50px; }
  22%, 26% { background: url(/img/north/multi-bear.png) no-repeat -80px 0px; } }

@keyframes bear1 { 0%,18%, 33%, 100% { background: url(/img/north/multi-bear.png) no-repeat -80px 50px; }
  22%, 26% { background: url(/img/north/multi-bear.png) no-repeat -80px 0px; } }

@-moz-keyframes bear2 { 0%,50%, 68%, 100% { background: url(/img/north/multi-bear.png) no-repeat 40px -40px; }
  57%, 62% { background: url(/img/north/multi-bear.png) no-repeat -20px -40px; } }

@-webkit-keyframes bear2 { 0%,50%, 68%, 100% { background: url(/img/north/multi-bear.png) no-repeat 40px -40px; }
  57%, 62% { background: url(/img/north/multi-bear.png) no-repeat -20px -40px; } }

@-o-keyframes bear2 { 0%,50%, 68%, 100% { background: url(/img/north/multi-bear.png) no-repeat 40px -40px; }
  57%, 62% { background: url(/img/north/multi-bear.png) no-repeat -20px -40px; } }

@keyframes bear2 { 0%,50%, 68%, 100% { background: url(/img/north/multi-bear.png) no-repeat 40px -40px; }
  57%, 62% { background: url(/img/north/multi-bear.png) no-repeat -20px -40px; } }

@-moz-keyframes bear3 { 0%,85%,  100% { background: url(/img/north/multi-bear.png) no-repeat -214px -40px; }
  90%, 94% { background: url(/img/north/multi-bear.png) no-repeat -144px -40px; } }

@-webkit-keyframes bear3 { 0%,85%,  100% { background: url(/img/north/multi-bear.png) no-repeat -214px -40px; }
  90%, 94% { background: url(/img/north/multi-bear.png) no-repeat -144px -40px; } }

@-o-keyframes bear3 { 0%,85%,  100% { background: url(/img/north/multi-bear.png) no-repeat -214px -40px; }
  90%, 94% { background: url(/img/north/multi-bear.png) no-repeat -144px -40px; } }

@keyframes bear3 { 0%,85%,  100% { background: url(/img/north/multi-bear.png) no-repeat -214px -40px; }
  90%, 94% { background: url(/img/north/multi-bear.png) no-repeat -144px -40px; } }

/*  Day 16 - Penguins  */
#penguins ul { top: 0; left: 0; }

#penguins li { /*  Positional : front row */ -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -ms-background-size: 100% 100%; background-size: 100% 100%; position: absolute; perspective: 200; left: 0px; float: left; top: 50px; width: 54px; height: 81px; -webkit-transform: translate(30px); -moz-transform: translate(30px); -ms-transform: translate(30px); -o-transform: translate(30px); transform: translate(30px); z-index: 999; }

#penguins li:nth-of-type(3n-1) { /*middle row*/ top: 20px; z-index: 100; }

#penguins li:nth-of-type(3n) { /*back row*/ top: -45px; z-index: 0; left: 40%; }

/* the Penguins */
#penguins li em { display: block; -webkit-background-size: 1300% 100%; -moz-background-size: 1300% 100%; -ms-background-size: 1300% 100%; background-size: 1300% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; width: 54px; height: 81px; background: url(/img/north/penguin-sprite.png) -324px 0px; }

/* Randomizing left positions */
#penguins li:nth-of-type(2n-1) { left: 13%; }

#penguins li:nth-of-type(4n-1) { left: 10%; }

#penguins li:nth-of-type(3n-1) { left: 5%; }

#penguins li:nth-of-type(3n-2) { left: 22%; }

#penguins li:nth-of-type(5n-5) { left: 35%; }

#penguins li:nth-of-type(7n-3) { left: 6%; }

#penguins li:nth-of-type(4n-2) { left: 15%; }

#penguins li:nth-of-type(2) { left: 30%; }

#penguins li:nth-of-type(1) { left: 25%; }

#penguins li:nth-of-type(7) { left: 28%; }

#penguins li:nth-of-type(11) { left: 40%; }

/* animation */
.animated #penguins li em { -webkit-animation: rock 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -moz-animation: rock 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -o-animation: rock 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); animation: rock 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); }

.animated #penguins li:nth-of-type(3n-1) em { background-position: -324px 0px; -webkit-animation: rockmid 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -moz-animation: rockmid 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -o-animation: rockmid 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); animation: rockmid 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); }

.animated #penguins li:nth-of-type(3n) em { background-position: -648px 0px; -webkit-animation: rockback 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -moz-animation: rockback 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); -o-animation: rockback 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); animation: rockback 0.42857s infinite ease-in-out, rightsprite 18s infinite steps(1); }

.animated #penguins li { -webkit-animation: circlestep 18s infinite ease-in-out; -moz-animation: circlestep 18s infinite ease-in-out; -o-animation: circlestep 18s infinite ease-in-out; animation: circlestep 18s infinite ease-in-out; }

/* time delays */
.animated #penguins ul li:nth-of-type(1n), .animated #penguins ul li:nth-of-type(1n) em { -webkit-animation-delay: 0s, 0s; -moz-animation-delay: 0s, 0s; -o-animation-delay: 0s, 0s; animation-delay: 0s, 0s; }

.animated #penguins ul li:nth-of-type(2n-1), .animated #penguins ul li:nth-of-type(2n-1) em { -webkit-animation-delay: 0.21s, 24s; -moz-animation-delay: 0.21s, 24s; -o-animation-delay: 0.21s, 24s; animation-delay: 0.21s, 24s; }

.animated #penguins ul li:nth-of-type(2n), .animated #penguins ul li:nth-of-type(2n) em { -webkit-animation-delay: 0.21s, 12.85714s; -moz-animation-delay: 0.21s, 12.85714s; -o-animation-delay: 0.21s, 12.85714s; animation-delay: 0.21s, 12.85714s; }

.animated #penguins ul li:nth-of-type(3n), .animated #penguins ul li:nth-of-type(3n) em { -webkit-animation-delay: 0s, 6s; -moz-animation-delay: 0s, 6s; -o-animation-delay: 0s, 6s; animation-delay: 0s, 6s; }

.animated #penguins ul li:nth-of-type(5n-2), .animated #penguins ul li:nth-of-type(5n-2) em { -webkit-animation-delay: 0s, 9s; -moz-animation-delay: 0s, 9s; -o-animation-delay: 0s, 9s; animation-delay: 0s, 9s; }

.animated #penguins ul li:nth-of-type(4n-3), .animated #penguins ul li:nth-of-type(4n-3) em { -webkit-animation-delay: 0s, 4.5s; -moz-animation-delay: 0s, 4.5s; -o-animation-delay: 0s, 4.5s; animation-delay: 0s, 4.5s; }

@-moz-keyframes circlestep { /* A circular path with pauses  at the compass points */
  0% { -webkit-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -moz-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -ms-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -o-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); }
  50% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); }
  100% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); } }

@-webkit-keyframes circlestep { /* A circular path with pauses  at the compass points */
  0% { -webkit-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -moz-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -ms-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -o-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); }
  50% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); }
  100% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); } }

@-o-keyframes circlestep { /* A circular path with pauses  at the compass points */
  0% { -webkit-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -moz-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -ms-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -o-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); }
  50% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); }
  100% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); } }

@keyframes circlestep { /* A circular path with pauses  at the compass points */
  0% { -webkit-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -moz-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -ms-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); -o-transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); transform: rotate(0deg) translate3d(20px, 0px, 0) rotate(0deg); }
  50% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); }
  100% { -webkit-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -moz-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -ms-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); -o-transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); transform: rotate(360deg) translate3d(20px, 0px, 0) rotate(-360deg); } }

@-moz-keyframes rockmid { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.9); -moz-transform: rotateZ(-2.5deg) scale(0.9); -ms-transform: rotateZ(-2.5deg) scale(0.9); -o-transform: rotateZ(-2.5deg) scale(0.9); transform: rotateZ(-2.5deg) scale(0.9); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.9); -moz-transform: rotateZ(2.5deg) scale(0.9); -ms-transform: rotateZ(2.5deg) scale(0.9); -o-transform: rotateZ(2.5deg) scale(0.9); transform: rotateZ(2.5deg) scale(0.9); } }

@-webkit-keyframes rockmid { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.9); -moz-transform: rotateZ(-2.5deg) scale(0.9); -ms-transform: rotateZ(-2.5deg) scale(0.9); -o-transform: rotateZ(-2.5deg) scale(0.9); transform: rotateZ(-2.5deg) scale(0.9); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.9); -moz-transform: rotateZ(2.5deg) scale(0.9); -ms-transform: rotateZ(2.5deg) scale(0.9); -o-transform: rotateZ(2.5deg) scale(0.9); transform: rotateZ(2.5deg) scale(0.9); } }

@-o-keyframes rockmid { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.9); -moz-transform: rotateZ(-2.5deg) scale(0.9); -ms-transform: rotateZ(-2.5deg) scale(0.9); -o-transform: rotateZ(-2.5deg) scale(0.9); transform: rotateZ(-2.5deg) scale(0.9); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.9); -moz-transform: rotateZ(2.5deg) scale(0.9); -ms-transform: rotateZ(2.5deg) scale(0.9); -o-transform: rotateZ(2.5deg) scale(0.9); transform: rotateZ(2.5deg) scale(0.9); } }

@keyframes rockmid { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.9); -moz-transform: rotateZ(-2.5deg) scale(0.9); -ms-transform: rotateZ(-2.5deg) scale(0.9); -o-transform: rotateZ(-2.5deg) scale(0.9); transform: rotateZ(-2.5deg) scale(0.9); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.9); -moz-transform: rotateZ(2.5deg) scale(0.9); -ms-transform: rotateZ(2.5deg) scale(0.9); -o-transform: rotateZ(2.5deg) scale(0.9); transform: rotateZ(2.5deg) scale(0.9); } }

@-moz-keyframes rockback { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.75); -moz-transform: rotateZ(-2.5deg) scale(0.75); -ms-transform: rotateZ(-2.5deg) scale(0.75); -o-transform: rotateZ(-2.5deg) scale(0.75); transform: rotateZ(-2.5deg) scale(0.75); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.75); -moz-transform: rotateZ(2.5deg) scale(0.75); -ms-transform: rotateZ(2.5deg) scale(0.75); -o-transform: rotateZ(2.5deg) scale(0.75); transform: rotateZ(2.5deg) scale(0.75); } }

@-webkit-keyframes rockback { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.75); -moz-transform: rotateZ(-2.5deg) scale(0.75); -ms-transform: rotateZ(-2.5deg) scale(0.75); -o-transform: rotateZ(-2.5deg) scale(0.75); transform: rotateZ(-2.5deg) scale(0.75); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.75); -moz-transform: rotateZ(2.5deg) scale(0.75); -ms-transform: rotateZ(2.5deg) scale(0.75); -o-transform: rotateZ(2.5deg) scale(0.75); transform: rotateZ(2.5deg) scale(0.75); } }

@-o-keyframes rockback { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.75); -moz-transform: rotateZ(-2.5deg) scale(0.75); -ms-transform: rotateZ(-2.5deg) scale(0.75); -o-transform: rotateZ(-2.5deg) scale(0.75); transform: rotateZ(-2.5deg) scale(0.75); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.75); -moz-transform: rotateZ(2.5deg) scale(0.75); -ms-transform: rotateZ(2.5deg) scale(0.75); -o-transform: rotateZ(2.5deg) scale(0.75); transform: rotateZ(2.5deg) scale(0.75); } }

@keyframes rockback { 0% , 100% { -webkit-transform: rotateZ(-2.5deg) scale(0.75); -moz-transform: rotateZ(-2.5deg) scale(0.75); -ms-transform: rotateZ(-2.5deg) scale(0.75); -o-transform: rotateZ(-2.5deg) scale(0.75); transform: rotateZ(-2.5deg) scale(0.75); }
  50% { -webkit-transform: rotateZ(2.5deg) scale(0.75); -moz-transform: rotateZ(2.5deg) scale(0.75); -ms-transform: rotateZ(2.5deg) scale(0.75); -o-transform: rotateZ(2.5deg) scale(0.75); transform: rotateZ(2.5deg) scale(0.75); } }

@-moz-keyframes rightsprite { 0%, 100% { background-position: -108px 0px; }
  4.16% { background-position: -162px 0px; }
  8.32% { background-position: -216px 0px; }
  12.5% { background-position: -270px 0px; }
  16.16% { background-position: -324px 0px; }
  20.8% { background-position: -378px 0px; }
  25% { background-position: -432px 0px; }
  29.16% { background-position: -486px 0px; }
  33.33% { background-position: -540px 0px; }
  37.5% { background-position: -594px 0px; }
  41.166% { background-position: -648px 0px; }
  45.666% { background-position: -108px 0px; }
  50%, 80%, 87%, 94% { background-position: -108px 0px; }
  81%,86%, 88%, 93% { background-position: -54px 0px; }
  82%, 89% { background-position: 0px 0px; } }

@-webkit-keyframes rightsprite { 0%, 100% { background-position: -108px 0px; }
  4.16% { background-position: -162px 0px; }
  8.32% { background-position: -216px 0px; }
  12.5% { background-position: -270px 0px; }
  16.16% { background-position: -324px 0px; }
  20.8% { background-position: -378px 0px; }
  25% { background-position: -432px 0px; }
  29.16% { background-position: -486px 0px; }
  33.33% { background-position: -540px 0px; }
  37.5% { background-position: -594px 0px; }
  41.166% { background-position: -648px 0px; }
  45.666% { background-position: -108px 0px; }
  50%, 80%, 87%, 94% { background-position: -108px 0px; }
  81%,86%, 88%, 93% { background-position: -54px 0px; }
  82%, 89% { background-position: 0px 0px; } }

@-o-keyframes rightsprite { 0%, 100% { background-position: -108px 0px; }
  4.16% { background-position: -162px 0px; }
  8.32% { background-position: -216px 0px; }
  12.5% { background-position: -270px 0px; }
  16.16% { background-position: -324px 0px; }
  20.8% { background-position: -378px 0px; }
  25% { background-position: -432px 0px; }
  29.16% { background-position: -486px 0px; }
  33.33% { background-position: -540px 0px; }
  37.5% { background-position: -594px 0px; }
  41.166% { background-position: -648px 0px; }
  45.666% { background-position: -108px 0px; }
  50%, 80%, 87%, 94% { background-position: -108px 0px; }
  81%,86%, 88%, 93% { background-position: -54px 0px; }
  82%, 89% { background-position: 0px 0px; } }

@keyframes rightsprite { 0%, 100% { background-position: -108px 0px; }
  4.16% { background-position: -162px 0px; }
  8.32% { background-position: -216px 0px; }
  12.5% { background-position: -270px 0px; }
  16.16% { background-position: -324px 0px; }
  20.8% { background-position: -378px 0px; }
  25% { background-position: -432px 0px; }
  29.16% { background-position: -486px 0px; }
  33.33% { background-position: -540px 0px; }
  37.5% { background-position: -594px 0px; }
  41.166% { background-position: -648px 0px; }
  45.666% { background-position: -108px 0px; }
  50%, 80%, 87%, 94% { background-position: -108px 0px; }
  81%,86%, 88%, 93% { background-position: -54px 0px; }
  82%, 89% { background-position: 0px 0px; } }

/* Day 17 - Sliding penguins */
.animated #slide .climber { -webkit-animation: rock 0.5s infinite ease-in-out, climber 7s infinite ease-out; -moz-animation: rock 0.5s infinite ease-in-out, climber 7s infinite ease-out; -o-animation: rock 0.5s infinite ease-in-out, climber 7s infinite ease-out; animation: rock 0.5s infinite ease-in-out, climber 7s infinite ease-out; }

.animated #slide .penguinsliding { -webkit-animation: squwee 7s infinite linear; -moz-animation: squwee 7s infinite linear; -o-animation: squwee 7s infinite linear; animation: squwee 7s infinite linear; }

@-moz-keyframes climber { 0%,100% { bottom: 140px; left: 180px; }
  38% { bottom: 150px; left: 180px; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
  39% { bottom: 160px; left: 180px; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 1; }
  40% { bottom: 70px; left: 180px; -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 0; }
  /* hide */
  60% { bottom: 70px; left: 120px; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } }

@-webkit-keyframes climber { 0%,100% { bottom: 140px; left: 180px; }
  38% { bottom: 150px; left: 180px; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
  39% { bottom: 160px; left: 180px; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 1; }
  40% { bottom: 70px; left: 180px; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 0; }
  /* hide */
  60% { bottom: 70px; left: 120px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } }

@-o-keyframes climber { 0%,100% { bottom: 140px; left: 180px; }
  38% { bottom: 150px; left: 180px; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }
  39% { bottom: 160px; left: 180px; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 1; }
  40% { bottom: 70px; left: 180px; -o-animation-timing-function: steps(1); animation-timing-function: steps(1); opacity: 0; }
  /* hide */
  60% { bottom: 70px; left: 120px; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } }

@keyframes climber { 0%,100% { bottom: 140px; left: 180px; }
  38% { bottom: 150px; left: 180px; animation-timing-function: ease-in-out; }
  39% { bottom: 160px; left: 180px; animation-timing-function: steps(1); opacity: 1; }
  40% { bottom: 70px; left: 180px; animation-timing-function: steps(1); opacity: 0; }
  /* hide */
  60% { bottom: 70px; left: 120px; animation-timing-function: ease-out; opacity: 1; } }

@-moz-keyframes squwee { 0% { left: 9%; bottom: 160px; opacity: 0; /* hide */ -moz-animation-timing-function: steps(1); animation-timing-function: steps(1); -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  38% { left: 10%; bottom: 160px; opacity: 1; /* show */ -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  44% { left: 17%; bottom: 100px; opacity: 1; -webkit-transform: rotateZ(35deg); -moz-transform: rotateZ(35deg); -ms-transform: rotateZ(35deg); -o-transform: rotateZ(35deg); transform: rotateZ(35deg); -moz-animation-timing-function: linear; animation-timing-function: linear; }
  48% { bottom: 40px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -moz-animation-timing-function: linear; animation-timing-function: linear; }
  85% { bottom: 20px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -moz-animation-timing-function: linear; animation-timing-function: linear; }
  88% { bottom: 10px; -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); transform: rotateZ(20deg); }
  93.33% { bottom: -100px; height: 100px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -moz-animation-timing-function: linear; animation-timing-function: linear; }
  96.66% { bottom: -50px; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  100% { left: 92%; bottom: -100px; height: 100px; opacity: 1; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } }

@-webkit-keyframes squwee { 0% { left: 9%; bottom: 160px; opacity: 0; /* hide */ -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  38% { left: 10%; bottom: 160px; opacity: 1; /* show */ -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  44% { left: 17%; bottom: 100px; opacity: 1; -webkit-transform: rotateZ(35deg); -moz-transform: rotateZ(35deg); -ms-transform: rotateZ(35deg); -o-transform: rotateZ(35deg); transform: rotateZ(35deg); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  48% { bottom: 40px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  85% { bottom: 20px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  88% { bottom: 10px; -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); transform: rotateZ(20deg); }
  93.33% { bottom: -100px; height: 100px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  96.66% { bottom: -50px; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  100% { left: 92%; bottom: -100px; height: 100px; opacity: 1; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } }

@-o-keyframes squwee { 0% { left: 9%; bottom: 160px; opacity: 0; /* hide */ -o-animation-timing-function: steps(1); animation-timing-function: steps(1); -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  38% { left: 10%; bottom: 160px; opacity: 1; /* show */ -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  44% { left: 17%; bottom: 100px; opacity: 1; -webkit-transform: rotateZ(35deg); -moz-transform: rotateZ(35deg); -ms-transform: rotateZ(35deg); -o-transform: rotateZ(35deg); transform: rotateZ(35deg); -o-animation-timing-function: linear; animation-timing-function: linear; }
  48% { bottom: 40px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -o-animation-timing-function: linear; animation-timing-function: linear; }
  85% { bottom: 20px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -o-animation-timing-function: linear; animation-timing-function: linear; }
  88% { bottom: 10px; -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); transform: rotateZ(20deg); }
  93.33% { bottom: -100px; height: 100px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -o-animation-timing-function: linear; animation-timing-function: linear; }
  96.66% { bottom: -50px; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  100% { left: 92%; bottom: -100px; height: 100px; opacity: 1; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } }

@keyframes squwee { 0% { left: 9%; bottom: 160px; opacity: 0; /* hide */ animation-timing-function: steps(1); -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  38% { left: 10%; bottom: 160px; opacity: 1; /* show */ animation-timing-function: linear; -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); }
  44% { left: 17%; bottom: 100px; opacity: 1; -webkit-transform: rotateZ(35deg); -moz-transform: rotateZ(35deg); -ms-transform: rotateZ(35deg); -o-transform: rotateZ(35deg); transform: rotateZ(35deg); animation-timing-function: linear; }
  48% { bottom: 40px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); animation-timing-function: linear; }
  85% { bottom: 20px; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); animation-timing-function: linear; }
  88% { bottom: 10px; -webkit-transform: rotateZ(20deg); -moz-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); -o-transform: rotateZ(20deg); transform: rotateZ(20deg); }
  93.33% { bottom: -100px; height: 100px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); animation-timing-function: linear; }
  96.66% { bottom: -50px; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); animation-timing-function: ease-in; }
  100% { left: 92%; bottom: -100px; height: 100px; opacity: 1; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } }

/* day 18 Jumping seals */
.animated #seal-mid-air ul li em { /* leap animation */ -webkit-transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); transform: rotateZ(-180deg); -webkit-animation: hide 9s infinite steps(1), jumpanddive 1.5s infinite cubic-bezier(0, 0.39, 0.99, 0.34); -moz-animation: hide 9s infinite steps(1), jumpanddive 1.5s infinite cubic-bezier(0, 0.39, 0.99, 0.34); -o-animation: hide 9s infinite steps(1), jumpanddive 1.5s infinite cubic-bezier(0, 0.39, 0.99, 0.34); animation: hide 9s infinite steps(1), jumpanddive 1.5s infinite cubic-bezier(0, 0.39, 0.99, 0.34); }

.animated #seal-mid-air ul li { -webkit-animation: movetop 7.5s infinite steps(1), moveleft 10.5s infinite steps(1); -moz-animation: movetop 7.5s infinite steps(1), moveleft 10.5s infinite steps(1); -o-animation: movetop 7.5s infinite steps(1), moveleft 10.5s infinite steps(1); animation: movetop 7.5s infinite steps(1), moveleft 10.5s infinite steps(1); }

.animated #seal-mid-air ul li:nth-of-type(2), .animated #seal-mid-air ul li:nth-of-type(2) em { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; }

.animated #seal-mid-air ul li:nth-of-type(2) { -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; }

.animated #seal-mid-air ul li:nth-of-type(3) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; }

@-moz-keyframes jumpanddive { 0% { -webkit-transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); transform: rotateZ(-180deg); }
  100% { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } }

@-webkit-keyframes jumpanddive { 0% { -webkit-transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); transform: rotateZ(-180deg); }
  100% { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } }

@-o-keyframes jumpanddive { 0% { -webkit-transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); transform: rotateZ(-180deg); }
  100% { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } }

@keyframes jumpanddive { 0% { -webkit-transform: rotateZ(-180deg); -moz-transform: rotateZ(-180deg); -ms-transform: rotateZ(-180deg); -o-transform: rotateZ(-180deg); transform: rotateZ(-180deg); }
  100% { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } }

@-moz-keyframes hide { 0% ,100% { opacity: 1; }
  17.5% { opacity: 1; }
  17.51% { opacity: 0; }
  33.3% { opacity: 0; }
  33.333% { opacity: 1; } }

@-webkit-keyframes hide { 0% ,100% { opacity: 1; }
  17.5% { opacity: 1; }
  17.51% { opacity: 0; }
  33.3% { opacity: 0; }
  33.333% { opacity: 1; } }

@-o-keyframes hide { 0% ,100% { opacity: 1; }
  17.5% { opacity: 1; }
  17.51% { opacity: 0; }
  33.3% { opacity: 0; }
  33.333% { opacity: 1; } }

@keyframes hide { 0% ,100% { opacity: 1; }
  17.5% { opacity: 1; }
  17.51% { opacity: 0; }
  33.3% { opacity: 0; }
  33.333% { opacity: 1; } }

@-moz-keyframes movetop { 0%, 100% { top: 10px; z-index: 10; -webkit-transform: scale(0.5) rotateY(180deg); -moz-transform: scale(0.5) rotateY(180deg); -ms-transform: scale(0.5) rotateY(180deg); -o-transform: scale(0.5) rotateY(180deg); transform: scale(0.5) rotateY(180deg); }
  20% { top: 75px; z-index: 75; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }
  40% { top: 30px; z-index: 30; -webkit-transform: scale(0.8) rotateY(180deg); -moz-transform: scale(0.8) rotateY(180deg); -ms-transform: scale(0.8) rotateY(180deg); -o-transform: scale(0.8) rotateY(180deg); transform: scale(0.8) rotateY(180deg); }
  60% { top: 100px; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  80% { top: 20px; z-index: 20; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } }

@-webkit-keyframes movetop { 0%, 100% { top: 10px; z-index: 10; -webkit-transform: scale(0.5) rotateY(180deg); -moz-transform: scale(0.5) rotateY(180deg); -ms-transform: scale(0.5) rotateY(180deg); -o-transform: scale(0.5) rotateY(180deg); transform: scale(0.5) rotateY(180deg); }
  20% { top: 75px; z-index: 75; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }
  40% { top: 30px; z-index: 30; -webkit-transform: scale(0.8) rotateY(180deg); -moz-transform: scale(0.8) rotateY(180deg); -ms-transform: scale(0.8) rotateY(180deg); -o-transform: scale(0.8) rotateY(180deg); transform: scale(0.8) rotateY(180deg); }
  60% { top: 100px; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  80% { top: 20px; z-index: 20; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } }

@-o-keyframes movetop { 0%, 100% { top: 10px; z-index: 10; -webkit-transform: scale(0.5) rotateY(180deg); -moz-transform: scale(0.5) rotateY(180deg); -ms-transform: scale(0.5) rotateY(180deg); -o-transform: scale(0.5) rotateY(180deg); transform: scale(0.5) rotateY(180deg); }
  20% { top: 75px; z-index: 75; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }
  40% { top: 30px; z-index: 30; -webkit-transform: scale(0.8) rotateY(180deg); -moz-transform: scale(0.8) rotateY(180deg); -ms-transform: scale(0.8) rotateY(180deg); -o-transform: scale(0.8) rotateY(180deg); transform: scale(0.8) rotateY(180deg); }
  60% { top: 100px; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  80% { top: 20px; z-index: 20; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } }

@keyframes movetop { 0%, 100% { top: 10px; z-index: 10; -webkit-transform: scale(0.5) rotateY(180deg); -moz-transform: scale(0.5) rotateY(180deg); -ms-transform: scale(0.5) rotateY(180deg); -o-transform: scale(0.5) rotateY(180deg); transform: scale(0.5) rotateY(180deg); }
  20% { top: 75px; z-index: 75; -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); }
  40% { top: 30px; z-index: 30; -webkit-transform: scale(0.8) rotateY(180deg); -moz-transform: scale(0.8) rotateY(180deg); -ms-transform: scale(0.8) rotateY(180deg); -o-transform: scale(0.8) rotateY(180deg); transform: scale(0.8) rotateY(180deg); }
  60% { top: 100px; z-index: 100; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  80% { top: 20px; z-index: 20; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } }

@-moz-keyframes moveleft { 0%, 100% { left: 50%; }
  14.28% { left: 10%; }
  28.57% { left: 90%; }
  42.85% { left: 35%; }
  57.14% { left: 20%; }
  71.42% { left: 60%; }
  85.71% { left: 80%; } }

@-webkit-keyframes moveleft { 0%, 100% { left: 50%; }
  14.28% { left: 10%; }
  28.57% { left: 90%; }
  42.85% { left: 35%; }
  57.14% { left: 20%; }
  71.42% { left: 60%; }
  85.71% { left: 80%; } }

@-o-keyframes moveleft { 0%, 100% { left: 50%; }
  14.28% { left: 10%; }
  28.57% { left: 90%; }
  42.85% { left: 35%; }
  57.14% { left: 20%; }
  71.42% { left: 60%; }
  85.71% { left: 80%; } }

@keyframes moveleft { 0%, 100% { left: 50%; }
  14.28% { left: 10%; }
  28.57% { left: 90%; }
  42.85% { left: 35%; }
  57.14% { left: 20%; }
  71.42% { left: 60%; }
  85.71% { left: 80%; } }

/* diving seal */
.animated #seal ul li { -webkit-animation: waves 1s infinite linear, duckmove 50s infinite steps(1); -moz-animation: waves 1s infinite linear, duckmove 50s infinite steps(1); -o-animation: waves 1s infinite linear, duckmove 50s infinite steps(1); animation: waves 1s infinite linear, duckmove 50s infinite steps(1); }

.animated #seal ul li i { -webkit-animation: duck 10s infinite ease-in-out; -moz-animation: duck 10s infinite ease-in-out; -o-animation: duck 10s infinite ease-in-out; animation: duck 10s infinite ease-in-out; }

@-moz-keyframes waves { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-webkit-keyframes waves { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-o-keyframes waves { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@keyframes waves { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-moz-keyframes duck { 0%, 100% { background-position: 0 60px; }
  20%,30%,40%,50%,60%, 70%, 80% { background-position: 0 0px; }
  26%,36%,46%,56%,66%, 76% { background-position: 0 10px; } }

@-webkit-keyframes duck { 0%, 100% { background-position: 0 60px; }
  20%,30%,40%,50%,60%, 70%, 80% { background-position: 0 0px; }
  26%,36%,46%,56%,66%, 76% { background-position: 0 10px; } }

@-o-keyframes duck { 0%, 100% { background-position: 0 60px; }
  20%,30%,40%,50%,60%, 70%, 80% { background-position: 0 0px; }
  26%,36%,46%,56%,66%, 76% { background-position: 0 10px; } }

@keyframes duck { 0%, 100% { background-position: 0 60px; }
  20%,30%,40%,50%,60%, 70%, 80% { background-position: 0 0px; }
  26%,36%,46%,56%,66%, 76% { background-position: 0 10px; } }

@-moz-keyframes duckmove { 0% { left: 15%; }
  20% { left: 85%; }
  40% { left: 50%; }
  60% { left: 70%; }
  100% { left: 2%; } }

@-webkit-keyframes duckmove { 0% { left: 15%; }
  20% { left: 85%; }
  40% { left: 50%; }
  60% { left: 70%; }
  100% { left: 2%; } }

@-o-keyframes duckmove { 0% { left: 15%; }
  20% { left: 85%; }
  40% { left: 50%; }
  60% { left: 70%; }
  100% { left: 2%; } }

@keyframes duckmove { 0% { left: 15%; }
  20% { left: 85%; }
  40% { left: 50%; }
  60% { left: 70%; }
  100% { left: 2%; } }

/*  day 20 - flying the flag */
.animated #explorer-flag .flag { -webkit-animation: flagwhip 1s infinite cubic-bezier(0, 0.51, 0.82, 0.82); -moz-animation: flagwhip 1s infinite cubic-bezier(0, 0.51, 0.82, 0.82); -o-animation: flagwhip 1s infinite cubic-bezier(0, 0.51, 0.82, 0.82); animation: flagwhip 1s infinite cubic-bezier(0, 0.51, 0.82, 0.82); }

@-moz-keyframes crack { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-webkit-keyframes crack { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-o-keyframes crack { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@keyframes crack { 0% { box-shadow: inset 0px 0px 0px 36px #3b719d, inset 0px 0px 0px 38px rgba(255, 255, 255, 0.5); }
  100% { box-shadow: inset 0px 0px 0px 3px #3b719d, inset 0px 0px 0px 5px rgba(255, 255, 255, 0); } }

@-moz-keyframes flagwhip { 0% { background-position: 0 0; top: -7px; }
  40% { top: -8px; }
  50% { background-position: -41px 0%; }
  90% { top: 0px; }
  100% { background-position: -82px 0%; top: -2px; } }

@-webkit-keyframes flagwhip { 0% { background-position: 0 0; top: -7px; }
  40% { top: -8px; }
  50% { background-position: -41px 0%; }
  90% { top: 0px; }
  100% { background-position: -82px 0%; top: -2px; } }

@-o-keyframes flagwhip { 0% { background-position: 0 0; top: -7px; }
  40% { top: -8px; }
  50% { background-position: -41px 0%; }
  90% { top: 0px; }
  100% { background-position: -82px 0%; top: -2px; } }

@keyframes flagwhip { 0% { background-position: 0 0; top: -7px; }
  40% { top: -8px; }
  50% { background-position: -41px 0%; }
  90% { top: 0px; }
  100% { background-position: -82px 0%; top: -2px; } }

/*  day 21 - yeti time! */
.animated #frozen-yeti { -webkit-animation: shake 12s infinite cubic-bezier(0, 0.51, 0.82, 0.82); -moz-animation: shake 12s infinite cubic-bezier(0, 0.51, 0.82, 0.82); -o-animation: shake 12s infinite cubic-bezier(0, 0.51, 0.82, 0.82); animation: shake 12s infinite cubic-bezier(0, 0.51, 0.82, 0.82); }

.animated #frozen-yeti .crack { width: 60px; height: 0px; background: url(/img/north/crack1.png) no-repeat left top; position: absolute; top: 20px; left: 150px; -webkit-animation: crack 12s infinite steps(1); -moz-animation: crack 12s infinite steps(1); -o-animation: crack 12s infinite steps(1); animation: crack 12s infinite steps(1); }

.animated #frozen-yeti .crack:nth-of-type(2) { width: 40px; height: 0px; background-position: right top; top: 50px; left: 15px; -webkit-animation-delay: 4.56s; -moz-animation-delay: 4.56s; -o-animation-delay: 4.56s; animation-delay: 4.56s; }

.animated #frozen-yeti .crack:nth-of-type(3) { width: 40px; height: 0px; background-position: right bottom; top: 150px; left: 215px; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-delay: 8.4s; -moz-animation-delay: 8.4s; -o-animation-delay: 8.4s; animation-delay: 8.4s; }

@-moz-keyframes crack { 0%, 100% { opacity: 1; height: 0px; }
  5% { height: 27px; }
  7% { height: 57px; opacity: 1; -moz-animation-timing-function: linear; animation-timing-function: linear; }
  90% { opacity: 0; width: 60px; height: 57px; } }

@-webkit-keyframes crack { 0%, 100% { opacity: 1; height: 0px; }
  5% { height: 27px; }
  7% { height: 57px; opacity: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  90% { opacity: 0; width: 60px; height: 57px; } }

@-o-keyframes crack { 0%, 100% { opacity: 1; height: 0px; }
  5% { height: 27px; }
  7% { height: 57px; opacity: 1; -o-animation-timing-function: linear; animation-timing-function: linear; }
  90% { opacity: 0; width: 60px; height: 57px; } }

@keyframes crack { 0%, 100% { opacity: 1; height: 0px; }
  5% { height: 27px; }
  7% { height: 57px; opacity: 1; animation-timing-function: linear; }
  90% { opacity: 0; width: 60px; height: 57px; } }

@-moz-keyframes shake { 0%, 8%, 40%, 46%, 100% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  1% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  1.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  2% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  2.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  3% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  3.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  4% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  4.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  42% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  42.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  43% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  43.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  44% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  44.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  45% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); } }

@-webkit-keyframes shake { 0%, 8%, 40%, 46%, 100% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  1% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  1.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  2% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  2.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  3% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  3.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  4% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  4.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  42% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  42.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  43% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  43.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  44% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  44.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  45% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); } }

@-o-keyframes shake { 0%, 8%, 40%, 46%, 100% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  1% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  1.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  2% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  2.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  3% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  3.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  4% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  4.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  42% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  42.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  43% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  43.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  44% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  44.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  45% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); } }

@keyframes shake { 0%, 8%, 40%, 46%, 100% { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); }
  1% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  1.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  2% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  2.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  3% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  3.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  4% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  4.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  41.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  42% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  42.5% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  43% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  43.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  44% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); }
  44.5% { -webkit-transform: rotateZ(2deg); -moz-transform: rotateZ(2deg); -ms-transform: rotateZ(2deg); -o-transform: rotateZ(2deg); transform: rotateZ(2deg); }
  45% { -webkit-transform: rotateZ(-2deg); -moz-transform: rotateZ(-2deg); -ms-transform: rotateZ(-2deg); -o-transform: rotateZ(-2deg); transform: rotateZ(-2deg); } }