/*----------------------------------------*/
/*  14. Vmap CSS
/*----------------------------------------*/

.vmap, .google-map {
    width: 100%;
    height: 400px;
    
    // Responsive
    @media #{$large-mobile}{
        height: 320px;
    }
    @media #{$small-mobile}{
        height: 250px;
    }
    @media #{$extra-small-mobile}{
        height: 200px;
    }
}

/*Vmap Pin*/
.vmap-pin {
    position: relative;
    & .pin {
        width: 12px;
        height: 12px;
        background-color: $secondary;
        border: 2px solid $white;
        border-radius: 50%;
    }
    & .signal, & .signal2 {
          width: 60px;
          height: 60px;
          pointer-events: none;
          border-radius: 200px;
          position: absolute;
          left: -24px;
          top: -24px;
          opacity: 0;
          animation: vmapPinSignal cubic-bezier(0, 0.55, 0.55, 1) 2s;
          animation-fill-mode: forwards;
          animation-delay: 0.78s;
          animation-iteration-count: infinite;
          background-color: $dark;
    }
    & .signal2 {
          -webkit-animation-delay: 1s;
          animation-delay: 1s;
    }
}
@keyframes vmapPinSignal {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    1% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.1;
    }
    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    } 
}