#map { width: 100%; height: 700px; }
#contact-map { height: 300px; width: 100%; }

// Google map marker

.marker-style { border: 3px solid $color-default; text-align: center; width: 34px; height: 34px; border-radius: 50%; margin-left: -17px !important; margin-top: -46px !important;
  img { position: absolute !important; top: -1px !important; bottom: 0px !important; right: 0px; left: 0px; margin: auto !important; }
}
.cluster {
  > div { color: #fff !important; text-align: center !important; z-index: 3;
    &:before { @include border-radius(50%); background-color: $color-default; content: ""; height: 31px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 31px; z-index: -1; }
  }

}

// Leaflet Popup

.leaflet-div-icon { @include transition(.4s);  background-color: transparent; border: none; background-image: url("../img/marker.png");
  &:after { @include transition(.4s); @include opacity(1); @include border-radius(50%); border: 3px solid $color-default; content: ""; display: block; height: 34px; left: 3px; position: absolute; top: 3px; width: 34px; z-index: 2; }
  &:hover { top: -5px; }
  img { position: absolute; left: 0px; right: 0px; margin: auto; top: -10px; bottom: 0px; }
}

.leaflet-container { font: inherit; }
.leaflet-popup {
  .leaflet-popup-close-button { @include opacity(.8); background: #fff !important; color: $color-grey-dark !important; height: 25px !important; top: 10px !important; padding: 4px !important; right: 10px !important; width: 25px !important; z-index: 2; }
  .leaflet-popup-content-wrapper { @include border-radius(0px); @include shadow; padding: 0;
    .leaflet-popup-content { border-bottom: 5px solid #fff; border-top: 5px solid $color-default-darker; height: 206px; width: 260px; margin: 0; overflow: hidden;
      .property { margin-bottom: 0;
        &:hover {
          img { top: 0; }
        }
        .overlay { bottom: 0px; }
      }
    }
  }
}

.infobox-wrapper {
  > img { @include opacity(.5); @include transition(.4s); position: absolute !important; right: 8px; top: 13px; z-index: 2;
      &:hover { @include opacity(1); }
  }
  .infobox-inner { @include box-shadow(0px 2px 2px rgba(0,0,0,.2)); background: #fff; border-top: 6px solid $color-default-darker; font-size:12px; position: relative; margin-bottom: 50px; min-width: 200px;
    &:after { width: 0px; height: 0px; border-style: solid; border-width: 6px 6px 0 6px; border-color: #fff transparent transparent transparent; position: absolute; left: 95px; content: ""; bottom: -6px; }
    .infobox-image { width: 250px; height: auto; overflow: hidden; position: relative;
      &:after { @include image-gradient; display: block; content: ""; position: absolute; width: 100%; height: 100%; top: 0; }
      img { width: 100%; }
      .infobox-price { @include border-radius(2px); @include box-shadow(0px 1px 2px rgba(0,0,0,.3)); background-color: $color-default; color: #fff; font-size: 14px; font-weight: bold; padding: 3px 7px; position: absolute; bottom: 8px; left: 8px; z-index: 2; }
    }
    .infobox-title { font-size: 14px; font-weight: bold;
      a { color: $color-default-darker; }
    }
    .infobox-description { padding: 8px; }
    .infobox-location { @include opacity(.5); font-size: 12px; }
    .fa { color: $color-default; float: right; font-size: 18px; margin-top: 4px;  }
  }
}

.marker-hover { opacity: .5; }

// Search box

.search-box-wrapper { position: absolute; width: 100%; top: 0px;
  .search-box-inner {
    h2 { margin-bottom: 20px; }
  }
}

#submit-map { margin-bottom: 20px; }

.fade-map { @include transition(.4s); @include opacity(.3); }

.map-osm {
  #map { z-index: 0; position: relative; }
}

.marker-cluster { @include border-radius(50%); @include transition(.4s); color: #fff; width: 32px; height: 38px; background-color: $color-default; text-align: center; font-size: 14px; font-weight: bold; line-height: 38px;
  &:hover { background-color: $color-default-darker; }
}