body {
  color:#333;
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
  font-family:"Guardian Egyptian Web";
}
h1{
  font-size:18px;
  line-height:1.1em;
  margin:0;
}
h1:before{
  width:70px;
  height:3px;
  display:block;
  content:'';
  background-color:#4BC6DF;
  margin-bottom:5px;
}
h2{
  font-size:16px;
  margin:0;
}
h3{
  margin:0;
  font-size:14px;
  font-family:"Guardian Text Sans Web";
  color:#767676;
  margin-top:0.2em;
  font-weight: normal;
}
p{
  color:#005689;
  font-weight:bold;
  margin: 0.6em 0 0;
}
.price p:after{
  content: ' avg. houseprice';
font-size: 10px;
font-family: 'Guardian Text Sans Web';
font-weight: normal;
color: #767676;
display: block;
}
.rank{
  display:none;
}
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#wrapper{
  width:auto;
  height:auto;
  margin:0;
}
#streetsContainer{
  margin-top:20px;
}
#listingsContainer{
  background:#F6f6f6;
  padding:7px;
  position: relative;
}
#rankDropdown{
  position: absolute;
  left:7px;
  width:50px;
}
#rankValue{
  background:#4bc6df;
  border-radius:100px;
  height:30px;
  padding:7px 0 0 11px;
  position: relative;
  font-size:16px;
  font-weight:bold;
  color:#fff;
  overflow:hidden;
}

#rankValue:before{
  content:"";
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  right:8px;
  top:12px;
}

.dropdown{
  border:none;
  opacity:0;
  outline:none;
  top:0;
  position: absolute;
  color:transparent;
  left:0;
  min-width:70px;
  width:140%;
  height:100%;
  background:transparent;
  box-shadow:none;
}

.dropdown option{
  background:#fff;
  opacity:1;
  color:#333;
}
.listing{
  display:none;
}
.listing.active{
  display:block;
  padding:0 44px 0 63px;
  min-height:71px;
}
#navigation{
  width:34px;
  position: absolute;
  right:7px;
  top:7px;
  height:71px;
}
#navigation button{
  width:34px;
  height:34px;
  background:#767676;
  border-radius:500px;
  border:none;
  outline:none;
  margin-bottom:3px;
}


#navigation button#prev{
  background:#767676 url(../img/arrow-left.svg) center no-repeat;
}
#navigation button#next{
  background:#767676 url(../img/arrow-right.svg) center no-repeat;
}

#navigation button:hover{
  background-color:#333 !important;
}

#streetViewImage{
  width:100%;
  height:100%;
  position: absolute;
  display:block;
  background-size:cover;
  background-position: center;
}
#streetview{
  width:100%;
  height:220px;
  line-height: 0;
  position: relative;
  background-color:#f6f6f6;
}
#streetview div{
  line-height:1.2em;
}
#streetview p{
  line-height:1.2em;
  text-align: center;
  padding-top:80px;
}
#map{
  width:100%;
  height:100px;
  position: relative;
}

@media(min-width:480px){
  .listing.active{
    padding:0 44px 0 73px;
  }
  #streetview{
    width:70%;
    display:block;
    float:left;
    height:260px;
  }
  #map{
    height:260px;
    width:30%;
    float:left;
    display: block;
  }
  #navigation{
    font-size:0;
    width:96px;
    height:44px;
  }
  #navigation button{
    width:44px;
    height:44px;
    margin-left:4px;
  }
  .listing.active{
    min-height:71px;
  }
}

@media(min-width:780px){
  h1{
    padding-left:160px;
  }
  h2{
    font-size:14px;
  }
  h3{
    font-size:12px;
  }
  p{
    font-size:14px;
    color:#005689;
    font-weight:bold;
  }
  .rank{
    display:block;
    width:22px;
    background-color:#4BC6DF;
    height:22px;
    border-radius: 20px;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    text-align: center;
    padding-top:5px;
    position: absolute;
  }
  .location,.price{
    padding-left:30px;
  }
  #wrapper{
    height:auto;
  }
  #streetsContainer{
    height:440px;
    position: relative;
  }
  #sidebar{
    width:160px;
    position: absolute;
    height:100%;
    margin:0;
    z-index:5;
  }
  #rankDropdown{
    display:none;
  }
  #navigation{
    display:none;
  }
  #listingsContainer{
    padding:0;
  }
  #listings{
    display:block;
    height:440px;
    overflow-y:scroll;
    left:0;
  }
  .listing{
    display: block;
    border-top:1px solid #DCDCDC;
    padding:5px 5px 15px;
    position: relative;
    cursor:pointer;
  }
  .listing:hover{
    background:#eaeaea;
  }
  .listing.active{
    padding:5px 5px 15px;
    min-height:0;
    background:#dcdcdc;
    border-color:#dcdcdc;
  }
  #streetviewContainer{
    height:440px;
    padding-left:160px;
    position: relative;
    z-index:3;
  }
  #streetview{
    height:100%;
    width:100%;
  }
  #map{
    position: absolute;
    right:0;
    bottom:0;
    border-top:3px solid #fff;
    border-left:3px solid #fff;
    width:180px;
    height:180px;
    z-index:5;
  }
}

@media(min-width:860px){
  h1{
    padding-left:240px;
  }
  #sidebar{
    width:240px;
  }
  #streetviewContainer{
    padding-left:240px;
  }
}