html {
	-ms-touch-action: none;
  }
  
  body, canvas, div {
	display: block;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  /* Remove spin of input type number */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
  }
  
  body {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;
  
	cursor: default;
	color: #000;
	background-color: #000000;
  
	text-align: center;
	font-family: Helvetica, Verdana, Arial, sans-serif;
  
	display: flex;
	flex-direction: column;
	
	/* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
	/* overflow cannot be applied in Cocos2dGameContainer, 
	otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
  }
  
  #Cocos2dGameContainer {
	position: fixed;
	margin: 0;
	overflow: hidden;
	left: 0px;
	top: 0px;
  
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	-webkit-box-pack: center;
  }
  
  canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0);
  }
  
  a:link, a:visited {
	color: #666;
  }
  
  a:active, a:hover {
	color: #666;
  }
  
  p.header {
	font-size: small;
  }
  
  p.footer {
	font-size: x-small;
  }
  
  #splash {
	position: absolute;
	top: 50%;
	left: 50%;
    /* transform:translate(-50%,-50%) ; */
	margin-left: -68px;
    margin-top: -68px;
	width: 136px;
	height: 136px;
    
	background:url(./splash.2acba.png) no-repeat center;
	background-size: 45%;
	-webkit-animation: loadingAni 1s infinite linear;
	animation: loadingAni 1s infinite linear;
  }
  
  @keyframes loadingAni {
	0% {
	  transform: rotate(0);
	}
  
	100% {
	  transform: rotate(360deg);
	}
  }

  .progress-bar {
	  position: absolute;
	  left: 27.5%;
	  top: 80%;
	  height: 3px;
	  padding: 2px;
	  width: 45%;
	  border-radius: 7px;
	  box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;           
  }
  
  .progress-bar span {
	  display: block;
	  height: 100%;
	  border-radius: 3px;
	  transition: width .4s ease-in-out;
	  background-color: #3dc5de;
  }
  
 
  #swipe {
	  margin: 0;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;	
	  /*background: url(en_swipe.df549.gif);*/
	  background-repeat: no-repeat;
	  background-position: center;
	  background-color: #000000;
	  z-index: 1000;
	  background-size: contain;
	  opacity: .95;
	  overflow: hidden;
	  visibility: hidden;
  }
  
  #orientation {
	  margin: 0 auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-color: #000;
	  z-index: 1000;
	  background-size: contain;
	  visibility: hidden;
	  opacity: .95;
  }
  
  .mask {
	  height: 500vh;
	  width: 100vw;
	  z-index: 20;
	  display: none;
	  position: absolute;
	  top: 0%;
  -webkit-overflow-scrolling:auto;
  }
  
  .absvh {
	  position: absolute;
	  height: 100vh;
  }
  
  .fullscreen-instructions-swipe {
	  width: 150px;
	  height: 150px;
	  position: fixed;
	  top: 75vh;
	  left: 50vw;
	  transform: translate(-50%, -50%);
	  animation-duration: 2s;
	  animation-name: fullscreen-swipe;
	  animation-iteration-count: infinite
  }