@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300);
body,html,#map-canvas{
  margin:0
}
#map-canvas{
  position:fixed;
  height:100vh;
  width:100vw
  }
h1{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:20px 20px 0;
  margin:auto;
  height:120px;
  z-index:999;
  text-align:center;
  background-color:rgba(255,255,255,0.65)
}
.yelp-list ul,.yelp-search{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  background-color:rgba(135,206,250,0.5)
}
@media (max-width: 500px){
  .yelp-list ul, .yelp-search{
    width:50%
  }
  .yelp-search{
    width:100%
  }
}
  .yelp-list ul{
    margin-right:-100%;
    padding:60px 0 20px;
    height:100%;
    overflow-y:auto;
    z-index:9;
    -webkit-transition-property:all;
    -moz-transition-property:all;
    -o-transition-property:all;
    transition-property:all;
    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
  }
  .yelp-list ul.show{
    margin-right:0;
  }
  .yelp-list ul h3{
    font-size:24px;
    font-family:"Roboto Slab", sans-serif;
    font-weight:400;
    line-height:1.42em;
    margin-top:0;
    color:#ff4e00;
  }
  .yelp-list ul h3 span{
    border-bottom:1px solid #ff4e00
  }
  .yelp-list ul p span{
    display:block
  }
  .yelp-list ul li{
    list-style:none;
    margin:0;
    padding:30px 20px 20px;
    border-top:1px solid #ccc;
    cursor:pointer
  }
  .yelp-list ul li:first-child{
    border-top:0
  }
  .yelp-list ul li:hover{
    background-color:rgba(212, 245, 227, 0.5);
  }
  .yelp-list ul li.active{
    /*background-color:#efefef;*/
    background-color: rgba(246,216,223,0.7);
  }
  @media (max-width: 500px){
    .yelp-list ul li h3{
      font-size:18px
    }
    .yelp-list ul li p{
      font-size:14px
    }
  }
.yelp-search{
  padding:20px;
  z-index:10
  }
.yelp-search small{
  display:block;
  text-align:right;
  margin-top:10px;
  color:#ff4e00;
  cursor:pointer
}
.yelp-search small:hover{
  text-decoration:underline
}
.img-container{
  text-align:center;
  padding-top:5px
}
.img-container img{
  max-width:100%;
  height:auto;
  margin-bottom:5px
}
.info p{
  max-width:220px
}
.info .review{
  position:relative;
  border-top:1px solid #ccc;
  padding-top:10px;

}
.info .review img{
  float:left;
  display:inline-block;
  max-width:50px;
  margin-right:10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  border-radius:5px;
}
.info .review:after{
  display:inline-block;
  font-size:10px;
  color:#ff4e00;
  float:right;
  margin-top:10px;
}
.street {
  text-align: center;
}