#map::before {
  display: var(--ripple-visible);
  pointer-events: none;
    opacity: 0;
    position: absolute;
    top: calc(100% * var(--ripple-y));
    left: calc(100% * var(--ripple-x));
    transform: translate(-50%, -50%) scale(var(--ripple-scale));
    padding: 50%;
    border-radius: 50%;
    /*background-color: #fff;*/
    /*background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 42.19%, #F2F2F2 94.79%, #FFFFFF 100%);*/
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 42.19%, #FFFFFF 94.79%, #FFFFFF 100%);
    content: '';
    transition: transform 1s, opacity 1s;
    z-index: 100;
}
#map:active::before {
  display: var(--ripple-visible);
  pointer-events: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    transition: 0s;
    /*transition-delay: 1.2s;*/

}
#map::after {
  display: var(--ripple-visible);
  pointer-events: none;
    opacity: 0;
    position: absolute;
    top: calc(100% * var(--ripple-y));
    left: calc(100% * var(--ripple-x));
    transform: translate(-50%, -50%) scale(var(--ripple-scale));
    padding: 50%;
    border-radius: 50%;
    /*background-color: #ffffff;*/
    /*background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 42.19%, #F2F2F2 94.79%, #FFFFFF 100%);*/
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 42.19%, #FFFFFF 94.79%, #FFFFFF 100%);
    content: '';
    transition: transform 2s, opacity 2s;
    z-index: 100;
}
#map:active::after {
  display: var(--ripple-visible);
  pointer-events: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    transition: 0s;
}