:root {
--ere-map-pin-color: var(--ere-color-accent);
}
.ere__pin-shadow {
position: absolute;
opacity: 0;
visibility: hidden;
bottom: -12.5px;
left: -90px;
}
.ere__pin-shadow:after {
display: block;
width: 25px;
height: 25px;
content: "";
-webkit-transform: rotateX(55deg);
transform: rotateX(55deg);
border-radius: 50%;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 100px 0 20px;
box-shadow: rgba(0, 0, 0, 0.5) 100px 0 20px;
}
.ere__pin-pulse {
opacity: 0;
visibility: hidden;
position: absolute;
bottom: -25px;
-webkit-transform: rotateX(55deg) translateX(-50%);
transform: rotateX(55deg) translateX(-50%);
left: 50%;
}
.ere__pin-pulse:after {
display: block;
width: 50px;
height: 50px;
content: "";
-webkit-animation: ere__pulsate 1s ease-out infinite;
animation: ere__pulsate 1s ease-out infinite;
opacity: 0;
border-radius: 50%;
-webkit-box-shadow: 0 0 6px 3px var(--ere-map-pin-color);
box-shadow: 0 0 6px 3px var(--ere-map-pin-color);
}
.ere__pin {
width: 50px;
height: 50px;
}
.ere__pin:before {
position: absolute;
display: block;
box-sizing: border-box;
width: 50px;
height: 50px;
content: "";
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
border-radius: 50% 50% 50% 0;
background: var(--ere-map-pin-color);
}
.ere__pin:after {
position: absolute;
display: block;
box-sizing: border-box;
width: 50px;
height: 50px;
content: "";
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
border: 5px solid var(--ere-map-pin-color);
border-radius: 50% 50% 50% 50%;
background: #fff;
}
.ere__marker-icon .ere__pin-shadow {
left: -110px;
}
.ere__marker-icon .ere__pin-wrap {
position: absolute;
width: 50px;
height: 50px;
bottom: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ere__marker-icon .ere__pin-wrap i {
font-size: 18px;
color: var(--ere-map-pin-color);
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.ere__marker-image .ere__pin {
display: none;
}
.ere__marker-container {
position: absolute;
cursor: pointer;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
z-index: 10;
}
.ere__marker-container.hide {
display: none;
}
.ere__marker-container.active .ere__pin-shadow,
.ere__marker-container.active .ere__pin-pulse {
opacity: 1;
visibility: visible;
}
.ere__map-popup-wrap {
overflow: hidden;
opacity: 0 !important;
visibility: hidden !important;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
padding-bottom: 15px;
width: 300px !important;
}
.ere__map-popup-wrap.show {
opacity: 1 !important;
visibility: visible !important;
}
.ere__map-popup-wrap:after {
background: linear-gradient(45deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
content: "";
height: 15px;
left: 0;
bottom: 0;
right: -15px;
margin: auto;
position: absolute;
transform: translate(-50%, -50%) rotate(-45deg);
width: 15px;
}
.ere__map-popup-wrap.ere__map-popup-google {
-webkit-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
}
.ere__map-popup-wrap > img {
position: absolute !important;
right: 5px;
top: 5px;
}
.ere__cluster > div {
border-radius: 50%;
background-color: var(--ere-map-pin-color);
}
.ere__cluster > div:after {
content: "";
display: block;
width: 100%;
height: 100%;
top: -5px;
left: -5px;
box-sizing: content-box;
position: absolute;
border: 5px solid rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
@keyframes ere__pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
}
}