html,
body {
  background-color: #000000;
  color: #fff;
  font-family: helvetica, arial, sans-serif;
  margin: 0;
  padding: 0;
}
* {
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
  /* important, or your text resizes randomly on rotation! */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-rendering: optimizeLegibility;
}
.hidden {
  display: none!important;
}
#ad1 {
  position: absolute;
  bottom: 0;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  image-rendering: optimizeSpeed;
  -ms-interpolation-mode: nearest-neighbor;
}
#wrapper {
  height: 100%;
  width: 100%;
}
#canvasWrapper {
  -webkit-box-flex: 1;
  box-flex: 1;
  width: 100%;
}
.ad1 {
  height: 50px;
  width: 100%;
  color: #000;
}
#inner-wrapper {
  display: none;
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 50px;
  bottom: 0;
}
.centerV {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}
.centerH {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}
@media only screen and (orientation: portrait) {
  body #orientation {
    display: none;
  }
}
@media only screen and (orientation: landscape) {
  body #orientation {
    display: block;
  }
}
@-webkit-keyframes changeOrientation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-ms-keyframes changeOrientation {
  0% {
    -ms-transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(90deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}
@keyframes changeOrientation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.orientation {
  width: 100%;
  height: 100%;
  /*@ZIANGO*/
  background: #ffffff;
  /**/
  position: absolute;
  z-index: 99999;
  text-align: center;
}
#orientation p {
  color: #ffffff;
  font-size: 36px;
  line-height: 80px;
  text-transform: uppercase;
}
.orientationContainer {
  position: relative;
  display: inline-block;
  width: 100%;
  /*@ZIANGO*/
  background: #ffffff;
  height: 100%;
  top:20%;
  /* */
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 50% 25%;
  -ms-transform: scale(0.5);
  -ms-transform-origin: 50% 25%;
  transform: scale(0.5);
  transform-origin: 50% 25%;
}
@media (min-height: 380px) {
  .orientationContainer {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
#orientationMask {
  position: absolute;
  left: 50%;
  margin-left: -145px;
  top: 145px;
  -webkit-animation: changeOrientation 4s ease 0ms infinite;
  -ms-animation: changeOrientation 4s ease 0ms infinite;
  animation: changeOrientation 4s ease 0ms infinite;
}
.popups {
  background: url("../img/popups/background.png");
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.popups .pop {
  position: relative;
  width: 100%;
  height: 100%;
}
.pop.pauseBox {
  font-family: "Wendy One";
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  background-size: 100% auto;
  font-size: 15px;
  width: 640px;
  height: 960px;
  left: 50%;
}
.pop.pauseBox .pauseBg {
  background: url("../img/popups/pauseContainer.png") no-repeat;
  position: relative;
  width: 640px;
  height: 436px;
}
.pop.pauseBox .pauseText {
  text-shadow: -5px -4px 2px #fffab7;
  position: absolute;
  color: #990b00;
  font-size: 400%;
  line-height: 10px;
  left: 36%;
}
.pop.pauseBox .resumeButton,
.pop.pauseBox .shopButton,
.pop.pauseBox .backToMenu {
  position: absolute;
  color: #ffffff;
  text-shadow: 3px 2px 2px #9d1401;
  z-index: 100;
}
.pop.pauseBox .button {
  background: url("../img/buttons/small.png") no-repeat;
  background-size: 100% auto;
  cursor: url(../img/mousePointer.png), pointer;
  width: 255px;
  height: 140px;
}
.pop.pauseBox .button span {
  position: relative;
  font-size: 300%;
  line-height: 10px;
  /*@ZIANGO*/
  left: 50%;
  /**/
}
.pop.pauseBox .button:hover {
  background-position: 0 50%;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transition: scale 0.5s ease;
  -ms-transition: scale 0.5s ease;
  transition: scale 0.5s ease;
}
/*resumeButton*/
.pop.pauseBox .resumeButton {
  left: 50%;
  top: 70%;
}
.pop.pauseBox .resumeButton span {
  /*left: 29%;*/
}
/*backToMenu*/
.pop.pauseBox .backToMenu {
  left: 9%;
  top: 70%;
}
.pop.pauseBox .backToMenu span {
  /*left: 24%;*/
}
/*shopButton*/
.pop.pauseBox .shopButton {
  left: 29%;
  top: 57%;
}
.pop.pauseBox .shopButton span {
  /*left: 29%;*/
}
#wrapper {
  cursor: url(../img/mouseDefault.png), default;
}
.pop.pauseBox .logo {
  background: url("../img/logo.png") no-repeat;
  margin: 34px 0 0 110px;
  width: 640px;
  height: 230px;
  -ms-animation: logoMoving 5s linear 0s infinite alternate;
  /* Chrome, Safari, Opera */
  -webkit-animation: logoMoving 5s linear 0s infinite alternate;
  /* Chrome, Safari, Opera */
  animation: logoMoving 5s linear 0s infinite alternate;
  /* Standard syntax */
}
@-ms-keyframes logoMoving {
  0% {
    -ms-transform: rotate(7deg) scaleX(1.05);
  }
  25% {
    -ms-transform: rotate(0deg) scaleX(1);
  }
  50% {
    -ms-transform: rotate(-7deg) scaleY(1.05);
  }
  100% {
    -ms-transform: rotate(0deg) scaleY(1);
  }
}
@-webkit-keyframes logoMoving {
  0% {
    -webkit-transform: rotate(7deg) scaleX(1.05);
  }
  25% {
    -webkit-transform: rotate(0deg) scaleX(1);
  }
  50% {
    -webkit-transform: rotate(-7deg) scaleY(1.05);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleY(1);
  }
}
@keyframes logoMoving {
  0% {
    transform: rotate(7deg) scaleX(1.05);
  }
  25% {
    transform: rotate(0deg) scaleX(1);
  }
  50% {
    transform: rotate(-7deg) scaleY(1.05);
  }
  100% {
    transformtransform: rotate(0deg) scaleY(1);
  }
}

.spanCenter{
  float: right;
  position: relative;
  left: -50%;
}