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(ss2b.jpg) no-repeat top left; height:900px; width:720px;}
.header
	{display:block; position:relative; width:100%; height:40px; 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 7px; cursor:pointer;
	 text-decoration: none; color: #fff; letter-spacing:0.04em}
.intro
	{position:relative; width:100%; height:393px; display:block; background:#fff; overflow:hidden}
.intro h1
	{width:55%; margin:0 2.9% 2%; padding-top:7.9%; font-size: 2.6em; font-weight: normal; color: #000; letter-spacing: .03em; line-height:1.15}
.intro p
	{width:48%; margin:0 2.9%; letter-spacing:0.03em; line-height:1.4; color:#000}
.levers
	{position:relative; width:97%; margin:5px 0 7px 1.3%; border:1px solid #ccc;}
.levers h3
	{display:block; position:relative; margin:0; padding:1.3% 0 1.3% 1.3%; font-size:1.4em; font-weight:normal; color:#1962c8;
	 background:#ebebeb; z-index:3}
.levers.red h3
	{color:#dc4316}
.levers .btn-toggle
	{display:block; position:relative; z-index:4; float:right; width:44px; height:39px; border-left:1px solid #fff; cursor:pointer;
	background: url(btn_open_blue.png) no-repeat center 15px }
.levers.open .btn-toggle
	{background: url(btn_close_blue.png) no-repeat 13px 15px}
.levers.red .btn-toggle
	{background: url(btn_open_red.png) no-repeat center 15px }
.levers.red.open .btn-toggle
	{background: url(btn_close_red.png) no-repeat 13px 15px }
.levers .btn-prev, .levers .btn-next
	{display:none; position: absolute; width: 22px; top: 2em; bottom: -1px; right:-1px;  z-index: 2; border:1px solid #ccc;
	 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;}
.levers .questions
	{display:block; height:8px; margin:0 0 0 -1px; overflow:hidden}
.levers.open .questions
	{height:9.4em}
.question
	{display:block; float:left; width:32.7%; height:101px; margin:13px 0 7px; border-left:1px solid #ccc; background:#fff}
.question.two
	{width:34%}
.question p
	{width:80%; font-size:1.1em; margin:0 auto; text-align:center; line-height:1.3}
.question .savings	
	{width:94%; margin:3px auto 0}
.question .savings span
	{font-size:26px; color:#bbb}
.question .savings input.savings-text
	{width:46%; margin-left:2%; padding-bottom:4px; font-size:1.85em; text-align:right}
.question .savings input[type="radio"]
	{margin-bottom:1em; margin-left:1.5em}
.question .savings input[type="radio"]:first-child
	{margin-left:0.5em}	
.question .btn-save-less, .question .btn-save-more
	{position:relative; top:1px; display:inline-block; width:15%; height:35px; cursor:pointer; margin:0 0 0 3%;
	 color:#fff; font-size:30px; font-weight:bold; line-height:1; text-align:center; border:1px solid #fff;
	 background:#bbb; border-radius: 15%; -webkit-border-radius: 15%; -moz-border-radius: 15%}
.question .btn-save-less.on, .question .btn-save-more.on
	{background:#777}
.question div.slider	
	{position:relative; width:85%; height:4.4em; margin:0 auto; background:url(bg_slider_bar.png) left bottom no-repeat; background-size:100% auto;}
.question div.slider .bg
	{position:absolute; bottom:2px; left:1px; width:95%; padding-top:10%;  border:none; cursor:pointer;}
.question div.slider .bg .marker
	{position:absolute; bottom:-2px; left:0; width:36px; height: 36px; margin:0 0 5px -15px; padding:0; text-align:center; color:#fff; cursor:url(openhand.cur), move; 
		background:url(bg_slider_pointer_blue.png) center center no-repeat; border:none;}
.red .question div.slider .bg .marker
	{background:url(bg_slider_pointer_red.png) center center no-repeat;}
.question div.slider .bg .marker span
	{display:block; margin-top:6px}
.question div.slider .bg .marker.grabbing {cursor:url(closedhand.cur), move;}
.question .option
	{display:block; float:left; border:1px solid #ccc; color:#ccc; font-size:2.4em; margin:0.5em 2% 0; padding:0 3%;
	 border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer}
.question .option.first
	{margin-left:9%}
.question .option:hover
	{background:#bbb; color:#fff}
.question .option.on, .question .option.on:hover
	{background:#1962c8; color:#fff}
.red .question .option.on, .red .question .option.on:hover
	{background:#dc4316; color:#fff}
.footer	
	{font-size:0.85em; margin: 19px 10px; line-height: 1.3; letter-spacing: 0.005em;}
.intro img
	{float:right}
.page1, .page2
	{position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; background:#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
	{opacity:1;filter: alpha(opacity=100);}
.page1
	{background:none; }
.page2 h2
	{width:98%; margin:0 2.9% 2%; padding-top:1.5%; font-size: 2.4em; font-weight: normal; color: #000; letter-spacing: -.02em; line-height:1.15}
.legend	
	{position:absolute; left:1%; right:1%; bottom:1%; padding:5px 10px; border:1px solid #ccc; z-index:2;}
.legend .red
	{display:none}
.legend.red .red, .legend.multi .red
	{display:block}	
.legend	ul
	{margin:0; padding:0}
.legend li
	{list-style:none; display:block; float:left; font-size:.85em; letter-spacing:0.02em; margin-right:9px;}
.wedge	
	{display:block; float: left; width:10px; height:11px; border:1px solid #fff; margin:0 5px 0 10px;}
.legend li:first-child .wedge
	{margin-left:0;}
.graph
	{position:absolute; left:0.5%; right:0; bottom:10%; width:1026px; height:270px; opacity:0;
	 transition:all 0.3s 0.2s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out;; -moz-transition:all 0.3s 0s ease-in-out;}
.graph.show
	{opacity:1}
.graph .bars
	{position:relative; float:left; height:251px; top:16px;
	 transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,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;}
.graph .bars:hover
	{z-index:100}
.graph .bars .lbl
	{position:absolute; width:100%; bottom:-16px; text-align:center; color:#999}
.graph.multi .bars .lbl
	{bottom:-12px; font-size:.8em}
.graph .bar
	{position:absolute; left:19%; bottom: 18px; width:68%; height:1px; 
	 transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,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;}
.graph.multi .bar
	{position:absolute; left:9%; width:34%; height:1px;}
.graph .bar.bg-red
	{display:none; left:48%}
.graph.multi .bar.bg-red
	{display:block}
.graph.red .bar.bg-blue
	{display:none}
.graph.red .bar.bg-red
	{display:block; left:19%; width:68%;}
.graph .bar .diff
	{position: absolute; bottom: 0; height:1px; width: 100%; z-index:2;
	 transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,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;}
.graph .bar .hover
	{display:none; position:absolute; width:115px; top:20%; left:55%; z-index:1; background:#fff;
	 -webkit-box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5); box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5);}
.graph .bar .hover.short
	{top:-50%}
.graph .bar .hover.very.short
	{top:-150%}
.graph .rev .bar .hover
	{left:auto; right:55%}
.graph .bar .hover:before
	{content:"\0020"; position:absolute; left:-9px; top:30%; width:9px; height:19px; color:#fff; font-size:1.5em; background:url(hover-arrow-left.png) no-repeat center center; background-size:100% auto}
.graph .rev .bar .hover:before
	{content:"\0020"; right:-9px; left:auto;  background:url(hover-arrow-right.png) no-repeat center center; background-size:100% auto}
.graph .bar .hover .y-amt
	{position:relative; font-size:1.08em; text-align:right; padding:3px 5px 0;  margin:0px 25px 0 10px}
.graph .bar .hover .y-amt:first-child
	{padding-top:10px}
.graph .bar .hover .y-amt .wedge
	{position:absolute; right:-22px;  bottom:2px}
.graph .bar .hover .data
	{margin:3px 30px 0 0; font-size:1.38em; text-align:right}
.graph .bar:hover
	{z-index:100}
.graph .bar:hover .hover
	{display:block;z-index:100}			
.bg-blue-2, .y-amt .wedge
	{background:#1962c8}
.bg-blue, .y-amt.equals .wedge
	{background:#8cb0e3}
.bg-red-2, .bg-red-2 .wedge, .bg-red .wedge
	{background:#dc4316}
.bg-red, .bg-red .y-amt.equals .wedge
	{background:#eb9061}
.y-amt.equals
	{border-bottom:1px solid #aaa;}
.info
	{position: absolute; width: 23.5%; left: 12.5%; top: 17%; z-index:200; border: 1px solid #aaa; opacity:0;
	 background:#fff;
	 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;
	 -webkit-box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5); box-shadow: 3px 1px 5px 0px rgba(0,0,0,0.5);}	
.data	
	{margin:0 0 0 12px; font-size:1.85em; color:#1962c8;}
.data.red, .total .data .red, .bg-red .data
	{color:#dc4316}
.addtl h3, .addtl .data
	{position:relative; height:1px; margin: 0 0 0 12px; overflow:hidden}
.addtl .min-max	
	{display:block; text-align:right; margin-top:6px; background:#efefef; cursor:pointer}
.addtl .min, .info .data.red, .info.red .data, .total .data .red, .total.red .data span
	{display:none}
.info.multi .data.red, .info.red .data.red, .total.red .data .red
	{display:block}
.info.multi .data.blue
	{margin-bottom:0}
.total h3
	{text-align:center; margin:8px 12px 5px}
.total.multi .data span
	{display:block; float:left; margin-right:0; padding:0 5px;}
.total.multi .data span.red
	{margin-right:14px; border-left:2px solid #585858}
.addtl .max
	{display:inline-block;}
.addtl .min, .addtl .max
	{font-size:1.08em; padding:2px; color:#1962c8}
.addtl .min:after, 	.addtl .max:after
	{content:"\25bc"; padding-right:14px; font-size:0.7em; color:#1962c8}
.addtl .min:after
	{content:"\25b2"}
.addtl.more .min
	{display:inline-block}	
.addtl.more .max
	{display:none}	
.addtl.more h3
	{height:1em; margin:17px 0 0 12px;}
.addtl.more h3.estimated
	{height:2.3em}
.addtl.more .data
	{height:1.2em; margin:0 0 17px 12px}
.addtl div, .addtl h3
	{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;}
.total
	{position:absolute; top:7%; right:0; opacity:0;
	 transition:all 0.3s 0.3s ease-in-out; -webkit-transition:all 0.3s 0s ease-in-out; -moz-transition:all 0.3s 0s ease-in-out;}	
.total.show, .info.show
	{opacity:1}
.total .data	
	{height:268px; border:none; margin:12px 3px 0 0;}
.total .data span
	{display: block; margin: -13px 0 0 0; text-align: center; background: #fff;}
.disclosure 	{position:fixed; top:-100%; width:720px; 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}



@media screen and (min-device-width: 568px)  {
.header .mobile-nav .btn-disclose:hover
	{background:#5c9637}
.question .option:hover
	{background:#bbb; color:#fff}
.mobile-nav:hover
	{overflow:visible; background-color:#82b641}
	
}

@media screen and (max-width: 719px), screen and (max-device-width:980px) {
#interactive
	{width:100%}
#interactive, .main
	{min-height:95%; border:none; background:url(bg_hatching.png) left bottom no-repeat; background-size:100% auto; height:100%}
.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 h1
	{font-size:2.4em}
.page2 h2
	{font-size:2.1em}
.levers
	{font-size:0.85em}
.levers .questions
	{width:100%;}
.levers .question.one
	{width:35%}
.levers .question.ror
	{width:30%}
.question .option
	{font-size:2em;}
.levers .btn-toggle
	{background-position:13px 8px !important}
.legend li
	{font-size:.66em}	
.disclosure 
	{width:100%}
.question .savings input.savings-text
	{width:40%}
}

@media screen and (max-width: 600px) {
.intro h1
	{width:96%; padding-top:3%; font-size:2em;}
.intro p
	{width:96%}
h3	{font-size: 0.85em; font-weight: bold;}
.header .logo
	{margin-left:24%; width:50%; height:2.3em; background-size:auto 100%}
.page1.show
	{top:62%; background:rgba(255,255,255,.85); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)";}
.page2 h2
	{font-size:1.85em}
.data
	{font-size:1.5em}
.total
	{right:10%}
.total .data
	{border:none; margin-top:0}
.total .data span
	{margin-top:-6px; margin-right:0}
.total.multi .data span.red
	{margin-top:0; margin-right:0; float:none; border:none}
.total.multi .data span
	{padding-right:0}
.info	
	{left:5.5%; width:45.5%}
.graph
	{height:255px}
.graph .bars
	{height:230px;}
.graph.multi .bars .lbl
	{margin-left:-10%}
.graph.multi .bar.bg-red .lbl
	{bottom:-22px}
.legend li
	{font-size:.85em}	
.legend li.first
	{clear:left}
.legend .wedge
	{margin:0 5px 0 0}
.levers
	{overflow:hidden}
.levers .questions
	{width:800px; margin-left:22px; 
	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;}
.questions.pos-1
	{margin-left:-259px}
.questions.pos-2
	{margin-left:-532px}
.levers .btn-toggle
	{height:30px}
.levers.open .btn-prev, .levers.open .btn-next
	{display:block; opacity:.3}
.levers.open .btn-prev.on, .levers.open .btn-next.on
	{opacity:1; cursor:pointer;}
.levers.open .question
	{padding-top:13px; margin-top:0px;}
}

@media screen and (max-width: 450px) {
.question .savings input.savings-text
	{width:39%;}
.page1.show
	{top:40%}
.intro img
	{height:81%; transition:height 0.3s 0s ease-in-out; -webkit-transition:height 0.3s 0s ease-in-out; -moz-transition:height 0.3s 0s ease-in-out}
.levers .question.one
	{width:27%;}
.questions.pos-1
	{margin-left:-195px;}
.levers .question.two
	{width:26%;}
.questions.pos-2
	{margin-left:-404px;}
}

@media screen and (max-width: 400px) {
.levers .btn-toggle
	{background-position: 13px 4px !important;}
.intro
	{height:358px;}
.graph
	{height:225px}
.graph .bars
	{height:185px}
.total
	{right:2%}
}

@media screen and (max-width: 350px) {
.graph
	{height:240px}
.intro
	{height:393px;}

}