/*** base css ****/

body {
	font-family: 'Barlow', sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
	background-color: #fff;
	background: #fff;
	height: 100%;
	width: 100%;
}
#hovecast {
    color: #bada55;
}
#hovecast span {
    color: black !important;
}
.annualtext {
    float: left;
    line-height: 37px;
    width: 53% !important;
    font-size: 20px !important;
}
.roi-steps-container {
	padding: 40px 0px 40px;
}
.slider-bar--wrapper {
	max-width: 722px;
	margin: 0 auto;
	margin-top: 30px
}
@media all and (min-width: 768px) {
	.slider-bar--wrapper {
		margin-top: 1.5pc
	}
	.annualtext{
	
width: 100%;
}
}
.slider-bar {
	background-color: #09b188;
	margin-top: 28px;
	width: 100%;
	height: 23px;
	position: relative;
	border-radius: 20px
}
.slider-details {
	position: relative;
	margin-top: 6px;
}
.slider-details__paragraph {
	padding: 0px 0 0;
	color: #333;
	font-weight: 600;
	margin: 15px 0 0;
}
.slider-details__text {
	font-size: 18px;
	padding-top: 0px;
	line-height: 1
}
.slider-details__start {
	float: left;
	text-align: left
}
.slider-details__start:before {
	left: 14px
}
.slider-details__middle {
	float: left;
	text-align: left;
	position: relative;
	left: 26%;
}
.slider-details__middle:before {
	left: 50%;
}
.slider-details__end {
	float: right;
	text-align: right
}
.slider-details__end:before {
	right: 14px
}
.slider {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
	margin: 21px 0px 0px 0px;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #333;
	height: 13px;
	box-shadow: none;
}
.input_spiner {
	background: none;
	color: #444;
	font-size: 60px;
	border: none;
	border-bottom: 0;
	padding: 6px 10px 3px 2px;
	display: inline-block;
	margin: 0px auto 0px auto;
	outline: none;
	width: 45%;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	text-align: left;
	font-family: 'Barlow', sans-serif !important;
	font-weight: 700;
}
.t_center {
	text-align: center;
}
.main_area {
	border: 2px solid #333;
	border-radius: 50px;
	padding: 65px 30px;
}
.logo img {
	width: 150px;
}
h2.green_highlight {
	background: #bada55;
	color: #1a1a1a;
	border: 2px solid #333;
	display: table;
	margin: 25px auto 0;
	padding: 13px 36px;
	border-radius: 10px;
	font-size: 28px;
	font-weight: 500;
}
.main_area h4 {
	font-size: 22px;
	color: #222;
	font-weight: 400;
}
.main_area h4 span {
	font-weight: 600;
}
h1.do_math {
	font-size: 62px;
	font-weight: 700;
	color: #333;
	margin: 30px 0 30px;
}
.calculation_btn {
	display: flex;
	align-items: center;
	justify-content: center;
}
a.next_step {
	background: #333;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 20px;
	padding: 10px 15px;
	border: 2px solid #bada55;
	border-radius: 10px;
	font-weight: 500;
	margin: 0;
}
a.next_step:hover {
	text-decoration: none;
	background: #333;
	color: #fff;
}
.calculation_btn img {
	height: 48px;
	width: auto;
	margin-right: 10px;
}
#step2,
#step3,
#step4 {
	display: none
}
.main_area_inner {
	max-width: 630px;
	margin: 0 auto;
}
.main_area_inner select {
	width: 100%;
	background: transparent;
	color: #1a1a1a;
	border: 2px solid #333;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 22px;
	font-weight: 500;
	text-align: left;
	-webkit-appearance: none;
	position: relative;
	z-index: 2;
}
.main_area_inner .form-group {
	text-align: left;
	margin: 20px 0 0;
	position: relative;
}
.main_area_inner .form-group label {
	font-size: 26px;
	font-weight: 600;
	color: #222;
	padding: 12px 0 0;
}
div#step2 a.next_step {
	padding: 10px 25px;
}
.select_outer {
	background: #bada55;
	border-radius: 14px;
	position: relative;
}
.select_outer:before {
	content: "\f107";
	font: normal normal normal 14px/1 FontAwesome;
	position: absolute;
	top: 14px;
	right: 10px;
	color: #222;
	font-size: 28px;
}
input,
select {
	outline: none;
}
.dots_navigation {
	margin: 60px 0 0;
}
.dots_navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.dots_navigation ul li {
	display: inline-block;
	margin: 0 13px;
}
.dots_navigation ul li i {
	font-size: 24px;
	color: #222;
}
.dots_navigation li.dot span {
	width: 15px;
	height: 15px;
	background: #fff;
	display: block;
	border-radius: 30px;
	border: 1px solid #000;
}
.dots_navigation li.dot.active span {
	background: #bada55;
}
span#prece {
    color: #bada55 !important;
    font-size: 46px;
}
.note-txt {
    font-style: italic;
    font-size: 14px;
    color: #808080;
}
h2.saving-scale-title {
	margin: 30px 0 0;
	font-size: 26px;
	color: #333;
}
.slider_result h1 {
	font-size: 20px;
	color: #444;
	font-weight: 700;
	margin: 0 0 40px;
}
span.dollar-sign {
	font-size: 60px;
	font-family: 'Barlow', sans-serif !important;
	font-weight: 700;
	color: #444;
	margin-left: 150px;
}
div#step3 .dots_navigation {
	margin-top: 20px;
}
div#step3 .main_area {
	padding: 50px 30px;
}
.bars_sec {
    max-width: 600px;
    margin-left: 40px;
}
.bars_sec ul {
	list-style: none;
	padding: 0;
	text-align: left;
	margin: 50px 0 0;
}
.bars_sec ul li .progress {
	width: 100%;
	height: 13px;
	border: 1px solid #333;
	border-radius: 4px;
}
.bars_sec ul li .progress .progress-bar {
	background: #eee;
	height: 11px;
}
.bars_sec ul li .progress .progress-bar {
	background: #bada55;
	height: 11px;
	width: 100%;
}
.bars_sec ul li h2 {
    margin: 0 0 8px;
    font-size: 25px;
    color: #333;
    font-weight: 700;
}
.bars_sec ul li h2 span {
	float: right;
}
.bars_sec ul li {
	margin-bottom: 26px;
}
.bars_sec ul li h1 {
	text-align: right;
	font-size: 56px;
	font-weight: 700;
	color: #333;
	margin: 0;
}
.bars_sec ul li h1 span {
	display: block;
	font-size: 21px;
	color: #000;
}
div#step4 .main_area {
	border: 2px solid #333;
	border-radius: 50px;
	padding: 50px 30px 50px;
	position: relative;
}
div#step4 .main_area:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 77%;
    height: 100%;
    background: url(../images/white-gradient.png) no-repeat top right;
    content: '';
    background-size: cover;
}
div#step4 .main_area div {
    position: relative;
}
img.cat_img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 420px;
}
#step4 .main_area {
	position: relative;
	background-image: url(../images/falling-dollars.jpg);
	background-repeat: no-repeat;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	background-repeat: repeat;
	-webkit-animation: k 4s linear infinite;
	animation: k 4s linear infinite;
	background-size: 50%;
	overflow: hidden;
}
.slider-details ul {
    padding: 0;
    margin: 17px 0 0 0px;
    list-style: none;
    text-align: left;
    position: relative;
    left: 0px;
}
.slider-details ul li {
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    margin-right: 46px;
}
.slider-details ul li:last-child{margin:0;}
@-webkit-keyframes k {
	0% {
		background-position: 0 -702px
	}
	to {
		background-position: 0 0
	}
}
@keyframes k {
	0% {
		background-position: 0 -702px
	}
	to {
		background-position: 0 0
	}
}
div#tooltip::before {
    position: absolute;
    border-top: 10px solid #333;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    content: "";
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.slider-details ul li:nth-child(2) {
    margin-left: 5px;
}
.slider-details ul li:nth-child(3) {
    margin-left: 5px;
    margin-right: 42px;
}
.slider-details ul li:nth-child(4) {
    margin-left: 8px;
margin-right: 42px;
}
.slider-details ul li:nth-child(5) {
    margin-left: 9px;
margin-right: 42px;
}
.slider-details ul li:nth-child(6) {
    margin-left: 9px;
margin-right: 39px;
}
.slider-details ul li:nth-child(7) {
    margin-left: 11px;
    margin-right: 40px;
}
.slider-details ul li:nth-child(8) {
    margin-left: 12px;
}
.slider-details ul li:nth-child(9) {
    margin-left: 6px;
}
.slider-details ul li:nth-child(10) {
    margin-left: 5px;
margin-right: 43px;
}
.slider-details ul li:last-child {
    position: absolute;
    right: -13px;
}
/* Media Queries */

