/*body.iframe {background-color:#f9f9f9 !important;}*/
path {
    fill: none;
    stroke: none; /*same as bg*/
    /*stroke-width: 1px;*/
  }

path.gray {
	stroke:#EEEBEB;
}
#frame {fill:none;}

circle.high {fill:#506d7d;}
circle.mid-high {fill:#94ccb9;}
circle.mid-low {fill:#ffb170;}
circle.low {fill:#f07d65;}


#people path.hover {stroke-width:.7px; stroke:#000;}

#people path {stroke:none;}

#people path.high {fill:#506d7d;}
/*#people path.high.hover {stroke:#506d7d; stroke-width:1px; }
*/
#people path.mid-high {fill:#94ccb9;}
/*#people path.mid-high.hover {stroke:#94ccb9; stroke-width:1px; }
*/
#people path.mid-low {fill:#ffb170;}
/*#people path.mid-low.hover {stroke:#ffb170; stroke-width:1px;}
*/
#people path.low {fill:#f07d65;}
/*#people path.low.hover {stroke:#f07d65; stroke-width:1px;}
*/
/*#people path.hover {stroke-width:1px; stroke:#000;}
*/
#people path.clone {fill:#ccc;}

#lines {height:500px; width:100%;/* margin-top:50px;*/}
#lines svg {z-index:-10;}

#lines text {
	font-size: 14px;
	font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
	display:none;
}
#lines text.visible {
	display:block;
}

span.highlight {border-radius:3px; padding:1px 3px;}
span.highlight.high {background-color:rgba(80, 109, 125, 0.5);}
span.highlight.mid-high {background-color:rgba(148, 204, 185, 0.5);}
span.highlight.mid-low {background-color:rgba(255, 177, 112, 0.5);}
span.highlight.low {background-color:rgba(240, 125, 101, 0.5);}
span.highlight.all {background-color:rgba(179, 179, 179, 0.5);}

span.highlight.high:hover {background-color:rgba(80, 109, 125, .8);}
span.highlight.mid-high:hover {background-color:rgba(148, 204, 185, .8);}
span.highlight.mid-low:hover {background-color:rgba(255, 177, 112, .8);}
span.highlight.low:hover {background-color:rgba(240, 125, 101, .8);}
span.highlight.all:hover {background-color:rgba(111, 111, 111, 0.5);}

/*header*/
#nav .title {display: block; text-indent: 0px;}

span.nowrap {white-space: nowrap;}

/*labels*/
.txt {position:absolute; height:inherit; z-index:100; width: auto;/*display:none;*/}
.txt p {width:130px; font-size:1.2em;} 
.txt.begin {display:block; width:30%;}

/*.txt .count {display:none;}*/
.txt p {position:absolute;}	

.main-content .count {font-size:.9em; display:block; width:130px;}
.txt .group {position:absolute; background-color: none;}

/*start*/
.txt.begin p {left:-16%; line-height:1.4em; text-align:right;}
.txt p.high {top:10%;}
.txt p.mid-high {top:33%;}
.txt p.mid-low {top:56%;}
.txt p.low {top:78%;}

/*end*/
.txt.end {display:block; width:inherit; z-index:0; line-height:1.1em;}
.txt.end p {display:none; right:0; width:auto; background-color:#fff;}
.txt.end p.bach {top:0%; right:11%;}
.txt.end p.cert {top:23%; right:28.5%;}
.txt.end p.still {top:48%; right:40%;}
.txt.end p.out {top:72%; right:53%;}
.txt.end p img {float:left; padding-right:3px;}

/*counts*/
.txt.count {right:0;width:50%; z-index:-1;}
.txt.count p {display:none;}
.txt.count span {display:block; /*color:#ccc;*/ text-align: right; font-size:.9em;}
.txt.count p.bach {top:9%; right:53%;}
.txt.count p.cert {top:32%; right:75%;}
.txt.count p.still {top:57%; right:96%;}
.txt.count p.out {top:81%; right:116%;}

/*.txt p:nth-child(1) {width:25%; top:-10px;}*/

h5.franklin {font-family: FranklinITCProThin,Helvetica,Arial,sans-serif;}

p.franklin.instrux {line-height: 1.1em;
font-size: .9em;
color: #A3A1A1;
width: 171px;
position: relative;
z-index: 1000;
}
#stepper1 p.body {font-size:1.4em; line-height:1.6em;}
.content-panel {height:inherit;}
.content-panel p {position:absolute; font-size:1.3em; line-height:1.5em;}
.content-panel.start p {top:5em; left:19em; width:30em;}
/*.content-panel p a {text-transform:uppercase; color:#666; font-size:1em; cursor:pointer; text-decoration:none;}
*/
.line {display:block; position:absolute;}
.line.horiz {border-top:1px solid #ccc; height:1px;}
.line.vert {border-left:1px solid #ccc; width:1px;}
.line.horiz.s2 {width:145px; top:16.3em; left:15em;}
.line.vert.s3 {height:34em; top:1em; left:15em;}
.line.horiz.s4 {width:2em; top:1em; left:13em;}
.line.horiz.s5 {width:2em; top:35em; left:13em;}

.content-panel.out p {top:5em; left:40em; width:21em;}
.content-panel.bach p {top:10em; left:40em; width:21em;}
.content-panel.cert p {top:15em; left:36em; width:30em;}
.content-panel.still p {top:16em; left:45em; width:21em;}
.content-panel span.newP {display:block; margin-top:20px;}

p.credit {font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;}


	.next {
		font-family: FranklinITCProLight,"Franklin Gothic","ITC Franklin Gothic",Arial,sans-serif;
		font-size:16px;
		text-transform: uppercase;
		color: black;
		opacity: .6;
		margin-top:-3px;
		cursor:pointer;
		background-color:rgba(0, 0, 0, .3);
		width:48px;
		right:0;
		position:absolute;
		border-radius:3px; padding:1px 3px;
	}
	.next a {
        /*padding-right: 19px;*/
        color:black;
        display:block;
        width:inherit;
    }
    .next i {
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-left-color: #666;
        border-width: 5px;
        top: 45%;
        right: -1px;
        margin-top: -4px;
    }
    .next:hover {opacity:1;}
    .next a:hover {text-decoration:none; }
    .next a:hover i {
        border-left-color: #222;
        text-decoration:none;
    }

    .content-panel .next { color:black; position:relative; text-decoration:none; padding-right:15px; z-index:200;}
     .content-panel .next i {right:-1px;}


.stepper-nav {
	width:150px; /*when there is one more step width:195px;*/
	margin-top: 15px;
	margin:0px auto;
	display:block;
	z-index:1;
	position:relative;
}

.nav-btn {
	z-index:10;
	position: absolute;
	/*top: 35%;*/
	text-transform: uppercase;
	color: black;
	opacity: .5;
	width: 60px;
	-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: .9 !important;
}

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


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

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

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

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

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

.filter-menu li {
	float: left;
	background-color: rgba(0, 0, 0, .2);
	border-radius: 6px;
	width: 12px;
	height: 12px;
	color: rgba(0,0,0, 0);
	margin-right: 7px;
	/*cursor: pointer;*/
}

/*.filter-menu li:hover {background-color: rgba(0, 0, 0, .5);}*/

.filter-menu .active {
	background-color: rgba(0, 0, 0, .8);
}

.filter-menu li a {
	color: #fff;
	text-decoration:none;
	font-family: FranklinITCProThin,Helvetica,Arial,sans-serif;
	font-size:15px;
	line-height:25px;
	display:none;
}

/*key dots for smaller screens*/
.m-key {
	width:10px;
	height:10px;
	border-radius: 5px;
	display:none;
}

.m-key.high {background-color:#506d7d;}
.m-key.mid-high {background-color:#94ccb9;}
.m-key.mid-low {background-color:#ffb170;}
.m-key.low {background-color:#f07d65;}

.view-loading {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background: white url(http://www.washingtonpost.com/wp-srv/graphics/images/loading-90x40.gif) no-repeat center 40%;
  background-repeat: no-repeat;
  width: 100%;
  height: 980px;
}
 
/* Large desktop */
@media (min-width: 1210px) { 

 }

@media (min-width:980px) and (max-width:1210px){
	#lines {height:386px; width:100%;/* margin-top:50px;*/}
	#lines svg {margin-left:40px;}

	.line.vert.s3 {height:26em;}
	.line.horiz.s5 {top:27em;}

	.content-panel p {font-size:1.2em; line-height:1.3em;}
	.content-panel.out p {top:8em; left:30em;}
	.content-panel.bach p {left:31em; top:11em;}
	.content-panel.cert p { top: 13em; left: 31em; width: 26em; }
	.content-panel.still p { top: 13em; left: 40em; width: 17em; }

	.txt.end p.out {top: 70%; right: 49%;}
	.txt.end p.bach {top: -2%; right: 8%;}
	.txt.end p.cert { top: 21%; right: 25.5%; }
	.txt.end p.still { top: 46%; right: 37%; }
}

/* Portrait tablet to landscape and desktop */
/* start small images here */
@media (min-width: 768px) and (max-width: 980px) { 
	#lines svg, .txt.begin, .txt.end, .hidden-phone {display:none !important;}
	#lines {height:auto; margin-top:0px;}
	.content-panel {height:auto;}
	 .content-panel.start p,
	 .content-panel.out p,
	 .content-panel.bach p,
	 .content-panel.still p,
	 .content-panel.cert p {height:auto; position:relative; top:0; left:0; width:100%;}
} 

/* Landscape phone to portrait tablet */
@media (max-width: 768px) { 
	h1.postoni-italic {font-size:3em;}
	 .nav-btn {top:65%; z-index:1000000;}
	 
	 #lines {height:auto; margin-top:0px;}
	 #stepper1 {height:auto;}
	 .content-panel {height:auto;}
	 .content-panel.start p,
	 .content-panel.out p,
	 .content-panel.bach p,
	 .content-panel.still p,
	 .content-panel.cert p {height:auto; position:relative; top:0; left:0; width:100%;}
	 
	 .content-panel img {width:100%;}
	 
	 .txt {position:relative;}
	 .txt.count p,
	 .txt.count p.out,
	 .txt.count p.bach,
	 .txt.count p.still,
	 .txt.count p.cert {width:15px; top:0; left:0; right:0;}
	 #lines svg {display:none;}
}
 

 
/* Landscape phones and down- same as landscape phone to portrait tablet */
@media (max-width: 480px) { 
	

}