/* Slide 1. Credit and debt | Floater Animation | START */
.floater {
  animation: floateranimate linear 20s;
  animation-iteration-count: infinite;
  transform-origin: 50% 100%;
  -webkit-animation: floateranimate linear 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 100%;
  -moz-animation: floateranimate linear 20s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 100%;
  -o-animation: floateranimate linear 20s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 100%;
  -ms-animation: floateranimate linear 20s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 100%;
}

@keyframes floateranimate{
  0% {
    transform:  rotate(-9deg) ;
  }
  50% {
    transform:  rotate(11deg) ;
  }
  100% {
    transform:  rotate(-9deg) ;
  }
}

@-moz-keyframes floateranimate{
  0% {
    -moz-transform:  rotate(-9deg) ;
  }
  50% {
    -moz-transform:  rotate(11deg) ;
  }
  100% {
    -moz-transform:  rotate(-9deg) ;
  }
}

@-webkit-keyframes floateranimate {
  0% {
    -webkit-transform:  rotate(-9deg) ;
  }
  50% {
    -webkit-transform:  rotate(11deg) ;
  }
  100% {
    -webkit-transform:  rotate(-9deg) ;
  }
}

@-o-keyframes floateranimate {
  0% {
    -o-transform:  rotate(-9deg) ;
  }
  50% {
    -o-transform:  rotate(11deg) ;
  }
  100% {
    -o-transform:  rotate(-9deg) ;
  }
}

@-ms-keyframes floateranimate {
  0% {
    -ms-transform:  rotate(-9deg) ;
  }
  50% {
    -ms-transform:  rotate(11deg) ;
  }
  100% {
    -ms-transform:  rotate(-9deg) ;
  }
}
/* Slide 1. Credit and debt | Floater Animation | END */



