@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.eot);src:local("Open Sans Light"),local("OpenSans-Light"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.eot?#iefix) format("embedded-opentype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.woff2) format("woff2"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.woff) format("woff"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.ttf) format("truetype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300.svg#OpenSans) format("svg")}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.eot);src:local("Open Sans Light Italic"),local("OpenSansLight-Italic"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.eot?#iefix) format("embedded-opentype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.woff2) format("woff2"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.woff) format("woff"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.ttf) format("truetype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-300italic.svg#OpenSans) format("svg")}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.eot);src:local("Open Sans"),local("OpenSans"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.eot?#iefix) format("embedded-opentype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.woff2) format("woff2"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.woff) format("woff"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.ttf) format("truetype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-regular.svg#OpenSans) format("svg")}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;src:url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.eot);src:local("Open Sans Semibold"),local("OpenSans-Semibold"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.eot?#iefix) format("embedded-opentype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.woff2) format("woff2"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.woff) format("woff"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.ttf) format("truetype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600.svg#OpenSans) format("svg")}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;src:url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.eot);src:local("Open Sans Semibold Italic"),local("OpenSans-SemiboldItalic"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.eot?#iefix) format("embedded-opentype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.woff2) format("woff2"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.woff) format("woff"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.ttf) format("truetype"),url(https://communications.fidelity.com/pi/calculators/housing/assets/fonts/open-sans-v13-latin-600italic.svg#OpenSans) format("svg")}
body
	{margin: 0; padding: 0; font: 13px Helvetica, Gotham, "Helvetica Neue", Arial, sans-serif;}
h3	{margin:8px 0 5px 12px; font-size:1.08em; font-weight:normal}
.clearfix:after 
	{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#interactive
	{bbackground:url(ss2.jpg) no-repeat top left; width:100%; max-width:1200px; margin:0 auto; overflow:hidden}
.header
	{display:block; position:relative; width:100%; height:50px; border-bottom:2px solid #fff; background:#408800; z-index:100}
.header .logo 
	{display: block; float: left; width: 124px;	height: 36px; margin: 3px 0 0 28px;
	 background: url(logo.png) center center no-repeat;}
.header .mobile-nav 
	{display: block; margin: 0;}
.btn-disclose	
	{border-left: 1px solid #5c9637; display: block; float: right; min-width: 50px; padding: 18px 12px 17px; cursor:pointer;
	 text-decoration: none; color: #fff; letter-spacing:0.04em}
.disclosure 	
	{position:fixed; top:-100%; width:100%; height:100%; max-width:1200px; margin:0 auto; font-size:12px; background:#fff; z-index:100; overflow:auto;
	font-family:Arial, sans-serif; 
	transition:top 0.3s ease-in-out 0s; -webkit-transition:top 0.3s ease-in-out 0s; -moz-transition:top 0.3s ease-in-out 0s; -o-transition:top 0.3s ease-in-out 0s;}
.disclosure h3	{font-size:18px;}
.disclosure p, .disclosure li	
				{margin:12px 15px 10px;}
.disclosure .btn-close
				{position:absolute; top:10px; right:10px; color:#fff; background:#666; padding: 5px 10px; font-size:14px; cursor:pointer}

.intro
	{position:relative; width:100%; height:448px; display:block; bbackground:#fff; overflow:hidden;
	 transition:all 0.3s 0s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}
.intro.tall
	{height:480px;}
.intro h2
	{width:39%; margin:0 2.9% 0 3%; padding-top:8.2%; font-weight: normal; color: #82c342; 
	 letter-spacing: .015em; line-height:1.15; font:italic 300 32px 'Open Sans', sans-serif;}
.intro .page2 h2
	{width:97%; padding-top:2%; margin:0;text-align:center}
.intro h1
	{font-weight:normal; font-size:40px; margin:0.1% 0 0 3%; padding:0}
.intro .page2 h1
	{width:97%; margin:0; text-align:center}
.intro p
	{width:39%; margin:2.8% 2.9% 0 3%; font:italic 300 21px 'Open Sans', sans-serif; letter-spacing:-.02em; line-height:1.38; color:#261C1C}
.bg-img
	{position:absolute; right:4%; top:12%; bottom:0; width:46%; max-width:479px; opacity:0;filter: alpha(opacity=0);
	 background:url(bg_piggy_bank.gif) no-repeat right top; background-size:100% auto;
	 transition:all 0.3s 0s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}
.page1, .page2
	{position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; bbackground:#fff; opacity:0;filter: alpha(opacity=0); overflow:hidden;
	 transition:all 0.3s 0s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}
.page1.show, .page2.show, .bg-img.show
	{opacity:1;filter: alpha(opacity=100);}
.levers
	{position:relative; width:98%; min-height:70px; margin:0 1%; z-index:15; border-top:1px solid #ccc}
.levers.alt
	{border-top:none}
.levers .btn-prev, .levers .btn-next
	{display:none; position: absolute; width: 22px; top: 0; padding-top: 55%; right:-1px;  z-index: 2; 
	 background: #fff url(btn_question_next.gif) no-repeat center center; background-size:70% auto; }
.levers .btn-prev
	{left:-1px; background: #fff url(btn_question_prev.gif) no-repeat center center; background-size:70% auto;}
.questions
	{transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0);}
.question
	{display:block; position:relative; margin:-20px 0 0 0; padding-bottom:24px; border-bottom:1px solid #ccc; opacity:0; filter:alpha(opacity=0);
	 transition:all 0.3s 0s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}
.questions.show .question
	{opacity:1; filter:alpha(opacity=100); margin:0;}
.questions.show.hide .question
	{opacity:0; filter:alpha(opacity=0); height:0 !important}
.question.one
	{background:#fff url(icon_age.png) no-repeat 6px 8px}
.question.two
	{background:#fff url(icon_retire_age.png) no-repeat 5px 17px; 
	 transition-delay:0.1s}
.question.three
	{background:#fff url(icon_leisure.png) no-repeat 5px 22px; 
	 transition-delay:0.2s}
.questions.show.hide .question.one
	{transition-delay:0.1s}
.questions.show.hide .question.two
	{transition-delay:0.05s}
.questions.show.hide .question.three
	{transition-delay:0s}
.levers.alt .question
	{width:30%; height:90px !important; float:left; margin:0 1.2% 0 0.8%; border:1px solid #ccc; overflow:hidden; cursor:pointer}
.levers.alt .question.one
	{background-position: 17px 23px}
.levers.alt .question.two
	{background-position: 8px 11px}
.levers.alt .question.three
	{background-position: 11px 12px}
.question .btn-close
	{display:none}
.question .current-val
	{display:none; font-size:24px; padding:0 5% 0 86px; color:#82c342;}
.question p
	{width:54%; font-size:24px; margin:0 4% 0 9.2%; padding-top:2.3%; line-height:1.3;}
.levers.alt .question p
	{display:block; width:60%; margin:0 0 0 110px; font-size:14px}
.question h3
	{display:none}	
.question .slider	
	{position:absolute; width:33%; right:0; top:0;}
.levers.alt .question .slider
	{top:2em; left:110px; width:63%}
.question .slider .bg	
	{position:absolute; margin-top:30px; left:0; width:87%; height:6px; background:#999; border:none;cursor:pointer;
	 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px}
.levers.alt .question .slider .bg
	{width:93%}
.levers.alt .question .slider.lifestyle .bg
	{margin-top:30px}
.question .slider.age .bg
	{margin-top:25px}
.question .slider.lifestyle .bg
	{margin-top:30px}
.question .slider .bg .bar
	{position:absolute; left:0; top:0; width:0;height:6px; background:#82c342;
	 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px}	
.question .slider .bg .tick
	{position:absolute; top:23px; margin-left:-8px; font-size:14px; color:#666}
.question .slider.lifestyle .bg .tick
	{width:55px; margin-left:-28px; text-align:center;}
.question .slider .bg .marker
	{position:absolute; bottom:-25px; left:0; width:43px; height: 43px; margin:0 0 5px -22px; padding:0; cursor:url(openhand.cur), move; 
	 background:url(bg_slider_pointer.png) center center no-repeat; border:none;}
.question .slider .bg .marker.grabbing {cursor:url(closedhand.cur), move;}
.question .slider .bg .marker .lbl
	{display:none; position:absolute; top:-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:26% 0 0; font-size:16px; font-weight:bold; text-align:center; color:#fff}
.question .btn-less, .question .btn-more
	{position:relative; top:1px; display:inline-block; width:15%; height:35px; cursor:pointer; margin:0 0 0 2%; padding-top:5px;
	 color:#fff; font-size:30px; font-weight:bold; line-height:1; text-align:center; background:#bbb;}
.question .btn-less.on, .question .btn-more.on
	{background:#777}
.levers.alt .question:hover, .levers.alt .question.on
	{overflow:visible}
.question .hover
	{position:relative; width:50%; clear:both; margin:0% 4% -.9% 9.2%; font:italic 300 18px 'Open Sans', sans-serif; letter-spacing:0.02em; line-height:1.7}
.levers.alt .question .hover, .levers.alt .question.on .hover
	{display:block; opacity:0; position:absolute; bottom:108%; left:-1000%; width:94%;margin:0 0 0 2%; padding:1% 1% 3%; font:italic 300 18px "Open Sans"; text-align:center; color:#666; background:#fff; border:1px solid #ddd;
	 -webkit-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5);
	 transition:opacity 0.3s 0s ease-in; -webkit-transition:opacity 0.3s 0s ease-in;; -moz-transition:opacity 0.3s 0s ease-in;}
.levers.alt .question:hover .hover
	{left:0; opacity:1}
	
.question .hover .tail
	{display:none; position:absolute; bottom:-11px; left: 45%; width:19px; height:12px; background:url(bg_hover_tail.png) no-repeat center center; background-size: 100% auto;}
.levers.alt .question .hover .tail
	{display:block}
.btn-results
	{clear:left; display:block; width:30%; margin:2% auto 4%; padding:0.5% 0; text-align:center; font:30px 'Open Sans', sans-serif; color:#fff; cursor:pointer;
	 background:#82c342; opacity:0; filter:alpha(opacity=0);
	  transition:all 0.3s 0.3s ease-in-out; -webkit-transition:all 0.3s 0.3s ease-in-out; -moz-transition:all 0.3s 0.3s ease-in-out;}
.btn-results.show
	{cursor:pointer; opacity:1; filter:alpha(opacity=100);}
.btn-results.off
	{display:none}
.graph
	{position:absolute; left:2%; top:24%; right:5.5%; bottom:8%; font:14px 'Open Sans', sans-serif; color:#666}
.graph .tick-lbl
	{position:absolute; left:2.5%; bottom:-28px;}
.graph .tick
	{position:absolute; left:2.5%; right:0; height:0; border-top:1px solid #999;}
.graph .tick span
	{display:block; width:2%; text-align:right; margin:-10px 0 0 -2.8%; }
.graph .bar
	{position:absolute; bottom:0; width:6%; margin-left:11%; height:1px; z-index:2; background:#d7e8fe; opacity:1; filter:alpha(opacity=100);
	 transition:all 0.3s 0s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}	
.graph .bar.off
	{opacity:0; filter:alpha(opacity=0);}
.graph .bar .lbl
	{position:absolute; bottom:-28px; padding-top:28px; width:100%; text-align:center;}
.graph .bar .hover
	{position:absolute; top:-120px; left:-54%; right:-54%; height:90px; border:1px solid #ccc; background:#fff; display:none;
	 -webkit-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5);}
.graph .bar.on .hover
	{display:block}
.graph .bar .hover span
	{display:block; text-align:center; color:#82c342; font-size:44px; padding-top:10px;}
.graph .bar .hover .tail
	{position:absolute; bottom:-18px; width:31px; height:19px; left:40%; background:url(bg_bar_hover_arrow.png) no-repeat top left; background-size:100% auto;}
.graph .bar:hover
	{background:#82c342;}
.graph .bar:hover .hover
	{display:block}

.results
	{position:relative; height:1px; margin:2.5% 2%; overflow:hidden; opacity:0; filter:alpha(opacity=0); 
	 transition:all 0.5s 0.2s ease-in-out, opacity 0.3s 0.5s ease-in-out; -webkit-transition:all 0.5s 0.2s ease-in-out, opacity 0.3s 0.5s ease-in-out; -moz-transition:all 0.5s 0.2s ease-in-out, opacity 0.3s 0.5s ease-in-out;}
.results.on
	{height:14em;}
.results.show
	{opacity:1; filter:alpha(opacity=100);}
.results h3
	{margin:0; font-size:28px; letter-spacing:0.01em}
.results p
	{margin:2% 3% 1% 0; line-height:1.4; font-size:18px; letter-spacing:0.013em;}
.cta
	{display:none; position:relative; left: -1.5%; right: -1.5%;}
.cta.on
	{display:block;}
.cta .arrow
	{display:block; position:absolute; float:left; top:-14px; width:32%; max-width:333px; left:-32%; z-index:10;
	 background:url(logo_fidelity_arrow.png) no-repeat right top; background-size:100% auto;
	 transition:all 0.3s 0.4s ease-in-out; -webkit-transition:all 0.3s 0.4s ease-in-out; -moz-transition:all 0.3s 0.4s ease-in-out;}
.cta.show .arrow
	{left:0;}
.cta .arrow span 
	{margin:9% 13% 12%; font-size: 30px; display: block; letter-spacing: 0.01em; color:#fff; opacity:0; filter: alpha(opacity=0); 
	 transition:opacity,filter 0.3s 0.7s ease-in-out; -webkit-transition:opacity,filter 0.3s 0.7s ease-in-out; -moz-transition:opacity,filter 0.3s 0.7s ease-in-out;}
.cta .info
	{display:block; background:#ebebeb; opacity:0; filter: alpha(opacity=0); margin-top:16px; margin-bottom:40px; z-index:1;
	 transition:all 0.3s 0.9s ease-in; -webkit-transition:all 0.3s 0.9s ease-in; -moz-transition:all 0.3s 0.9s ease-in;}	
.cta.show.done .arrow, .cta.show.done .info
	{transition:none; -webkit-transition:none; -moz-transition:none;} 
.cta .info p 
	{font-size: 17px; margin:0 3% 0 350px; padding:10px 0; line-height: 1.3; opacity:0}
.cta.show .arrow span, .cta.show .info, .cta.show .info p 
	{opacity:1; filter: alpha(opacity=100);}
.cta .info a
	{text-decoration:none; color:#0f57c2;}
.cta .info a:hover
	{text-decoration:underline}
.q-nav
	{display:none}
.footer
	{height:4em; background:#333; color:#fff}
.footer p
	{margin:0 3%; padding-top:10px;}
	 
@media screen and (min-device-width: 800px)  {
.header .mobile-nav .btn-disclose:hover
	{background:#5c9637}
.question .btn-less:hover, .question .btn-more:hover
	{background:#999}
.btn-results:hover
	{background:#408800}
.mobile-nav:hover
	{overflow:visible; background-color:#82b641}
.question .slider .bg .marker.grabbing .lbl
	{display:none}
.levers.alt .question:hover
	{background-color:#efefef}
.graph .bar:hover
	{z-index:10}
}

@media screen and (max-width: 1100px) {
.intro  p
	{width:46%; margin-left:3%}
.intro h1 
	{font-size:36px;}
.levers.alt
	{overflow:hidden}
.levers.on
	{padding-top:14em; margin-top:-14em}
.levers.alt .questions
	{width:200%;}
.levers.alt .question
	{width:15%; margin:0 0.6% 0 0.4%}
.question p, .question .hover
	{margin-left:90px;}
.levers.alt .question .slider .bg .tick
	{font-size:12px; bottom:-30px}
.levers.alt .question.short
	{width:10%; background-size:30%; background-position-y:center}
.levers.alt .question.on
	{width:25%; cursor:default; background-color:#efefef}
.levers.alt .question .slider
	{display:none}
.levers.alt .question.on .slider
	{display:block; width:66%; top:25px;}
.levers.alt .question p, .question h3
	{display:none}	
.levers.alt .question.on p
	{display:block; width:73%}
.levers.alt .question h3
	{display:block; padding:0.9em 5% 0 36%; font-size: 16px;}
.levers.alt .question.short h3
	{padding:7.5% 5% 0 41%; font-size:14px}
.levers.alt .question.short h3.alt
	{padding-top:3px; font-size:12px;}
.levers.alt .question .current-val
	{display:block; padding-left:40%}
.levers.alt .question.short .current-val
	{padding:0 5% 0 46%}
.levers.alt .question.three.short .current-val
	{font-size:18px}
.levers.alt .question.on .current-val, .levers.alt .question.on h3
	{display:none}	
.levers.alt .question .hover, .levers.alt .question.on .hover, .levers.alt .question:hover .hover
	{display:block; opacity:0; position:absolute; bottom:108%; left:-1000%; width:94%; padding:1% 1% 3%; font:italic 300 18px "Open Sans", sans-serif; text-align:center; color:#666; background:#fff;
	 -webkit-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5);
	 transition:opacity 0.3s 0.3s ease-in; -webkit-transition:opacity 0.3s 0.3s ease-in;; -moz-transition:opacity 0.3s 0.3s ease-in;}
.levers.alt .question.on .hover
	{left:2%; margin-left:0; opacity:1}

.graph .bar .hover
	{top:-90px; height:60px;}
.graph .bar .hover span
	{font-size:32px}
	
.results.on
	{height:14em;}
	
.cta .arrow
	{width:333px;left:-333px}
}


@media screen and (max-width: 950px) {
.cta .info p
	{width:50%; font-size:14px; line-height:1;}
}

@media screen and (max-width: 800px) {
.bg-img
	{top:14px}
.intro
	{height:410px;}
.intro p
	{width:96%; margin: 14% auto 0}
.intro h1
	{width:48%; margin:0 3%;}
.intro h2 
	{width: 48%; margin:0 3%; padding-top:60px;}
.levers.on
	{padding-top:14em; margin-top:-14em}
.question p
	{min-height:2em; width:48%}
.question .hover
	{width:83%; margin-top:1em}
.levers.alt .question h3
	{padding-left:75px;}
.question .current-val, .levers.alt .question .current-val
	{padding-left:86px}
.question .slider .bg.mobile .marker .lbl
	{display:block;}
.question .slider .bg.mobile .marker span
	{display:none;}
.levers.alt .question p
	{margin-left:80px}
.levers.alt .question.on .hover
	{font-size:16px;}
.levers.alt .question.on .slider
	{left:80px; top:35px; width:71%}

.graph .bar .hover
	{left:-80%; right:-80%; height:70px; font-size:40px}
.graph .bar .hover span
	{font-size:30px; padding-top:10px}
.graph .bar .hover .tail
	{left:33%}
	
.cta.show .arrow
	{margin-left:-17px}
.cta .info p
	{width:51%; margin-left:333px}
}

@media screen and (max-width: 700px) {
.bg-img	{right:25%; top:20%}
.intro
	{height:450px}
.intro h1, .intro h2
	{text-align:center; width:94%}
.intro h2 
	{padding-top:2%}
.intro p
	{margin: 35% auto 0}
..question.one, .question.two, .question.three
	{background-size:7% auto}
.levers.alt .question.one.short
	{background-size:25%;}
.levers.alt .question h3.alt
	{padding-top:3px;}	
.levers.alt .question .slider .bg
	{width:83%}
.levers.alt .question.short h3
	{position:absolute; top:3px; width:100%; margin:0; padding:0; font-size:14px; text-align:center; }
.levers.alt .question.short .current-val
	{font-size: 60px;text-align: center; width:100%; margin:0; padding:13px 0 0 0;}
.levers.alt .question.three.short .current-val
	{padding:35px 0 0 0; font-size:20px;}
.levers.alt .question.one.short 
	{background-size: auto 26%; background-position: center 98%;}
.levers.alt .question.two.short, .levers.alt .question.three.short 
	{background-size: auto 30%; background-position: center 98%;}	
.levers.alt .question.three .current-val
	{font-size:20px}

.results.on
	{height:16em}
.results h3
	{font-size:24px;}

.cta
	{height:14em}
.cta .arrow
	{top:-30px; width:99%; max-width:99%; left:-100%; background-size:auto; background-position:right 17px}
.cta.show .arrow
	{left:0}
.cta .arrow span
	{display:inline-block; margin:31px 0; padding:17px 15% 17px; background:#11a751; opacity:1; filter: alpha(opacity=100);}
.cta .info
	{position:absolute; padding-top:75px}
.cta .info p
	{width:90%; margin: 0 4% 4%; font-size:18px;}

}

@media screen and (max-width: 602px) {
.header		
	{width:auto; right:0}
.mobile-nav		
	{position:absolute; right:0; width:37px; height:40px; overflow:hidden;
	 background:url(bg_mobile_nav.png) center 15px  no-repeat; background-size:60% auto;}
.mobile-nav.on	
	{overflow:visible; background-color:#82b641}
.btn-disclose	
	{position:absolute; top:100%; right:0; padding:10px 13px 10px; white-space:nowrap; background:#82b641}
.intro
	{height:440px}	
.intro.tall
	{height:400px;}
.intro h1
	{position:relative; width:94%; z-index:2; font-size:26px; text-align:center; margin:-.15em auto 0}
.intro h2
	{font-size:20px; padding-top:1.9%; margin:0 auto; width:94%; text-align:center}
.intro p, .intro .page2 p
	{position:absolute; width: 96%; left:3%; bottom:3%; font-size: 20px; line-height: 1.4; z-index:2;}
.intro .page1 p
	{bottom:2%}

.question p
	{width:44%}
.question .hover
	{margin-top:0.5em;}
.levers.alt .question.one
	{background-size:auto 49%}
.levers.alt .question .current-val
	{padding-left:75px; font-size:22px;}
.levers.alt .question h3
	{padding-left:66px; font-size:14px}
.levers.alt .question h3.alt
	{margin-bottom:0; padding-top:3px}	
.levers.alt .question .slider .bg
	{width:75%}
.levers.alt .question .slider.lifestyle .bg
	{margin-top:38px;}
.levers.alt .question.on .hover
	{font-size:14px}
.levers.alt .question.on .slider
	{left:100px; top:25px; width:70%}	
.btn-results
	{width:45%}

.graph .bar .hover
	{left:-100%; right:-100%; height:60px;}
.graph .bar .hover span
	{font-size:32px; padding-top:6px}
.graph .bar .hover .tail
	{left:33%}
.graph .tick span
	{width:4%; margin-left:-4.5%}
	
.footer	
	{height:5em}
}

@media screen and (max-width: 600px)  {
.results.on
	{height:19em;}
}

@media screen and (max-width: 550px)  {
.levers.alt .question.one
	{background-size: auto 29%; background-position:8px center;}
.levers.alt .question.two, .levers.alt .question.three
	{background-size:auto 48%;background-position:8px center;}
.levers.alt .question .current-val
	{padding:16px 0 0 29%; font-size:60px; text-align:center;}
.levers.alt .question.three .current-val
	{font-size:26px; padding:34px 0 0 24%;}
.levers.alt .question h3
	{position:absolute; top:3px; width:100%; margin:0; padding:0; font-size:14px; text-align:center}
.levers.alt .question h3.alt
	{margin-bottom:0; padding-top:3px}	
.levers.alt .question.on .slider
	{width:80%; left:64px;}
.levers.alt .question.on p
	{width:74%; margin-left:65px}
}

@media screen and (max-width: 500px)  {
.bg-img	
	{right:22%; top:23%; width:52%}
.intro.tall
	{height:285px}
.intro h1
	{font-size:24px}
.intro p, .intro .page2 p
	{font-size:15px; font-weight:normal}
.graph
	{top:24%}
.graph .bar
	{margin-left:15%}
.graph .bar .lbl, .graph .tick-lbl
	{bottom:-20px;}
.graph .tick
	{left:24px;}
.graph .tick span
	{margin-left:-24px; width:6%}
.graph .bar .hover span
	{font-size:24px; padding-top:10px;}
		
.levers
	{border:none; overflow:hidden}
.levers .questions
	{width:200%}
.questions.show .question
	{width:14%; height:80px !important; float:left; margin:10px 1.2% 10px 0.8%; border:1px solid #ccc; overflow:hidden; cursor:pointer}
.levers.alt .question
	{width:14%}
.levers.alt .question.short
	{width:10%}
.levers.alt .question.on
	{width:25%}
.question.one, .levers.alt .question.one
	{background-size: auto 26%; background-position:center 94%;}
.question.two, .question.three, .levers.alt .question.two, .levers.alt .question.three
	{background-size:auto 30%;background-position:center 94%;}
.questions.show .question.short, .levers.alt .question.short
	{width:0px; margin:0 0 0 -2px}
.question h3, .levers.alt .question h3
	{position:absolute; top:3px; width:100%; margin:2px 0 0 0; padding:0; font-size:14px; text-align:center; display:block;}
.question .current-val, .levers.alt .question .current-val, .levers.alt .question.short .current-val
	{display:block; padding:16px 0 0 0; font-size:50px; text-align:center;}
.question.three .current-val, .levers.alt .question.three .current-val
	{font-size:28px; padding:30px 0 0 0;}
.question p, .question .slider, .question .hover
	{left:200%; margin-left:200%;}
.levers.on .question.on
	{overflow:visible}
.levers .question .hover
	{display:block;opacity:0;}
.levers.on .question .hover
	{ position:absolute; bottom:93%; left:-4%; margin-left:4%; width:94%; padding:1% 1% 3%; text-align:center; color:#666; background:#fff;
	 -webkit-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5); box-shadow: 0px 0px 10px 0px rgba(102,102,102,0.5);
 	 transition:opacity 0.3s 0.3s ease-in; -webkit-transition:opacity 0.3s 0.3s ease-in;; -moz-transition:opacity 0.3s 0.3s ease-in;}
.levers.on .question.on .hover
	{opacity:1}
.question.on .hover .tail
	{display:block}
.levers.alt .question .slider .bg
	{width:88%}

.question.on .btn-close
	{position:absolute; right:10px; top:10px; width:20px; height:20px; display:block; text-align:center; padding-top:5px; 
	 cursor:pointer; border:1px solid #ccc;} 
.question.one.on, .levers.alt .question.one.on
	{height:8em !important; background-position: 10px 12px; background-size: 47px 43px;}
.question.two.on, .levers.alt .question.two.on
	{height:11em !important; background-position: 8px 12px; background-size: 69px 73px;}
.question.three.on, .levers.alt .question.three.on
	{height:11em !important; background-position: 11px 12px; background-size: 69px 75px;}
.question.on, .questions.show .question.on, .levers.alt .question.on
	{width:48.5%;  padding-bottom:10px; background-color: #efefef;}
.question.on h3, .levers.alt .question.on h3, .question.on .current-val
	{display:none}
.question.on p, .levers.alt .question.on p
	{width:63%; min-height:1em; margin:0 0 0 80px; font-size:18px; display:block}
.question.on .slider, .levers.alt .question.on .slider
	{position:relative; width:76%; height:5em; left:80px; top:25px; margin-left:0;  display:block}	
.question.on .slider .bg, .levers.alt .question.on .slider .bg
	{margin-top:5px;}
.question.on .hover, .levers.alt .question.on .hover
	{width:95%; bottom:90%; margin:10px 0; font-size:12px; line-height:1.2}

.btn-results
	{width:60%}
.results h3
	{font-size:20px}
.results p
	{font-size:14px}
.cta
	{top:-50px}
.cta .arrow
	{background-position:right 17px}
.cta .arrow span
	{padding:17px 0% 17px 8%}
}

@media screen and (max-width: 400px)  {
.bg-img	
	{right:26%; top:22%; width:40%}
.intro
	{height:330px}
.intro h1
	{font-size:26px}
.intro h2
	{font-size:20px}

.graph .bar
	{margin-left:13%}
.graph .bar .hover
	{left:-150%; right:-150%;}
.graph .bar .hover span
	{font-size:20px; padding-top:15px;}
	
.question p
	{ min-height:1.5em;}
.levers.alt .question.three .current-val
	{font-size:24px; padding:30px 0 0 0;}
.levers.alt .question h3.alt
	{padding-top:2px}
.question h3.alt span
	{display:none}
.question.on p, .levers.alt .question.on p
	{font-size:15px;}
.levers.alt .question .slider .bg
	{width:80%}
.question .current-val, .levers.alt .question .current-val, .levers.alt .question.short .current-val
	{padding:22px 0 0 0; font-size:40px;}
.question.three .current-val, .levers.alt .question.three .current-val
	{font-size:21px; padding:34px 0 0 0;}
.levers .question.on .hover	
	{left:-2%;}
.cta
	{top:-20px}
.cta .info
	{padding-top:70px}
.cta .arrow
	{top:-20%; background-size:100% auto; background-position:center center;}
.cta .arrow span
	{background:none; padding:2% 10%; margin:11% 0}	
.results h3
	{font-size:18px}
.footer	
	{height:7em}
}

@media screen and (max-width: 350px)  {
.bg-img
	{top:28%}
.intro h1
	{font-size:26px}
.intro h2
	{font-size:20px}
.intro p, .intro .page2 p
	{font-size:14px}
.question.on p, .levers.alt .question.on p
	{width:56%}
.question .slider
	{width:85%; margin:1% 0 0 10%}
.levers.alt .question .slider .bg
	{width:73%}
.question.on .slider, .levers.alt .question.on .slider
	{left:55px; width:70%}
.results.on
	{height:22em}

.cta
	{top:-20px}
.cta .info
	{padding-top:60px;}

}