body {
	background-color: lightgray;
}

@keyframes ping {
	0%   { width: 5px; height: 5px; opacity: 1;}
    75%  { opacity: .5; }
	100% { width: 50px; height: 50px; opacity: 0;}
}

@-webkit-keyframes ping {
    0%   { width: 5px; height: 5px; opacity: 1;}
    75%  { opacity: .5; }
	100% { width: 50px; height: 50px; opacity: 0;}
}

@keyframes pulse {
	0%   { width: 8px; height: 8px; opacity: 0.2;}
    75%  { opacity: 0.8;}
	100% { width: 8px; height: 8px; opacity: 0.2;}
}

@-webkit-keyframes pulse {
   	0%   { width: 8px; height: 8px; opacity: 0.2;}
    75%  { opacity: 0.8;}
	100% { width: 8px; height: 8px; opacity: 0.2;}
}

/*map container*/
.map-container {
	margin:auto;
    /*width: 80%;*/
    height: 560px;
    /*border: 1px solid #ccc;*/
    vertical-align: center;
}

/*map-marker container*/

.map-marker:before {
	content: "";
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	animation-timing-function: ease-out;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 4.5s;
	-moz-animation-duration: 4.5s;
	animation-duration: 4.5s;

	-webkit-animation-name: ping;
	-moz-animation-name: ping;
	animation-name: ping;

	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	animation-iteration-count: 1;

	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	border: 2px solid;
	border-radius: 50%;
	/*background-color: rgba(0, 0, 128, 0.2);*/
	pointer-events: none;
}

/*map-cityMarker container*/
.map-cityMarker:before {
	content: "";
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	animation-timing-function: ease-out;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	animation-duration: 3s;

	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	animation-name: pulse;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	position: absolute;
	transform: translate3d(-50%, -50%, 0);
	/*border: 1px solid;*/
	border-radius: 50%;
	background-color: blue;
	pointer-events: none;
}

.map-marker.green:before { border-color: green; }
.map-marker.red:before { border-color: red; }
.map-marker.blue:before { border-color: blue; }
.map-marker.orange:before { border-color: orange; }
.map-marker.yellow:before { border-color: yellow; }
.map-marker.purple:before { border-color: purple; }


.copy-left {
 display: inline-block;
 text-align: right;
 margin: 0px;
 -moz-transform: scaleX(-1);
 -o-transform: scaleX(-1);
 -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
 filter: FlipH;
 -ms-filter: "FlipH";
 }