@font-face {
  font-family: "gyre";
  src: url("http://ff.static.1001fonts.net/t/e/tex-gyre-adventor.bold-italic.otf?#iefix") format("opentype");
}
body {
  background-color: #dfbf5c;
}
.odoobox {
  width: 100%;
  height: 800px;
  text-align: center;
}
#container {
  position: relative;
  margin-top: 300px;
  margin-left: 40%;
  width: 130px;
  height: 220px;
}
#iotbox {
  position: relative;
  margin-top: 0px;
  margin-bottom: 100px;
  width: 100%;
  height: 100%;
  margin-left:20%;
}
#textcontainer {
  position: relative;
  margin-top: 200px;
}
#back {
  position: absolute;
  bottom: 0;
  background-color: #c1bdb7;
  box-shadow: 5px 5px 0 0 #c7ab52;
  -webkit-animation: backAnim 5s infinite;
  -moz-animation: backAnim 5s infinite;
  -o-animation: backAnim 5s infinite;
  animation: backAnim 5s infinite;
}

@-webkit-keyframes backAnim {
  0% {
    width: 8px;
    height: 68px;
  }
  4% {
    width: 100px;
    height: 75px;
  }
  5% {
    width: 125px;
    height: 80px;
    border-radius: 3px 3px 20px 3px;
  }
  11%, 100% {
    height: 206px;
    width: 125px;
    border-radius: 3px 3px 20px 3px;
  }
}
@-moz-keyframes backAnim {
  0% {
    width: 8px;
    height: 68px;
  }
  4% {
    width: 100px;
    height: 75px;
  }
  5% {
    width: 125px;
    height: 80px;
    border-radius: 3px 3px 20px 3px;
  }
  11%, 100% {
    height: 206px;
    width: 125px;
    border-radius: 3px 3px 20px 3px;
  }
}
@-ms-keyframes backAnim {
  0% {
    width: 8px;
    height: 68px;
  }
  4% {
    width: 100px;
    height: 75px;
  }
  5% {
    width: 125px;
    height: 80px;
    border-radius: 3px 3px 20px 3px;
  }
  11%, 100% {
    height: 206px;
    width: 125px;
    border-radius: 3px 3px 20px 3px;
  }
}
@keyframes backAnim {
  0% {
    width: 8px;
    height: 68px;
  }
  4% {
    width: 100px;
    height: 75px;
  }
  5% {
    width: 125px;
    height: 80px;
    border-radius: 3px 3px 20px 3px;
  }
  11%, 100% {
    height: 206px;
    width: 125px;
    border-radius: 3px 3px 20px 3px;
  }
}
#speaker {
  position: absolute;
  background-color: #646060;
  -webkit-animation: speakerAnim 5s infinite;
  -moz-animation: speakerAnim 5s infinite;
  -o-animation: speakerAnim 5s infinite;
  animation: speakerAnim 5s infinite;
}

@-webkit-keyframes speakerAnim {
  0%, 6% {
    width: 0px;
    height: 0px;
    bottom: 22px;
    left: 103px;
  }
  11% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 15px #484848;
  }
  14%, 100% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 8px #484848;
  }
}
@-moz-keyframes speakerAnim {
  0%, 6% {
    width: 0px;
    height: 0px;
    bottom: 22px;
    left: 103px;
  }
  11% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 15px #484848;
  }
  14%, 100% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 8px #484848;
  }
}
@-ms-keyframes speakerAnim {
  0%, 6% {
    width: 0px;
    height: 0px;
    bottom: 22px;
    left: 103px;
  }
  11% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 15px #484848;
  }
  14%, 100% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 8px #484848;
  }
}
@keyframes speakerAnim {
  0%, 6% {
    width: 0px;
    height: 0px;
    bottom: 22px;
    left: 103px;
  }
  11% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 15px #484848;
  }
  14%, 100% {
    width: 30px;
    height: 30px;
    bottom: 7px;
    left: 88px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 0px 8px #484848;
  }
}
#card1 {
  position: absolute;
  left: 15px;
  background-color: #5eaf89;
  -webkit-animation: card1Anim 5s infinite;
  -moz-animation: card1Anim 5s infinite;
  -o-animation: card1Anim 5s infinite;
  animation: card1Anim 5s infinite;
}

@-webkit-keyframes card1Anim {
  0%, 8% {
    height: 0px;
    width: 0px;
    bottom: 64px;
  }
  9% {
    height: 17px;
    width: 15px;
    bottom: 64px;
  }
  12% {
    height: 113px;
    width: 15px;
    bottom: 17px;
  }
  18%, 100% {
    height: 113px;
    width: 95px;
    bottom: 17px;
  }
}
@-moz-keyframes card1Anim {
  0%, 8% {
    height: 0px;
    width: 0px;
    bottom: 64px;
  }
  9% {
    height: 17px;
    width: 15px;
    bottom: 64px;
  }
  12% {
    height: 113px;
    width: 15px;
    bottom: 17px;
  }
  18%, 100% {
    height: 113px;
    width: 95px;
    bottom: 17px;
  }
}
@-ms-keyframes card1Anim {
  0%, 8% {
    height: 0px;
    width: 0px;
    bottom: 64px;
  }
  9% {
    height: 17px;
    width: 15px;
    bottom: 64px;
  }
  12% {
    height: 113px;
    width: 15px;
    bottom: 17px;
  }
  18%, 100% {
    height: 113px;
    width: 95px;
    bottom: 17px;
  }
}
@keyframes card1Anim {
  0%, 8% {
    height: 0px;
    width: 0px;
    bottom: 64px;
  }
  9% {
    height: 17px;
    width: 15px;
    bottom: 64px;
  }
  12% {
    height: 113px;
    width: 15px;
    bottom: 17px;
  }
  18%, 100% {
    height: 113px;
    width: 95px;
    bottom: 17px;
  }
}
#border {
  position: absolute;
  bottom: 2px;
  right: 7px;
  border: 2px solid #646060;
  border-radius: 3px 3px 20px 3px;
  -webkit-animation: borderAnim 5s infinite;
  -moz-animation: borderAnim 5s infinite;
  -o-animation: borderAnim 5s infinite;
  animation: borderAnim 5s infinite;
}