@media screen and (max-width: 1366px) {
h1.do_math{font-size:52px;}
.roi-steps-container {
    padding: 32px 0px 32px;
}
.main_area {
    padding: 44px 30px;
}
.dots_navigation {
    margin: 12px 0 0;
}
.input_spiner{font-size:60px;}
span.dollar-sign{font-size:60px;}
.main_area_inner select{font-size:22px;}
}

@media screen and (max-width: 1080px) {
	.bars_sec {
		max-width: 530px;
		margin-left: 0px;
	}
	img.cat_img {
		width: 380px;
	}
#step4 .dots_navigation{text-align:left;}
}

@media screen and (max-width: 1024px) {
	.ui-slider-horizontal .ui-slider-handle {
    margin-left: -25px;
    width: 45px;
    height: 45px;
}
.input_spiner {
    width: 55%;
}

}
@media screen and (max-width: 991px) {
	img.cat_img {
		display: none;
	}
	.bars_sec {
		max-width: 100%;
	}
	.main_area {
		border-radius: 40px;
		padding: 40px 30px;
	}
.slider-details ul li{font-size:17px;}
#step4 .dots_navigation {
    text-align: center;
}
.bars_sec ul li h1{font-size:50px;}
.slider-details ul li:nth-child(3) {
    margin-left: 1px;
}
.slider-details ul li:last-child {
    right: -2px;
}
}
@media screen and (max-width:823px){
.input_spiner {
    width: 46%;
}
}
@media screen and (max-width: 768px) {	
	div#step4 .main_area{background:#fff !important;}
	div#step4 .main_area:before{display:none;}

}

