body,
html {
  padding: 0;
  margin: 0;
  background-color: #000;
  -webkit-transition: background-color 0.1s;
}
body.intro,
html.intro {
  background-color: #f7bb07;
}
body.press,
html.press {
  background-color: #444;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
}
-webkit-user-select none,
-webkit-font-smoothing antialiased,
h1 {
  font-family: 'Lato', Helvetica, sans-serif;
  font-size: 5.4vw;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 5vh;
  padding-left: 5%;
  padding-right: 5%;
}
#introWrapper {
  background: #f7bb07;
  -webkit-transition: -webkit-transform 0.3s;
  z-index: 5 !important;
}
#introWrapper.downAndOut {
  -webkit-transform: translateY(999px);
}
#introWrapper.hidden {
  display: none;
}
#introWrapper #inputKey {
  font-family: 'Lato', Helvetica, sans-serif;
  font-size: 12vw;
  font-weight: 900;
  text-align: center;
  border-radius: 0;
  border: 20px solid #000;
  width: 60%;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#introWrapper #submitKey {
  background: none;
  border: none;
  width: 15vw;
  height: 15vw;
  background-image: url("/Assets/tick.svg");
}
#introWrapper img {
  width: 33%;
}
#incorrectKey {
  background: #f00;
  z-index: 6 !important;
  -webkit-transition: opacity 0.33s;
}
#incorrectKey.hidden {
  display: none;
}
#incorrectKey.faded {
  opacity: 0;
}
#incorrectKey img {
  width: 33%;
}
#rotateDevice {
  background: #f00;
  z-index: 4;
  -webkit-transition: opacity 0.3s;
}
#rotateDevice.fadeOut {
  opacity: 0;
}
#rotateDevice.hidden {
  display: none;
}
#rotateDevice img {
  width: 33%;
}
.valignOuter {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.valignOuter .valign {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 10;
  text-align: center;
}
.valignOuter .valign .valignWrap {
  margin-top: 40px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}
.valignOuter .valign:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-top: -50px;
  margin-right: -0.25em;
}
#keypadWrapper {
  width: 100%;
  height: 50vh;
  position: absolute;
  top: 18vh;
  left: 0;
  z-index: 2;
}
#keypadWrapper.hidden {
  display: none;
}
#keypad {
  display: table;
  width: 100%;
  height: 100%;
}
.row {
  display: table;
  width: 100%;
  height: 10vh;
  table-layout: fixed;
}
.button {
  display: table-cell;
  text-align: center;
  vertial-align: middle;
  width: 100%;
  width: auto;
  border-radius: 5px;
  outline-offset: -10px;
  padding: 5px;
  webkit-transition: -webkit-transform 0.2s;
  z-index: 1;
}
.button.pushed {
  -webkit-transform: scale(0.93);
}
.button img {
  width: 100%;
}