body {
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}

#root {
  height: 100%;
}

*, :after, :before {
  box-sizing: border-box;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#header {
  background-color: hsla(0,0%,100%,.95);
  box-shadow: 0 2px 4px 0 rgba(73,73,73,.1);
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}


.filter-row {
  padding: 15px 0;
  border-bottom: 1px solid #e7e7e7;
}

.listings-row {
  margin-bottom: 15px;
  border: 1px solid #e6e6e6;
  background: #fff;
  cursor: pointer;
  border-radius: 3px;
  border-radius: 3px;
}

#left {
  height: 100%;
}

#map {
  height: 100%;
}


.right-content {
  padding: 10px 10px 0;
  overflow-y: auto;
  height: 100%;
}

#right {
  box-sizing: border-box;
  width: 572px;
  padding-top: 60px;
  float: right;
  height: 100%;
  border: 1px solid #e6e6e6;
  background: rgba(252,252,253,.9);

}

.filters {
  margin: 0;
  padding: 10px 25px 0;
  border: 1px solid #e6e6e6;
  background: #fff;
  border-radius: 3px;
}

.filters-btn-toggle {
  margin-top: 90px;
  display: none;
}

.filters-close-button {
  display: none;
}

.left-hidden-shown {
  display: block;
}

.right-hidden-shown {
  display: block;
}

@media (max-width : 768px) {
  #right {
    width: 100%;
  }

  .filters-btn-toggle {
    margin-top: 90px;
    display: block;
  }

  .filters-close-button {
    display: block;
  }

  .left-hidden{
    display: none;
  }

  .right-shown {
    display: block;
  }

  .right-base {
    display: none;
  }

  .left-base {
    display: block;
  }
}