@font-face {
  font-family: 'icomoon';
  src: url("/fonts/icomoon.eot");
  src: url("/fonts/icomoon.eot?#iefix") format('embedded-opentype'), url("/fonts/icomoon.woff") format('woff'), url("/fonts/icomoon.ttf") format('truetype'), url("/fonts/icomoon.svg#icomoon") format('svg');
  font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'icomoon';
    src: url("/fonts/icomoon.svg#icomoon") format('svg');
  }
}
.bitmap {
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  line-height: 1.2em;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  color: #f9f9db;
  letter-spacing: 0.1em;
}
.bitmap.shadow {
  color: #ffd05a;
  text-shadow: 0 0.06em 0 #876b2a;
}
.icon[data-icon]:before {
  font-family: 'icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.icon.timebomb:before {
  content: "\23";
}
.icon.extralife:before {
  content: "\24";
}
.icon.bulletproof:before {
  content: "\25";
}
.icon.random:before {
  content: "\26";
}
.icon.paddleresize:before {
  content: "\27";
}
.icon.obsticles:before {
  content: "\28";
}
.icon.multiball:before {
  content: "\29";
}
.icon.mirrored:before {
  content: "\2b";
}
.icon.laser:before {
  content: "\2c";
}
.icon.ghostball:before {
  content: "\2d";
}
.icon.fog:before {
  content: "\2e";
}
.icon.fireball:before {
  content: "\2f";
}
.icon.deathball:before {
  content: "\3b";
}
.icon.mirroredcontrols:before {
  content: '+';
}
html:not(.mobile) .ui-darken {
  color: #444 !important;
  border-color: #444 !important;
}
html:not(.mobile) .ui-darken:before {
  color: #444 !important;
  border-color: #444 !important;
}
.icon[data-icon='⎚'] {
  font-size: 90px;
}
.mobile .puck {
  overflow: hidden;
  background-repeat: no-repeat;
  width: 52px;
  height: 52px;
  background-image: url("/images/mobile/puck.png");
}
.mobile #p1 {
  width: 179px;
  height: 53px;
}
.mobile #p1 .gfx {
  width: 179px;
  height: 53px;
  background-image: url("/images/mobile/paddle-p1.png");
}
.mobile .p1-0001 .gfx {
  background-position: -1088px -167px;
}
.mobile .p1-0002 .gfx {
  background-position: -1269px -112px;
}
.mobile .p1-0003 .gfx {
  background-position: -1088px -112px;
}
.mobile .p1-0004 .gfx {
  background-position: -1269px -57px;
}
.mobile .p1-0005 .gfx {
  background-position: -1088px -57px;
}
.mobile .p1-0006 .gfx {
  background-position: -1269px -2px;
}
.mobile .p1-0007 .gfx {
  background-position: -1088px -2px;
}
.mobile .p1-0008 .gfx {
  background-position: -907px -167px;
}
.mobile .p1-0009 .gfx {
  background-position: -907px -112px;
}
.mobile .p1-0010 .gfx {
  background-position: -907px -57px;
}
.mobile .p1-0011 .gfx {
  background-position: -907px -2px;
}
.mobile .p1-0012 .gfx {
  background-position: -726px -167px;
}
.mobile .p1-0013 .gfx {
  background-position: -726px -112px;
}
.mobile .p1-0014 .gfx {
  background-position: -726px -57px;
}
.mobile .p1-0015 .gfx {
  background-position: -726px -2px;
}
.mobile .p1-0016 .gfx {
  background-position: -545px -167px;
}
.mobile .p1-0017 .gfx {
  background-position: -545px -112px;
}
.mobile .p1-0018 .gfx {
  background-position: -545px -57px;
}
.mobile .p1-0019 .gfx {
  background-position: -545px -2px;
}
.mobile .p1-0020 .gfx {
  background-position: -364px -167px;
}
.mobile .p1-0021 .gfx {
  background-position: -364px -112px;
}
.mobile .p1-0022 .gfx {
  background-position: -364px -57px;
}
.mobile .p1-0023 .gfx {
  background-position: -364px -2px;
}
.mobile .p1-0024 .gfx {
  background-position: -183px -167px;
}
.mobile .p1-0025 .gfx {
  background-position: -183px -112px;
}
.mobile .p1-0026 .gfx {
  background-position: -183px -57px;
}
.mobile .p1-0027 .gfx {
  background-position: -183px -2px;
}
.mobile .p1-0028 .gfx {
  background-position: -2px -167px;
}
.mobile .p1-0029 .gfx {
  background-position: -2px -112px;
}
.mobile .p1-0030 .gfx {
  background-position: -2px -57px;
}
.mobile .p1-0031 .gfx {
  background-position: -2px -2px;
}
.mobile #p2 {
  width: 179px;
  height: 47px;
}
.mobile #p2 .gfx {
  width: 179px;
  height: 47px;
  background-image: url("/images/mobile/paddle-p2.png");
}
.mobile .p2-0001 .gfx {
  background-position: -318px -389px;
}
.mobile .p2-0002 .gfx {
  background-position: -160px -389px;
}
.mobile .p2-0003 .gfx {
  background-position: -318px -346px;
}
.mobile .p2-0004 .gfx {
  background-position: -160px -346px;
}
.mobile .p2-0005 .gfx {
  background-position: -318px -303px;
}
.mobile .p2-0006 .gfx {
  background-position: -160px -303px;
}
.mobile .p2-0007 .gfx {
  background-position: -318px -260px;
}
.mobile .p2-0008 .gfx {
  background-position: -160px -260px;
}
.mobile .p2-0009 .gfx {
  background-position: -2px -432px;
}
.mobile .p2-0010 .gfx {
  background-position: -2px -389px;
}
.mobile .p2-0011 .gfx {
  background-position: -2px -346px;
}
.mobile .p2-0012 .gfx {
  background-position: -2px -303px;
}
.mobile .p2-0013 .gfx {
  background-position: -2px -260px;
}
.mobile .p2-0014 .gfx {
  background-position: -318px -217px;
}
.mobile .p2-0015 .gfx {
  background-position: -160px -217px;
}
.mobile .p2-0016 .gfx {
  background-position: -2px -217px;
}
.mobile .p2-0017 .gfx {
  background-position: -318px -174px;
}
.mobile .p2-0018 .gfx {
  background-position: -160px -174px;
}
.mobile .p2-0019 .gfx {
  background-position: -2px -174px;
}
.mobile .p2-0020 .gfx {
  background-position: -318px -131px;
}
.mobile .p2-0021 .gfx {
  background-position: -160px -131px;
}
.mobile .p2-0022 .gfx {
  background-position: -2px -131px;
}
.mobile .p2-0023 .gfx {
  background-position: -318px -88px;
}
.mobile .p2-0024 .gfx {
  background-position: -160px -88px;
}
.mobile .p2-0025 .gfx {
  background-position: -2px -88px;
}
.mobile .p2-0026 .gfx {
  background-position: -318px -45px;
}
.mobile .p2-0027 .gfx {
  background-position: -160px -45px;
}
.mobile .p2-0028 .gfx {
  background-position: -2px -45px;
}
.mobile .p2-0029 .gfx {
  background-position: -318px -2px;
}
.mobile .p2-0030 .gfx {
  background-position: -160px -2px;
}
.mobile .p2-0031 .gfx {
  background-position: -2px -2px;
}
.mobile .shields .shield {
  display: block;
  background-repeat: no-repeat;
  background-image: url("/images/mobile/shields.png");
}
.mobile .shields-a .s1-01 {
  width: 552px;
  height: 75px;
  background-position: -2px -2px;
}
.mobile .shields-a .s2-01 {
  width: 275px;
  height: 75px;
  background-position: -556px -2px;
}
.mobile .shields-a .s2-02 {
  width: 275px;
  height: 75px;
  background-position: -2px -79px;
}
.mobile .shields-a .s3-01 {
  width: 185px;
  height: 75px;
  background-position: -833px -2px;
}
.mobile .shields-a .s3-02 {
  width: 179px;
  height: 75px;
  background-position: -466px -79px;
}
.mobile .shields-a .s3-03 {
  width: 185px;
  height: 75px;
  background-position: -279px -79px;
}
.mobile .shields-a .s6-01 {
  width: 95px;
  height: 75px;
  background-position: -647px -79px;
}
.mobile .shields-a .s6-02 {
  width: 91px;
  height: 75px;
  background-position: -838px -79px;
}
.mobile .shields-a .s6-03 {
  width: 90px;
  height: 75px;
  background-position: -1023px -79px;
}
.mobile .shields-a .s6-04 {
  width: 90px;
  height: 75px;
  background-position: -931px -79px;
}
.mobile .shields-a .s6-05 {
  width: 92px;
  height: 75px;
  background-position: -744px -79px;
}
.mobile .shields-a .s6-06 {
  width: 96px;
  height: 75px;
  background-position: -1020px -2px;
}
.mobile .shields-a .s9-01 {
  width: 64px;
  height: 75px;
  background-position: -549px -156px;
}
.mobile .shields-a .s9-02 {
  width: 63px;
  height: 75px;
  background-position: -615px -156px;
}
.mobile .shields-a .s9-03 {
  width: 61px;
  height: 75px;
  background-position: -744px -156px;
}
.mobile .shields-a .s9-04 {
  width: 60px;
  height: 75px;
  background-position: -993px -156px;
}
.mobile .shields-a .s9-05 {
  width: 60px;
  height: 75px;
  background-position: -931px -156px;
}
.mobile .shields-a .s9-06 {
  width: 60px;
  height: 75px;
  background-position: -869px -156px;
}
.mobile .shields-a .s9-07 {
  width: 60px;
  height: 75px;
  background-position: -807px -156px;
}
.mobile .shields-a .s9-08 {
  width: 62px;
  height: 75px;
  background-position: -680px -156px;
}
.mobile .shields-a .s9-09 {
  width: 65px;
  height: 75px;
  background-position: -482px -156px;
}
.mobile .shields-b .s1-01 {
  width: 260px;
  height: 37px;
  background-position: -2px -156px;
}
.mobile .shields-b .s2-01 {
  width: 130px;
  height: 37px;
  background-position: -2px -195px;
}
.mobile .shields-b .s2-02 {
  width: 129px;
  height: 37px;
  background-position: -264px -156px;
}
.mobile .shields-b .s3-01 {
  width: 85px;
  height: 36px;
  background-position: -395px -156px;
}
.mobile .shields-b .s3-02 {
  width: 84px;
  height: 36px;
  background-position: -222px -195px;
}
.mobile .shields-b .s3-03 {
  width: 86px;
  height: 36px;
  background-position: -134px -195px;
}
.mobile .shields-b .s6-01 {
  width: 45px;
  height: 37px;
  background-position: -308px -195px;
}
.mobile .shields-b .s6-02 {
  width: 43px;
  height: 37px;
  background-position: -1115px -80px;
}
.mobile .shields-b .s6-03 {
  width: 43px;
  height: 37px;
  background-position: -1055px -195px;
}
.mobile .shields-b .s6-04 {
  width: 43px;
  height: 37px;
  background-position: -1118px -41px;
}
.mobile .shields-b .s6-05 {
  width: 44px;
  height: 37px;
  background-position: -1118px -2px;
}
.mobile .shields-b .s6-06 {
  width: 45px;
  height: 37px;
  background-position: -1055px -156px;
}
.mobile .shields-b .s9-01 {
  width: 30px;
  height: 37px;
  background-position: -1115px -119px;
}
.mobile .shields-b .s9-02 {
  width: 29px;
  height: 37px;
  background-position: -449px -194px;
}
.mobile .shields-b .s9-03 {
  width: 29px;
  height: 37px;
  background-position: -418px -194px;
}
.mobile .shields-b .s9-04 {
  width: 29px;
  height: 37px;
  background-position: -387px -195px;
}
.mobile .shields-b .s9-05 {
  width: 29px;
  height: 37px;
  background-position: -1131px -197px;
}
.mobile .shields-b .s9-06 {
  width: 29px;
  height: 37px;
  background-position: -1133px -158px;
}
.mobile .shields-b .s9-07 {
  width: 29px;
  height: 37px;
  background-position: -1100px -197px;
}
.mobile .shields-b .s9-08 {
  width: 29px;
  height: 37px;
  background-position: -1102px -158px;
}
.mobile .shields-b .s9-09 {
  width: 30px;
  height: 37px;
  background-position: -355px -195px;
}
.mobile .bear,
.mobile .bear > * {
  display: block;
  background-repeat: no-repeat;
  background-image: url("/images/mobile/bear.png");
}
.mobile .angry-1 {
  width: 104px;
  height: 95px;
  background-position: -320px -99px;
}
.mobile .angry-2 {
  width: 104px;
  height: 95px;
  background-position: -214px -99px;
}
.mobile .angry-3 {
  width: 104px;
  height: 95px;
  background-position: -108px -150px;
}
.mobile .angry-4 {
  width: 104px;
  height: 95px;
  background-position: -610px -2px;
}
.mobile .angry-5 {
  width: 104px;
  height: 95px;
  background-position: -504px -2px;
}
.mobile .angry-6 {
  width: 104px;
  height: 95px;
  background-position: -398px -2px;
}
.mobile .angry-7 {
  width: 104px;
  height: 95px;
  background-position: -292px -2px;
}
.mobile .angry-8 {
  width: 104px;
  height: 95px;
  background-position: -186px -2px;
}
.mobile .angry-9 {
  width: 104px;
  height: 95px;
  background-position: -2px -150px;
}
.mobile .bear.full {
  width: 182px;
  height: 146px;
  background-position: -2px -2px;
}
.mobile .blink-1 {
  width: 56px;
  height: 18px;
  background-position: -634px -222px;
}
.mobile .blink-2 {
  width: 56px;
  height: 18px;
  background-position: -634px -202px;
}
.mobile .bob {
  width: 44px;
  height: 39px;
  background-position: -426px -151px;
}
.mobile .flirt-1 {
  width: 67px;
  height: 49px;
  background-position: -610px -151px;
}
.mobile .flirt-2 {
  width: 67px;
  height: 49px;
  background-position: -565px -202px;
}
.mobile .flirt-3 {
  width: 67px;
  height: 49px;
  background-position: -541px -151px;
}
.mobile .flirt-4 {
  width: 67px;
  height: 49px;
  background-position: -496px -202px;
}
.mobile .flirt-5 {
  width: 67px;
  height: 49px;
  background-position: -427px -202px;
}
.mobile .flirt-6 {
  width: 67px;
  height: 49px;
  background-position: -472px -151px;
}
.mobile .flirt-7 {
  width: 67px;
  height: 49px;
  background-position: -358px -196px;
}
.mobile .jawdrop-1 {
  width: 70px;
  height: 50px;
  background-position: -286px -196px;
}
.mobile .jawdrop-2 {
  width: 70px;
  height: 50px;
  background-position: -214px -196px;
}
.mobile .jawdrop-3 {
  width: 70px;
  height: 50px;
  background-position: -642px -99px;
}
.mobile .jawdrop-4 {
  width: 70px;
  height: 50px;
  background-position: -570px -99px;
}
.mobile .jawdrop-5 {
  width: 70px;
  height: 50px;
  background-position: -498px -99px;
}
.mobile .jawdrop-6 {
  width: 70px;
  height: 50px;
  background-position: -426px -99px;
}
.mobile .extra,
.mobile .extra .icon {
  width: 63px;
  height: 63px;
  display: block;
  background-repeat: no-repeat;
}
.mobile .extra .icon {
  background-image: url("/images/mobile/extra-icons.png");
}
.mobile .deathball .icon {
  width: 63px;
  height: 63px;
  background-position: -717px -2px;
}
.mobile .fog .icon {
  width: 63px;
  height: 63px;
  background-position: -587px -2px;
}
.mobile .ghostball .icon {
  width: 63px;
  height: 63px;
  background-position: -522px -2px;
}
.mobile .laser .icon {
  width: 63px;
  height: 63px;
  background-position: -457px -2px;
}
.mobile .extralife .icon {
  width: 63px;
  height: 63px;
  background-position: -392px -2px;
}
.mobile .mirroredcontrols .icon {
  width: 63px;
  height: 63px;
  background-position: -327px -2px;
}
.mobile .multiball .icon {
  width: 63px;
  height: 63px;
  background-position: -262px -2px;
}
.mobile .paddleresize .icon {
  width: 63px;
  height: 63px;
  background-position: -197px -2px;
}
.mobile .random .icon {
  width: 63px;
  height: 63px;
  background-position: -67px -2px;
}
.mobile .bulletproof .icon {
  width: 63px;
  height: 63px;
  background-position: -67px -2px;
}
.mobile .timebomb .icon {
  width: 63px;
  height: 63px;
  background-position: -2px -2px;
}
.mobile .fireball .icon {
  width: 63px;
  height: 63px;
  background-position: -652px -2px;
}
.mobile .effect {
  display: block;
  background-repeat: no-repeat;
  background-image: url("/images/mobile/effects.png");
}
.mobile .effect.fog {
  width: 576px;
  height: 355px;
  background-position: -2px -2px;
}
.mobile .explosion.p1 {
  width: 558px;
  height: 255px;
  background-position: -2px -359px;
}
.mobile .explosion.p2 {
  width: 470px;
  height: 203px;
  background-position: -562px -359px;
}
.mobile .force {
  width: 252px;
  height: 252px;
}
.mobile .force-1 {
  width: 252px;
  height: 252px;
  background-position: -2px -616px;
}
.mobile .force-2 {
  width: 252px;
  height: 252px;
  background-position: -256px -616px;
}
.mobile .force-3 {
  width: 252px;
  height: 252px;
  background-position: -510px -616px;
}
.mobile .hit-cpu {
  width: 266px;
  height: 146px;
  background-position: -764px -616px;
}
.mobile .hit-player {
  width: 266px;
  height: 146px;
  background-position: -2px -870px;
}
.mobile .obstacle {
  display: block;
  background-repeat: no-repeat;
  background-image: url("/images/mobile/obstacles.png");
}
.mobile .diamond {
  width: 159px;
  height: 126px;
  background-position: -172px -2px;
}
.mobile .octagon {
  width: 164px;
  height: 124px;
  background-position: -333px -2px;
}
.mobile .triangle-left {
  width: 83px;
  height: 151px;
  background-position: -87px -2px;
}
.mobile .triangle-right {
  width: 83px;
  height: 151px;
  background-position: -2px -2px;
}
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 100%;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  background: #f9f9db;
  font-family: 'Varela', sans-serif;
  font-size: 62.5%;
  line-height: 1em;
  letter-spacing: 2px;
  font-weight: normal;
  font-style: normal;
}
#game {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
#game canvas {
  position: relative;
  top: 0px;
  left: 0;
}
#game #canv-2d {
  position: absolute;
  top: 20px;
  left: 0;
  pointer-events: none;
}
#game #canv-db {
  position: absolute;
  top: 20px;
  right: 0;
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  left: auto;
  pointer-events: none;
}
#game > *.hidden {
  display: none;
}
html .mobile {
  display: none;
}
#fpsCameraCapture {
  position: absolute;
  display: none;
  height: 100%;
  width: 100%;
  top: 0;
  display: none;
}
#benchmarks {
  position: absolute;
  top: 50px;
  background: #fff;
}
#latencyMeter {
  font-size: 11px;
  margin: 0;
}
#latencyMeter span.good {
  color: #008000;
}
#latencyMeter span.ok {
  color: #ffa500;
}
#latencyMeter span.bad {
  color: #f00;
}
#latencyMeter span:after {
  content: 'ms';
}
.mirror {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
.mirror .active * {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.mirror.game-pause footer,
.mirror.game-pause section.game-pause .dialog {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
header.main-menu {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  top: 0px;
  text-align: center;
  color: #f8fadb;
  -webkit-transition: opacity 400ms ease-out;
  -moz-transition: opacity 400ms ease-out;
  -o-transition: opacity 400ms ease-out;
  -ms-transition: opacity 400ms ease-out;
  transition: opacity 400ms ease-out;
}
header.main-menu.delay {
  -webkit-transition-delay: 3.5s;
  -moz-transition-delay: 3.5s;
  -o-transition-delay: 3.5s;
  -ms-transition-delay: 3.5s;
  transition-delay: 3.5s;
}
header.main-menu.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
header.main-menu.inactive {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}
header.main-menu p {
  margin: 0;
  padding: 0;
}
header.main-menu .nav {
  display: block;
  position: absolute;
  text-align: center;
  bottom: 90px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15%;
  line-height: 20px;
  letter-spacing: 17px;
  zoom: 1;
}
header.main-menu .nav:before,
header.main-menu .nav:after {
  content: "";
  display: table;
}
header.main-menu .nav:after {
  clear: both;
}
header.main-menu .nav button,
header.main-menu .nav a.button {
  min-width: 275px;
  margin-top: 10px;
}
header.main-menu .nav .full {
  display: none;
}
header.main-menu .play-mobile {
  display: none;
}
header.main-menu .notifications {
  max-width: 550px;
  margin: 0 auto 15px;
  font-size: 11px;
  line-height: 1.5em;
  letter-spacing: 2px;
}
header.main-menu .notifications .notification {
  display: none;
}
header.main-menu h1 {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  padding: 60px;
}
header.main-menu h1 {
  margin: 0;
}
header.main-menu h1 img {
  width: 70%;
  height: auto;
  margin-bottom: 0;
}
header.main-menu h2 {
  font-size: 14px;
  margin: 0;
  color: #f9f9db;
}
header.main-menu .links .experiment {
  text-transform: none;
  display: block;
  text-decoration: none;
  position: absolute;
  bottom: 50px;
  font-size: 56px;
  color: #fff;
  left: 20px;
  line-height: 1.15em;
}
header.main-menu .links .experiment span {
  display: none;
}
footer#footer {
  display: block;
  height: 40px;
  background: #000;
  position: absolute;
  z-index: 6;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.social li {
  list-style: none;
  display: inline-block;
  margin: 0 0 0 5px;
  text-transform: lowercase;
}
.social a {
  color: #000;
}
.social .icon {
  background: #e8e8ca;
  width: 20px;
  height: 20px;
  font-size: 16px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}
.social .icon:before {
  display: inline-block;
  text-align: center;
  width: 100%;
  vertical-align: middle;
  text-transform: lowercase;
}
.social .icon:after {
  content: ' ';
  height: 100%;
  display: inline-block;
  position: absolute;
  width: 1px;
}
.social .icon:hover {
  background: #000;
  color: #e8e8ca;
  border-color: #e8e8ca;
}
.social .icon span {
  display: none;
}
#socials {
  position: absolute;
  display: inline-block;
  margin: 9px 0 0 15px;
}
#about {
  display: block;
  text-align: right;
  font-size: 9px;
}
#about ul {
  right: 0px;
  position: absolute;
  list-style: none;
  margin: 0 0 0 0;
  padding: 15px 0 0 0;
}
#about ul li {
  text-transform: uppercase;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-block;
  margin-right: 20px;
}
#about ul li a {
  color: #e8e8ca;
  text-decoration: none;
}
#about ul li a:hover {
  text-decoration: underline;
}
#about ul li.sound,
#about ul li.latency {
  position: relative;
}
#about ul li.latency {
  width: 46px;
  text-transform: lowercase;
  cursor: pointer;
}
#about ul li.latency span {
  display: block;
}
#about ul li.latency .auto {
  white-space: nowrap;
}
#about ul li.latency .details {
  display: none;
}
#about ul li.latency .number {
  cursor: pointer;
}
#about ul li.latency:hover .number {
  text-decoration: underline;
}
#about ul li.latency:hover .notification-flag {
  width: 400px;
  display: block;
  text-decoration: none;
}
#about ul li.latency:hover .notification-flag .auto {
  display: none;
}
#about ul li.latency:hover .notification-flag .details {
  display: block;
  line-height: 1.3em;
}
#about ul li.latency.inactive {
  display: none;
}
#about ul li.latency .notification-flag span {
  padding-bottom: 16px;
}
#about .sound-switch .on,
#about .sound-switch .off {
  display: none;
}
#about .sound-switch.on .on,
#about .sound-switch.off .off {
  display: inline;
}
#about .sound .notification-flag {
  height: 46px;
  white-space: nowrap;
}
#about .notification-flag {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 10px;
  padding: 18px 15px 0;
  background: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #f9f9db;
  font-size: 9px;
  text-align: left;
  text-transform: uppercase;
}
#about .notification-flag:before {
  content: ' ';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent #000 transparent transparent;
  display: block;
  position: absolute;
  right: 15px;
  bottom: -15px;
}
body.loading footer#footer {
  display: none;
}
.dialog {
  z-index: 5;
  width: 100%;
  height: 33%;
  position: absolute;
  bottom: 39px;
  margin: 0;
  padding: 0;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  perspective: 2000px;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  text-transform: uppercase;
}
.dialog h2,
.dialog h3,
.dialog h4,
.dialog h5,
.dialog p,
.dialog ul,
.dialog li {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}
.dialog .buttons {
  padding-top: 20px;
  letter-spacing: 17px;
}
.dialog .buttons button,
.dialog .buttons a.button {
  min-width: 275px;
  margin-top: 10px;
}
.dialog.top {
  top: 0;
  bottom: inherit;
  height: auto;
  text-align: left;
}
.dialog.top .content {
  padding: 2px 30px 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  height: auto;
}
.dialog.middle {
  bottom: 33%;
  min-height: 266px;
}
.dialog h2,
.dialog h3 {
  color: #e83129;
  font-weight: normal;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 0px 10px 0px;
}
.dialog p {
  color: #e83129;
}
.dialog p span.green {
  color: #2aa52a;
}
.dialog .content {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  -ms-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
  background: #f9f9db;
  display: table;
}
.dialog .content .vertical-center {
  display: table-cell;
  vertical-align: middle;
}
.dialog .bubble {
  padding-top: 35px;
}
.dialog .bubble:before {
  font-size: 40px;
  top: -5px;
  left: 40px;
}
.dialog .bubble:after {
  content: attr(data-player);
  top: 6px;
  left: 40px;
  color: #f9f9db;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0px;
}
.state.inactive .dialog .animate {
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  -o-transition-delay: 0;
  -ms-transition-delay: 0;
  transition-delay: 0;
  -webkit-transform: rotateX(88deg) translateZ(-400px) translateY(-70px);
  -moz-transform: rotateX(88deg) translateZ(-400px) translateY(-70px);
  -o-transform: rotateX(88deg) translateZ(-400px) translateY(-70px);
  -ms-transform: rotateX(88deg) translateZ(-400px) translateY(-70px);
  transform: rotateX(88deg) translateZ(-400px) translateY(-70px);
}
#notifications .dialog {
  top: -100%;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  -o-transition: top 0.5s;
  -ms-transition: top 0.5s;
  transition: top 0.5s;
}
#notifications .dialog.active {
  top: 0;
}
.state {
  visibility: hidden;
}
.state h2,
.state h3,
.state h4,
.state h5,
.state p {
  text-transform: uppercase;
}
.state.active {
  visibility: visible;
}
.state.inactive .dialog.middle .content {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.state.loading {
  position: relative;
  background-color: #f9f9db;
  z-index: 10;
  width: 100%;
  height: 100%;
  visibility: visible;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: row;
  -moz-box-direction: row;
  -ms-box-direction: row;
  box-direction: row;
  box-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.state.loading > * {
  -webkit-align-self: center;
  align-self: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}
.state.loading .computer {
  color: #4372aa;
  position: relative;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.state.loading .computer:after {
  height: 49px;
  margin-left: 50%;
  width: 1px;
  border-left: 1px dotted #f9f9db;
  position: absolute;
  top: 31px;
  left: -2px;
  content: ' ';
  display: block;
}
.state.loading .computer:before {
  color: #4372aa;
  display: block;
  font-size: 136px;
  margin-bottom: 20px;
}
.state.friend-arrived h2,
.state.friend-waiting h2,
.state.game-wait h2,
.state.friend-accept h2,
.state.friend-left h2,
.state.friend-arrived h3,
.state.friend-waiting h3,
.state.game-wait h3,
.state.friend-accept h3,
.state.friend-left h3 {
  padding: 11px 0px 23px 0px;
}
.state.friend-arrived button,
.state.friend-waiting button,
.state.game-wait button,
.state.friend-accept button,
.state.friend-left button {
  margin-top: 0;
}
.state.state.friend-accept h2 {
  padding: 10px 0px 5px 0px;
}
.state.state.game-instructions,
.state.state.game-start {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  box-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.state.friend-invite .share-url {
  background: #f9f9db;
  color: #2aa52a;
  min-width: 350px;
  padding: 8px 5px 7px 5px;
  border: 1px solid #2aa52a;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  text-transform: none;
}
.state.friend-invite .share-url:focus {
  outline: none;
}
.state.friend-invite .share-url span {
  z-index: 2;
  font-size: 17px;
}
.state.friend-invite .share-url span::selection {
  background: #2aa52a;
  color: #f9f9db;
}
.state.friend-invite .share-url span {
  position: relative;
}
.state.friend-invite p {
  margin: 0 auto 20px;
  line-height: 1.4em;
}
.state.friend-invite button {
  font-size: 11px;
}
.state.friend-left .cpu-wth-eyes {
  margin-bottom: 0;
}
.state.friend-left .buttons {
  padding: 0;
}
.state.game-prompt {
  pointer-events: none;
  z-index: 1;
  height: 100%;
}
.state.game-prompt .state {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.state.game-prompt .state.active .content {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.state.game-prompt .state.inactive .content {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.state.game-prompt .state.game-over-prompt h4 {
  font-size: 70px;
}
.state.game-prompt .content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flex;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: row;
  -moz-box-direction: row;
  -ms-box-direction: row;
  box-direction: row;
  box-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity 0.4s ease-out;
  -moz-transition: opacity 0.4s ease-out;
  -o-transition: opacity 0.4s ease-out;
  -ms-transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
}
.state.game-prompt .prompt {
  -webkit-align-self: center;
  align-self: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  width: 100%;
  text-align: center;
  padding: 40px 0;
}
.state.game-prompt .prompt h1,
.state.game-prompt .prompt h2,
.state.game-prompt .prompt h3,
.state.game-prompt .prompt h4 {
  font-size: 100px;
  margin: 0;
}
.state.game-prompt .prompt div.subtitle {
  text-transform: uppercase;
  color: #f9f9db;
}
.state.game-prompt .background {
  height: 33%;
  width: 100%;
  background: #e83129;
  position: absolute;
  top: 33%;
  z-index: 3;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  transition: background 0.5s;
}
.state.game-prompt.active .background {
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.state.game-prompt.inactive .background {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.state.game-pause .buttons {
  margin-top: 5px;
  padding-top: 0;
}
.state.game-pause button {
  display: block;
  min-width: 275px;
  margin: 0 auto;
}
.state.game-pause button:last-child {
  margin-top: 20px;
}
.state.game-pause h2 {
  padding-bottom: 20px;
}
.state.webcam-activate .dialog h1 {
  font-size: 11px;
}
.state.webcam-activate .dialog button,
.state.webcam-activate .dialog .button {
  margin: 10px 0px 20px 0px;
}
.state.webcam-activate .dialog .buttons {
  position: absolute;
  top: 50%;
  right: 30px;
  margin-top: -18px;
  line-height: 1em;
  padding: 0;
}
.state.webcam-activate .dialog .buttons button,
.state.webcam-activate .dialog .buttons .button {
  margin: 0;
  font-size: 11px;
  padding: 10px;
}
.state.webcam-information .dialog {
  text-align: center;
  height: 100%;
}
.state.webcam-information .dialog .content {
  height: auto;
  bottom: 0;
  position: absolute;
}
.state.webcam-information h1,
.state.webcam-information h3 {
  font-size: 14px;
  padding: 0;
  color: #e83129;
  margin: 0;
  line-height: 1.5em;
}
.state.webcam-information h1,
.state.webcam-information h3 {
  margin-top: 30px;
  margin-bottom: 5px;
}
.state.webcam-information h3 {
  margin: 16px 0 0;
}
.state.webcam-information p,
.state.webcam-information ol {
  font-size: 11px;
  color: #e83129;
  letter-spacing: 2px;
}
.state.webcam-information ol {
  list-style: inside;
  list-style-type: decimal;
  line-height: 1.65em;
  margin-bottm: 10px;
}
.state.webcam-information ol li:before {
  counter-increment: item;
}
.state.webcam-information button,
.state.webcam-information a.button {
  margin: 20px 0px 30px 0px;
}
.state.webcam-information .alert-info {
  padding-right: 200px;
}
.state.webcam-waiting.active .dialog .animate {
  -webkit-transition-delay: 1.5s;
  -moz-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  -ms-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.state.game-over {
  text-align: center;
  height: 100%;
}
.state.game-over .bitmap {
  line-height: 1.2em;
}
.state.game-over .subtitle {
  color: #ffd059;
  margin: 0;
  font-size: 25px;
  text-shadow: 0 0.06em 0 #876b2a;
  line-height: 1.2em;
  margin-top: -23px;
  margin-bottom: 10px;
}
.state.game-over #opponent-levels:after {
  background: #4184c6;
}
.state.game-over .dialog {
  height: 33%;
  min-height: 266px;
}
.state.game-over .dialog .animate {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  transition-delay: 500ms;
}
.state.game-over .scoreboard {
  color: #e83129;
  padding: 0px 0px 30px 0px;
}
.state.game-over .scoreboard.multiplayer .levels:last-child {
  margin-left: 8px;
}
.state.game-over .scoreboard.multiplayer .social {
  margin: 42px 0 20px;
}
.state.game-over .scoreboard.multiplayer h3 {
  padding: 10px 0 19px;
}
.state.game-over .scoreboard div {
  display: block;
}
.state.game-over .scoreboard div:last-child {
  margin-right: 0px;
}
.state.game-over button {
  width: 289px;
  padding-left: 0;
  padding-right: 0;
}
.state.game-over button:last-child {
  margin-left: 17px;
}
.state.game-over ul.social .icon {
  background: #40a040;
  color: #f9f9db;
}
.state.game-over ul.social .icon:hover {
  color: #40a040;
  background: #f9f9db;
  border-color: #40a040;
}
.state.game-over h3 {
  padding: 4px 0 17px;
}
.state.game-over .levels {
  font-size: 24px;
  height: 50px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 21px 0 0 0;
  color: #f9f9db;
  margin-bottom: 20px;
  min-width: 52px;
  position: relative;
}
.state.game-over .levels:after {
  width: 50px;
  height: 50px;
  position: absolute;
  display: block;
  content: ' ';
  top: 0;
  left: 50%;
  margin-left: -25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  background: #e83129;
}
.state.game-over .levels span {
  display: block;
  font-size: 11px;
  margin-top: 31px;
  color: #4184c6;
}
.state.game-over i {
  position: relative;
  z-index: 1;
  font-style: normal;
  letter-spacing: 0;
}
.state.game-instructions {
  z-index: 3;
}
.state.game-instructions .info-animation {
  display: inline-block;
}
.state.game-instructions .info-animation p {
  font-size: 14px;
  white-space: nowrap;
  width: 490px;
  margin-left: -145px;
}
.state.game-instructions .info-animation.hidden {
  display: none;
}
.state.game-cssinfo {
  background: #08141d;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  pointer-events: painted;
  -webkit-overflow-scrolling: touch;
}
.state.game-cssinfo .content {
  margin: 0 auto;
  width: 320px;
  padding: 15px 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.state.game-cssinfo img {
  width: 100%;
  height: auto;
  margin: 15px auto;
}
.state.game-cssinfo p {
  text-align: center;
  margin: 0;
}
.state.game-cssinfo p,
.state.game-cssinfo a {
  color: #f9f9db;
  font-size: 13px;
  line-height: 1.4em;
  letter-spacing: 0;
  text-transform: inherit;
}
.state.game-cssinfo .terms {
  display: block;
  padding: 15px;
  text-align: center;
}
.state.game-cssinfo .buttons {
  position: fixed !important;
}
.state.game-cssinfo h1,
.state.game-cssinfo h2 {
  color: #f9f9db;
  font-size: 18px;
  line-height: 1.4em;
  text-transform: uppercase;
  text-align: center;
  margin: 27px auto 0px;
  max-width: 220px;
  min-height: 60px;
}
#scores {
  color: #f9f9db;
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 6%;
  line-height: 15px;
  text-transform: uppercase;
}
#scores .logo {
  font-size: 11px;
}
#scores .logo h1 {
  margin: 0;
  font-size: 11px;
}
#scores .logo img {
  margin-bottom: 14px;
}
#scores .logo .level {
  margin-top: 1px;
}
#scores.inactive {
  display: none;
}
#scores .player,
#scores .opponent {
  margin-top: 5px;
}
#scores .player p,
#scores .opponent p {
  font-size: 11px;
  margin: 0 0 8px;
}
#scores .player {
  margin-top: 13px;
}
#scores ol li {
  -webkit-perspective: 20;
  -moz-perspective: 20;
  -ms-perspective: 20;
  perspective: 20;
  width: 46px;
  height: 46px;
  border: 2px solid #f9f9db;
  display: inline-block;
  margin-left: 4px;
  position: relative;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  -moz-transition: -moz-transform 300ms ease-in-out;
  -o-transition: -o-transform 300ms ease-in-out;
  -ms-transition: -ms-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  perspective: 2000px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: visible;
}
#scores ol li:nth-child(1) {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
  transition-delay: 400ms;
}
#scores ol li:nth-child(2) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  transition-delay: 200ms;
}
#scores ol li:nth-child(3) {
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  transition-delay: 0ms;
}
#scores ol li:before {
  content: '';
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #f9f9db;
  border: 2px solid #f9f9db;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#scores ol li:first-child {
  margin-left: 0;
}
#scores ol li.active {
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  transition-delay: 1200ms;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-animation: score-blink 0.5s 12;
  -moz-animation: score-blink 0.5s 12;
  -o-animation: score-blink 0.5s 12;
  -ms-animation: score-blink 0.5s 12;
  animation: score-blink 0.5s 12;
}
#scores .opponent li.active {
  -webkit-transition-delay: 2500ms;
  -moz-transition-delay: 2500ms;
  -o-transition-delay: 2500ms;
  -ms-transition-delay: 2500ms;
  transition-delay: 2500ms;
}
#scores.no-transforms ol li {
  background: transparent;
  -webkit-transform: rotateY(0deg) !important;
  -moz-transform: rotateY(0deg) !important;
  -o-transform: rotateY(0deg) !important;
  -ms-transform: rotateY(0deg) !important;
  transform: rotateY(0deg) !important;
}
#scores.no-transforms ol li:before {
  -webkit-transform: rotateY(0deg) !important;
  -moz-transform: rotateY(0deg) !important;
  -o-transform: rotateY(0deg) !important;
  -ms-transform: rotateY(0deg) !important;
  transform: rotateY(0deg) !important;
  background: transparent;
}
#scores.no-transforms ol li.active {
  -webkit-transform: rotateY(0deg) !important;
  -moz-transform: rotateY(0deg) !important;
  -o-transform: rotateY(0deg) !important;
  -ms-transform: rotateY(0deg) !important;
  transform: rotateY(0deg) !important;
  background: #f9f9db;
  -webkit-animation: score-blink 0.5s 3;
  -moz-animation: score-blink 0.5s 3;
  -o-animation: score-blink 0.5s 3;
  -ms-animation: score-blink 0.5s 3;
  animation: score-blink 0.5s 3;
}
#level.inactive {
  display: none;
}
#extras {
  position: absolute;
  right: 10%;
  top: 16%;
  font-size: 12px;
  text-transform: uppercase;
}
#extras ul {
  width: 300px;
  color: #f9f9db;
}
#extras li {
  margin-bottom: 10px;
  padding: 20px 5px 0 0;
  text-align: right;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  height: 36px;
  position: relative;
  font-size: 0.8em;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity, -webkit-transform, top;
  -moz-transition-property: opacity, -moz-transform, top;
  -o-transition-property: opacity, -o-transform, top;
  -ms-transition-property: opacity, -ms-transform, top;
  transition-property: opacity, transform, top;
  position: absolute;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -o-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  top: 0;
}
#extras li.visible {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
#extras li.active {
  -webkit-animation: extra-active 1s infinite;
  -moz-animation: extra-active 1s infinite;
  -o-animation: extra-active 1s infinite;
  -ms-animation: extra-active 1s infinite;
  animation: extra-active 1s infinite;
  animation-timing-funciton: ease-in-out;
}
#extras li.active span {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  display: inline-block;
}
#extras li:before {
  font-size: 4.4em;
  line-height: 1em;
  letter-spacing: 0;
  padding: 0.5em 0.5em;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  right: -68px;
  top: -18px;
}
.game-controls {
  width: 100%;
}
.game-controls .animation {
  margin: 3px 0 38px;
}
.game-controls .animation > div {
  display: inline-block;
}
.game-controls .animation > p {
  display: inline-block;
  vertical-align: top;
  margin: 42px 7px 0;
}
h1,
h2,
h3 {
  font-weight: normal;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
button,
a.button {
  cursor: pointer;
  font-family: 'Varela', sans-serif;
  font-size: 14px;
  line-height: 14px;
  width: auto;
  border-top: 5px solid #f9f9db;
  border-left: 5px solid #f9f9db;
  border-right: 5px solid #a7a793;
  border-bottom: 5px solid #a7a793;
  color: #449744;
  background: #e2e2c5;
  padding: 10px 50px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 10px;
}
button:hover,
a.button:hover {
  background: #d2d2b5;
}
button:hover.green,
a.button:hover.green {
  background: #40a040;
}
button:hover.blue,
a.button:hover.blue {
  background: #4376a7;
}
button:hover.alternative,
a.button:hover.alternative {
  background: #e83028;
  color: #faf9db;
}
button:hover.alternative.green,
a.button:hover.alternative.green {
  background: #4daf4d;
}
button:hover.red,
a.button:hover.red {
  background-color: #f9f9db;
  border-color: #e83129;
  color: #e83129;
}
button:active.green,
a.button:active.green {
  background: #3b873c;
  outline-color: #3a863b;
  border-top-color: #2d642b;
  border-left-color: #2d642b;
  border-bottom-color: #449745;
  border-right-color: #449745;
  color: #faf9da;
}
button:active.blue,
a.button:active.blue {
  background: #3d74ac;
  outline-color: #3d74ac;
  border-top-color: #20578f;
  border-left-color: #20578f;
  border-bottom-color: #4c80b9;
  border-right-color: #4c80b9;
  color: #c4c4ac;
}
button:active.red,
a.button:active.red {
  border-color: #aa2b25;
  background: #aa2b25;
  color: #f9f9db;
}
button.green,
a.button.green {
  color: #f9f9db;
  background: #4daf4d;
  border-top-color: #58c458;
  border-left-color: #58c458;
  border-bottom-color: #398239;
  border-right-color: #398239;
  outline: solid 2px #4daf4d;
}
button.blue,
a.button.blue {
  color: #f9f9db;
  background: #5194d6;
  border-top-color: #62a5e7;
  border-left-color: #62a5e7;
  border-bottom-color: #2e71b3;
  border-right-color: #2e71b3;
  outline: solid 2px #5194d6;
}
button.red,
a.button.red {
  border: 1px solid transparent;
  background: #e83129;
  color: #f9f9db;
}
button.alternative,
a.button.alternative {
  font-family: 'Varela', sans-serif;
  font-size: 12px;
  line-height: 12px;
  background: none;
  color: #e83028;
  border: 1px solid #e83028;
  padding: 5px 12px 6px 12px;
  margin: 0px 4px 0px 3px;
  text-decoration: none;
}
button.alternative.green,
a.button.alternative.green {
  background: none;
  color: #4daf4d;
  border: 1px solid #4daf4d;
}
button:disabled,
a.button:disabled,
button.disabled,
a.button.disabled,
button:disabled:hover,
a.button:disabled:hover {
  color: #577da3;
  background: #31669a !important;
  border-color: #2c5f91;
  outline: solid 2px #3e7dbc;
}
a.button {
  display: inline-block;
}
.alert-info {
  color: #f52c1f;
  line-height: 1.5em;
  font-size: 12px;
  text-transform: uppercase;
  padding: 3px 44px 1px 44px;
  position: relative;
}
.alert-info:after {
  -webkit-border-radius: 14px;
  border-radius: 14px;
  width: 28px;
  height: 28px;
  display: block;
  background-color: #f52c1f;
  content: ' ';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
  -webkit-animation: webcam-attention 1s infinite;
  -moz-animation: webcam-attention 1s infinite;
  -o-animation: webcam-attention 1s infinite;
  -ms-animation: webcam-attention 1s infinite;
  animation: webcam-attention 1s infinite;
}
.keyboard {
  margin-left: 0.5em;
}
.icons-sprite,
.icons-cam,
.icons-cam__spinner,
.icons-cross-fail,
.icons-key-arrow-left,
.icons-key-arrow-right,
.icons-mouse,
.icon-webcam,
.icon-quarter-circle,
.icon-arrow-left,
.icon-arrow-right,
.icon-cross,
.icon-mouse {
  background: url("../images/icons-s4e56167bd4.png") no-repeat;
}
.icons-sprite,
.icon-webcam,
.icon-quarter-circle,
.icon-arrow-left,
.icon-arrow-right,
.icon-cross,
.icon-mouse,
.icon-destroy-shield-weapon {
  background: url("../images/icons-s2edcc2712a.png") no-repeat;
}
.icons-cam {
  background-position: 0 0;
}
.icons-cam__spinner {
  background-position: 0 -205px;
}
.icons-cross-fail {
  background-position: 0 -161px;
}
.icons-key-arrow-left {
  background-position: 0 -321px;
}
.icons-key-arrow-right {
  background-position: 0 -310px;
}
.icons-mouse {
  background-position: 0 -260px;
}
.icon-webcam {
  background-position: 0 0;
  height: 65px;
  width: 51px;
}
.icon-destroy-shield-weapon {
  background-position: 0 -332px;
  height: 24px;
  width: 24px;
}
.icon-quarter-circle {
  background-position: 0 -205px;
  height: 53px;
  width: 53px;
}
.icon-computer {
  height: 92px;
  width: 67px;
}
.icon-arrow-left {
  background-position: 0 -321px;
  height: 9px;
  width: 9px;
}
.icon-arrow-right {
  background-position: 0 -310px;
  height: 9px;
  width: 9px;
}
.icon-cross {
  background-position: 0 -161px;
  height: 42px;
  width: 42px;
}
.icon-mouse {
  background-position: 0 -260px;
  height: 48px;
  width: 39px;
}
.dash-white {
  background: #f9f9da;
}
.dash-black {
  background: #000;
}
.dash-beige {
  background: #f9f9db;
}
.dash-tall {
  width: 30px;
  height: 20px;
}
.dash-big {
  width: 30px;
  height: 6px;
}
.dash-medium {
  width: 14px;
  height: 4px;
}
.dash-small {
  width: 14px;
  height: 6px;
}
.webcam-spinner {
  position: relative;
  left: 50%;
  margin-left: -50px;
}
.webcam-spinner__bg {
  position: absolute;
  margin: 19px 0 0 27px;
}
.webcam-spinner__quarter {
  -webkit-animation: spinner-rotate 1.5s infinite;
  -moz-animation: spinner-rotate 1.5s infinite;
  -o-animation: spinner-rotate 1.5s infinite;
  -ms-animation: spinner-rotate 1.5s infinite;
  animation: spinner-rotate 1.5s infinite;
  height: 106px;
  width: 106px;
}
.cpu-wth-eyes {
  position: relative;
  left: 50%;
  margin-left: -34px;
  height: 92px;
  width: 67px;
}
.cpu-wth-eyes .cpu-wth-eyes__bg {
  position: absolute;
}
.cpu-wth-eyes__container {
  position: relative;
}
.cpu-wth-eyes__eyes {
  position: absolute;
  top: 24px;
  left: 17px;
}
.cpu-wth-eyes__eyes> divfirst-of-type {
  margin-right: 5px;
}
.cpu-wth-eyes__eyes> div {
  display: inline-block;
}
.play-anim .cpu-wth-eyes__eyes > div,
.reverse-anim .cpu-wth-eyes__eyes > div {
  -webkit-animation: cpu-blinking 2s;
  -moz-animation: cpu-blinking 2s;
  -o-animation: cpu-blinking 2s;
  -ms-animation: cpu-blinking 2s;
  animation: cpu-blinking 2s;
}
.blinking-eyes-anim-loop {
  -webkit-animation: cpu-blinking 2s infinite;
  -moz-animation: cpu-blinking 2s infinite;
  -o-animation: cpu-blinking 2s infinite;
  -ms-animation: cpu-blinking 2s infinite;
  animation: cpu-blinking 2s infinite;
}
.sad-left-eye-anim-loop {
  -webkit-animation: cpu-sad-left-eye 3s infinite;
  -moz-animation: cpu-sad-left-eye 3s infinite;
  -o-animation: cpu-sad-left-eye 3s infinite;
  -ms-animation: cpu-sad-left-eye 3s infinite;
  animation: cpu-sad-left-eye 3s infinite;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.sad-right-eye-anim-loop {
  -webkit-animation: cpu-sad-right-eye 3s infinite;
  -moz-animation: cpu-sad-right-eye 3s infinite;
  -o-animation: cpu-sad-right-eye 3s infinite;
  -ms-animation: cpu-sad-right-eye 3s infinite;
  animation: cpu-sad-right-eye 3s infinite;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.play-anim .dash-anim-line > div,
.reverse-anim .dash-anim-line > div {
  -webkit-animation: up-and-down 2s;
  -moz-animation: up-and-down 2s;
  -o-animation: up-and-down 2s;
  -ms-animation: up-and-down 2s;
  animation: up-and-down 2s;
}
.cpu-conn-anim {
  position: relative;
}
.cpu-conn-anim > div {
  display: inline-block;
}
.dash-anim-line {
  position: relative;
  vertical-align: top;
  top: 34px;
  margin: 0 10px;
}
.dash-anim-line>divlast-of-type {
  margin-right: 0;
}
.dash-anim-line>div {
  display: inline-block;
  margin-right: 5px;
}
.play-anim .cpu-wth-eyeslast-of-type .cpu-wth-eyes__eyes > div {
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  -o-animation-delay: 1.4s;
  -ms-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.play-anim .dash-anim-line > div:nth-of-type(1) {
  -webkit-animation-delay: 850ms;
  -moz-animation-delay: 850ms;
  -o-animation-delay: 850ms;
  -ms-animation-delay: 850ms;
  animation-delay: 850ms;
}
.play-anim .dash-anim-line > div:nth-of-type(2) {
  -webkit-animation-delay: 950ms;
  -moz-animation-delay: 950ms;
  -o-animation-delay: 950ms;
  -ms-animation-delay: 950ms;
  animation-delay: 950ms;
}
.play-anim .dash-anim-line > div:nth-of-type(3) {
  -webkit-animation-delay: 1050ms;
  -moz-animation-delay: 1050ms;
  -o-animation-delay: 1050ms;
  -ms-animation-delay: 1050ms;
  animation-delay: 1050ms;
}
.play-anim .dash-anim-line > div:nth-of-type(4) {
  -webkit-animation-delay: 1150ms;
  -moz-animation-delay: 1150ms;
  -o-animation-delay: 1150ms;
  -ms-animation-delay: 1150ms;
  animation-delay: 1150ms;
}
.play-anim .dash-anim-line > div:nth-of-type(5) {
  -webkit-animation-delay: 1250ms;
  -moz-animation-delay: 1250ms;
  -o-animation-delay: 1250ms;
  -ms-animation-delay: 1250ms;
  animation-delay: 1250ms;
}
.play-anim .dash-anim-line > div:nth-of-type(6) {
  -webkit-animation-delay: 1350ms;
  -moz-animation-delay: 1350ms;
  -o-animation-delay: 1350ms;
  -ms-animation-delay: 1350ms;
  animation-delay: 1350ms;
}
.play-anim .dash-anim-line > div:nth-of-type(7) {
  -webkit-animation-delay: 1450ms;
  -moz-animation-delay: 1450ms;
  -o-animation-delay: 1450ms;
  -ms-animation-delay: 1450ms;
  animation-delay: 1450ms;
}
.play-anim .dash-anim-line > div:nth-of-type(8) {
  -webkit-animation-delay: 1550ms;
  -moz-animation-delay: 1550ms;
  -o-animation-delay: 1550ms;
  -ms-animation-delay: 1550ms;
  animation-delay: 1550ms;
}
.play-anim .dash-anim-line > div:nth-of-type(9) {
  -webkit-animation-delay: 1650ms;
  -moz-animation-delay: 1650ms;
  -o-animation-delay: 1650ms;
  -ms-animation-delay: 1650ms;
  animation-delay: 1650ms;
}
.reverse-anim .cpu-wth-eyesfirst-of-type .cpu-wth-eyes__eyes > div {
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  -o-animation-delay: 1.4s;
  -ms-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.reverse-anim .dash-anim-line > div:nth-of-type(10) {
  -webkit-animation-delay: 750ms;
  -moz-animation-delay: 750ms;
  -o-animation-delay: 750ms;
  -ms-animation-delay: 750ms;
  animation-delay: 750ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(9) {
  -webkit-animation-delay: 850ms;
  -moz-animation-delay: 850ms;
  -o-animation-delay: 850ms;
  -ms-animation-delay: 850ms;
  animation-delay: 850ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(8) {
  -webkit-animation-delay: 950ms;
  -moz-animation-delay: 950ms;
  -o-animation-delay: 950ms;
  -ms-animation-delay: 950ms;
  animation-delay: 950ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(7) {
  -webkit-animation-delay: 1050ms;
  -moz-animation-delay: 1050ms;
  -o-animation-delay: 1050ms;
  -ms-animation-delay: 1050ms;
  animation-delay: 1050ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(6) {
  -webkit-animation-delay: 1150ms;
  -moz-animation-delay: 1150ms;
  -o-animation-delay: 1150ms;
  -ms-animation-delay: 1150ms;
  animation-delay: 1150ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(5) {
  -webkit-animation-delay: 1250ms;
  -moz-animation-delay: 1250ms;
  -o-animation-delay: 1250ms;
  -ms-animation-delay: 1250ms;
  animation-delay: 1250ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(4) {
  -webkit-animation-delay: 1350ms;
  -moz-animation-delay: 1350ms;
  -o-animation-delay: 1350ms;
  -ms-animation-delay: 1350ms;
  animation-delay: 1350ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(3) {
  -webkit-animation-delay: 1450ms;
  -moz-animation-delay: 1450ms;
  -o-animation-delay: 1450ms;
  -ms-animation-delay: 1450ms;
  animation-delay: 1450ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(2) {
  -webkit-animation-delay: 1550ms;
  -moz-animation-delay: 1550ms;
  -o-animation-delay: 1550ms;
  -ms-animation-delay: 1550ms;
  animation-delay: 1550ms;
}
.reverse-anim .dash-anim-line > div:nth-of-type(1) {
  -webkit-animation-delay: 1650ms;
  -moz-animation-delay: 1650ms;
  -o-animation-delay: 1650ms;
  -ms-animation-delay: 1650ms;
  animation-delay: 1650ms;
}
.key {
  position: relative;
}
.key__label {
  position: absolute;
  font-size: 11px;
  text-align: center;
}
.key__bg-inner {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  position: absolute;
  border: 1px solid #000;
  border-top: 0;
  margin-left: 3px;
  margin-top: -1px;
}
.key__bg-outer {
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border: 2px solid #000;
}
.key--small .icon-arrow-right {
  margin: 21px 0 0 24px;
}
.key--small .key__bg-inner {
  width: 44px;
  height: 43px;
}
.key--small .key__bg-outer {
  width: 52px;
  height: 48px;
}
.key--small .icon-arrow-left {
  margin: 21px 0 0 24px;
}
.key--big .key__label,
.key--big .key__bg-outer {
  width: 215px;
  height: 46px;
}
.key--big .key__bg-inner {
  width: 208px;
  height: 43px;
}
.key--big .key__label {
  margin-top: 20px;
}
.default-key-anim .key__label {
  -webkit-animation: keyleft-arrow-up-down 3s infinite;
  -moz-animation: keyleft-arrow-up-down 3s infinite;
  -o-animation: keyleft-arrow-up-down 3s infinite;
  -ms-animation: keyleft-arrow-up-down 3s infinite;
  animation: keyleft-arrow-up-down 3s infinite;
  -webkit-transform: translate(0, -2px);
  -moz-transform: translate(0, -2px);
  -o-transform: translate(0, -2px);
  -ms-transform: translate(0, -2px);
  transform: translate(0, -2px);
}
.default-key-anim .key__bg-inner {
  -webkit-animation: keyleft-fade-in-out 3s infinite;
  -moz-animation: keyleft-fade-in-out 3s infinite;
  -o-animation: keyleft-fade-in-out 3s infinite;
  -ms-animation: keyleft-fade-in-out 3s infinite;
  animation: keyleft-fade-in-out 3s infinite;
}
.kb-anim {
  position: relative;
}
.kb-anim .key {
  display: inline-block;
  margin: 15px 7px 0 0;
}
.kb-anim .dash-big {
  -webkit-animation: dash-right-to-left-to-right 3s infinite;
  -moz-animation: dash-right-to-left-to-right 3s infinite;
  -o-animation: dash-right-to-left-to-right 3s infinite;
  -ms-animation: dash-right-to-left-to-right 3s infinite;
  animation: dash-right-to-left-to-right 3s infinite;
  margin-left: 14px;
}
.kb-anim > div:nth-of-type(3) .key__label {
  -webkit-animation: keyright-arrow-down-up 3s infinite;
  -moz-animation: keyright-arrow-down-up 3s infinite;
  -o-animation: keyright-arrow-down-up 3s infinite;
  -ms-animation: keyright-arrow-down-up 3s infinite;
  animation: keyright-arrow-down-up 3s infinite;
}
.kb-anim > div:nth-of-type(3) .key__bg-inner {
  -webkit-animation: keyright-fade-out-in 3s infinite;
  -moz-animation: keyright-fade-out-in 3s infinite;
  -o-animation: keyright-fade-out-in 3s infinite;
  -ms-animation: keyright-fade-out-in 3s infinite;
  animation: keyright-fade-out-in 3s infinite;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.bubble {
  position: relative;
}
.bubble.error:before {
  color: #e83129;
}
.bubble.p1:before {
  color: #000;
}
.bubble.p1:after {
  color: #fff;
  content: 'p1';
}
.bubble:after {
  position: absolute;
  right: 10px;
  top: -45px;
  display: inline-block;
  content: '!';
  font-size: 33px;
  width: 55px;
  height: 55px;
  text-align: center;
}
.bubble:before {
  position: absolute;
  right: 12px;
  top: -60px;
  display: inline-block;
  width: 55px;
  height: 55px;
  font-family: 'icomoon';
  font-size: 55px;
  color: #000;
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: '"';
}
@-moz-keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg) scaleZ(0);
    -moz-transform: rotate(0deg) scaleZ(0);
    -o-transform: rotate(0deg) scaleZ(0);
    -ms-transform: rotate(0deg) scaleZ(0);
    transform: rotate(0deg) scaleZ(0);
  }

  100% {
    -webkit-transform: rotate(360deg) scaleZ(0);
    -moz-transform: rotate(360deg) scaleZ(0);
    -o-transform: rotate(360deg) scaleZ(0);
    -ms-transform: rotate(360deg) scaleZ(0);
    transform: rotate(360deg) scaleZ(0);
  }
}
@-webkit-keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg) scaleZ(0);
    -moz-transform: rotate(0deg) scaleZ(0);
    -o-transform: rotate(0deg) scaleZ(0);
    -ms-transform: rotate(0deg) scaleZ(0);
    transform: rotate(0deg) scaleZ(0);
  }

  100% {
    -webkit-transform: rotate(360deg) scaleZ(0);
    -moz-transform: rotate(360deg) scaleZ(0);
    -o-transform: rotate(360deg) scaleZ(0);
    -ms-transform: rotate(360deg) scaleZ(0);
    transform: rotate(360deg) scaleZ(0);
  }
}
@-o-keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg) scaleZ(0);
    -moz-transform: rotate(0deg) scaleZ(0);
    -o-transform: rotate(0deg) scaleZ(0);
    -ms-transform: rotate(0deg) scaleZ(0);
    transform: rotate(0deg) scaleZ(0);
  }

  100% {
    -webkit-transform: rotate(360deg) scaleZ(0);
    -moz-transform: rotate(360deg) scaleZ(0);
    -o-transform: rotate(360deg) scaleZ(0);
    -ms-transform: rotate(360deg) scaleZ(0);
    transform: rotate(360deg) scaleZ(0);
  }
}
@-ms-keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg) scaleZ(0);
    -moz-transform: rotate(0deg) scaleZ(0);
    -o-transform: rotate(0deg) scaleZ(0);
    -ms-transform: rotate(0deg) scaleZ(0);
    transform: rotate(0deg) scaleZ(0);
  }

  100% {
    -webkit-transform: rotate(360deg) scaleZ(0);
    -moz-transform: rotate(360deg) scaleZ(0);
    -o-transform: rotate(360deg) scaleZ(0);
    -ms-transform: rotate(360deg) scaleZ(0);
    transform: rotate(360deg) scaleZ(0);
  }
}
@keyframes spinner-rotate {
  0% {
    -webkit-transform: rotate(0deg) scaleZ(0);
    -moz-transform: rotate(0deg) scaleZ(0);
    -o-transform: rotate(0deg) scaleZ(0);
    -ms-transform: rotate(0deg) scaleZ(0);
    transform: rotate(0deg) scaleZ(0);
  }

  100% {
    -webkit-transform: rotate(360deg) scaleZ(0);
    -moz-transform: rotate(360deg) scaleZ(0);
    -o-transform: rotate(360deg) scaleZ(0);
    -ms-transform: rotate(360deg) scaleZ(0);
    transform: rotate(360deg) scaleZ(0);
  }
}
@-moz-keyframes cpu-blinking {
  20%, 40%, 50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  30%, 45% {
    -webkit-transform: scaleY(0.2);
    -moz-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }
}
@-webkit-keyframes cpu-blinking {
  20%, 40%, 50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  30%, 45% {
    -webkit-transform: scaleY(0.2);
    -moz-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }
}
@-o-keyframes cpu-blinking {
  20%, 40%, 50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  30%, 45% {
    -webkit-transform: scaleY(0.2);
    -moz-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }
}
@-ms-keyframes cpu-blinking {
  20%, 40%, 50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  30%, 45% {
    -webkit-transform: scaleY(0.2);
    -moz-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }
}
@keyframes cpu-blinking {
  20%, 40%, 50% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  30%, 45% {
    -webkit-transform: scaleY(0.2);
    -moz-transform: scaleY(0.2);
    -o-transform: scaleY(0.2);
    -ms-transform: scaleY(0.2);
    transform: scaleY(0.2);
  }
}
@-moz-keyframes cpu-sad-right-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-webkit-keyframes cpu-sad-right-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-o-keyframes cpu-sad-right-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-ms-keyframes cpu-sad-right-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@keyframes cpu-sad-right-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-moz-keyframes cpu-sad-left-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-webkit-keyframes cpu-sad-left-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-o-keyframes cpu-sad-left-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-ms-keyframes cpu-sad-left-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@keyframes cpu-sad-left-eye {
  10%, 30%, 40%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  20%, 35% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  60%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-moz-keyframes dash-right-to-left-to-right {
  10%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 53% {
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    -o-transform: translate(80px, 0);
    -ms-transform: translate(80px, 0);
    transform: translate(80px, 0);
  }
}
@-webkit-keyframes dash-right-to-left-to-right {
  10%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 53% {
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    -o-transform: translate(80px, 0);
    -ms-transform: translate(80px, 0);
    transform: translate(80px, 0);
  }
}
@-o-keyframes dash-right-to-left-to-right {
  10%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 53% {
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    -o-transform: translate(80px, 0);
    -ms-transform: translate(80px, 0);
    transform: translate(80px, 0);
  }
}
@-ms-keyframes dash-right-to-left-to-right {
  10%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 53% {
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    -o-transform: translate(80px, 0);
    -ms-transform: translate(80px, 0);
    transform: translate(80px, 0);
  }
}
@keyframes dash-right-to-left-to-right {
  10%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 53% {
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    -o-transform: translate(80px, 0);
    -ms-transform: translate(80px, 0);
    transform: translate(80px, 0);
  }
}
@-moz-keyframes keyleft-fade-in-out {
  10%, 35%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 87% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-webkit-keyframes keyleft-fade-in-out {
  10%, 35%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 87% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-o-keyframes keyleft-fade-in-out {
  10%, 35%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 87% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-ms-keyframes keyleft-fade-in-out {
  10%, 35%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 87% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes keyleft-fade-in-out {
  10%, 35%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 87% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-moz-keyframes keyleft-arrow-up-down {
  10%, 35%, 95% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }

  47%, 87% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-webkit-keyframes keyleft-arrow-up-down {
  10%, 35%, 95% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }

  47%, 87% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-o-keyframes keyleft-arrow-up-down {
  10%, 35%, 95% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }

  47%, 87% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-ms-keyframes keyleft-arrow-up-down {
  10%, 35%, 95% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }

  47%, 87% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes keyleft-arrow-up-down {
  10%, 35%, 95% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }

  47%, 87% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@-moz-keyframes keyright-fade-out-in {
  10%, 35%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  47%, 87% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes keyright-fade-out-in {
  10%, 35%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  47%, 87% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes keyright-fade-out-in {
  10%, 35%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  47%, 87% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-ms-keyframes keyright-fade-out-in {
  10%, 35%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  47%, 87% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes keyright-fade-out-in {
  10%, 35%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  47%, 87% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes keyright-arrow-down-up {
  10%, 35%, 98% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 92% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }
}
@-webkit-keyframes keyright-arrow-down-up {
  10%, 35%, 98% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 92% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }
}
@-o-keyframes keyright-arrow-down-up {
  10%, 35%, 98% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 92% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }
}
@-ms-keyframes keyright-arrow-down-up {
  10%, 35%, 98% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 92% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }
}
@keyframes keyright-arrow-down-up {
  10%, 35%, 98% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  47%, 92% {
    -webkit-transform: translate(0, -2px);
    -moz-transform: translate(0, -2px);
    -o-transform: translate(0, -2px);
    -ms-transform: translate(0, -2px);
    transform: translate(0, -2px);
  }
}
.destroy-shield__label > p,
.destroy-shield__wall,
.destroy-shield__shields > div:nth-child(1),
.destroy-shield__weapon {
  -webkit-animation: 5s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -moz-animation: 5s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -o-animation: 5s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -ms-animation: 5s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  animation: 5s cubic-bezier(0.42, 0.8, 1, 1) infinite;
}
.destroy-shield {
  width: 210px;
  -webkit-perspective: 800;
  -moz-perspective: 800;
  -ms-perspective: 800;
  perspective: 800;
  position: relative;
}
.destroy-shield .wall {
  border: 2px solid #000;
  position: absolute;
}
.destroy-shield .wall.top {
  width: 100%;
  height: 15px;
  -webkit-transform: skewX(45deg) translate(9px, -19px);
  -moz-transform: skewX(45deg) translate(9px, -19px);
  -o-transform: skewX(45deg) translate(9px, -19px);
  -ms-transform: skewX(45deg) translate(9px, -19px);
  transform: skewX(45deg) translate(9px, -19px);
  position: relative;
  border-bottom: 0;
}
.destroy-shield .wall.left {
  width: 15px;
  height: 100%;
  -webkit-transform: skewY(45deg) translate(-19px, -9px);
  -moz-transform: skewY(45deg) translate(-19px, -9px);
  -o-transform: skewY(45deg) translate(-19px, -9px);
  -ms-transform: skewY(45deg) translate(-19px, -9px);
  transform: skewY(45deg) translate(-19px, -9px);
  position: relative;
  border-top: 0;
  border-right: 0;
  padding-top: 3px;
}
.destroy-shield__label {
  position: relative;
  height: 20px;
  margin-top: 80px;
  text-transform: uppercase;
  color: #e83129;
}
.destroy-shield__label > p {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.destroy-shield__label > p:nth-child(1) {
  -webkit-animation-name: shield-label-1;
  -moz-animation-name: shield-label-1;
  -o-animation-name: shield-label-1;
  -ms-animation-name: shield-label-1;
  animation-name: shield-label-1;
}
.destroy-shield__label > p:nth-child(2) {
  -webkit-animation-name: shield-label-2;
  -moz-animation-name: shield-label-2;
  -o-animation-name: shield-label-2;
  -ms-animation-name: shield-label-2;
  animation-name: shield-label-2;
}
.destroy-shield__anim-container {
  position: relative;
  top: 30px;
  left: 30px;
}
.destroy-shield__wall {
  -webkit-animation-name: shield-wall;
  -moz-animation-name: shield-wall;
  -o-animation-name: shield-wall;
  -ms-animation-name: shield-wall;
  animation-name: shield-wall;
  -webkit-transform: skewY(-20.6deg);
  -moz-transform: skewY(-20.6deg);
  -o-transform: skewY(-20.6deg);
  -ms-transform: skewY(-20.6deg);
  transform: skewY(-20.6deg);
  position: relative;
  border: 2px solid #000;
  width: 104px;
  height: 63px;
}
.destroy-shield__eyes {
  position: absolute;
  top: 18px;
  left: 26px;
}
.destroy-shield__eyes > div {
  display: inline-block;
  width: 18px;
  height: 6px;
}
.destroy-shield__eyes > div:nth-child(1) {
  -webkit-animation: shield-right-eye 5s infinite;
  -moz-animation: shield-right-eye 5s infinite;
  -o-animation: shield-right-eye 5s infinite;
  -ms-animation: shield-right-eye 5s infinite;
  animation: shield-right-eye 5s infinite;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  margin-right: 12px;
}
.destroy-shield__eyes > div:nth-child(2) {
  -webkit-animation: shield-left-eye 5s infinite;
  -moz-animation: shield-left-eye 5s infinite;
  -o-animation: shield-left-eye 5s infinite;
  -ms-animation: shield-left-eye 5s infinite;
  animation: shield-left-eye 5s infinite;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.destroy-shield__shields {
  -webkit-transform: translate(2px, 10px);
  -moz-transform: translate(2px, 10px);
  -o-transform: translate(2px, 10px);
  -ms-transform: translate(2px, 10px);
  transform: translate(2px, 10px);
  overflow: hidden;
  position: absolute;
  left: 4px;
  bottom: 10px;
}
.destroy-shield__shields > div {
  float: left;
}
.destroy-shield__shields > div:nth-child(2) {
  margin: 0 3px;
}
.destroy-shield__shields > div:nth-child(1) {
  -webkit-animation-name: shield-blink;
  -moz-animation-name: shield-blink;
  -o-animation-name: shield-blink;
  -ms-animation-name: shield-blink;
  animation-name: shield-blink;
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  -o-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
}
.destroy-shield__weapon {
  -webkit-animation-name: shield-weapon-translation;
  -moz-animation-name: shield-weapon-translation;
  -o-animation-name: shield-weapon-translation;
  -ms-animation-name: shield-weapon-translation;
  animation-name: shield-weapon-translation;
  position: relative;
  top: 30px;
  left: 100px;
}
.cpu-conn-failed-anim > div {
  display: inline-block;
}
.cpu-conn-failed-anim .cpu-wth-eyes {
  left: inherit;
  margin: 0;
}
.cpu-conn-failed-anim .cross-fail-anim {
  vertical-align: top;
  margin-top: 24px;
}
.cpu-conn-failed-anim .dash-anim-line > div {
  -webkit-animation: up-and-down 4s infinite;
  -moz-animation: up-and-down 4s infinite;
  -o-animation: up-and-down 4s infinite;
  -ms-animation: up-and-down 4s infinite;
  animation: up-and-down 4s infinite;
}
.cpu-conn-failed-anim div:nth-child(2) > div:nth-of-type(1) {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  animation-delay: 300ms;
}
.cpu-conn-failed-anim div:nth-child(2) > div:nth-of-type(2) {
  -webkit-animation-delay: 400ms;
  -moz-animation-delay: 400ms;
  -o-animation-delay: 400ms;
  -ms-animation-delay: 400ms;
  animation-delay: 400ms;
}
.cpu-conn-failed-anim div:nth-child(2) > div:nth-of-type(3) {
  -webkit-animation-delay: 500ms;
  -moz-animation-delay: 500ms;
  -o-animation-delay: 500ms;
  -ms-animation-delay: 500ms;
  animation-delay: 500ms;
}
.cpu-conn-failed-anim div:nth-child(4) > div:nth-of-type(3) {
  -webkit-animation-delay: 320ms;
  -moz-animation-delay: 320ms;
  -o-animation-delay: 320ms;
  -ms-animation-delay: 320ms;
  animation-delay: 320ms;
}
.cpu-conn-failed-anim div:nth-child(4) > div:nth-of-type(2) {
  -webkit-animation-delay: 420ms;
  -moz-animation-delay: 420ms;
  -o-animation-delay: 420ms;
  -ms-animation-delay: 420ms;
  animation-delay: 420ms;
}
.cpu-conn-failed-anim div:nth-child(4) > div:nth-of-type(1) {
  -webkit-animation-delay: 520ms;
  -moz-animation-delay: 520ms;
  -o-animation-delay: 520ms;
  -ms-animation-delay: 520ms;
  animation-delay: 520ms;
}
.cross-fail-anim {
  -webkit-animation: cpu-failed-cross 500ms;
  -moz-animation: cpu-failed-cross 500ms;
  -o-animation: cpu-failed-cross 500ms;
  -ms-animation: cpu-failed-cross 500ms;
  animation: cpu-failed-cross 500ms;
}
.loading__anim .ball,
.loading__anim .pad {
  position: absolute;
  width: 3px;
  background: #f9f9db;
}
.loading__anim {
  width: 62px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -87px 0 0 -32px;
}
.loading__label {
  display: none;
  margin-top: 20px;
  color: #e83129;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.loading__anim .ball {
  -webkit-animation: loading-ball 2.8s linear infinite both;
  -moz-animation: loading-ball 2.8s linear infinite both;
  -o-animation: loading-ball 2.8s linear infinite both;
  -ms-animation: loading-ball 2.8s linear infinite both;
  animation: loading-ball 2.8s linear infinite both;
  -webkit-transform: translate(16px, 44px);
  -moz-transform: translate(16px, 44px);
  -o-transform: translate(16px, 44px);
  -ms-transform: translate(16px, 44px);
  transform: translate(16px, 44px);
  height: 3px;
}
.loading__anim .pad {
  height: 13px;
}
.loading__anim .pad:nth-child(1) {
  -webkit-animation: loading-pad-left 2.8s linear infinite both;
  -moz-animation: loading-pad-left 2.8s linear infinite both;
  -o-animation: loading-pad-left 2.8s linear infinite both;
  -ms-animation: loading-pad-left 2.8s linear infinite both;
  animation: loading-pad-left 2.8s linear infinite both;
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -o-transform: translateY(40px);
  -ms-transform: translateY(40px);
  transform: translateY(40px);
  left: 0;
}
.loading__anim .pad:nth-child(3) {
  -webkit-animation: loading-pad-right 2.8s linear infinite both;
  -moz-animation: loading-pad-right 2.8s linear infinite both;
  -o-animation: loading-pad-right 2.8s linear infinite both;
  -ms-animation: loading-pad-right 2.8s linear infinite both;
  animation: loading-pad-right 2.8s linear infinite both;
  -webkit-transform: translateY(55px);
  -moz-transform: translateY(55px);
  -o-transform: translateY(55px);
  -ms-transform: translateY(55px);
  transform: translateY(55px);
  right: 0;
}
.swipe-animation {
  position: relative;
  width: 210px;
  margin: -110px auto 0;
}
.swipe-animation .device {
  font-size: 92px;
  -webkit-animation: swipe-device-animation 7s linear infinite both;
  -moz-animation: swipe-device-animation 7s linear infinite both;
  -o-animation: swipe-device-animation 7s linear infinite both;
  -ms-animation: swipe-device-animation 7s linear infinite both;
  animation: swipe-device-animation 7s linear infinite both;
}
.swipe-animation .loading__anim {
  position: relative;
  margin: 0;
  top: -53px;
  left: 113px;
  -webkit-transform: rotate(90deg) scale(0.7);
  -moz-transform: rotate(90deg) scale(0.7);
  -o-transform: rotate(90deg) scale(0.7);
  -ms-transform: rotate(90deg) scale(0.7);
  transform: rotate(90deg) scale(0.7);
  -webkit-animation: swipe-game-animation 7s linear infinite both;
  -moz-animation: swipe-game-animation 7s linear infinite both;
  -o-animation: swipe-game-animation 7s linear infinite both;
  -ms-animation: swipe-game-animation 7s linear infinite both;
  animation: swipe-game-animation 7s linear infinite both;
}
.swipe-animation .dashed-line {
  height: 1px;
  width: 31px;
  border-top: 1px dotted #f9f9db;
  position: absolute;
  top: 40px;
  left: 89px;
  -webkit-animation: swipe-line-animation 7s linear infinite both;
  -moz-animation: swipe-line-animation 7s linear infinite both;
  -o-animation: swipe-line-animation 7s linear infinite both;
  -ms-animation: swipe-line-animation 7s linear infinite both;
  animation: swipe-line-animation 7s linear infinite both;
  content: ' ';
  display: block;
}
.swipe-animation .keys {
  position: absolute;
  top: 42px;
  left: 90px;
  width: 2px;
  height: 2px;
}
.swipe-animation .keys .right,
.swipe-animation .keys .left {
  width: 8px;
  height: 8px;
  background: #f9f9db;
  position: absolute;
  content: ' ';
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
.swipe-animation .keys .left {
  -webkit-animation: swipe-button-left-animation 7s linear infinite both;
  -moz-animation: swipe-button-left-animation 7s linear infinite both;
  -o-animation: swipe-button-left-animation 7s linear infinite both;
  -ms-animation: swipe-button-left-animation 7s linear infinite both;
  animation: swipe-button-left-animation 7s linear infinite both;
}
.swipe-animation .keys .right {
  left: 37px;
  -webkit-animation: swipe-button-right-animation 7s linear infinite both;
  -moz-animation: swipe-button-right-animation 7s linear infinite both;
  -o-animation: swipe-button-right-animation 7s linear infinite both;
  -ms-animation: swipe-button-right-animation 7s linear infinite both;
  animation: swipe-button-right-animation 7s linear infinite both;
}
.swipe-label {
  position: relative;
  top: 19px;
  line-height: 1.4em;
  width: 240px;
}
.swipe-label p {
  white-space: inherit !important;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-animation: 7s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -moz-animation: 7s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -o-animation: 7s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  -ms-animation: 7s cubic-bezier(0.42, 0.8, 1, 1) infinite;
  animation: 7s cubic-bezier(0.42, 0.8, 1, 1) infinite;
}
.swipe-label p:nth-child(1) {
  -webkit-animation-name: swipe-label-1;
  -moz-animation-name: swipe-label-1;
  -o-animation-name: swipe-label-1;
  -ms-animation-name: swipe-label-1;
  animation-name: swipe-label-1;
}
.swipe-label p:nth-child(2) {
  -webkit-animation-name: swipe-label-2;
  -moz-animation-name: swipe-label-2;
  -o-animation-name: swipe-label-2;
  -ms-animation-name: swipe-label-2;
  animation-name: swipe-label-2;
}
body.game-prompt-start .state.game-prompt .background {
  background-color: #40a040;
}
@-moz-keyframes score-blink {
  0%, 100% {
    background: rgba(0,0,0,0);
  }

  50% {
    background: #ffdc06;
  }
}
@-webkit-keyframes score-blink {
  0%, 100% {
    background: rgba(0,0,0,0);
  }

  50% {
    background: #ffdc06;
  }
}
@-o-keyframes score-blink {
  0%, 100% {
    background: rgba(0,0,0,0);
  }

  50% {
    background: #ffdc06;
  }
}
@-ms-keyframes score-blink {
  0%, 100% {
    background: rgba(0,0,0,0);
  }

  50% {
    background: #ffdc06;
  }
}
@keyframes score-blink {
  0%, 100% {
    background: rgba(0,0,0,0);
  }

  50% {
    background: #ffdc06;
  }
}
@-moz-keyframes shield-label-1 {
  10%, 40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-webkit-keyframes shield-label-1 {
  10%, 40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-o-keyframes shield-label-1 {
  10%, 40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-ms-keyframes shield-label-1 {
  10%, 40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes shield-label-1 {
  10%, 40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  47%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-moz-keyframes shield-label-2 {
  48% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  55%, 90% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes shield-label-2 {
  48% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  55%, 90% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes shield-label-2 {
  48% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  55%, 90% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-ms-keyframes shield-label-2 {
  48% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  55%, 90% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes shield-label-2 {
  48% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  55%, 90% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes shield-weapon-translation {
  31% {
    -webkit-transform: translate(-86px, -28px);
    -moz-transform: translate(-86px, -28px);
    -o-transform: translate(-86px, -28px);
    -ms-transform: translate(-86px, -28px);
    transform: translate(-86px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  25%, 39%, 65%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(-94px, -28px);
    -moz-transform: translate(-94px, -28px);
    -o-transform: translate(-94px, -28px);
    -ms-transform: translate(-94px, -28px);
    transform: translate(-94px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  71%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-webkit-keyframes shield-weapon-translation {
  31% {
    -webkit-transform: translate(-86px, -28px);
    -moz-transform: translate(-86px, -28px);
    -o-transform: translate(-86px, -28px);
    -ms-transform: translate(-86px, -28px);
    transform: translate(-86px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  25%, 39%, 65%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(-94px, -28px);
    -moz-transform: translate(-94px, -28px);
    -o-transform: translate(-94px, -28px);
    -ms-transform: translate(-94px, -28px);
    transform: translate(-94px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  71%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-o-keyframes shield-weapon-translation {
  31% {
    -webkit-transform: translate(-86px, -28px);
    -moz-transform: translate(-86px, -28px);
    -o-transform: translate(-86px, -28px);
    -ms-transform: translate(-86px, -28px);
    transform: translate(-86px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  25%, 39%, 65%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(-94px, -28px);
    -moz-transform: translate(-94px, -28px);
    -o-transform: translate(-94px, -28px);
    -ms-transform: translate(-94px, -28px);
    transform: translate(-94px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  71%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-ms-keyframes shield-weapon-translation {
  31% {
    -webkit-transform: translate(-86px, -28px);
    -moz-transform: translate(-86px, -28px);
    -o-transform: translate(-86px, -28px);
    -ms-transform: translate(-86px, -28px);
    transform: translate(-86px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  25%, 39%, 65%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(-94px, -28px);
    -moz-transform: translate(-94px, -28px);
    -o-transform: translate(-94px, -28px);
    -ms-transform: translate(-94px, -28px);
    transform: translate(-94px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  71%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes shield-weapon-translation {
  31% {
    -webkit-transform: translate(-86px, -28px);
    -moz-transform: translate(-86px, -28px);
    -o-transform: translate(-86px, -28px);
    -ms-transform: translate(-86px, -28px);
    transform: translate(-86px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  25%, 39%, 65%, 100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  70% {
    -webkit-transform: translate(-94px, -28px);
    -moz-transform: translate(-94px, -28px);
    -o-transform: translate(-94px, -28px);
    -ms-transform: translate(-94px, -28px);
    transform: translate(-94px, -28px);
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  71%, 100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-moz-keyframes shield-blink {
  34%, 39% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  31%, 36%, 42% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  45%, 100% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  51%, 90% {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes shield-blink {
  34%, 39% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  31%, 36%, 42% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  45%, 100% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  51%, 90% {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-o-keyframes shield-blink {
  34%, 39% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  31%, 36%, 42% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  45%, 100% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  51%, 90% {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-ms-keyframes shield-blink {
  34%, 39% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  31%, 36%, 42% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  45%, 100% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  51%, 90% {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@keyframes shield-blink {
  34%, 39% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  31%, 36%, 42% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  45%, 100% {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
  }

  51%, 90% {
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes shield-wall {
  0%, 100% {
    background: #000;
  }

  71%, 79% {
    background: #000;
  }

  75% {
    background: rgba(0,0,0,0.2);
  }
}
@-webkit-keyframes shield-wall {
  0%, 100% {
    background: #000;
  }

  71%, 79% {
    background: #000;
  }

  75% {
    background: rgba(0,0,0,0.2);
  }
}
@-o-keyframes shield-wall {
  0%, 100% {
    background: #000;
  }

  71%, 79% {
    background: #000;
  }

  75% {
    background: rgba(0,0,0,0.2);
  }
}
@-ms-keyframes shield-wall {
  0%, 100% {
    background: #000;
  }

  71%, 79% {
    background: #000;
  }

  75% {
    background: rgba(0,0,0,0.2);
  }
}
@keyframes shield-wall {
  0%, 100% {
    background: #000;
  }

  71%, 79% {
    background: #000;
  }

  75% {
    background: rgba(0,0,0,0.2);
  }
}
@-moz-keyframes shield-left-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-webkit-keyframes shield-left-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-o-keyframes shield-left-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-ms-keyframes shield-left-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@keyframes shield-left-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(20deg);
    -moz-transform: scaleY(1) rotate(20deg);
    -o-transform: scaleY(1) rotate(20deg);
    -ms-transform: scaleY(1) rotate(20deg);
    transform: scaleY(1) rotate(20deg);
  }
}
@-moz-keyframes shield-right-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-webkit-keyframes shield-right-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-o-keyframes shield-right-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-ms-keyframes shield-right-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@keyframes shield-right-eye {
  10%, 14%, 38%, 42%, 74%, 100% {
    -webkit-transform: scaleY(1) rotate(0deg);
    -moz-transform: scaleY(1) rotate(0deg);
    -o-transform: scaleY(1) rotate(0deg);
    -ms-transform: scaleY(1) rotate(0deg);
    transform: scaleY(1) rotate(0deg);
  }

  12%, 40% {
    -webkit-transform: scaleY(0.2) rotate(0deg);
    -moz-transform: scaleY(0.2) rotate(0deg);
    -o-transform: scaleY(0.2) rotate(0deg);
    -ms-transform: scaleY(0.2) rotate(0deg);
    transform: scaleY(0.2) rotate(0deg);
  }

  84%, 94% {
    -webkit-transform: scaleY(1) rotate(-20deg);
    -moz-transform: scaleY(1) rotate(-20deg);
    -o-transform: scaleY(1) rotate(-20deg);
    -ms-transform: scaleY(1) rotate(-20deg);
    transform: scaleY(1) rotate(-20deg);
  }
}
@-moz-keyframes up-and-down {
  0%, 20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  10% {
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}
@-webkit-keyframes up-and-down {
  0%, 20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  10% {
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}
@-o-keyframes up-and-down {
  0%, 20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  10% {
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}
@-ms-keyframes up-and-down {
  0%, 20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  10% {
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}
@keyframes up-and-down {
  0%, 20% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }

  10% {
    -webkit-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -ms-transform: translate(0, -20px);
    transform: translate(0, -20px);
  }
}
@-moz-keyframes cpu-failed-cross {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes cpu-failed-cross {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes cpu-failed-cross {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-ms-keyframes cpu-failed-cross {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes cpu-failed-cross {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes loading-ball {
  0%, 100% {
    -webkit-transform: translate(4px, 55px);
    -moz-transform: translate(4px, 55px);
    -o-transform: translate(4px, 55px);
    -ms-transform: translate(4px, 55px);
    transform: translate(4px, 55px);
  }

  22% {
    -webkit-transform: translate(58px, 77px);
    -moz-transform: translate(58px, 77px);
    -o-transform: translate(58px, 77px);
    -ms-transform: translate(58px, 77px);
    transform: translate(58px, 77px);
  }

  30% {
    -webkit-transform: translate(40px, 84px);
    -moz-transform: translate(40px, 84px);
    -o-transform: translate(40px, 84px);
    -ms-transform: translate(40px, 84px);
    transform: translate(40px, 84px);
  }

  44% {
    -webkit-transform: translate(4px, 72px);
    -moz-transform: translate(4px, 72px);
    -o-transform: translate(4px, 72px);
    -ms-transform: translate(4px, 72px);
    transform: translate(4px, 72px);
  }

  64% {
    -webkit-transform: translate(58px, 36px);
    -moz-transform: translate(58px, 36px);
    -o-transform: translate(58px, 36px);
    -ms-transform: translate(58px, 36px);
    transform: translate(58px, 36px);
  }

  70% {
    -webkit-transform: translate(50px, 28px);
    -moz-transform: translate(50px, 28px);
    -o-transform: translate(50px, 28px);
    -ms-transform: translate(50px, 28px);
    transform: translate(50px, 28px);
  }

  89% {
    -webkit-transform: translate(28px, 84px);
    -moz-transform: translate(28px, 84px);
    -o-transform: translate(28px, 84px);
    -ms-transform: translate(28px, 84px);
    transform: translate(28px, 84px);
  }
}
@-webkit-keyframes loading-ball {
  0%, 100% {
    -webkit-transform: translate(4px, 55px);
    -moz-transform: translate(4px, 55px);
    -o-transform: translate(4px, 55px);
    -ms-transform: translate(4px, 55px);
    transform: translate(4px, 55px);
  }

  22% {
    -webkit-transform: translate(58px, 77px);
    -moz-transform: translate(58px, 77px);
    -o-transform: translate(58px, 77px);
    -ms-transform: translate(58px, 77px);
    transform: translate(58px, 77px);
  }

  30% {
    -webkit-transform: translate(40px, 84px);
    -moz-transform: translate(40px, 84px);
    -o-transform: translate(40px, 84px);
    -ms-transform: translate(40px, 84px);
    transform: translate(40px, 84px);
  }

  44% {
    -webkit-transform: translate(4px, 72px);
    -moz-transform: translate(4px, 72px);
    -o-transform: translate(4px, 72px);
    -ms-transform: translate(4px, 72px);
    transform: translate(4px, 72px);
  }

  64% {
    -webkit-transform: translate(58px, 36px);
    -moz-transform: translate(58px, 36px);
    -o-transform: translate(58px, 36px);
    -ms-transform: translate(58px, 36px);
    transform: translate(58px, 36px);
  }

  70% {
    -webkit-transform: translate(50px, 28px);
    -moz-transform: translate(50px, 28px);
    -o-transform: translate(50px, 28px);
    -ms-transform: translate(50px, 28px);
    transform: translate(50px, 28px);
  }

  89% {
    -webkit-transform: translate(28px, 84px);
    -moz-transform: translate(28px, 84px);
    -o-transform: translate(28px, 84px);
    -ms-transform: translate(28px, 84px);
    transform: translate(28px, 84px);
  }
}
@-o-keyframes loading-ball {
  0%, 100% {
    -webkit-transform: translate(4px, 55px);
    -moz-transform: translate(4px, 55px);
    -o-transform: translate(4px, 55px);
    -ms-transform: translate(4px, 55px);
    transform: translate(4px, 55px);
  }

  22% {
    -webkit-transform: translate(58px, 77px);
    -moz-transform: translate(58px, 77px);
    -o-transform: translate(58px, 77px);
    -ms-transform: translate(58px, 77px);
    transform: translate(58px, 77px);
  }

  30% {
    -webkit-transform: translate(40px, 84px);
    -moz-transform: translate(40px, 84px);
    -o-transform: translate(40px, 84px);
    -ms-transform: translate(40px, 84px);
    transform: translate(40px, 84px);
  }

  44% {
    -webkit-transform: translate(4px, 72px);
    -moz-transform: translate(4px, 72px);
    -o-transform: translate(4px, 72px);
    -ms-transform: translate(4px, 72px);
    transform: translate(4px, 72px);
  }

  64% {
    -webkit-transform: translate(58px, 36px);
    -moz-transform: translate(58px, 36px);
    -o-transform: translate(58px, 36px);
    -ms-transform: translate(58px, 36px);
    transform: translate(58px, 36px);
  }

  70% {
    -webkit-transform: translate(50px, 28px);
    -moz-transform: translate(50px, 28px);
    -o-transform: translate(50px, 28px);
    -ms-transform: translate(50px, 28px);
    transform: translate(50px, 28px);
  }

  89% {
    -webkit-transform: translate(28px, 84px);
    -moz-transform: translate(28px, 84px);
    -o-transform: translate(28px, 84px);
    -ms-transform: translate(28px, 84px);
    transform: translate(28px, 84px);
  }
}
@-ms-keyframes loading-ball {
  0%, 100% {
    -webkit-transform: translate(4px, 55px);
    -moz-transform: translate(4px, 55px);
    -o-transform: translate(4px, 55px);
    -ms-transform: translate(4px, 55px);
    transform: translate(4px, 55px);
  }

  22% {
    -webkit-transform: translate(58px, 77px);
    -moz-transform: translate(58px, 77px);
    -o-transform: translate(58px, 77px);
    -ms-transform: translate(58px, 77px);
    transform: translate(58px, 77px);
  }

  30% {
    -webkit-transform: translate(40px, 84px);
    -moz-transform: translate(40px, 84px);
    -o-transform: translate(40px, 84px);
    -ms-transform: translate(40px, 84px);
    transform: translate(40px, 84px);
  }

  44% {
    -webkit-transform: translate(4px, 72px);
    -moz-transform: translate(4px, 72px);
    -o-transform: translate(4px, 72px);
    -ms-transform: translate(4px, 72px);
    transform: translate(4px, 72px);
  }

  64% {
    -webkit-transform: translate(58px, 36px);
    -moz-transform: translate(58px, 36px);
    -o-transform: translate(58px, 36px);
    -ms-transform: translate(58px, 36px);
    transform: translate(58px, 36px);
  }

  70% {
    -webkit-transform: translate(50px, 28px);
    -moz-transform: translate(50px, 28px);
    -o-transform: translate(50px, 28px);
    -ms-transform: translate(50px, 28px);
    transform: translate(50px, 28px);
  }

  89% {
    -webkit-transform: translate(28px, 84px);
    -moz-transform: translate(28px, 84px);
    -o-transform: translate(28px, 84px);
    -ms-transform: translate(28px, 84px);
    transform: translate(28px, 84px);
  }
}
@keyframes loading-ball {
  0%, 100% {
    -webkit-transform: translate(4px, 55px);
    -moz-transform: translate(4px, 55px);
    -o-transform: translate(4px, 55px);
    -ms-transform: translate(4px, 55px);
    transform: translate(4px, 55px);
  }

  22% {
    -webkit-transform: translate(58px, 77px);
    -moz-transform: translate(58px, 77px);
    -o-transform: translate(58px, 77px);
    -ms-transform: translate(58px, 77px);
    transform: translate(58px, 77px);
  }

  30% {
    -webkit-transform: translate(40px, 84px);
    -moz-transform: translate(40px, 84px);
    -o-transform: translate(40px, 84px);
    -ms-transform: translate(40px, 84px);
    transform: translate(40px, 84px);
  }

  44% {
    -webkit-transform: translate(4px, 72px);
    -moz-transform: translate(4px, 72px);
    -o-transform: translate(4px, 72px);
    -ms-transform: translate(4px, 72px);
    transform: translate(4px, 72px);
  }

  64% {
    -webkit-transform: translate(58px, 36px);
    -moz-transform: translate(58px, 36px);
    -o-transform: translate(58px, 36px);
    -ms-transform: translate(58px, 36px);
    transform: translate(58px, 36px);
  }

  70% {
    -webkit-transform: translate(50px, 28px);
    -moz-transform: translate(50px, 28px);
    -o-transform: translate(50px, 28px);
    -ms-transform: translate(50px, 28px);
    transform: translate(50px, 28px);
  }

  89% {
    -webkit-transform: translate(28px, 84px);
    -moz-transform: translate(28px, 84px);
    -o-transform: translate(28px, 84px);
    -ms-transform: translate(28px, 84px);
    transform: translate(28px, 84px);
  }
}
@-moz-keyframes loading-pad-left {
  0%, 100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  22% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  30%, 70% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  89% {
    -webkit-transform: translateY(58px);
    -moz-transform: translateY(58px);
    -o-transform: translateY(58px);
    -ms-transform: translateY(58px);
    transform: translateY(58px);
  }
}
@-webkit-keyframes loading-pad-left {
  0%, 100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  22% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  30%, 70% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  89% {
    -webkit-transform: translateY(58px);
    -moz-transform: translateY(58px);
    -o-transform: translateY(58px);
    -ms-transform: translateY(58px);
    transform: translateY(58px);
  }
}
@-o-keyframes loading-pad-left {
  0%, 100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  22% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  30%, 70% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  89% {
    -webkit-transform: translateY(58px);
    -moz-transform: translateY(58px);
    -o-transform: translateY(58px);
    -ms-transform: translateY(58px);
    transform: translateY(58px);
  }
}
@-ms-keyframes loading-pad-left {
  0%, 100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  22% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  30%, 70% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  89% {
    -webkit-transform: translateY(58px);
    -moz-transform: translateY(58px);
    -o-transform: translateY(58px);
    -ms-transform: translateY(58px);
    transform: translateY(58px);
  }
}
@keyframes loading-pad-left {
  0%, 100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  22% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  30%, 70% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  89% {
    -webkit-transform: translateY(58px);
    -moz-transform: translateY(58px);
    -o-transform: translateY(58px);
    -ms-transform: translateY(58px);
    transform: translateY(58px);
  }
}
@-moz-keyframes loading-pad-right {
  0%, 100% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  22%, 30% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  44% {
    -webkit-transform: translateY(64px);
    -moz-transform: translateY(64px);
    -o-transform: translateY(64px);
    -ms-transform: translateY(64px);
    transform: translateY(64px);
  }

  64%, 70% {
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -o-transform: translateY(32px);
    -ms-transform: translateY(32px);
    transform: translateY(32px);
  }

  89% {
    -webkit-transform: translateY(54px);
    -moz-transform: translateY(54px);
    -o-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
  }
}
@-webkit-keyframes loading-pad-right {
  0%, 100% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  22%, 30% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  44% {
    -webkit-transform: translateY(64px);
    -moz-transform: translateY(64px);
    -o-transform: translateY(64px);
    -ms-transform: translateY(64px);
    transform: translateY(64px);
  }

  64%, 70% {
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -o-transform: translateY(32px);
    -ms-transform: translateY(32px);
    transform: translateY(32px);
  }

  89% {
    -webkit-transform: translateY(54px);
    -moz-transform: translateY(54px);
    -o-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
  }
}
@-o-keyframes loading-pad-right {
  0%, 100% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  22%, 30% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  44% {
    -webkit-transform: translateY(64px);
    -moz-transform: translateY(64px);
    -o-transform: translateY(64px);
    -ms-transform: translateY(64px);
    transform: translateY(64px);
  }

  64%, 70% {
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -o-transform: translateY(32px);
    -ms-transform: translateY(32px);
    transform: translateY(32px);
  }

  89% {
    -webkit-transform: translateY(54px);
    -moz-transform: translateY(54px);
    -o-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
  }
}
@-ms-keyframes loading-pad-right {
  0%, 100% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  22%, 30% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  44% {
    -webkit-transform: translateY(64px);
    -moz-transform: translateY(64px);
    -o-transform: translateY(64px);
    -ms-transform: translateY(64px);
    transform: translateY(64px);
  }

  64%, 70% {
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -o-transform: translateY(32px);
    -ms-transform: translateY(32px);
    transform: translateY(32px);
  }

  89% {
    -webkit-transform: translateY(54px);
    -moz-transform: translateY(54px);
    -o-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
  }
}
@keyframes loading-pad-right {
  0%, 100% {
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }

  22%, 30% {
    -webkit-transform: translateY(70px);
    -moz-transform: translateY(70px);
    -o-transform: translateY(70px);
    -ms-transform: translateY(70px);
    transform: translateY(70px);
  }

  44% {
    -webkit-transform: translateY(64px);
    -moz-transform: translateY(64px);
    -o-transform: translateY(64px);
    -ms-transform: translateY(64px);
    transform: translateY(64px);
  }

  64%, 70% {
    -webkit-transform: translateY(32px);
    -moz-transform: translateY(32px);
    -o-transform: translateY(32px);
    -ms-transform: translateY(32px);
    transform: translateY(32px);
  }

  89% {
    -webkit-transform: translateY(54px);
    -moz-transform: translateY(54px);
    -o-transform: translateY(54px);
    -ms-transform: translateY(54px);
    transform: translateY(54px);
  }
}
@-moz-keyframes webcam-attention {
  0%, 100% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  33% {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
  }
}
@-webkit-keyframes webcam-attention {
  0%, 100% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  33% {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
  }
}
@-o-keyframes webcam-attention {
  0%, 100% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  33% {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
  }
}
@-ms-keyframes webcam-attention {
  0%, 100% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  33% {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
  }
}
@keyframes webcam-attention {
  0%, 100% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  33% {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
  }
}
@-moz-keyframes extra-active {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
}
@-webkit-keyframes extra-active {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
}
@-o-keyframes extra-active {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
}
@-ms-keyframes extra-active {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
}
@keyframes extra-active {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }
}
@-moz-keyframes swipe-device-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  30%, 77% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-webkit-keyframes swipe-device-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  30%, 77% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-o-keyframes swipe-device-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  30%, 77% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-ms-keyframes swipe-device-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  30%, 77% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes swipe-device-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  30%, 77% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-moz-keyframes swipe-game-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -moz-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -o-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -ms-transform: rotate(90deg) scale(0.7) translate(0, 0);
    transform: rotate(90deg) scale(0.7) translate(0, 0);
  }

  50%, 30%, 77% {
    -webkit-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -moz-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -o-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -ms-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    transform: rotate(90deg) scale(0.6) translate(10px, -12px);
  }
}
@-webkit-keyframes swipe-game-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -moz-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -o-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -ms-transform: rotate(90deg) scale(0.7) translate(0, 0);
    transform: rotate(90deg) scale(0.7) translate(0, 0);
  }

  50%, 30%, 77% {
    -webkit-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -moz-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -o-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -ms-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    transform: rotate(90deg) scale(0.6) translate(10px, -12px);
  }
}
@-o-keyframes swipe-game-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -moz-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -o-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -ms-transform: rotate(90deg) scale(0.7) translate(0, 0);
    transform: rotate(90deg) scale(0.7) translate(0, 0);
  }

  50%, 30%, 77% {
    -webkit-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -moz-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -o-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -ms-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    transform: rotate(90deg) scale(0.6) translate(10px, -12px);
  }
}
@-ms-keyframes swipe-game-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -moz-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -o-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -ms-transform: rotate(90deg) scale(0.7) translate(0, 0);
    transform: rotate(90deg) scale(0.7) translate(0, 0);
  }

  50%, 30%, 77% {
    -webkit-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -moz-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -o-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -ms-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    transform: rotate(90deg) scale(0.6) translate(10px, -12px);
  }
}
@keyframes swipe-game-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -moz-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -o-transform: rotate(90deg) scale(0.7) translate(0, 0);
    -ms-transform: rotate(90deg) scale(0.7) translate(0, 0);
    transform: rotate(90deg) scale(0.7) translate(0, 0);
  }

  50%, 30%, 77% {
    -webkit-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -moz-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -o-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    -ms-transform: rotate(90deg) scale(0.6) translate(10px, -12px);
    transform: rotate(90deg) scale(0.6) translate(10px, -12px);
  }
}
@-moz-keyframes swipe-button-left-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  49%, 75% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }
}
@-webkit-keyframes swipe-button-left-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  49%, 75% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }
}
@-o-keyframes swipe-button-left-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  49%, 75% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }
}
@-ms-keyframes swipe-button-left-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  49%, 75% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }
}
@keyframes swipe-button-left-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  49%, 75% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }
}
@-moz-keyframes swipe-button-right-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }

  75%, 49% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes swipe-button-right-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }

  75%, 49% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes swipe-button-right-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }

  75%, 49% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-ms-keyframes swipe-button-right-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }

  75%, 49% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes swipe-button-right-animation {
  0%, 100%, 30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  32%, 48% {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  }

  75%, 49% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes swipe-line-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 31px;
  }

  30%, 77% {
    -webkit-transform: translate(12px, 6px);
    -moz-transform: translate(12px, 6px);
    -o-transform: translate(12px, 6px);
    -ms-transform: translate(12px, 6px);
    transform: translate(12px, 6px);
    width: 23px;
  }
}
@-webkit-keyframes swipe-line-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 31px;
  }

  30%, 77% {
    -webkit-transform: translate(12px, 6px);
    -moz-transform: translate(12px, 6px);
    -o-transform: translate(12px, 6px);
    -ms-transform: translate(12px, 6px);
    transform: translate(12px, 6px);
    width: 23px;
  }
}
@-o-keyframes swipe-line-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 31px;
  }

  30%, 77% {
    -webkit-transform: translate(12px, 6px);
    -moz-transform: translate(12px, 6px);
    -o-transform: translate(12px, 6px);
    -ms-transform: translate(12px, 6px);
    transform: translate(12px, 6px);
    width: 23px;
  }
}
@-ms-keyframes swipe-line-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 31px;
  }

  30%, 77% {
    -webkit-transform: translate(12px, 6px);
    -moz-transform: translate(12px, 6px);
    -o-transform: translate(12px, 6px);
    -ms-transform: translate(12px, 6px);
    transform: translate(12px, 6px);
    width: 23px;
  }
}
@keyframes swipe-line-animation {
  0%, 100%, 27%, 80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 31px;
  }

  30%, 77% {
    -webkit-transform: translate(12px, 6px);
    -moz-transform: translate(12px, 6px);
    -o-transform: translate(12px, 6px);
    -ms-transform: translate(12px, 6px);
    transform: translate(12px, 6px);
    width: 23px;
  }
}
@-moz-keyframes swipe-label-1 {
  0%, 100%, 27%, 80% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-webkit-keyframes swipe-label-1 {
  0%, 100%, 27%, 80% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-o-keyframes swipe-label-1 {
  0%, 100%, 27%, 80% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-ms-keyframes swipe-label-1 {
  0%, 100%, 27%, 80% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes swipe-label-1 {
  0%, 100%, 27%, 80% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  30%, 77% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-moz-keyframes swipe-label-2 {
  0%, 100%, 27%, 80% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  30%, 77% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes swipe-label-2 {
  0%, 100%, 27%, 80% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  30%, 77% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes swipe-label-2 {
  0%, 100%, 27%, 80% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  30%, 77% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-ms-keyframes swipe-label-2 {
  0%, 100%, 27%, 80% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  30%, 77% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes swipe-label-2 {
  0%, 100%, 27%, 80% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  30%, 77% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
#settingsGUIContainer {
  display: block;
  position: absolute;
  left: 100px;
  top: 0;
  z-index: 60000000;
}
#settingsDataGUI {
  position: absolute;
}
#settingsLevelsGUI {
  left: 400px;
  position: absolute;
}
.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#statsDebug {
  height: auto;
  width: auto;
  float: right;
}
.ui_video {
  height: 121px !important;
  float: left;
}
.closed .ui_video {
  height: 0px !important;
}
.videoLabel {
  width: 300px;
  text-align: center;
  font-family: verdana;
  font-size: 11px;
  color: #999;
  margin: 0px 0 5px 0;
  clear: both;
}
.renderer-2d ul {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
}
#colorSelectContainer {
  z-index: 1000;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -240px;
  margin-left: -320px;
  width: 640px;
  height: 480px;
}
#colorSelectArea {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 450px;
  top: 80px;
  border: 10px solid #f00;
  z-index: 30;
}
#colorSelectCenter {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  margin-left: -5px;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  z-index: 31;
}
#marker {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 350px;
  background-color: #f00;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  z-index: 390;
}
#videoInput {
  display: none;
  left: 5px;
  margin-top: 15px;
  width: 640px;
  height: 480px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-transform: scale(-1, 1);
}
#uiTopContent {
  position: relative;
}
#monitorFinalBlobs {
  position: absolute;
  z-index: 3;
}
#debug-info {
  display: none;
  position: absolute;
  z-index: 100000;
  right: 0;
  top: 20px;
  width: 150px;
  max-height: 90%;
  background: rgba(255,255,255,0.5);
  padding: 10px;
  list-style: none;
  overflow: scroll;
  letter-spacing: 0;
}
#debug-info pre {
  -moz-tab-size: 2;
  -o-tab-size: 2;
  font-size: 10px;
  font-family: Lucida Console, Monaco, monospace;
}
#debug-info:hover {
  margin-right: 0;
}
#canv-css {
  display: none;
}
html.mobile {
  width: 100%;
  background: #f9f9db;
}
html.mobile .touch #debug-info {
  display: none !important;
}
html.mobile .mobile {
  display: block;
}
html.mobile body {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #f9f9db;
}
html.mobile body button {
  -webkit-border-radius: 0;
  border-radius: 0;
}
html.mobile body.mirror #gamepad {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
html.mobile body.game-pause #gamepad {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
html.mobile body.game-pause button.pause {
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  transition-delay: 0ms;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -o-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
html.mobile .play-friend,
html.mobile .play-computer,
html.mobile button.main-menu,
html.mobile .multiplayer,
html.mobile section.state.game-pause,
html.mobile #extras,
html.mobile #notifications,
html.mobile #settingsGUIContainer,
html.mobile #debug-info,
html.mobile #canv-3d,
html.mobile #canv-2d,
html.mobile #canv-db {
  display: none !important;
}
html.mobile .dialog {
  bottom: 0;
}
html.mobile header {
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-transition-duration: 1ms;
  -moz-transition-duration: 1ms;
  -o-transition-duration: 1ms;
  -ms-transition-duration: 1ms;
  transition-duration: 1ms;
}
html.mobile header h1 {
  padding: 0 0 0 0;
  margin: 0;
}
html.mobile header h2 {
  display: none;
}
html.mobile header.delay {
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}
html.mobile header h1 {
  position: relative;
  top: 5%;
  padding: 0;
}
html.mobile header .links .from {
  font-size: 47px;
  right: 15px;
  bottom: 69px;
}
html.mobile header .links .experiment {
  font-size: 42px;
  bottom: 66px;
  left: 15px;
}
html.mobile header .nav {
  width: 100%;
  padding: 0;
}
html.mobile header .nav a.button {
  display: none !important;
}
html.mobile header .nav button {
  width: auto;
  min-width: 0;
  padding-left: 15px;
  padding-right: 15px;
}
html.mobile header .play-mobile {
  display: inline-block;
}
html.mobile header .notifications {
  display: none;
}
html.mobile #mobile-menu,
html.mobile .cssinfo .buttons {
  position: absolute;
  top: 45px;
  right: 0;
  z-index: 2;
}
html.mobile #mobile-menu button,
html.mobile .cssinfo .buttons button {
  width: 48px;
  height: 48px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}
html.mobile #mobile-menu button.play,
html.mobile .cssinfo .buttons button.play {
  background: #4184c6;
  color: #f9f9db;
}
html.mobile #mobile-menu button.pause,
html.mobile .cssinfo .buttons button.pause {
  background: #f9f9db;
  color: #4184c6;
  position: absolute;
  right: 0;
  z-index: 1;
  -webkit-transition: -webkit-transform 250ms;
  -moz-transition: -moz-transform 250ms;
  -o-transition: -o-transform 250ms;
  -ms-transition: -ms-transform 250ms;
  transition: transform 250ms;
  -webkit-transition-delay: 0.7s;
  -moz-transition-delay: 0.7s;
  -o-transition-delay: 0.7s;
  -ms-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
html.mobile #mobile-menu button.sound,
html.mobile .cssinfo .buttons button.sound {
  background: #40a040;
  color: #306e2b;
}
html.mobile #mobile-menu button.sound.off:before,
html.mobile .cssinfo .buttons button.sound.off:before {
  content: '♩';
}
html.mobile #mobile-menu button.info,
html.mobile .cssinfo .buttons button.info {
  background: #ffd059;
  color: #b58d33;
}
html.mobile #mobile-menu button.return,
html.mobile .cssinfo .buttons button.return {
  background: #ffd059;
  color: #b58d33;
}
html.mobile #mobile-menu .game-pause,
html.mobile .cssinfo .buttons .game-pause,
html.mobile #mobile-menu .game-play,
html.mobile .cssinfo .buttons .game-play {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  position: relative;
  z-index: 2;
  -webkit-transition: -webkit-transform 300ms ease-out;
  -moz-transition: -moz-transform 300ms ease-out;
  -o-transition: -o-transform 300ms ease-out;
  -ms-transition: -ms-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  transition-delay: 300ms;
  display: block !important;
}
html.mobile #mobile-menu .game-pause.inactive,
html.mobile .cssinfo .buttons .game-pause.inactive,
html.mobile #mobile-menu .game-play.inactive,
html.mobile .cssinfo .buttons .game-play.inactive {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -o-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  transition-delay: 0ms;
}
html.mobile .state.game-prompt {
  -webkit-transform: translate3d(0, 0, 1);
  -moz-transform: translate3d(0, 0, 1);
  -o-transform: translate3d(0, 0, 1);
  -ms-transform: translate3d(0, 0, 1);
  transform: translate3d(0, 0, 1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile .state.game-prompt .background {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
  height: 100px;
  margin-top: -50px;
  top: 50%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile .state.game-prompt .prompt {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile footer#footer {
  display: none;
  height: 47px;
  pointer-events: none;
}
html.mobile footer#footer a {
  pointer-events: auto;
  width: 22px;
  height: 22px;
}
html.mobile footer#footer ul {
  padding: 11px 13px 0 0;
  margin-top: 0;
}
html.mobile footer#footer ul li {
  margin-left: 13px;
  margin-right: 0;
}
html.mobile footer#footer ul li:first-child {
  margin-left: 0;
  margin-right: 0;
}
html.mobile footer#footer .terms,
html.mobile footer#footer .localization {
  display: none;
}
html.mobile footer#footer .technology a,
html.mobile footer#footer .sound a {
  font-family: 'icomoon';
  font-size: 12px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}
html.mobile footer#footer .technology a:before,
html.mobile footer#footer .sound a:before {
  display: inline-block;
  text-align: center;
  width: 100%;
  vertical-align: middle;
}
html.mobile footer#footer .technology span,
html.mobile footer#footer .sound span {
  display: none !important;
}
html.mobile footer#footer .technology a {
  background: #ffd059;
}
html.mobile footer#footer .technology a:before {
  content: '⌽';
  color: #b58d33;
}
html.mobile footer#footer .sound a {
  background: #40a040;
}
html.mobile footer#footer .sound a:before {
  content: '♫';
  color: #306e2b;
}
html.mobile footer#footer .sound a.off:before {
  content: '♩';
}
html.mobile body.main-menu #footer {
  display: block;
}
html.mobile #scores {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html.mobile #scores .logo {
  position: absolute;
  right: 14px;
}
html.mobile #scores .logo .level {
  margin-top: 6px;
}
html.mobile #scores .logo p {
  float: none;
}
html.mobile #scores .logo h1,
html.mobile #scores .logo img {
  display: none;
}
html.mobile #scores .logo,
html.mobile #scores .multiplayer,
html.mobile #scores .singleplayer {
  display: inline-block;
  vertical-align: top;
}
html.mobile #scores .multiplayer .player,
html.mobile #scores .singleplayer .player,
html.mobile #scores .multiplayer .opponent,
html.mobile #scores .singleplayer .opponent {
  display: inline-block;
  margin: 0;
  margin-left: 20px;
}
html.mobile #scores .multiplayer .player p,
html.mobile #scores .singleplayer .player p,
html.mobile #scores .multiplayer .opponent p,
html.mobile #scores .singleplayer .opponent p {
  font-size: 10px;
  width: 36px;
  margin: 0 0 2px;
}
html.mobile #scores .multiplayer .player li,
html.mobile #scores .singleplayer .player li,
html.mobile #scores .multiplayer .opponent li,
html.mobile #scores .singleplayer .opponent li {
  width: 12px;
  height: 12px;
}
html.mobile #scores .multiplayer .player li:before,
html.mobile #scores .singleplayer .player li:before,
html.mobile #scores .multiplayer .opponent li:before,
html.mobile #scores .singleplayer .opponent li:before {
  -webkit-box-shadow: none;
  box-shadow: none;
}
html.mobile #gamepad {
  display: none !important;
  position: absolute;
  bottom: 50%;
  width: 100%;
  z-index: 2;
  -webkit-transition: opacity 300ms ease-out;
  -moz-transition: opacity 300ms ease-out;
  -o-transition: opacity 300ms ease-out;
  -ms-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
}
html.mobile #gamepad button {
  background-color: #6bba6b;
  width: 72px;
  height: 72px;
  -webkit-border-radius: 36px;
  border-radius: 36px;
  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
  position: absolute;
  left: 5%;
  padding: 0;
  outline: 0;
  border: 0;
}
html.mobile #gamepad button.left:before {
  left: 20px;
}
html.mobile #gamepad button.right:before {
  left: 26px;
}
html.mobile #gamepad button:after {
  content: ' ';
  position: absolute;
  bottom: 1px;
  left: 4.2%;
  width: 93%;
  height: 93%;
  -webkit-border-radius: 93%;
  border-radius: 93%;
  background-color: #4daf4d;
}
html.mobile #gamepad button:before {
  font-size: 36px;
  color: #295d21;
  position: absolute;
  top: 27%;
  z-index: 2;
}
html.mobile #gamepad button:active,
html.mobile #gamepad button.down {
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  top: 2px;
}
html.mobile #gamepad button:active:after,
html.mobile #gamepad button.down:after {
  bottom: inherit;
  top: 1px;
}
html.mobile #gamepad button:last-child {
  left: auto;
  right: 5%;
}
html.mobile .state {
  visibility: hidden;
}
html.mobile .state.active {
  visibility: visible;
}
html.mobile .state .dialog {
  background: #f9f9db;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
html.mobile .state .dialog .content.animate {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
html.mobile .state.game-instructions p {
  width: auto;
  margin-left: auto;
}
html.mobile .state.game-instructions .game-controls {
  display: none !important;
}
html.mobile .state.game-instructions .destroy-shield {
  height: 200px;
}
html.mobile .state.game-instructions .destroy-shield__label {
  position: absolute;
  margin-top: -20px;
  left: 0;
  width: 100%;
}
html.mobile .state.game-instructions .destroy-shield__label p {
  width: 100%;
  white-space: normal;
  line-height: 1.2;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html.mobile .state.game-instructions .dialog {
  bottom: 47px;
  top: 0;
  height: 100%;
}
html.mobile .state.game-instructions .content {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
html.mobile .state.game-instructions.inactive {
  display: none !important;
}
html.mobile .state.game-instructions.active {
  display: block !important;
}
html.mobile .state.game-over .dialog {
  height: 100%;
  min-height: 0;
  top: 0;
}
html.mobile .state.game-over .dialog h1 {
  font-size: 30px;
  margin-top: 0;
  text-align: center;
}
html.mobile .state.game-over .dialog .content {
  padding-bottom: 0;
}
html.mobile .state.game-over .dialog .scoreboard {
  padding: 0 0 15px;
}
html.mobile .state.game-over .dialog .social {
  display: none;
}
html.mobile .state.game-over .dialog .social li {
  margin-right: 5px;
}
html.mobile .state.game-over .dialog .social a {
  padding: 5px;
}
html.mobile .state.game-over .dialog button {
  width: auto;
  padding: 10px 20px;
  margin-left: 0;
}
html.mobile .state.game-over.inactive {
  display: none !important;
}
html.mobile .mobile .main-menu {
  width: 100%;
  height: 100%;
  position: absolute;
}
html.mobile .mobile .cssinfo {
  position: absolute;
  z-index: 6;
}
html.mobile .mobile h4.game-over {
  position: absolute;
  z-index: 5;
  width: 100%;
  top: 0;
  font-size: 30px;
  color: #ffd05a;
  text-shadow: 0 0.1em 0 #876b2a;
  pointer-events: none;
}
html.mobile .state.game-instructions #game-controls {
  display: none;
}
html.mobile .game-instructions #game {
  visibility: hidden !important;
}
html.mobile #game {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  height: 0;
  width: 0;
  left: 50%;
  top: 50%;
  overflow: visible;
}
html.mobile #game > canvas,
html.mobile #game > video {
  display: none;
}
@media (orientation: portrait) {
  html.mobile header h1 {
    top: 6%;
  }
  html.mobile header h1 img {
    width: 85%;
  }
  html.mobile header .nav {
    bottom: 67px;
  }
  html.mobile .swipe-instruction {
    display: none;
  }
  html.mobile .touch .keyboard {
    display: none;
  }
  html.mobile .touch .swipe-instruction {
    display: block;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  html.mobile .touch .swipe-instruction.hide {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  html.mobile #gamepad {
    display: none !important;
  }
  html.mobile #canv-css {
    top: -255px;
  }
  html.mobile body.game-over #footer {
    display: inline-block;
    background-color: transparent;
  }
}
@media (orientation: landscape) {
  html.mobile .touch .keyboard {
    display: none;
  }
  html.mobile .touch #gamepad.state.active {
    display: block !important;
  }
  html.mobile .game-over h3,
  html.mobile .game-over #single-levels {
    display: inline-block;
  }
  html.mobile .game-over h3 {
    padding: 7px 0 17px 25px;
    vertical-align: middle;
  }
  html.mobile .game-over .content {
    padding-bottom: 30px;
  }
  html.mobile .game-over .social {
    bottom: 10px;
  }
  html.mobile #canv-css {
    top: -290px;
  }
  html.mobile #scores {
    width: 100%;
  }
  html.mobile #scores .singleplayer .player,
  html.mobile #scores .multiplayer .player,
  html.mobile #scores .singleplayer .opponent,
  html.mobile #scores .multiplayer .opponent {
    display: block;
    zoom: 1;
  }
  html.mobile #scores .singleplayer .player:before,
  html.mobile #scores .multiplayer .player:before,
  html.mobile #scores .singleplayer .opponent:before,
  html.mobile #scores .multiplayer .opponent:before,
  html.mobile #scores .singleplayer .player:after,
  html.mobile #scores .multiplayer .player:after,
  html.mobile #scores .singleplayer .opponent:after,
  html.mobile #scores .multiplayer .opponent:after {
    content: "";
    display: table;
  }
  html.mobile #scores .singleplayer .player:after,
  html.mobile #scores .multiplayer .player:after,
  html.mobile #scores .singleplayer .opponent:after,
  html.mobile #scores .multiplayer .opponent:after {
    clear: both;
  }
  html.mobile #scores p {
    margin-bottom: 0;
  }
  html.mobile #scores p,
  html.mobile #scores ol {
    float: left;
  }
  html.mobile .dialog {
    bottom: 0;
  }
  html.mobile header .links .experiment,
  html.mobile header .links .from {
    bottom: 50px;
  }
  html.mobile header .links #canv-css {
    top: -266px;
  }
  html.mobile header .nav {
    bottom: 51px;
  }
  html.mobile body.main-menu #footer,
  html.mobile body.game-over #footer {
    display: inline-block;
    background-color: transparent;
  }
  html.mobile .swipe-instruction {
    display: none;
  }
}
@media all and (max-height: 400px) and (orientation: landscape) {
  html.mobile header .nav {
    bottom: 10px;
  }
}
@media all and (min-height: 400px ) and (orientation: landscape) {
  html.mobile header .nav {
    bottom: 49px;
  }
}
@media all and (min-width: 0px) and (min-height: 0px) and (max-width: 800px) {
  html.mobile .state.game-prompt .background {
    height: 140px;
    margin-top: -70px;
  }
  html.mobile .state.game-prompt h1,
  html.mobile .state.game-prompt h2,
  html.mobile .state.game-prompt h3,
  html.mobile .state.game-prompt h4 {
    font-size: 30px;
  }
  html.mobile .state.game-prompt h4.over {
    font-size: 25px;
  }
  html.mobile .state.game-prompt div.subtitle {
    font-size: 15px;
    line-height: 30px;
  }
}
@media all and (min-width: 801px) and (max-width: 4800px) {
  html.mobile .state.game-prompt .background {
    height: 200px;
    margin-top: -100px;
  }
  html.mobile .state.game-prompt h1,
  html.mobile .state.game-prompt h2,
  html.mobile .state.game-prompt h3,
  html.mobile .state.game-prompt h4 {
    font-size: 40px;
  }
  html.mobile .state.game-prompt div.subtitle {
    font-size: 25px;
    line-height: 43px;
  }
}
html.mobile.theme-default #canv-css .background,
html.mobile.theme-default #canv-css .extra {
  -webkit-filter: hue-rotate(360deg) saturate(100%);
}
html.mobile.theme-green #canv-css .background {
  -webkit-filter: hue-rotate(101deg) saturate(42%);
}
html.mobile.theme-green #canv-css .extra {
  -webkit-filter: hue-rotate(83deg) saturate(100%);
}
html.mobile.theme-purple #canv-css .background {
  -webkit-filter: hue-rotate(245deg) saturate(36%);
}
html.mobile.theme-purple #canv-css .extra {
  -webkit-filter: hue-rotate(138deg) saturate(100%);
}
html.mobile.theme-pastell #canv-css .background,
html.mobile.theme-pastell #canv-css .extra {
  -webkit-filter: hue-rotate(360deg) saturate(100%);
}
html.mobile.theme-pink #canv-css .background {
  -webkit-filter: hue-rotate(-29deg) saturate(73%);
}
html.mobile.theme-pink #canv-css .extra {
  -webkit-filter: hue-rotate(349deg) saturate(100%);
}
html.mobile.theme-light #canv-css .background,
html.mobile.theme-light #canv-css .obstacles .obstacle {
  -webkit-filter: hue-rotate(181deg) saturate(63%);
}
html.mobile.theme-light #canv-css .extra {
  -webkit-filter: hue-rotate(112deg) saturate(100%);
}
html.mobile.theme-orange #canv-css .background,
html.mobile.theme-orange #canv-css .extra {
  -webkit-filter: hue-rotate(196deg) saturate(46%);
}
html.mobile.theme-forrest #canv-css .background,
html.mobile.theme-forrest #canv-css .extra {
  -webkit-filter: hue-rotate(338deg) saturate(36%);
}
html.mobile #game #canv-2d {
  position: fixed;
  top: 20px;
  left: 0;
  z-index: 10;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
