@charset "utf-8";

/* -- Price Calculator Styles --*/
body {background:#e7be78;}
#container {width:500px;margin:0 auto;padding:25px;background:#f1f1f1;}

h1 {text-align:center;margin:5px 0 35px 0;font-size:30px;}
h2 {margin-bottom:5px;font-size:25px;font-weight:300;}
h3 {font-size:15px;text-align:right;margin: 8px 0 20px 0;position:relative;left:28px;}
h1, h3 {font-weight:900;}
h1, h2, h3 {color:#e38000;}
h1:last-of-type {text-align:left;font-size:70px;margin:0;}

.input {border:none;height:60px;width:100%;border-radius:5px;background-color:#dadada;background-image:url(../img/money.gif);background-repeat:no-repeat;background-size:54px;color:#e38000;font-size:40px;font-weight:900;padding-left:65px;box-sizing:border-box;margin:0;-webkit-transition:.2s;transition:.2s;}
.input:focus {background-color:white;padding-left:42px}
.input:focus::placeholder {color:white;}
input::placeholder {color:#ccc;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.rightBG {background-color:#dadada;background-image:url(../img/money.gif);background-repeat:no-repeat;background-size:54px;background-position:right;padding:0 70px 0 15px;text-align:right;}
.rightBG:focus {padding:0 50px 0 15px;}
.svgMoney {fill:#e38000;width:34px;position:relative;bottom:47px;left:11px;}
.svgPercent {fill:#e38000;width:28px;position:relative;bottom:44px;right:12px;float:right;}

/* -- Media Quieries -- */
@media only screen and (max-width: 500px) {
	#container {width:100%;}
}