@media screen and (max-width: 767px) {
	.roi-steps-container {
		padding: 30px 20px 30px;
	}
	h2.green_highlight {
		display: block;
		padding: 13px 20px;
		font-size: 23px;
	}
	.main_area h4 {
		font-size: 20px;
	}
.ui-slider-horizontal .ui-slider-handle {
    margin-left: -20px;

}
	.slider-details ul li:nth-child(5) {
    margin-left: 4px;
}
.slider-details ul li:nth-child(7) {
    margin-left: 6px;
}
.slider-details ul li:nth-child(9) {
    margin-left: 0px;
    margin-right: 40px;
}
.slider-details ul li:last-child {
    right: -8px;
}
}
@media screen and (max-width: 760px) {
.slider-details ul li{display:none;}
	.slider-details ul li:first-child,.slider-details ul li:last-child{display:block;}
	.slider-details ul li:first-child {
    float: left;
    margin: 0;
}

}
@media screen and (max-width: 740px) {
span.dollar-sign {
    font-size: 56px;
    margin-left: 163px;
}
.input_spiner {
    width: 53%;
    font-size: 56px;
}

}
@media screen and (max-width: 640px) {
	h1.do_math {
		font-size: 50px;
	}
	.main_area_inner select {
		font-size: 22px;
	}
	.slider_result h1 {
		font-size: 24px;
	}
	.bars_sec ul li h2 {
		font-size: 24px;
	}
	#step4 .main_area {
		background-size: 70%;
	}
}
@media screen and (max-width: 640px) {
	.ui-slider-horizontal .ui-slider-handle {
    margin-left: -25px;
    width: 40px;
    height: 40px;
}
.slider-details ul li {
    margin-right: 30px;
    font-size: 18px;
}

.input_spiner {
    width: 57%;
}
.bars_sec ul li h2 {
    font-size: 20px;
}
}
@media screen and (max-width: 580px) {
.slider-details ul li {
    margin-right: 28px;
}
}
@media screen and (max-width:568px){
span.dollar-sign {
    margin-left: 108px;
}
}
@media screen and (max-width: 520px) {
span#prece {
    padding-top: 12px;
    display: inline-block;
}
#hovecast span{line-height:32px;}
	.main_area {
		border-radius: 20px;
		padding: 30px;
	}
	.logo img {
		width: 130px;
	}
	h2.green_highlight {
		display: block;
		padding: 10px 20px;
		font-size: 24px;
	}
	span.dollar-sign {
    margin-left: 16%;
    font-size: 60px;
}
.input_spiner {
    width: 64%;
    font-size: 60px;
}
	.ui-slider-horizontal .ui-slider-handle {
    margin-left: -25px;
    width: 40px;
    height: 40px;
}
	div#step3 .main_area,
	div#step4 .main_area {
		padding: 30px;
	}
	.bars_sec ul li h2 {
    font-size: 18px;
}
	.bars_sec ul li h1 {
		font-size: 45px;
	}
	.dots_navigation {
		margin: 40px 0 0;
	}
	