html.mobile #canv-css {
  display: block;
  width: 768px;
  height: 480px;
  position: relative;
  top: -260px;
  left: -384px;
  -webkit-transform-origin: 50% 55%;
  -moz-transform-origin: 50% 55%;
  -o-transform-origin: 50% 55%;
  -ms-transform-origin: 50% 55%;
  transform-origin: 50% 55%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .background {
  width: 1536px;
  height: 1079px;
  z-index: 0;
  display: none;
  position: absolute;
  top: -340px;
  left: -50%;
  background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-filter 1.5s;
  -moz-transition: -webkit-filter 1.5s;
  -o-transition: -webkit-filter 1.5s;
  -ms-transition: -webkit-filter 1.5s;
  transition: -webkit-filter 1.5s;
}
html.mobile #canv-css .background img {
  width: 100%;
  height: 100%;
  display: none;
}
html.mobile #canv-css .background .screen {
  position: absolute;
  top: 390px;
  left: 635px;
}
html.mobile #canv-css .background .screen .hit-player,
html.mobile #canv-css .background .screen .hit-cpu {
  position: absolute;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
html.mobile #canv-css .background .screen .hit-player.active,
html.mobile #canv-css .background .screen .hit-cpu.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-animation: effect-screen 2.4s;
  -moz-animation: effect-screen 2.4s;
  -o-animation: effect-screen 2.4s;
  -ms-animation: effect-screen 2.4s;
  animation: effect-screen 2.4s;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .background .screen .hit-player.hidden,
