/********************************************** General css ***************************************************/
/** Generated by FG **/
@font-face {
	font-family: 'Conv_faizan';
	src: url('../fonts/faizan.eot');
	src: local('?'), url('../fonts/faizan.woff') format('woff'), url('../fonts/faizan.ttf') format('truetype'), url('../fonts/faizan.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'FuturaReg';
    src: url('../fonts/FuturaStd-Book.eot');
    src: local('?'), url('../fonts/FuturaStd-Book.woff') format('woff'), url('../fonts/FuturaStd-Book.ttf') format('truetype'), url('../fonts/faizan.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
color:#393939;

}

:focus {
outline: -webkit-focus-ring-color auto 0px;
}

input[type='submit']{
border: 0;
cursor:pointer;
}
.ui-page	{	min-height: 575px !important; }
.loading{
margin: auto;
text-align: center;
margin-top: 260px;
}

.bg{
width:980px;
max-height:560px;
min-height:560px;
background: url('../images/bg.png');
overflow:hidden;
margin:20px auto;
display:none;
}

.main{
width:980px;
max-height:560px;
min-height:560px;
overflow:hidden;
background-size:100%;
margin:auto;
background-repeat: no-repeat;
position:relative;

}

.heading{
    color: #2d3338;
position: absolute;
left: 0;
right: 0;
top: 8px;
text-align: right;
height: 75px;
font-size: 24px!important;
font-family: 'FuturaReg'!important;
line-height: 30px;
width: 450px;
text-align: center;
margin-left: auto!important;
margin-right: auto!important;
}

.start-btn {
    position: absolute;
    top: 465px;
    left: 0px;
    right:0px;
    margin:auto;
    background: url('../images/start-hover.png');
    width: 167px;
    height: 48px;
    color: transparent;
    border: 0;
    cursor:pointer;
    z-index:99;
    /*-webkit-animation: start_blink 1s infinite;
    -moz-animation: start_blink 1s infinite; 
    animation: start_blink 1s  ;*/

    -webkit-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}


@-webkit-keyframes start_blink {   
    0%{ background:url('../images/start-hover.png');}
    50%  {background:url('../images/start.png');}
    100%   {background:url('../images/start-hover.png');}
}

@-moz-keyframes start_blink {
    0%{ background:url('../images/start-hover.png');}
    50%  {background:url('../images/start.png');}
    100%   {background:url('../images/start-hover.png');}
}

@keyframes start_blink {
    0%{ background:url('../images/start-hover.png');}
    50%  {background:url('../images/start.png');}
    100%   {background:url('../images/start-hover.png');}
}
.start-btn:hover:enabled{
    background: url('../images/start.png');
    -webkit-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.previous-btn{
position: absolute;
top: 0;
bottom: 0;
background: url('../images/previous.png');
width: 137px;
height: 45px;
color: transparent;
margin: auto;
left: 30px;
z-index: 1;

-webkit-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}

.previous-btn:hover:enabled{
background: url('../images/previous-hover.png');

-webkit-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}

#back-to-twenty-page{
position: absolute;
bottom: 170px;
background: url('../images/previous.png');
width: 137px;
height: 45px;
color: transparent;
margin: auto;
right: 172px;
z-index: 1;
}

#back-to-twenty-page:hover:enabled{
background: url('../images/previous-hover.png');
}

#go-to-splash-page , #go-to-start-page{
background: url('../images/startover-hover.png');
width: 133px;
height: 45px;
position: absolute;
top: 0;
bottom: 0;
color: transparent;
margin: auto;
right: 30px;
z-index: 1;
}

#go-to-splash-page:hover ,#go-to-start-page:hover {
background: url('../images/startover.png');
}

.save {
background: url(../images/save.png);
cursor:pointer;
width: 87px;
height: 35px;
border:0px;
position:absolute;
position: absolute;
top: 370px;
left: 422px;
-webkit-animation: save_blink 1s infinite;
-moz-animation: save_blink 1s infinite; 
animation: save_blink 1s  ;
}

@-webkit-keyframes save_blink {   
    0%{ background:url('../images/save-hover.png');}
    50%  {background:url('../images/save.png');}
    100%   {background:url('../images/save-hover.png');}
}

@-moz-keyframes save_blink {
    0%{ background:url('../images/save-hover.png');}
    50%  {background:url('../images/save.png');}
    100%   {background:url('../images/save-hover.png');}
}

@keyframes save_blink {
    0%{ background:url('../images/save-hover.png');}
    50%  {background:url('../images/save.png');}
    100%   {background:url('../images/save-hover.png');}
}

.save:hover{
background: url(../images/save-hover.png);
}

.continue-btn{
position: absolute;
top: 0;
bottom: 0;
background: url('../images/continue.png');
width: 137px;
height: 45px;
color: transparent;
margin: auto;
right: 30px;
z-index: 1;

-webkit-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}

.continue-btn:disabled {
background: url('../images/continue-hover.png');
opacity: 0.5;

-webkit-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}


.continue-btn:hover:enabled{
background: url('../images/continue-hover.png');

-webkit-transition: background 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out;
transition: background 0.2s ease-in-out;
}

.continue-btn:enabled{
position: absolute;
top: 0;
bottom: 0;
background: url('../images/continue.png');
width: 137px;
height: 45px;
color: transparent;
margin: auto;
right: 30px;
z-index: 1;
-webkit-animation: continue_blink 1s infinite;
-moz-animation: continue_blink 1s infinite; 
animation: continue_blink 1s  ;
}

@-webkit-keyframes continue_blink {   
    0%{ background:url('../images/continue-hover.png');}
    50%  {background:url('../images/continue.png');}
    100%   {background:url('../images/continue-hover.png');}
}

@-moz-keyframes continue_blink {
    0%{ background:url('../images/continue-hover.png');}
    50%  {background:url('../images/continue.png');}
    100%   {background:url('../images/continue-hover.png');}
}

@keyframes continue_blink {
    0%{ background:url('../images/continue-hover.png');}
    50%  {background:url('../images/continue.png');}
    100%   {background:url('../images/continue-hover.png');}
}

.copyright{
font-family: 'Conv_faizan';
color: rgb(199, 0, 0);
bottom: 6px;
position: absolute;
left: 0;
right: 0;
margin: auto;
text-align: center;

}

.slider-wrapper-age {
width: 308px;
height: 0px;
margin: auto;
position: absolute;
bottom: 100px;
left: 0;
right: 0;
z-index: 10;
}

.age_bar {
position: absolute;
bottom: 115px;
left: 336px;
}


.slider-wrapper-age .range-min , .slider-wrapper-age .range-max , .slider-wrapper-age .display-box-label{
display: none;
}

.slider-wrapper-age .display-box {
bottom: -40px;
left: -10px;
}

/*************************************************** Splash page css ********************************************************/
#splash-page{
background-image:url('../images/splash.png');
}

.logo{
position: absolute;
left: 140px;
top: 150px;
}

/***moving-cloud animation***/
.moving-cloud{

background-image:url('../images/clouds.png') ;
min-height:160px;
-webkit-animation: cloud 20s linear infinite;
-moz-animation: cloud 20s  linear infinite;
 animation: cloud 20s  linear  infinite;
}

@-webkit-keyframes cloud {
    from { background-position: 0px; }
    to { background-position: 746px; }
}

@-moz-keyframes cloud {
    from { background-position: 0px; }
    to { background-position: 746px; }
}

@keyframes cloud {
    from { background-position: 0px; }
    to { background-position: 746px; }
}

/*** grass1 animation ***/
.grass1{
width:47px;
background-image:url('../images/grass-1.png');
min-height:24px;
-webkit-animation: grass1 2s steps(25) infinite alternate;
-moz-animation: grass1 2s steps(25)  infinite alternate;
animation: grass1 2s steps(25) infinite alternate;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 510px;
right: 115px;
}

@-webkit-keyframes grass1 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}

@-moz-keyframes grass1 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}

@keyframes grass1 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}


/*** grass2 animation ***/
.grass2{
width:47px;
background-image:url('../images/grass-2.png');
min-height:24px;
-webkit-animation: grass2 2s steps(25) 2 alternate;
-moz-animation: grass2 2s steps(25)  2 alternate;
animation: grass2 2s steps(25) 2 alternate;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 426px;
left: 405px;
}

@-webkit-keyframes grass2 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}

@-moz-keyframes grass2 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}

@keyframes grass2 {
    from { background-position: 0px; }
    to { background-position: -1175px; }
}

/*** grass3 animation ***/
.grass3{
width:61px;
background-image:url('../images/grass-3.png');
min-height:31px;
-webkit-animation: grass3 2s steps(25) 2 alternate;
-moz-animation: grass3 2s steps(25)  2 alternate;
animation: grass3 2s steps(25) 2 alternate;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 470px;
left: 85px;
}

@-webkit-keyframes grass3 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}

@-moz-keyframes grass3 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}

@keyframes grass3 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}


/*** grass4 animation ***/

.grass4{
width:88.88px;
background-image:url('../images/grass-4.png');
min-height:43px;
-webkit-animation: grass4 2s steps(25) 2 alternate;
-moz-animation: grass4 2s steps(25)  2 alternate;
animation: grass4 2s steps(25) 2 alternate;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 386px;
right: 45px;
}

@-webkit-keyframes grass4 {
    from { background-position: 0px; }
    to { background-position: -2222px; }
}