@-webkit-keyframes borderAnim {
  0%, 8% {
    height: 0px;
    width: 0px;
    border: none;
  }
  9% {
    height: 40px;
    width: 10px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  13% {
    height: 40px;
    width: 117px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  17% {
    height: 198px;
    width: 117px;
    border-right: 2px solid #646060;
    border-left: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
  }
  18%, 100% {
    height: 198px;
    width: 117px;
    border: 2px solid #646060;
  }
}
@-moz-keyframes borderAnim {
  0%, 8% {
    height: 0px;
    width: 0px;
    border: none;
  }
  9% {
    height: 40px;
    width: 10px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  13% {
    height: 40px;
    width: 117px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  17% {
    height: 198px;
    width: 117px;
    border-right: 2px solid #646060;
    border-left: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
  }
  18%, 100% {
    height: 198px;
    width: 117px;
    border: 2px solid #646060;
  }
}
@-ms-keyframes borderAnim {
  0%, 8% {
    height: 0px;
    width: 0px;
    border: none;
  }
  9% {
    height: 40px;
    width: 10px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  13% {
    height: 40px;
    width: 117px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  17% {
    height: 198px;
    width: 117px;
    border-right: 2px solid #646060;
    border-left: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
  }
  18%, 100% {
    height: 198px;
    width: 117px;
    border: 2px solid #646060;
  }
}
@keyframes borderAnim {
  0%, 8% {
    height: 0px;
    width: 0px;
    border: none;
  }
  9% {
    height: 40px;
    width: 10px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  13% {
    height: 40px;
    width: 117px;
    border-right: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
    border-left: none;
  }
  17% {
    height: 198px;
    width: 117px;
    border-right: 2px solid #646060;
    border-left: 2px solid #646060;
    border-bottom: 2px solid #646060;
    border-top: none;
  }
  18%, 100% {
    height: 198px;
    width: 117px;
    border: 2px solid #646060;
  }
}
#card2 {
  position: absolute;
  bottom: 6px;
  left: 7px;
  width: 10px;
  height: 20px;
  background-color: #646060;
  -webkit-animation: card2Anim 5s infinite;
  -moz-animation: card2Anim 5s infinite;
  -o-animation: card2Anim 5s infinite;
  animation: card2Anim 5s infinite;
}

@-webkit-keyframes card2Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  13% {
    height: 20px;
    width: 10px;
  }
  21%, 100% {
    height: 20px;
    width: 78px;
  }
}
@-moz-keyframes card2Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  13% {
    height: 20px;
    width: 10px;
  }
  21%, 100% {
    height: 20px;
    width: 78px;
  }
}
@-ms-keyframes card2Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  13% {
    height: 20px;
    width: 10px;
  }
  21%, 100% {
    height: 20px;
    width: 78px;
  }
}
@keyframes card2Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  13% {
    height: 20px;
    width: 10px;
  }
  21%, 100% {
    height: 20px;
    width: 78px;
  }
}
#card3 {
  position: absolute;
  bottom: 48px;
  left: 8px;
  height: 5px;
  background-color: #3c9b66;
  -webkit-animation: card3Anim 5s infinite;
  -moz-animation: card3Anim 5s infinite;
  -o-animation: card3Anim 5s infinite;
  animation: card3Anim 5s infinite;
}

@-webkit-keyframes card3Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  15% {
    height: 5px;
    width: 110px;
  }
  23%, 100% {
    height: 150px;
    width: 110px;
  }
}
@-moz-keyframes card3Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  15% {
    height: 5px;
    width: 110px;
  }
  23%, 100% {
    height: 150px;
    width: 110px;
  }
}
@-ms-keyframes card3Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  15% {
    height: 5px;
    width: 110px;
  }
  23%, 100% {
    height: 150px;
    width: 110px;
  }
}
@keyframes card3Anim {
  0%, 12% {
    height: 0px;
    width: 0px;
  }
  15% {
    height: 5px;
    width: 110px;
  }
  23%, 100% {
    height: 150px;
    width: 110px;
  }
}
#chip {
  position: absolute;
  bottom: 46px;
  left: 54px;
  width: 4px;
  height: 4px;
  background-color: #484848;
  -webkit-animation: chipAnim 5s infinite;
  -moz-animation: chipAnim 5s infinite;
  -o-animation: chipAnim 5s infinite;
  animation: chipAnim 5s infinite;
}

@-webkit-keyframes chipAnim {
  0%, 15% {
    height: 0px;
    width: 0px;
  }
  16% {
    height: 4px;
    width: 4px;
    bottom: 46px;
    left: 54px;
  }
  20%, 100% {
    height: 22px;
    width: 22px;
    bottom: 37px;
    left: 45px;
  }
}
@-moz-keyframes chipAnim {
  0%, 15% {
    height: 0px;
    width: 0px;
  }
  16% {
    height: 4px;
    width: 4px;
    bottom: 46px;
    left: 54px;
  }
  20%, 100% {
    height: 22px;
    width: 22px;
    bottom: 37px;
    left: 45px;
  }
}
@-ms-keyframes chipAnim {
  0%, 15% {
    height: 0px;
    width: 0px;
  }
  16% {
    height: 4px;
    width: 4px;
    bottom: 46px;
    left: 54px;
  }
  20%, 100% {
    height: 22px;
    width: 22px;
    bottom: 37px;
    left: 45px;
  }
}
@keyframes chipAnim {
  0%, 15% {
    height: 0px;
    width: 0px;
  }
  16% {
    height: 4px;
    width: 4px;
    bottom: 46px;
    left: 54px;
  }
  20%, 100% {
    height: 22px;
    width: 22px;
    bottom: 37px;
    left: 45px;
  }
}
#chip2 {
  position: absolute;
  bottom: 132px;
  left: 60px;
  width: 4px;
  height: 12px;
  background-color: #484848;
  -webkit-animation: chip2Anim 5s infinite;
  -moz-animation: chip2Anim 5s infinite;
  -o-animation: chip2Anim 5s infinite;
  animation: chip2Anim 5s infinite;
}