.slider-details ul li:last-child {
    margin: 0;
    float: right;
}
.slider-details {
    position: relative;
    margin-top: 17px;
    width: 100%;
    display: inline-block;
}
div#step2 .text-right.mt-30 {
    margin-top: 30px;
}
.annualtext{width:100% !important;}
}
@media screen and (max-width: 420px) {
	.roi-steps-container {
		padding: 30px 15px 30px;
	}
	h2.green_highlight {
		padding: 10px 15px;
		font-size: 19px;
		font-weight: 600;
		line-height:27px;
	}
	.main_area h4 {
		font-size: 18px;
		line-height: 24px;
	}
	h1.do_math {
		font-size: 35px;
	}
	.calculation_btn img {
		height: 42px;
	}
	a.next_step {
		font-size: 16px;
	}
	.main_area_inner select {
		font-size: 18px;
		border-radius: 6px;
	}
	.select_outer {
		border-radius: 10px;
	}
	.select_outer:before {
		top: 12px;
		font-size: 24px;
	}
	.main_area {
		border-radius: 10px;
	}
	.text-right.mt-30 {
		margin-top: 20px;
	}
	.main_area_inner .form-group label {
		font-size: 18px;
		padding: 8px 0 0;
	}
	span.dollar-sign {
    margin-left: 37px;
    font-size: 50px;
}
	.slider_result {
		clear: both;
	}
	.input_spiner {
    font-size: 50px;
    padding: 0 0 0 4px;
    width: 59%;
}
	.slider_result h1 {
		font-size: 22px;
	}
	div#step2 a.next_step,
	div#step3 a.next_step {
		padding: 10px 25px;
		display: block;
		text-align: center;
		font-size: 20px;
	}
	div#step4 .main_area {
		border-radius: 10px;
		padding: 30px 20px;
	}
	.bars_sec ul li h2 {
    font-size: 16px;
}
}

@media screen and (max-width: 380px) {
	.bars_sec ul li h2 {
		font-size: 17px;
	}
	.slider_result h1 {
		font-size: 22px;
		margin-bottom: 20px;
	}
	div#step2 .text-right.mt-30 {
    margin-top: 20px;
}
span.dollar-sign {
    margin-left: 52px;
    font-size: 50px;
    position: absolute;
    margin-top: -5px;
}
.input_spiner {
    font-size: 50px;
    padding: 0px 0 0 34px;
    width: 100%;
    text-align: center;
}
h1#hovecast {
    margin-top: 15px;
    font-size: 20px;
}
.bars_sec ul li h2 {
    font-size: 14px;
}
}
@media screen and (max-width:375px){
span.dollar-sign {
    margin-left: 67px;
}
}
@media screen (max-width:320px){
span.dollar-sign {
    margin-left: 37px;
}
}