@keyframes fadeIn { 
  from { opacity:0; } 
}

html, body, main, #map {height:100%;}
body {padding-top:50px;}
main {padding-top:33px; padding-bottom:41px;}
footer {box-shadow:0 -.15rem 1rem rgba(0,0,0,.15) !important;}
.lg-backdrop {z-index:10400;}
.lg-outer {z-index:10500;}

.leaflet-container {background:repeating-linear-gradient(-45deg, #455f51, #455f51 10px, rgba(69, 95, 81, .95) 10px, rgba(69, 95, 81, .95) 20px); outline:0;}

.bg-success {background-color:#549e39 !important;}
.bg-site, .popup-poi .leaflet-popup-tip {background-color:#455f51;}
.hand {cursor:pointer;}
.popup-poi {font-size:1rem;}
.popup-poi .leaflet-popup-content {margin:0; min-width:320px;}
.popup-poi .leaflet-popup-content-wrapper {padding:0; background-color:#fff; color:#fff;} /*background-color:#e3ded1;*/

#title {top: 0;}
#mapLoading, #poiDetail {position:absolute; top:0; width:100%; height:calc(100% + 40px); z-index:9999;}
#mapLoading .fa-spin {position:absolute; top:50%; left:50%; margin-top:-20px !important; margin-left:-20px !important; color:#549e39;}
#mapMenu {bottom:82px; left:11px; z-index:9998;}
#poisMenu {bottom:50px; right:10px; height:calc(-143px + 100vh); min-width:320px; z-index:9995;}
#poisMenu .list-group {bottom:0; width:100%; max-height:100%; opacity:.95; overflow-y:auto;}
#poiDetail {height:calc(100% + 40px); background-color:rgba(0,0,0, .25);}
#poiDetail > div {margin:.5rem; width:calc(100% - 1rem); height:calc(100% - 15px); color:#fff; border-radius:12px; overflow:auto;}
#poiDetail .close {top:0; right:0; width:30px; height:30px; padding-top:5px; font:16px/14px Tahoma, Verdana, sans-serif; font-weight:normal; color:#c3c3c3; text-decoration:none; text-align:center; font-weight:bold; background-color:#fff; opacity:1; border-bottom-left-radius:12px; z-index:9999;}
#poiDetail .img-preview {margin:-45px 0 8px 8px; width:150px; border: 10px solid #fff;}

#appMenu, #map, #mapLoading, #mapMenu, #poiDetail, #poisMenu {display:none;}
#intro .img-preview {object-fit:cover; height:100%; max-height:300px;}

.pin {
  width:30px;
  height:30px;
  border-radius:50%;
  background:#89849b;
  position:absolute;
  padding-top: 5px;
  left:20px;
  top:20px;
}
/*.pin i {transform:rotate(45deg);}*/


#box-qr {top:0; left:0; background-color:rgba(0,0,0,0.6); z-index:9998;}


#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 640px;
}

#btn-scan-qr {
  cursor: pointer;
}

#btn-scan-qr img {
  height: 10em;
  padding: 15px;
  margin: 15px;
  background: white;
}

#qr-result {
  font-size: 1.2em;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  background-color: white;
}

@media (min-width: 768px) {
  #intro .img-preview {max-height:400px;}
}

@media (min-width: 992px) {
  #intro .img-preview {max-height:500px;}
}

@media (min-width: 1200px) {
  #intro .img-preview {max-height:600px;}
}