@font-face
{
    font-family: myriad-pro;
    src: url("../fonts/MyriadPro-Regular.otf") format("opentype");
}

@font-face
{
    	font-family:helvetica;
	src: url("../fonts/helvetica-regular.otf") format("opentype");
}

.calculator
{
	width:300px;
    	box-shadow: 0 10px 28px rgba(0,0,0,0.4);
	margin:auto;
	padding:20px;
	border-radius:4px;
	padding-bottom:0px;
	//background: linear-gradient(135deg, #fcaf3b, #f25c2a);
	border:1px solid #999;
}

.calculator .row
{
	text-align:center;
	font-size:14pt;
	color:#555;
	font-family: myriad-pro;
}

.calculator .result
{
	padding-bottom:3px;
	border-bottom:1px solid #000; 
	color:#000; 
	font-size:25pt; 
	vertical-align:bottom;
	margin-bottom:5px;
}

.calculator .formula
{
	height:40px;
	color:#999;
	font-size:12pt;
}

.calculator .button
{
	padding:7px;
	background:#fbf9f9;
	margin:1px;
}

.calculator .button:hover
{
	background: #006699;
	color: #fff;
	cursor:pointer;
	-moz-box-shadow:    inset 0 0 10px #ddd;
   	-webkit-box-shadow: inset 0 0 10px #ddd;
   	box-shadow:         inset 0 0 10px #ddd;
}

ul 
{ 	width:100%; 
	height:50px; 
	list-style: none; 
	margin:0; 
	padding:0; 
	text-align: center; 
}

li.button
{ 
	width:1%; 
	position:relative; 
	display:table-cell; 
	border:solid 1px white; 
}

.keys .col
{
	padding:0px;
}

.red.slider .rangeslider__fill
{
	background: linear-gradient(to right, #fc7979, red) !important;
}