html.mobile #canv-css .background .screen .hit-cpu.hidden {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
html.mobile #canv-css .background .bear {
  position: absolute;
  top: 390px;
  left: 679px;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .background .bear .bob {
  position: absolute;
  top: 0;
  left: 166px;
}
html.mobile #canv-css .background .swipe-instruction {
  background: transparent url("/images/mobile/swipe-arrows.png") no-repeat;
  width: 186px;
  height: 42px;
  margin: 0 auto;
  position: absolute;
  top: 858px;
  left: 677px;
  pointer-events: auto;
}
html.mobile #canv-css .game-board {
  position: absolute;
  z-index: 2;
  width: 768px;
  -webkit-perspective: 640px;
  -moz-perspective: 640px;
  -ms-perspective: 640px;
  perspective: 640px;
  -webkit-perspective-origin: 50% 0%;
  -moz-perspective-origin: 50% 0%;
  -ms-perspective-origin: 50% 0%;
  perspective-origin: 50% 0%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .arena {
  width: 768px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 290px;
  left: 94px;
  z-index: 1;
}
html.mobile #canv-css .shields {
  position: absolute;
  top: 0;
  letter-spacing: 0;
  font-size: 0;
  width: 100%;
  -webkit-transform: translateZ(1);
  -moz-transform: translateZ(1);
  -o-transform: translateZ(1);
  -ms-transform: translateZ(1);
  transform: translateZ(1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .shields .shields-a,
html.mobile #canv-css .shields .shields-b {
  position: absolute;
  top: 0px;
}
html.mobile #canv-css .shields .shield {
  position: absolute;
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: scaleY(0.005) translateZ(0);
  -moz-transform: scaleY(0.005) translateZ(0);
  -o-transform: scaleY(0.005) translateZ(0);
  -ms-transform: scaleY(0.005) translateZ(0);
  transform: scaleY(0.005) translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}
