Bug 857085: German, Contribute page, use moz15-mark-de.png instead of  moz15-mark-en.png

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "sandstone/lib.less";

.base-animate-in { /* Basic transitions for slide elements */
  -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
}

.base-animate-out { /* Same as .base-animate-in, but with a delay on the fade out */
  -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
}

/* No italics in Chinese/Taiwanese */
.lang-zh-TW,
.lang-zh-CN {
  #moz15 .cta p,
  #moz15 .message {
    font-style: normal;
  }
}

/* Change some container sizes for this page */
#contribute #wrapper {
  width: 100%;
}

#contribute #masthead,
#contribute .billboard,
#opportunities,
#moz15 .cta,
#slideshow {
  width: @widthDesktop - (@gridGutterWidth * 2);
  margin-left: auto;
  margin-right: auto;
}

/* Moz15 header and intro */
#moz15 header {
  position: relative;
  width: 670px;
  min-height: 170px;
  margin: 0 auto 10px;
  padding-left: 290px;
  .title {
    width: 230px;
    height: 180px;
    position: absolute;
    left: 25px;
    top: 0;
    background: transparent url(/media/img/contribute/mozilla15/moz15-mark-en.png) center center no-repeat;
    text-indent: -999em;
    overflow: hidden;
  }
  .intro {
    .open-sans-light;
    font-size: 18px;
    line-height: 1.6;
    padding: 20px 0 20px 40px;
    border-left: 1px solid #bebbb8;
  }
}

.lang-de #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-de.png);
}
.lang-es-ES #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-es.png);
}
.lang-nl #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-nl.png);
}
.lang-fr #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-fr.png);
}
.lang-id #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-id.png);
}
.lang-zh-TW #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-zh-tw.png);
}
.lang-zh-CN #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-zh-cn.png);
}
.lang-pt-BR #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-pt.png);
}

/* Moz15 call to action */
#moz15 .cta {
  width: @widthDesktop - (@gridGutterWidth * 2);
  margin: 0 auto 40px;
  text-align: center;
  h2 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: normal;
    margin-bottom: 0.25em;
  }
  p {
    width: (@gridColumnWidth * 8) + (@gridGutterWidth * 7);
    margin: 0 auto;
    font: italic 18px 'Open Sans Light', sans-serif;
  }
}

/* =Slide show */
#slideshow-stage {
  margin-bottom: 20px;
}

.slide {
  .clearfix;
  border-top: 1px solid #d8d5d1;
  list-style: none;
  margin: 0 20px 10px;
  padding: 20px 0 0 160px;
  .number {
    opacity: 1;
    display: block;
    float: left;
    margin: 0 20px 5px -150px;
    text-indent: -999em;
    overflow: hidden;
    background: url(/media/img/contribute/mozilla15/numbers.png) no-repeat;
  }
  .message {
    opacity: 1;
    margin: 0;
    padding: 10px 10px 0;
    .open-sans-light;
    font-size: 18px;
  }
  .message p {
    margin: 0 0 10px;
  }
}

#slideshow.on {
  margin: 0 auto;
  width: 100%;
  height: 340px;
  position: relative;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  .slides {
    position: relative;
    list-style: none;
    margin: 0 auto;
    width: 100%;
    height: 340px;
    overflow: hidden;
    .slide {
      height: 100%;
      width: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      border: 0;
      > * {
        position: absolute;
        z-index: 10;
      }
      > .back {
        z-index: 1;
      }
    }
  }
}

/* Slide controls */
.slide-control {
  display: none;
}
.on .slide-control {
  display: block;
  width: @widthDesktop - (@gridGutterWidth * 2);
  height: 0;
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 0;
  margin-left: -(@widthDesktop - (@gridGutterWidth * 2))/2;
  .prev,
  .next {
    position: absolute;
    top: 140px;
    opacity: .6;
    width: 44px;
    height: 60px;
    border: 0;
    background: transparent url(/media/img/contribute/mozilla15/slide-arrows.png) no-repeat;
    display: block;
    text-indent: -99em;
    cursor: pointer;
    overflow: hidden;
    -moz-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  }
  .prev {
    left: -10px;
    background-position: 0 0;
    &:hover,
    &:focus {
      left: -14px;
      opacity: 1;
    }
  }
  .next {
    right: -10px;
    background-position: 100% 0;
    &:hover,
    &:focus {
      right: -14px;
      opacity: 1;
    }
  }
}

/* =Base styles for all slides */
.on {
  .number, .message, .block1, .block2, .block3 {
    display: block;
    float: none;
    position: absolute;
    z-index: 5;
    opacity: 0;
    left: 50%;
    margin: 0 0 0 2000px;
  }
  .number {
    text-indent: -999em;
    overflow: hidden;
  }
  .message {
    font: italic 24px/1.15 'Open Sans Light', sans-serif;
    letter-spacing: -.025px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .message p {
    opacity: 0;
    .transition(opacity .3s ease-in 0s);
  }
  .message cite {
    font-style: normal;
  }
  .back {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    opacity: 0;
  }
}

.on {
  /* Slides going from 'ready' to 'in' */
  .animate-in {
    .number, .message, .block1, .block2, .block3 {
      opacity: 1;
      .base-animate-in;
    }
    .message p {
      opacity: 1;
      .transition(opacity .3s ease-in 1.6s);
    }
    .back {
      opacity: 1;
      -moz-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -ms-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -o-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -webkit-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
    }
  }

  /* Slides going from 'in' to 'out' */
  .animate-out {
    .number, .message, .block1, .block2, .block3 {
      opacity: 0;
      .base-animate-out;
    }
    .message p {
      opacity: 0;
      .transition(opacity .3s ease-in 1.6s);
    }
    .back {
      opacity: 0;
      -moz-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -ms-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -o-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -webkit-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
    }
  }
}

/* Fact =01 - Launch */
#fact01 {
  .number {
    width: 139px;
    height: 125px;
    background-position: 0 0;
  }
}
.on #fact01 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact01-pads.png) no-repeat;
  }
  .number {
    width: 145px;
    height: 125px;
    top: 99px;
    background-position: 0 0;
    margin-left: 1100px;
  }
  .message {
    width: 380px;
    height: 224px;
    padding: 62px 40px 0 28px;
    border: 0;
    top: 18px;
    background-position: -150px 0;
    margin-left: 1800px;
  }
  .block1 {
    width: 226px;
    height: 270px;
    border: 0;
    top: 61px;
    background-position: -610px 0;
    margin-left: 2900px;
  }
  .block2 {
    width: 98px;
    height: 256px;
    border: 0;
    top: 61px;
    margin-left: 1190px;
    background-position: -840px 0;
    margin-left: 3800px;
  }

  &.animate-in {
   .number {
      margin-left: -460px;
    }
    .message {
      margin-left: -320px;
    }
    .block1 {
      margin-left: 124px;
    }
    .block2 {
      margin-left: 351px;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3800px;
    }
    .message {
      margin-left: -2900px;
    }
    .block1 {
      margin-left: -1800px;
    }
    .block2 {
      margin-left: -1100px;
    }
  }
}

/* Fact =02 - Firefox */
#fact02 {
  .number {
    width: 115px;
    height: 107px;
    background-position: -139px 0;
    margin-left: -135px;
  }
}
.on #fact02 {
  .number, .message, .block1, .block2, .block3 {
    background: url(/media/img/contribute/mozilla15/fact02-pads.png) no-repeat;
  }
  .number {
    width: 114px;
    height: 102px;
    background-position: 0 0;
    top: 184px;
    margin-top: 90px;
    margin-left: 1990px;
  }
  .message {
    width: 363px;
    height: 200px;
    padding: 80px 105px 0 35px;
    background-position: -151px 0;
    top: 41px;
    margin-left: 1750px;
  }
  .block1 {
    width: 151px;
    height: 75px;
    background-position: 0 -102px;
    top: 113px;
    margin-left: 2140px;
    margin-top: -90px;
  }
  .block2 {
    width: 230px;
    height: 83px;
    background-position: -654px 0;
    top: 47px;
    margin-left: 2640px;
  }
  .block3 {
    width: 230px;
    height: 185px;
    background-position: -654px -83px;
    top: 126px;
    margin-left: 2880px;
    margin-top: 120px;
  }
  .logo {
    display: block;
    position: absolute;
    z-index: 10;
    opacity: 0;
    top: -250px;
    left: 50%;
    margin-left: -446px;
    width: 132px;
    height: 152px;
    background: transparent url(/media/img/contribute/mozilla15/fxlogo.png) no-repeat;
    .transition(opacity .25s ease-in);
  }

  &.animate-in {
   .number {
      margin-left: -412px;
      margin-top: 0;
    }
    .message {
      margin-left: -290px;
    }
    .block1 {
      margin-left: -457px;
      margin-top: 0;
    }
    .block2 {
      margin-left: 216px;
    }
    .block3 {
      margin-left: 216px;
      margin-top: 0;
    }
    .logo {
      top: -150px;
      opacity: 1;
      .transition(opacity .25s ease-in 1.5s);
        .animation(fact02-logo-in 1.5s 1.8s forwards);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3000px;
    }
    .message {
      margin-left: -2500px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 0;
    }
    .block2 {
      margin-left: -1850px;
    }
    .block3 {
      margin-left: -1500px;
    }
    .logo {
      top: 41px;
      opacity: 0;
      .transition(opacity .25s ease-in .6s);
      .animation(fact02-logo-out 1s .4s forwards);
    }
  }
}

