@import url('https://fonts.googleapis.com/css?family=Muli:300,900');
 @import url('https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css');
 * {box-sizing: border-box;}
body{font: 300 13px/1.3 "Muli";}
.map-holder{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #FFF;}
.map-holder.error{background: #CCC;pointer-events: none;}
#map{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;-webkit-transition: all 0.3s;transition: all 0.3s;}
.map-holder.error > #map{opacity: .3;}
.map-holder.detail > #map{width: calc(100% - 300px);}
.map-holder > .items{position: fixed;top: 0;right: 0;width: 300px;bottom: 0;background: #F8F8F8;-webkit-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.3s;transition: all 0.3s;padding: 4px;overflow-y: auto;
overflow-x: hidden;
}
.map-holder > .items .item:last-child{margin-bottom: 4px;}
.map-holder > .items .item{-webkit-transition: all 0.3s;transition: all 0.3s;padding: 16px;border: 1px solid rgba(0,0,0,0);}
.map-holder > .items .item:hover, .map-holder > .items .item.hover{background: #FFF;border: 1px solid #CCC;}
.map-holder > .items .item:hover + .item{border-top: 1px solid rgba(0,0,0,0);}
.info-window{font-size: 14px;padding: 16px;}
.map-holder > .items .item > .name, .info-window > .name{font-weight: 900;text-transform: uppercase;letter-spacing: 2px;margin-bottom: 16px;display: block;}
.map-holder > .items .item > .info, .info-window > .info{position: relative;padding-left: 24px;color: #999;text-decoration: none;display: block;}
.map-holder > .items .item > .info + .info, .info-window > .info + .info{margin-top: 8px;}
.map-holder > .items .item > .info > i, .info-window > .info > i{position: absolute;left: 0;top: 0;font-size: 17px;color: #333;}
.map-holder.detail > .items{-webkit-transform: translateX(0);transform: translateX(0);-webkit-box-shadow: -5px 0px 0px 0px rgba(0,0,0,0.15);box-shadow: -5px 0px 0px 0px rgba(0,0,0,0.15);}
.map-holder > .search{position: absolute;top: 0;left: 0;z-index: 2;padding: 16px;}
.map-holder > .search > .search-holder{border: 2px solid #000;position: relative;background: #FFF;overflow: hidden;}
.map-holder > .search > .search-holder > i{position: absolute;top: 50%;right: 16px;-webkit-transform: translateY(-50%);transform: translateY(-50%);font-size: 22px;color: #999;}
.map-holder > .search > .search-holder > input{padding: 16px 80px 16px 16px;font-size: 20px;width: 100%;border: none;font-family: "Muli";}
@media only screen and (max-width: 768px){
  .map-holder.detail > #map{width: 100%;}
  .map-holder.detail > .items{display: none;}
  .map-holder > .search{right: 0;}
  .map-holder > .search > .search-holder > input{padding: 12px 60px 12px 12px;font-size: 18px;}
}