.tm-maps {
	position: relative;

	.map {
		height: 100px;
	}
}

.gmap-marker-wrap {
	padding: 20px;
}

.gmap-marker-title {
	font-size: 18px;
	line-height: 1.39;
	margin-bottom: 14px;
}

.tm-maps {
	&.marker-style-signal {

		.animated-dot {
			position: relative;
			width: 20px;
			height: 20px;
		}

		.animated-dot .middle-dot {
			width: 14px;
			height: 14px;
			border-radius: 50%;
			position: absolute;
			top: 3px;
			left: 3px;
			//transform-origin: 50% 50%;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
		}

		.animated-dot .middle-dot:after {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			content: ' ';
			background-color: #fff;
			border-radius: 50%;
			z-index: 100;
			opacity: 0;
			transform-origin: 50% 50%;
		}

		.animated-dot .signal {
			pointer-events: none;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			position: absolute;
			left: -40px;
			top: -40px;
			opacity: 0;
			animation: animationSignal cubic-bezier(0, .55, .55, 1) 2s;
			transform-origin: 50% 50%;
			animation-fill-mode: forwards;
			animation-delay: .78s;
			animation-iteration-count: infinite;
		}

		.animated-dot .signal2 {
			width: 100px;
			height: 100px;
			pointer-events: none;
			border-radius: 50%;
			position: absolute;
			left: -40px;
			top: -40px;
			opacity: 0;
			animation: animationSignal cubic-bezier(0, .55, .55, 1) 2s;
			transform-origin: 50% 50%;
			animation-fill-mode: forwards;
			animation-delay: 1.1s;
			animation-iteration-count: infinite;
		}

	}

	.gmap-info-wrapper {
		.gmap-info-template {
			display: none;
		}
	}

	.gmap-info-template-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.gmap-info-template {
		position: absolute;
		bottom: 100%;
		right: 50%;
		width: 470px;
		transform: translate(150px, 15px);
		padding-bottom: 40px;

		.gmap-info-content {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 25px 30px;
			border-radius: 5px;
			box-shadow: 0 30px 30px rgba(0, 0, 0, .12);

			&:before {
				content: '';
				position: absolute;
				bottom: 25px;
				right: 130px;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-top: 25px solid #fff;
			}
		}

		.info-image {
			flex-shrink: 0;
			margin-right: 30px;
		}

		.info-main {
			flex-grow: 1;
		}

		.gmap-marker-content {
			font-size: 14px;
			font-weight: 500;
			line-height: 1.79;

			a {
				color: #222;
			}
		}
	}
}

@keyframes animationSignal {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	1% {
		opacity: .14;
	}

	20% {
		opacity: .14;
	}

	60% {
		transform: scale(1);
		opacity: 0;
	}
}