div.inrix-traffic {
  font-family: Arial, Helvetica, sans-serif; }
  div.inrix-traffic > div {
    color: #fff;
    /*
    &:nth-child(1) {
        background: #fff;
    }
    */ }
    div.inrix-traffic > div:nth-child(even) {
      background: #73c26b; }
    div.inrix-traffic > div:nth-child(odd) {
      background: #666; }
    div.inrix-traffic > div h4 {
      color: #000;
      margin: 0;
      padding: 15px 0; }
    div.inrix-traffic > div.row {
      padding-top: 8px;
      padding-bottom: 8px; }
  div.inrix-traffic .location {
    font-weight: bold;
    padding-left: 15px; }
    @media screen and (max-width: 767px) {
      div.inrix-traffic .location {
        font-size: 24px;
        line-height: 24px;
        padding-bottom: 15px; } }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      div.inrix-traffic .location {
        font-size: 26px;
        line-height: 32px; } }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      div.inrix-traffic .location {
        font-size: 28px;
        line-height: 48px; } }
    @media screen and (min-width: 1200px) {
      div.inrix-traffic .location {
        font-size: 30px;
        line-height: 48px; } }
  div.inrix-traffic .route > div {
    display: inline-block; }
    @media screen and (min-width: 768px) {
      div.inrix-traffic .route > div {
        float: left; } }
    div.inrix-traffic .route > div:last-child {
      padding-right: 0; }
    div.inrix-traffic .route > div .road {
      background-color: transparent;
      background-size: cover;
      background-repeat: no-repeat;
      color: #fff;
      display: inline-block;
      float: left;
      margin-right: 8px; }
      @media screen and (max-width: 767px) {
        div.inrix-traffic .route > div .road {
          font-size: 8px;
          line-height: 24px; } }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        div.inrix-traffic .route > div .road {
          font-size: 11px;
          line-height: 32px; } }
      @media screen and (min-width: 992px) and (max-width: 1199px) {
        div.inrix-traffic .route > div .road {
          font-size: 16px;
          line-height: 48px; } }
      @media screen and (min-width: 1200px) {
        div.inrix-traffic .route > div .road {
          font-size: 17px;
          line-height: 48px; } }
      div.inrix-traffic .route > div .road.sr {
        background-image: url("images/state.png");
        color: #000; }
        @media screen and (max-width: 767px) {
          div.inrix-traffic .route > div .road.sr {
            line-height: 8px;
            font-size: 8px;
            padding-top: 8px; } }
        @media screen and (min-width: 768px) and (max-width: 991px) {
          div.inrix-traffic .route > div .road.sr {
            line-height: 11px;
            font-size: 11px;
            padding-top: 9px; } }
        @media screen and (min-width: 992px) and (max-width: 1199px) {
          div.inrix-traffic .route > div .road.sr {
            line-height: 16px;
            font-size: 16px;
            padding-top: 16px; } }
        @media screen and (min-width: 1200px) {
          div.inrix-traffic .route > div .road.sr {
            line-height: 17px;
            font-size: 17px;
            padding-top: 16px; } }
      div.inrix-traffic .route > div .road.i {
        background-image: url("images/interstate.png"); }
        @media screen and (max-width: 767px) {
          div.inrix-traffic .route > div .road.i {
            line-height: 9px;
            font-size: 9px;
            padding-top: 10px; } }
        @media screen and (min-width: 768px) and (max-width: 991px) {
          div.inrix-traffic .route > div .road.i {
            line-height: 11px;
            font-size: 11px;
            padding-top: 13px; } }
        @media screen and (min-width: 992px) and (max-width: 1199px) {
          div.inrix-traffic .route > div .road.i {
            line-height: 16px;
            font-size: 16px;
            padding-top: 20px; } }
        @media screen and (min-width: 1200px) {
          div.inrix-traffic .route > div .road.i {
            line-height: 17px;
            font-size: 17px;
            padding-top: 19px; } }
      div.inrix-traffic .route > div .road.sr, div.inrix-traffic .route > div .road.i {
        text-align: center; }
        @media screen and (max-width: 767px) {
          div.inrix-traffic .route > div .road.sr, div.inrix-traffic .route > div .road.i {
            height: 24px;
            width: 24px; } }
        @media screen and (min-width: 768px) and (max-width: 991px) {
          div.inrix-traffic .route > div .road.sr, div.inrix-traffic .route > div .road.i {
            height: 32px;
            width: 32px; } }
        @media screen and (min-width: 992px) and (max-width: 1199px) {
          div.inrix-traffic .route > div .road.sr, div.inrix-traffic .route > div .road.i {
            height: 48px;
            width: 48px; } }
        @media screen and (min-width: 1200px) {
          div.inrix-traffic .route > div .road.sr, div.inrix-traffic .route > div .road.i {
            height: 48px;
            width: 48px; } }
    div.inrix-traffic .route > div.minutes {
      font-weight: normal; }
      @media screen and (max-width: 767px) {
        div.inrix-traffic .route > div.minutes {
          line-height: 24px;
          font-size: 9.6px;
          padding-top: 15px;
          width: 100%; } }
      @media screen and (min-width: 768px) and (max-width: 991px) {
        div.inrix-traffic .route > div.minutes {
          line-height: 32px;
          font-size: 12.8px; } }
      @media screen and (min-width: 992px) and (max-width: 1199px) {
        div.inrix-traffic .route > div.minutes {
          line-height: 48px;
          font-size: 19.2px; } }
      @media screen and (min-width: 1200px) {
        div.inrix-traffic .route > div.minutes {
          line-height: 48px;
          font-size: 19.2px; } }
      @media screen and (min-width: 768px) {
        div.inrix-traffic .route > div.minutes {
          float: left; } }

/*# sourceMappingURL=inrix-traffic.css.map */