/* =================================
------------------------------------
  Map HTML Template
  Version: 1.0
 ------------------------------------
 ====================================*/




/*----------------------------------------*/
/* Map default CSS
/*----------------------------------------*/

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* .container {
  position: relative;
} */

#map-container {
  height: 0;
  padding: 56.25% 0 0 0;
  margin: auto;
  position: relative;
  border: solid 1px grey;
}

@media (min-width: 648px) {
  #map-container {
    overflow: hidden;
  }
}

#map-overview {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: rgba(0,0,0,0.8);
  background: white;
  z-index: 10;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

#map-overview.hidden {
  display: none;
}

#map-center:hover {
  color: black;
}

#map-canvas {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: width 0.4s ease-in-out;
}

@media (min-width: 648px) {
  #map-canvas.zoomed {
    width: 50%;
  }
}

#map-info {
    margin-bottom: 15px;
  }

#map-info .gp {
  background: white;
  display: none;
  position: relative;
  border: solid 1px grey;
  overflow-y: auto;
}

@media (min-width: 648px) {
  #map-info .gp {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
  }
}

#map-info .gp > * {
  padding-left: 10px;
  padding-right: 10px;
}

#map-info .gp.shown {
  display: block;
}

#map-info .gp img {
  width: 100%;
  display: block;
}