@-webkit-keyframes chip2Anim {
  0%, 16% {
    height: 0px;
    width: 0px;
  }
  17% {
    height: 12px;
    width: 4px;
    bottom: 132px;
    left: 60px;
  }
  23% {
    height: 12px;
    width: 60px;
    bottom: 132px;
    left: 32px;
  }
  30%, 100% {
    height: 12px;
    width: 60px;
    bottom: 160px;
    left: 32px;
  }
}
@-moz-keyframes chip2Anim {
  0%, 16% {
    height: 0px;
    width: 0px;
  }
  17% {
    height: 12px;
    width: 4px;
    bottom: 132px;
    left: 60px;
  }
  23% {
    height: 12px;
    width: 60px;
    bottom: 132px;
    left: 32px;
  }
  30%, 100% {
    height: 12px;
    width: 60px;
    bottom: 160px;
    left: 32px;
  }
}
@-ms-keyframes chip2Anim {
  0%, 16% {
    height: 0px;
    width: 0px;
  }
  17% {
    height: 12px;
    width: 4px;
    bottom: 132px;
    left: 60px;
  }
  23% {
    height: 12px;
    width: 60px;
    bottom: 132px;
    left: 32px;
  }
  30%, 100% {
    height: 12px;
    width: 60px;
    bottom: 160px;
    left: 32px;
  }
}
@keyframes chip2Anim {
  0%, 16% {
    height: 0px;
    width: 0px;
  }
  17% {
    height: 12px;
    width: 4px;
    bottom: 132px;
    left: 60px;
  }
  23% {
    height: 12px;
    width: 60px;
    bottom: 132px;
    left: 32px;
  }
  30%, 100% {
    height: 12px;
    width: 60px;
    bottom: 160px;
    left: 32px;
  }
}
#volumeWheelBack {
  position: absolute;
  left: 108px;
  bottom: 157px;
  width: 10px;
  height: 10px;
  background-color: #645d5f;
  -webkit-animation: volumeWheelBackAnim 5s infinite;
  -moz-animation: volumeWheelBackAnim 5s infinite;
  -o-animation: volumeWheelBackAnim 5s infinite;
  animation: volumeWheelBackAnim 5s infinite;
}

@-webkit-keyframes volumeWheelBackAnim {
  0%, 17% {
    height: 0px;
    width: 0px;
    left: 113px;
    bottom: 162px;
  }
  21%, 25% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 157px;
  }
  30%, 100% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 167px;
  }
}
@-moz-keyframes volumeWheelBackAnim {
  0%, 17% {
    height: 0px;
    width: 0px;
    left: 113px;
    bottom: 162px;
  }
  21%, 25% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 157px;
  }
  30%, 100% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 167px;
  }
}
@-ms-keyframes volumeWheelBackAnim {
  0%, 17% {
    height: 0px;
    width: 0px;
    left: 113px;
    bottom: 162px;
  }
  21%, 25% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 157px;
  }
  30%, 100% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 167px;
  }
}
@keyframes volumeWheelBackAnim {
  0%, 17% {
    height: 0px;
    width: 0px;
    left: 113px;
    bottom: 162px;
  }
  21%, 25% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 157px;
  }
  30%, 100% {
    height: 10px;
    width: 10px;
    left: 108px;
    bottom: 167px;
  }
}
#volumeWheel {
  position: absolute;
  left: 108px;
  bottom: 157px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #b2aea9;
  box-shadow: inset 0px 0px 0px 5px #dddddd;
  -webkit-animation: volumeWheelAnim 5s infinite;
  -moz-animation: volumeWheelAnim 5s infinite;
  -o-animation: volumeWheelAnim 5s infinite;
  animation: volumeWheelAnim 5s infinite;
}

@-webkit-keyframes volumeWheelAnim {
  0%, 18% {
    height: 1px;
    width: 1px;
    left: 115px;
    bottom: 159px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  22% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  25% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
  30%, 100% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 164px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
}
@-moz-keyframes volumeWheelAnim {
  0%, 18% {
    height: 1px;
    width: 1px;
    left: 115px;
    bottom: 159px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  22% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  25% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
  30%, 100% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 164px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
}
@-ms-keyframes volumeWheelAnim {
  0%, 18% {
    height: 1px;
    width: 1px;
    left: 115px;
    bottom: 159px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  22% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  25% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
  30%, 100% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 164px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
}
@keyframes volumeWheelAnim {
  0%, 18% {
    height: 1px;
    width: 1px;
    left: 115px;
    bottom: 159px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  22% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 10px #dddddd;
  }
  25% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 154px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
  30%, 100% {
    height: 16px;
    width: 16px;
    left: 110px;
    bottom: 164px;
    box-shadow: inset 0px 0px 0px 5px #dddddd;
  }
}
#chipPinL {
  position: absolute;
  left: 43px;
  bottom: 54px;
  width: 4px;
  height: 2px;
  background-color: #dddddd;
  box-shadow: 0px 3px #dddddd;
  -webkit-animation: chipPinAnimL 5s infinite;
  -moz-animation: chipPinAnimL 5s infinite;
  -o-animation: chipPinAnimL 5s infinite;
  animation: chipPinAnimL 5s infinite;
}

@-webkit-keyframes chipPinAnimL {
  0%, 19% {
    width: 0px;
  }
  20% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  21% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  22%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@-moz-keyframes chipPinAnimL {
  0%, 19% {
    width: 0px;
  }
  20% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  21% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  22%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@-ms-keyframes chipPinAnimL {
  0%, 19% {
    width: 0px;
  }
  20% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  21% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  22%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@keyframes chipPinAnimL {
  0%, 19% {
    width: 0px;
  }
  20% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  21% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  22%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
#chipPinR {
  position: absolute;
  left: 65px;
  bottom: 54px;
  width: 4px;
  height: 2px;
  background-color: #dddddd;
  box-shadow: 0px 3px #dddddd;
  -webkit-animation: chipPinAnimR 5s infinite;
  -moz-animation: chipPinAnimR 5s infinite;
  -o-animation: chipPinAnimR 5s infinite;
  animation: chipPinAnimR 5s infinite;
}

@-webkit-keyframes chipPinAnimR {
  0%, 22% {
    width: 0px;
  }
  23% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  24% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  25%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@-moz-keyframes chipPinAnimR {
  0%, 22% {
    width: 0px;
  }
  23% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  24% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  25%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@-ms-keyframes chipPinAnimR {
  0%, 22% {
    width: 0px;
  }
  23% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  24% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  25%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
@keyframes chipPinAnimR {
  0%, 22% {
    width: 0px;
  }
  23% {
    width: 4px;
    box-shadow: 0px 3px #dddddd;
  }
  24% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd;
  }
  25%, 100% {
    box-shadow: 0px 3px #dddddd, 0px 6px #dddddd, 0px 9px #dddddd, 0px 12px #dddddd, 0px 15px #dddddd;
  }
}
#ec1 {
  position: absolute;
  left: 24px;
  bottom: 122px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #484848;
  -webkit-animation: ec3Anim 5s infinite;
  -moz-animation: ec3Anim 5s infinite;
  -o-animation: ec3Anim 5s infinite;
  animation: ec3Anim 5s infinite;
}

@-webkit-keyframes ec3Anim {
  0%, 18% {
    width: 0px;
  }
  20% {
    width: 4px;
    height: 4px;
  }
  22% {
    box-shadow: 8px 0px #484848;
  }
  24% {
    box-shadow: 8px 0px #484848, 16px 0px #484848;
  }
  26% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
  }
  28% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
  }
  30%, 100% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
  }
}
@-moz-keyframes ec3Anim {
  0%, 18% {
    width: 0px;
  }
  20% {
    width: 4px;
    height: 4px;
  }
  22% {
    box-shadow: 8px 0px #484848;
  }
  24% {
    box-shadow: 8px 0px #484848, 16px 0px #484848;
  }
  26% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
  }
  28% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
  }
  30%, 100% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
  }
}
@-ms-keyframes ec3Anim {
  0%, 18% {
    width: 0px;
  }
  20% {
    width: 4px;
    height: 4px;
  }
  22% {
    box-shadow: 8px 0px #484848;
  }
  24% {
    box-shadow: 8px 0px #484848, 16px 0px #484848;
  }
  26% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
  }
  28% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
  }
  30%, 100% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
  }
}
@keyframes ec3Anim {
  0%, 18% {
    width: 0px;
  }
  20% {
    width: 4px;
    height: 4px;
  }
  22% {
    box-shadow: 8px 0px #484848;
  }
  24% {
    box-shadow: 8px 0px #484848, 16px 0px #484848;
  }
  26% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848;
  }
  28% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848;
  }
  30%, 100% {
    box-shadow: 8px 0px #484848, 16px 0px #484848, 24px 0px #484848, 32px 0px #484848, 40px 0px #484848;
  }
}
#joystickBack {
  position: absolute;
  left: 8px;
  bottom: 47px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #dddddd;
  -webkit-animation: joystickBackAnim 5s infinite;
  -moz-animation: joystickBackAnim 5s infinite;
  -o-animation: joystickBackAnim 5s infinite;
  animation: joystickBackAnim 5s infinite;
}