@-webkit-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-o-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-ms-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-moz-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}

@-webkit-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-o-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-ms-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-moz-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}

/* Fact =03 - NY Times */
#fact03 {
  .number {
    width: 115px;
    height: 127px;
    background-position: -253px 0;
    margin-left: -128px;
  }
}
.on #fact03 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact03-pads.png) no-repeat;
  }
  .number {
    width: 119px;
    height: 129px;
    top: 140px;
    background-position: 0 0;
    margin-left: 1500px;
  }
  .message {
    height: 242px;
    width: 440px;
    padding: 40px 55px 0 35px;
    top: 35px;
    background-position: -120px 0;
    margin-left: 2000px;
  }
  .block1 {
    width: 208px;
    height: 228px;
    top: 22px;
    background-position: -652px 0;
    margin-left: 2500px;
    margin-top: 50px;
  }

  &.animate-in {
    .number {
      margin-left: -445px;
    }
    .message {
      margin-left: -297px;
    }
    .block1 {
      margin-left: 234px;
      margin-top: 0;
    }
  }

  &.animate-out {
    .number {
      margin-left: -4000px;
    }
    .message {
      margin-left: -3000px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 90px;
    }
  }
}

/* Fact =04 - Global community */
#fact04 {
  .number {
    width: 98px;
    height: 143px;
    background-position: -368px 0;
    margin-left: -135px;
  }
}
.on #fact04 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact04-pads.png) no-repeat;
  }
  .number {
    width: 98px;
    height: 176px;
    background-position: 0 0;
    top: 78px;
    margin-left: 1500px;
    margin-top: 60px;
  }
  .message {
    height: 228px;
    width: 403px;
    padding: 35px 40px 0 40px;
    background-position: -98px 0;
    top: 28px;
    margin-left: 2000px;
    margin-top: 60px;
  }
  .block1 {
    width: 284px;
    height: 291px;
    background-position: -582px 0;
    top: 15px;
    margin-left: 2500px;
    margin-top: 60px;
  }

  &.animate-in {
    .number {
      margin-left: -457px;
      margin-top: 0;
    }
    .message {
      margin-left: -322px;
      margin-top: 0;
      transition-delay: .1s;
    }
    .block1 {
      margin-left: 167px;
      margin-top: 0;
      transition-delay: .2s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -4500px;
      margin-top: 60px;
    }
    .message {
      margin-left: -3000px;
      margin-top: 60px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 60px;
    }
  }
}

/* Fact =05 - Addons */
#fact05 {
  .number {
    width: 97px;
    height: 102px;
    background-position: -466px 0;
    margin-left: -120px;
  }
}
.on #fact05 {
  .number, .message, .block1, .block2, .block3, {
    background: url(/media/img/contribute/mozilla15/fact05-pads.png) no-repeat;
  }
  .number {
    width: 96px;
    height: 103px;
    background-position: 0 0;
    top: 87px;
    margin-top: -40px;
    margin-left: 1020px;
  }
  .message {
    width: 398px;
    height: 237px;
    padding: 30px 40px 0 40px;
    background-position: -96px 0;
    top: 46px;
    margin-left: 1500px;
  }
  .block1 {
    width: 316px;
    height: 95px;
    background-position: -574px 0;
    top: 30px;
    margin-left: 2300px;
    margin-top: -40px;
  }
  .block2 {
    width: 316px;
    height: 105px;
    background-position: -574px -95px;
    top: 122px;
    margin-left: 2800px;
  }
  .block3 {
    width: 316px;
    height: 95px;
    background-position: -574px -200px;
    top: 223px;
    margin-left: 3300px;
    margin-top: 40px;
  }

  &.animate-in {
    .number {
      margin-top: 0;
      margin-left: -461px;
    }
    .message {
      margin-left: -352px;
    }
    .block1 {
      margin-top: 0;
      margin-left: 134px;
      .transition-delay(.3s);
    }
    .block2 {
      margin-left: 134px;
      .transition-delay(.4s);
    }
    .block3 {
      margin-top: 0;
      margin-left: 134px;
      .transition-delay(.5s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -1840px;
    }
    .message {
      margin-left: -2280px;
    }
    .block1 {
      margin-left: -1205px;
    }
    .block2 {
      margin-left: -1405px;
    }
    .block3 {
      margin-left: -1605px;
    }
  }
}

/* Fact =06 - Privacy */
#fact06 {
  .number {
    width: 149px;
    height: 116px;
    background-position: -563px 0;
    margin-left: -162px;
  }
}
.on #fact06 {
  .number, .message, .block1, .keyhole {
    background: url(/media/img/contribute/mozilla15/fact06-pads.png) no-repeat;
  }
  .number {
    width: 178px;
    height: 115px;
    background-position: 0 0;
    top: 110px;
    margin-left: 1000px;
    .keyhole {
      display: block;
      width: 46px;
      height: 56px;
      position: absolute;
      z-index: 8;
      top: 25px;
      left: 108px;
      background-color: #000;
      background-image: url(/media/img/contribute/mozilla15/fact06-pads.png), url(/media/img/contribute/mozilla15/fact06-pads.png);
      background-position: 0 -117px, -86px -117px;
      .transform(rotateY(90deg));
      .transform-style(preserve-3d);
    }
  }
  .message {
    width: 349px;
    height: 240px;
    padding: 40px 130px 0 50px;
    background-position: -179px 0;
    top: 35px;
    margin-left: 1700px;
  }
  .block1 {
    width: 193px;
    height: 248px;
    background-position: -707px 0;
    top: 55px;
    margin-left: 2800px;
  }
  &.animate-in {
    .number {
      margin-left: -462px;
      margin-top: 0;
      .keyhole {
        .transform(rotateY(0deg));
        .transform-style(preserve-3d);
        -webkit-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -moz-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -o-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -ms-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
      }
      .keyhole:hover {
        background-position: 0 -117px, -86px -175px;
        .transition(background-position .6s ease-in-out 2s);
      }
    }
    .message {
      margin-left: -270px;
    }
    .block1 {
      margin-left: 268px;
    }
  }
  &.animate-out {
    .number {
      margin-left: -3200px;
      .keyhole {
        .transform(rotateY(0deg));
      }
    }
    .message {
      margin-left: -2600px;
    }
    .block1 {
      margin-left: -1800px;
    }
  }
}

/* Fact =07 - l10n */
#fact07 {
  .number {
    width: 124px;
    height: 143px;
    background-position: 0 -138px;
    margin-left: -142px;
  }
}
.on #fact07 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact07-pads.png) no-repeat;
  }
  .number {
    background-position: 0 0;
    top: 138px;
    margin-left: 1200px;
  }
  .message {
    width: 392px;
    height: 222px;
    padding: 50px 40px 0 40px;
    background-position: -124px 0;
    top: 32px;
    margin-left: 1800px;
  }
  .block1 {
    width: 319px;
    height: 225px;
    background-position: -596px 0;
    top: 74px;
    margin-left: 2200px;
  }
  &.animate-in {
    .number {
      margin-left: -463px;
    }
    .message {
      margin-left: -333px;
    }
    .block1 {
      margin-left: 142px;
    }
  }
  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
  }
}

/* Fact =08 - world record */
#fact08 {
  .number {
    width: 91px;
    height: 118px;
    background-position: -138px -143px;
    margin-left: -118px;
  }
}
.on #fact08 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact08-pads.png) no-repeat;
  }
  .number {
    width: 90px;
    height: 117px;
    background-position: -182px 0;
    top: 56px;
    margin-left: 1600px;
  }
  .message {
    width: 378px;
    height: 227px;
    padding: 40px 40px 0 40px;
    background-position: -273px 0;
    top: 43px;
    margin-left: 2200px;
  }
  .block1 {
    width: 182px;
    height: 229px;
    background-position: 0 0;
    top: 56px;
    margin-left: 3000px;
  }
  .block2 {
    width: 165px;
    height: 160px;
    background-position: -730px 0;
    top: 141px;
    margin-left: 1100px;
  }

  &.animate-in {
    .number {
      margin-left: -279px;
    }
    .message {
      margin-left: -164px;
    }
    .block1 {
      margin-left: -462px;
    }
    .block2 {
      margin-left: 295px;
    }
  }

  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1600px;
    }
    .block1 {
      margin-left: -3000px;
    }
    .block2 {
      margin-left: -1900px;
    }
  }
}

