<div class="c-search-bar">
  <div class="c-search-bar__location">Location</div>
  <div class="c-search-bar__filters">Filters</div>
  <div class="c-search-bar__advanced --is-open">Advanced</div>
</div>

<div class="l-search-results">
  <div class="l-search-results__left">
    <div class="l-search-results__controls">Result controls</div>
    <div class="l-search-results__cards">
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
      <div class="c-property-card">
        <div class="c-property-card__inner"></div>
      </div>
    </div>
  </div>
  <div class="l-search-results__right">
    <div class="c-map"></div>
  </div>
  <div class="c-map-toggle js-toggle-map">Toggle Map</div>
</div>

html,
body {
  height: 100%;
}

  *:not(path):not(g) {
    color: hsla(210, 100%, 100%, 0.9) !important;
    background: hsla(210, 100%, 50%, 0.5) !important;
    outline: solid 2px hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;
  }

.l-search-results {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  top: 60px;
 
  &__left {
    position: relative;
    overflow:hidden;
    @media only screen and (min-width: 768px) {
      max-width: 375px;
    }
    
    @media only screen and (min-width: 1790px) {
      max-width: 750px;
    }
    
    // display: flex;
    dispaly: none;
    flex: 1;
    flex-direction: column;
    background: red;
  }

  &__right {
    flex: 1;
    display: none;
    @media only screen and (min-width: 768px) {
      display: block;
    }
  }

  &__controls {
    height: 60px;
    position: fixed;
    top: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;

    &.has-shadow {
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 1) !important;
    }
  }

  &__cards {
    overflow: auto;
    margin: 60px 5px 0px;
    max-height: 100%;
    background: black;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    @supports (display: grid) {
      justify-content: unset;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, auto));
      grid-template-rows: auto;
    }
  }
}

.c-search-bar {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;

  height: 60px;
  display: flex;
  background-color: white !important;

  &__location {
    display: flex;
    align-items:center;
    padding-left: 10px;
    flex: 4;
    height: 60px;
  }

  &__filters {
    display: flex;
    align-items:center;
    padding-left: 10px;
    flex: 3;
    height: 60px;
  }

  &__advanced {
    width: 100%;
    
    @media only screen and (min-width: 992px) {
      max-width: calc(100vw - 450px);
    }
    @media only screen and (min-width: 1400px) {
      max-width: calc(100vw - 675px);
    }
    @media only screen and (min-width: 1790px) {
      max-width: calc(100vw - 1000px);
    }
    
    height: calc(100vh - 64px);
    background-color: white;
    display: none;
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 62px;

    &.is-open {
      display: block;
    }
    
    &:before {
      content: '';
      position:absolute;
      top:0;
      bottom:0;
      left:-9999px;
      right:0;
      background-color: rgba(255,255,255,.5);
      z-index: -1;
    }
  }
}

.c-property-card {
  height: 400px;

  margin: 0 0 12px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(100% * 0.25 - 1rem);
  min-width: 300px;
  max-width: 500px;

  @supports (display: grid) {
    min-width: initial;
    max-width: none;
  }

  &__inner {
    margin: 0 6px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSI+CiAgPHBhdGggZD0iTTAgNCBMMCAyOCBMMzIgMjggTDMyIDQgeiBNNCAyNCBMMTAgMTAgTDE1IDE4IEwxOCAxNCBMMjQgMjR6IE0yNSA3IEE0IDQgMCAwIDEgMjUgMTUgQTQgNCAwIDAgMSAyNSA3Ij48L3BhdGg+Cjwvc3ZnPg==")
      no-repeat center hsl(0, 0%, 80%) !important;
  }
  // padding: 0 6px;
}

.c-map {
  position: fixed;
  width: 100%;
  height: 100%;

  // delete
  // background-color:black;
  background: url("http://s3.amazonaws.com/ncc-ccn/images/map-placeholder.jpg?mtime=20170323153351") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.c-map-toggle {
  display:flex;
  @media only screen and (min-width: 768px) {
    display:none;
  }
  position:fixed;
  align-items: center;
  justify-content:center;
  width: 100%;
  height: 75px;
  background: red;
  z-index: 10;
  bottom: 0;
  align-self: bottom;
  justify-self: bottom;
}

mapState = true;
cardState = true;
map = $('.l-search-results__right'); 
cards = $('.l-search-results__left'); 




$('.js-toggle-map').click(function(){
  if(mapState) {
    map.hide();
    cards.css('display', 'flex');
    mapState = !mapState;
    cardState = !cardState;
  }
  else {
    map.css('display', 'flex');
    cards.hide();
    mapState = !mapState;
    cardState = !cardState;
  }
})