@import 'https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700';

body
	{margin: 0; padding: 0; font: 13px 'Open Sans', sans-serif; background:#efefef;}
.clearfix:after 
	{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#interactive
	{background:#efefef; width:100%; max-width:875px; margin:0 auto;}
.header
	{display:block; width:100%; height:48px; font-size:30px;  background:#333; padding-top:7px;}
.header span
	{display:block; width:95%; margin:0 auto; color:#fff;} 

.main
	{width:95%; margin:31px auto 0; }
.values .value, .levers
	{position:relative; width:29.5%; float:left; margin-right:3%; font:700 16px 'Open Sans Condensed'; text-transform:uppercase; 
	 color:#3677a2; border-bottom:4px solid #3677a2;}
.values .invest.value, .levers
	{margin-right:5.5%; color:#5c9c12; border-color:#5c9c12;}
.values .total.value 
	{width:28%; margin: 0 30px 0 0; float:right; color:#f28f3b; border-color:#f28f3b;}
.values .value span
	{display:block; margin:2px 0 0 4%; font:normal 44px 'Open Sans', sans-serif;}
.values .value p
	{margin:0 0 0 5%;}
.values .total.value p
	{margin:0 0 0 6%;}
.values .value p br
	{display:none;}
.values .age
	{position:absolute; bottom:-37px; left:5%; right:0; font:normal 14px 'Open Sans', sans-serif; text-transform:none; white-space:nowrap;}	
.values .life.age	
	{text-align:right; top:100%; right: 0; height:200px; padding:17px 7% 0 0; left:0; border-right:1px solid #f7941d; }
.values .age span
	{display:inline; font-size:15px; margin:0;}
.footnote
	{position:absolute; top:-50px; width:90%; right:3%; padding:2% 3%; color:#333; text-transform:none; border:1px solid #f7941d; font:normal 13px 'Open Sans', sans-serif;
	 background:#fff; opacity:0; transition:opacity 0.3s ease-in; -webkit-transition:opacity 0.3s ease-in; -moz-transition:opacity 0.3s ease-in;}
.footnote.on
	{opacity:1;}
.levers
	{width:29.5%; padding-bottom:29px; background:#fff; border:none}
.tab
	{display:none}
.question
	{position:relative; margin-top:29px;}
.question.one
	{margin-top:0}
.question.one p
	{color:#333; text-transform:none; margin:0 0 0 12px; padding:15px 0 0 0; font:12px 'Open Sans', sans-serif;}
.question h3
	{font-size:16px; margin:12px;}
.question h3.alt
	{margin-bottom:0; font-size:15px;}	
.question .answer
	{display:block; width:32%; padding-top:59px; margin-right:1%; float:left; background:rgba(0,0,0,0.1); font:normal 14px 'Open Sans', sans-serif; color:#000; 
	 text-transform:none; text-align:center; cursor:pointer}
.question .answer.male
	{background:url(icon_male.png) no-repeat center 3px;}
.question .answer.female
	{background:url(icon_female.png) no-repeat center 3px;}
.question .answer.joint
	{background:url(icon_joint.png) no-repeat center 3px;}
.question .answer.selected
	{cursor:default}
.question .answer.selected.male
	{background:url(icon_male_on.png) no-repeat center 3px;}
.question .answer.selected.female
	{background:url(icon_female_on.png) no-repeat center 3px;}
.question .answer.selected.joint
	{background:url(icon_joint_on.png) no-repeat center 3px;}

.question .slider	
	{position:relative; width:89%; height:51px; margin:0 auto;}
.levers.alt .question .slider
	{top:2em; left:110px; width:63%; 
	 transition:opacity 0.4s ease-in; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in}
.question .slider .bg	
	{position:absolute; margin-top:16px; left:0; width:94%; height:14px; background:#ccc; border:none;cursor:pointer;}
.levers.alt .question .slider .bg
	{width:93%}
.levers.alt .question .slider.pct .bg
	{margin-top:30px}
.question .slider .bg .bar
	{position:absolute; left:0; top:0; width:0;height:14px; background:#82c342;
	 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px}	
.question .slider .bg .tick
	{position:absolute; top:0; height:14px; margin-left:0; font:300 15px 'Open Sans Condensed'; color:#999; border-left:1px solid #fff;}
.question .slider .bg .tick.first, .question .slider .bg .tick.last
	{border:none}
.question .slider.life .bg .tick
	{top:0; width:17%; height:14px; margin-left:0; text-align:center; border:none}
.question .slider.life .bg .tick.first
	{ width:33%; border-right:1px solid #fff;}
.question .slider.life .bg .tick.last
	{width:33%; border-left:1px solid #fff;}
.question .slider.life .bg .tick.selected
	{background:#82c342}
.question .slider .bg .tick span
	{display:block; margin:19px 0 0 -7px}
.question .slider .bg .tick.hide span
	{opacity:0;}
.question .slider.life .bg .tick span
	{margin-left:-97%}	
.question .slider .bg .tick.first span
	{margin-left:2px}
.question .slider.life .bg .tick.last span
	{margin-left:5px}	
.question .slider .bg .marker
	{position:absolute; bottom:-13px; left:0; width:30px; height:30px; margin:0 0 5px -13px; padding:0; cursor:url(openhand.cur), move; z-index:2;
	 background:#fff; border:none; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;
	 -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	 transition:margin 0.3s ease-in-out; -webkit-transition:margin 0.3s ease-in-out;; -moz-transition:margin 0.3s ease-in-out;}
.question .slider.life .bg .marker.t2
	{margin-left:-25%}
.question .slider.life .bg .marker.t0
	{margin-left:6%}
.question .slider .bg .marker.grabbing {cursor:url(closedhand.cur), move;}
.question .slider .bg .marker .lbl
	{display:none; position:absolute; bottom:-22px; width: 100%; text-align:center; white-space:nowrap; height: 20px; font-size:19px; font-weight:bold; 
	 color:#408800; border:none;}
.question .slider .bg .marker.grabbing .lbl
	{display:block}
.question .slider .bg .marker span
	{display:block; margin:20% 0 0; font-size:14px; font-weight:bold; text-align:center; color:#5c9c12}

.graph
	{position:relative; float:right; width:60%; height: 70%; margin-right:30px;margin-top: 100px;}
.graph .tick
	{float:left; width:10.2%; margin-right:6.8%; padding-top:220px;  font:300 14px 'Open Sans Condensed'; color:#0d0d0d;
	 background:url(bg_graph_tick.png) no-repeat top right;}
.graph .tick.last
	{margin-right:0;}
.graphlabel
	{margin-left: 20%;font-size: 20px;}
.graph .bar
	{position:absolute; left:0; right:0; bottom:102px; height:86px; overflow:hidden;
	 transition:height 0.3s ease-in-out; -webkit-transition:height 0.3s ease-in-out; -moz-transition:height 0.3s ease-in-out;}	
.graph .bar-line
	{position:relative; float:right; min-width:5%; height:70%; top:-33%; border-bottom:1px solid #f7941d; border-right:1px solid #f7941d;
	 transition: width 0.7s 0s ease-in-out}
.graph .bar-line .cover
	{position:absolute; height:100%; top:100%; right:-1px; margin-top:1px; border-right:1px solid #efefef;}
.graph .bar .block
	{position:relative; float:right; width:6.3%; height:100%; left:0%; margin-right:-2.9%; z-index:2; opacity:1;
	 transition:all 0.3s 0s linear, opacity 0.3s 0s ease-in;}
.graph .bar .block.hide
	{left:3.75%; opacity:0;}
.graph .bar .block.ease-in
	{transition-timing-function: ease-in;}
.graph .bar .block.ease-out
	{transition-timing-function: ease-out;}
.graph .bar .block .top
	{position:absolute; top:0; width:55%; height:16px; left:7px;background: #3479a4; border:1px solid #fff;
	 transform: skewX(-38deg);}
.graph .bar .block .side
	{position:absolute; width:54%; top:18px; left:0; bottom:0; border-left:1px solid #fff; border-right:1px solid #fff; background:#3479a4;}
.graph .bar .cap
	{position:relative; float:right; height:100%; width:15px;  z-index:1;}
.graph .bar .cap .lid
	{position:absolute; width:100%; height:100%; left:0; bottom:8px; background:#f7941d; transform:skewY(-52deg);}
.footer
	{position:relative; top:32px; width:94%; clear:both; margin:0 auto; padding:0 15px 20px; font-size:11px; color:#999;
	 border-top:1px solid #999; line-height:1.3;}


@media screen and (max-width: 900px)  {
.header
	{font-size:22px;}
.values .value, .levers
	{font-size:14px;}
.values .value span
	{font-size:34px;}
.values .age, .values .age span
	{font-size:14px;}
.values .life.age
	{white-space:normal;}
.values .total.value, .graph
	{margin-right:20px;}
.question .answer
	{font-size:12px;}
.question h3.alt
	{font-size:11px;}
}

@media screen and (max-width: 600px)  {
.header
	{font-size:18px;}
.values .value span
	{font-size:30px;}
.values .age
	{bottom:auto; top:80px;}
.values .life.age
	{padding-top:10px;}
.values .age, .values .age span
	{font-size:12px;}
.values .value, .levers, .footnote
	{font-size:12px;}
.levers
	{position:fixed; left:-50%; width:50%; z-index:10;
	 transition:left 0.3s ease-in-out, width 0.3s ease-in-out; -webkit-transition:left 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition:left 0.3s ease-in-out, width 0.3s ease-in-out;}
.levers.show
	{left:0;}
.levers .tab
	{display:block; position:absolute; top:0px; right:-55px; width:55px; height:55px; background:url(bg_side_tab.png) no-repeat top left; cursor:pointer;
	 transition:background 0s 0.3s linear;}
.levers.show .tab
	{background:url(bg_side_tab_on.png) no-repeat top left}
.values .invest.value, .levers
	{margin-right:3.5%}
.values .total.value
	{}
.values .value p br
	{display:block;}
.graph
	{width:94%; margin-left:2.5%}
		
}

@media screen and (max-width: 500px)  {	
.header
	{height:60px;}	
.values .value, .levers
	{font-size:12px;}
.values .life.age
	{height:150px;}
.values .value span
	{font-size:23px;}
.values .age, .values .age span
	{font-size:12px;}
.graph
	{margin-top:25px;}
.footnote
	{top:auto; bottom:25px; font-size:10px;}
}

@media screen and (max-width: 500px)  {	
.levers
	{width:80%; left:-80%}
}

@media screen and (max-width: 350px)  {
.values .value, .levers
	{font-size:11px;}
.values .value span
	{font-size:17px;}
.values .age, .values .age span
	{font-size:12px;}
.values .age
	{top:65px;}
.values .total.value, .graph
	{margin-right:5px;}
.graph
	{margin-top:75px;}
.header
	{font-size:16px;}
}