/* Fact =09 - Mozfest */
#fact09 {
  .number {
    width: 139px;
    height: 127px;
    background-position: -229px -143px;
  }
}
.on #fact09 {
  .number, .message, .block1, .block2, .logo, .logo span {
    background: url(/media/img/contribute/mozilla15/fact09-pads.png) no-repeat;
  }
  .number {
    width: 138px;
    height: 125px;
    background-position: 0 0;
    top: 55px;
    margin-left: 1200px;
  }
  .message {
    width: 368px;
    height: 241px;
    padding: 40px 40px 0 40px;
    background-position: -138px 0;
    top: 25px;
    margin-left: 1800px;
  }
  .block1 {
    width: 100px;
    height: 258px;
    background-position: -586px 0;
    top: 54px;
    margin-left: 2200px;
  }
  .block2 {
    width: 172px;
    height: 265px;
    background-position: -686px 0;
    top: 54px;
    margin-left: 2900px;
  }
  .logo {
    display: block;
    width: 75px;
    height: 75px;
    background-position: 0 -128px;
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 202px;
    margin-left: 220px;
    margin-top: 500px;
    opacity: 0;
    span {
      content: "";
      position: absolute;
      left: -15px;
      top: -15px;
      display: block;
      width: 106px;
      height: 106px;
      background-position: 0 -205px;
      .animation(fact09-logo-spin 10s linear infinite);
      .transform-origin(center center);
    }
  }

  &.animate-in {
    .number {
      margin-left: -454px;
    }
    .message {
      margin-left: -273px;
    }
    .block1 {
      margin-left: 188px;
    }
    .block2 {
      margin-left: 282px;
    }
    .logo {
      opacity: 1;
      margin-top: 0;
      -moz-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -ms-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -o-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -webkit-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2600px;
    }
    .block1 {
      margin-left: -2000px;
    }
    .block2 {
      margin-left: -1800px;
    }
    .logo {
      margin-top: 500px;
      -moz-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -ms-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -o-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -webkit-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
    }
  }
}
@-moz-keyframes fact09-logo-spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes fact09-logo-spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}
@-o-keyframes fact09-logo-spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}
@-webkit-keyframes fact09-logo-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes fact09-logo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fact =10 - Webmaker */
#fact10 {
  .number {
    width: 111px;
    height: 118px;
    background-position: -368px -143px;
  }
}
.on #fact10 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact10-pads.png) no-repeat;
  }
  .number {
    width: 112px;
    height: 119px;
    top: 22px;
    background-position: 0 0;
    margin-left: 1200px;
  }
  .message {
    width: 398px;
    height: 200px;
    padding: 56px 40px 0 40px;
    top: 26px;
    background-position: -112px 0;
    margin-left: 1800px;
  }
  .block1 {
    width: 315px;
    height: 150px;
    top: 40px;
    background-position: -590px 0;
    margin-left: 2200px;
  }
  .block2 {
    width: 315px;
    height: 140px;
    top: 186px;
    background-position: -590px -150px;
    margin-left: 3000px;
  }

  &.animate-in {
    .number {
      margin-left: -458px;
    }
    .message {
      margin-left: -342px;
    }
    .block1 {
      margin-left: 143px;
      -moz-transition-delay: .8s, .2s;
      -ms-transition-delay: .8s, .2s;
      -o-transition-delay: .8s, .2s;
      -webkit-transition-delay: .8s, .2s;
      transition-delay: .8s, .2s;
    }
    .block2 {
      margin-left: 140px;
      -moz-transition-delay: .8s, .4s;
      -ms-transition-delay: .8s, .4s;
      -o-transition-delay: .8s, .4s;
      -webkit-transition-delay: .8s, .4s;
      transition-delay: .8s, .4s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2600px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
    .block1 {
      margin-left: -2000px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
    .block2 {
      margin-left: -1800px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
  }
}

/* Fact =11 - WebFWD */
#fact11 {
  .number {
    width: 125px;
    height: 142px;
    background-position: -479px -143px;
    margin-left: -141px;
  }
}
.on #fact11 {
  .number, .message, .block1, .logo {
    background: url(/media/img/contribute/mozilla15/fact11-pads.png) no-repeat;
  }
  .number {
    width: 123px;
    height: 143px;
    background-position: 0 0;
    top: 85px;
    margin-left: 2200px;
    .transition-duration(2s);
  }
  .message {
    width: 435px;
    height: 230px;
    padding: 40px 40px 0 40px;
    background-position: -135px 0;
    top: 48px;
    margin-left: 3000px;
    .transition-duration(2s);
  }
  .block1 {
    width: 211px;
    height: 227px;
    background-position: -650px 0;
    top: 22px;
    margin-top: 90px;
    margin-left: 4000px;
  }
  .logo {
    display: block;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 100px;
    z-index: 15;
    width: 135px;
    height: 176px;
    background-position: 0 -144px;
    margin-left: -2200px;
    -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
  }

  &.animate-in {
    .number {
      margin-left: -455px;
    }
    .message {
      margin-left: -302px;
    }
    .block1 {
      margin-left: 220px;
      margin-top: 0;
    }
    .logo {
      opacity: 1;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87));
      .animation(fact11-logo-in 2s forwards 1s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2690px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: -60px;
    }
    .logo {
      opacity: 0;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87));
      .animation(fact11-logo-out 1s forwards);
    }
  }
}
@-webkit-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-moz-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-o-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-ms-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}

@-webkit-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-moz-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-o-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-ms-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}

/* Fact =12 - MDN */
#fact12 {
  .number {
    width: 138px;
    height: 127px;
    background-position: -604px -143px;
  }
}
.on #fact12 {
  .number, .message, .block1, .block2, .stars, .rocket {
    background: url(/media/img/contribute/mozilla15/fact12-pads.png) no-repeat;
  }
  .number {
    width: 139px;
    height: 126px;
    background-position: 0 0;
    top: 33px;
    margin-left: 1200px;
  }
  .message {
    width: 393px;
    height: 242px;
    padding: 40px 40px 0 40px;
    background-position: -445px 0;
    top: 41px;
    margin-left: 1800px;
  }
  .block1 {
    width: 108px;
    height: 235px;
    background-position: -139px 0;
    top: 86px;
    margin-left: 2500px;
  }
  .block2 {
    width: 186px;
    height: 232px;
    background-position: -247px 0;
    top: 94px;
    margin-left: 2000px;
  }
  .stars {
    display: block;
    width: 223px;
    height: 248px;
    background-position: -222px -251px;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 97px;
    z-index: 10;
    margin-left: 2250px;
  }
  .rocket {
    display: block;
    opacity: 0;
    width: 222px;
    height: 139px;
    background-position: 0 -235px;
    position: absolute;
    left: 50%;
    top: 166px;
    z-index: 11;
    margin-left: -1900px;
    margin-top: 500px;
    .transition-duration(0s);
  }

  &.animate-in {
    .number {
      margin-left: -461px;
    }
    .message {
      margin-left: -13px;
    }
    .block1 {
      margin-left: -322px;
    }
    .block2 {
      margin-left: -218px;
    }
    .stars {
      opacity: 1;
      margin-left: -295px;
      .animation(fact12-stars-spin 90s linear infinite);
      .transform-origin(center center);
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
    }
    .rocket {
      opacity: 1;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) .8s);
      .animation(fact12-rocket-in 1.2s .8s forwards);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3000px;
    }
    .message {
      margin-left: -2500px;
    }
    .block1 {
      margin-left: -2000px;
    }
    .block2 {
      margin-left: -1500px;
    }
    .stars {
      opacity: 0;
      margin-left: -1200px;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      .animation(fact12-stars-spin 90s linear);
    }
    .rocket {
      opacity: 0;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) 1s);
      .animation(fact12-rocket-out 1.4s 0s forwards);
    }
  }
}
@-webkit-keyframes fact12-stars-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes fact12-stars-spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes fact12-stars-spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}
@-ms-keyframes fact12-stars-spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}
@keyframes fact12-stars-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-moz-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-o-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-ms-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}

@-webkit-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-moz-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-ms-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-o-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}

/* Fact =13 - <3 the web */
#fact13 {
  .number {
    width: 110px;
    height: 108px;
    background-position: 0 -287px;
  }
}
.on #fact13 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact13-pads.png) no-repeat;
  }
  .number {
    width: 109px;
    height: 108px;
    background-position: 0 0;
    top: 118px;
    margin-left: 1200px;
  }
  .message {
    width: 319px;
    height: 178px;
    padding: 55px 40px 0 40px;
    background-position: -109px 0;
    top: 42px;
    margin-left: 1800px;
  }
  .block1 {
    width: 197px;
    height: 282px;
    background-position: -508px 0;
    top: 32px;
    margin-left: 2200px;
  }

  &.animate-in {
    .number {
      margin-left: -381px;
    }
    .message {
      margin-left: -240px;
    }
    .block1 {
      margin-left: 167px;
      .transition-delay(.1s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
  }
}

/* Fact =14 - Firefox OS */
#fact14 {
  .number {
    width: 97px;
    height: 106px;
    background-position: -110px -287px;
    margin-left: -122px;
  }
}
.on #fact14 {
  .number, .message, .block1, .block2, .shadow, .phone, .fox {
    background: url(/media/img/contribute/mozilla15/fact14-pads.png) no-repeat;
  }
  .shadow, .phone, .fox {
    display: block;
    position: absolute;
    left: 50%;
  }
  .number {
    width: 97px;
    height: 106px;
    background-position: 0 0;
    top: 214px;
    margin-left: 1200px;
  }
  .message {
    width: 375px;
    height: 232px;
    padding: 30px 50px 0 30px;
    background-position: -97px 0;
    top: 36px;
    margin-left: 1800px;
  }
  .block1 {
    width: 167px;
    height: 204px;
    background-position: -552px 0;
    top: 85px;
    margin-left: 2200px;
    margin-top: 90px;
  }
  .block2 {
    width: 466px;
    height: 303px;
    background-position: -288px -261px;
    top: 23px;
    margin-left: 2305px;
    .transition-delay(0s);
  }
  .shadow {
    width: 145px;
    height: 13px;
    background-position: -130px -261px;
    z-index: 9;
    top: 297px;
    margin-top: 300px;
    margin-left: 191px;
    opacity: 0;
  }
  .phone {
    width: 130px;
    height: 245px;
    background-position: 0 -261px;
    z-index: 10;
    top: 57px;
    margin-top: -500px;
    margin-left: 199px;
    opacity: 0;
    .transition-duration(1s);
    .transition-delay(.5s);
  }
  .fox {
    width: 158px;
    height: 215px;
    background-position: -130px -274px;
    z-index: 11;
    top: 117px;
    margin-left: 2600px;
    opacity: 0;
    .transition-delay(0s);
  }

  &.animate-in {
    .number {
      margin-left: -468px;
    }
    .message {
      margin-left: -368px;
    }
    .block1 {
      margin-left: 90px;
      margin-top: 0;
      .transition-delay(.1s);
    }
    .block2 {
      margin-left: 4px;
      .transition-delay(.15s);
    }
    .shadow {
      margin-top: 0;
      opacity: 1;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
    }
    .phone {
      margin-top: 0;
      opacity: 1;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
    }
    .fox {
      margin-left: 299px;
      margin-top: 0;
      opacity: 1;
      .base-animate-in;
      .transition-delay(.15s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3600px;
      margin-top: -90px;
    }
    .message {
      margin-left: -3200px;
    }
    .block1 {
      margin-left: -2900px;
      margin-top: 60px;
    }
    .block2 {
      margin-left: -2500px;
    }
    .shadow {
      margin-top: 500px;
      opacity: 0;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
    }
    .phone {
      margin-top: -500px;
      opacity: 0;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
    }
    .fox {
      opacity: 0;
      margin-left: -2201px;
      .base-animate-out;
    }
  }
}