@-webkit-keyframes joystickBackAnim {
  0%, 23% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  28%, 100% {
    left: 8px;
    bottom: 47px;
    width: 36px;
    height: 36px;
  }
}
@-moz-keyframes joystickBackAnim {
  0%, 23% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  28%, 100% {
    left: 8px;
    bottom: 47px;
    width: 36px;
    height: 36px;
  }
}
@-ms-keyframes joystickBackAnim {
  0%, 23% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  28%, 100% {
    left: 8px;
    bottom: 47px;
    width: 36px;
    height: 36px;
  }
}
@keyframes joystickBackAnim {
  0%, 23% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  28%, 100% {
    left: 8px;
    bottom: 47px;
    width: 36px;
    height: 36px;
  }
}
#joystickCross1 {
  position: absolute;
  left: 11px;
  bottom: 60px;
  width: 30px;
  height: 10px;
  border-radius: 1px;
  background-color: #484848;
  -webkit-animation: joystickCrossAnim 5s infinite;
  -moz-animation: joystickCrossAnim 5s infinite;
  -o-animation: joystickCrossAnim 5s infinite;
  animation: joystickCrossAnim 5s infinite;
}

#joystickCross2 {
  position: absolute;
  left: 11px;
  bottom: 60px;
  width: 30px;
  height: 10px;
  border-radius: 1px;
  background-color: #484848;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: joystickCrossAnim 5s infinite;
  -moz-animation: joystickCrossAnim 5s infinite;
  -o-animation: joystickCrossAnim 5s infinite;
  animation: joystickCrossAnim 5s infinite;
}

@-webkit-keyframes joystickCrossAnim {
  0%, 26% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  33%, 100% {
    left: 11px;
    bottom: 60px;
    width: 30px;
    height: 10px;
  }
}
@-moz-keyframes joystickCrossAnim {
  0%, 26% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  33%, 100% {
    left: 11px;
    bottom: 60px;
    width: 30px;
    height: 10px;
  }
}
@-ms-keyframes joystickCrossAnim {
  0%, 26% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  33%, 100% {
    left: 11px;
    bottom: 60px;
    width: 30px;
    height: 10px;
  }
}
@keyframes joystickCrossAnim {
  0%, 26% {
    left: 26px;
    bottom: 65px;
    width: 0px;
    height: 0px;
  }
  33%, 100% {
    left: 11px;
    bottom: 60px;
    width: 30px;
    height: 10px;
  }
}
#buttonsABBack {
  position: absolute;
  left: 70px;
  bottom: 55px;
  width: 50px;
  height: 22px;
  border-radius: 11px;
  background-color: #dddddd;
  box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  -moz-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  -webkit-transform: rotate(160deg);
  transform: rotate(160deg);
  -webkit-animation: buttonsABBackAnim 5s infinite;
  -moz-animation: buttonsABBackAnim 5s infinite;
  -o-animation: buttonsABBackAnim 5s infinite;
  animation: buttonsABBackAnim 5s infinite;
}

@-webkit-keyframes buttonsABBackAnim {
  0%, 24% {
    left: 95px;
    bottom: 67px;
    width: 0px;
    height: 0px;
    -moz-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  }
  29% {
    left: 70px;
    bottom: 55px;
    width: 50px;
    height: 22px;
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
  }
  33%, 100% {
    box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  }
}
@-moz-keyframes buttonsABBackAnim {
  0%, 24% {
    left: 95px;
    bottom: 67px;
    width: 0px;
    height: 0px;
    -moz-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  }
  29% {
    left: 70px;
    bottom: 55px;
    width: 50px;
    height: 22px;
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
  }
  33%, 100% {
    box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  }
}
@-ms-keyframes buttonsABBackAnim {
  0%, 24% {
    left: 95px;
    bottom: 67px;
    width: 0px;
    height: 0px;
    -moz-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  }
  29% {
    left: 70px;
    bottom: 55px;
    width: 50px;
    height: 22px;
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
  }
  33%, 100% {
    box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  }
}
@keyframes buttonsABBackAnim {
  0%, 24% {
    left: 95px;
    bottom: 67px;
    width: 0px;
    height: 0px;
    -moz-transform: rotate(220deg);
    -ms-transform: rotate(220deg);
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
  }
  29% {
    left: 70px;
    bottom: 55px;
    width: 50px;
    height: 22px;
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
  }
  33%, 100% {
    box-shadow: inset 0px 0px 0px 2px #a9a9a9;
  }
}
#buttonsAB {
  position: absolute;
  left: 74px;
  bottom: 53px;
  width: 16px;
  height: 16px;
  border-radius: 11px;
  background-color: #484848;
  box-shadow: 26px -10px #484848;
  -webkit-animation: buttonsABAnim 5s infinite;
  -moz-animation: buttonsABAnim 5s infinite;
  -o-animation: buttonsABAnim 5s infinite;
  animation: buttonsABAnim 5s infinite;
}

