body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}
#phone {   
	background:url(https://blogs.which.co.uk/technology/files/2013/03/iphone_5_hero.jpg) no-repeat 50.4% top;
  	background-size: contain;
  	height:655px;
}
#wrapper {
  width:252px;
  height:410px;
  margin:0 auto 0 auto;
  position:relative;
  top:116px;
  padding:1px 0 0 0;
  background:#fff;
}
.key {
  border-radius: 50px 50px 50px 50px;
  color:#444;
  width:70px;
  height:70px;
  text-align:center;
  font-size:30px;
  float:left;
  box-sizing:border-box;
  margin:0 7px 10px 7px;
  border:1px solid #444;
  cursor:pointer;
}
.key span {
  display:block;
  color:#444;
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
}
.key.special {
  line-height:60px;
}
.key.nb {
  border:none;
}
.key.phone {
  background:#5CDB74;
  border:none;
  color:#FFF;
  line-height:60px;
  font-size:40px;
}
.clear {
  clear:both;
}
.iphonekeypadbutton{
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none; 
    
/*  To avoid blinking cursor after click*/
    caret-color: transparent;
    
   	border-radius: 50px 50px 50px 50px;
  	width:70px;
  	height:70px;  
  	box-sizing:border-box;
}

/* To give a click effect to key-pad buttons */
.key:hover {background-color: #3e8e41}

.key:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}