/* Fact =15 - Thank you */
#fact15 {
  .number {
    width: 130px;
    height: 142px;
    background-position: -207px -287px;
  }
}
.on #fact15 {
  .number, .message, .block1, .block2 {
    background-image: url(/media/img/contribute/mozilla15/fact15-pads.png);
  }
  .number {
    width: 132px;
    height: 139px;
    top: 65px;
    background-position: 0 0;
    margin-left: 1200px;
    margin-top: -100px;
  }
  .message {
    width: 370px;
    height: 260px;
    top: 29px;
    background-position: -132px 0;
    padding: 40px 40px 0 40px;
    margin-left: 1800px;
    margin-top: 200px;
  }
  .block1 {
    width: 312px;
    height: 194px;
    top: 4px;
    background-position: -582px 0;
    margin-left: 2200px;
    margin-top: -200px;
  }
  .block2 {
    width: 312px;
    height: 138px;
    top: 198px;
    background-position: -582px -195px;
    margin-left: 2000px;
    margin-top: 50px;
  }
  &.animate-in {
    .number {
      margin-left: -458px;
      margin-top: 0;
    }
    .message {
      margin-left: -322px;
      margin-top: 0;
    }
    .block1 {
      margin-left: 129px;
      margin-top: 0;
    }
    .block2 {
      margin-left: 129px;
      margin-top: 0;
    }
  }
  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
    .block2 {
      margin-left: -1400px;
    }
  }
}

.on {
  /* Shift =backgrounds for each slide */
  #fact01 .back,
  #fact06 .back,
  #fact11 .back {
    background-image: url(/media/img/contribute/mozilla15/path-red.png);
    background-position: 0 50%;
  }
  #fact01.animate-in .back,
  #fact06.animate-in .back,
  #fact11.animate-in .back {
    background-position: -200px 50%;
  }
  #fact01.animate-out .back,
  #fact06.animate-out .back,
  #fact11.animate-out .back {
    background-position: -400px 50%;
  }

  #fact02 .back,
  #fact07 .back,
  #fact12 .back {
    background-image: url(/media/img/contribute/mozilla15/path-darkblue.png);
    background-position: -200px 50%;
  }
  #fact02.animate-in .back,
  #fact07.animate-in .back,
  #fact12.animate-in .back {
    background-position: -400px 50%;
  }
  #fact02.animate-out .back,
  #fact07.animate-out .back,
  #fact12.animate-out .back {
    background-position: -600px 50%;
  }

  #fact03 .back,
  #fact08 .back,
  #fact13 .back {
    background-image: url(/media/img/contribute/mozilla15/path-green.png);
    background-position: -400px 50%;
  }
  #fact03.animate-in .back,
  #fact08.animate-in .back,
  #fact13.animate-in .back {
    background-position: -600px 50%;
  }
  #fact03.animate-out .back,
  #fact08.animate-out .back,
  #fact13.animate-out .back {
    background-position: -800px 50%;
  }

  #fact04 .back,
  #fact09 .back,
  #fact14 .back {
    background-image: url(/media/img/contribute/mozilla15/path-lightblue.png);
    background-position: -600px 50%;
  }
  #fact04.animate-in .back,
  #fact09.animate-in .back,
  #fact14.animate-in .back {
    background-position: -800px 50%;
  }
  #fact04.animate-out .back,
  #fact09.animate-out .back,
  #fact14.animate-out .back {
    background-position: -1000px 50%;
  }

  #fact05 .back,
  #fact10 .back,
  #fact15 .back {
    background-image: url(/media/img/contribute/mozilla15/path-orange.png);
    background-position: -800px 50%;
  }
  #fact05.animate-in .back,
  #fact10.animate-in .back,
  #fact15.animate-in .back {
    background-position: -1000px 50%;
  }
  #fact05.animate-out .back,
  #fact10.animate-out .back,
  #fact15.animate-out .back {
    background-position: -1200px 50%;
  }
}

/* Tablet Layout: 760px */
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

  #contribute #masthead,
  #contribute .billboard,
  #opportunities,
  #moz15,
  #slideshow {
    width: @widthTablet - (@gridGutterWidth * 2);
    margin-left: auto;
    margin-right: auto;
  }

  #moz15 header {
    width: 440px;
    padding-left: 260px;
    .title {
      left: 0;
      top: 30px;
    }
  }

  #moz15 .cta {
    width: @widthTablet - (@gridGutterWidth * 2);
    p {
      width: (@gridColumnWidthNarrow * 8) + (@gridGutterWidth * 7);
    }
  }

}

/* Mobile Layout: 320px */
@media only screen and (max-width: @breakTablet) {

  #contribute #masthead,
  #contribute .billboard,
  #opportunities,
  #slideshow {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  #moz15 header {
    width: auto;
    padding: 0 20px;
    .title {
      position: static;
      margin: 0 auto 20px;
    }
    .intro {
      padding: 20px 0 0;
      border-left: 0;
      border-top: 1px solid #bebbb8;
    }
  }

  #moz15 .cta {
    width: auto;
    padding: 20px 0 0;
    margin: 20px 20px 30px;
    border-top: 1px solid #bebbb8;
    p {
      width: auto;
    }
  }

}

@media only screen and (max-width: @breakMobileLandscape) {

  #slideshow {
    .slide {
      padding: 10px 0;
      .number {
        width: auto;
        height: auto;
        text-indent: 0;
        text-align: center;
        padding: 5px 12px;
        border-radius: 25%;
        background: #ccc none;
        color: #fff;
        font-weight: bold;
        font-size: 26px;
        margin: 10px 15px 5px 0;
        box-shadow: 0 5px 0 rgba(0,0,0,.08);
      }
    }
    #fact01,
    #fact06,
    #fact11 {
      .number {
        background-color: #bf383e; /* red */
      }
    }

    #fact02,
    #fact07,
    #fact12 {
      .number {
        background-color: #1362ae; /* dark blue */
      }
    }

    #fact03,
    #fact08,
    #fact13 {
      .number {
        background-color: #86bb36; /* green */
      }
    }

    #fact04,
    #fact09,
    #fact14 {
      .number {
        background-color: #54a3dd; /* light blue */
      }
    }

    #fact05,
    #fact10,
    #fact15 {
      .number {
        background-color: #e26c33; /* orange */
      }
    }
  }

}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {

}

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@import "sandstone/lib.less";

.base-animate-in { /* Basic transitions for slide elements */
  -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
  transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1.08), margin-top 2s cubic-bezier(.6,-0.08,.6,1.08);
}

.base-animate-out { /* Same as .base-animate-in, but with a delay on the fade out */
  -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
  transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1), margin-top 2s cubic-bezier(.6,-0.08,.6,1);
}

/* No italics in Chinese/Taiwanese */
.lang-zh-TW,
.lang-zh-CN {
  #moz15 .cta p,
  #moz15 .message {
    font-style: normal;
  }
}

/* Change some container sizes for this page */
#contribute #wrapper {
  width: 100%;
}

#contribute #masthead,
#contribute .billboard,
#opportunities,
#moz15 .cta,
#slideshow {
  width: @widthDesktop - (@gridGutterWidth * 2);
  margin-left: auto;
  margin-right: auto;
}

/* Moz15 header and intro */
#moz15 header {
  position: relative;
  width: 670px;
  min-height: 170px;
  margin: 0 auto 10px;
  padding-left: 290px;
  .title {
    width: 230px;
    height: 180px;
    position: absolute;
    left: 25px;
    top: 0;
    background: transparent url(/media/img/contribute/mozilla15/moz15-mark-en.png) center center no-repeat;
    text-indent: -999em;
    overflow: hidden;
  }
  .intro {
    .open-sans-light;
    font-size: 18px;
    line-height: 1.6;
    padding: 20px 0 20px 40px;
    border-left: 1px solid #bebbb8;
  }
}

