#graphic {
	position:relative;
	min-height:500px;
}

#graphic h2 {
	margin-bottom:10px;
}

.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 .active {
  background-color: rgba(52,52,52,1);
}
.filter-menu ul li {
  font-size: 16px;
  line-height: 1.8;
  margin-top: 5px;
  margin-bottom: 5px;
}
.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 {
	display:none;
}

.nav-container {
  width: 100%;
  height: 70px;
  position: absolute;
  top: 200px;
  left: 0;
  z-index: 1000;
}

.nav-btn {
  z-index: 10;
  position: absolute;
  top: 5%;
  text-transform: uppercase;
  color: black;
  width: 90px;
  opacity:.5;
  -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 p {
	font-size:1.1em;
}

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

a.nav-btn:hover {
	text-decoration: none;
}

.nav-container .next-btn {
  right: -3px;
  text-align: right;
}

.nav-container .prev-btn {
  left: 3px;
}

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

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


#stepper1 {
	margin:0px 10%;
	margin-top:30px;
	height:auto;
}

#stepper1 h4 {
	text-transform:uppercase;
}

.graphic p.credit  {
	  color: #6e6e6e;
	  font-size:1em;
	  margin-bottom:5px;
}

span.gray  {
    color: #6e6e6e;
    font-size:.8em;
    margin-bottom:5px;
}

.column.text {
	float:left;
	width:35%;
	margin-right:5%;
} 
.column.img-container {
	width:60%;
	postion:relative; 
	float:right;
}
.img-container img {
	top:0;
	right:0;
	position:absolute;
}
img.map {z-index:0;}
img.states {z-index:2;}
img.states {z-index:3; display:none;}
img.labels {z-index:4; display:none;}

.key {margin-bottom:30px;}
.key p {margin-bottom:0px;}

span.key-square {
	width:15px; 
	height:15px; 
	margin-right:10px;
	display:inline-block;
}
span.key-square.g100 {background-color:#EFEEEA;}
span.key-square.g80 {background-color:#D1D1CD;}
span.key-square.g60 {background-color:#A7A8A3;}
span.key-square.g40 {background-color:#80807C;}


.orange {background-color:#f68b28;}

.locator .text {width:49%; float:left; margin-right:2%;}
.locator .inset {width:49%; float:left; margin-bottom:2%;}

.side-graphic {padding:20px 0;}


.nobreak {white-space: nowrap;}

@media (min-width: 1200px) {

}
@media (max-width: 979px) {
	.column.img-container {width:100%; min-height:400px; float:none;}
	.column.text {width:100%; float:none; margin-left:10px;}
}
@media (max-width: 700px) {
	.column.img-container {min-height:330px;}
}
@media (max-width: 600px) {
	#graphic h2 {font-size:25px;}
	#graphic h4 {font-size:130%;}
	#graphic p {font-size:16px;}
	.column.text {margin-left:20px; margin-right:10px;}
	.column.img-container {min-height:280px;}
}
@media (max-width: 500px) {
	.column.img-container {min-height:220px;}
}
@media (max-width: 400px) {
	.column.img-container {min-height:200px;}
}