@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
	{position:relative; 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%; max-width:1200px; margin:0 auto; width:100%; height:100%; 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:430px; 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 h2
	{width:55%; margin:0 2.9% 0 5.3%; padding-top:9.8%; font-weight: normal; color: #82c342; 
	 letter-spacing: .015em; line-height:1.15; font:italic 300 32px 'Open Sans', sans-serif;}
.intro h1
	{font-weight:normal; font-size:40px; margin:0.1% 0 0 5.3%; padding:0}
.intro p
	{width:45%; margin:3.2% 2.9% 0 5.3%; font:italic 300 24px 'Open Sans', sans-serif; letter-spacing:-.015em; line-height:1.29;  color:#261C1C}
.intro .page2 p
	{width:40%; margin:2.7% 2.9% 0 4.9%}
.bg-img
	{position:absolute; right:5%; bottom:0; top:0; width:33%; max-width:456px; opacity:0;filter: alpha(opacity=0);
	 background:url(bg_nest_egg.gif) no-repeat right bottom; 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, .btn-results.show, .bg-img.show
	{opacity:1;filter: alpha(opacity=100);}
.levers
	{position:relative; width:97%; margin:0 0 0 1.5%; z-index:15}
.levers .btn-prev, .levers .btn-next
	{display:none; position: absolute; width: 22px; top: 0; padding-top: 55%; right:0;  z-index: 2; 
	 background: #fff url(btn_question_next.gif) no-repeat center center; background-size:70% auto; }
.levers .btn-prev
	{left:0; background: #fff url(btn_question_prev.gif) no-repeat center center; background-size:70% auto;}
.3d-acc
	{transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);; -moz-transform:translate3d(0,0,0);}
.question
	{display:block; float:left; width:31.1%; margin:0 1.8% 7px 2px; padding-bottom:2%; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.question.one
	{background:url(icon_age.gif) no-repeat center 10px}
.question.two
	{background:url(icon_salary.gif) no-repeat center 10px}
.question.three
	{background:url(icon_savings.gif) no-repeat center 10px}
.question p
	{width:90%; font-size:24px; margin:20.5% 4% 0; text-align:center; line-height:1.3; letter-spacing:0.01em; height:3em}
.question .options
	{position:relative; width:87%; font-size:26px; color:#bbb; margin:1% 3% 0 15%}
.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}
.question input.savings-text, .question input.salary-text, .question input.age-text
	{width:57.5%; margin-left:2%; padding-bottom:4px; font-size:1em; text-align:right}
.question .hover
	{opacity:0; filter:alpha(opacity=100); position:absolute; top:110%; left:-4%; width:94%; padding:1% 1% 3%; font:italic 300 18px "Open Sans", sans-serif; text-align:center; color:#999; 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:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in;; -moz-transition:all 0.3s 0s ease-in;}
.question .hover.on
	{opacity:1; filter: alpha(opacity=100);}
.question .hover .tail
	{position:absolute; top:-11px; left: 45%; width:19px; height:12px; background:url(bg_hover_tail.png) no-repeat center center; background-size: 100% auto;}
.btn-results
	{clear:left; display:block; width:30%; margin:4% auto; padding:0.5% 0; text-align:center; font:30px "Open Sans", sans-serif; color:#fff;
	 background:#82c342; 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;}
.btn-results.show
	{cursor:pointer;}
.btn-results.off
	{height:0; opacity:0; filter: alpha(opacity=0); margin:0; cursor:default}
.graph
	{position:absolute; top:9%; right:10.5%; width:36%; max-width:350px; padding-top:36%;}
.graph .canvas
	{position:absolute; top:0; left:0; right:0; width:100%; background:url(bg_graph.png) no-repeat center center; background-size:100% auto;}
.graph .tail
	{position:absolute; top:0; left:0; right:0; padding-top:100%; }
.graph .cap
	{position:absolute; top:10%; left:10%; right:10%; bottom:10%; text-align:center; padding-top:15%; letter-spacing:-0.05em; font:135px "Helvetica Narrow", "AvenirNextCondensed-Regular", sans-serif-condensed, sans-serif;
	 text-shadow:0 0 5px rgba(130, 195, 66, 0.5); color:#82c342;
	 background:url(bg_circle.png) no-repeat center center; background-size:100% auto;}
.cta
	{display:none; position:relative; left:0; right:0;}
.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:16px 0; padding-bottom:20px; 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: 568px)  {
.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}
}

@media screen and (max-width: 1250px)  {
.intro
	{height:375px}
.intro h2
	{padding-top:7%}
.graph
	{width:27%}
.graph .cap
	{font-size:120px}
}

@media screen and (max-width: 1100px)  {
.question p
	{font-size:18px; margin-top:26%}
.question input.savings-text, .question input.salary-text, .question input.age-text
	{width:40%; font-size:24px;; padding-top:5px;}
.bg-img
	{width:39%}
.intro
	{height:380px;}
.intro h2
	{width:90%; padding-top:5%; font-size:24px}
.intro h1
	{font-size:36px;}
.intro p
	{font-size:20px;}
.graph
	{width:30%}
.cta .arrow
	{width:333px;left:-333px}
}

@media screen and (max-width: 950px)  {
.question p
	{font-size:16px; margin-top:30%}
.graph
	{right:7%}
.graph .cap
	{font-size:105px;}
.intro
	{height:330px;}
.cta .info p
	{width:50%; font-size:14px; line-height:1;}
}

@media screen and (max-width: 800px)  {
.intro
	{height:335px}
.intro h2
	{margin-left:4.1%; width:94%;}
.intro h1
	{margin-left:4.3%; font-size:32px}
.intro  p
	{width:47%}
.intro .page2 p
	{width:50%}
.question p
	{margin-top:35%; height:4em}
.graph
	{right:3%}
.graph .cap
	{font-size:90px;}
.cta.show .arrow
	{margin-left:0}
.cta .info p
	{width:51%; margin-left:333px}
}

@media screen and (max-width: 700px)  {
.graph
	{top:30%; width:32%; right:6%;}
.graph .cap
	{font-size:90px; padding-top:14%}
.cta
	{height:19em}
.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 18% 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:420px}	
.intro.tall
	{height:400px;}
.intro h1
	{position:relative; z-index:2; font-size:26px; text-align:center; margin:-.15em 0 0 0}
.intro h2
	{font-size:20px; padding-top:1.9%; margin:0 auto; width:94%; text-align:center}
.bg-img
	{width:72%; height:auto; top:9%; right:8%; background:url(bg_nest_egg_mobile.png) no-repeat right center; background-size:100% auto;}
.intro p, .intro .page2 p
	{position:absolute; width: 87%; bottom:3%; font-size: 20px; line-height: 1.4; z-index:2;}
.intro .page1 p
	{bottom:2%}
.levers
	{overflow:hidden; margin:0; width:100%;}
.levers .btn-prev, .levers .btn-next
	{display:block; opacity:.3}
.levers .btn-prev.on, .levers .btn-next.on
	{opacity:1; cursor:pointer;}
.levers .questions
	{width:300%; margin-left:0; 
	transition:margin-left 0.3s 0s ease-in-out; -webkit-transition:margin-left 0.3s 0s ease-in-out; -moz-transition:margin-left 0.3s 0s ease-in-out}
.levers .questions.grabbing
	{cursor:move; transition:none; -webkit-transition:none;; -moz-transition:none;}
.levers .btn-prev, .levers .btn-next
	{padding-top:37%;}
.questions.pos-1
	{margin-left:-99%}
.questions.pos-2
	{margin-left:-198%}
.question
	{width:31%; margin:0 1% 2%;}
.question p
	{width:87%; margin:70px 10% 0; height:3em; text-align:center; font-size:20px; line-height:1.2}
.question input.savings-text, .question input.salary-text, .question input.age-text
	{width:48%}
.question .hover
	{display:none; left:2%;}
.question .hover.on
	{display:block}
.btn-results
	{width:60%}
.graph
	{top: 22%; right: 31%; width: 37%; padding-top: 40%;}
.graph .cap
	{font-size:80px; padding-top:19%}
.btn-results.off
	{display:none}
.cta .arrow
	{width:99%; max-width:99%; margin-left:-100%; background-size:auto; background-position:right 17px}
.cta .arrow span
	{display:inline-block; margin:31px 0; padding:17px 12% 17px 10%; background:#11a751; opacity:1; filter: alpha(opacity=100);}
.cta .info
	{position:absolute; top:50px; padding-top:9%}
.cta .info p
	{margin: 0 4% 4%; padding:10px 0 0 0; font-size:18px;}
.q-nav
	{display:block; position:relative; z-index:15; width:12%; margin:0 auto; }
.q-nav .btn
	{display:block; float:left; width:26%; padding-top:26%; margin:0 3% 10px; background:#aaa; cursor:pointer;
	 border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%}
.q-nav .btn.on
	{background:#666}
.footer	
	{height:5em}
}

@media screen and (max-width: 500px)  {
.graph
	{top: 21%; right:25%; width: 49%;}
.graph .cap
	{font-size:90px}
.intro p, .intro .page2 p
	{font-size:16px}
.cta .arrow
	{background-position:right 17px}
.cta .arrow span
	{padding:17px 0% 17px 4%}
.question
	{margin-bottom:4%}
}

@media screen and (max-width: 400px)  {
.intro
	{height:270px}
.intro.tall
	{height:310px}
.intro h1
	{font-size:24px}
.intro h2
	{font-size:18px}
.bg-img
	{width:75%; right:7%; top:18%}
.question p
	{height:2.5em; margin-top:22%; font-size:20px;}
.levers .btn-prev, .levers .btn-next
	{padding-top:60%}
.levers .btn-prev
	{left:0}
.graph
	{right: 29.5%; width: 41%;}
.graph .cap
	{font-size:64px; padding-top:12%;}
.cta .info
	{padding-top:50px}
.cta .arrow
	{top:0; background-size:100% auto; background-position:center center;}
.cta .arrow span
	{background:none; padding:2% 10%; margin:11% 0}	
.footer	
	{height:7em}
}

@media screen and (max-width: 340px)  {
.intro
	{height:210px}
.intro h1
	{font-size:20px}
.intro h2
	{font-size:16px}
.intro p, .intro .page2 p
	{font-size:14px}
.bg-img
	{width:63%; right:15%; top:13%;}
.questions .options
	{width:85%; margin:1% 0 0 10%}
.question
	{background-size:15% auto !important;}
.question p 
	{height: 2.5em; margin-top: 18%; font-size: 18px;}
.question input.savings-text, .question input.salary-text, .question input.age-text
	{width:48%}
.graph .cap
	{font-size:75px; padding-top:14%}
.cta .info
	{padding-top:30px;}
}