.lang-es-ES #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-es.png);
}
.lang-nl #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-nl.png);
}
.lang-fr #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-fr.png);
}
.lang-id #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-id.png);
}
.lang-zh-TW #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-zh-tw.png);
}
.lang-zh-CN #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-zh-cn.png);
}
.lang-pt-BR #moz15 .title {
  background-image: url(/media/img/contribute/mozilla15/moz15-mark-pt.png);
}

/* Moz15 call to action */
#moz15 .cta {
  width: @widthDesktop - (@gridGutterWidth * 2);
  margin: 0 auto 40px;
  text-align: center;
  h2 {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: normal;
    margin-bottom: 0.25em;
  }
  p {
    width: (@gridColumnWidth * 8) + (@gridGutterWidth * 7);
    margin: 0 auto;
    font: italic 18px 'Open Sans Light', sans-serif;
  }
}

/* =Slide show */
#slideshow-stage {
  margin-bottom: 20px;
}

.slide {
  .clearfix;
  border-top: 1px solid #d8d5d1;
  list-style: none;
  margin: 0 20px 10px;
  padding: 20px 0 0 160px;
  .number {
    opacity: 1;
    display: block;
    float: left;
    margin: 0 20px 5px -150px;
    text-indent: -999em;
    overflow: hidden;
    background: url(/media/img/contribute/mozilla15/numbers.png) no-repeat;
  }
  .message {
    opacity: 1;
    margin: 0;
    padding: 10px 10px 0;
    .open-sans-light;
    font-size: 18px;
  }
  .message p {
    margin: 0 0 10px;
  }
}

#slideshow.on {
  margin: 0 auto;
  width: 100%;
  height: 340px;
  position: relative;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  .slides {
    position: relative;
    list-style: none;
    margin: 0 auto;
    width: 100%;
    height: 340px;
    overflow: hidden;
    .slide {
      height: 100%;
      width: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      border: 0;
      > * {
        position: absolute;
        z-index: 10;
      }
      > .back {
        z-index: 1;
      }
    }
  }
}

/* Slide controls */
.slide-control {
  display: none;
}
.on .slide-control {
  display: block;
  width: @widthDesktop - (@gridGutterWidth * 2);
  height: 0;
  position: absolute;
  z-index: 999;
  left: 50%;
  top: 0;
  margin-left: -(@widthDesktop - (@gridGutterWidth * 2))/2;
  .prev,
  .next {
    position: absolute;
    top: 140px;
    opacity: .6;
    width: 44px;
    height: 60px;
    border: 0;
    background: transparent url(/media/img/contribute/mozilla15/slide-arrows.png) no-repeat;
    display: block;
    text-indent: -99em;
    cursor: pointer;
    overflow: hidden;
    -moz-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
    transition: opacity .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  }
  .prev {
    left: -10px;
    background-position: 0 0;
    &:hover,
    &:focus {
      left: -14px;
      opacity: 1;
    }
  }
  .next {
    right: -10px;
    background-position: 100% 0;
    &:hover,
    &:focus {
      right: -14px;
      opacity: 1;
    }
  }
}

/* =Base styles for all slides */
.on {
  .number, .message, .block1, .block2, .block3 {
    display: block;
    float: none;
    position: absolute;
    z-index: 5;
    opacity: 0;
    left: 50%;
    margin: 0 0 0 2000px;
  }
  .number {
    text-indent: -999em;
    overflow: hidden;
  }
  .message {
    font: italic 24px/1.15 'Open Sans Light', sans-serif;
    letter-spacing: -.025px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .message p {
    opacity: 0;
    .transition(opacity .3s ease-in 0s);
  }
  .message cite {
    font-style: normal;
  }
  .back {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    opacity: 0;
  }
}

.on {
  /* Slides going from 'ready' to 'in' */
  .animate-in {
    .number, .message, .block1, .block2, .block3 {
      opacity: 1;
      .base-animate-in;
    }
    .message p {
      opacity: 1;
      .transition(opacity .3s ease-in 1.6s);
    }
    .back {
      opacity: 1;
      -moz-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -ms-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -o-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -webkit-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
    }
  }

  /* Slides going from 'in' to 'out' */
  .animate-out {
    .number, .message, .block1, .block2, .block3 {
      opacity: 0;
      .base-animate-out;
    }
    .message p {
      opacity: 0;
      .transition(opacity .3s ease-in 1.6s);
    }
    .back {
      opacity: 0;
      -moz-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -ms-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -o-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      -webkit-transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
      transition: opacity 1.5s linear, background-position 2.6s ease-in-out;
    }
  }
}

/* Fact =01 - Launch */
#fact01 {
  .number {
    width: 139px;
    height: 125px;
    background-position: 0 0;
  }
}
.on #fact01 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact01-pads.png) no-repeat;
  }
  .number {
    width: 145px;
    height: 125px;
    top: 99px;
    background-position: 0 0;
    margin-left: 1100px;
  }
  .message {
    width: 380px;
    height: 224px;
    padding: 62px 40px 0 28px;
    border: 0;
    top: 18px;
    background-position: -150px 0;
    margin-left: 1800px;
  }
  .block1 {
    width: 226px;
    height: 270px;
    border: 0;
    top: 61px;
    background-position: -610px 0;
    margin-left: 2900px;
  }
  .block2 {
    width: 98px;
    height: 256px;
    border: 0;
    top: 61px;
    margin-left: 1190px;
    background-position: -840px 0;
    margin-left: 3800px;
  }

  &.animate-in {
   .number {
      margin-left: -460px;
    }
    .message {
      margin-left: -320px;
    }
    .block1 {
      margin-left: 124px;
    }
    .block2 {
      margin-left: 351px;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3800px;
    }
    .message {
      margin-left: -2900px;
    }
    .block1 {
      margin-left: -1800px;
    }
    .block2 {
      margin-left: -1100px;
    }
  }
}

/* Fact =02 - Firefox */
#fact02 {
  .number {
    width: 115px;
    height: 107px;
    background-position: -139px 0;
    margin-left: -135px;
  }
}
.on #fact02 {
  .number, .message, .block1, .block2, .block3 {
    background: url(/media/img/contribute/mozilla15/fact02-pads.png) no-repeat;
  }
  .number {
    width: 114px;
    height: 102px;
    background-position: 0 0;
    top: 184px;
    margin-top: 90px;
    margin-left: 1990px;
  }
  .message {
    width: 363px;
    height: 200px;
    padding: 80px 105px 0 35px;
    background-position: -151px 0;
    top: 41px;
    margin-left: 1750px;
  }
  .block1 {
    width: 151px;
    height: 75px;
    background-position: 0 -102px;
    top: 113px;
    margin-left: 2140px;
    margin-top: -90px;
  }
  .block2 {
    width: 230px;
    height: 83px;
    background-position: -654px 0;
    top: 47px;
    margin-left: 2640px;
  }
  .block3 {
    width: 230px;
    height: 185px;
    background-position: -654px -83px;
    top: 126px;
    margin-left: 2880px;
    margin-top: 120px;
  }
  .logo {
    display: block;
    position: absolute;
    z-index: 10;
    opacity: 0;
    top: -250px;
    left: 50%;
    margin-left: -446px;
    width: 132px;
    height: 152px;
    background: transparent url(/media/img/contribute/mozilla15/fxlogo.png) no-repeat;
    .transition(opacity .25s ease-in);
  }

  &.animate-in {
   .number {
      margin-left: -412px;
      margin-top: 0;
    }
    .message {
      margin-left: -290px;
    }
    .block1 {
      margin-left: -457px;
      margin-top: 0;
    }
    .block2 {
      margin-left: 216px;
    }
    .block3 {
      margin-left: 216px;
      margin-top: 0;
    }
    .logo {
      top: -150px;
      opacity: 1;
      .transition(opacity .25s ease-in 1.5s);
    	.animation(fact02-logo-in 1.5s 1.8s forwards);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3000px;
    }
    .message {
      margin-left: -2500px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 0;
    }
    .block2 {
      margin-left: -1850px;
    }
    .block3 {
      margin-left: -1500px;
    }
    .logo {
      top: 41px;
      opacity: 0;
      .transition(opacity .25s ease-in .6s);
      .animation(fact02-logo-out 1s .4s forwards);
    }
  }
}

@-webkit-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-o-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-ms-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@-moz-keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}
@keyframes fact02-logo-in {
  0% { top: -250px; }
  30% { top: 50px; }
  40% { top: 30px; }
  50% { top: 41px; }
  100% { top: 41px; }
}

@-webkit-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-o-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-ms-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@-moz-keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}
@keyframes fact02-logo-out {
  0% { top: 41px; }
  10% { top: 30px }
  20% { top: 50px; }
  70%, 100% { top: 400px; }
}

/* Fact =03 - NY Times */
#fact03 {
  .number {
    width: 115px;
    height: 127px;
    background-position: -253px 0;
    margin-left: -128px;
  }
}
.on #fact03 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact03-pads.png) no-repeat;
  }
  .number {
    width: 119px;
    height: 129px;
    top: 140px;
    background-position: 0 0;
    margin-left: 1500px;
  }
  .message {
    height: 242px;
    width: 440px;
    padding: 40px 55px 0 35px;
    top: 35px;
    background-position: -120px 0;
    margin-left: 2000px;
  }
  .block1 {
    width: 208px;
    height: 228px;
    top: 22px;
    background-position: -652px 0;
    margin-left: 2500px;
    margin-top: 50px;
  }

  &.animate-in {
    .number {
      margin-left: -445px;
    }
    .message {
      margin-left: -297px;
    }
    .block1 {
      margin-left: 234px;
      margin-top: 0;
    }
  }

  &.animate-out {
    .number {
      margin-left: -4000px;
    }
    .message {
      margin-left: -3000px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 90px;
    }
  }
}

