@charset "utf-8";

/* FHWA OIPD media queries CSS Document */

/* ---------------- MEDIA QUERIES -----------------------*/

@media only screen and (max-width: 1240px) {

.logo-oipd {
  left: 2%;
}
}

@media only screen and (max-width: 1200px) {

/*.right-col {
  width: 100%;
  float: left;
}

.left-col {
  width: 100%;
  float: left;
  margin-right: 0;
  min-width: 0;
}

.left-col #sec-nav {
  width: 55%;
  float: left;
  margin-right: 5%;
}*/


/* show top btn in footer for tablet-ish and below */
#top {
  display: block;
}
}

@media only screen and (max-width: 1175px) {

/* photo headlines home*/

.flex-caption .headline-desc {
  font-size: .9em;
}
}

@media only screen and (max-width: 1024px) {

.span_1_of_4 {
  width: 49.5%;
}

#photo-feature .arrow-wht {
  bottom: -12px;
}

#footer-wrap {
	min-height: 170px;
	
}
#fhwafooter {
	float: left;
}
}

@media only screen and (max-width: 980px) {

/* main content */
.left-col {
  width: 100%;
  margin: 0;
}

/* includes secnav */
.right-col, .wide-col {
  float: left;
  width: 100%;
  padding-bottom: 30px;
}
}

@media only screen and (max-width: 800px) {

/* FHWA header*/
#fhwaheader .socialbtns {
	display: none;
}
.fhwacontainer img {
	height: auto;
	max-width: 85%;
	margin: 0;
}
}

@media only screen and (max-width: 740px) {

/* photo headlines home*/
.flex-caption, .flexslider .photo-desc, #photo-feature .arrow-wht {
  display: none;
}
}

@media only screen and (max-width: 675px) {

.flex-direction-nav a {
  display: none;
}

.center-content {
  margin: 6% 3%;
  min-height: 100px;
}

.col {
  margin: 1% 2% 1% 2%;
}

.span_1_of_4 {
  width: 96%;
}

.col:first-child {
  margin-left: 2%;
}
}

@media only screen and (max-width: 600px) {

#photo-feature .tagline {
  display: none;
}
}

@media only screen and (max-width: 435px) {
	.logo-oipd {
		width: 85%;
	}
.logo-oipd img {
	height: auto;
	max-width: 85%;
	margin: 0;
}
}

@media only screen and (min-width: 1000px) {

  #sep16LOI {
  display:block;
  width:100%;
  height:550px;
  }
  
  .hide-mobile {
    display:inline;
    display:initial;
  }
  
  .states-no-projects,
  .states-projects {
      fill: #721f5d;
  }
  
  .states-no-projects,
  .states-projects {
      stroke: #fff;
      stroke-miterlimit: 10;
      stroke-width: 2px;
  }
  
  .states-no-projects {
      opacity: 0.25;
  }
  
  .states-projects {
      opacity: 0.65;
  }
  
  .legend-box {
  fill:none;
  stroke:#721F5D;
  stroke-width:2;
  }
  
  .legend-text {
    font-size:2.1em;
    font-weight:700;
  }
  
  .legend-text-italic {
    font-size:2.1em;
    font-weight:500;
    font-style: italic;
  }
  
  .under-construction,
  .operational {
      stroke: #feffff;
      stroke-width: 3px;
  }
  
  .under-construction {
      fill: #cf212a;
  }
  
  .operational {
      fill: #721f5c;
  }
  
  .enabled {
      cursor: pointer;
      position:relative;
  }
  
  .description-box {
      border: 1px solid #731F5D;
      pointer-events: none;
      position: absolute;
      font-size: 14px;
      background: white;
      z-index: 5;
      margin: 0 auto;
      border-radius: 5px;
      box-shadow: 0 0 0 1px #eee;
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      display: none;
  }
  
  .description-box .description {
      background-color:#731F5D;
      color:#ffffff;
      padding:10px;
  }
  .description-box .description > span {
      text-transform: uppercase;
      font-size: 0.8em;
      border-radius:5px 5px 0 0 ;
  }
  
  .description-box .projectcost {
      padding:4px 10px;
  }
  .description-box .projectcost > span {
      color:#6D6E70;
      text-transform: uppercase;
      font-size: 0.8em;
  }
  
  .description-box .projectlocation {
      padding:4px 10px;
  }
  .description-box .projectlocation > span {
      color:#6D6E70;
      text-transform: uppercase;
      font-size: 0.8em;
  }
  
  .description-box.active {
      display: block;
  }
  
  .description-box:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 100%;
      width: 0;
      height: 0;
      margin-left: -10px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 20px solid #731F5D;
  }
  }