/* FHWA IFS media queries CSS Document */

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

@media all and (min-width: 1271px) {
  #mobBtn {
    display: none;
  }
}

@media all and (max-width: 1270px) {
  #global-nav {
    top: 8px;
    right: 65px;
  }

  #global-nav .global-btn.menu {
    display: none;
  }

  #search {
    margin-right: 66px;
  }

    .grid3col {
        grid-template-columns: auto;
    }
    .grid3col .col3 {
        width: auto;
    }
}

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

  /* reduces width on left-side buttons */
	.small_button a {
		width: 150px;
	}
}


@media only screen and (max-width: 1120px) {
  #ctip-fy-programs .flex-item {
    -ms-flex: 0 1 100%;
    -webkit-box-flex: 0;
            flex: 0 1 100%;
  }

  #ctip-fy-programs .ctip-fy-content {
    padding: 3% 3%;
    min-height: 155px;
  }
}

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

  #fhwafooter {
    float: left;
  }

  .flex-item {
    -ms-flex: 0 1 49%;
    -webkit-box-flex: 0;
            flex: 0 1 49%;
  }
}

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

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

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

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

  .level2 h1 .arrow {
    display: none;
  }

  /* returns width on left-side buttons */
	.small_button a {
		width: 230px;
	}
}

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

@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: 767px) {

  .callout-right,
  .callout-right-sm-txt {
    width: 100%;
    margin: 1% 0 2% 0;
  }

  #three-across .flex-item {
    -ms-flex: 0 1 49%;
    -webkit-box-flex: 0;
            flex: 0 1 49%;
  }
}

@media only screen and (max-width: 569px) {
  .img-in-copy {
    display: block;
    position: relative;
    margin: 8px 8px 8px auto;
    padding: 0;
    width: 100%;
    float: left;
  }

  .img-in-copy img {
    width: 100%;
    height: auto;
  }

  /*.breadcrumb a{
 margin: 0 3px;
}*/
  .flex-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-align: stretch;
    -webkit-box-align: stretch;
            align-items: stretch;
    width: 100%;
  }

  .flex-item {
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
            order: 0;
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
            flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin: 0 0 16px 0;
  }

  #three-across .flex-item {
    -ms-flex: 0 1 100%;
    -webkit-box-flex: 0;
            flex: 0 1 100%;
  }

  .agency-thumb {
    padding: 15px 0;
  }

  #ctip-fy-programs .button-list .flex-item {
    -ms-flex: 0 1 100%;
    -webkit-box-flex: 0;
            flex: 0 1 100%;
  }

  #ctip-fy-programs .btn-external {
    width: 90%;
    padding: 1% 5%;
    border-right: none;
  }

  /*---- EQUIPMENT LOANS-----*/
  .equip-thumb {
    width: 100%;
    padding: 0 0 15px;
  }

  .equip-container {
    width: 100%;
  }

  .equip-desc {
    display: inline-block;
    float: left;
    width: 100%;
  }
}

@media all and (max-width: 380px) {
  #search {
    margin-right: 2%;
  }
}