@-webkit-keyframes buttonsABAnim {
  0%, 28% {
    left: 81px;
    bottom: 61px;
    width: 0px;
    height: 0px;
    box-shadow: 26px -10px #484848;
  }
  33%, 100% {
    left: 74px;
    bottom: 53px;
    width: 16px;
    height: 16px;
    box-shadow: 26px -10px #484848;
  }
}
@-moz-keyframes buttonsABAnim {
  0%, 28% {
    left: 81px;
    bottom: 61px;
    width: 0px;
    height: 0px;
    box-shadow: 26px -10px #484848;
  }
  33%, 100% {
    left: 74px;
    bottom: 53px;
    width: 16px;
    height: 16px;
    box-shadow: 26px -10px #484848;
  }
}
@-ms-keyframes buttonsABAnim {
  0%, 28% {
    left: 81px;
    bottom: 61px;
    width: 0px;
    height: 0px;
    box-shadow: 26px -10px #484848;
  }
  33%, 100% {
    left: 74px;
    bottom: 53px;
    width: 16px;
    height: 16px;
    box-shadow: 26px -10px #484848;
  }
}
@keyframes buttonsABAnim {
  0%, 28% {
    left: 81px;
    bottom: 61px;
    width: 0px;
    height: 0px;
    box-shadow: 26px -10px #484848;
  }
  33%, 100% {
    left: 74px;
    bottom: 53px;
    width: 16px;
    height: 16px;
    box-shadow: 26px -10px #484848;
  }
}
#buttonsABText {
  -webkit-animation: buttonsABTextAnim 5s infinite;
  -moz-animation: buttonsABTextAnim 5s infinite;
  -o-animation: buttonsABTextAnim 5s infinite;
  animation: buttonsABTextAnim 5s infinite;
}

#buttonsABText::before {
  content: "A";
  position: absolute;
  left: 106px;
  bottom: 50px;
  font: 8px "Arial";
  color: #606060;
}

#buttonsABText::after {
  content: "B";
  position: absolute;
  left: 80px;
  bottom: 40px;
  font: 8px "Arial";
  color: #606060;
}

@-webkit-keyframes buttonsABTextAnim {
  0%, 73% {
    visibility: hidden;
  }
  74%, 100% {
    bisibility: visible;
  }
}
@-moz-keyframes buttonsABTextAnim {
  0%, 73% {
    visibility: hidden;
  }
  74%, 100% {
    bisibility: visible;
  }
}
@-ms-keyframes buttonsABTextAnim {
  0%, 73% {
    visibility: hidden;
  }
  74%, 100% {
    bisibility: visible;
  }
}
@keyframes buttonsABTextAnim {
  0%, 73% {
    visibility: hidden;
  }
  74%, 100% {
    bisibility: visible;
  }
}
#buttonsSSText {
  -webkit-animation: buttonsSSTextAnim 5s infinite;
  -moz-animation: buttonsSSTextAnim 5s infinite;
  -o-animation: buttonsSSTextAnim 5s infinite;
  animation: buttonsSSTextAnim 5s infinite;
}

#buttonsSSText::before {
  content: "select";
  position: absolute;
  left: 45px;
  bottom: 15px;
  font: 7px "Arial";
  color: #606060;
}

#buttonsSSText::after {
  content: "start";
  position: absolute;
  left: 68px;
  bottom: 15px;
  font: 7px "Arial";
  color: #606060;
}

@-webkit-keyframes buttonsSSTextAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    bisibility: visible;
  }
}
@-moz-keyframes buttonsSSTextAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    bisibility: visible;
  }
}
@-ms-keyframes buttonsSSTextAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    bisibility: visible;
  }
}
@keyframes buttonsSSTextAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    bisibility: visible;
  }
}
#buttonsSSBack {
  position: absolute;
  left: 45px;
  bottom: 26px;
  width: 40px;
  height: 10px;
  background-color: #dddddd;
  -webkit-animation: buttonsSSBackAnim 5s infinite;
  -moz-animation: buttonsSSBackAnim 5s infinite;
  -o-animation: buttonsSSBackAnim 5s infinite;
  animation: buttonsSSBackAnim 5s infinite;
}

@-webkit-keyframes buttonsSSBackAnim {
  0%, 27% {
    left: 65px;
    bottom: 26px;
    width: 0px;
    height: 10px;
  }
  33%, 100% {
    left: 45px;
    bottom: 26px;
    width: 40px;
    height: 10px;
  }
}
@-moz-keyframes buttonsSSBackAnim {
  0%, 27% {
    left: 65px;
    bottom: 26px;
    width: 0px;
    height: 10px;
  }
  33%, 100% {
    left: 45px;
    bottom: 26px;
    width: 40px;
    height: 10px;
  }
}
@-ms-keyframes buttonsSSBackAnim {
  0%, 27% {
    left: 65px;
    bottom: 26px;
    width: 0px;
    height: 10px;
  }
  33%, 100% {
    left: 45px;
    bottom: 26px;
    width: 40px;
    height: 10px;
  }
}
@keyframes buttonsSSBackAnim {
  0%, 27% {
    left: 65px;
    bottom: 26px;
    width: 0px;
    height: 10px;
  }
  33%, 100% {
    left: 45px;
    bottom: 26px;
    width: 40px;
    height: 10px;
  }
}
#buttonsSS {
  position: absolute;
  border-radius: 2px;
  background-color: #484848;
  -webkit-animation: buttonsSSAnim 5s infinite;
  -moz-animation: buttonsSSAnim 5s infinite;
  -o-animation: buttonsSSAnim 5s infinite;
  animation: buttonsSSAnim 5s infinite;
}

