@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

body
	{margin: 0; padding: 0; font: 13px 'Open Sans', sans-serif; background:#333;}
h3	{margin:8px 12px 5px 12px; font-size:1.08em; font-weight:normal;}
a	{color:#2a5baa; text-decoration:none;}
a:hover	{text-decoration:underline;}
.clearfix:after 
	{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#interactive
	{background:#fff; width:100%; margin:0 auto; overflow:hidden}
.header
	{display:block; position:fixed; left:0; right:0; height:55px; border-bottom:2px solid #fff; background:#408800; z-index:101}
.header .logo 
	{display: block; float: left; width: 124px;	height: 36px; margin: 3px 0 0 3%;
	 background: url(logo.png) center center no-repeat;}
.header .mobile-nav 
	{display: block; margin: 0;}
.main
	{margin:50px auto 0;max-width:1200px; }
.btn-disclose	
	{border-left: 1px solid #5c9637; display: block; float: right; min-width: 50px; padding: 17px 12px 15px; cursor:pointer;
	 text-decoration: none; color: #fff; letter-spacing:0.04em;font-size:1.25em;font-weight:bold;}
.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:1px; display:block; background:#fff; overflow:hidden; text-align:center; z-index:20;
	 transition:all 0.5s 0s ease-out; -webkit-transition:all 0.5s 0s ease-out; -moz-transition:all 0.5s 0s ease-out; oopacity:0;}
.intro.tall
	{height:480px;}
h2
	{width:39%; margin:0 auto; padding-top:20px; font-weight: normal; color: #82c342; 
	 letter-spacing: .015em; line-height:1.15; font:italic 300 32px 'Open Sans', sans-serif;}
.page2 h2
	{width:97%; padding-top:2%; margin:0;text-align:center}
h1
	{font-weight:normal; font-size:40px; margin:0 auto 1em; padding:0}
.intro .land-calc
	{margin:0 5%;}
.page2 h1
	{width:97%; margin:0; text-align:center}
.intro p
	{width:94%; margin:3% auto; font:italic 300 21px 'Open Sans', sans-serif; letter-spacing:-.02em; line-height:1.38; color:#666666}
.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);
	 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;}
.page2
	{height:0}
.page2 h3.ttl
	{opacity:0; filter:alpha(opacity=0);
	 transition:all 0.3s 0.5s ease-in-out; -webkit-transition:all 0.3s 0.5s ease-in-out; -moz-transition:all 0.3s 0.5s ease-in-out;}
.page2.show
	{position:relative;height:448px;}
.page2.show h3.ttl
	{opacity:1; filter:alpha(opacity=100);}
.intro.show, .page1.show, .page2.show, .bg-img.show
	{opacity:1;filter: alpha(opacity=100); z-index:20;}
.intro.show
	{height:448px;}
.intro.short
	{height:128px;}
.levers
	{position:relative; width:100%; min-height:95px; margin:0 1%; z-index:15; border-top:1px solid #ccc}
.levers.hide
	{border-color:#fff;
	 transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out;}
.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;}
.btn-chart
	{cursor:pointer;}
.btn-chart span
	{color: #81c342}
.chart-overlay
	{display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:110; text-align:center; padding-top:20%;}
.chart-overlay img
	{display:inline-block; opacity:0; 
	 transition:opacity 0.3s 0s ease-out; -webkit-transition:opacity 0.3s 0s ease-out; -moz-transition:opacity 0.3s 0s ease-out;}
.chart-overlay.on
	{display:block;}
.chart-overlay.show img
	{width:100%; opacity:1; max-width: 812px}
.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.4s 0.4s ease-out; -webkit-transition:all 0.4s 0.4s ease-out; -moz-transition:all 0.4s 0.4s ease-out;}
.questions.show .question
	{opacity:1; filter:alpha(opacity=100); margin:0;}
.questions.show.hide .question
	{opacity:0; filter:alpha(opacity=0); margin-top:-50%;
	 transition:all 0.5s 0s ease-in-out; -webkit-transition:all 0.5s 0s ease-in-out; -moz-transition:all 0.5s 0s ease-in-out;}
.levers.alt .questions.show .question
	{margin-top:0;
	 transition:opacity 0.5s 0s ease-out; -webkit-transition:opacity 0.5s 0s ease-out; -moz-transition:opacity 0.5s 0s ease-out;}
.levers.alt .questions.show .question.alt
	{transition:all 0.5s 0s ease-out; -webkit-transition:all 0.5s 0s ease-out; -moz-transition:all 0.5s 0s ease-out;}
.question.two
	{transition-delay:0.5s; -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s}
.question.three
	 {transition-delay:0.6s; -webkit-transition-delay:0.6s; -moz-transition-delay:0.6s}
.question.four
	 {transition-delay:0.7s; -webkit-transition-delay:0.7s; -moz-transition-delay:0.7s}
.questions.show.hide .question
	{transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s}
/*.questions.show.hide .question.one
	{transition-delay:0.35s; -webkit-transition-delay:0.35s; -moz-transition-delay:0.35s}
.questions.show.hide .question.two
	{transition-delay:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s}
.questions.show.hide .question.three
	{transition-delay:0.25s; -webkit-transition-delay:0.25s; -moz-transition-delay:0.25s}
.questions.show.hide .question.four
	{transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s}*/
.levers.alt .question
	{width:24%; height:68px !important; float:left; margin:0; overflow:hidden; cursor:pointer; border:1px solid #f3f3f3; border-right:1px solid #ccc;}
.levers.alt .question.one
	{background:#f3f3f3 url(icon_age.png) no-repeat 30px 20px; border-left:1px solid #ccc;}
.levers.alt .question.two
	{background:#f3f3f3 url(icon_cost.png) no-repeat 23px 20px}
.levers.alt .question.three
	{background:#f3f3f3 url(icon_pct.png) no-repeat 26px 20px}
.levers.alt .question.four
	{background:#f3f3f3 url(icon_savings.png) no-repeat 25px 20px}
.levers.alt .question.five
	{display:none}
.question .btn-close
	{display:none}
.levers.alt .question.on .btn-close
	{position:absolute; right:5px; top:6px; width:25px; height:10px; display:block; text-align:center; padding-top:5px; 
	 cursor:pointer;  background:url(btn_close.png) no-repeat center right; background-size:auto 100%} 

.question .current-val
	{display:none; font-size:24px; padding:0 5% 0 86px; color:#82c342;}
.question.short .current-val
	{font-size:20px}
.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 .text	
	{position:absolute; width:33%; right:0; top:2em; line-height:1.5;
	 transition:opacity 0.4s ease-in; -webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in}
.question .text span
	{font-size:24px;}
.question .textfield
	{width:46%; padding:4px; font-size:2em;}
.question .text	label
	{font-size:18px;}	
.lbl-or
	{width:92%; border-top:1px solid #81c342; margin:2em 0 0; text-align:center;}
.lbl-or span
	{display:inline-block; color:#81c342; font:300 24px 'Open Sans', sans-serif; background:#fff; padding:10px 20px; margin-top:-1em; line-height:1}
.slider	
	{position:absolute; width:33%; right:0; top:15px;}
.levers.alt .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}
.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 .slider .bg
	{width:93%}
.levers.alt .slider.pct .bg
	{margin-top:30px}
.slider.age .bg
	{margin-top:25px}
.slider.pct .bg
	{margin-top:30px}
.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}	
.slider .bg .tick
	{position:absolute; top:23px; margin-left:-8px; font-size:14px; color:#666}
.slider.pct .bg .tick
	{width:55px; margin-left:-28px; text-align:center;}
.slider .bg .marker
	{position:absolute; bottom:-25px; left:0; width:50px; height: 50px; margin:0 0 5px -22px; padding:0; cursor:url(openhand.cur), move; 
	 background:url(bg_slider_pointer.png) center center no-repeat; border:none; z-index:10;}
.slider .bg .marker.grabbing {cursor:url(closedhand.cur), move;}
.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;}
.slider .bg .marker.grabbing .lbl
	{display:block}
.slider .bg .marker span
	{display:block; margin:30% 0 0; font-size:14px; font-weight:bold; text-align:center; color:#fff}
.question .btn-less, .question .btn-more
	{position:relative; top:1px; display:inline-block; width:15%; height:40px; 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; color: #999999;}
.levers.alt .question .hover, .levers.alt .question.on .hover
	{display:none;}
.levers.alt .question:hover .hover
	{left:0; opacity:1}

.levers.alt .questions
	{width:100%;}
.levers.alt .question
	{margin:0; 
	 transition-delay:0s; -webkit-transition-delay:0s; -moz-transition-delay:0s;}
.question p, .question .hover
	{margin-left:3%;}
.levers.alt .slider .bg .tick
	{font-size:12px; bottom:-30px}
.levers.alt .question.short
	{width:19%;}
.levers.alt .question.on
	{width:41%; cursor:default; background-color:#fff}
.levers.alt .slider, .levers.alt .question .text, .levers.alt .question .extra
	{opacity:0;
     transition: opacity 0s linear; -webkit-transition: opacity 0s linear; -moz-transition: opacity 0s linear;}
.levers.alt .question.on .slider 
	{width:66%; top:22px; opacity:1}
.levers.alt .question.on .text
	{width:73%; top:38px; opacity:1;
	 transition:opacity 0.4s 0.3s ease-in; -webkit-transition:opacity 0.4s 0.3s ease-in; -moz-transition:opacity 0.4s 0.3s ease-in}
.levers.alt .question p, .question h3
	{display:none}	
.levers.alt .question h3
	{display:block; padding:0.9em 2% 0 36%; font-size: 13px; 
	 transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out;}
.levers.alt .question.on h3
	{padding:0.2em 0% 0 23%;}
.levers.alt .question.short h3
	{padding:7.5% 5% 0 35%; 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%; 
	 transition:all 0.4s ease-out; -webkit-transition:all 0.4s ease-out; -moz-transition:all 0.4s ease-out;}
.levers.alt .question.one .current-val, .levers.alt .question.three .current-val
	{padding-left:40%}
.levers.alt .question.on .current-val
	{opacity:0}
.levers.alt .question.short .current-val
	{padding:0 5% 0 40%}
.levers.alt .question.three.short .current-val
	{font-size:18px}
.levers.alt .question .current-val br
	{display:none;}
	
.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 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; opacity:1; filter:alpha(opacity=100);
	 transition:all 0.3s 1.2s ease-in-out; -webkit-transition:all 0.3s 1.2s ease-in-out; -moz-transition:all 0.3s 1.2s ease-in-out;}
.btn-results.hide
	{display:none}
.btn-results.off
	{display:none}
.graph
	{position:absolute; left:5%; top:25%; bottom:4.7%; width:48%;border-bottom:1px solid #ccc;}
.graph .bg
	{position:absolute; top:0; left:0; right:0; bottom:0;}
.graph .legend 
	{position: absolute; top: -2em; left: 28%; right: 18%; opacity:0; filter:alpha(opacity=0);
	 transition:opacity 0.3s 0s ease-in; -webkit-transition:opacity 0.3s 0s ease-in; -moz-transition:opacity 0.3s 0s ease-in;}
.graph .legend.show
	{opacity:1; filter:alpha(opacity=100);}
.graph .legend .current
	{float:left; margin-right:10%; font-size:14px;}
.graph .legend .goal
	{float:left; font-size:14px;}
.graph .legend .chip
	{width: 1em; height: 1em; float: left; margin-top:3px; margin-right: 1em; background:#408800}
.graph .legend .goal .chip
	{background:#81c342;}
.graph .lbl-x
	{position:absolute; bottom:-3.5em; left:0; right:0; text-align:center; color:#999; opacity:0; filter:alpha(opacity=0);
	 transition:opacity 0.3s 0s ease-in; -webkit-transition:opacity 0.3s 0s ease-in; -moz-transition:opacity 0.3s 0s ease-in;}
.graph .lbl-x.show
	{opacity:1; filter:alpha(opacity=100);}
.graph .col 
	{position: absolute; top: 0; bottom: 0; width: 17%; margin-left: 5%; opacity:0; filter:alpha(opacity=0);
	 transition:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in; -moz-transition:all 0.3s 0s ease-in;}
.graph .col:hover
	{z-index:1000;}
.graph .col.on
	{opacity:1; filter:alpha(opacity=100);}
.graph .col.two
	{left:25%;}
.graph .col.three
	{left:50%;}
.graph .col.four
	{left:75%;}
.col label 
	{position: absolute; bottom: -2em; width: 100%; text-align: center; color:#999}
.graph .bg .tick
	{position:relative; border-top:1px solid #ccc; height:9.7%; opacity:0; filter:alpha(opacity=0);
	 transition:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in; -moz-transition:all 0.3s 0s ease-in;}
.graph .bg .tick.on
	{opacity:1; filter:alpha(opacity=100);}
.graph .bg .tick label
	{position:absolute; top:-0.8em; height:1em; left:-7%; color:#999; background:#fff; padding-right:1%}
.graph .bar
	{position:absolute; width:80%; height:0; bottom:0;  z-index:2; background:#408800; opacity:1; filter:alpha(opacity=100);}	
.graph .col.on .bar
	{transition:all 0.3s 0s ease-in-out, z-index 0s 0.15s linear; -webkit-transition:all 0.3s 0s ease-in-out, z-index 0s 0.15s linear; -moz-transition:all 0.3s 0s ease-in-out, z-index 0s 0.15s linear;}
.graph .bar.hold
	{height:0 !important;}
.graph .bar .hover 
	{display:none; position:absolute; top:0; margin:-90% 0 0 -15%; padding:6% 20%; border: 1px solid #ccc; background: #fff; text-align: center; color: #81c342; font-size: 18px;}
.graph .bar .hover .savings
	{color:#408800}
.graph .bar .hover .tail
	{position:absolute; bottom:-11px; left: 45%; width:19px; height:12px; background:url(bg_hover_tail.png) no-repeat center center; background-size: 100% auto;}
.graph .col:hover .hover
	{display:block;}
.graph .bar.top
	{z-index:10;}
.graph .bar.goal
	{background:#81c342; left:20%; height:80%}
.col.alt .bar.goal {
    zz-index: 20;
}
.graph .bar .lbl
	{position:absolute; top:0; right:0; padding:108px 10px 1px 0; font-size:18px; text-align:right; border-right:1px solid #000; color:#64a925; letter-spacing:-0.04em;}
.graph .bar.savings .lbl
	{color:#408800; top:auto; bottom:0; padding:0 10px 104px 0; white-space:nowrap}	
.graph .bar.alt .lbl
	{width:200%; left:100%; right:auto; padding-left:10px; border-left:1px solid #000; border-right:none; text-align:left}
.graph .bar .lbl span
	{display:block; font-size:26px; letter-spacing:-0.015em; margin-bottom:-5px;}
.graph .bar.savings .lbl span
	{font-size:36px; margin-top: -2px;}	
.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 0s ease-in; -webkit-transition:all 0.5s 0.2s ease-in-out, opacity 0.3s 0s ease-in; -moz-transition:all 0.5s 0.2s ease-in-out, opacity 0.3s 0s ease-in;}
.results.show
	{height:8em; opacity:1; filter:alpha(opacity=100);
	 transition:opacity 0.3s 0.8s ease-in; -webkit-transition:opacity 0.3s 0.8s ease-in; -moz-transition:opacity 0.3s 0.8s ease-in;}
.page2 h3
	{text-align:center; font-size: 30px; margin-top:28px;}
.pct
	{font-size:36px; color:#408800;}
.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;}
.results p.off, .suggest .off
	{display:none}
.suggest
	{position: absolute; border: 1px solid #81c342; right: 2.1%; top: 25%; bottom:4.7%; width: 38%; text-align: left; font-size: 18px; 
	 padding: 15px; line-height: 1.25; letter-spacing:0.015em; background:#f3f3f3;opacity:0; filter:alpha(opacity=0);
	 transition:opacity 0.5s 0s ease-in; -webkit-transition:opacity 0.5s 0s ease-in; -moz-transition:opacity 0.5s 0s ease-in;}
.suggest.delay
	{transition-delay:2s; -webkit-transition-delay:2s; -moz-transition-delay:2s;}
.page2.show .suggest
	{opacity:1; filter:alpha(opacity=100);}
.suggest .save
	{color:#408800;}	
.suggest h3
	{text-align:left; margin:0; opacity:1; filter:alpha(opacity=100);
	 transition:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in; -moz-transition:all 0.3s 0s ease-in;}
.suggest p span
	{opacity:1; filter:alpha(opacity=100);
	 transition:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in; -moz-transition:all 0.3s 0s ease-in;}
.suggest.hide p span.under, .suggest.hide p span.over, .suggest.hide h3
	{opacity:0; filter:alpha(opacity=0);
	 transition:all 0.3s 0s ease-in; -webkit-transition:all 0.3s 0s ease-in; -moz-transition:all 0.3s 0s ease-in;}
.suggest .slider
	{left:7%; width:95%; top:65%; height:5em; margin:0 auto;}
.suggest .slider .bg .marker
	{width:60px; height:60px; bottom:-31px; background:url(bg_slider_pointer_lg.png) center center no-repeat}
.suggest .slider .bg .marker span
	{margin:34% 0 0;}
.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
	{background:#333; padding-bottom:20px; color:#ccc; text-align:center; opacity:0;
	 transition:all 0.3s 1.2s ease-in;; -webkit-transition:all 0.3s 1.2s ease-in; -moz-transition:all 0.3s 1.2s ease-in;}
.footer.show
	{opacity:1}
.footer p
	{margin:10px 25%; padding-top:10px; font-size: 11px; width: 50%}
.footer p.hide
	{display:none}	
table.rates 
	{border-collapse: collapse; margin: 12px 15px 10px; width: 30%;}
table.rates td, table.rates th {
  border-bottom: 1px solid #ccc;
  padding: 0.3rem;
  text-align: left;
}
table.rates th
	{background-color: #ebebeb;}
@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}
.slider .bg .marker.grabbing .lbl
	{display:none}
}

@media screen and (max-width: 1100px) {
.intro  p
	{width:85%;}
h1 
	{font-size:40px;}
.results.on
	{height:14em;}
.levers.alt .question h3
	{font-size:13px;}
.levers.alt .question.short
	{ background-position:13px 45%; background-size:auto 33%}
.levers.alt .question.short h3
	{padding:7.5% 5% 0 27%;}
.levers.alt .question.short .current-val
	{padding:0 5% 0 32%}
.graph .legend
	{left:20%; right:0}
}


@media screen and (max-width: 900px) {
.question p
	{min-height:2em; width:55%; margin-left:3%}
.question .text, .slider
	{width:40%;}
.question .hover
	{width:55%; margin-left:3%}
.question.two .hover
	{width:55%;}
.suggest
	{font-size:16px;}
.page2 h3
	{font-size:24px;}
.levers.alt .question .current-val
	{font-size:20px;}
.levers.alt .question h3
	{font-size:12px;}
.levers.alt .question.one
	{background-position:20px 20px;}
.levers.alt .question.one, .levers.alt .question.two, .levers.alt .question.three, .levers.alt .question.four
	{background-position:20px 20px;}
.levers.alt .question .current-val
	{font-size:20px;}
}

@media screen and (max-width: 800px) {
.bg-img
	{top:14px}
.intro.show
	{height:400px;}
.intro p
	{width:96%; margin: 4% auto 0}
.page1 img
	{width:25%; height:auto;}
.page1 img.land-calc
	{width:16%;}
.intro.short .page1 img
	{width:14%;}
.intro.short .page1 img.land-calc
	{width:10%;}
.intro.short p
	{font-size:17px;}
.intro.short
	{height:130px;}
.page2.show
	{height:340px;}
.levers.on
	{padding-top:14em; margin-top:-14em}
.levers.alt .question h3
	{padding-left:60px;}
.levers.alt .question.three h3, .levers.alt .question.four h3
	{padding-top:0.4em}
.levers.alt .question h3.grabbing
	{opacity:0;}
.question p
	{font-size:22px; line-height:1.5; padding-bottom:0.5em}
.question .text	label
	{font-size:15px;}
.question .hover
	{width:83%;}
.question .current-val, .levers.alt .question .current-val
	{padding-left:70px; font-size:18px;}
.slider .bg.mobile .marker .lbl
	{display:block;}
.slider .bg.mobile .marker span
	{display:none;}
.question .btn-less, .question .btn-more
	{display:none;}
.question .textfield
	{width:67%;}
.levers.alt .question p
	{margin-left:80px}
.levers.alt .question.on .hover
	{font-size:16px;}
.levers.alt .question.on .slider
	{left:80px; top:23px; width:71%}
.levers.alt .question.one, .levers.alt .question.two, .levers.alt .question.three, .levers.alt .question.four
	{background-position: 15px center; background-size:auto 50%;}
.levers.alt .question.short
	{background-size:auto 33%}

.graph
	{top:36.3%}
.graph .bg .tick
	{height:9.5%;}
.graph .col
	{width:15%; margin-left:12%;}
.graph .col.two
	{left:22%;}
.graph .col.three
	{left:44%;}
.graph .col.four
	{left:66%;}
.graph .bar .hover
	{font-size:16px; margin:-120% 0 0 -45%;}
.suggest
	{top:28%; font-size:14px; line-height:1.4;}
.results
	{margin-top:5.5%;}
.results.on
	{height:8em;}
.results p
	{margin:0;}
.footer p
	{margin:10px 5%; padding-top:10px; font-size: 11px; width: 90%}
}

@media screen and (max-width: 700px) {
.bg-img	{right:25%; top:20%}
.intro h1, .intro h2
	{text-align:center; width:94%}
.intro h2 
	{padding-top:2%}
.question.one, .question.two, .question.three
	{background-size:7% auto}
.levers.alt .question h3.alt
	{padding-top:3px;}	
.levers.alt .slider .bg
	{width:83%}

.levers.alt .question h3, .levers.alt .question.three h3, .levers.alt .question.four h3
	{position:absolute; top:8px; width:100%; margin:0; padding:0; font-size:12px; text-align:center; }
.levers.alt .question .current-val, .levers.alt .question.one .current-val, .levers.alt .question.three .current-val
	{font-size: 32px;text-align: center; width:100%; margin:0; padding:12% 0 0 0;}
.levers.alt .question.two .current-val, .levers.alt .question.four .current-val
	{padding:17% 0 0 0; font-size:20px;}
.levers.alt .question.one 
	{background-size: auto 26%; background-position: center 94%;}
.levers.alt .question.two, .levers.alt .question.three, .levers.alt .question.four 
	{background-size: auto 30%; background-position: center 94%;}	
.levers.alt .question.two.on, .levers.alt .question.three.on, .levers.alt .question.four.on
	{background-size:auto 23%}
	
.levers.alt .question.short h3
	{position:absolute; top:3px; width:100%; margin:0; padding:0; font-size:12px; text-align:center; }
.levers.alt .question.short .current-val, .levers.alt .question.three.short .current-val
	{font-size: 32px;text-align: center; width:100%; margin:0; padding:20% 0 0 0;}
.levers.alt .question.two.short .current-val, .levers.alt .question.four.short .current-val
	{padding:27% 0 0 0; font-size:18px;}
.levers.alt .question.one.short 
	{background-size: auto 26%; background-position: center 94%;}
.levers.alt .question.two.short, .levers.alt .question.three.short, .levers.alt .question.four.short 
	{background-size: auto 30%; background-position: center 94%;}	

.levers.alt .question.on .slider
	{left:10%; top:12px; width:95%}
.levers.alt .question.on .text
	{left:10%; top:30px; width:85%;}
.levers.alt .question.on h3
	{padding:0}	
.question .btn-less, .question .btn-more
	{padding-top:0; height:31px;}
.question .textfield
	{padding:4px 4px 0; font-size:1.5em;}
.levers.alt .question.on .btn-close
	{top:3px; right:2px;}
.page2 h3
	{font-size:20px;}
.pct
	{font-size:30px;}

.results.on
	{height:16em}
.results h3
	{font-size:24px;}
.results p
	{font-size:15px;}
.graph .bar
	{height:70px;}
.graph .bar .lbl
	{padding-top: 90px;}
.graph .bar.savings .lbl
	{padding-top:0; padding-bottom:90px;}
.graph .legend
	{left:16%;}
.graph .legend .current, .graph .legend .goal
	{font-size:12px;}
	
.slider .bg .tick
	{font-size:12px;}
.suggest
	{font-size:14px;}
.suggest .slider
	{top:58%;}
.suggest .slider .bg .marker .lbl
	{font-size:16px; padding:0 5px 5px; background:#f3f3f3;}
table.rates 
	{width: 97%;}
}

@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.show
	{height:280px}	
.intro.short
	{height:80px}
.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
	{font-size: 20px; line-height: 1.4; z-index:2;}
.page1 img
	{width:18%; height:auto; margin-top:4%}
.intro.short .page1 img
	{opacity:0}
.page1 img.land-calc
	{width:12%;}	

.question p
	{width:44%}
.question .hover
	{margin-top:0.5em;}
.question .text, .slider
	{width:48%; margin-bottom:3em;}
.question.two .hover
	{width:92%;}
.extra
	{text-align:center;}
.btn-results
	{width:45%}
.footer	
	{height:10em}

.page2.show
	{height:auto;}
.page2 h3
	{font-size:20px;}
.pct
	{font-size:28px;}
.suggest
	{position:relative; width:90%; margin:9% 0 0 4%;}	
.suggest br
	{display:none;}	
.suggest label
	{display:inline-block; width:45%; text-align:left;}
	
.graph
	{position:relative; left:9%; width:87%; height:140px; margin-top:8%}
.graph .bar
	{height:50px;}
.graph .bg .tick
	{height:9.3%; font-size:10px;}
.graph .bar .lbl
	{padding-top:60px; white-space:nowrap}
.graph .bar.savings .lbl
	{padding-bottom:60px;}
.question p
	{width:94%; font-size:20px; padding-bottom:0.5em; min-height:inherit;}
.slider
	{position:relative; left:5%; width:100%; min-height:3em}
.question .text
	{position:relative; left:5%; width:100%;}
.question .hover
	{width:94%; font-size:16px;}
.question .text	label
	{font-size:18px}	

.question.one.on, .levers.alt .question.one.on
	{height:8em !important; background-position: 10px 12px; background-size: auto 32%;}
.question.two.on, .levers.alt .question.two.on
	{height:12em !important; background-position: 8px 12px; background-size: auto 32%;}
.question.three.on, .levers.alt .question.three.on
	{height:11em !important; background-position: 11px 12px; background-size: auto 32%;}
.question.four.on, .levers.alt .question.four.on
	{height:8em !important; background-position: 11px 12px; background-size: auto 32%;}

.questions.show .question.short, .levers.alt .question.short
	{width:0px; margin:0 0 0 -2px}

.levers.alt .question.on
	{width:97%;  padding-bottom:10px; background-color: #efefef;}
.levers.alt .question.on h3
	{display:none}
.levers.alt .question.alt p
	{width:69%; min-height:1em; margin:0 0 0 22%; font-size:16px; display:block; opacity: 0;
	 transition:opacity 0.3s 0s ease-out; -webkit-transition:opacity 0.3s 0s ease-out; -moz-transition:opacity 0.3s 0s ease-out;}
.levers.alt .question.alt.on p
	{opacity:1;
	 transition:opacity 0.3s 0.4s ease-in; -webkit-transition:opacity 0.3s 0.4s ease-in; -moz-transition:opacity 0.3s 0.4s ease-in;}
.levers.alt .question.on .slider
	{position:relative; width:76%; height:5em; left:23%; top:25px; margin-left:0;  display:block}	
.levers.alt .question.on .slider .bg
	{margin-top:5px;}
.levers.alt .question.on .hover
	{width:95%; bottom:90%; margin:10px 0; font-size:12px; line-height:1.2}
.levers.alt .question.on .text
	{top:4%; left:19%}
.btn-results
	{width:60%}
.results h3
	{font-size:20px}
.results p
	{font-size:14px}
	
.levers.alt .question .current-val
	{position:absolute; top:0;}
.levers.alt .question .current-val span
	{font-size:13px;}	
.levers.alt .question .current-val br
	{display:block;}
.levers.alt .question.two .current-val
	{padding-top:18%;}
.levers.alt .question.on .btn-close
	{height:10px; top:5px; right:5px;}
}

@media screen and (max-width: 500px)  {
.intro.show
	{height:230px}
.intro.short 
	{height: 70px;}
.intro h1
	{font-size:24px}
.intro p, .intro .page2 p
	{font-size:15px; font-weight:normal}
.results p
	{font-size:13px;}
}	
@media screen and (max-width: 450px)  {
.bg-img	
	{right:26%; top:22%; width:40%}
.intro h1
	{font-size:21px}
.intro h2
	{font-size:18px}
.suggest p
	{margin:0;}
.levers.alt
	{min-height:70px;}
.levers.alt .question h3, .levers.alt .question h3, .levers.alt .question.three h3, .levers.alt .question.four h3
	{font-size:9px;}
.levers.alt .question.one 
	{background-size: auto 0%; padding-bottom:0;}
.levers.alt .question.two, .levers.alt .question.three, .levers.alt .question.four 
	{background-size: auto 0%; padding-bottom:0;}	
.levers.alt .question.two .current-val, .levers.alt .question.four .current-val
	{font-size:18px; line-height:1; padding-top:33%;}	
.levers.alt .question .current-val, .levers.alt .question.one .current-val, .levers.alt .question.three .current-val
	{padding-top:21%;}
.footer	
	{height:11em}
.slider .bg .marker span
	{font-size:12px; margin-top:30%;}

}

@media screen and (max-width: 400px)  {
.intro p, .intro .page2 p
	{font-size:14px}
.levers.alt .question.on .slider
	{left:55px; width:70%}
.results.on
	{height:22em}
.footer	
	{height:16em}
.page2 h3.ttl
	{padding-bottom:1em}
.levers.alt .question .current-val, .levers.alt .question.one .current-val, .levers.alt .question.three .current-val
	{font-size:24px; padding-top:25%}
.levers.alt .question.two .current-val, .levers.alt .question.four .current-val
	{font-size:16px; padding-top:38%;}
.graph .legend
	{left:6%;}
}

@media screen and (max-width: 350px)  {
.intro h1
	{font-size:18px;}
.intro h2
	{font-size:16px;}
	
.levers.alt .question .current-val, .levers.alt .question.one .current-val, .levers.alt .question.three .current-val
	{font-size:16px; padding-top:57%}
.levers.alt .question.two .current-val, .levers.alt .question.four .current-val
	{font-size:12px; padding-top:68%;}
.suggest
	{width:83%; margin-top:21%;}
}