/**
 * CSS3 cat animation
 *
 * @file Mascot - PM Cat "Catsworth"
 * @location /paths/myaccount/components/catsworth/pm-cat/
 * @author Dan Carr <dan.carr@zeetogroup.com>
 * @author Julie Jackson <julie.j@zeetogroup.com>
 * @summary Styling for original css3,html5 cat
 * @version 1.0
 *
 */
/* smash:replace variables */
/* styling */
/* CAT ================================================== */
#mascot {
  z-index: 99999;
  display: none;
  width: 325px;
  height: 272px;
}
#mascot.mascot-left {
  position: fixed;
  bottom: -80px;
  left: -20px;
  right: auto;
}
#mascot.mascot-left .flashCat {
  position: fixed;
  bottom: -110px;
  left: 0;
  right: auto;
}
#mascot.mascot-left .flashCat .close {
  left: 0;
  top: 5px;
}
#mascot.mascot-right {
  position: fixed;
  bottom: -80px;
  left: auto;
  right: -90px;
}
#mascot.mascot-right .flashCat {
  position: fixed;
  bottom: -110px;
  right: 0;
  left: auto;
}
#mascot.mascot-right .flashCat .close {
  left: 0;
  top: 5px;
}
#mascot.mascot-right .cssMascot #mascot-tail {
  right: auto;
  left: -100px;
  background-position: 0 0;
  transform-origin: bottom right;
  animation: waggingleft 4s infinite;
}
#mascot .pm-mascot {
  background: url("/themes/samples/properties/getitfree/blocks/wayfinder/images/sprite.png") 0 0 no-repeat;
}
#mascot .flashCat {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display: none;
}
#mascot .flashCat button {
  background: url("/themes/samples/properties/getitfree/blocks/wayfinder/images/close-btn.gif") no-repeat scroll 0 0 transparent;
  border: none;
  cursor: pointer;
  height: 26px;
  left: 8px;
  position: absolute;
  top: 35px;
  width: 25px;
  outline: none !important;
  border: 0;
}
#mascot .flashCat button:hover {
  background-position: 0 0;
}
#mascot .flashCat .close {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  z-index: 1000000000000000300000000;
}
#mascot .cssMascot button {
  background: url("/themes/samples/properties/getitfree/blocks/wayfinder/images/close-btn.gif") no-repeat scroll 0 0 transparent;
  border: none;
  cursor: pointer;
  height: 25px;
  width: 25px;
  outline: none !important;
}
#mascot .cssMascot button:hover {
  background-position: 0 0;
}
#mascot .cssMascot .close {
  position: absolute;
  left: 30px;
  top: 24px;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  z-index: 100;
}
#mascot .cssMascot .volume {
  width: 22px;
  height: 16px;
  position: absolute;
  left: 30px;
  top: 0px;
  background: url("/themes/samples/properties/getitfree/blocks/wayfinder/images/volume-sprite.png") no-repeat -2px -22px;
  cursor: pointer;
  z-index: 100;
}
#mascot .cssMascot .mute {
  background-position: -2px -2px;
}
#mascot .cssMascot #mascot-head {
  position: absolute;
  top: 0;
  left: 25px;
  background-position: -4px -364px;
  width: 208px;
  height: 146px;
  z-index: 10;
  animation: tilt 4s infinite;
}
#mascot .cssMascot #mascot-eyes {
  position: absolute;
  top: 53px;
  left: 30px;
  width: 155px;
  height: 44px;
  background-position: 0px -728px;
  animation: blinking 0.4s 3s 1, winking 0.4s 9s 1, blinking 0.4s 15s 1, blinking 0.4s 21s 1, blinking 0.4s 28s 1, blinking 0.4s 35s 1;
}
#mascot .cssMascot #mascot-mouth {
  position: absolute;
  top: 73px;
  left: 86px;
  background-position: -253px -364px;
  width: 38px;
  height: 38px;
}
#mascot .cssMascot #mascot-mouth.script-s1 {
  animation: talking 0.4s 17;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-survey {
  animation: talking 0.25s 7, talkingmore 0.3s 2.25s 15;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-s2 {
  animation: talking 0.4s 6;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-contact1 {
  animation: talking 0.4s 6;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-shipping1 {
  animation: talking 0.4s 5;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-offers {
  animation: talking 0.25s 2, talkingmore 0.3s 1s 8, talkingagain 0.3s 3.5s 16;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-5-s1 {
  animation: talking 0.4s 5;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-5-survey {
  animation: meow 1.5s 1, talking 0.25s 1.65s 5, talkingmore 0.3s 4s 11;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-5-offers {
  animation: talking 0.5s 2, talkingmore 0.3s 1.5s 6, talkingagain 0.3s 4s 7;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-8-s1 {
  animation: talking 0.35s 7;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-8-survey {
  animation: meow 0.3s 3, talking 0.3s 1.5s 13;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-8-offers {
  animation: talking 0.75s 2, talkingmore 0.3s 2.25s 7;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-10-s1 {
  animation: talking 0.4s 2, talkingmore 0.3s 1.5s 8;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-10-survey {
  animation: meow 0.3s 4, talking 0.25s 1.75s 19;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-10-offers {
  animation: talking 0.4s 10;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-12-s1 {
  animation: talking 0.35s 11, talkingmore 0.3s 4.5s 7;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-12-survey {
  animation: talking 0.4s 3, talkingmore 0.3s 1.5s 1, meow 0.75s 2s 2, talkingagain 0.3s 4s 17;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-12-offers {
  animation: talking 0.4s 6, talkingmore 0.3s 2.4s 10, meow 0.75s 5.5s 1, talkingagain 0.3s 6.75s 5;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-14-s1 {
  animation: talking 0.35s 7;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-14-survey {
  animation: talking 0.4s 5, talkingmore 0.3s 2s 11;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.script-14-offers {
  animation: talking 0.4s 4, talkingmore 0.3s 2s 8, talkingagain 0.3s 5s 6;
  animation-play-state: paused;
}
#mascot .cssMascot #mascot-mouth.talking {
  animation-play-state: running;
}
#mascot .cssMascot #mascot-body {
  position: absolute;
  top: 136px;
  left: 52px;
  background-position: -503px -2px;
  width: 153px;
  height: 135px;
}
#mascot .cssMascot #mascot-chest {
  position: absolute;
  top: -56px;
  left: 31px;
  background-position: -752px -184px;
  width: 90px;
  height: 150px;
}
#mascot .cssMascot #mascot-tail {
  position: absolute;
  top: -53px;
  right: -108px;
  background-position: -253px -2px;
  width: 124px;
  height: 128px;
  z-index: -1;
  transform-origin: bottom left;
  animation: waggingright 4s infinite;
}

/****
  * background-position: 0px -852px; // blink part closed
  * background-position: -749px -548px; // blink
  *
  * background-position: -250px -727px; // part closed
  * background-position: -500px -728px; // half closed
  * background-position: -750px -728px; // wink

  // nose/mouth
  * background-position: -253px -364px;
  * background-position: -500px -364px;
  * background-position: -750px -364px;
  * background-position: -1px -547px;
  * background-position: -250px -547px;
  * background-position: -498px -547px;

  // tail
  * background-position: 0px 0px;
  * background-position: -253px -2px;
*****/
@keyframes blinking {
  0% {
    background-position: 0px -728px;
  }
  19.9999% {
    background-position: 0px -728px;
  }
  20% {
    background-position: 0px -852px;
  }
  39.9999% {
    background-position: 0px -852px;
  }
  40% {
    background-position: -749px -548px;
  }
  59.9999% {
    background-position: -749px -548px;
  }
  60% {
    background-position: 0px -852px;
  }
  89.9999% {
    background-position: 0px -852px;
  }
  90% {
    background-position: 0px -728px;
  }
  100% {
    background-position: 0px -728px;
  }
}
@keyframes winking {
  0% {
    background-position: 0px -728px;
  }
  19.9999% {
    background-position: 0px -728px;
  }
  20% {
    background-position: -250px -727px;
  }
  29.9999% {
    background-position: -250px -727px;
  }
  30% {
    background-position: -501px -728px;
  }
  49.9999% {
    background-position: -501px -728px;
  }
  50% {
    background-position: -751px -727px;
  }
  89.9999% {
    background-position: -751px -727px;
  }
  90% {
    background-position: -501px -728px;
  }
  94.9999% {
    background-position: -501px -728px;
  }
  95% {
    background-position: -250px -727px;
  }
  99.9999% {
    background-position: -250px -727px;
  }
  100% {
    background-position: 0px -728px;
  }
}
@keyframes talking {
  0% {
    background-position: -253px -364px;
  }
  9.9999% {
    background-position: -253px -364px;
  }
  10% {
    background-position: -500px -364px;
  }
  19.9999% {
    background-position: -500px -364px;
  }
  20% {
    background-position: -750px -364px;
  }
  29.9999% {
    background-position: -750px -364px;
  }
  30% {
    background-position: -1px -547px;
  }
  39.9999% {
    background-position: -1px -547px;
  }
  40% {
    background-position: -250px -547px;
  }
  49.9999% {
    background-position: -250px -547px;
  }
  50% {
    background-position: -498px -547px;
  }
  59.9999% {
    background-position: -498px -547px;
  }
  60% {
    background-position: -250px -547px;
  }
  69.9999% {
    background-position: -250px -547px;
  }
  70% {
    background-position: -1px -547px;
  }
  79.9999% {
    background-position: -1px -547px;
  }
  80% {
    background-position: -750px -364px;
  }
  89.9999% {
    background-position: -750px -364px;
  }
  90% {
    background-position: -500px -364px;
  }
  99.9999% {
    background-position: -500px -364px;
  }
  100% {
    background-position: -253px -364px;
  }
}
@keyframes talkingmore {
  0% {
    background-position: -253px -364px;
  }
  9.9999% {
    background-position: -253px -364px;
  }
  10% {
    background-position: -500px -364px;
  }
  19.9999% {
    background-position: -500px -364px;
  }
  20% {
    background-position: -750px -364px;
  }
  29.9999% {
    background-position: -750px -364px;
  }
  30% {
    background-position: -1px -547px;
  }
  39.9999% {
    background-position: -1px -547px;
  }
  40% {
    background-position: -250px -547px;
  }
  49.9999% {
    background-position: -250px -547px;
  }
  50% {
    background-position: -498px -547px;
  }
  59.9999% {
    background-position: -498px -547px;
  }
  60% {
    background-position: -250px -547px;
  }
  69.9999% {
    background-position: -250px -547px;
  }
  70% {
    background-position: -1px -547px;
  }
  79.9999% {
    background-position: -1px -547px;
  }
  80% {
    background-position: -750px -364px;
  }
  89.9999% {
    background-position: -750px -364px;
  }
  90% {
    background-position: -500px -364px;
  }
  99.9999% {
    background-position: -500px -364px;
  }
  100% {
    background-position: -253px -364px;
  }
}
@keyframes talkingagain {
  0% {
    background-position: -253px -364px;
  }
  9.9999% {
    background-position: -253px -364px;
  }
  10% {
    background-position: -500px -364px;
  }
  19.9999% {
    background-position: -500px -364px;
  }
  20% {
    background-position: -750px -364px;
  }
  29.9999% {
    background-position: -750px -364px;
  }
  30% {
    background-position: -1px -547px;
  }
  39.9999% {
    background-position: -1px -547px;
  }
  40% {
    background-position: -250px -547px;
  }
  49.9999% {
    background-position: -250px -547px;
  }
  50% {
    background-position: -498px -547px;
  }
  59.9999% {
    background-position: -498px -547px;
  }
  60% {
    background-position: -250px -547px;
  }
  69.9999% {
    background-position: -250px -547px;
  }
  70% {
    background-position: -1px -547px;
  }
  79.9999% {
    background-position: -1px -547px;
  }
  80% {
    background-position: -750px -364px;
  }
  89.9999% {
    background-position: -750px -364px;
  }
  90% {
    background-position: -500px -364px;
  }
  99.9999% {
    background-position: -500px -364px;
  }
  100% {
    background-position: -253px -364px;
  }
}
@keyframes meow {
  0% {
    background-position: -253px -364px;
  }
  9.9999% {
    background-position: -253px -364px;
  }
  10% {
    background-position: -500px -364px;
  }
  19.9999% {
    background-position: -500px -364px;
  }
  20% {
    background-position: -750px -364px;
  }
  29.9999% {
    background-position: -750px -364px;
  }
  30% {
    background-position: -1px -547px;
  }
  39.9999% {
    background-position: -1px -547px;
  }
  40% {
    background-position: -250px -547px;
  }
  49.9999% {
    background-position: -250px -547px;
  }
  50% {
    background-position: -498px -547px;
  }
  59.9999% {
    background-position: -498px -547px;
  }
  60% {
    background-position: -250px -547px;
  }
  69.9999% {
    background-position: -250px -547px;
  }
  70% {
    background-position: -1px -547px;
  }
  79.9999% {
    background-position: -1px -547px;
  }
  80% {
    background-position: -750px -364px;
  }
  89.9999% {
    background-position: -750px -364px;
  }
  90% {
    background-position: -500px -364px;
  }
  99.9999% {
    background-position: -500px -364px;
  }
  100% {
    background-position: -253px -364px;
  }
}
@keyframes tilt {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes waggingright {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(9deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes waggingleft {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-9deg);
  }
  100% {
    transform: rotate(0deg);
  }
}