@-webkit-keyframes buttonsSSAnim {
  0%, 34% {
    left: 52px;
    bottom: 31px;
    width: 0px;
    height: 0px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  41% {
    left: 45px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  44% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
  }
  49%, 100% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
  }
}
@-moz-keyframes buttonsSSAnim {
  0%, 34% {
    left: 52px;
    bottom: 31px;
    width: 0px;
    height: 0px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  41% {
    left: 45px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  44% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
  }
  49%, 100% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
  }
}
@-ms-keyframes buttonsSSAnim {
  0%, 34% {
    left: 52px;
    bottom: 31px;
    width: 0px;
    height: 0px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  41% {
    left: 45px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  44% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
  }
  49%, 100% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
  }
}
@keyframes buttonsSSAnim {
  0%, 34% {
    left: 52px;
    bottom: 31px;
    width: 0px;
    height: 0px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  41% {
    left: 45px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 26px 0px #a9a8a6;
  }
  44% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 2px #a9a8a6, 20px 0px 0px -2px #484848, 20px 0px #a9a8a6;
  }
  49%, 100% {
    left: 48px;
    bottom: 29px;
    width: 14px;
    height: 4px;
    box-shadow: inset 0px 0px 0px 0px #a9a8a6, 20px 0px 0px 0px #484848, 20px 0px #a9a8a6;
  }
}
#screenBack {
  position: absolute;
  background-color: #dddddd;
  border-radius: 2px;
  -webkit-animation: screenBackAnim 5s infinite;
  -moz-animation: screenBackAnim 5s infinite;
  -o-animation: screenBackAnim 5s infinite;
  animation: screenBackAnim 5s infinite;
}

@-webkit-keyframes screenBackAnim {
  0%, 25% {
    left: 63px;
    bottom: 125px;
    width: 0px;
    height: 64px;
  }
  31%, 100% {
    left: 21px;
    bottom: 125px;
    width: 84px;
    height: 64px;
  }
}
@-moz-keyframes screenBackAnim {
  0%, 25% {
    left: 63px;
    bottom: 125px;
    width: 0px;
    height: 64px;
  }
  31%, 100% {
    left: 21px;
    bottom: 125px;
    width: 84px;
    height: 64px;
  }
}
@-ms-keyframes screenBackAnim {
  0%, 25% {
    left: 63px;
    bottom: 125px;
    width: 0px;
    height: 64px;
  }
  31%, 100% {
    left: 21px;
    bottom: 125px;
    width: 84px;
    height: 64px;
  }
}
@keyframes screenBackAnim {
  0%, 25% {
    left: 63px;
    bottom: 125px;
    width: 0px;
    height: 64px;
  }
  31%, 100% {
    left: 21px;
    bottom: 125px;
    width: 84px;
    height: 64px;
  }
}
#screen {
  position: absolute;
  background-color: #494949;
  border-radius: 4px 4px 10px 4px;
  -webkit-animation: screenAnim 5s infinite;
  -moz-animation: screenAnim 5s infinite;
  -o-animation: screenAnim 5s infinite;
  animation: screenAnim 5s infinite;
}

@-webkit-keyframes screenAnim {
  0%, 28% {
    left: 68px;
    bottom: 131px;
    width: 0px;
    height: 0px;
  }
  33%, 36% {
    left: 26px;
    bottom: 100px;
    width: 74px;
    height: 64px;
  }
  40%, 42% {
    left: 26px;
    bottom: 114px;
    width: 74px;
    height: 64px;
  }
  48%, 100% {
    left: 8px;
    bottom: 100px;
    width: 110px;
    height: 96px;
  }
}
@-moz-keyframes screenAnim {
  0%, 28% {
    left: 68px;
    bottom: 131px;
    width: 0px;
    height: 0px;
  }
  33%, 36% {
    left: 26px;
    bottom: 100px;
    width: 74px;
    height: 64px;
  }
  40%, 42% {
    left: 26px;
    bottom: 114px;
    width: 74px;
    height: 64px;
  }
  48%, 100% {
    left: 8px;
    bottom: 100px;
    width: 110px;
    height: 96px;
  }
}
@-ms-keyframes screenAnim {
  0%, 28% {
    left: 68px;
    bottom: 131px;
    width: 0px;
    height: 0px;
  }
  33%, 36% {
    left: 26px;
    bottom: 100px;
    width: 74px;
    height: 64px;
  }
  40%, 42% {
    left: 26px;
    bottom: 114px;
    width: 74px;
    height: 64px;
  }
  48%, 100% {
    left: 8px;
    bottom: 100px;
    width: 110px;
    height: 96px;
  }
}
@keyframes screenAnim {
  0%, 28% {
    left: 68px;
    bottom: 131px;
    width: 0px;
    height: 0px;
  }
  33%, 36% {
    left: 26px;
    bottom: 100px;
    width: 74px;
    height: 64px;
  }
  40%, 42% {
    left: 26px;
    bottom: 114px;
    width: 74px;
    height: 64px;
  }
  48%, 100% {
    left: 8px;
    bottom: 100px;
    width: 110px;
    height: 96px;
  }
}
#jackBack {
  position: absolute;
  background-color: #646060;
  -webkit-animation: jackBackAnim 5s infinite;
  -moz-animation: jackBackAnim 5s infinite;
  -o-animation: jackBackAnim 5s infinite;
  animation: jackBackAnim 5s infinite;
}

@-webkit-keyframes jackBackAnim {
  0%, 21% {
    left: 11px;
    bottom: 136px;
    width: 0px;
    height: 0px;
  }
  25%, 31% {
    left: 6px;
    bottom: 132px;
    width: 12px;
    height: 12px;
  }
  36%, 100% {
    left: 6px;
    bottom: 138px;
    width: 12px;
    height: 12px;
  }
}
@-moz-keyframes jackBackAnim {
  0%, 21% {
    left: 11px;
    bottom: 136px;
    width: 0px;
    height: 0px;
  }
  25%, 31% {
    left: 6px;
    bottom: 132px;
    width: 12px;
    height: 12px;
  }
  36%, 100% {
    left: 6px;
    bottom: 138px;
    width: 12px;
    height: 12px;
  }
}
@-ms-keyframes jackBackAnim {
  0%, 21% {
    left: 11px;
    bottom: 136px;
    width: 0px;
    height: 0px;
  }
  25%, 31% {
    left: 6px;
    bottom: 132px;
    width: 12px;
    height: 12px;
  }
  36%, 100% {
    left: 6px;
    bottom: 138px;
    width: 12px;
    height: 12px;
  }
}
@keyframes jackBackAnim {
  0%, 21% {
    left: 11px;
    bottom: 136px;
    width: 0px;
    height: 0px;
  }
  25%, 31% {
    left: 6px;
    bottom: 132px;
    width: 12px;
    height: 12px;
  }
  36%, 100% {
    left: 6px;
    bottom: 138px;
    width: 12px;
    height: 12px;
  }
}
#jack {
  position: absolute;
  background-color: #494949;
  border-radius: 7px;
  -webkit-animation: jackAnim 5s infinite;
  -moz-animation: jackAnim 5s infinite;
  -o-animation: jackAnim 5s infinite;
  animation: jackAnim 5s infinite;
}