@-moz-keyframes grass4 {
    from { background-position: 0px; }
    to { background-position: -2222px; }
}

@keyframes grass4 {
    from { background-position: 0px; }
    to { background-position: -2222px; }
}


/*** grass5 animation ***/
.grass5{
width:61px;
background-image:url('../images/grass-5.png');
min-height:31px;
-webkit-animation: grass5 2s steps(25) 2 alternate;
-moz-animation: grass5 2s steps(25)  2 alternate;
animation: grass5 2s steps(25) 2 alternate;
-webkit-animation-iteration-count: infinite;
position: absolute;
top: 360px;
right: 435px;
}

@-webkit-keyframes grass5 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}

@-moz-keyframes grass5 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}

@keyframes grass5 {
    from { background-position: 0px; }
    to { background-position: -1525px; }
}

.splash_characters{
position: absolute;
right: 40px;
bottom: 25px;
}

/******************************************** eraser css *****************************************************************/
#canvas {
margin: 0 auto;
width: 980px;
height: 480px;
z-index: 80;
position: absolute;
top: 63px;
}

.background-eraser-div{
width: 980px;
margin: auto;
position: absolute;
top: 20px;
z-index: 100;
}

.bg  .images-eraser {
position: absolute;
background-repeat:no-repeat;
}

