@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}



.rotate {
  display: none;
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  width: 400px;
  height: 50px;
  margin-left: -200px;
  margin-top: -25px;
}

.keypadwrapper {
	position: absolute;
  text-align: center;
  width: 500px;
    height: auto;
  color: #000;
  padding-top: 5px;
  border-top: 5px solid #fff;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
      z-index: 9999;
}
.keypadwrapper .inputwrapper {
  display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
	margin: 0;
  line-height: 0.61em;
  vertical-align: middle;
}
.keypadwrapper .keypad {
	background: #bfc4c9;
    padding: 10px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
}
.keypadwrapper .numberinput {
  display: inline-block;
  height: 15px;
  width: 15px;
  color: #fff;
  border-radius: 50px;
  border: 1px solid #FFFFFF;
  margin-right: 2%;
  margin-left: 2%;
  font-size: 2em;
}
.keypadwrapper .keypad .numberline {
  width: 100%;
}
.keypadwrapper .keypad #linefour {
   margin-bottom: 3%;
}
.keypadwrapper .keypad #linethree {
  margin-bottom: 3%;
}
.keypadwrapper .keypad #linetwo {
  margin-bottom: 3%;
}
.keypadwrapper .keypad #lineone {
 margin-bottom: 3%;
}
.keypadwrapper .keypad .content {
  display: inline-block;
  margin: 0 2%;
}
.keypadwrapper .keypad .content div {
  width: 8em;
  height: 4em;
  text-align: center;
  border: 1px solid #FFFFFF;
  background: #dee2e8;
  display: inline-block;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.keypadwrapper .keypad .content div span:nth-child(1) {
  display: block;
  font-size: 1.8em;
  height: 1em;
  margin-top: 0.2em;
}
.keypadwrapper .keypad .content div span:nth-child(2) {
  font-size: 0.6em;
}
.keypadwrapper .keypad .content div.extra {
	color: #fff;
	background: #a1a294;
}
.keypadwrapper .keypad .content div:hover {
  background-color: #ffffff;
  color: #000000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nocircle {
  width: auto !important;
  border: none !important;
  height: auto !important;
}

@media all and (max-width: 470px) {
  .content {
    margin: 0 5% !important;
  }
}
@media all and (max-width: 350px) {
  .content {
    margin: 0 2% !important;
  }
}
@media all and (max-height: 470px) {
  #linefour {
    bottom: 2% !important;
  }

  #linethree {
    bottom: 23% !important;
  }

  #linetwo {
    bottom: 43% !important;
  }

  #lineone {
    bottom: 63% !important;
  }
}