@media (min-height: 505px){

  body, body.a-body {
    position: relative;
    height: 100vh;
  }

  #landing {
    height: 100vh;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
  }
}

.a-enter-vr {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: block;
}

.a-enter-vr-button {
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20245.82%20141.73%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Emask%3C%2Ftitle%3E%3Cpath%20class%3D%22a%22%20d%3D%22M175.56%2C111.37c-22.52%2C0-40.77-18.84-40.77-42.07S153%2C27.24%2C175.56%2C27.24s40.77%2C18.84%2C40.77%2C42.07S198.08%2C111.37%2C175.56%2C111.37ZM26.84%2C69.31c0-23.23%2C18.25-42.07%2C40.77-42.07s40.77%2C18.84%2C40.77%2C42.07-18.26%2C42.07-40.77%2C42.07S26.84%2C92.54%2C26.84%2C69.31ZM27.27%2C0C11.54%2C0%2C0%2C12.34%2C0%2C28.58V110.9c0%2C16.24%2C11.54%2C30.83%2C27.27%2C30.83H99.57c2.17%2C0%2C4.19-1.83%2C5.4-3.7L116.47%2C118a8%2C8%2C0%2C0%2C1%2C12.52-.18l11.51%2C20.34c1.2%2C1.86%2C3.22%2C3.61%2C5.39%2C3.61h72.29c15.74%2C0%2C27.63-14.6%2C27.63-30.83V28.58C245.82%2C12.34%2C233.93%2C0%2C218.19%2C0H27.27Z%22%2F%3E%3C%2Fsvg%3E) 50% 50%/70% 70% no-repeat;
}

#form-row {
  flex: 0 0 auto;
}
#loader-row {
  flex: 0 0 auto;
}

#email-form input {
  border-radius: 0;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
}

#email-form .btn {
  background: #ff8200;
  color: black;
  border: 0;
  border-radius: 5px;
  padding: 15px;
  margin-top: 10px;
  transition: background 0.5s, color 0.5s;
}

#email-form .btn:hover {
  background: white;
  color: black;
}

#email-form .form-control::placeholder {
  color: #b4b6b9;
}

#email-form input, #email-form button {
  font-size: 12px;
  font-weight: 200;
}

#email-form select {
  width: 100%;
  background: white;
  border-radius: 0;
  height: 50px;
  color: #b4b6b9;
  font-size: 12px;
  margin-bottom: 10px;
  /* padding-left:30px; */
}

.progress.landing {
  border-radius: 0;
}

.unlocked.a-html {
  position:relative;
}
.unlocked .a-body {
  overflow-y: scroll;
}

.ink {
  display: none;
  opacity: 0.0;
  width: 100vw;
  height: 100vh;
  background: #323232;
  z-index: 1000;
  position: fixed;
  top:0;
  transition: opacity 1.6s ease-in-out;
}
.ink img {
  /* width: 200px; */
  max-width: 50vw;
  max-height: 30vh;
  margin: 15vh auto 10px;
  display: block;
}
.ink img.big {
  max-width: 400px;
  max-height: 30vh;
}

.select-disable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


#ink-img {
  transform: scale(0.7) translate(0, 25%);
}
#ink-anim:not(.alone) {
  transform: translate(0, -50%) scale(0.5);
}
.overlap-input {
  margin-top: -1px;
}
.ink img.alone {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

.bg-black {
  background-color: #000;
}

img.landing {
  max-width: 80%;
  margin: 50px auto;
  display: block;
  flex: 0 1 auto;
}

@media (max-width: 991px){
  img.landing {
    max-width: 100%;
    margin: 20px auto;
  }
}

/*@media (max-width: 667px){
  img.landing {
    margin: 5px;
  }
}

@media (max-width: 414px){
  img.landing {
    margin: 120px 0 20px 0;
  }
}

@media (min-height: 505px) and (max-height: 655px){
  img.landing {
    margin: 260px 0 20px 0;
  }
} */

#loader-wrapper {
  width: 100%;
}
#loader-wrapper.middle {
  position: absolute;
  top: 30vw;
}
#game-loader {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#terms-input {
  float: left;
  width: 18px;
  height: 18px;
  margin-right: 7px;
}
#terms-label {
  color: white;
  font-size: 12px;
  margin-top: 14px;
}

.c-orange {
  background-color: #ff8200;
  border-color: #ff8200;
}

@keyframes hori {
  100%    { background-position-x: -9200px; }
}

@keyframes vert {
  100% { background-position-y: -4800px; }
}

/* checkbox */
.check-container a {
  color: #ff8200;
}

.check-container a:visited {
  color: #ff8200;
}

/* Customize the label (the container) */
.check-container {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 22px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Hide the browser's default checkbox */
.check-container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 20px;
 width: 20px;
 background-color: #eee;
}

@media (max-width: 768px){
  .checkmark {
    margin-top: 5px;
  }
}
@media (min-width: 992px){
  .checkmark {
    margin-top: 3px;
  }
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
 background-color: #ff8200;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
 left: 7px;
 top: 1px;
 width: 7px;
 height: 15px;
 border: solid black;
 border-width: 0 3px 3px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}