html.mobile #canv-css .shields .shield.active {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
html.mobile #canv-css .shields .shield.visible {
  -webkit-transform: scaleY(1) translateZ(0);
  -moz-transform: scaleY(1) translateZ(0);
  -o-transform: scaleY(1) translateZ(0);
  -ms-transform: scaleY(1) translateZ(0);
  transform: scaleY(1) translateZ(0);
}
html.mobile #canv-css .shields .shield.bulletproof {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
html.mobile #canv-css .shields .shields-a {
  top: 420px;
  left: 109px;
  z-index: 4;
}
html.mobile #canv-css .shields .shields-a .s1-01 {
  left: -1px;
}
html.mobile #canv-css .shields .shields-a .s2-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-a .s2-02 {
  left: 277px;
}
html.mobile #canv-css .shields .shields-a .s3-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-a .s3-02 {
  left: 186px;
}
html.mobile #canv-css .shields .shields-a .s3-03 {
  left: 366px;
}
html.mobile #canv-css .shields .shields-a .s6-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-a .s6-02 {
  left: 95px;
}
html.mobile #canv-css .shields .shields-a .s6-03 {
  left: 186px;
}
html.mobile #canv-css .shields .shields-a .s6-04 {
  left: 276px;
}
html.mobile #canv-css .shields .shields-a .s6-05 {
  left: 366px;
}
html.mobile #canv-css .shields .shields-a .s6-06 {
  left: 457px;
}
html.mobile #canv-css .shields .shields-a .s9-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-a .s9-02 {
  left: 62px;
}
html.mobile #canv-css .shields .shields-a .s9-03 {
  left: 125px;
}
html.mobile #canv-css .shields .shields-a .s9-04 {
  left: 186px;
}
html.mobile #canv-css .shields .shields-a .s9-05 {
  left: 246px;
}
html.mobile #canv-css .shields .shields-a .s9-06 {
  left: 306px;
}
html.mobile #canv-css .shields .shields-a .s9-07 {
  left: 366px;
}
html.mobile #canv-css .shields .shields-a .s9-08 {
  left: 427px;
}
html.mobile #canv-css .shields .shields-a .s9-09 {
  left: 487px;
}
html.mobile #canv-css .shields .shields-b {
  top: 161px;
  left: 254px;
  z-index: 0;
}
html.mobile #canv-css .shields .shields-b .s1-01 {
  left: 1px;
}
html.mobile #canv-css .shields .shields-b .s2-01 {
  left: 1px;
}
html.mobile #canv-css .shields .shields-b .s2-02 {
  left: 132px;
}
html.mobile #canv-css .shields .shields-b .s3-01 {
  left: 1px;
}
html.mobile #canv-css .shields .shields-b .s3-02 {
  left: 87px;
}
html.mobile #canv-css .shields .shields-b .s3-03 {
  left: 172px;
}
html.mobile #canv-css .shields .shields-b .s6-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-b .s6-02 {
  left: 44px;
}
html.mobile #canv-css .shields .shields-b .s6-03 {
  left: 88px;
}
html.mobile #canv-css .shields .shields-b .s6-04 {
  left: 132px;
}
html.mobile #canv-css .shields .shields-b .s6-05 {
  left: 174px;
}
html.mobile #canv-css .shields .shields-b .s6-06 {
  left: 216px;
}
html.mobile #canv-css .shields .shields-b .s9-01 {
  left: 0;
}
html.mobile #canv-css .shields .shields-b .s9-02 {
  left: 30px;
}
html.mobile #canv-css .shields .shields-b .s9-03 {
  left: 58px;
}
html.mobile #canv-css .shields .shields-b .s9-04 {
  left: 87px;
}
html.mobile #canv-css .shields .shields-b .s9-05 {
  left: 115px;
}
html.mobile #canv-css .shields .shields-b .s9-06 {
  left: 145px;
}
html.mobile #canv-css .shields .shields-b .s9-07 {
  left: 173px;
}
html.mobile #canv-css .shields .shields-b .s9-08 {
  left: 201px;
}
html.mobile #canv-css .shields .shields-b .s9-09 {
  left: 230px;
}
html.mobile .angry {
  position: absolute;
  top: 8px;
  left: 40px;
}
html.mobile .blink {
  position: absolute;
  top: 37px;
  left: 63px;
}
html.mobile .jawdrop {
  position: absolute;
  top: 54px;
  left: 57px;
}
html.mobile .flirt {
  position: absolute;
  top: 21px;
  left: 62px;
}
html.mobile .extra {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 50% 50% 0;
  -moz-transform-origin: 50% 50% 0;
  -o-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  position: absolute;
}
html.mobile .extra .icon {
  background-color: transparent;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: extra-icon-pulse 1s infinite;
  -moz-animation: extra-icon-pulse 1s infinite;
  -o-animation: extra-icon-pulse 1s infinite;
  -ms-animation: extra-icon-pulse 1s infinite;
  animation: extra-icon-pulse 1s infinite;
}
html.mobile .puck {
  position: absolute;
  display: block;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 50% 50% 0;
  -moz-transform-origin: 50% 50% 0;
  -o-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  -webkit-transition: -webkit-filter 0.5s;
  -moz-transition: -webkit-filter 0.5s;
  -o-transition: -webkit-filter 0.5s;
  -ms-transition: -webkit-filter 0.5s;
  transition: -webkit-filter 0.5s;
  z-index: 4;
}
html.mobile .puck .icon {
  position: absolute;
}
html.mobile .puck.ghostball {
  -webkit-filter: grayscale(1);
  opacity: 0.2;
  filter: alpha(opacity=20);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
html.mobile .puck.timebomb {
  -webkit-animation: effect-timebomb-pulse 1s infinite;
  -moz-animation: effect-timebomb-pulse 1s infinite;
  -o-animation: effect-timebomb-pulse 1s infinite;
  -ms-animation: effect-timebomb-pulse 1s infinite;
  animation: effect-timebomb-pulse 1s infinite;
  opacity: 0.2;
  filter: alpha(opacity=20);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
html.mobile .puck.flash {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
html.mobile .bullet {
  width: 30px;
  height: 30px;
  background: #ffed53;
  position: absolute;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.116671, 0.993171, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1) translate3d(514px, 705px, 0px);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 0.116671, 0.993171, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1) translate3d(514px, 705px, 0px);
  -o-transform: matrix3d(1, 0, 0, 0, 0, 0.116671, 0.993171, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1) translate3d(514px, 705px, 0px);
  -ms-transform: matrix3d(1, 0, 0, 0, 0, 0.116671, 0.993171, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1) translate3d(514px, 705px, 0px);
  transform: matrix3d(1, 0, 0, 0, 0, 0.116671, 0.993171, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1) translate3d(514px, 705px, 0px);
}
html.mobile .bullet:before {
  display: none;
  position: absolute;
  top: 30px;
  width: 30px;
  height: 30px;
  background: #ffed53;
  content: ' ';
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
html.mobile .bullet:after {
  display: none;
  position: absolute;
  top: 60px;
  width: 30px;
  height: 30px;
  background: #ffed53;
  content: ' ';
  opacity: 0.3;
  filter: alpha(opacity=30);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
html.mobile .effect.fog,
html.mobile .effect.explosion {
  pointer-events: none;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 3;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
html.mobile .effect.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
html.mobile .effect.fog {
  top: 148px;
  left: 96px;
}
html.mobile .effect.p1.explosion {
  top: 242px;
  left: 105px;
}
html.mobile .effect.p2.explosion {
  top: 140px;
  left: 150px;
}
html.mobile .force {
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: absolute;
  left: 38%;
  top: 98px;
  margin-left: -126px;
  -webkit-transform: translateZ(0) matrix3d(1, 0, 0, 0, 0, 0.11667073709933327, 0.993170649538486, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1);
  -moz-transform: translateZ(0) matrix3d(1, 0, 0, 0, 0, 0.11667073709933327, 0.993170649538486, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1);
  -o-transform: translateZ(0) matrix3d(1, 0, 0, 0, 0, 0.11667073709933327, 0.993170649538486, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1);
  -ms-transform: translateZ(0) matrix3d(1, 0, 0, 0, 0, 0.11667073709933327, 0.993170649538486, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1);
  transform: translateZ(0) matrix3d(1, 0, 0, 0, 0, 0.11667073709933327, 0.993170649538486, 0, 0, -0.993170649538486, 0.11667073709933327, 0, 0, 133.06863596332892, -778.6025754663666, 1);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}
html.mobile .force.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-animation: effect-force 0.5s infinite alternate;
  -moz-animation: effect-force 0.5s infinite alternate;
  -o-animation: effect-force 0.5s infinite alternate;
  -ms-animation: effect-force 0.5s infinite alternate;
  animation: effect-force 0.5s infinite alternate;
  -webkit-animation-timing-function: steps(3);
  -moz-animation-timing-function: steps(3);
  -o-animation-timing-function: steps(3);
  -ms-animation-timing-function: steps(3);
  animation-timing-function: steps(3);
}
html.mobile .obstacles {
  pointer-events: none;
}
html.mobile .obstacles .obstacle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: 2;
}
html.mobile .obstacles .obstacle.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
html.mobile .obstacles .triangle-left {
  top: 210px;
  left: 188px;
}
html.mobile .obstacles .triangle-right {
  top: 210px;
  left: 497px;
}
html.mobile .obstacles .octagon {
  top: 209px;
  left: 302px;
}
html.mobile .obstacles .diamond {
  top: 209px;
  left: 305px;
}
#p1,
#p2 {
  display: block;
  background-repeat: no-repeat;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 50% 50% 0;
  -moz-transform-origin: 50% 50% 0;
  -o-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
#p1 .gfx,
#p2 .gfx {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -ms-transition: -ms-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  transition-property: transform, opacity;
  position: absolute;
  z-index: 1;
  transform-origin-y: bottom;
}
#p1.fireball .gfx,
#p2.fireball .gfx {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
#p1.fireball:before,
#p2.fireball:before {
  position: absolute;
  width: 60%;
  height: 50%;
  background: #ff0;
  top: 0;
  margin: 7% 20%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  z-index: 0;
  content: ' ';
}
#p1 {
  z-index: 5;
}
#p2 {
  z-index: 3;
}
@-moz-keyframes extra-icon-pulse {
  0%, 100% {
    -webkit-transform: translate(0, 0px) scale(0.8);
    -moz-transform: translate(0, 0px) scale(0.8);
    -o-transform: translate(0, 0px) scale(0.8);
    -ms-transform: translate(0, 0px) scale(0.8);
    transform: translate(0, 0px) scale(0.8);
  }

  50% {
    -webkit-transform: translate(0, -7px) scale(1);
    -moz-transform: translate(0, -7px) scale(1);
    -o-transform: translate(0, -7px) scale(1);
    -ms-transform: translate(0, -7px) scale(1);
    transform: translate(0, -7px) scale(1);
  }
}
@-webkit-keyframes extra-icon-pulse {
  0%, 100% {
    -webkit-transform: translate(0, 0px) scale(0.8);
    -moz-transform: translate(0, 0px) scale(0.8);
    -o-transform: translate(0, 0px) scale(0.8);
    -ms-transform: translate(0, 0px) scale(0.8);
    transform: translate(0, 0px) scale(0.8);
  }

  50% {
    -webkit-transform: translate(0, -7px) scale(1);
    -moz-transform: translate(0, -7px) scale(1);
    -o-transform: translate(0, -7px) scale(1);
    -ms-transform: translate(0, -7px) scale(1);
    transform: translate(0, -7px) scale(1);
  }
}
@-o-keyframes extra-icon-pulse {
  0%, 100% {
    -webkit-transform: translate(0, 0px) scale(0.8);
    -moz-transform: translate(0, 0px) scale(0.8);
    -o-transform: translate(0, 0px) scale(0.8);
    -ms-transform: translate(0, 0px) scale(0.8);
    transform: translate(0, 0px) scale(0.8);
  }

  50% {
    -webkit-transform: translate(0, -7px) scale(1);
    -moz-transform: translate(0, -7px) scale(1);
    -o-transform: translate(0, -7px) scale(1);
    -ms-transform: translate(0, -7px) scale(1);
    transform: translate(0, -7px) scale(1);
  }
}
@-ms-keyframes extra-icon-pulse {
  0%, 100% {
    -webkit-transform: translate(0, 0px) scale(0.8);
    -moz-transform: translate(0, 0px) scale(0.8);
    -o-transform: translate(0, 0px) scale(0.8);
    -ms-transform: translate(0, 0px) scale(0.8);
    transform: translate(0, 0px) scale(0.8);
  }

  50% {
    -webkit-transform: translate(0, -7px) scale(1);
    -moz-transform: translate(0, -7px) scale(1);
    -o-transform: translate(0, -7px) scale(1);
    -ms-transform: translate(0, -7px) scale(1);
    transform: translate(0, -7px) scale(1);
  }
}
@keyframes extra-icon-pulse {
  0%, 100% {
    -webkit-transform: translate(0, 0px) scale(0.8);
    -moz-transform: translate(0, 0px) scale(0.8);
    -o-transform: translate(0, 0px) scale(0.8);
    -ms-transform: translate(0, 0px) scale(0.8);
    transform: translate(0, 0px) scale(0.8);
  }

  50% {
    -webkit-transform: translate(0, -7px) scale(1);
    -moz-transform: translate(0, -7px) scale(1);
    -o-transform: translate(0, -7px) scale(1);
    -ms-transform: translate(0, -7px) scale(1);
    transform: translate(0, -7px) scale(1);
  }
}
@-moz-keyframes effect-ghostball-pulse {
  0%, 100% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

  50% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
}
@-webkit-keyframes effect-ghostball-pulse {
  0%, 100% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

  50% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
}
@-o-keyframes effect-ghostball-pulse {
  0%, 100% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

  50% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
}
@-ms-keyframes effect-ghostball-pulse {
  0%, 100% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

  50% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
}
@keyframes effect-ghostball-pulse {
  0%, 100% {
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  }

  50% {
    opacity: 0.1;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  }
}
@-moz-keyframes effect-timebomb-pulse {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  }
}
@-webkit-keyframes effect-timebomb-pulse {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  }
}
@-o-keyframes effect-timebomb-pulse {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  }
}
@-ms-keyframes effect-timebomb-pulse {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  }
}
@keyframes effect-timebomb-pulse {
  0%, 100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  50% {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  }
}
@-moz-keyframes effect-screen {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  15% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-webkit-keyframes effect-screen {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  15% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-o-keyframes effect-screen {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  15% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-ms-keyframes effect-screen {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  15% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@keyframes effect-screen {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }

  15% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  75% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
}
@-moz-keyframes effect-force {
  0% {
    background-position: -510px -616px;
  }

  100% {
    background-position: 250px -616px;
  }
}
@-webkit-keyframes effect-force {
  0% {
    background-position: -510px -616px;
  }

  100% {
    background-position: 250px -616px;
  }
}
@-o-keyframes effect-force {
  0% {
    background-position: -510px -616px;
  }

  100% {
    background-position: 250px -616px;
  }
}
@-ms-keyframes effect-force {
  0% {
    background-position: -510px -616px;
  }

  100% {
    background-position: 250px -616px;
  }
}
@keyframes effect-force {
  0% {
    background-position: -510px -616px;
  }

  100% {
    background-position: 250px -616px;
  }
}
#error .connection-error .cpu-conn-failed-anim {
  margin-bottom: 10px;
}
#error h1,
#error h2,
#error h3 {
  font-size: 14px;
  line-height: 1em;
  padding: 10px 0px 27px 0px;
}
#error p {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  line-height: 1.6em;
}
#error .error-fullroom button {
  margin-right: 17px;
}
#error .error-lonelyroom {
  position: absolute;
  top: 0;
  background-image: url("/images/mobile/error-bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
}
#error .error-lonelyroom .dialog {
  background: transparent;
}
#error .error-lonelyroom .dialog .content {
  background: transparent;
  height: auto;
  position: absolute;
  bottom: 20px;
  padding: 0 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#error .error-lonelyroom p,