#step1 {
background-image: url(../images/step1.png);
width: 119px;
height: 124px;
top: 12px;
left: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step2 {
background-image: url(../images/step2.png);
width: 169px;
height: 200px;
top: 0px;
left: -1px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step3 {
background-image: url(../images/step3.png);
width: 325px;
height: 370px;
top: 2px;
left: -6px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step4 {
background-image: url(../images/step4.png);
width: 400px;
height: 490px;
top: 0px;
left: 32px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step5 {
background-image: url(../images/step5.png);
width: 510px;
height: 600px;
top: -1px;
left: 22px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step6 {
background-image: url(../images/step6.png);
width: 550px;
height: 555px;
top: 0px;
left: 101px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step7 {
background-image: url(../images/step7.png);
width: 510px;
height: 555px;
top: -2px;
left: 219px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step8 {
background-image: url(../images/step8.png);
width: 516px;
height: 545px;
top: 8px;
left: 352px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step9 {
background-image: url(../images/step9.png);
width: 520px;
height: 549px;
top: 7px;
left: 432px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step10 {
background-image: url(../images/step10.png);
width: 445px;
height: 546px;
top: 60px;
left: 539px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step11 {
background-image: url(../images/step11.png);
width: 320px;
height: 410px;
top: 145px;
left: 656px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step12 {
background-image: url(../images/step12.png);
width: 307px;
height: 217px;
top: 338px;
left: 759px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step13 {
background-image: url(../images/step13.png);
width: 234px;
height: 445px;
top: 38px;
left: 590px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step14 {
background-image: url(../images/step14.png);
width: 244px;
height: 426px;
top: 46px;
left: 641px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step15 {
background-image: url(../images/step15.png);
width: 223px;
height: 380px;
top: 95px;
left: 677px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

#step16 {
background-image: url(../images/step16.png);
width: 179px;
height: 338px;
top: 135px;
left: 736px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
filter: alpha(opacity=94);
opacity: 0.94;
}

/***********************************************Second page*************************************************************************/
#second-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.gender-female{
position: absolute;
bottom: 83px;
left: 621px;
}

.gender-male{
position: absolute;
bottom: 84px;
left: 337px;
}

.right_bar_age{
position: absolute;
bottom: 159px;
left: 340px;
}


/*
#male_normal1{
width: 311px;
height: 384px;
background-image: url("../images/boy-complete.png");
margin: 0 auto;
position: absolute;
left: 0px;
right: 0px;
}*/

#male_normal{
width: 311px;
height: 384px;
background-image: url("../images/boy-complete.png");
margin: 0 auto;
position: absolute;
left: 200px;
top: 20px;
}

.male_happy{
    width: 311px;
	height: 384px;
	margin: 0 auto;
	-webkit-animation: male_happy 2.5s steps(84)  ;
    -moz-animation: male_happy 2.5s steps(84)  ;
    animation: male_happy 2.5s steps(84)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_happy {
    from { background-position: 0px; }
    to { background-position: -26124px; }
}

@-moz-keyframes male_happy {
    from { background-position: 0px; }
    to { background-position: -26124px; }
}

@keyframes male_happy {
    from { background-position: 0px; }
    to { background-position: -26124px; }
}


.male_sad {
    width: 311px;
	height: 384px;
	margin: 0 auto;
	-webkit-animation: male_sad 2.5s steps(84)  ;
    -moz-animation: male_sad 2.5s steps(84) ;
    animation: male_sad 2.5s steps(84)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
	
}

@-webkit-keyframes male_sad {
    from { background-position: -26435px; }
    to { background-position: -52559px; }
}

@-moz-keyframes male_sad {
    from { background-position: -26435px; }
    to { background-position: -52559px; }
}

@keyframes male_sad {
    from { background-position: -26435px; }
    to { background-position: -52559px; }
}

.weight{
    width: 311px;
	height: 384px;
	margin: 0 auto;
	-webkit-animation: weight 2s steps(62)  ;
    -moz-animation: weight 2s steps(62)  ;
    animation: weight 2s steps(62)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes weight {
    from { background-position: -52870px; }
    to { background-position: -72152px; }
}

@-moz-keyframes weight {
    from { background-position: -52870px; }
    to { background-position: -72152px; }
}

@keyframes weight {
    from { background-position: -52870px; }
    to { background-position: -72152px; }
}


#female_normal{
width: 346px;
height: 427px;
background-image: url("../images/female_complete.png");
margin: 0 auto;
position: absolute;
left: 450px;
top: -5px;
}

.female_happy{
    width: 346px;
 height: 427px;
 margin: 0 auto;
 background-image: url("../images/female_complete.png");
 -webkit-animation: female_happy 2s steps(75)  ;
    -moz-animation: female_happy 2s steps(75)  ;
    animation: female_happy 2s steps(75)  ;
 -webkit-animation-fill-mode: forwards; / Chrome, Safari, Opera /
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_happy {
    from { background-position: 0px; }
    to { background-position: -25950px; }
}

@-moz-keyframes female_happy {
    from { background-position: 0px; }
    to { background-position: -25950px; }
}

@keyframes female_happy {
    from { background-position: 0px; }
    to { background-position: -25950px; }
}


.female_sad{
    width: 346px;
 height: 427px;
 margin: 0 auto;
 background-image: url("../images/female_complete.png");
 -webkit-animation: female_sad 2s steps(136)  ;
    -moz-animation: female_sad 2s steps(136)  ;
    animation: female_sad 2s steps(136)  ;
 -webkit-animation-fill-mode: forwards; / Chrome, Safari, Opera /
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_sad {
 from { background-position: -26642px; }
    to { background-position: -73698px; }
}

@-moz-keyframes female_sad {
    from { background-position: -26642px; }
    to { background-position: -73698px; }
}

@keyframes female_sad {
    from { background-position: -26642px; }
    to { background-position: -73698px; }
}

.female_out{
    width: 346px;
 height: 427px;
 margin: 0 auto;
 background-image: url("../images/female_complete.png");
 -webkit-animation: female_out 2s steps(62)  ;
    -moz-animation: female_out 2s steps(62)  ;
    animation: female_out 2s steps(62)  ;
 -webkit-animation-fill-mode: forwards; / Chrome, Safari, Opera /
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_out {
 from { background-position: -74390px; }
    to { background-position: -95842px; }
}

@-moz-keyframes female_out {
    from { background-position: -74390px; }
    to { background-position: -95842px; }
}

@keyframes female_out {
    from { background-position: -74390px; }
    to { background-position: -95842px; }
}


.male_age{
    position: absolute;
	left: 0px;
	top: 75px;
	right: 0px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	width: 111px;
	height: 346px;
}

.female_age{
    width: 238px;
	height: 423px;
	position: absolute;
	left: 0px;
	top: 0px;
	right:0px;
	margin: 0 auto;
	background-image: url("../images/Female_Age.png");
}

.male_age_1{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_1 2s  steps(49)  ;
    -moz-animation: male_age_1 2s  steps(49)  ;
    animation: male_age_1 2s  steps(49)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_age_1 {
    from { background-position: 0px; }
    to { background-position: -5439px; }
}

@-moz-keyframes male_age_1 {
    from { background-position: 0px; }
    to { background-position: -5439px; }
}

@keyframes male_age_1 {
    from { background-position: 0px; }
    to { background-position: -5439px; }
}

.male_age_2{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_2 2s  steps(63)  ;
    -moz-animation: male_age_2 2s  steps(63)  ;
    animation: male_age_2 2s  steps(63)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_age_2 {
    from { background-position: -5661px; }
    to { background-position: -12654px; }
}

@-moz-keyframes male_age_2 {
    from { background-position: -5661px; }
    to { background-position: -12654px; }
}

@keyframes male_age_2 {
    from { background-position: -5661px; }
    to { background-position: -12654px; }
}

.male_age_3{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_3 2s  steps(83)  ;
    -moz-animation: male_age_3 2s  steps(83)  ;
    animation: male_age_3 2s  steps(83)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_age_3 {
    from { background-position: -12876px; }
    to { background-position: -22089px; }
}

@-moz-keyframes male_age_3 {
    from { background-position: -12876px; }
    to { background-position: -22089px; }
}

@keyframes male_age_3 {
    from { background-position: -12876px; }
    to { background-position: -22089px; }
}

.male_age_1_reverse{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_1_reverce 2s  steps(49)  ;
    -moz-animation: male_age_1_reverce 2s  steps(49)  ;
    animation: male_age_1_reverce 2s  steps(49)  ;
	-webkit-animation-fill-mode: backwards; /* Chrome, Safari, Opera */
    animation-fill-mode: backwards;
}

@-webkit-keyframes male_age_1_reverce {
    from { background-position: -5439px; }
    to { background-position: 0px; }
}

@-moz-keyframes male_age_1_reverce {
    from { background-position: -5439px; }
    to { background-position: 0px; }
}

@keyframes male_age_1_reverce {
    from { background-position: -5439px; }
    to { background-position: 0px; }
}

.male_age_2_reverse{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_2_reverce 2s  steps(63)  ;
    -moz-animation: male_age_2_reverce 2s  steps(63)  ;
    animation: male_age_2_reverce 2s  steps(63)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_age_2_reverce {
    from { background-position: -12654px; }
    to { background-position: -5661px; }
}

@-moz-keyframes male_age_2_reverce {
    from { background-position: -12654px; }
    to { background-position: -5661px; }
}

@keyframes male_age_2_reverce {
    from { background-position: -12654px; }
    to { background-position: -5661px; }
}

.male_age_3_reverse{
    width: 111px;
    height: 346px;
	margin: 0 auto;
	background-image: url("../images/Male_Age.png");
	-webkit-animation: male_age_3_reverce 2s  steps(83)  ;
    -moz-animation: male_age_3_reverce 2s  steps(83)  ;
    animation: male_age_3_reverce 2s  steps(83)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_age_3_reverce {
    from { background-position: -22089px; }
    to { background-position: -12876px; }
}

@-moz-keyframes male_age_3_reverce {
    from { background-position: -22089px; }
    to { background-position: -12876px; }
}

@keyframes male_age_3_reverce {
    from { background-position: -22089px; }
    to { background-position: -12876px; }
}

.female_age_1{
    width: 238px;
    height: 423px;
	margin: 0 auto;
	background-image: url("../images/Female_Age.png");
	-webkit-animation: female_age_1 3s  steps(54)  ;
    -moz-animation: female_age_1 3s  steps(54)  ;
    animation: female_age_1 3s  steps(54)  ;
	-webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_age_1 {
    from { background-position: 0px; }
    to { background-position: -12852px; }
}

@-moz-keyframes female_age_1 {
    from { background-position: 0px; }
    to { background-position: -12852px; }
}

@keyframes female_age_1 {
    from { background-position: 0px; }
    to { background-position: -12852px; }
}

.female_age_2{
    width: 238px;
    height: 423px;
	margin: 0 auto;
	background-image: url("../images/Female_Age.png");
	-webkit-animation: female_age_2 3s  steps(88)  ;
    -moz-animation: female_age_2 3s  steps(88)  ;
    animation: female_age_2 3s  steps(88)  ;
	-webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_age_2 {
    from { background-position: -13328px; }
    to { background-position: -34272px; }
}

@-moz-keyframes female_age_2 {
    from { background-position: -13328px; }
    to { background-position: -34272px; }
}

@keyframes female_age_2 {
    from { background-position: -13328px; }
    to { background-position: -34272px; }
}

.female_age_3{
    width: 238px;
    height: 423px;
	margin: 0 auto;
	background-image: url("../images/Female_Age.png");
	-webkit-animation: female_age_3 3s  steps(63)  ;
    -moz-animation: female_age_3 3s  steps(63)  ;
    animation: female_age_3 3s  steps(63)  ;
	-webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_age_3 {
    from { background-position: -34748px; }
    to { background-position: -49742px; }
}

@-moz-keyframes female_age_3 {
    from { background-position: -34748px; }
    to { background-position: -49742px; }
}

@keyframes female_age_3 {
    from { background-position: -34748px; }
    to { background-position: -49742px; }
}


.female_age_1_reverse{
    width: 238px;
    height: 423px;
 margin: 0 auto;
 background-image: url("../images/Female_Age.png");
 -webkit-animation: female_age_1_reverse 2s  steps(54)  ;
    -moz-animation: female_age_1_reverse 2s  steps(54)  ;
    animation: female_age_1_reverse 2s  steps(54)  ;
 -webkit-animation-fill-mode: backwords; /* Chrome, Safari, Opera */
    animation-fill-mode: backwords;
}

@-webkit-keyframes female_age_1_reverse {   
 from { background-position: -12852px; }
    to { background-position: 0px; }
}

@-moz-keyframes female_age_1_reverse {
    from { background-position: -12852px; }
    to { background-position: 0px; }
}

@keyframes female_age_1_reverse {
    from { background-position: -12852px; }
    to { background-position: 0px; }
}

.female_age_2_reverse{
    width: 238px;
    height: 423px;
 margin: 0 auto;
 background-image: url("../images/Female_Age.png");
 -webkit-animation: female_age_2_reverse 2s  steps(88)  ;
    -moz-animation: female_age_2_reverse 2s  steps(88)  ;
    animation: female_age_2_reverse 2s  steps(88)  ;
 -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_age_2_reverse {
    from { background-position: -34272px; }
    to { background-position: -13328px; }
}

@-moz-keyframes female_age_2_reverse {
    from { background-position: -34272px; }
    to { background-position: -13328px; }
}

@keyframes female_age_2_reverse {
    from { background-position: -34272px; }
    to { background-position: -13328px; }
}

.female_age_3_reverse{
    width: 238px;
    height: 423px;
 margin: 0 auto;
 background-image: url("../images/Female_Age.png");
 -webkit-animation: female_age_3_reverse 2s  steps(63)  ;
    -moz-animation: female_age_3_reverse 2s  steps(63)  ;
    animation: female_age_3_reverse 2s  steps(63)  ;
 -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_age_3_reverse {
    from { background-position: -49742px; }
    to { background-position: -34748px; }
}

@-moz-keyframes female_age_3_reverse {
    from { background-position: -49742px; }
    to { background-position: -34748px; }
}

@keyframes female_age_3_reverse {
    from { background-position: -49742px; }
    to { background-position: -34748px; }
}

/******************/

#third-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.odometer-container{
position:absolute;
right:0px;
}

.txt-class{
position: absolute;
left: 380px;
background: white;
/*border: 2px solid #909090;*/
/*border-radius: 5px;*/
font-family: "FuturaReg", sans-serif;
font-size: 14px;
height: 42px;
width: 370px;
padding: 5px 15px;
}

.user-name{
position: absolute;
top: 202px;
left: 222px;
}
.user-email{
position: absolute;
top: 271px;
left: 222px;
}
.user-contact{
position: absolute;
top: 341px;
left: 222px;
}
#user-name{top: 190px;}
#user-email{top: 260px;}
#user-number{top: 330px;}

.checkbox-image-left{
position: absolute;
bottom: 77px;
left: 300px;
cursor:pointer;
}

.checkbox-image-right{
position: absolute;
bottom: 77px;
right: 370px;
cursor:pointer;
}

.stage-one-menu ,.stage-two-menu, .stage-three-menu, .stage-four-menu, .stage-five-menu{ 
margin: auto;
bottom: 0;
position: absolute;
left: 0;
right: 0;
}

/**********************************************************************/
/* RADIO */
/**********************************************************************/

/*.radio-image-left{
position: absolute;
bottom: 100px;
left: 310px;
cursor:pointer;
}

.radio-image-right{
position: absolute;
bottom: 100px;
right: 370px;
cursor:pointer;
}*/




/*******************/
#fourth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.email_error{
color: red;
position: absolute;
left: 384px;
top: 303px;
font-size: 14px;
/*font-weight: bold;*/
font-family: 'FuturaReg', sans-serif;
}







/*******************/
#fifth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.married{
bottom: 84px;
left: 620px;
position: absolute;

}
.single{
bottom: 80px;
left: 339px;
position: absolute;
}

#marital_character{
	left:0px;
	right:0px;
	position:absolute;
}


.male_married_normal {
    width: 476px;
    height: 418px;
	margin: 0 auto;
	background-image: url("../images/male_married_unmarried.png");
	-webkit-animation: male_married_normal 6s  steps(128)  ;
    -moz-animation: male_married_normal 6s  steps(128)  ;
    animation: male_married_normal 6s  steps(128)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}

@-moz-keyframes male_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}

@keyframes male_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}


.female_married_normal {
    width: 476px;
    height: 418px;
	margin: 0 auto;
	background-image: url("../images/female_married_unmarried.png");
	-webkit-animation: female_married_normal 6s  steps(128)  ;
    -moz-animation: female_married_normal 6s  steps(128)  ;
    animation: female_married_normal 6s  steps(128)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
@-webkit-keyframes female_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}

@-moz-keyframes female_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}

@keyframes female_married_normal {
    from { background-position: -60928px; }
    to { background-position: -60928px; }
}

.male_normal_to_married {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/male_married_unmarried.png");
 -webkit-animation: male_normal_to_married 3s  steps(129)  ;
    -moz-animation: male_normal_to_married 3s  steps(129)  ;
    animation: male_normal_to_married 3s  steps(129)  ;
 -webkit-animation-fill-mode: backwards; /* Chrome, Safari, Opera */
    animation-fill-mode: backwards;
}

@-webkit-keyframes male_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

@-moz-keyframes male_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

@keyframes male_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

.male_normal_to_unmarreid {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/male_married_unmarried.png");
 -webkit-animation: male_normal_to_unmarreid 3s  steps(125)  ;
    -moz-animation: male_normal_to_unmarreid 3s  steps(125)  ;
    animation: male_normal_to_unmarreid 3s  steps(125)  ;
 -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_normal_to_unmarreid {
    from { background-position: -61404px; }
    to { background-position: -120904px; }
}

@-moz-keyframes male_normal_to_unmarreid {
    from { background-position: -61404px; }
    to { background-position: -120904px; }

}

@keyframes male_normal_to_unmarreid {
    from { background-position: -61404px; }
    to { background-position: -120904px; }
}

.male_married_to_unmarreid {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/male_married_unmarried.png");
 -webkit-animation: male_married_to_unmarreid 3s  steps(121)  ;
    -moz-animation: male_married_to_unmarreid 3s  steps(121)  ;
    animation: male_married_to_unmarreid 3s  steps(121)  ;
 -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes male_married_to_unmarreid {
    from { background-position: -63308px; }
    to { background-position: -120904px; }
}

@-moz-keyframes male_married_to_unmarreid {
    from { background-position: -63308px; }
    to { background-position: -120904px; }
}

@keyframes male_married_to_unmarreid {
    from { background-position: -63308px; }
    to { background-position: -120904px; }
}


.male_unmarreid_to_married {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/male_married_unmarried.png");
 -webkit-animation: male_unmarreid_to_married 3s  steps(155)  ;
    -moz-animation: male_unmarreid_to_married 3s  steps(155)  ;
    animation: male_unmarreid_to_married 3s  steps(155)  ;
 -webkit-animation-fill-mode: backwards; /* Chrome, Safari, Opera */
    animation-fill-mode: backwards;
}

@-webkit-keyframes male_unmarreid_to_married {
    from { background-position: -73780px; }
    to { background-position: -0px; }
}

@-moz-keyframes male_unmarreid_to_married {
    from { background-position: -73780px; }
    to { background-position: -0px; }
}

@keyframes male_unmarreid_to_married {
    from { background-position: -73780px; }
    to { background-position: -0px; }
}

.female_normal_to_unmarreid {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/female_married_unmarried.png");
 -webkit-animation: female_normal_to_unmarreid 3s  steps(137)  ;
    -moz-animation: female_normal_to_unmarreid 3s  steps(137)  ;
    animation: female_normal_to_unmarreid 3s  steps(137)  ;
 -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_normal_to_unmarreid {
    from { background-position: -61880px; }
    to { background-position: -127092px; }
}

@-moz-keyframes female_normal_to_unmarreid {
    from { background-position: -61880px; }
    to { background-position: -127092px; }

}

@keyframes female_normal_to_unmarreid {
    from { background-position: -61880px; }
    to { background-position: -127092px; }
}

.female_normal_to_married {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/female_married_unmarried.png");
 -webkit-animation: female_normal_to_married 3s  steps(129)  ;
    -moz-animation: female_normal_to_married 3s  steps(129)  ;
    animation: female_normal_to_married 3s  steps(129)  ;
 -webkit-animation-fill-mode: backwards; 
    animation-fill-mode: backwards;
}

@-webkit-keyframes female_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

@-moz-keyframes female_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

@keyframes female_normal_to_married {
    from { background-position: -61404px; }
    to { background-position: 0px; }
}

.female_married_to_unmarreid {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/female_married_unmarried.png");
 -webkit-animation: female_married_to_unmarreid 3s  steps(151)  ;
    -moz-animation: female_married_to_unmarreid 3s  steps(151)  ;
    animation: female_married_to_unmarreid 3s  steps(151)  ;
 -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes female_married_to_unmarreid {
    from { background-position: -55216px; }
    to { background-position: -127092px; }
}

@-moz-keyframes female_married_to_unmarreid {
    from { background-position: -55216px; }
    to { background-position: -127092px; }
}

@keyframes female_married_to_unmarreid {
    from { background-position: -55216px; }
    to { background-position: -127092px; }
}

.female_unmarreid_to_married {
    width: 476px;
    height: 418px;
 margin: 0 auto;
 background-image: url("../images/female_married_unmarried.png");
 -webkit-animation: female_unmarreid_to_married 3s  steps(154)  ;
    -moz-animation: female_unmarreid_to_married 3s  steps(154)  ;
    animation: female_unmarreid_to_married 3s  steps(154)  ;
 -webkit-animation-fill-mode: backwards; /* Chrome, Safari, Opera */
    animation-fill-mode: backwards;
}

@-webkit-keyframes female_unmarreid_to_married {
    from { background-position: -73304px; }
    to { background-position: 0px; }
}

@-moz-keyframes female_unmarreid_to_married {
    from { background-position: -73304px; }
    to { background-position: 0px; }
}

@keyframes female_unmarreid_to_married {
    from { background-position: -73304px; }
    to { background-position: 0px; }
}

/*******************/
#sixth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

#select-18-button span{
display:none;
}

.map{
position: absolute;
left: 310px;
top: 101px;
}

.select-city{
left: 301px;
position: absolute;
bottom: 107px;
}
/*
.city{
position: absolute;
bottom: 102px;
left: 440px;

}*/

.styled-select select {
 background: transparent;
 width: 245px;
 padding: 10px 5px;
 line-height: 1;
 border: 0;
 border-radius: 0;
 -webkit-appearance: none;
 font-family: 'FuturaReg', sans-serif;
 color: #2d3338;
 font-size: 14px;
 /*font-weight:500;*/
 z-index: 9999;

}
.styled-select {
width: 225px;
height: 35px;
overflow: hidden;
background: url(../images/new_arrow.png) no-repeat right;
border-bottom: 2px solid #383d42;
/*border-radius: 3px;*/
position: absolute;
bottom: 95px;
left: 440px;
}

.styled-select span {
 display:none;
}

.styled-select select optgroup {
 width: 225px;
 color: #a3a3a3;
 font-size: 16px;
 font-family: 'FuturaReg', sans-serif;
 font-style:normal;
 /*font-weight:500;*/
}

.styled-select select option {
 width: 225px;
 color: #a3a3a3;
 font-size: 14px;
 font-family: 'FuturaReg', sans-serif;
 /*font-weight:500;*/
}

.sindh{
left: 428px;
width: 92px;
height: 406px;
position: absolute;
z-index: 8;
top: -1px;
}

.sindh-map{

	margin: 0 auto;
	background-image:url('../images/sindh-map.png');
	-webkit-animation: sindh-map 0.5s steps(21)  ;
    -moz-animation: sindh-map 0.5s steps(21)  ;
    animation: sindh-map 0.5s steps(21)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes sindh-map {
    from { background-position: 0px; }
    to { background-position: -1932px; }
}

@-moz-keyframes sindh-map {
    from { background-position: 0px; }
    to { background-position: -1932px; }
}

@keyframes sindh-map {
    from { background-position: 0px; }
    to { background-position: -1932px; }
}


.kpk{
left: 480px;
width: 89px;
height: 238px;
position: absolute;
z-index: 8;
top: -1px;
}

.kpk-map{

	margin: 0 auto;
	background-image:url('../images/kpk-map.png');
	-webkit-animation: kpk-map 0.4s steps(21)  ;
    -moz-animation: kpk-map 0.4s steps(21)  ;
    animation: kpk-map 0.4s steps(21)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes kpk-map {
    from { background-position: 0px; }
    to { background-position: -1869px; }
}

@-moz-keyframes kpk-map {
    from { background-position: 0px; }
    to { background-position: -1869px; }
}

@keyframes kpk-map {
    from { background-position: 0px; }
    to { background-position: -1869px; }
}

.GB{
left: 535px;
width: 94px;
height: 162px;
position: absolute;
z-index: 8;
top: -1px;
}

.GB-map{

	margin: 0 auto;
	background-image:url('../images/gb-map.png');
	-webkit-animation: GB-map 0.4s steps(21)  ;
    -moz-animation: GB-map 0.4s steps(21)  ;
    animation: GB-map 0.4s steps(21)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes GB-map {
    from { background-position: 0px; }
    to { background-position: -1974px; }
}

@-moz-keyframes GB-map {
    from { background-position: 0px; }
    to { background-position: -1974px; }
}

@keyframes GB-map {
    from { background-position: 0px; }
    to { background-position: -1974px; }
}

.baluchistan{
left: 311px;
width: 190px;
height: 377px;
position: absolute;
z-index: 8;
top: -1px;
}
.baluchistan-map{
 margin: 0 auto;
 background-image:url('../images/baluchistan-map.png');
 -webkit-animation: baluchistan-map 0.4s steps(21)  ;
    -moz-animation: baluchistan-map 0.4s steps(21)  ;
    animation: baluchistan-map 0.4s steps(21)  ;
 -webkit-animation-fill-mode: forwards; / Chrome, Safari, Opera /
    animation-fill-mode: forwards;
}

@-webkit-keyframes baluchistan-map {
    from { background-position: 0px; }
    to { background-position: -3990px; }
}

@-moz-keyframes baluchistan-map {
    from { background-position: 0px; }
    to { background-position: -3990px; }
}

@keyframes baluchistan-map {
    from { background-position: 0px; }
    to { background-position: -3990px; }
}


.kashmir{
left: 557px;
width: 114px;
height: 209px;
position: absolute;
z-index: 8;
top: -1px;
}

.kashmir-map{

	margin: 0 auto;
	background-image:url('../images/kashmir-map.png');
	-webkit-animation: kashmir-map 0.5s steps(21)  ;
    -moz-animation: kashmir-map 0.5s steps(21)  ;
    animation: kashmir-map 0.5s steps(21)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes kashmir-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}

@-moz-keyframes kashmir-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}

@keyframes kashmir-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}

.punjab{
left: 482px;
width: 114px;
height: 315px;
position: absolute;
z-index: 8;
top: 0px;
}

.punjab-map{

	margin: 0 auto;
	background-image:url('../images/punjab-map.png');
	-webkit-animation: punjab-map 0.5s steps(21)  ;
    -moz-animation: punjab-map 0.5s steps(21)  ;
    animation: punjab-map 0.5s steps(21)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes punjab-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}

@-moz-keyframes punjab-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}

@keyframes punjab-map {
    from { background-position: 0px; }
    to { background-position: -2394px; }
}


/*******************/
#seventh-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.toddler{
position: absolute;
bottom: 105px;
left: 146px;
}
.elementary{
position: absolute;
bottom: 100px;
left: 368px;
}
.teenager{
position: absolute;
bottom: 100px;
left: 599px;
}
.moved-back-in{
position: absolute;
bottom: 105px;
left: 707px;
}
.moved-out{
position: absolute;
bottom: 103px;
left: 820px;
}

.btn-minus{
background-image: url('../images/button-minus.png');
width: 29px;
height: 28px;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 0px;
margin: 0px;
box-shadow: none;
border: 0px;
cursor: pointer;
color:transparent;
position: absolute;
bottom: 95px;
}

.btn-plus{
background-image: url('../images/button-plus.png');
width: 29px;
height: 28px;
font-weight: bold;
text-align: center;
vertical-align: middle;
padding: 0px;
margin: 0px;
box-shadow: none;
border: 0px;
cursor: pointer;
color:transparent;
position: absolute;
bottom: 95px;
}

.input-number{
visibility:hidden;
height:1px;
width:1px;
}

.add-toddler-buttons  .btn-minus{
left: 68px;}

.add-toddler-buttons  .btn-plus{
left: 102px;}

.add-elementary-buttons  .btn-minus{
left: 290px;}

.add-elementary-buttons  .btn-plus{
left: 324px;}

.add-teenager-buttons  .btn-minus{
left: 522px;}

.add-teenager-buttons  .btn-plus{
left: 556px;}

/*.add-movedback-buttons  .btn-minus{
left: 662px;}

.add-movedback-buttons  .btn-plus{
left: 708px;}*/

.add-movedout-buttons  .btn-minus{
left: 743px;}

.add-movedout-buttons  .btn-plus{
left: 777px;}

.character_1_4 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 415px; }
.character_1_5 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 235px; }
.character_1_6 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 525px; }
.character_1_1 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 175px; }
.character_1_2 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 640px; }
.character_1_3 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 350px; }
.character_1_7 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 475px; }
.character_1_8 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 290px; }
.character_1_9 { width: 163px; height: 364px; margin: 0 auto;  top: 5px; position: absolute; left: 585px; }

.character_2_1 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 410px; }
.character_2_2 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 290px; }
.character_2_3 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 385px; }
.character_2_4 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 235px; }
.character_2_5 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 585px; }
.character_2_6 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 337px; }
.character_2_7 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 530px; }
.character_2_8 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 175px; }
.character_2_9 { width: 163px; height: 364px; margin: 0 auto;  top: 25px; position: absolute; left: 640px; }

.character_3_3 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 460px; }
.character_3_1 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 290px; }
.character_3_7 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 400px; }
.character_3_4 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 235px; }
.character_3_5 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 585px; }
.character_3_6 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 337px; }
.character_3_2 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 530px; }
.character_3_8 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 175px; }
.character_3_9 { width: 179px; height: 364px; margin: 0 auto;  top: 90px; position: absolute; left: 640px; }

