@import "../scss/_variable";
@import "../scss/_mixin";

.gel-google-map {
  height: 400px;
}

.gel-map-marker-title {
  margin-top: 0 !important;
}

.gel-map-marker-description {
  margin-bottom: 5px;
  width: 200px;
}

.gel-map-marker-image {
  margin-bottom: 15px;
  width: 200px;
  height: 150px;
}

.gel-map-point-animate {
  position: relative;
  left: -10px;
  top: -5px;
  width: 40px;
  height: 40px;
  &:before, &:after {
    width: 200px;
    height: 200px;
    border: 2px solid #666;
    @include border-radius(50%);
    background-clip: padding-box;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    @include transform(translate(-50%, -50%));
    animation: gel-map-animationSignal linear 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    display: block;
    content: '';
  }
  &:before {
    @include box-shadow(inset 0 0 35px 10px rgba(38, 38, 38, 0.3));
    border-color: rgba(38, 38, 38, 0.4);
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
  }
  &:after {
    @include box-shadow(inset 0 0 35px 10px #666);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  &.no-image{
    left: 0;
    top: -15px;
    width: unset;
    height: unset;
  }
}

.gel-map-point-center {
  img {
    max-width: 100%;
  }
}

@keyframes gel-map-animationSignal {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    @include transform(translate(-50%, -50%) scale(0.3));
  }
  1% {
    @include transform(translate(-50%, -50%) scale(0.32));
    -webkit-opacity: 0.1;
    -moz-opacity: 0.1;
    opacity: 0.1;
  }
  20% {
    -webkit-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
    @include transform(translate(-50%, -50%) scale(0 0.45));
  }
  60% {
    @include transform(translate(-50%, -50%) scale(0.75));
    -webkit-opacity: 0.35;
    -moz-opacity: 0.35;
    opacity: 0.35;
  }
}