/* FHWA IFS media queries CSS Document */

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

@media only screen and (max-width: 1200px) {
  #toolkit-options.flex-container, #p3-projects-options.flex-container {
    margin: 3% auto;
  }
  #toolkit-options .flex-item, #p3-projects-options .flex-item {
    -ms-flex: 0 1 49%;
    -webkit-box-flex: 0;
            flex: 0 1 49%;
  }
  #toolkit-options .options-content {
    padding: 4% 6% 2%;
    min-height: 150px;
  }
  #p3-projects-options .options-content, .options-content.pf-legis {
    padding: 3% 5%;
    min-height: 100px;
  }
  .slideshow-wrap {
    float: right;
    width: 100%;
    max-width: 100%;
    margin: 9px 0 4% 0;
  }
        
#global-list{
  display: none;
}

#global-list-mobile {
  display: block;
  line-height: 1.8em;
}
}

@media only screen and (max-width: 1024px) {
  #footer-wrap {
    min-height: 170px;
  }
  #fhwafooter {
    float: left;
  }
}

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

/* main content */
.left-col {
  width: 100%;
  margin: 0;
  padding-bottom: 3%;
}
 body.p1 #p1 li, body.p2 #p2 li, body.p3 #p3 li, body.p4 #p4 li, body.p5 #p5 li {
 background:none;
 background-color: #f79957;
}

/* includes sec-nav, tert-nav */
.right-col, .wide-col {
  float: left;
  width: 100%;
}

.level2 h1 .arrow {
  display: none;
}

.publication-header h2 {
  width: 100%;
}
}


@media all and (max-width: 900px) {

.logo-ifs {
    margin-top: 20px;
}

}

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

  /* FHWA header*/
  #fhwaheader .socialbtns,
  #fhwanavmenu {
    display: none;
    
  }

  .fhwacontainer img {
    height: auto;
    max-width: 85%;
    margin: 0;
  }
}

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

#toolkit-options .flex-item, #p3-projects-options .flex-item {
  -ms-flex: 0 1 99%;
  -webkit-box-flex: 0;
          flex: 0 1 99%;
}

#toolkit-options .options-content, #p3-projects-options .options-content, .options-content.pf-legis {
  padding: 6% 6% 3%;
  min-height: 0px;
}
}

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

.logo-ifs {
  display: none;
}

.logo-ifs-mobile {
  display: block;
}

header {
  height: 70px;
}

header .related-sites {
  margin: 0 0 10px;
}

header .related-sites a {
  color: #404040;
  float: none;
  clear: none;
}

#toc .category-content {
  display: none;
}

#toc .category-toggle:before {
  content: "+";
}

#toc .category-toggle.active:before {
  content: "-";
}
  #global-list-mobile p{
  display: block;
}
 header {
  display: none;
}

 table.projectprofiles td, table.projectprofiles th {
    vertical-align:top;
 padding: 10px 0px 0 0;
}

 table.projectprofiles td {
    border-bottom: 1px solid #404040;
  padding-left: 0px;
   display: block;
 width: 100%;
 float: left;
}

table.projectprofiles th {
 display: block;
 width: 100%;
 float: left;
  border-top: none; /* need all border none's to overwrite publicatiosn defined th*/
  border-bottom: none;
}
}

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

.logo-ifs-mobile {
  width: 225px;
  top: 15px;
}
}
@media only screen and (min-width: 1000px) {

#newBuildFacilities, #existingBuildFacilities {
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;
}
}