.character_4_1 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 410px; }
.character_4_6 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 290px; }
.character_4_7 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 525px; }
.character_4_4 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 175px; }
.character_4_5 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 655px; }
.character_4_2 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 235px; }
.character_4_3 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 585px; }
.character_4_8 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 350px; }
.character_4_9 { width: 175px; height: 392px; margin: 0 auto;  top: 5px; position: absolute; left: 465px; }

.character_5_5 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 410px; }
.character_5_2 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 260px; }
.character_5_9 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 545px; }
.character_5_4 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 336px; }
.character_5_1 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 488px; }
.character_5_6 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 200px; }
.character_5_7 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 586px; }
.character_5_8 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 138px; }
.character_5_3 { width: 188px; height: 420px; margin: 0 auto;  top: 100px; position: absolute; left: 638px; }

.character_1_in{
    width: 163px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_1.png");
 -webkit-animation: character_1_in 3s  steps(117)  1 ;
    -moz-animation: character_1_in 3s  steps(117)  1 ;
    animation: character_1_in 3s  steps(117)  1 ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_1_in {
    from { background-position: 0px; }
    to { background-position: -19071px; }
}

@-moz-keyframes character_1_in {
    from { background-position: 0px; }
    to { background-position: -19071px; }
}

@keyframes character_1_in {
    from { background-position: 0px; }
    to { background-position: -19071px; }
}

.character_1_out{
    width: 163px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_1.png");
 -webkit-animation: character_1_out 3s  steps(64)  1 ;
    -moz-animation: character_1_out 3s  steps(64)  1 ;
    animation: character_1_out 3s  steps(64)  1 ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_1_out {
    from { background-position: -19234px; }
    to { background-position: -29666px; }
}

@-moz-keyframes character_1_out {
    from { background-position: -19234px; }
    to { background-position: -29666px; }
}

@keyframes character_1_out {
    from { background-position: -19234px; }
    to { background-position: -29666px; }
}

.character_2_in{
    width: 163px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_2.png");
 -webkit-animation: character_2_in 3s  steps(74)  1 ;
    -moz-animation: character_2_in 3s  steps(74)  1 ;
    animation: character_2_in 3s  steps(74)  1 ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_2_in {
    from { background-position: 0px; }
    to { background-position: -12062px; }
}

@-moz-keyframes character_2_in {
     from { background-position: 0px; }
    to { background-position: -12062px; }
}

@keyframes character_2_in {
     from { background-position: 0px; }
    to { background-position: -12062px; }
}

.character_2_out{
    width: 163px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_2.png");
 -webkit-animation: character_2_out 3s  steps(46)  1 ;
    -moz-animation: character_2_out 3s  steps(46)  1 ;
    animation: character_2_out 3s  steps(46)  1 ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_2_out {
    from { background-position: -12225px; }
    to { background-position: -19723px; }
}

@-moz-keyframes character_2_out {
    from { background-position: -12225px; }
    to { background-position: -19723px; }
}

@keyframes character_2_out {
    from { background-position: -12225px; }
    to { background-position: -19723px; }
}

.character_3_in{
    width: 179px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_3.png");
 -webkit-animation: character_3_in 3s  steps(118)  ;
    -moz-animation: character_3_in 3s  steps(118)  ;
    animation: character_3_in 3s  steps(118)  ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_3_in  {
    from { background-position: 0px; }
    to { background-position: -21122px; }
}

@-moz-keyframes character_3_in  {
    from { background-position: 0px; }
    to { background-position: -21122px; }
}

@keyframes character_3_in  {
    from { background-position: 0px; }
    to { background-position: -21122px; }
}

.character_3_out{
    width: 179px;
    height: 364px;
 margin: 0 auto;
 background-image: url("../images/character_3.png");
 -webkit-animation: character_3_out 3s  steps(59)  ;
    -moz-animation: character_3_out 3s  steps(59)  ;
    animation: character_3_out 3s steps(59)  ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_3_out {
    from { background-position: -21301px; }
    to { background-position: -31862px; }
}

@-moz-keyframes character_3_out {
   from { background-position: -21301px; }
    to { background-position: -31862px; }
}

@keyframes character_3_out {
    from { background-position: -21301px; }
    to { background-position: -31862px; }
}


.character_4_in{
    width: 175px;
    height: 392px;
 margin: 0 auto;
 background-image: url("../images/character_4.png");
 -webkit-animation: character_4_in 3s  steps(89)  ;
    -moz-animation: character_4_in 3s  steps(89)  ;
    animation: character_4_in 3s  steps(89)  ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_4_in  {
    from { background-position: 0px; }
    to { background-position: -15575px; }
}

@-moz-keyframes character_4_in  {
    from { background-position: 0px; }
    to { background-position: -15575px; }
}

@keyframes character_4_in  {
    from { background-position: 0px; }
    to { background-position: -15575px; }
}

.character_4_out{
    width: 175px;
    height: 392px;
 margin: 0 auto;
 background-image: url("../images/character_4.png");
 -webkit-animation: character_4_out 5s  steps(58)  ;
    -moz-animation: character_4_out 5s  steps(58)  ;
    animation: character_4_out 5s steps(58)  ;
 -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_4_out {
    from { background-position: -15925px; }
    to { background-position: -26075px; }
}

@-moz-keyframes character_4_out {
   from { background-position: -15925px; }
    to { background-position: -26075px; }
}

@keyframes character_4_out {
    from { background-position: -15925px; }
    to { background-position: -26075px; }
}

.character_5_in{
     width: 250px;
    height: 560px;
 margin: 0 auto;
 background-image: url("../images/character_5.png");
 -webkit-animation: character_5_in 3s  steps(95)  1 ;
    -moz-animation: character_5_in 3s  steps(95)  1 ;
    animation: character_5_in 3s  steps(95)  1 ;
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_5_in  {
    from { background-position: 0px; }
    to { background-position: -23750px; }
}

@-moz-keyframes character_5_in  {
    from { background-position: 0px; }
    to { background-position: -23750px; }
}

@keyframes character_5_in  {
    from { background-position: 0px; }
    to { background-position: -23750px; }
}


.character_5_out{
     width: 250px;
    height: 560px;
 margin: 0 auto;
 background-image: url("../images/character_5.png");
 -webkit-animation: character_5_out 3s  steps(69);
    -moz-animation: character_5_out 3s  steps(69);
    animation: character_5_out 3s  steps(69);
 -webkit-animation-fill-mode: forwards; /*  Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes character_5_out  {
    from { background-position: -24250px; }
    to { background-position: -41500px; }
}

@-moz-keyframes character_5_out  {
    from { background-position: -24250px; }
    to { background-position: -41500px; }
}

@keyframes character_5_out  {
    from { background-position: -24250px; }
    to { background-position: -41500px; }
}
/*******************/
#eighth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.own-house{
bottom: 83px;
position: absolute;
left: 283px;
}

.rent-house{
bottom: 83px;
position: absolute;
left: 465px;
}

.parent-house{
bottom: 83px;
position: absolute;
left: 640px;
}

#checkbox-own{
left: 244px;
}

#checkbox-rent{
right: 525px;
}

#checkbox-parent{
position: absolute;
bottom: 77px;
right: 350px;
cursor: pointer;
}



#house{

   width: 468px;
	height: 398px;
	margin: 0 auto;
	background-image: url("../images/house-complete.png");
	position: absolute;
	left: 250px;
	top: 35px;
}


.build-house{
    width: 468px;
	height: 398px;
	margin: 0 auto;
	background-image: url("../images/house-complete.png");
	-webkit-animation: build-house 3s  steps(89)  1 ;
    -moz-animation: build-house 3s  steps(89)  1 ;
    animation: build-house 3s  steps(89)  1 ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes build-house {
    from { background-position: 0px; }
    to { background-position: -41652px; }
}

@-moz-keyframes build-house {
    from { background-position: 0px; }
    to { background-position: -41652px; }
}

@keyframes build-house {
    from { background-position: 0px; }
    to { background-position: -41652px; }
}



.own-house-anim{
    width: 468px;
	height: 398px;
	margin: 0 auto;
	background-image: url("../images/house-complete.png");
	-webkit-animation: own-house 3s  steps(59)  1 ;
    -moz-animation: own-house 3s  steps(59)  1 ;
    animation: own-house 3s  steps(59)  1 ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes own-house {
    from { background-position: -42120px; }
    to { background-position: -69732px; }
}

@-moz-keyframes own-house {
    from { background-position: -42120px; }
    to { background-position: -69732px; }
}

@keyframes own-house {
    from { background-position: -42120px; }
    to { background-position: -69732px; }
}


.rent-house-anim{

}

.rent-house-anim{
    width: 468px;
	height: 398px;
	margin: 0 auto;
	background-image: url("../images/house-complete.png");
	-webkit-animation: rent-house 5s  steps(90)  1 ;
    -moz-animation: rent-house 5s  steps(90)  1 ;
    animation: rent-house 5s  steps(90)  1 ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes rent-house {
    from { background-position: -70200px; }
    to { background-position: -112320px; }
}

@-moz-keyframes rent-house {
    from { background-position: -70200px; }
    to { background-position: -112320px; }
}

@keyframes rent-house {
    from { background-position: -70200px; }
    to { background-position: -112320px; }
}




/*******************/
#ninth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

#two-vehicle{
bottom: 90px;
position: absolute;
left: 203px;
}

#four-vehicle{
bottom: 90px;
position: absolute;
left: 419px;
}

#no-vehicle{
bottom: 91px;
position: absolute;
left: 628px;

}

.two-vehicle{
bottom: 96px;
position: absolute;
left: 243px;
}

.four-vehicle{
bottom: 96px;
position: absolute;
left: 459px;
}

.no-vehicle{
bottom: 97px;
position: absolute;
left: 667px;
}


#car{
     width: 580px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/car_in_out.png");
	position: absolute;
	left: 290px;
	top: 10px;
	
}

.car_select{
    width: 580px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/car_in_out.png");
	-webkit-animation: car_select 2s  steps(71)  ;
    -moz-animation: car_select 2s  steps(71)  ;
    animation: car_select 2s  steps(71)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes car_select {
    from { background-position: 0px; }
    to { background-position: -41180px; }
}

@-moz-keyframes car_select {
    from { background-position: 0px; }
    to { background-position: -41180px; }
}

@keyframes car_select {
    from { background-position: 0px; }
    to { background-position: -41180px; }
}

.car_out{
    width: 580px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/car_in_out.png");
	-webkit-animation: car_out 2s  steps(74)  ;
    -moz-animation: car_out 2s  steps(74)  ;
    animation: car_out 2s  steps(74)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes car_out {
    from { background-position: -42340px; }
    to { background-position: -85260px; }
}

@-moz-keyframes car_out {
    from { background-position: -42340px; }
    to { background-position: -85260px; }
}

@keyframes car_out {
    from { background-position: -42340px; }
    to { background-position: -85260px; }
}


#bike{
	width: 443px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/bike_in_out.png");
	position: absolute;
	left: 165px;
	
}

.bike_in{
    width: 443px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/bike_in_out.png");
	-webkit-animation: bike_in 2s  steps(71)  ;
    -moz-animation: bike_in 2s  steps(71)  ;
    animation: bike_in 2s  steps(71)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes bike_in {
    from { background-position: 0px; }
    to { background-position: -31453px; }
}

@-moz-keyframes bike_in {
    from { background-position: 0px; }
    to { background-position: -31453px; }
}

@keyframes bike_in {
    from { background-position: 0px; }
    to { background-position: -31453px; }
}

.bike_out{
    width: 443px;
    height: 396px;
	margin: 0 auto;
	background-image: url("../images/bike_in_out.png");
	-webkit-animation: bike_out 2s  steps(70)  ;
    -moz-animation: bike_out 2s  steps(70)  ;
    animation: bike_out 2s  steps(70)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes bike_out {
    from { background-position: -33668px; }
    to { background-position: -64678px; }
}

@-moz-keyframes bike_out {
    from { background-position: -33668px; }
    to { background-position: -64678px; }
}

@keyframes bike_out {
    from { background-position: -33668px; }
    to { background-position: -64678px; }
}

/*******************/
#confirmation-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.confirm_check{
z-index: 1;
position: absolute;
top: 0px;
display: block;
}

.cap_icon{
width: 150px;
position: absolute;
top: 150px;
left: 189px;
}

.ring_icon{
width: 165px;
position: absolute;
top: 140px;
left: 415px;
}

.house_icon{
width: 115px;
margin: 0 auto;
position: absolute;
top: 135px;
left: 640px;
}

.car_icon{
width: 175px;
margin: 0 auto;
position: absolute;
top: 340px;
left: 190px;
}

.retirement_icon{
width: 185px;
margin: 0 auto;
position: absolute;
top: 270px;
left: 401px;
}

.health_icon{
width: 175px;
margin: 0 auto;
position: absolute;
top: 277px;
left: 624px
}




#education_confirm{
top: 235px;
left: 200px;
}

#marriage_confirm{
top: 235px;
left: 417px;
}

#house_confirm{
top: 235px;
left: 636px;
}

#car_confirm{
top: 426px;
left: 226px;
}

#retirement_confirm{
top: 426px;
left: 437px;
}

#health_confirm{
top: 426px;
left: 640px;
}

