.illos {float:left; width:60%; overflow:hidden; height:500px;}
.illos img {position:absolute; top:0; /*left:0; */display:none; width:auto; max-width:none;}
.illos img.active {/*display:block;*/}


/*to start*/
.illos img.w-EbolaFigures1 {width:75%; top:0; display:block;}
.illos img.w-EbolaFigures2 {width:100%; top:-15%;}
.illos img.w-EbolaFigures4 {width:100%; top:-15%;}
.illos img.w-EbolaVirus {width:65%; left:auto; right:15%;}
.illos img.blood {width:80%; right:15%; left:none;}

.stepper-container {width:38%; float:right; background-color:#fff;}
.stepper-container {display:none;}
#ebola-bodies-graphic .intro {width:70%; right:0; top:0; z-index:100; text-align:center; padding-top:50px; height:auto;}
#ebola-bodies-graphic .intro p#blurb {font-size:1.5em; margin:0 50px 20px 50px;}
.stepper-nav ul, .stepper-nav li {list-style-type: none;}
/*hacking filter menu into line and dots*/
.stepper-nav {position:relative; height:auto; width:auto;}

.content-panel {/*min-height:370px;*/}

/*making this more specific*/
.filter-menu li {float:left; position:relative; width:17px; height:17px; margin:0 5px; border:1px solid #fff; border-radius:50%; background-color:#DCDDDE; overflow:visible;}
.filter-menu li:hover {border:1px solid gray;}
.filter-menu li.active {border: 1px solid #000; box-shadow:none !important;}
.filter-menu li a {display:none;}
.stepper-nav .next-btn {border:none; background-color:#fff; font-size:14px; font-family: "FranklinITCProThin","Helvetica","Arial",sans-serif;}
.stepper-nav .next-btn:hover {font-family: FranklinITCProBold,Helvetica,Arial,sans-serif;}

/*colors*/
.filter-menu li:nth-child(3) {background-color:#F5D523;} /*yellow*/
.filter-menu li:nth-child(4) {background-color:#EDBC24;} /*orange1*/
.filter-menu li:nth-child(5) {background-color:#DF8B27;} /*orange2*/
.filter-menu li:nth-child(6) {background-color:#D0592A;} /*red orange*/
.filter-menu li:nth-child(7) {background-color:#C1272D;} /*red*/
.filter-menu li:nth-child(8) {background-color:#911D22;} /*dark red*/
.filter-menu li:nth-child(9) {background-color:#611417;} /*maroon*/
.filter-menu li:nth-child(10) {background-color:#300A0B;} /*nearly black*/
.filter-menu li:nth-child(11) {background-color:#000; } 

.stepper-container h4 {/*font-family: "FranklinITCProThin","Helvetica","Arial",sans-serif;*/}
.stepper-container h5 {font-size:1.3em;}
.stepper-container h5.caps {text-transform:uppercase; font-family: "FranklinITCProThin","Helvetica","Arial",sans-serif; font-size:1.1em; margin:0 0 5px 0;} 
.day-labels span.days {width:15%;}
.day-labels span {width:16%; display: inline-block;}

.button { display: inline-block; padding: 8px 10px; background-color: #EEECEC; color:#000; z-index: 10; font-size: 1.4em; }
.button:hover {background-color: #ccc;}
.button a:hover, a.button:hover {text-decoration:none;}
.button a, a.button {color:#000;}
.button p {margin-bottom:0;}
.next.button {margin-top:10px;}




/*.start.button {font-size: 1.4em;}
*/
@media (max-width: 1200px) {
	#ebola-bodies-graphic .intro {width:40%;}
	#ebola-bodies-graphic .intro h1.franklin {font-size:2.5em;}
	#ebola-bodies-graphic .intro p#blurb {font-size:1.2em; margin:0 0 20px 0;}
}

/*the animations to specific locations aren't working well at this width, need a solution*/
@media (max-width: 900px) {
	#ebola-bodies-graphic {display: none;}
}
@media (max-width: 500px) {
	#ebola-bodies-graphic {display: block;}
	#ebola-bodies-graphic .intro {width:40%;}
	#ebola-bodies-graphic .intro h1.franklin {font-size:2.5em;}
	#ebola-bodies-graphic .intro p#blurb {font-size:1.2em; margin:0 0 20px 0;}
	.start.button {font-size: 1.2em;}
	.filter-menu li {width:10px; height:10px; margin:0 3px;}
	.stepper-container h5.caps {font-size:1em;}
	.content-panel {/*min-height:500px;*/}
	.illos {height:600px;}
	.illos img {top:auto !important; bottom:0 !important; width:100% !important;}
	.illos img.w-EbolaVirus {top:130px !important; bottom: auto !important;}
	.illos img.blood {top:80px !important; bottom: auto !important;}
	.illos img.blood {right: 0 !important;}

	#ebola-bodies-graphic .intro {width:100%; float:none; position: relative;}
	.illos {display:none;}
	.stepper-container {width:100%; float:none;}
	.content-panel {/*min-height:600px;*/}
	.filter-menu li {
		width: 13px;
		height: 13px;
		margin: 0 5px;
	}
	.button {text-align:center;}

	.graphic-wordpress #ebola-bodies-graphic .intro.posabs {position:relative !important;}
}

.graphic-wordpress .posabs{position:absolute}
.graphic-wordpress .posrel {position:relative;}
.graphic-wordpress .franklin{font-family:"FranklinITCProLight","Helvetica","Arial",sans-serif}.postoni,.franklin,.franklin-light{font-weight:normal}
.graphic-wordpress .stepper-container p.franklin {line-height:1.6;}
.graphic-wordpress .content-panel {/*min-height:800px;*/}
.graphic-wordpress h1.franklin{font-size:3.5em; font-family:"FranklinITCProThin",Helvetica,Arial,sans-serif;}
.graphic-wordpress h2.franklin, .graphic-wordpress h3.franklin, .graphic-wordpress h4.franklin, .graphic-wordpress h5.franklin{font-family:"FranklinITCProBold","Helvetica","Arial",sans-serif}
.graphic-wordpress p.credit.border{border:0 none;border-top:1px solid #ccc;margin-top:10px;padding-top:10px}
.graphic-wordpress p.credit {
font-family: "FranklinITCProLight","Franklin Gothic","ITC Franklin Gothic",'Arial',sans-serif;
font-size: 12px;
color: #777;
padding: 5px 0 2px;
margin: 0 0 10px 0;
line-height: 14px;
}
.graphic-wordpress ul {margin-bottom:5px; margin-left:0; font-family: "FranklinITCProLight","Helvetica","Arial",sans-serif; width:100%;}

.graphic-wordpress .franklin strong {
font-family: "FranklinITCProBold","Helvetica","Arial",sans-serif;
font-weight: normal;
}

.graphic-wordpress h5 {margin:0; padding:0;}

.graphic-wordpress .clear {
height: 0;
line-height: 0;
zoom: 1;
}