html, body {
 margin: 0;
 padding: 0;
 background-color: #fff;
 font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 /*font-weight: 300;*/
 -webkit-tap-highlight-color: transparent;
}
.rotate {
 display: none;
 color: #fff;
 position: absolute;
 left: 50%;
 top: 50%;
 text-align: center;
 width: 400px;
 height: 50px;
 margin-left: -200px;
 margin-top: -25px;
}
.keypadwrapper {
 text-align: center;
 width: 100%;
 color: black;
}
.keypadwrapper .inputwrapper {
 margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
 line-height: 0.61em;
 vertical-align: middle;
}
.keypadwrapper .numberinput {
 display: inline-block;
 height: 15px;
 width: 15px;
 border-radius: 50px;
 border: 1px solid #000;
 margin-right: 3%;
 margin-left: 3%;
 font-size: 2em;	 
}
.keypadwrapper .keypad .numberline {
 width: 100%;
}
.keypadwrapper .keypad #linefour {
 position: absolute;
 bottom: 16%;
}
.keypadwrapper .keypad #linethree {
 position: absolute;
 bottom: 30%;
}
.keypadwrapper .keypad #linetwo {
 position: absolute;
 bottom: 44%;
}
.keypadwrapper .keypad #lineone {
 position: absolute;
 bottom: 58%;
}
.keypadwrapper .keypad .content {
 display: inline-block;
 margin: 30px 4%;
}
.keypadwrapper .keypad .content div {
 width: 4.7em;
 height: 4.7em;
 text-align: center;
 /*border: 1px solid black;*/
 background-color: #f5f5f5;
 border-radius: 70px;
 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.5em;
 height: 1em;
 margin-top: 0.7em;
}
.keypadwrapper .keypad .content div span:nth-child(2) {
 font-size: 0.6em;
}
.keypadwrapper .keypad .content div:hover {
 /*background-color: #d4d4d4;*/
 color: #000;
 -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;
}
.circle {
 background-color:black;
}
@media all and (max-width: 470px) {
 .content {
	 margin: 0 3% !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;
}
}
*{touch-action: manipulation;}
.asde{animation: shake 0.8s 2 ease-in-out;}
@keyframes shake{
	20%{
	transform: translateX(0)
	}
	10%{
	transform: translateX(40px);
	}
	
	50%{
	transform: translateX(-40px);
	}
	100%{
	transform: translateX(0px);
	}
}