/*******************/
#tenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.yes{
position: absolute;
bottom: 83px;
left: 339px;
}

.no{
position: absolute;
bottom: 83px;
left: 621px;
}

.halfbaseline{
top: 170px;
position: absolute;
left: 60px;
}

.cap{
width: 174px;
height: 100px;
background-image: url("../images/education.png");
position: absolute;
top: 270px;
left: 200px;
}



.education-yes{
    width: 174px;
    height: 100px;
	margin: 0 auto;
	background-image: url("../images/education.png");
	-webkit-animation: education 5s  steps(73)  ;
    -moz-animation: education 5s  steps(73)  ;
    animation: education 5s  steps(73)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes education {
    from { background-position: 0px; }
    to { background-position: -12702px; }
}

@-moz-keyframes education {
    from { background-position: 0px; }
    to { background-position: -12702px; }
}

@keyframes education {
    from { background-position: 0px; }
    to { background-position: -12702px; }
}


.question{
width: 300px;
font-size: 18px;
font-family: 'FuturaReg', sans-serif;
text-align: left;
margin-bottom: 24px;
}
.num-of-year-for-retirement{margin-top: -10px;}
.education-sponsors{

}



.sub-question{
position: absolute;
left: 460px;
top: 158px;
opacity:0.3;
}

.sub-question select{
    border: none;
width: 70px;
/*height: 25px;*/
overflow: hidden;
background: url(../images/small-arrow.png) no-repeat right;
-webkit-appearance: none;
moz-webkit-appearance: none;
border-bottom: 2px solid rgb(116, 114, 114);
margin-left: 15px;
font-family: "FuturaReg", sans-serif;
font-size: 20px;
}

.ui-select span{
visibility:hidden;
}

.next{
background: url(../images/next.png);
margin-top: 20px;
cursor:pointer;
width:87px;
height:35px;
border:0px;
float:left;
}

.next:hover , .next:disabled{
background: url(../images/next-hover.png);
margin-top: 20px;
cursor:pointer;
width:87px;
height:35px;
}



.back , .back:disabled{
background: url(../images/back-hover.png);
margin-top: 20px;
cursor:pointer;
width:87px;
height:35px;
border:0px;
margin-right: 30px;
float:left;
}

.back:hover {
background: url(../images/back.png);
margin-top: 20px;
cursor:pointer;
width:87px;
height:35px;
border:0px;
}

.education-sponsors-text ,.sponsors-for{
float:left;
margin-top: 4px;
}

.checkbox-image-small{
width: 30px;
/*height: 30px;*/
cursor: pointer;
clear: both;
/*margin-top: -10px;*/
margin-top: -6px;
margin-left: -170px;
margin-bottom: 20px;
/*margin-left: 30px;*/
}

.checkbox-image-small#local,
.checkbox-image-small#international { margin-left: -127px; }

.checkbox-image-small#college,
.checkbox-image-small#graduation { margin-left: -193px; }
 


#education-sponsors-for{display:none;}
#type-of-uni{display:none;}

/*******************/
#eleventh-page{
background-image:url('../images/main-bg.png');
position: relative;
}
.ring{
width: 192px;
height: 101px;
background-image: url("../images/marriage.png");
position: absolute;
top: 280px;
left: 190px;
}