/* Slide 2. Interest: Mobile Sizing | Rollercoaster Animation | START */
.rollercoaster{
  animation: rollercoaster ease-out 8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: rollercoaster ease-out 8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: rollercoaster ease-out 8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: rollercoaster ease-out 8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: rollercoaster ease-out 8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes rollercoaster{
  0% {
    transform:  translate(-545px,371px)  ;
  }
  100% {
    transform:  translate(1px,0px)  ;
  }
}

@-moz-keyframes rollercoaster{
  0% {
    -moz-transform:  translate(-545px,371px)  ;
  }
  100% {
    -moz-transform:  translate(1px,0px)  ;
  }
}

@-webkit-keyframes rollercoaster {
  0% {
    -webkit-transform:  translate(-545px,371px)  ;
  }
  100% {
    -webkit-transform:  translate(1px,0px)  ;
  }
}

@-o-keyframes rollercoaster {
  0% {
    -o-transform:  translate(-545px,371px)  ;
  }
  100% {
    -o-transform:  translate(1px,0px)  ;
  }
}

@-ms-keyframes rollercoaster {
  0% {
    -ms-transform:  translate(-545px,371px)  ;
  }
  100% {
    -ms-transform:  translate(1px,0px)  ;
  }
}
/* Slide 2. Interest: Mobile Sizing | Rollercoaster Animation | END */



/* Slide 3. The Value of Time | Clock Animation | START */


/* Slide 3. The Value of Time | Clock Animation | END */



/* Slide 4. Inflation | Escalator Man Animation | START */
.walking_man{
  animation: walking_man ease-out 8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: walking_man ease-out 8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: walking_man ease-out 8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: walking_man ease-out 8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: walking_man ease-out 8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes walking_man{
  0% {
    transform:  translate(-268px,-204px)  ;
  }
  100% {
    transform:  translate(322px,186px)  ;
  }
}

@-moz-keyframes walking_man{
  0% {
    -moz-transform:  translate(-268px,-204px)  ;
  }
  100% {
    -moz-transform:  translate(322px,186px)  ;
  }
}

@-webkit-keyframes walking_man {
  0% {
    -webkit-transform:  translate(-268px,-204px)  ;
  }
  100% {
    -webkit-transform:  translate(322px,186px)  ;
  }
}

@-o-keyframes walking_man {
  0% {
    -o-transform:  translate(-268px,-204px)  ;
  }
  100% {
    -o-transform:  translate(322px,186px)  ;
  }
}

@-ms-keyframes walking_man {
  0% {
    -ms-transform:  translate(-268px,-204px)  ;
  }
  100% {
    -ms-transform:  translate(322px,186px)  ;
  }
}
/* Slide 4. Inflation | Escalator Man Animation | END */



/* Slide 5. Identity theft and safety | Robber Animation | START */
.mouse_animation {
  animation: mouse_animation linear 60s;
  animation-iteration-count: infinite;
  transform-origin: 50% 100%;
  -webkit-animation: mouse_animation linear 60s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 100%;
  -moz-animation: mouse_animation linear 60s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 100%;
  -o-animation: mouse_animation linear 60s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 100%;
  -ms-animation: mouse_animation linear 60s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 100%;
}

@keyframes mouse_animation {
  0% {
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    transform:  translate(-251px,0px)  ;
    transform: rotateY(-360deg);
  }
  1% {
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    transform:  translate(593px,0px)  ;

  }
  2% {
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    transform:  translate(594px,0px)  ;
  }
  22% {
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    transform:  translate(594px,0px)  ;
  }
  23% {
    transform:  translate(249px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  24% {
    transform:  translate(-95px,0px)  ;
  }
  25% {
    transform:  translate(-80px,0px)  ;
  }
  37% {
    transform:  translate(103px,0px)  ;
  }
  39% {
    transform:  translate(103px,0px)  ;
  }
  41% {
    transform:  translate(103px,0px)  ;
  }
  100% {
    transform:  translate(103px,0px)  ;
  }
}

@-moz-keyframes mouse_animation {
  0% {
    -moz-transform:  translate(-251px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  1% {
    -moz-transform:  translate(593px,0px)  ;
  }
  2% {
    -moz-transform:  translate(594px,0px)  ;
  }
  22% {
    -moz-transform:  translate(594px,0px)  ;
  }
  23% {
    -moz-transform:  translate(249px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  24% {
    -moz-transform:  translate(-95px,0px)  ;
  }
  25% {
    -moz-transform:  translate(-80px,0px)  ;
  }
  37% {
    -moz-transform:  translate(103px,0px)  ;
  }
  39% {
    -moz-transform:  translate(103px,0px)  ;
  }
  41% {
    -moz-transform:  translate(103px,0px)  ;
  }
  100% {
    -moz-transform:  translate(103px,0px)  ;
  }
}

@-webkit-keyframes mouse_animation {
  0% {
    -webkit-transform:  translate(-251px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  1% {
    -webkit-transform:  translate(593px,0px)  ;
  }
  2% {
    -webkit-transform:  translate(594px,0px)  ;
  }
  22% {
    -webkit-transform:  translate(594px,0px)  ;
  }
  23% {
    -webkit-transform:  translate(249px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  24% {
    -webkit-transform:  translate(-95px,0px)  ;
  }
  25% {
    -webkit-transform:  translate(-80px,0px)  ;
  }
  37% {
    -webkit-transform:  translate(103px,0px)  ;
  }
  39% {
    -webkit-transform:  translate(103px,0px)  ;
  }
  41% {
    -webkit-transform:  translate(103px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(103px,0px)  ;
  }
}

@-o-keyframes mouse_animation {
  0% {
    -o-transform:  translate(-251px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  1% {
    -o-transform:  translate(593px,0px)  ;
  }
  2% {
    -o-transform:  translate(594px,0px)  ;
  }
  22% {
    -o-transform:  translate(594px,0px)  ;
  }
  23% {
    -o-transform:  translate(249px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  24% {
    -o-transform:  translate(-95px,0px)  ;
  }
  25% {
    -o-transform:  translate(-80px,0px)  ;
  }
  37% {
    -o-transform:  translate(103px,0px)  ;
  }
  39% {
    -o-transform:  translate(103px,0px)  ;
  }
  41% {
    -o-transform:  translate(103px,0px)  ;
  }
  100% {
    -o-transform:  translate(103px,0px)  ;
  }
}

@-ms-keyframes mouse_animation {
  0% {
    -ms-transform:  translate(-251px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  1% {
    -ms-transform:  translate(593px,0px)  ;
  }
  2% {
    -ms-transform:  translate(594px,0px)  ;
  }
  22% {
    -ms-transform:  translate(594px,0px)  ;
  }
  23% {
    -ms-transform:  translate(249px,0px)  ;
    transform: rotateY(-360deg);
    transform-origin: center center;
  }
  24% {
    -ms-transform:  translate(-95px,0px)  ;
  }
  25% {
    -ms-transform:  translate(-80px,0px)  ;
  }
  37% {
    -ms-transform:  translate(103px,0px)  ;
  }
  39% {
    -ms-transform:  translate(103px,0px)  ;
  }
  41% {
    -ms-transform:  translate(103px,0px)  ;
  }
  100% {
    -ms-transform:  translate(103px,0px)  ;
  }
}
/* Slide 5. Identity theft and safety | Robber Animation | END */


.mouse_animation2{
  animation: animationFrames linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes animationFrames1{
  0% {
    transform:  translate(0px,0px)  ;
  }
  2% {
    transform:  translate(7px,0px)  ;
  }
  47% {
    transform:  translate(170px,0px)  ;
  }
  98% {
    transform:  translate(170px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}.handhourglass{
  animation: handhourglassFrames ease-out 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: handhourglassFrames ease-out 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: handhourglassFrames ease-out 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: handhourglassFrames ease-out 4s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: handhourglassFrames ease-out 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes handhourglassFrames{
  0% {
    transform:  translate(100px,37px)  ;
  }
  100% {
    transform:  translate(7px,1px)  ;
  }
}

@-moz-keyframes handhourglassFrames{
  0% {
    -moz-transform:  translate(100px,37px)  ;
  }
  100% {
    -moz-transform:  translate(7px,1px)  ;
  }
}

@-webkit-keyframes handhourglassFrames {
  0% {
    -webkit-transform:  translate(100px,37px)  ;
  }
  100% {
    -webkit-transform:  translate(7px,1px)  ;
  }
}

@-o-keyframes handhourglassFrames {
  0% {
    -o-transform:  translate(100px,37px)  ;
  }
  100% {
    -o-transform:  translate(7px,1px)  ;
  }
}

@-ms-keyframes handhourglassFrames {
  0% {
    -ms-transform:  translate(100px,37px)  ;
  }
  100% {
    -ms-transform:  translate(7px,1px)  ;
  }
}

.lettersfalling{
  animation: lettersfallingFrames ease-out 10s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: lettersfallingFrames ease-out 10s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: lettersfallingFrames ease-out 10s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: lettersfallingFrames ease-out 10s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: lettersfallingFrames ease-out 10s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes lettersfallingFrames{
  0% {
    transform:  translate(-17px,-14px)  rotate(-15deg) ;
  }
  100% {
    transform:  translate(54px,17px)  rotate(5deg) ;
  }
}

@-moz-keyframes lettersfallingFrames{
  0% {
    -moz-transform:  translate(-17px,-14px)  rotate(-15deg) ;
  }
  100% {
    -moz-transform:  translate(54px,17px)  rotate(5deg) ;
  }
}

@-webkit-keyframes lettersfallingFrames {
  0% {
    -webkit-transform:  translate(-17px,-14px)  rotate(-15deg) ;
  }
  100% {
    -webkit-transform:  translate(54px,17px)  rotate(5deg) ;
  }
}

@-o-keyframes lettersfallingFrames {
  0% {
    -o-transform:  translate(-17px,-14px)  rotate(-15deg) ;
  }
  100% {
    -o-transform:  translate(54px,17px)  rotate(5deg) ;
  }
}

@-ms-keyframes lettersfallingFrames {
  0% {
    -ms-transform:  translate(-17px,-14px)  rotate(-15deg) ;
  }
  100% {
    -ms-transform:  translate(54px,17px)  rotate(5deg) ;
  }
}