/*
  +------------------------------------------------+
  |     Map generation with mapbox - Style CSS     |
  +------------------------------------------------+
*/

.location-map {margin-top:25px;}
.location-map .map-container {position:relative;z-index: 0;}

.location-map .map-obj {width:100%;position: absolute;top: 0;left: 0;height: 100%;z-index: 1;}
.location-map .map-obj .mapboxgl-canvas {left:50%;top:50%;transform:translate3d(-50%,-50%,0);}
.location-map .map-obj .mapboxgl-ctrl {display:none!important;}
.location-map .marker.active {z-index:1;}
.location-map .marker {visibility:hidden;}
.location-map .marker > * {visibility:visible;}
.location-map .marker .title {font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:1px;padding-bottom:10px;color: #fff;}
.location-map .marker .address {font-size:12px;letter-spacing:1px;font-weight: 500;color: #fff;}
.location-map .marker .triangle {position:absolute;top:calc(100% - 1px);left:50%;transform:translate3d(-50%,0,0);color: #000;border-left: 10px solid transparent;border-top: 12px solid;border-right: 10px solid transparent;border-bottom: 10px solid transparent;}

.location-map .marker .glow {display:none;animation: pulse 2s ease forwards infinite;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);width: 180px;height: 180px;z-index:-1;border-radius:50%;transform-origin:center;}
.location-map .marker:not(.active) .glow {display:none;}
.location-map .marker .marker-icons {position:relative;}
.location-map .marker .marker-icons .marker-icon {font-size:53px}
.location-map .marker .marker-icons .icon {position:absolute;top: 12px;left:50%;transform:translate3d(-50%,0,0);font-size: 17px;}
.location-map .marker .marker-icons .icon > * {transition:color 0.5s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;}

.location-map .marker .marker-icons {position:relative;transform: translate3d(0,-22px,0);cursor:pointer;transition:opacity 0.4s ease, filter 0.4s ease;}

.location-map .marker[data-type="school"] .icon {font-size:23px;}

.location-map .marker .grid {position:absolute;left:50%;bottom: 100%;margin-bottom: 40px;background-color: #000;transform:translate3d(-50%,15px,0);visibility:hidden!important;opacity:0;padding: 10px 15px;min-width: 220px;border-radius: 3px;transition:opacity 0s ease, visibility 0s ease, transform 0s ease;}
.location-map .marker .grid > * {display:block;text-align:center;color: #FFF;line-height:1.3;}
.location-map .marker.active .grid {transform:translate3d(-50%,0,0);visibility:visible!important;opacity:1;transition:opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;}
.location-map .marker .grid .title {font-size:10px;letter-spacing:1px;padding-bottom: 0px;line-height:1.2;}
.location-map .marker .grid .address {font-size:10px;font-weight:400;padding-top: 10px;}
.location-map .marker .grid .triangle {color: #000;}

.location-map .marker.near-top-limit .grid {bottom:-100%;margin-bottom: 0;transform:translate3d(-50%,0,0);box-shadow: 4px 4px 0 0 rgb(0 0 0 / 10%);}
.location-map .marker.near-top-limit.active .grid {transform:translate3d(-50%,19px,0);visibility:visible;opacity:1;}
.location-map .marker.near-top-limit .triangle {top:unset;bottom:calc(100% - 1px);border-top: 10px solid transparent;border-bottom: 12px solid;}

.location-map .marker .marker-icons:hover,
.location-map .marker.active .marker-icons {filter:brightness(1.3);}

.location-map .map-btns {display:flex;}
.location-map .map-btns .address {display:flex;align-items:center;background-color:#ffffff;padding: 17px 25px;color: rgba(0,0,0,0.12);border-top: 2px solid;border-left: 2px solid;border-bottom: 2px solid;font-size: 0;line-height: 1;}
.location-map .map-btns .address .text {font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:1px;color: #000000;}
.location-map .map-btns .btn {margin-bottom:0;padding: 17px 25px;border: 2px solid transparent;}
.location-map .map-btns .btn .text {letter-spacing:1px;}
.location-map .map-btns .btn .icon {font-size:11px;}