.marriage-yes{
    width: 192px;
    height: 101px;
	margin: 0 auto;
	background-image: url("../images/marriage.png");
	-webkit-animation: marriage 3s  steps(68)  ;
    -moz-animation: marriage 3s  steps(68)  ;
    animation: marriage 3s  steps(68)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes marriage {
    from { background-position: 0px; }
    to { background-position: -13056px; }
}

@-moz-keyframes marriage {
    from { background-position: 0px; }
    to { background-position: -13056px; }
}

@keyframes marriage {
    from { background-position: 0px; }
    to { background-position: -13056px; }
}

/*******************/
#twelve-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.house{
	width: 155px;
    height: 150px;
	margin: 0 auto;
	background-image: url("../images/house.png");
	position: absolute;
	top: 225px;
	left: 210px;
}

.right_bar_house{
position: absolute;
bottom: 280px;
left: 460px;
}

.house-plan-yes{
    width: 155px;
    height: 150px;
	margin: 0 auto;
	background-image: url("../images/house.png");
	-webkit-animation: house 3s  steps(48)  ;
    -moz-animation: house 3s  steps(48)  ;
    animation: house 3s  steps(48)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes house {
    from { background-position: 0px; }
    to { background-position: -7440px; }
}

@-moz-keyframes house {
    from { background-position: 0px; }
    to { background-position: -7440px; }
}

@keyframes house {
    from { background-position: 0px; }
    to { background-position: -7440px; }
}

.slider-wrapper-house{

}

 .slider-wrapper-small .range-bar{
	background-image: url("../images/small-slider.png");
	background-size: 100% auto;
	display: block;
	height: 15px;
	/* margin-left: 20px; */
	position: relative;
	width: 212px;
}

.slider-wrapper-house .range-bar{
	background-image: url("../images/small-slider.png");
	background-size: 100% auto;
	display: block;
	height: 15px;
	/* margin-left: 20px; */
	position: relative;
	width: 212px;
}

.slider-wrapper-house .range-handle , .slider-wrapper-small .range-handle {
background-color: #adadad;
border-radius: 100%;
cursor: move;
height: 15px;
left: 0;
top: -6px;
position: absolute;
width: 15px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 1px solid #919191;
background: #c6c6c6;
visibility: hidden;

}

.slider-wrapper-house .range-quantity  , .slider-wrapper-small  .range-quantity{
background-color: #d70b36;
border-bottom-left-radius: 5px;
display: block;
height: 5px;
border-top-left-radius: 5px;
margin-left: 0px;
}




.small-slider-house , .slider-wrapper-small{
	margin-left: 0px;
    margin-top: -4px;
    width: 293px;
}



/*******************/
#thirteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.small-car{
width: 377px;
height: 257px;
margin: 0 auto;
background-image: url("../images/car_icon.png");
position: absolute;
top: 109px;
left: 65px;
}

