/*
==================================
			GRID
==================================
*/

*,
*:after,
*:before {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

*:before, *:after {
	display: table-cell;
	content: '';
}

*:after{
	clear: both;
}

body{ 
	font-family: helvetica, arial, sans-serif;
}

.container {
	margin: 0 auto;
	width: 350px;
}

.calculator {
	padding: 10px;
	margin-top: 20px;
	background-color: #ccc;
	border-radius: 5px;
	/*this is to remove space between divs that are inline-block*/
	font-size: 0;
}

.calculator > input[type=text] {
	width: 100%;	
	height: 50px;	
	border: none;
	background-color: #eee;	
	text-align: right;
	font-size: 30px;
	padding-right: 10px;
}

.calculator .row { 
	margin-top: 10px;
}

.calculator .key {
	width: 78.7px;
	display: inline-block;
	background-color: black;
	color: white;
	font-size: 1rem;
	margin-right: 5px;
	border-radius: 5px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.calculator .key:hover{
	cursor: pointer;
}

.key.last{
	margin-right: 0px;
} 

.key.action {
	background-color: #646060;
}

footer {
	font-style: italic;
	padding-top: 35px;
	text-align: center;
	font-size: 10px;
}
/*
==================================
			TYPOGRAPHY
==================================
*/
h1, h3, h4, h5, p {
	margin-bottom: 22px;
}