/* Fact =04 - Global community */
#fact04 {
  .number {
    width: 98px;
    height: 143px;
    background-position: -368px 0;
    margin-left: -135px;
  }
}
.on #fact04 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact04-pads.png) no-repeat;
  }
  .number {
    width: 98px;
    height: 176px;
    background-position: 0 0;
    top: 78px;
    margin-left: 1500px;
    margin-top: 60px;
  }
  .message {
    height: 228px;
    width: 403px;
    padding: 35px 40px 0 40px;
    background-position: -98px 0;
    top: 28px;
    margin-left: 2000px;
    margin-top: 60px;
  }
  .block1 {
    width: 284px;
    height: 291px;
    background-position: -582px 0;
    top: 15px;
    margin-left: 2500px;
    margin-top: 60px;
  }

  &.animate-in {
    .number {
      margin-left: -457px;
      margin-top: 0;
    }
    .message {
      margin-left: -322px;
      margin-top: 0;
      transition-delay: .1s;
    }
    .block1 {
      margin-left: 167px;
      margin-top: 0;
      transition-delay: .2s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -4500px;
      margin-top: 60px;
    }
    .message {
      margin-left: -3000px;
      margin-top: 60px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: 60px;
    }
  }
}

/* Fact =05 - Addons */
#fact05 {
  .number {
    width: 97px;
    height: 102px;
    background-position: -466px 0;
    margin-left: -120px;
  }
}
.on #fact05 {
  .number, .message, .block1, .block2, .block3, {
    background: url(/media/img/contribute/mozilla15/fact05-pads.png) no-repeat;
  }
  .number {
    width: 96px;
    height: 103px;
    background-position: 0 0;
    top: 87px;
    margin-top: -40px;
    margin-left: 1020px;
  }
  .message {
    width: 398px;
    height: 237px;
    padding: 30px 40px 0 40px;
    background-position: -96px 0;
    top: 46px;
    margin-left: 1500px;
  }
  .block1 {
    width: 316px;
    height: 95px;
    background-position: -574px 0;
    top: 30px;
    margin-left: 2300px;
    margin-top: -40px;
  }
  .block2 {
    width: 316px;
    height: 105px;
    background-position: -574px -95px;
    top: 122px;
    margin-left: 2800px;
  }
  .block3 {
    width: 316px;
    height: 95px;
    background-position: -574px -200px;
    top: 223px;
    margin-left: 3300px;
    margin-top: 40px;
  }

  &.animate-in {
    .number {
      margin-top: 0;
      margin-left: -461px;
    }
    .message {
      margin-left: -352px;
    }
    .block1 {
      margin-top: 0;
      margin-left: 134px;
      .transition-delay(.3s);
    }
    .block2 {
      margin-left: 134px;
      .transition-delay(.4s);
    }
    .block3 {
      margin-top: 0;
      margin-left: 134px;
      .transition-delay(.5s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -1840px;
    }
    .message {
      margin-left: -2280px;
    }
    .block1 {
      margin-left: -1205px;
    }
    .block2 {
      margin-left: -1405px;
    }
    .block3 {
      margin-left: -1605px;
    }
  }
}

/* Fact =06 - Privacy */
#fact06 {
  .number {
    width: 149px;
    height: 116px;
    background-position: -563px 0;
    margin-left: -162px;
  }
}
.on #fact06 {
  .number, .message, .block1, .keyhole {
    background: url(/media/img/contribute/mozilla15/fact06-pads.png) no-repeat;
  }
  .number {
    width: 178px;
    height: 115px;
    background-position: 0 0;
    top: 110px;
    margin-left: 1000px;
    .keyhole {
      display: block;
      width: 46px;
      height: 56px;
      position: absolute;
      z-index: 8;
      top: 25px;
      left: 108px;
      background-color: #000;
      background-image: url(/media/img/contribute/mozilla15/fact06-pads.png), url(/media/img/contribute/mozilla15/fact06-pads.png);
      background-position: 0 -117px, -86px -117px;
      .transform(rotateY(90deg));
      .transform-style(preserve-3d);
    }
  }
  .message {
    width: 349px;
    height: 240px;
    padding: 40px 130px 0 50px;
    background-position: -179px 0;
    top: 35px;
    margin-left: 1700px;
  }
  .block1 {
    width: 193px;
    height: 248px;
    background-position: -707px 0;
    top: 55px;
    margin-left: 2800px;
  }
  &.animate-in {
    .number {
      margin-left: -462px;
      margin-top: 0;
      .keyhole {
        .transform(rotateY(0deg));
        .transform-style(preserve-3d);
        -webkit-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -moz-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -o-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        -ms-transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
        transition: transform 0.4s ease-in-out 2.6s, background-position 1s ease-in-out 0.5s;
      }
      .keyhole:hover {
        background-position: 0 -117px, -86px -175px;
        .transition(background-position .6s ease-in-out 2s);
      }
    }
    .message {
      margin-left: -270px;
    }
    .block1 {
      margin-left: 268px;
    }
  }
  &.animate-out {
    .number {
      margin-left: -3200px;
      .keyhole {
        .transform(rotateY(0deg));
      }
    }
    .message {
      margin-left: -2600px;
    }
    .block1 {
      margin-left: -1800px;
    }
  }
}

/* Fact =07 - l10n */
#fact07 {
  .number {
    width: 124px;
    height: 143px;
    background-position: 0 -138px;
    margin-left: -142px;
  }
}
.on #fact07 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact07-pads.png) no-repeat;
  }
  .number {
    background-position: 0 0;
    top: 138px;
    margin-left: 1200px;
  }
  .message {
    width: 392px;
    height: 222px;
    padding: 50px 40px 0 40px;
    background-position: -124px 0;
    top: 32px;
    margin-left: 1800px;
  }
  .block1 {
    width: 319px;
    height: 225px;
    background-position: -596px 0;
    top: 74px;
    margin-left: 2200px;
  }
  &.animate-in {
    .number {
      margin-left: -463px;
    }
    .message {
      margin-left: -333px;
    }
    .block1 {
      margin-left: 142px;
    }
  }
  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
  }
}

/* Fact =08 - world record */
#fact08 {
  .number {
    width: 91px;
    height: 118px;
    background-position: -138px -143px;
    margin-left: -118px;
  }
}
.on #fact08 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact08-pads.png) no-repeat;
  }
  .number {
    width: 90px;
    height: 117px;
    background-position: -182px 0;
    top: 56px;
    margin-left: 1600px;
  }
  .message {
    width: 378px;
    height: 227px;
    padding: 40px 40px 0 40px;
    background-position: -273px 0;
    top: 43px;
    margin-left: 2200px;
  }
  .block1 {
    width: 182px;
    height: 229px;
    background-position: 0 0;
    top: 56px;
    margin-left: 3000px;
  }
  .block2 {
    width: 165px;
    height: 160px;
    background-position: -730px 0;
    top: 141px;
    margin-left: 1100px;
  }

  &.animate-in {
    .number {
      margin-left: -279px;
    }
    .message {
      margin-left: -164px;
    }
    .block1 {
      margin-left: -462px;
    }
    .block2 {
      margin-left: 295px;
    }
  }

  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1600px;
    }
    .block1 {
      margin-left: -3000px;
    }
    .block2 {
      margin-left: -1900px;
    }
  }
}

