/*GENERAL*/
.container-fluid * {
	font-family: 'Josefin Slab', serif;
	text-align: center;
}

/*Header*/
.container-fluid header {
	padding: 60px 0;
}
.title {
	font-family: 'Cinzel', serif;
	font-size: 42px;
	font-weight: bold;
}

/*Calculator*/
.calculator {
	background-color: #000;
	border: 1px solid #000;
	border-radius: 10px;
	margin: 0 auto;
	padding: 20px;
}
.calculator > .row {
	margin: 10px;
}

/*Calculator - screens*/
.calculator .screens {
	background-color: #808080;
	border: 1px solid #666;
	color: #fff;
	margin-bottom: 20px;
	height: 92px;
}
.calculator .screens .result {
	font-size: 25px;
	height: 60px;
	padding: 20px 0 5px 0;
}
.calculator .screens .stock {
	font-size: 14px;
	font-style: italic;
	padding: 5px 0;
}

/*Calculator - keys*/
.calculator .keys .operators > * {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	display: inline-block;
    float: none;
    text-align: center;
	z-index: 2;
}
.calculator .keys .operators > *:hover {
	border: 1px solid #666;
}
.calculator .keys .numbers > * {
	background-color: #fafafa;
	border: 1px solid #000;
	z-index: 1;
}
.calculator .keys .operators > *, .calculator .keys .numbers > * {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	cursor: pointer;
	font-weight: bold;
}

/*Calculator - keys numbers - hover*/
.calculator .keys .numbers div:nth-child(1):hover,
.calculator .keys .numbers div:nth-child(11):hover {
	background-color: #ccffff;
}
.calculator .keys .numbers div:nth-child(2):hover,
.calculator .keys .numbers div:nth-child(10):hover {
	background-color: #ccffcc;
}
.calculator .keys .numbers div:nth-child(3):hover,
.calculator .keys .numbers div:nth-child(9):hover {
	background-color: #ffffcc;
}
.calculator .keys .numbers div:nth-child(4):hover,
.calculator .keys .numbers div:nth-child(8):hover {
	background-color: #ffcccc;
}
.calculator .keys .numbers div:nth-child(5):hover,
.calculator .keys .numbers div:nth-child(7):hover {
	background-color: #ffccff;
}
.calculator .keys .numbers div:nth-child(6):hover,
.calculator .keys .numbers div:nth-child(12):hover {
	background-color: #ccccff;
}


/*COLORS*/
.color-light-blue { color: #ccffff; }
.color-light-green { color: #ccffcc; }
.color-light-yellow { color: #ffffcc; }
.color-light-red { color: #ffcccc; }
.color-light-pink { color: #ffccff; }
.color-light-purple { color: #ccccff; }
.color-dark-blue { color: #00b3b3; }
.color-dark-green { color: #00b300; }
.color-dark-yellow { color: #b3b300; }
.color-dark-red { color: #b30000; }
.color-dark-pink { color: #b300b3; }
.color-dark-purple { color: #0000b3; }