.right_bar_car{
position: absolute;
bottom: 280px;
left: 460px;
}




.car-plan-yes{
    width: 377px;
    height: 257px;
	margin: 0 auto;
	background-image: url("../images/car_icon.png");
	-webkit-animation: car 6s  steps(71)  ;
    -moz-animation: car 6s  steps(71)  ;
    animation: car 6s  steps(71)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes car {
    from { background-position: 0px; }
    to { background-position: -26767px; }
}

@-moz-keyframes car {
    from { background-position: 0px; }
    to { background-position: -26767px; }
}

@keyframes car {
    from { background-position: 0px; }
    to { background-position: -26767px; }
}


.slider-wrapper-car .range-bar {
	width: 207px;;
}
/*******************/
#fourteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.retirement{
width: 233px;
height: 257px;
margin: 0 auto;
background-image: url("../images/retirement.png");
position: absolute;
top: 185px;
left: 160px;
}

.right_bar_retirement{
position: absolute;
bottom: 321px;
left: 460px;
}



.retirement-plan-yes{
    width: 233px;
    height: 257px;
	margin: 0 auto;
	background-image: url("../images/retirement.png");
	-webkit-animation: retiremen 3s  steps(46)  ;
    -moz-animation: retiremen 3s  steps(46)  ;
    animation: retiremen 3s  steps(46)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes retiremen {
    from { background-position: 0px; }
    to { background-position: -10718px; }
}

@-moz-keyframes retiremen {
    from { background-position: 0px; }
    to { background-position: -10718px; }
}

@keyframes retiremen {
    from { background-position: 0px; }
    to { background-position: -10718px; }
}



.num-of-year-for-retirement{
left:-7px!important;
}

.slider-wrapper-retirement .range-bar{
width: 265px;
}

.slider-wrapper-retirement .range-quantity{
height: 7px;
}
/*************/

#fifteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.saving{
width: 131px;
height: 158px;
margin: 0 auto;
background-image: url("../images/plain_protection.png");
position: absolute;
top: 204px;
left: 220px;
}

.saving-plan-yes{
    width: 131px;
    height: 158px;
	margin: 0 auto;
	background-image: url("../images/plain_protection.png");
	-webkit-animation: plain_protection 3s  steps(73)  ;
    -moz-animation: plain_protection 3s  steps(73)  ;
    animation: plain_protection 3s  steps(73)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes plain_protection {
    from { background-position: 0px; }
    to { background-position: -9563px; }
}

@-moz-keyframes plain_protection {
    from { background-position: 0px; }
    to { background-position: -9563px; }
}

@keyframes plain_protection {
    from { background-position: 0px; }
    to { background-position: -9563px; }
}

/*************/

#sixteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.health{
width: 247px;
height: 225px;
margin: 0 auto;
background-image: url("../images/health.png");
position: absolute;
top: 200px;
left: 155px;
}

.right_bar_health{
position: absolute;
bottom: 295px;
left: 460px;
}