/* Fact =09 - Mozfest */
#fact09 {
  .number {
    width: 139px;
    height: 127px;
    background-position: -229px -143px;
  }
}
.on #fact09 {
  .number, .message, .block1, .block2, .logo, .logo span {
    background: url(/media/img/contribute/mozilla15/fact09-pads.png) no-repeat;
  }
  .number {
    width: 138px;
    height: 125px;
    background-position: 0 0;
    top: 55px;
    margin-left: 1200px;
  }
  .message {
    width: 368px;
    height: 241px;
    padding: 40px 40px 0 40px;
    background-position: -138px 0;
    top: 25px;
    margin-left: 1800px;
  }
  .block1 {
    width: 100px;
    height: 258px;
    background-position: -586px 0;
    top: 54px;
    margin-left: 2200px;
  }
  .block2 {
    width: 172px;
    height: 265px;
    background-position: -686px 0;
    top: 54px;
    margin-left: 2900px;
  }
  .logo {
    display: block;
    width: 75px;
    height: 75px;
    background-position: 0 -128px;
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 202px;
    margin-left: 220px;
    margin-top: 500px;
    opacity: 0;
    span {
      content: "";
      position: absolute;
      left: -15px;
      top: -15px;
      display: block;
      width: 106px;
      height: 106px;
      background-position: 0 -205px;
      .animation(fact09-logo-spin 10s linear infinite);
      .transform-origin(center center);
    }
  }

  &.animate-in {
    .number {
      margin-left: -454px;
    }
    .message {
      margin-left: -273px;
    }
    .block1 {
      margin-left: 188px;
    }
    .block2 {
      margin-left: 282px;
    }
    .logo {
      opacity: 1;
      margin-top: 0;
      -moz-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -ms-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -o-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      -webkit-transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
      transition: opacity .5s ease-in 1.5s, margin-top 1.6s cubic-bezier(.64,.01,.72,1.25) .8s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2600px;
    }
    .block1 {
      margin-left: -2000px;
    }
    .block2 {
      margin-left: -1800px;
    }
    .logo {
      margin-top: 500px;
      -moz-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -ms-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -o-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      -webkit-transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
      transition: opacity .5s ease-in .5s, margin-top 1.6s cubic-bezier(.2,-0.2,.83,.67) .25s;
    }
  }
}
@-moz-keyframes fact09-logo-spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes fact09-logo-spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}
@-o-keyframes fact09-logo-spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}
@-webkit-keyframes fact09-logo-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes fact09-logo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fact =10 - Webmaker */
#fact10 {
  .number {
    width: 111px;
    height: 118px;
    background-position: -368px -143px;
  }
}
.on #fact10 {
  .number, .message, .block1, .block2 {
    background: url(/media/img/contribute/mozilla15/fact10-pads.png) no-repeat;
  }
  .number {
    width: 112px;
    height: 119px;
    top: 22px;
    background-position: 0 0;
    margin-left: 1200px;
  }
  .message {
    width: 398px;
    height: 200px;
    padding: 56px 40px 0 40px;
    top: 26px;
    background-position: -112px 0;
    margin-left: 1800px;
  }
  .block1 {
    width: 315px;
    height: 150px;
    top: 40px;
    background-position: -590px 0;
    margin-left: 2200px;
  }
  .block2 {
    width: 315px;
    height: 140px;
    top: 186px;
    background-position: -590px -150px;
    margin-left: 3000px;
  }

  &.animate-in {
    .number {
      margin-left: -458px;
    }
    .message {
      margin-left: -342px;
    }
    .block1 {
      margin-left: 143px;
      -moz-transition-delay: .8s, .2s;
      -ms-transition-delay: .8s, .2s;
      -o-transition-delay: .8s, .2s;
      -webkit-transition-delay: .8s, .2s;
      transition-delay: .8s, .2s;
    }
    .block2 {
      margin-left: 140px;
      -moz-transition-delay: .8s, .4s;
      -ms-transition-delay: .8s, .4s;
      -o-transition-delay: .8s, .4s;
      -webkit-transition-delay: .8s, .4s;
      transition-delay: .8s, .4s;
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2600px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
    .block1 {
      margin-left: -2000px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
    .block2 {
      margin-left: -1800px;
      -moz-transition-delay: .8s, 0s;
      -ms-transition-delay: .8s, 0s;
      -o-transition-delay: .8s, 0s;
      -webkit-transition-delay: .8s, 0s;
      transition-delay: .8s, 0s;
    }
  }
}

/* Fact =11 - WebFWD */
#fact11 {
  .number {
    width: 125px;
    height: 142px;
    background-position: -479px -143px;
    margin-left: -141px;
  }
}
.on #fact11 {
  .number, .message, .block1, .logo {
    background: url(/media/img/contribute/mozilla15/fact11-pads.png) no-repeat;
  }
  .number {
    width: 123px;
    height: 143px;
    background-position: 0 0;
    top: 85px;
    margin-left: 2200px;
    .transition-duration(2s);
  }
  .message {
    width: 435px;
    height: 230px;
    padding: 40px 40px 0 40px;
    background-position: -135px 0;
    top: 48px;
    margin-left: 3000px;
    .transition-duration(2s);
  }
  .block1 {
    width: 211px;
    height: 227px;
    background-position: -650px 0;
    top: 22px;
    margin-top: 90px;
    margin-left: 4000px;
  }
  .logo {
    display: block;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 100px;
    z-index: 15;
    width: 135px;
    height: 176px;
    background-position: 0 -144px;
    margin-left: -2200px;
    -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
    transition: opacity 1s cubic-bezier(.86,.01,.86,.87), margin-left 2s cubic-bezier(.6,-0.08,.6,1);
  }

  &.animate-in {
    .number {
      margin-left: -455px;
    }
    .message {
      margin-left: -302px;
    }
    .block1 {
      margin-left: 220px;
      margin-top: 0;
    }
    .logo {
      opacity: 1;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87));
      .animation(fact11-logo-in 2s forwards 1s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3200px;
    }
    .message {
      margin-left: -2690px;
    }
    .block1 {
      margin-left: -2000px;
      margin-top: -60px;
    }
    .logo {
      opacity: 0;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87));
      .animation(fact11-logo-out 1s forwards);
    }
  }
}
@-webkit-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-moz-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-o-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@-ms-keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}
@keyframes fact11-logo-in {
  0% { margin-left: -2000px; }
  100% { margin-left: 270px; }
}

@-webkit-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-moz-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-o-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@-ms-keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}
@keyframes fact11-logo-out {
  0% { margin-left: 270px; }
  100% { margin-left: 2000px; }
}

/* Fact =12 - MDN */
#fact12 {
  .number {
    width: 138px;
    height: 127px;
    background-position: -604px -143px;
  }
}
.on #fact12 {
  .number, .message, .block1, .block2, .stars, .rocket {
    background: url(/media/img/contribute/mozilla15/fact12-pads.png) no-repeat;
  }
  .number {
    width: 139px;
    height: 126px;
    background-position: 0 0;
    top: 33px;
    margin-left: 1200px;
  }
  .message {
    width: 393px;
    height: 242px;
    padding: 40px 40px 0 40px;
    background-position: -445px 0;
    top: 41px;
    margin-left: 1800px;
  }
  .block1 {
    width: 108px;
    height: 235px;
    background-position: -139px 0;
    top: 86px;
    margin-left: 2500px;
  }
  .block2 {
    width: 186px;
    height: 232px;
    background-position: -247px 0;
    top: 94px;
    margin-left: 2000px;
  }
  .stars {
    display: block;
    width: 223px;
    height: 248px;
    background-position: -222px -251px;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 97px;
    z-index: 10;
    margin-left: 2250px;
  }
  .rocket {
    display: block;
    opacity: 0;
    width: 222px;
    height: 139px;
    background-position: 0 -235px;
    position: absolute;
    left: 50%;
    top: 166px;
    z-index: 11;
    margin-left: -1900px;
    margin-top: 500px;
    .transition-duration(0s);
  }

  &.animate-in {
    .number {
      margin-left: -461px;
    }
    .message {
      margin-left: -13px;
    }
    .block1 {
      margin-left: -322px;
    }
    .block2 {
      margin-left: -218px;
    }
    .stars {
      opacity: 1;
      margin-left: -295px;
      .animation(fact12-stars-spin 90s linear infinite);
      .transform-origin(center center);
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
    }
    .rocket {
      opacity: 1;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) .8s);
      .animation(fact12-rocket-in 1.2s .8s forwards);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3000px;
    }
    .message {
      margin-left: -2500px;
    }
    .block1 {
      margin-left: -2000px;
    }
    .block2 {
      margin-left: -1500px;
    }
    .stars {
      opacity: 0;
      margin-left: -1200px;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-left 2s cubic-bezier(.6,-0.08,.6,1) 0s;
      .animation(fact12-stars-spin 90s linear);
    }
    .rocket {
      opacity: 0;
      .transition(opacity 1s cubic-bezier(.86,.01,.86,.87) 1s);
      .animation(fact12-rocket-out 1.4s 0s forwards);
    }
  }
}
@-webkit-keyframes fact12-stars-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes fact12-stars-spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes fact12-stars-spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}
@-ms-keyframes fact12-stars-spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}
@keyframes fact12-stars-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-moz-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-o-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@-ms-keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}
@keyframes fact12-rocket-in {
  0% { margin-left: -2600px; margin-top: 700px; }
  100% { margin-left: -287px; margin-top: 0; }
}

@-webkit-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-moz-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-ms-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@-o-keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}
@keyframes fact12-rocket-out {
  0% { margin-left: -287px; margin-top: 0; }
  100% { margin-left: 1200px; margin-top: -600px; }
}

