@font-face {
  font-family: NunitoLight;
  src: url("Nunito-Light.ttf") format("truetype");
}
@font-face {
  font-family: NunitoRegular;
  src: url("Nunito-Regular.ttf") format("truetype");
}
body 			{margin:0; padding:0; font:16px NunitoLight, Calibri, sans-serif; letter-spacing:-0.01em}
h4				{font-size:14px}
#interactive	{position:relative; display:block; width:700px; height:420px; border:1px solid #6eb342; overflow:hidden;
				  -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none;  user-select: none;}
acc-3d			{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0); transform:translate3d(0,0,0);}				  

.header			{position:relative; top:0; left:0; width:100%; height:36px; z-index:20; background:#408800;}
.header .logo	{display:block; float:left; width:124px; height:36px; background:url(logo.png) center center no-repeat; margin:0 0 0 20px;}
.header .menu	{display:block; float:right; margin:0; }
.header .menu a	{border-left:1px solid #5c9637; display:block; float:right; min-width:50px; padding:9px 7px 9px; text-decoration:none; color:#fff; 
				font:bold 13px Helvetica, Arial, sans-serif}

.main			{position:relative; display:block; width:700px; height:384px; margin:0 0 0 0; bbackground:url(ssResult.jpg) 0 -36px no-repeat;  overflow:hidden}

.page, .result	{position:absolute; width:100%; height:100%; display:none; margin-left:18px; background:#fff}
.landing		{position:absolute; top:0; left:0; width:682px; height:100%;}
.on		{display:block !important}

.intro			{display:block; margin:50px 0 23px 0; width:370px;}
h2		{font-size:48px; font-weight:normal; letter-spacing:-0.03em; line-height:1.2em; margin:0; padding:26px 0 0 0; color:#868686;}
h3		{font-size:24px; color:#6eb342; font-weight:normal; text-transform:uppercase; letter-spacing:0em; line-height:1.35em; margin:0; padding: 0;}
h3 span	{display:block; text-align:right;}
h3 span.block {display:block; color:#868686; font-size:30px; letter-spacing:-0.03em; text-align:left; padding:5px 0 0 0}
h4 		{color:#666; font-size:16px; letter-spacing:-0.01em; margin:10px 0 12px 0; padding:0;  }
p		{margin:10px 0 17px 0; padding:0; color:#333; line-height:1.3em}

.road			{position:absolute; bottom:-1px; right:0; width:272px; height:181px; background:url(bg_road.png) 0 0 no-repeat; z-index:4; filter:inherit}
.tree0			{position:absolute; bottom:194px; right:-1px; width:76px; height:131px; background:url(bg_tree0.png) 0 0 no-repeat; z-index:1;; filter:inherit}
.tree1			{position:absolute; bottom:190px; right:-1px; width:196px; height:184px; background:url(bg_tree1.png) 0 0 no-repeat; z-index:2;; filter:inherit}
.tree2			{position:absolute; bottom:152px; right:57px; width:312px; height:232px; background:url(bg_tree2.png) 0 0 no-repeat; z-index:3;; filter:inherit}
.couple			{position:absolute; bottom:110px; right:92px; width:131px; height:173px; background:url(gfx_couple.png) 0 0 no-repeat; z-index:10; filter:inherit}

.b-footer		{position:absolute; bottom:20px; width:100%; }
.btn-next		{display:block; width:136px; height:39px; margin:0 auto; text-align:center; font:17px NunitoRegular, sans-serif; padding:8px 0 0 0; cursor:pointer;
				 background:url(btn_blue.png) top center no-repeat; text-transform:uppercase; color:#fff;text-shadow: -1px 0 1px rgba(0,0,0,0.7); clear:left;filter:inherit}
.btn-next.disabled {background:url(btn_gray.png) top center no-repeat; cursor:default}

.breadcrumb		{position:absolute; width:640px; height:10px; top: 23px; left:33px; background:#d4d4d4; font:15px NunitoRoman, sans-serif; color:#cacaca; display:none; z-index:20}
.breadcrumb .num{position:absolute; top:-5px; left: -15px;}
.breadcrumb .total{position:absolute; top:-5px; right: -15px;}
.breadcrumb .progress {position:absolute; width:1%; height:10px; background:#83c25d url(bg_breadcrumb_progress.gif) top left repeat-x;}

.qbox			{display:block; float: left; width:320px; height:180px; margin:0 0 15px 20px; border:1px solid #6eb342;filter:inherit}
.qbox.first		{margin-left:0}
.qbox h3		{margin:7px 0 0 12px; letter-spacing:-0.03em; line-height:1.4em; color:#6eb342;}
sup	{font-size: 14px; line-height:0.8em}

.answer			{position:relative; display:block; clear:left; margin:0 0 8px 25px; padding:3px 0 0 30px; font-size:18px; color:#868686; 
				 letter-spacing:-0.01em; line-height:1.2em; cursor:pointer;filter:inherit}
.radio			{position:absolute; left:0; top:0; width:24px; height:24px; background:url(bg_radio.png) center center no-repeat; margin:-0 8px 0 0;filter:inherit}
.answer.selected, .answer:hover{color:#000}
.answer.selected .radio	{background:url(bg_radio_on.png) center center no-repeat;}

.ccols2			{-moz-column-count:2; -webkit-column-count:2; column-count:2; column-gap:0; -webkit-column-gap:0; -moz-column-gap:0; width:350px; padding:0; 
				 display:block; margin:0 0 16px 0;}
.cols2 .answer 	{margin:0 0 5px 25px; padding:3px 0 0 30px}

.col			{display:block; float:left; width:35%; filter:inherit}
.col:first-child{width:25%}
.question		{padding:63px 0 0 0; }
.question h3	{width: 324px; font-size:18px; font-weight:normal; text-transform:none; color:#868686; margin:0 0 25px 10px; padding:0; letter-spacing:-0.02em;}

.gfx			{position:absolute; top:86px; right:44px; width:217px;}
.gfx .q			{position:absolute; top:0; left:0; width:217px; height:222px;filter:inherit}
.gfx.q1 .q		{background:url(gfx_q1.png) 0 0 no-repeat}
.gfx.q2 .q		{background:url(gfx_q2.png) center 25px no-repeat}
.gfx.q3 .q		{background:url(gfx_q3.png) 0 0 no-repeat}
.gfx.q4 .q		{background:url(gfx_q4.png) 0 0 no-repeat}
.gfx.q5 .q		{background:url(gfx_q5.png) 0 0 no-repeat}
.gfx.q6 .q		{background:url(gfx_q6.png) 0 0 no-repeat}
.gfx.q7 .q		{background:url(gfx_q7.png) 0 0 no-repeat}
.gfx.q8 .q		{background:url(gfx_q8.png) center 0 no-repeat}

/*
.gfx .shadow	{position:absolute; top:182px; left:18px; width:154px; height:32px; background:url(gfx_shadow.png) 0 0 no-repeat; background-size:100%;filter:inherit}
.gfx.q4 .shadow	{top:188px; left:77px; width:120px; height:29px;}
.gfx.q5 .shadow	{top:178px; left:12px; width:170px; height:11px; background:url(gfx_shadow_wide.png) 0 0 no-repeat;}
.gfx.q6 .shadow	{top:188px; left:30px; width:135px; height:32px;}
.gfx.q7 .shadow, .gfx.q8 .shadow	{top:190px; left:12px; width:165px; height:27px; background:url(gfx_shadow.png) 0 0 no-repeat; background-size:100% 100%;}
*/
.graph			{position:absolute; top:55px; right:20px; display:none; z-index:5; border:1px solid blue}
.graph .callout	{position:absolute; top:14px; font:bold 12px NunitoRoman, sans-serif; margin:0 auto 0; width:149px; background:#6cb445; border:1px solid #6cb445;
				 z-index:10; display:none}
.graph .callout p	
				{padding:5px 8px 5px 5px; margin:0; color:#fff;}
.graph .callout span
				{display:block; font:bold 26px NunitoRoman, sans-serif; float:left; margin:0 10px 0 0;}

.graph .lbl 	{position:absolute; top:0; left:0; text-align:center; width:75px; height:20px; font:bold 14px NunitoRoman, sans-serif; color:#6a6464; z-index:}
.graph .overlay	{position:absolute; top:20px; right:42px; z-index:5; border:1px solid #999;}

.graph .barchart	
				{position:absolute; top:20px; right:42px; border:1px solid #999;z-index:3}
.graph .v-lbl
				{position:absolute; right:0; width:38px;}
.graph .v-lbl span
				{display:block; font-size:12px; color:#99; height:10.2%}
.graph .bars
				{position:absolute; right:42px;z-index:3}
.graph .bars .lbl
				{position:relative; display:block; float:left;height:20px; padding:3px 0 0 0; text-align:center; font:10px NunitoRegular, sans-serif; line-height:1em; color:#6a6464;}
.graph .bars .lbl .bar
				{position:absolute; width:60%; height:100px; top:-99px; background:#999; margin: 0 0 0 20%;}	
.graph .bars .lbl .bar .value-lbl
				{position:absolute; width:130%; height:15px; top:-15px; left:-15%; text-align:center; font:12px NunitoRegular, sans-serif; color:#333}				
.graph .bars .lbl .bar .selected
				{background:#6cb445 url(bg_bar_data.png) top left repeat; height:100%; display:none}
				
.underlay		{position:absolute; top:-10px; right:42px; z-index:1;}
.on-track		{position:absolute; right: 0; border-left:1px solid #6cb445; background: #f0f7ec; width:37%; height:100%; font-size:12px; font-weight:bold}
.on-track .save-more
				{position:absolute; left:-100%; min-width:50px; padding:0 0 0 10px; text-align:right; background:url(bg_arrow_prev.png) top left no-repeat; }
.on-track span	{padding:0 10px 0 7px; background:url(bg_arrow_next.png) top right no-repeat; }				

.pct-work		{position:absolute; bottom:0; width:100%; height:11%; border-top:1px solid #6cb445; background: #f0f7ec;}
.pct-work .pct-lbl	
				{position:absolute; right:10px; top:-100px; height:100px; width:100px; padding-right:3px; border-right:1px solid #333; font:12px NunitoLight,sans-serif; text-align:right}
.ideal-age		{position:absolute; right: 0; bottom:0; border-left:1px solid #333;  width:15%; height:45%; }
.ideal-age .ideal-lbl	
				{position: absolute; top:-30px; left:-45px; width:90px; height:30px; font:12px NunitoLight,sans-serif;}
.graph .bars .lbl .bar.ideal		{background:#666;}

.graph .piechart	{position:absolute; top:75px; left:44px; width:190px; height:190px; z-index:1;}
.graph .piechart span {border: 2px solid #fff}
.s0		{color:#e7e7e8;}
.s1		{color:#d1d2d4;}
.s2		{color:#c2c3c4;}
.s3		{color:#bcbdc0;}
.s4		{color:#a7a9ac;}
.s5		{color:#939598;}
.s6		{color:#818285;}
.s7		{color:#6d6e71;}
.s8		{color:#58585a;}
.s9		{color:#404041;}
.s10		{color:#383839}

.blurb			{position:absolute; top:111px; left:10px; border:1px solid #6eb342;  display:none; }
.blurb p		{margin:15px}
.blurb strong	{color:#6cb445}
.blurb sup, .disclosure sup
				{font-size:10px;}
.off			{display:none !important}

.result			{position:absolute; width:100%; height:100%; background:#fff; z-index:10}
.result h2		{margin-bottom:24px;}
.result p, .result li
				{font-size:16px; margin-left:2px; width:450px; letter-spacing:-0.05em; color:#333}
.result li		{list-style:outside url(result_arrow.png); margin:17px 0 0 -7px}		
.result	a		{color:#6eb342; font-size:16px; font-weight:bold}	
.result .figure	{position:absolute; bottom:-1px; right:-80px; border:1px solid red}
.result strong	{color:#6eb342;}
.wip			{display:none}
.wip p			{font-size:18px; padding-top:30px; width:400px}

.disclosure 	{position:absolute; top:586px; width:100%; height:384px; font-size:12px; background:#fff; z-index:20; overflow:auto;
				font-family:Arial, sans-serif;}
.disclosure h3	{font-size:24px; font-weight:normal; margin-left:18px;  margin-top:20px; text-transform:none; color:#333}
.disclosure a	{color:#333}
.disclosure p, .disclosure li	{margin:0 10px 10px 18px}

@media screen and (min-device-width: 320px) {
h3 span.block {letter-spacing:-0.05em; }

}