.health-plan-yes{
    width: 247px;
    height: 225px;
	margin: 0 auto;
	background-image: url("../images/health.png");
	-webkit-animation: health 3s  steps(58)  ;
    -moz-animation: health 3s  steps(58)  ;
    animation: health 3s  steps(58)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes health {
    from { background-position: 0px; }
    to { background-position: -14326px; }
}

@-moz-keyframes health {
    from { background-position: 0px; }
    to { background-position: -14326px; }
}

@keyframes health {
    from { background-position: 0px; }
    to { background-position: -14326px; }
}

.slider-wrapper-health .range-bar{
width: 262px;
}

.slider-wrapper-health .range-quantity{
height: 7px;}
/************************/
#seventeenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.income{
width: 120px;
height: 186px;
margin: 0 auto;
position: absolute;
background-image: url("../images/annual_income.png");
left: 0px;
right: 0px;
bottom: 200px;
}
.right_bar_income{
	position: absolute;
	bottom: 155px;
	left: 283px;
}
.annual_income{
    width: 120px;
    height: 186px;
	margin: 0 auto;
	background-image: url("../images/annual_income.png");
	-webkit-animation: annual_income 3s  steps(75)  ;
    -moz-animation: annual_income 3s  steps(75)  ;
    animation: annual_income 3s  steps(75)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes annual_income {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

@-moz-keyframes annual_income {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

@keyframes annual_income {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

.slider-wrapper-big{
	position: absolute;
	bottom: 120px;
	left: 0px;
	right: 0px;
	margin: auto;
	
}

.slider-wrapper-big .range-bar{
background-image: url("../images/big-slider.png");
background-size: 100% auto;
display: block;
height: 15px;
/* margin-left: 20px; */
position: relative;
width: 300px;
position: absolute;
margin: auto;
left: 0px;
right: 0px;
}

.slider-wrapper-big .range-handle {
background-color: #adadad;
border-radius: 100%;
cursor: move;
height: 15px;
left: 0;
top: -6px;
position: absolute;
width: 15px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 1px solid #919191;
background: #c6c6c6;


}

.slider-wrapper-big  .range-quantity{
background-color: #d70b36;
border-bottom-left-radius: 5px;
display: block;
height: 7px;
border-top-left-radius: 5px;
margin-left: 0px;
}

.slider-wrapper-income .range-bar{
width: 416px!important;
}

.slider-wrapper-income .range-quantity{
height: 9px!important;
}

/************************/
#eighteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.right_bar_assets{
	position: absolute;
	bottom: 155px;
	left: 283px;
}

.assets{
position: absolute;
left: 0px;
right: 0px;
margin: auto;
bottom: 200px;
width: 245px;
height: 201px;
margin: 0 auto;
background-image: url("../images/savings_and_assets.png");
}
.savings_and_assets{
    width: 245px;
    height: 201px;
	margin: 0 auto;
	background-image: url("../images/savings_and_assets.png");
	-webkit-animation: savings_and_assets 3s  steps(57)  ;
    -moz-animation: savings_and_assets 3s  steps(57)  ;
    animation: savings_and_assets 3s  steps(57)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes savings_and_assets {
    from { background-position: 0px; }
    to { background-position: -13965px; }
}

@-moz-keyframes savings_and_assets {
    from { background-position: 0px; }
    to { background-position: -13965px; }
}

@keyframes savings_and_assets {
    from { background-position: 0px; }
    to { background-position: -13965px; }
}
.slider-wrapper-assets .range-bar{
width: 417px!important;
}

.slider-wrapper-assets .range-quantity{
height: 9px!important;
}
/************************/
#nineteenth-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.expense{
position: absolute;
top: 47px;
left: 0px;
right: 0px;
width: 237px;
height: 338px;
margin: 0 auto;
background-image: url("../images/expense.png");
}

.right_bar_expense{
	position: absolute;
	bottom: 155px;
	left: 329px;
}

.annual_expense{
    width: 237px;
    height: 338px;
	margin: 0 auto;
	background-image: url("../images/expense.png");
	-webkit-animation: annual_expense 4s  steps(99)  ;
    -moz-animation: annual_expense 4s  steps(99)  ;
    animation: annual_expense 4s  steps(99)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes annual_expense {
    from { background-position: 0px; }
    to { background-position: -23463px; }
}

@-moz-keyframes annual_expense {
    from { background-position: 0px; }
    to { background-position: -23463px; }
}

@keyframes annual_expense {
    from { background-position: 0px; }
    to { background-position: -23463px; }
}

#running-expense , #dependent-expense{
opacity:1;
}

#running-expense .range-handle ,#dependent-expense .range-handle{
visibility:visible;
}

.slider-wrapper-running-expense .range-bar{
width: 316px!important;
}

/************************/
#nineteenth-b-page{
background-image:url('../images/main-bg.png');
position: relative;
}
#js-display-callback-liabilities{
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: -53px;
}

#js-display-callback-car { bottom: -85px; }

.right_bar_liabilities{
	position: absolute;
	bottom: 155px;
	left: 340px
}

.liabilities{
position: absolute;
top: 47px;
left: 0px;
right: 0px;
width: 180px;
height: 398px;
margin: 0 auto;
background-image: url("../images/liabilities.png");
}


.liabilities_yes{
    width: 180px;
    height: 398px;
	margin: 0 auto;
	background-image: url("../images/liabilities.png");
	-webkit-animation: liabilities 3s  steps(50)  ;
    -moz-animation: liabilities 3s  steps(50)  ;
    animation: liabilities 3s  steps(50)  ;
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@-webkit-keyframes liabilities {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

@-moz-keyframes liabilities {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

@keyframes liabilities {
    from { background-position: 0px; }
    to { background-position: -9000px; }
}

.slider-wrapper-liabilities .range-bar{
width: 417px!important;
}

.slider-wrapper-liabilities .range-quantity{
height: 9px!important;
}
/************************************/

.twenty-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.result_screen_text{
position: absolute;
right: 190px;
top: 150px;
z-index: 1;
}

.evaluation{
font-size: 18px;
color: #737578;
/*font-weight: bold;*/
font-family: 'FuturaReg', sans-serif;
width: 600px;
left: 440px;
top: 60px;
position: absolute;
text-align: left;
}

.evaluationheading {
font-size: 24px;
color: #2d3338;
font-weight: bold;
font-family: 'FuturaReg';
width: 600px;
left: 317px;
top: 20px;
position: absolute;
text-align: center;
}

.result_female ,.result_male {
position: absolute;
left: 185px;
top: 150px;
z-index: 6;
}

.base {
top: 300px;
position: absolute;
left: 100px;
}

.totalneed {
font-size: 20px;
color: #303030;
font-weight: bold;
font-family: 'Conv_faizan';
width: 600px;
left: 300px;
top: 178px;
position: absolute;
text-align: center;
}

.finalamount {
font-size: 20px;
color: #cb0935;
/*font-weight: bold;*/
font-family: 'FuturaReg', sans-serif;
width: 200px;
left: 407px;
top: 163px;
position: absolute;
text-align: center;
z-index: 5;
}

.premiumamount {
font-size: 20px;
color: #cb0935;
/*font-weight: bold;*/
font-family: 'FuturaReg', sans-serif;
width: 200px;
left: 605px;
top: 162px;
position: absolute;
text-align: center;
z-index: 5;
}


.backboard{
background-image: url('../images/backboard.png');
width: 365px;
height: 136px;
position: absolute;
top: 155px;
right: 190px;
background-repeat: no-repeat;
}

/*******************/
.twentyone-page{
background-image:url('../images/main-bg.png');
position: relative;
}

#twentyone-page p {
margin: 1px 0px 0px 15px;
float: left;
font-size: 14px;
color: #3F3F3F;
font-family: "FuturaReg", sans-serif;
font-weight: bold;
text-transform: capitalize;
clear: both;
}
#twentyone-page span{
color: #4D4C4C;
font-size: 15px;
font-weight: 500;
}

.disposable_income_heading {  }

.basic-info{
width: 33.33%;
overflow: hidden;
float: left;
margin-top: 40px;
}

.future-planning{
width: 485px;
overflow: hidden;
float: right;
}

#twentyone-page .bold{
font-size: 16px;
color: #DB1111;
margin-top: 13px;
}


.go-to-viewplans-page{
position: absolute;
bottom: 203px;
right: 260px;
cursor: pointer;
}

#selected_plan_img{
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 145px;
}

#back-to-result-page{
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 85px;
background: url(../images/back.png);
-webkit-animation: plan_back 1s infinite;
-moz-animation: plan_back 1s infinite; 
animation: plan_back 1s  ;
}

@-webkit-keyframes plan_back {   
    0%{ background:url('../images/back-hover.png');}
    50%  {background:url('../images/back.png');}
    100%   {background:url('../images/back-hover.png');}
}

@-moz-keyframes plan_back {
    0%{ background:url('../images/back-hover.png');}
    50%  {background:url('../images/back.png');}
    100%   {background:url('../images/back-hover.png');}
}

@keyframes plan_back {
    0%{ background:url('../images/back-hover.png');}
    50%  {background:url('../images/back.png');}
    100%   {background:url('../images/back-hover.png');}
}

#back-to-result-page:hover{
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 85px;
background: url(../images/back-hover.png);
}

/****************/

#twentyone-page{
padding-top: 10px;
}

/*************************************/
.display-box { 
 bottom: -55px;
 position: absolute;
  color:#ce153f;
 font-size: 24px;
 font-family: 'FuturaReg', sans-serif;
 text-align: left;
 width: 340px;
}

#js-display-callback-health { bottom: -75px; }

.display-box:before{
 content: 'Your Selected Amount in: Rs ';
color: #383d42;
font-size: 16px;
}

.slider-wrapper-age .display-box:before{
 content: 'Your Selected age is: ';
color: #383d42;
font-size: 16px;
}

#js-display-callback-retirement {
bottom: 95px !important;
left: 0px;}

#js-display-callback-income { left: 322px; top: 27px; width: 332px; } 
#js-display-callback-assets { left: 317px; top: 27px; width: 335px; } 
#js-display-callback-running-expense { left: 337px; top: 27px; width: 300px; }

.slider-wrapper-big .range-bar { 
 background-image: url("../images/big-slider.png");
 background-size: 100% auto;
 display: block;
 height: 15px;
 position: relative;
 width: 300px;
 position: absolute;
 margin: auto;
 left: 0px;
 right: 0px;
 top: -30px;
}
/***************************/
.plans-page{
background-image:url('../images/main-bg.png');
position: relative;
}

.signature{
position: absolute;
bottom: 20px;
left: 16px;
right: 0;
}

.sale-sign{ 
position: absolute;
bottom: 100px;
left: 14px;
}

.sale-name{ 
position: absolute;
bottom: 65px;
left: 14px;
}

.sale-code{ 
position: absolute;
bottom: 30px;
left: 14px;
}

.app-sign{ 
position: absolute;
bottom: 100px;
right: 5px;
}

.imp-note{
position: absolute;
bottom: 30px;
right: 22px;
width: 285px;
color: red!important;
font-family: "FuturaReg",sans-serif;
font-size: 13px!important;
}