@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
/*@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700);*/
.ui-spinner {position: relative; border: 0px solid white; }
.ui-spinner-buttons {position: absolute}
.ui-spinner-button {overflow: hidden}

/*** base css ****/

body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333; background-color: #fff; width: 100%;margin:0px;}


div#sproket {
	
	 background-repeat:no-repeat;
	 margin-left:91px;
	 margin-top:-4px;
	 width:900px;
	 height:900px;
	 position:absolute;
	     opacity: 0.3; filter: alpha(opacity=30);
}
input {
	font-family:Arial, Helvetica, sans-serif;		
}
.slider {
	width:100%; display:inline-block; vertical-align:middle; margin:21px 0px 0px 0px;  background: #a4be36;border-radius: 20px;border: none; height:23px;	
}

.form_table {
	
	margin-bottom:0px;
	padding:10px;
	text-align:center;
	width:100%;
}
.form_table h2{color: #e8ae4d; font-weight: 500;margin-top: 10px; font-size: 36px; width:100%; display:inline-block; margin:0px;}
td.label {
	padding-bottom:20px;
}
.spinner{
	width:75px; height:15px;
	border:1px solid #CCC;
	margin-right:10px;
	display:inline-block; vertical-align:middle; padding: 8px 7px;
}
.dialog {
	padding:10px;	
	font-size:12px;
}
.opener {
	float:right;
	margin-top:-5px;
}

#header {text-align:left; background-size:100%; border-bottom:solid 1px #555; padding: 10px 0px; background: rgba(000,000,000,0.4);
background: rgb(000,000,000);background: transparent\9;
background: rgba(000,000,000,0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1;}
.clear{ clear:both;}
.resize{ width:600px; margin:0 auto; position:relative;}

.header_text{ float:left; margin:20px 0px 0px 0px; color:#fff; font-size:21px; font-style:italic;}
.logo_img{ float:right; margin:0px 0px 0px 0px;}
.heading{ width:100%; display:inline-block; margin-top:55px;text-align:center;}
.heading h1{ width:100%; color:#fff; font-size:36px; font-weight:400;display:inline-block; margin:0px; }
#result{ background:#none !important; }
.sub_h h2{ width:100%; display:inline-block; text-align:center; color:#fff; font-size:28px; font-weight:normal;}
.like{ background:#ff6101; width:150px; height:150px; border-radius:100%; text-align:center; color:#fff; font-weight:700; font-size:24px; display: table-cell;
 vertical-align: middle; box-shadow: 0px 0px 0px 4px rgba(255,97,1, 0.4);}

.input_spiner{ background:none; color:#444; font-size:21px; border:none;   border-bottom: 2px solid #999;padding:6px 10px 3px 2px;; display:inline-block; margin:0px auto 0px auto; outline:none; width:110px; border-radius:0px; -webkit-border-radius:0px; text-align: right;}
.input_spiner:hover{background: hsla(0,0%,100%,.08);border-bottom: 2px solid #09b188;}
.input_spiner:focus{background: hsla(0,0%,100%,.08);border-bottom: 2px solid #09b188;}
img#then {padding-top:20px;}
div.cta {text-align:center;padding-top:25px;width:380px; color:#fff;}	
div.cta a{ color:#fff;}
div#social {position:fixed;left:0px;top:100px;width:100px;height:auto;padding-top:20px;background-color:#f0f0f0;border:1px solid #d4d4d4;text-align:center;
margin-left:20px;}
#fb {margin-left:25px;}

/** steps **/
fieldset{display:none; background:none; width: 100%;padding:20px 25px 0px 25px;margin-top:15px; border:none; box-sizing:border-box; }

#first{display:block;width: 100%;background:none; width: 100%;padding:20px 25px 20px 25px;margin-top:15px; border:none; box-sizing:border-box;}

fieldset input[type=button]{ border:none; outline:none; display:inline-block; color:#fff; font-size:17px; padding:10px 34px; background:#e8ae4d; margin:30px 5px 20px 5px; cursor:pointer; appearance:none; -webkit-appearance:none; font-family: 'Oswald', sans-serif; border-radius:0px; -webkit-border-radius:0px;}
fieldset input[type=button]:hover{opacity:0.8}
.step_col{ width:100%; display:inline-block; text-align:center;}
.step_col p{ color: #555;
    font-size: 21px;
    text-transform: uppercase;
    border-top: solid 2px #74bf25;
    border-bottom: solid 2px #74bf25;
    display: inline-block;
    padding: 9px 18px;}
.step_col span{ color:#fff; font-size:18px; display:inline-block; vertical-align:middle; width:30px; height:30px; line-height:30px; border-radius:100%; 
background:#6e4a9f; text-align:center; margin: 0px 4px 0px 4px;}
fieldset input.pre_btn {
    background: #60823c;
}
@-webkit-keyframes k { 0% {
background-position:0 -402px
}
to { background-position: 0 0 }
}
@keyframes k { 0% {
background-position:0 -402px
}
to { background-position: 0 0 }
}
.side-results { position: relative; width:84%; padding:100px 0px; background-image: url(../images/moneyanimation.png); background-repeat: no-repeat;
	-webkit-transform: translateZ(0); transform: translateZ(0); background-repeat: repeat-y; -webkit-animation: k 4s linear infinite; animation: k 4s linear infinite; }


/**** css calculator *****/
.slider-bar--wrapper { max-width: 700px; margin: 0 auto; margin-top: 30px }
@media all and (min-width:768px) {
.slider-bar--wrapper { margin-top: 5pc }
}
.slider_result{ margin: 35px auto 30px auto; margin-top: 27px;}
.slider_inputtext {font-size: 18px; color: #333; display:inline-block; margin-top: 5px;}

.cal-subheading {    color: #777;    font-weight: 300;    font-size: 18px;    margin-top: 5px;}

.t_center{text-align:center;}	
	
	
	
/*** media ***/



@media screen and (max-width:900px) {
.aro{ display:none;}	
}
@media screen and (max-width:768px) {
.resize{ width:92%;}
.heading{ margin-top:35px; }
.heading h1{font-size:28px; width:92%;}
#first, fieldset{ margin-top:35px; width:90%;}
.drop-shadow p{ font-size:22px !important;}
.side-results{ background-size:100%;}
.side-results{ padding:50px 0px;}
body{background: url(../images/bg.jpg) no-repeat -340px 0px;}
}
@media screen and (max-width:619px) {
.resize{ width:92%;}
.footer p{ float:none; display:inline-block; width:100%;}
.footer_cta{float:none; display:inline-block; margin-top:15px;}
#first, fieldset{ margin-top:35px; width:87%;}
.logo_img img{ width:130px;}
.header_text{ margin: 9px 0px 0px 0px; font-size: 19px;}
.sub_h h2{ font-size:24px; margin-top:0px;}
.form_table h2{font-size:22px;}
.slider-details{display:none;}
}
@media screen and (max-width:480px) {
#first, fieldset{ width:85%;}
#header{ text-align:center; padding:12px 0px;}
.logo_img{ width:100%;}
.logo_img img{ width:130px; display:inline-block;}
.header_text{ margin: 9px 0px 0px 0px; font-size: 19px; text-align:center; width:100%;}
fieldset input[type=button]{ padding:10px 30px;}
.drop-shadow{ padding:0px !important;}
.drop-shadow p{ font-size:20px !important;}
.side-results{ padding:40px 0px;}	
}
@media screen and (max-width:380px) {
#first, fieldset{ width:82%;}	

}