h1 { text-align: center; }

#nCalculator01,
#nCalculator02,
#nCalculator03,
#nCalculator04,
#nCalculator05 {
	/* width x height = 4x6  */
	/* 50x50, 50x4 = 200, 50x6 = 300 */
	/* width: 100%; height: 200px; */
	/* miniumum container height: 200px; */

	width: 100%; /* height: 200px; */
	padding: 5px;
	margin: auto;
	box-sizing: border-box;
}
@media ( min-width: 520px ) {
	#nCalculator01,
	#nCalculator02,
	#nCalculator03,
	#nCalculator04 {
		float: left;
		width: 50%;
	}
}
@media ( min-width: 1040px ) {
	#nCalculator01,
	#nCalculator02,
	#nCalculator03,
	#nCalculator04 {
		width: 25%;
	}
}






.nCalculator {
	width: 100%; height: 100%;
	overflow: hidden;
}

.nCalculator > div { /* rows */
	width: 100%; height: 16.6%;
}


.nCalculator > div > div { /* columns */
	box-sizing: border-box;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	width: 25%; height: 100%;
	float: left;
	text-align: center;
	cursor: pointer;
}

/* so we do not get double borders */
.nCalculator > div > div:last-child { 
	border-right: 1px solid #000;
}

/* so we do not get double borders */
.nCalculator > div:last-child > div { 
	border-bottom: 1px solid #000;
}

.nCalculator > div > div.emptyKey { 
	border: none;
	border-top: 1px solid #000;
}

.nCalculator > div > div > span { 
	cursor: pointer;
	display: inline-block;

	/* set according to height of wrapper */
	/* wrapper height 200 */
	/* 200/12 = 16.6 , 16.6/2.5 = 6.66 */
	/* font-size: 16.6px; padding: 6.6px;*/
	font-size: 16.6px; padding: 6.6px;

	/* wrapper height 250 */
	/* 250/12 = 20.8 , 20.8/2.5 = 8.3 */
	/* font-size: 20.8px ; padding: 8.3px; */

	/* wrapper height 300 */
	/* 300/12 = 25  , /2.5 =  */
	/* font-size: 25px ; padding: 10px; */

	/* wrapper height 350 */
	/* 350/12 =  , /2.5 =  */
	/* font-size: 29px ; padding: 11.6px; */

	/* wrapper height 400 */
	/* 400/12 =  , /2.5 =  */
	/* font-size: 33.3px ; padding: 13.3px; */


}
.nCalculator > div:first-child > div {
	width: 100%;
	text-align: right;
}
.nCalculator > div:last-child > div {
	width: 50%;
}
#nCalculatorEmpty {
	background: #eee;
}
#nCalculatorEmpty > span{
	display:none;
}
.nCalculator > div:first-child > div {
	background: #ccf;
}
.nCalculator > div > div#nCalculatorClear {
	background: #fcc;
}
.nCalculator > div > div#nCalculatorEnter {
	background: #cfc;
}