#error .error-lonelyroom h2 {
  color: #f9f9db;
}
#error .error-lonelyroom h2 {
  font-size: 13px;
  line-height: 1.4em;
}
#error .error-lonelyroom p {
  font-size: 10px;
}
#error .error-lonelyroom p.share-url {
  height: 34px;
  outline: 2px solid #fff;
  border: 2px solid #1485d5;
  background: #fff;
  color: #000;
  display: block;
  padding: 8px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  margin-top: 15px;
}
html.ie .loading,
body.error-browser .loading {
  display: none !important;
}
html.ie header,
body.error-browser header {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  background: transparent !important;
}
html.ie header .nav,
body.error-browser header .nav,
html.ie header .links,
body.error-browser header .links {
  display: none;
}
html.ie #error,
body.error-browser #error {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #1487d5 url("/images/mobile/error-bg.jpg") center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
html.ie #error .state,
body.error-browser #error .state {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
}
html.ie #error .dialog,
body.error-browser #error .dialog,
html.ie #error .content,
body.error-browser #error .content,
html.ie #error .state,
body.error-browser #error .state {
  background: transparent;
  display: block;
}
html.ie #error .dialog.bottom,
body.error-browser #error .dialog.bottom {
  position: static;
  height: 100%;
}
html.ie #error .content,
body.error-browser #error .content {
  height: 100%;
  position: relative;
  display: block;
}
html.ie #error .vertical-center,
body.error-browser #error .vertical-center {
  display: block;
  padding-bottom: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