@media only screen and (min-width: 700px) {
  #ltapMap {
    position: relative;
  }

  #ltapCenters {
    display: block;
    width: 100%;
    height: 450px;
  }

  .hide-mobile {
    display: initial;
    display: block;
  }

  .state-center polygon,
  .state-center path {
    fill: #d3d3d3;
    opacity: 0.45;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
  }

  .state-center rect {
    fill: #d3d3d3;
    opacity: 1;
  }

  .state-center:hover polygon,
  .state-center:hover path,
  .state-center:focus path,
  .state-center:focus polygon {
    opacity: .95 !important;
  }

  .state-center text {
    font-family: "Roboto", Arial, sans-serif;
    font-size: 32px;
    fill: #157a34;
    opacity: 1 !important;
  }

  .state-center:hover text {
    fill: #7dab1b !important;
  }

  .state-center.text-inner.active>a>text {
    font-weight: 400;
    fill: #8cb338;
  }

  .enabled {
    cursor: pointer;
    position: relative;
  }

  #ltapMap *:focus {
    outline: transparent hidden 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }

  *:focus path,
  *:focus polygon {
    fill: #d3d3d3;
    opacity: 0.45 !important;
  }

  .accessible-link text {
    fill: transparent;
    display: none;
  }

  .accessible-link:focus text {
    fill: #157a34 !important;
    display: block;
    font-size: 34px;
    font-style: italic;
    outline-color: #157a34;
    outline-style: dashed;
    outline-width: 4px;
  }

  .description-box {
    border: 1px solid #fff;
    font-size: 14px;
    background: white;
    position: absolute;
    bottom: -40px;
    left: 0;
    display: none;
    width: 280px;
    padding: 2px;
    z-index: 99;
    -webkit-box-shadow: 4px 4px 31px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 4px 4px 31px 0px rgba(0, 0, 0, 0.25);
  }

  .description-box #title {
    background: #69a739;
    background: -webkit-gradient(linear, left top, right top, from(#69a739), to(#157a34));
    background: linear-gradient(to right, #69a739 0%, #157a34 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 10px;
  }

  .description-box #title>p {
    text-transform: uppercase;
    font-size: 1em;
    padding: 0;
    margin: 0;
  }

  .description-box #contact p {
    font-size: 1em;
    padding: 2px 9px;
    margin: 0;
  }
  
    .description-box #email p {
    font-size: 1em;
    padding: 2px 9px;
    margin: 0;
  }

  .description-box #region p {
    font-size: 1em;
    padding: 8px 9px 2px;
    margin: 0;
  }

  .description-box #website {
    font-size: 1em;
    padding: 2px 9px 10px;
    margin: 0;
  }

  .description-box.active {
    display: block;
  }
}

@media all and (min-width: 800px) {
  .gadget-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    margin-top: 15px;
  }

  .gadget-flex1,
  .gadget-flex2,
  .gadget-flex3,
  .gadget-flex4,
  .gadget-flex5,
  .gadget-flex6,
  .gadget-flex7,
  .gadget-flex8,
  .gadget-flex9,
  .gadget-flex10,
  .gadget-flex11,
  .gadget-flex12 {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  .gadget-flex1 {
    -ms-flex-preferred-size: 6.33333333%;
        flex-basis: 6.33333333%;
    max-width: 6.33333333%;
  }

  .gadget-flex2 {
    -ms-flex-preferred-size: 14.66666667%;
        flex-basis: 14.66666667%;
    max-width: 14.66666667%;
  }

  .gadget-flex3 {
    -ms-flex-preferred-size: 23%;
        flex-basis: 23%;
    max-width: 23%;
  }

  .gadget-flex4 {
    -ms-flex-preferred-size: 31.33333333%;
        flex-basis: 31.33333333%;
    max-width: 31.33333333%;
  }

  .gadget-flex5 {
    -ms-flex-preferred-size: 39.66666667%;
        flex-basis: 39.66666667%;
    max-width: 39.66666667%;
  }

  .gadget-flex6 {
    -ms-flex-preferred-size: 48%;
        flex-basis: 48%;
    max-width: 48%;
  }

  .gadget-flex7 {
    -ms-flex-preferred-size: 56.33333333%;
        flex-basis: 56.33333333%;
    max-width: 56.33333333%;
  }

  .gadget-flex8 {
    -ms-flex-preferred-size: 64.66666667%;
        flex-basis: 64.66666667%;
    max-width: 64.66666667%;
  }

  .gadget-flex9 {
    -ms-flex-preferred-size: 73%;
        flex-basis: 73%;
    max-width: 73%;
  }

  .gadget-flex10 {
    -ms-flex-preferred-size: 81.33333333%;
        flex-basis: 81.33333333%;
    max-width: 81.33333333%;
  }

  .gadget-flex11 {
    -ms-flex-preferred-size: 89.66666667%;
        flex-basis: 89.66666667%;
    max-width: 89.66666667%;
  }

  .gadget-flex12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
.flex-item-half {
    -ms-flex: 0 1 49%;
    -webkit-box-flex: 0;
            flex: 0 1 49%;
  }
  .participants .gadget-flex6:not(:last-of-type),
  .technical-assistance .gadget-flex5:not(:last-of-type) {
    border-right:1px solid #cccccc;
  }
}

/* --------- GRID FEATURES FLEXBOX---------*/