html, body{width:100%; height:100%; padding:0px; margin:0px;}
#main_page{position:relative; margin-bottom:0px;}
.page-footer{bottom:-115px;}
#how-it-works{width:100%; float:left;}
#how-it-works .container{width:1224px; margin:0 auto;}
#how-it-works .container h1{font:35px/40px "roboto_slabbold"; margin-bottom:25px; color:#31383c; text-align:center; padding:50px 100px; position:relative;}
#how-it-works .container h1:after{position:absolute; left:50%; margin-left:-44px; bottom:30px; content:"";display:block; width:88px; height:4px; background:url(../images/h2-after.png) center bottom no-repeat;}
.inner-cont{width:100%; height:100%; display:table; float:left; margin:0px;}
.inner-cont-box{width:100%; float:left; text-align:center;}
.inner-cont-left{width:817px; display:inline-block;}
.inner-cont-left img{width:100%; margin-top:-25px;}
.f-left{float:left;}
.f-right{float:right;}
.inner-cont-right{width:374px; display:table-cell; vertical-align:middle;}
.inner-cont-right h2{font:40px/47px "Roboto Light"; color:#4c575a; padding-bottom:15px; padding-top:0px;}
.inner-cont-right p{font:16px/26px "Latoregular";color:#31383c;}
.inner-cont-right.f-right{float:none;}
.res{display:none;}
.next a{ background:#ff9914; font:18px/43px "roboto_slabbold"; color:#fff; line-height:43px; width:auto; padding:10px 25px; text-align:center; border-radius:3px; margin-top:35px;  }
.next{float:left;}
.next a.next_bt{background:#ff9914 url(../images/how-it-work-next.png) 75px center no-repeat;}
.next a.previous_bt{background:#ff9914 url(../images/how-it-work-prev.png) 10px center no-repeat;}
.next img{margin-left:7px; vertical-align:middle;}
.inner-cont-right h3{font:48px/50px "roboto_slabbold"; color:#8db807; padding-bottom:40px;}
.back{float:left; margin-right:10px; background:url(../images/how-it-work-prev.png) left center no-repeat; padding-left:10px;}
.back a{font:16px/43px  "roboto_slabbold"; color:#2588bd;}
@media screen and (max-width: 1200px) {


#how-it-works .container{width:99%; margin:0 auto;}
.inner-cont-left, .inner-cont-left.f-right{width:60%; display:inline; float:none;}
.inner-cont-right{width:38%;}
canvas#canvas1, canvas#canvas2, canvas#canvas3, canvas#canvas4{width:100%!important; height:auto!important;}

}
@media screen and (max-width: 1024px) {
.inner-cont-right h2{padding-top:0px;}
.inner-cont-right p{font-size:18px; line-height:24px;}
#how-it-works .container h1{font-size:28px; line-height:40px; padding:50px 5%;}
.inner-cont-right h2{font-size:26px; line-height:40px;}
.inner-cont-right h3{padding-bottom:15px;}
}
@media screen and (max-width:1023px) {
.next a.plan_my_bt{padding:10px 15px; font-size:14px;}
.next a{font-size:14px;}
.back a{font-size:14px;}
.next a.next_bt{background:#ff9914 url(../images/how-it-work-next.png) 65px center no-repeat;}
}

@media screen and (max-width:767px) {
	.inner-cont{display:block; margin-bottom:25px;}
.inner-cont-box{display:none;}
.inner-cont-left, .inner-cont-left.f-right{width:100%; display:inline; float:none;}
.inner-cont-right{width:98%; float:none; margin:50px auto 0 auto; display:block;}
.res{display:block;}
.inner-cont-right h2{padding-left:0px;}
.inner-cont-right h3{padding-bottom:10px;}
.next a{margin-top:0px; font-size:14px;}

.page-footer{bottom:-25PX;}

}

@media screen and (max-width:667px) {
#how-it-works .container h1{font-size:24px; line-height:30px; padding:50px 5%;}
.inner-cont-right h2{font-size:18px; line-height:26px; padding-top:10px;}
}

@media screen and (max-width:479px) {
.inner-cont-right h3{font-size:39px; line-height:39px;}

}