html.ie #error h2,
body.error-browser #error h2,
html.ie #error h3,
body.error-browser #error h3,
html.ie #error p,
body.error-browser #error p {
  color: #f9f9db;
}
@media all and (max-width: 4550px) and (min-width: 980px) {
  .state .prompt h1.bitmap,
  .state .prompt h2.bitmap,
  .state .prompt h3.bitmap,
  .state .prompt h4.bitmap {
    font-size: 83px;
  }
  .state .prompt div {
    font-size: 30px;
    line-height: 62px;
  }
}
@media all and (max-width: 980px) and (min-width: 751px) {
  .state .prompt h1.bitmap,
  .state .prompt h2.bitmap,
  .state .prompt h3.bitmap,
  .state .prompt h4.bitmap {
    font-size: 65px;
  }
  .state .prompt div {
    font-size: 20px;
    line-height: 42px;
  }
}
@media all and (max-width: 750px) and (min-width: 0px) {
  .state .prompt h1.bitmap,
  .state .prompt h2.bitmap,
  .state .prompt h3.bitmap,
  .state .prompt h4.bitmap {
    font-size: 45px;
  }
  .state .prompt div {
    font-size: 10px;
    line-height: 20px;
  }
}
@media all and (max-width: 449px) and (min-width: 0px) {
  #scores {
    left: 20px;
  }
}
@media all and (max-width: 749px) and (min-width: 0px) {
  #extras ul {
    display: none;
  }
  #scores .logo img {
    display: none;
  }
  #scores ol li {
    width: 16px;
    height: 16px;
    margin-left: 2px;
  }
  #scores .player,
  #scores .opponent {
    margin-top: 5px;
  }
  #scores .player p,
  #scores .opponent p {
    font-size: 11px;
  }
}
@media all and (min-width: 750px) and (max-width: 1799px) {
  #extras ul {
    display: block;
  }
  #scores {
    left: 6%;
  }
  #scores .logo img {
    display: block;
  }
  #scores ol li {
    width: 26px;
    height: 26px;
    margin-left: 2px;
  }
}
@media all and (min-width: 1800px) {
  #scores {
    left: 100px;
  }
  #scores .logo img {
    display: block;
  }
  #scores .logo .level {
    margin-top: 6px;
  }
  #scores ol li {
    width: 46px;
    height: 46px;
    margin-left: 4px;
  }
}
.theme-green .state.game-prompt .background {
  background-color: #e72b23;
}
.theme-green .state.game-prompt.alternate .background {
  background-color: #349367;
}
.theme-purple .state.game-prompt .background {
  background-color: #ba4b47;
}
.theme-purple .state.game-prompt.alternate .background {
  background-color: #3a8361;
}
.theme-pastell .state.game-prompt .background {
  background-color: #bb223f;
}
.theme-pastell .state.game-prompt.alternate .background {
  background-color: #3a836d;
}
.theme-pink .state.game-prompt .background {
  background-color: #af304e;
}
.theme-pink .state.game-prompt.alternate .background {
  background-color: #449372;
}
.theme-light .state.game-prompt .background {
  background-color: #c94077;
}
.theme-light .state.game-prompt.alternate .background {
  background-color: #338f61;
}
.theme-orange .state.game-prompt .background {
  background-color: #f62e3a;
}
.theme-orange .state.game-prompt.alternate .background {
  background-color: #34d177;
}
.theme-forrest .state.game-prompt .background {
  background-color: #cd1f1f;
}
.theme-forrest .state.game-prompt.alternate .background {
  background-color: #1d6736;
}
.theme-blackhorizon .state.game-prompt .background {
  background-color: #cd1f1f;
}
.theme-blackhorizon .state.game-prompt.alternate .background {
  background-color: #1d675f;
}
.theme-redhorizon .state.game-prompt .background {
  background-color: #a91d1d;
}
.theme-redhorizon .state.game-prompt.alternate .background {
  background-color: #217745;
}
.about {
  overflow: scroll;
}
.about body {
  height: auto;
  width: auto;
  overflow: auto;
  font-family: Helvetica, Arial;
  padding-top: 400px;
}
.about header {
  height: 400px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #1f1f1f;
  color: #f9f9db;
  text-align: center;
  text-transform: uppercase;
  position: fixed;
  top: 0;
}
.about header h1 {
  font-size: 34px;
  display: block;
  padding: 121px 0 0;
  margin: 0;
  font-weight: bold;
}
.about header h1 a {
  color: #f9f9db;
  text-decoration: none;
}
.about header h1 a:hover {
  text-decoration: underline;
}
.about header .play-link {
  margin-top: 35px;
  border: 3px solid #ffcb4d;
  font-size: 20px;
  color: #ffcb4d;
  display: inline-block;
  padding: 20px;
  text-decoration: none;
}
.about section {
  position: relative;
  padding: 456px 0 150px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.about section.sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.about section > * {
  max-width: 960px;
  margin: 0 auto;
  display: block;
  position: relative;
}
.about section h1 {
  font-size: 36px;
  color: #f9f9db;
  line-height: 1.5em;
  text-align: center;
}
.about section h1:after {
  content: ' ';
  background: url("/images/tech/ornament.png") center center;
  max-width: 659px;
  height: 49px;
  display: block;
  margin: 10px auto 22px;
}
.about section p {
  max-width: 790px;
  font-size: 16px;
  color: #f9f9db;
  line-height: 1.4em;
  text-align: center;
  font-weight: 200;
}
.about section img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  margin-left: -480px;
  max-width: inherit;
  width: 960px;
}
.about #webrtc {
  background: #6d8689;
}
.about #renderers {
  background: #13030f;
}
.about #audio {
  background: #783c5f;
}
.about #platform {
  background: #a7bebe;
}
.about #opensource {
  background: #0e191e;
}
.about #nav {
  position: fixed;
  top: 50%;
  margin-top: -91px;
  right: 30px;
  list-style: none;
}
.about #nav li {
  display: block;
  margin-bottom: 10px;
}
.about #nav li a {
  width: 25px;
  height: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  border: 2px solid #f9f9db;
  display: block;
}
.about #nav li.active a {
  background: #f9f9db;
}
.about.touch body {
  padding: 0 !important;
}
.about.touch body section,
.about.touch body header {
  position: relative !important;
}
html.ie .state,
html.ie header,
html.ie footer {
  display: none !important;
}
html.ie .state.error,
html.ie .state.error-browser {
  display: block !important;
  visibility: visible !important;
}
html.io #extras {
  display: none !important;
}