/* Fact =13 - <3 the web */
#fact13 {
  .number {
    width: 110px;
    height: 108px;
    background-position: 0 -287px;
  }
}
.on #fact13 {
  .number, .message, .block1 {
    background: url(/media/img/contribute/mozilla15/fact13-pads.png) no-repeat;
  }
  .number {
    width: 109px;
    height: 108px;
    background-position: 0 0;
    top: 118px;
    margin-left: 1200px;
  }
  .message {
    width: 319px;
    height: 178px;
    padding: 55px 40px 0 40px;
    background-position: -109px 0;
    top: 42px;
    margin-left: 1800px;
  }
  .block1 {
    width: 197px;
    height: 282px;
    background-position: -508px 0;
    top: 32px;
    margin-left: 2200px;
  }

  &.animate-in {
    .number {
      margin-left: -381px;
    }
    .message {
      margin-left: -240px;
    }
    .block1 {
      margin-left: 167px;
      .transition-delay(.1s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
  }
}

/* Fact =14 - Firefox OS */
#fact14 {
  .number {
    width: 97px;
    height: 106px;
    background-position: -110px -287px;
    margin-left: -122px;
  }
}
.on #fact14 {
  .number, .message, .block1, .block2, .shadow, .phone, .fox {
    background: url(/media/img/contribute/mozilla15/fact14-pads.png) no-repeat;
  }
  .shadow, .phone, .fox {
    display: block;
    position: absolute;
    left: 50%;
  }
  .number {
    width: 97px;
    height: 106px;
    background-position: 0 0;
    top: 214px;
    margin-left: 1200px;
  }
  .message {
    width: 375px;
    height: 232px;
    padding: 30px 50px 0 30px;
    background-position: -97px 0;
    top: 36px;
    margin-left: 1800px;
  }
  .block1 {
    width: 167px;
    height: 204px;
    background-position: -552px 0;
    top: 85px;
    margin-left: 2200px;
    margin-top: 90px;
  }
  .block2 {
    width: 466px;
    height: 303px;
    background-position: -288px -261px;
    top: 23px;
    margin-left: 2305px;
    .transition-delay(0s);
  }
  .shadow {
    width: 145px;
    height: 13px;
    background-position: -130px -261px;
    z-index: 9;
    top: 297px;
    margin-top: 300px;
    margin-left: 191px;
    opacity: 0;
  }
  .phone {
    width: 130px;
    height: 245px;
    background-position: 0 -261px;
    z-index: 10;
    top: 57px;
    margin-top: -500px;
    margin-left: 199px;
    opacity: 0;
    .transition-duration(1s);
    .transition-delay(.5s);
  }
  .fox {
    width: 158px;
    height: 215px;
    background-position: -130px -274px;
    z-index: 11;
    top: 117px;
    margin-left: 2600px;
    opacity: 0;
    .transition-delay(0s);
  }

  &.animate-in {
    .number {
      margin-left: -468px;
    }
    .message {
      margin-left: -368px;
    }
    .block1 {
      margin-left: 90px;
      margin-top: 0;
      .transition-delay(.1s);
    }
    .block2 {
      margin-left: 4px;
      .transition-delay(.15s);
    }
    .shadow {
      margin-top: 0;
      opacity: 1;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
    }
    .phone {
      margin-top: 0;
      opacity: 1;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top 1s ease-out 1.4s;
    }
    .fox {
      margin-left: 299px;
      margin-top: 0;
      opacity: 1;
      .base-animate-in;
      .transition-delay(.15s);
    }
  }

  &.animate-out {
    .number {
      margin-left: -3600px;
      margin-top: -90px;
    }
    .message {
      margin-left: -3200px;
    }
    .block1 {
      margin-left: -2900px;
      margin-top: 60px;
    }
    .block2 {
      margin-left: -2500px;
    }
    .shadow {
      margin-top: 500px;
      opacity: 0;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
    }
    .phone {
      margin-top: -500px;
      opacity: 0;
      -moz-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -ms-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -o-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      -webkit-transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
      transition: opacity 1s cubic-bezier(.86,.01,.86,.87) .8s, margin-top .7s ease-in 0s;
    }
    .fox {
      opacity: 0;
      margin-left: -2201px;
      .base-animate-out;
    }
  }
}

/* Fact =15 - Thank you */
#fact15 {
  .number {
    width: 130px;
    height: 142px;
    background-position: -207px -287px;
  }
}
.on #fact15 {
  .number, .message, .block1, .block2 {
    background-image: url(/media/img/contribute/mozilla15/fact15-pads.png);
  }
  .number {
    width: 132px;
    height: 139px;
    top: 65px;
    background-position: 0 0;
    margin-left: 1200px;
    margin-top: -100px;
  }
  .message {
    width: 370px;
    height: 260px;
    top: 29px;
    background-position: -132px 0;
    padding: 40px 40px 0 40px;
    margin-left: 1800px;
    margin-top: 200px;
  }
  .block1 {
    width: 312px;
    height: 194px;
    top: 4px;
    background-position: -582px 0;
    margin-left: 2200px;
    margin-top: -200px;
  }
  .block2 {
    width: 312px;
    height: 138px;
    top: 198px;
    background-position: -582px -195px;
    margin-left: 2000px;
    margin-top: 50px;
  }
  &.animate-in {
    .number {
      margin-left: -458px;
      margin-top: 0;
    }
    .message {
      margin-left: -322px;
      margin-top: 0;
    }
    .block1 {
      margin-left: 129px;
      margin-top: 0;
    }
    .block2 {
      margin-left: 129px;
      margin-top: 0;
    }
  }
  &.animate-out {
    .number {
      margin-left: -2200px;
    }
    .message {
      margin-left: -1690px;
    }
    .block1 {
      margin-left: -1000px;
    }
    .block2 {
      margin-left: -1400px;
    }
  }
}

.on {
  /* Shift =backgrounds for each slide */
  #fact01 .back,
  #fact06 .back,
  #fact11 .back {
    background-image: url(/media/img/contribute/mozilla15/path-red.png);
    background-position: 0 50%;
  }
  #fact01.animate-in .back,
  #fact06.animate-in .back,
  #fact11.animate-in .back {
    background-position: -200px 50%;
  }
  #fact01.animate-out .back,
  #fact06.animate-out .back,
  #fact11.animate-out .back {
    background-position: -400px 50%;
  }

  #fact02 .back,
  #fact07 .back,
  #fact12 .back {
    background-image: url(/media/img/contribute/mozilla15/path-darkblue.png);
    background-position: -200px 50%;
  }
  #fact02.animate-in .back,
  #fact07.animate-in .back,
  #fact12.animate-in .back {
    background-position: -400px 50%;
  }
  #fact02.animate-out .back,
  #fact07.animate-out .back,
  #fact12.animate-out .back {
    background-position: -600px 50%;
  }

  #fact03 .back,
  #fact08 .back,
  #fact13 .back {
    background-image: url(/media/img/contribute/mozilla15/path-green.png);
    background-position: -400px 50%;
  }
  #fact03.animate-in .back,
  #fact08.animate-in .back,
  #fact13.animate-in .back {
    background-position: -600px 50%;
  }
  #fact03.animate-out .back,
  #fact08.animate-out .back,
  #fact13.animate-out .back {
    background-position: -800px 50%;
  }

  #fact04 .back,
  #fact09 .back,
  #fact14 .back {
    background-image: url(/media/img/contribute/mozilla15/path-lightblue.png);
    background-position: -600px 50%;
  }
  #fact04.animate-in .back,
  #fact09.animate-in .back,
  #fact14.animate-in .back {
    background-position: -800px 50%;
  }
  #fact04.animate-out .back,
  #fact09.animate-out .back,
  #fact14.animate-out .back {
    background-position: -1000px 50%;
  }

  #fact05 .back,
  #fact10 .back,
  #fact15 .back {
    background-image: url(/media/img/contribute/mozilla15/path-orange.png);
    background-position: -800px 50%;
  }
  #fact05.animate-in .back,
  #fact10.animate-in .back,
  #fact15.animate-in .back {
    background-position: -1000px 50%;
  }
  #fact05.animate-out .back,
  #fact10.animate-out .back,
  #fact15.animate-out .back {
    background-position: -1200px 50%;
  }
}

/* Tablet Layout: 760px */
@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {

  #contribute #masthead,
  #contribute .billboard,
  #opportunities,
  #moz15,
  #slideshow {
    width: @widthTablet - (@gridGutterWidth * 2);
    margin-left: auto;
    margin-right: auto;
  }

  #moz15 header {
    width: 440px;
    padding-left: 260px;
    .title {
      left: 0;
      top: 30px;
    }
  }

  #moz15 .cta {
    width: @widthTablet - (@gridGutterWidth * 2);
    p {
      width: (@gridColumnWidthNarrow * 8) + (@gridGutterWidth * 7);
    }
  }

}

/* Mobile Layout: 320px */
@media only screen and (max-width: @breakTablet) {

  #contribute #masthead,
  #contribute .billboard,
  #opportunities,
  #slideshow {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  #moz15 header {
    width: auto;
    padding: 0 20px;
    .title {
      position: static;
      margin: 0 auto 20px;
    }
    .intro {
      padding: 20px 0 0;
      border-left: 0;
      border-top: 1px solid #bebbb8;
    }
  }

  #moz15 .cta {
    width: auto;
    padding: 20px 0 0;
    margin: 20px 20px 30px;
    border-top: 1px solid #bebbb8;
    p {
      width: auto;
    }
  }

}

@media only screen and (max-width: @breakMobileLandscape) {

  #slideshow {
    .slide {
      padding: 10px 0;
      .number {
        width: auto;
        height: auto;
        text-indent: 0;
        text-align: center;
        padding: 5px 12px;
        border-radius: 25%;
        background: #ccc none;
        color: #fff;
        font-weight: bold;
        font-size: 26px;
        margin: 10px 15px 5px 0;
        box-shadow: 0 5px 0 rgba(0,0,0,.08);
      }
    }
    #fact01,
    #fact06,
    #fact11 {
      .number {
        background-color: #bf383e; /* red */
      }
    }

    #fact02,
    #fact07,
    #fact12 {
      .number {
        background-color: #1362ae; /* dark blue */
      }
    }

    #fact03,
    #fact08,
    #fact13 {
      .number {
        background-color: #86bb36; /* green */
      }
    }

    #fact04,
    #fact09,
    #fact14 {
      .number {
        background-color: #54a3dd; /* light blue */
      }
    }

    #fact05,
    #fact10,
    #fact15 {
      .number {
        background-color: #e26c33; /* orange */
      }
    }
  }

}

/* Wide Mobile Layout: 480px */
@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {

}