@-webkit-keyframes jackAnim {
  0%, 23% {
    left: 6px;
    bottom: 135px;
    width: 0px;
    height: 0px;
  }
  27%, 31% {
    left: 1px;
    bottom: 131px;
    width: 14px;
    height: 14px;
  }
  36%, 100% {
    left: 1px;
    bottom: 137px;
    width: 14px;
    height: 14px;
  }
}
@-moz-keyframes jackAnim {
  0%, 23% {
    left: 6px;
    bottom: 135px;
    width: 0px;
    height: 0px;
  }
  27%, 31% {
    left: 1px;
    bottom: 131px;
    width: 14px;
    height: 14px;
  }
  36%, 100% {
    left: 1px;
    bottom: 137px;
    width: 14px;
    height: 14px;
  }
}
@-ms-keyframes jackAnim {
  0%, 23% {
    left: 6px;
    bottom: 135px;
    width: 0px;
    height: 0px;
  }
  27%, 31% {
    left: 1px;
    bottom: 131px;
    width: 14px;
    height: 14px;
  }
  36%, 100% {
    left: 1px;
    bottom: 137px;
    width: 14px;
    height: 14px;
  }
}
@keyframes jackAnim {
  0%, 23% {
    left: 6px;
    bottom: 135px;
    width: 0px;
    height: 0px;
  }
  27%, 31% {
    left: 1px;
    bottom: 131px;
    width: 14px;
    height: 14px;
  }
  36%, 100% {
    left: 1px;
    bottom: 137px;
    width: 14px;
    height: 14px;
  }
}
#screen2 {
  position: absolute;
  background-color: #b7b28f;
  border-radius: 2px;
  -webkit-animation: screen2Anim 5s infinite;
  -moz-animation: screen2Anim 5s infinite;
  -o-animation: screen2Anim 5s infinite;
  animation: screen2Anim 5s infinite;
}

@-webkit-keyframes screen2Anim {
  0%, 44% {
    left: 59px;
    bottom: 151px;
    width: 0px;
    height: 0px;
  }
  48% {
    left: 54px;
    bottom: 146px;
    width: 10px;
    height: 10px;
  }
  52% {
    left: 22px;
    bottom: 146px;
    width: 80px;
    height: 10px;
  }
  60%, 100% {
    left: 22px;
    bottom: 112px;
    width: 80px;
    height: 74px;
  }
}
@-moz-keyframes screen2Anim {
  0%, 44% {
    left: 59px;
    bottom: 151px;
    width: 0px;
    height: 0px;
  }
  48% {
    left: 54px;
    bottom: 146px;
    width: 10px;
    height: 10px;
  }
  52% {
    left: 22px;
    bottom: 146px;
    width: 80px;
    height: 10px;
  }
  60%, 100% {
    left: 22px;
    bottom: 112px;
    width: 80px;
    height: 74px;
  }
}
@-ms-keyframes screen2Anim {
  0%, 44% {
    left: 59px;
    bottom: 151px;
    width: 0px;
    height: 0px;
  }
  48% {
    left: 54px;
    bottom: 146px;
    width: 10px;
    height: 10px;
  }
  52% {
    left: 22px;
    bottom: 146px;
    width: 80px;
    height: 10px;
  }
  60%, 100% {
    left: 22px;
    bottom: 112px;
    width: 80px;
    height: 74px;
  }
}
@keyframes screen2Anim {
  0%, 44% {
    left: 59px;
    bottom: 151px;
    width: 0px;
    height: 0px;
  }
  48% {
    left: 54px;
    bottom: 146px;
    width: 10px;
    height: 10px;
  }
  52% {
    left: 22px;
    bottom: 146px;
    width: 80px;
    height: 10px;
  }
  60%, 100% {
    left: 22px;
    bottom: 112px;
    width: 80px;
    height: 74px;
  }
}
#box {
  position: absolute;
  background-color: #5f98c6;
  border-radius: 3px 3px 20px 3px;
  height: 206px;
  width: 125px;
  bottom: 0px;
  -webkit-animation: boxAnim 5s infinite;
  -moz-animation: boxAnim 5s infinite;
  -o-animation: boxAnim 5s infinite;
  animation: boxAnim 5s infinite;
}

@-webkit-keyframes boxAnim {
  0%, 67% {
    height: 0px;
    width: 125px;
    bottom: 206px;
  }
  80%, 100% {
    height: 206px;
    width: 125px;
    bottom: 0px;
  }
}
@-moz-keyframes boxAnim {
  0%, 67% {
    height: 0px;
    width: 125px;
    bottom: 206px;
  }
  80%, 100% {
    height: 206px;
    width: 125px;
    bottom: 0px;
  }
}
@-ms-keyframes boxAnim {
  0%, 67% {
    height: 0px;
    width: 125px;
    bottom: 206px;
  }
  80%, 100% {
    height: 206px;
    width: 125px;
    bottom: 0px;
  }
}
@keyframes boxAnim {
  0%, 67% {
    height: 0px;
    width: 125px;
    bottom: 206px;
  }
  80%, 100% {
    height: 206px;
    width: 125px;
    bottom: 0px;
  }
}
#gameboyText {
  position: absolute;
  left: 23px;
  bottom: 93px;
  height: 20px;
  width: 40px;
  font: 7px "gyre";
  color: #b7b28f;
  clip: rect(0px, 0px, 40px, 20px);
  -webkit-animation: gameboyTextAnim 5s infinite;
  -moz-animation: gameboyTextAnim 5s infinite;
  -o-animation: gameboyTextAnim 5s infinite;
  animation: gameboyTextAnim 5s infinite;
}

