.span12.graphicPadTB30 {padding-top:0; padding-bottom:0;}

.wp-graphics-tooltip{position:absolute;display:none;max-width:200px;padding:7px 9px;background:#fff;border:1px solid #ccc;text-align:left;box-shadow:0 0 2px rgba(0,0,0,.3); z-index:99999;}
.wp-graphics-tooltip p {margin-bottom:0;}

h1.franklin {font-family: FranklinITCProBold,Helvetica,Arial,sans-serif;}

p.credit {
border: 0;
margin-top: 10px;
padding-top: 10px;
font-size: 12px;
color: #777;
padding: 5px 0 2px;
margin: 0 0 10px;
line-height: 14px;

}

/*for embedded underwater chart*/
	#water-graphic .graphic-container {padding:10px;}
	#water-graphic p.body {font-size:18px;}
	#water-graphic .hidden-desktop {display:none !important;}

	.posabs {position:absolute;}
	.graphic-container {background-color: #f0efe9; /*width:100%; */box-sizing:border-box; height:auto; }
	body.graphic-container.iframe {background-color: #f0efe9 !important;}
	.graphic-container h1 {font-size:500%;}
	/*.graphic-container h4 {font-size:200%;}*/
	.umbrella {width:10%; float:left; margin-top:120px;}
	.chart-container {width:90%; float:left; padding-top:30px;}
	h2.postoni {margin-bottom:10px;}
	#stepper1 {/*width:14%; margin-right:1%; margin-top:120px; float:left; height:50px;*/}
	#line-chart {height:300px; width:auto; margin-bottom:30px;}
	.axis line {
		fill: none;
		stroke: #ddd;
		shape-rendering: crispEdges;
	}
	.chart text {
		font-size: 12px;
		fill: #999;
		font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
		-webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    cursor:default;
	}
	.chart .lines text {
		font-size:14px;
		font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
	    -webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    cursor:default;
	}
	.y.axis line {
		stroke: #ddd;
	}

	.y.axis .tick:nth-child(4) line {stroke:#ddd;}
	.domain {display:none;}

	.line {fill:none; stroke-width:7px; stroke-linecap:round;}
	.line.white-families {stroke:#afaa8f;}
	.line.black-families {stroke:#647633;}

	.dot {fill:#f0efe9; stroke-width:4px;}
	.dot.white-families {stroke:#afaa8f;}
	.dot.black-families {stroke:#647633;}

	.steps {width:100%; left:30%; top:45%; width: 510px;}
	.steps h4 {font-size:2em;}
	.cp {display:none; /*width:100%; display:none; position:absolute;*/}
	p.caps {text-transform:uppercase; margin-bottom:0; font-size:14px; color: #333; letter-spacing: 0;}
	.dot-label {background-color:#f0efe9;}
	.dot-label h4 {margin-bottom:0; padding-bottom:0;}
	.dot-label.white-families.one {top:60px !important;}
	.dot-label.black-families.two {top:180px !important;}

	/*.filter-menu {
	height: 38px;
	overflow: hidden;
	font-family: FranklinITCProBold,Helvetica,Arial,sans-serif;
	font-size: 1.3em;
	}

	ul.filter-menu, li.filter-menu {
	list-style: none;
	}

	.filter-menu li {
	line-height: 20px;
	float: left;
	margin-right: -1px;
	border: 1px solid #ddd;
	font-weight: 400;
	}*/
/*end underwater css*/


/*for stepper*/
	p.body.franklin.chatter { font-size: 1.5em;}
	.stepper {height:auto; margin-bottom:30px; }
	.nav-container {
		width: 100%;
		height: 70px;
		position: absolute;
	    top: 56.2%;
		left: 0;
		z-index: 1000;
	}

	.nav-btn {
		z-index:10;
		position: absolute;
		top: 5%;
		text-transform: uppercase;
		color: black;
		/*opacity: .5;*/
		width: 90px;
		-webkit-transition: opacity .5s ease-out,color .5s ease-out;
		-moz-transition: opacity  .5s ease-out,color .5s ease-out;
		-o-transition: opacity  .5s ease-out,color .5s ease-out;
		transition: opacity  .5s ease-out,color .5s ease-out;
	}

	.nav-btn:hover {
		color: black;
		opacity: .6 !important;
	}

	a.nav-btn:hover  {
		color: black;
		text-decoration: none !important;
	}


	.next-btn {
		right: -30px;
		text-align: right;
	}

	.next-btn i {
		margin-right: 5px;
	}

	.prev-btn {
		left: -30px;
		text-align: left;
		opacity: .1;
	}

	.prev-btn i {
		margin-left: 5px;
	}

	.iframe .prev-btn {
		left:0px;
	}
	.iframe .next-btn {
		right:0px;
	}

	p.franklin.instrux, p.franklin-light.instrux {
	line-height: 1.1em;
	font-size: .9em;
	color: #414141;
	width: 171px;
	position: relative;
	z-index: 1000;
	}

	.stepper-nav {
	width: 90px;
	margin: 0 auto;
	display: block;
	z-index: 1;
	padding-top:5px;
	}

	.filter-menu {
	margin: 0 auto;
	display: block;
	list-style-type: none!important;
	} 

	.filter-menu li {
	float: left;
	background-color: rgba(0,0,0,.3);
	border-radius: 5px;
	width: 10px;
	height: 10px;
	color: rgba(0,0,0,0);
	margin-right: 5px;
	cursor: pointer;
	margin-left:0;
	}

	.filter-menu li a {
	color: rgba(52,52,52,1);
	font-size: 0;
	}

	.filter-menu .active {
		background-color: rgba(52,52,52,1);
	}

	.view-loading {
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index: 99999;
	  background: #f0efe9 url(https://www.washingtonpost.com/wp-stat/graphics/static_assets/loading-90x40.gif) no-repeat center 40%;
	  background-repeat: no-repeat;
	  width: 100%;
	  height: 980px;

	}



	.intro {z-index:9998; width:80%; margin:0px auto ; position: relative;}

	/*#svgs {width:100%; positon:absolute;}*/
	.white-circle, .black-circle {display:none;}
	.white-circle path {fill:#f0efe9;}
	.white path {fill:none; stroke:#D8D4C4; stroke-width:7px;}
	.black-circle path {fill:#cfd3b8;}
	.black path, .black line {fill:none; stroke:#7e9142; stroke-width:7px;}
	.gap polyline {fill:none; stroke:#f0562b; stroke-width:7px;}
	.gap-circle circle {fill:#f0efe9; stroke:#f0562b; stroke-width:7px;}

	.content-panel {height:auto; width:100%; margin-bottom:50px;}
	.svg-container{height: 300px; width:auto; position:relative;}
	.svg-container svg {position:relative; margin-top:-19%; z-index:0; display:none;}

	h3.subhead {font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif; font-size:1.4em; padding:5px 7px; text-transform:uppercase; background-color:#333; color:#fff; float:left;}

	.content-panel .blurb {width:60%; float:right; margin-top:50px; font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif; font-size:1.2em;
}
	.content-panel img.illo {float:left; width:20%; margin-left:5%; z-index:-1;}
	.content-panel#overall  img.illo {width:15%; margin-left: 15.5%; margin-top: -5%;}
	.content-panel#home img.illo {margin-left: 8.6%; margin-top: -5.5%;}
	.content-panel#property img.illo {margin-left: 7%; margin-top: -1.5%;}
	.content-panel#money img.illo {margin-left: 8.6%; margin-top: 0%;}
	.content-panel#retirement img.illo {margin-left: 8.6%; margin-top: 2%;}
	.content-panel#trend img.illo {display:none;}

	.circle-label {text-align:center; bottom:10%; display:none; font-size:60px;}
	.circle-label h3 {margin-bottom:0; font-size:50px;}
	.circle-label.black {left:15%; color:#7e9142; text-align:right;}
	.circle-label.white {left:60%; color:#b0ab8f; text-align:left;}

	#coaster-graphic {position:relative; padding:0 30px;}
	#coaster-graphic h2.postoni {margin-bottom:5px; font-size:45px;}
	#coaster-graphic .intro p.body {font-size:1.5em;}
	#coaster-graphic .nav-container {top:66%;}
	#coaster-graphic .nav-container .prev-btn {left:3px;}
	#coaster-graphic .nav-container .next-btn {right:3px;}
	#coaster-graphic .svg-container {height:250px;}
	#coaster-graphic .blurb {margin-top:60px;}
	#coaster-graphic .content-panel .blurb p {font-size:16px !important; font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif; /*font-size:1.1em;*/ margin-bottom:5px;}
	#coaster-graphic .circle-label.black {left:13%;}

	#coaster-graphic .content-panel#home img.illo {margin-top:-2.5%;}
	#coaster-graphic .content-panel#property img.illo {margin-top:2%;}
	#coaster-graphic .content-panel#money img.illo {margin-top:3%;}
	#coaster-graphic .content-panel#retirement img.illo {width:13%; margin-top:5%;}
	#coaster-graphic .content-panel#overall img.illo {margin-top:-2%}


	.iframe .main-contentb {padding:0 5px;}
	.iframe #cmts {display:none;}

/* enterprise template breakpoints */
@media (max-width: 1200px) {

	.steps {left:20%;}

	/*CIRCLES*/
	.nav-container {top:56.2%;}
	.svg-container {height:244px!important;}
	.circle-label h3 { font-size: 35px; }
	.circle-label.black, {left:18%;}
	.circle-label.white, #coaster-graphic .circle-label.white {left:60%;}
	h3.subhead {font-size:1.4em;}
	#water-graphic .hidden-desktop {display:none !important;}
	#water-graphic h2.postoni {font-size:200%;}

	#coaster-graphic .nav-container {top:63%;}
	#coaster-graphic .circle-label.black {left:15%;}
	#coaster-graphic .circle-label {bottom: 25%;}
	#coaster-graphic .blurb p.last {display:none;}
	#coaster-graphic .content-panel#overall img.illo {margin-top:-7%;}
	#coaster-graphic .content-panel#home img.illo {margin-top: -7.5%;}
	#coaster-graphic .content-panel#property img.illo {margin-top:-3%;}
	#coaster-graphic .content-panel#money img.illo {margin-top: -2%;}
	#coaster-graphic .content-panel#retirement img.illo {margin-top:0%;}
	#coaster-graphic .blurb {margin-top:20px;}

}


@media (max-width: 979px) {
	.steps {left:10%; width:400px;}

	/*CIRCLES*/
	.graphic-container h1 {font-size: 350%;}
	.intro {width:100%;}
	.nav-container {top:48%;}
	.svg-container {height:188px !important;}
	.circle-label h3 { font-size: 25px; }
	.circle-label.black, #coaster-graphic .circle-label.black {left:19%;}
	.circle-label.white, , #coaster-graphic .circle-label.white {left:60%;}
	h3.subhead {font-size:1.4em;}
	#water-graphic .hidden-desktop {display:none !important;}
	#water-graphic h2.postoni  {font-size:200%;}

	/*CIRCLES IN THE ENTERPRISE TEMPLATE because it is really narrow at this width*/

	#coaster-graphic .nav-container {display:none;}
/*    #coaster-graphic .white path, .black path {display:none;}
*/    #coaster-graphic .white-circle, .black-circle {display:block;}
    #coaster-graphic .black-circle path {stroke:#7e9142; stroke-width:5px;}
    #coaster-graphic .white-circle path {stroke:#CEC9B9; stroke-width:5px;}
    #coaster-graphic .content-panel img.illo {margin:0 !important; width:45%; margin-right:5%;}
    #coaster-graphic .content-panel .blurb {width:50%;}
    #coaster-graphic .more-articles .heading {background:none !important;}
    #coaster-graphic .wpfooter {background:none !important;}
    #coaster-graphic .circle-label {display:block;}
    #coaster-graphic p.body.franklin.chatter {font-size:1.2em;}
    #coaster-graphic .circle-label {position:relative; float:left;}
    #coaster-graphic .circle-label.black, #coaster-graphic .circle-label.black {margin-right:5%; left:0; width:45%;}
	#coaster-graphic .circle-label.white, #coaster-graphic .circle-label.white {right:0; left:0; width:50%;}
    #coaster-graphic .circle-label h3 {/*font-size:30px; */font-family: "FranklinITCProBold", Helvetica, Arial, sans-serif;}
    #coaster-graphic .circle-label h3 span {font-size:12px; text-transform:uppercase; font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;}

    #coaster-graphic .content-panel .blurb {margin-top:0;}
	#coaster-graphic .svg-container {height:60px !important;}
	#coaster-graphic .svg-container svg {display:none !important;}
	#coaster-graphic h3.subhead {font-size:1.2em;}
	#coaster-graphic .content-panel#overall img.illo {width:30%; padding-left:20%;}
	#coaster-graphic .content-panel#retirement img.illo {width:35%; padding-left:10%;}

	#coaster-graphic .blurb p.last {display:none;}
	#coaster-graphic .circle-label h3 {font-size:20px !important;}

}


@media (max-width: 767px) {
	#water-graphic h2.postoni {font-size: 250%; margin-bottom:15px;}
	#water-graphic .umbrella {display:none;}
	#water-graphic .chart-container {width:100%; padding:0 10px;}
	#water-graphic .steps {position:relative; width:95%; left:0; top:0;}
	#water-graphic img.fallback {width:95%;}
	#water-graphic .cp {position:relative; display:block;}
	#water-graphic .steps h4, .steps p {font-size:1em;}
	#water-graphic .dot-label {display:none !important;}
	#water-graphic #line-chart {height:auto;}

	.nav-container {display:none;}
    .white path, .black path {display:none;}
    .white-circle, .black-circle {display:block;}
    .black-circle path {stroke:#7e9142; stroke-width:5px;}
    .white-circle path {stroke:#CEC9B9; stroke-width:5px;}
    .content-panel img.illo {margin:0 !important; width:45%; margin-right:5%;}
    .content-panel .blurb {width:50%;}
    .more-articles .heading {background:none !important;}
    .wpfooter {background:none !important;}
    .circle-label {display:block;}
    p.body.franklin.chatter {font-size:1.2em;}
    .circle-label {position:relative; float:left;}
    .circle-label.black, #coaster-graphic .circle-label.black {margin-right:5%; left:0; width:45%;}
	.circle-label.white, #coaster-graphic .circle-label.white {right:0; left:0; width:50%;}
    .circle-label h3 {font-size:30px; font-family: "FranklinITCProBold", Helvetica, Arial, sans-serif;}
    .circle-label h3 span {font-size:12px; text-transform:uppercase; font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;}

	.content-panel .blurb {margin-top:0;}
	.svg-container {height:60px !important;}
	.svg-container svg {display:none !important;}
	h3.subhead {font-size:1.2em;}
	.content-panel#overall img.illo {width:38%;}

	#coaster-graphic .content-panel#overall img.illo {width:30%; padding-left:20%;}
	#coaster-graphic .content-panel#retirement img.illo {width:35%; padding-left:10%;}
	#coaster-graphic .blurb p.last {display:none;}
	#coaster-graphic .circle-label h3 {font-size:20px !important;}

	#water-graphic .hidden-desktop {display:inherit !important;}
	#water-graphic p.body {font-size:15px;}
	#water-graphic h3.subhead {margin-bottom:0;}
	#water-graphic h2.postoni  {font-size:150%;}

	.iframe .nav-container {display:block; top: 29%;}
		.iframe .prev-btn {
		left:3px;
	}
	.iframe .next-btn {
		right:3px;
	}

	body.gfx {padding:0 !important;}
	body.gfx #main-container {padding:0 20px;}
	body.gfx #cmts {padding:0 20px;}
	body.gfx .more-articles.visible-phone {padding:0 20px;}

}