@media screen and (max-width: 640px) {
  #account #profile .name {
    max-width: 0;
    margin-left: 0em;
    opacity: 0;
  }
  #connect {
    width: calc(100% - 2em);
    padding: 1em;
    border-radius: 0;
  }


  #results-panel .content .item {
    width: 100%;
    padding-right: 0;
  }
  #results-panel .journeys .journey-item {
    min-width: 100%;
    max-width: auto;
  }

  #search-bar .query-input {
    width: 50%;
    min-width: 5em;
  }
  #search-bar .tokens .token {
    max-width: 2.5em;
    overflow-x: hidden;
    text-overflow: ellipsis;
  }


  #categories, #location-bar {
    width: 25%;
  }
  #categories {
    min-width: 7em;
  }
    #location-bar #location-suggestions {
      width: 250%;
    }

  #account #favorites {
    width: 60%;
  }
    #account #favorites.folded {
      right: -100%;
    }
    #account #favorites .item {
      width: 100%;
      margin-right: 0;
    }

}
@media screen and (max-height: 390px) {
  #connect {
    top: 0;
    bottom: 0;
    height: calc(100% - 2em);
    width: 400px;
    overflow-y: scroll;
    border-radius: 0;
  }
    #connect #sign-up h4,
    #connect #sign-in h4 {
      margin: 0;
      padding: 0.25em;
    }
    #connect #sign-up .continue,
    #connect #sign-in .continue {
      margin: 0.75em 0;
    }
}



@media screen and (max-width: 1024px) {
  #page.map #wrapper #results-panel { width: 0; overflow-x: hidden; }
  #page.map #wrapper #results-panel > .content { opacity: 0; }
  #page.map #wrapper #map-container { width: 100%; }

  #page.list #wrapper #results-panel { width: 100%; }
  #page.list #wrapper #map-container { width: 0; }

  #page.map #wrapper #view-type-switcher:after {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }


  #wrapper #results-panel {
    /*flex: 0 0 460px;*/
    width: 100%;
  }

  #wrapper #map-container {
    width: 0;
  }

  #wrapper #view-type-switcher-wrapper {
    pointer-events: auto;
  }

  #wrapper #view-type-switcher {
    right: -0.5em;
  }
}

@media screen and (min-width: 641px) {
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
  #results-panel .journeys .journey-item {
    min-width: 24%;
    max-width: calc(25% - 3em);
  }
}

@media screen and (min-width: 1600px) {
  #results-panel .item {
    width: calc(33% - 1.33em);
  }
  #results-panel .journeys .journey-item {
    min-width: 24%;
    max-width: calc(25% - 3em);
  }
}