@-webkit-keyframes gameboyTextAnim {
  0%, 55% {
    clip: rect(0px, 0px, 20px, 0px);
  }
  60%, 100% {
    clip: rect(0px, 40px, 20px, 0px);
  }
}
@-moz-keyframes gameboyTextAnim {
  0%, 55% {
    clip: rect(0px, 0px, 20px, 0px);
  }
  60%, 100% {
    clip: rect(0px, 40px, 20px, 0px);
  }
}
@-ms-keyframes gameboyTextAnim {
  0%, 55% {
    clip: rect(0px, 0px, 20px, 0px);
  }
  60%, 100% {
    clip: rect(0px, 40px, 20px, 0px);
  }
}
@keyframes gameboyTextAnim {
  0%, 55% {
    clip: rect(0px, 0px, 20px, 0px);
  }
  60%, 100% {
    clip: rect(0px, 40px, 20px, 0px);
  }
}
#powerBack {
  position: absolute;
  background-color: #494949;
  width: 15px;
  height: 9px;
  left: 6px;
  bottom: 197px;
  -webkit-animation: powerBackAnim 5s infinite;
  -moz-animation: powerBackAnim 5s infinite;
  -o-animation: powerBackAnim 5s infinite;
  animation: powerBackAnim 5s infinite;
}

@-webkit-keyframes powerBackAnim {
  0%, 23% {
    height: 0px;
  }
  30%, 100% {
    height: 9px;
  }
}
@-moz-keyframes powerBackAnim {
  0%, 23% {
    height: 0px;
  }
  30%, 100% {
    height: 9px;
  }
}
@-ms-keyframes powerBackAnim {
  0%, 23% {
    height: 0px;
  }
  30%, 100% {
    height: 9px;
  }
}
@keyframes powerBackAnim {
  0%, 23% {
    height: 0px;
  }
  30%, 100% {
    height: 9px;
  }
}
#power {
  position: absolute;
  background-color: #494949;
  border-radius: 4px 4px 0px 0px / 2px 2px 0px 0px;
  width: 8px;
  height: 6px;
  visibility: visible;
  -webkit-animation: powerAnim 5s infinite;
  -moz-animation: powerAnim 5s infinite;
  -o-animation: powerAnim 5s infinite;
  animation: powerAnim 5s infinite;
}

@-webkit-keyframes powerAnim {
  0%, 42% {
    visibility: hidden;
    left: 9px;
    bottom: 197px;
  }
  43% {
    visibility: visible;
    left: 9px;
    bottom: 197px;
  }
  46%, 90% {
    visibility: visible;
    left: 9px;
    bottom: 202px;
  }
  92%, 100% {
    visibility: visible;
    left: 15px;
    bottom: 202px;
  }
}
@-moz-keyframes powerAnim {
  0%, 42% {
    visibility: hidden;
    left: 9px;
    bottom: 197px;
  }
  43% {
    visibility: visible;
    left: 9px;
    bottom: 197px;
  }
  46%, 90% {
    visibility: visible;
    left: 9px;
    bottom: 202px;
  }
  92%, 100% {
    visibility: visible;
    left: 15px;
    bottom: 202px;
  }
}
@-ms-keyframes powerAnim {
  0%, 42% {
    visibility: hidden;
    left: 9px;
    bottom: 197px;
  }
  43% {
    visibility: visible;
    left: 9px;
    bottom: 197px;
  }
  46%, 90% {
    visibility: visible;
    left: 9px;
    bottom: 202px;
  }
  92%, 100% {
    visibility: visible;
    left: 15px;
    bottom: 202px;
  }
}
@keyframes powerAnim {
  0%, 42% {
    visibility: hidden;
    left: 9px;
    bottom: 197px;
  }
  43% {
    visibility: visible;
    left: 9px;
    bottom: 197px;
  }
  46%, 90% {
    visibility: visible;
    left: 9px;
    bottom: 202px;
  }
  92%, 100% {
    visibility: visible;
    left: 15px;
    bottom: 202px;
  }
}
#powerLed {
  position: absolute;
  background-color: #202020;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  left: 10px;
  bottom: 180px;
  -webkit-animation: powerLedAnim 5s infinite;
  -moz-animation: powerLedAnim 5s infinite;
  -o-animation: powerLedAnim 5s infinite;
  animation: powerLedAnim 5s infinite;
}

@-webkit-keyframes powerLedAnim {
  0%, 49% {
    width: 0px;
    height: 0px;
    left: 12px;
    bottom: 172px;
  }
  52%, 91% {
    background-color: #202020;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
  92%, 100% {
    background-color: red;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
}
@-moz-keyframes powerLedAnim {
  0%, 49% {
    width: 0px;
    height: 0px;
    left: 12px;
    bottom: 172px;
  }
  52%, 91% {
    background-color: #202020;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
  92%, 100% {
    background-color: red;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
}
@-ms-keyframes powerLedAnim {
  0%, 49% {
    width: 0px;
    height: 0px;
    left: 12px;
    bottom: 172px;
  }
  52%, 91% {
    background-color: #202020;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
  92%, 100% {
    background-color: red;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
}
@keyframes powerLedAnim {
  0%, 49% {
    width: 0px;
    height: 0px;
    left: 12px;
    bottom: 172px;
  }
  52%, 91% {
    background-color: #202020;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
  92%, 100% {
    background-color: red;
    width: 4px;
    height: 4px;
    left: 10px;
    bottom: 170px;
  }
}
#speakerFilter {
  position: absolute;
  background-color: #555;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  left: 95px;
  bottom: 20px;
  visibility: visible;
  box-shadow: 3px -3px #555, 6px -6px #555, 9px -9px #555, 0px 6px #555,3px 3px #555, 6px 0px #555, 9px -3px #555, 12px -6px #555, 15px -9px #555, 3px 9px #555, 6px 6px #555, 9px 3px #555, 12px 0px #555, 15px -3px #555, 18px -6px #555, 9px 9px #555, 12px 6px #555, 15px 3px #555, 18px 0px #555;
  -webkit-animation: speakerFilterAnim 5s infinite;
  -moz-animation: speakerFilterAnim 5s infinite;
  -o-animation: speakerFilterAnim 5s infinite;
  animation: speakerFilterAnim 5s infinite;
}

@-webkit-keyframes speakerFilterAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    visibility: visible;
  }
}
@-moz-keyframes speakerFilterAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    visibility: visible;
  }
}
@-ms-keyframes speakerFilterAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    visibility: visible;
  }
}
@keyframes speakerFilterAnim {
  0%, 75% {
    visibility: hidden;
  }
  76%, 100% {
    visibility: visible;
  }
}