html {
  -webkit-text-size-adjust: none; }

body {
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  font-family: OpenSans-Regular;
  background: #26273c; }

#loadingIcon,
noscript {
  top: 0;
  right: 0;
  bottom: 0; }

#loadingOverlay {
  position: fixed;
  background: #010206;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 100; }

#loadingScreenBG {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; }

#loadingIcon {
  width: 60px;
  position: fixed;
  left: 0;
  margin: auto;
  z-index: 101; }

#game_logo_container {
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  width: 7vw;
  /* height: 14vh; */
  height: 7vw;
  line-height: 7vw;
  border-radius: 50%;
  text-align: center; }

#game_logo {
  display: inline-block;
  vertical-align: middle;
  width: 5vw;
  max-height: 10vh;
  height: auto; }

#shadow,
noscript {
  position: absolute; }

.FullScreen.desktop {
  min-height: 100vh; }

.FullScreen.portrait {
  overflow-y: scroll; }

.FullScreen.landscape {
  overflow-y: unset; }

noscript {
  margin: auto;
  left: 0;
  z-index: 105;
  text-align: center;
  color: #fff; }

noscript #js {
  width: 200px; }

#logo {
  position: fixed;
  margin: auto;
  top: 320px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101; }

#loadingScreenV2PortraitBG,
#loadingScreenV2LandscapeBG {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
  width: 80vw;
  height: auto; }

#loadingScreenV2PortraitBG {
  display: none;
  width: 100vw; }

@keyframes title {
  0% {
    opacity: 0;
    right: 130px; }
  48% {
    opacity: 0;
    right: 130px; }
  52% {
    opacity: 1;
    right: 30px; }
  70% {
    opacity: 1;
    right: 30px; }
  100% {
    opacity: 0;
    right: 30px; } }

@keyframes fade {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes bg {
  0% {
    background-color: #306f99; }
  50% {
    background-color: #19470f; }
  90% {
    background-color: #734a10; } }

@keyframes blink {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  10% {
    opacity: 0; }
  15% {
    opacity: 1; }
  20% {
    opacity: 0; }
  25% {
    opacity: 1; }
  30% {
    opacity: 0; }
  35% {
    opacity: 1; }
  40% {
    opacity: 0;
    right: -21px; }
  45% {
    opacity: 1;
    right: 80px; }
  50% {
    opacity: 0;
    right: -21px; }
  51% {
    right: -21px; }
  55% {
    opacity: 1; }
  60% {
    opacity: 0; }
  65% {
    opacity: 1; }
  70% {
    opacity: 0; }
  75% {
    opacity: 1; }
  80% {
    opacity: 0; }
  85% {
    opacity: 1; }
  90% {
    opacity: 0;
    right: -21px; }
  95% {
    opacity: 1;
    right: 80px; }
  96% {
    right: -21px; }
  100% {
    opacity: 0;
    right: -21px; } }

/* body {
	font-family: Purista, sans-serif, arial;
	background: black;
	color: $light;
}
*/
.bf3-wrap {
  color: #eaf7ff;
  position: fixed;
  top: 30vh;
  left: 50vw;
  margin: auto;
  margin-left: -80px;
  margin-top: -40px;
  z-index: 100; }

@media all and (orientation: landscape) and (max-width: 823px) {
  .bf3-wrap {
    top: 38vh;
    left: 53vw; } }

@media all and (orientation: portrait) {
  #loadingScreenV2PortraitBG {
    display: block;
    width: 100vw; }
  #loadingScreenV2LandscapeBG {
    display: none; }
  .bf3-wrap {
    top: 33vh;
    left: 55vw; } }

.bf3-bg {
  background: #306f99;
  animation: bg 1.5s linear infinite;
  width: 120px;
  height: 30px;
  filter: blur(20px); }

.bf3-loading {
  position: absolute;
  top: 0;
  left: 0;
  text-align: right;
  text-shadow: 0 0 6px #bce4ff;
  height: 20px;
  width: 150px; }
  .bf3-loading span {
    display: block;
    text-transform: uppercase;
    position: absolute;
    right: 30px;
    height: 20px;
    width: 200px;
    line-height: 20px; }
    .bf3-loading span:after {
      content: "";
      display: block;
      position: absolute;
      top: -2px;
      right: -21px;
      height: 20px;
      width: 16px;
      background: #eaf7ff;
      box-shadow: 0 0 15px #bce4ff;
      animation: blink 3.4s infinite; }
    .bf3-loading span.bf3-title {
      animation: title 3.4s linear infinite; }
    .bf3-loading span.bf3-text {
      animation: title 3.4s linear 1.7s infinite;
      opacity: 0; }