html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

canvas{
  position: fixed;
  top: 0;
  left: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  height:100%;
  width:100%;
  position: absolute;
  overflow: hidden;
}

body.ios-full-screen{
  overflow-y: auto;
}

.logo {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  width: 100%;
}
.logo img {
  width: 22vw;
  margin: auto;
  margin-top: 13vh;
}

.bg {
  background: url(bg.png) 100% 100%;
  background-position-x: 50%;
  background-position-y: 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.progress {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 9;
  transform: translateX(-1px);
}

.progress .full {
  margin: auto;
  margin-left: 0px;
  width: 100%;
  height: 58%;
  transform-origin: top right;
  background-image: url(loading-full2.png);
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  transform: translateX(-0.8vw);
}

.mask{
  background-image: url(loading_full1.png);
  height: 58%;
  width: 4%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: translate(1px, 0.35vh);
  background-position: right;
}

#unity-loading-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  pointer-events: none;
}

.loading-bar{
  width: 37.1vw;
  height: 6vw;
  margin: auto;
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  left: 50%;
  transform: translate(-50%, 0px);
  background-image: url(loading-bar.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 1.2vw;
  padding-top: 1vw;
}

#fullScreenTapContainer{
  background:#000000;
  opacity:0.0;
  width:100%;
  height:100%;
  position:fixed;
  top:0%;
  z-index:2147483647;
  display: none;
}

#fullScreenSwipeContainer{
  width: 100%;
  height: 400vh;
  position: absolute;
  display: block;
  z-index: -1;
  overflow: hidden;
}

.scroll-helper{
  width: 100%;
  height: 200vh;
}

body.ios-full-screen #fullScreenSwipeContainer{
  z-index: 1000;
  overflow-y: auto;
}

body.android-full-screen #fullScreenTapContainer{
  display: block;
}

@media (orientation: landscape) {
  .logo img{
    width: 87vh;
  }
  .loading-bar{
    bottom: 15vh;
    width: 55.1vh;
    height: 9.4vh;
    padding-left: 1.4vh;
    padding-top: 2.62vh;
    padding-right: 1.4vh;
  }
  .progress .full{
    transform: translate(0vh, 0.2vh);
  }

  .mask{
    transform: translate(0px, 0.2vh)
  }
}

@media (orientation: portrait) {
  .loading-bar{
      bottom: calc(4rem + 15vw);
      width: 55.1vw;
      height: 9.4vw;
      padding-left: 1.4vw;
      padding-top: 2.62vw;
      padding-right: 1.4vw;
  }

  .logo img{
    width: 87vw;
  }
  .progress .full{
    transform: translate(-1px, 0.2vw)
  }

  .mask{
    transform: translate(0px, 0.2vw);
  }
}