@charset "utf-8";

@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


#places-map { background: url('/images/museum/contents/museum_intro_bg.jpg') no-repeat; padding: 3.25em 1.5625em 2.5em; position: relative;}

#places-map img { height: auto; position: relative; width: 100%;  z-index: 1;}

#places-map .map { position: relative; max-width: 56.4375em;  margin-left: auto;  margin-right: auto;}
#places-map .map-pins {  position: absolute;  height: 100%;  top: 0;  left: 0;  width: 100%;}
#places-map .map-location-marker { background: url('https://jeffbridgforth.com/codepen/map-pin.png') no-repeat; cursor: pointer; position: absolute; height: 2.3em; margin-top: -1.875em;
										margin-left: -0.7857142857em;  width: 1.64em;  z-index: 3;}

#places-map .marker1 {left: 72.5%; top: 5%;}
#places-map .marker2 {left: 13%; top: 29%; -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
#places-map .marker3 { left: 29.5%; bottom: 21.5%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
#places-map .marker4 {left: 64%; top: 42%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
#places-map .marker5 { left: 17.5%; top: 50%; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
#places-map .marker6 { left: 45.5%;  top: 20%;  -webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
#places-map .marker7 {  left: 52%;  top: 18%;  -webkit-animation-delay: 0.5s;  animation-delay: 0.5s;}
#places-map .marker8 { left: 79%; bottom: 42%;  -webkit-animation-delay: 0.7s;  animation-delay: 0.7s;}
#places-map .marker9 { left: 84.5%;  top: 48%;  -webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
#places-map .marker10 {  bottom: 14%;  right: 7.5%;  -webkit-animation-delay: 0.9s;  animation-delay: 0.9s;}
#places-map .map-location-marker:after {  -webkit-animation: pulsate 2s ease-in-out infinite;  -moz-animation: pulsate 2s ease-in-out infinite;  animation: pulsate 2s ease-in-out infinite;
  background: transparent;  border: 2px solid #fff;  border-radius: 30px;  content: "";  display: block;  height: 31px;  left: -7px;  opacity: 0;  position: absolute;  top: -8px;  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;  -o-transition: all 0.25s linear;  transition: all 0.25s linear;  width: 31px;  z-index: 2;}

#page-places {position: relative;}

#map-info {background: #000; color: #fff; position: absolute; top: -1.5625em; left: 50%; margin-left: -7.8125em; padding: 1.125em; width: 15.625em; z-index: 10;}
#map-info .close-btn { background: url('http://jeffbridgforth.com/codepen//close-btn.png') no-repeat;  cursor: pointer; display: block; height: 0.9em; width: 0.9em; position: absolute; right: 1.125em; top: 1.125em;}
@media (min-width: 30em) {
	#map-info {top: 50%; margin-top: -8.875em;}
}
@media (min-width: 60em) {
	#map-info {margin-left: -8.875em; width: 17.75em;}
}
@media (min-width: 48em) {
	#map-info {margin-left: 0; margin-top: 0; }
	#map-info:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width:6px 8px 6px 0; border-color: transparent #000 transparent transparent; position: absolute; left: -8px; }
	#map-info .map_tit{font-size:18px}
	#map-info.marker1 {left: 76%; top:0;}
	#map-info.marker2 { left: 16%;   top: 21.5%; }
	#map-info.argentina {left: 32.5%; bottom: 0; top: auto;}
	#map-info.argentina:before {top: 152px;}
	#map-info.costa-rica {bottom: 5%; left: 20%; top: auto;}
	#map-info.costa-rica:before {top: 45px;}
	#map-info.peterborough {top: 12.5%; left: 48%;}
	#map-info.vilnius {top: 10.5%; left: 54.5%;}
	#map-info.dubai { top: 35%; left: 66.5%;}
	#map-info.singapore {left: auto; top: auto; bottom: 0%; right: 24%; }
	#map-info.singapore:before { border-width: 13px 0 13px 16px; border-color: transparent transparent transparent #000; left: auto; right: -16px; top: 55px; }
	#map-info.manila { left: auto; top: auto; bottom: 1.75%; right: 18.5%; }
	#map-info.manila:before { border-width: 13px 0 13px 16px; border-color: transparent transparent transparent #000; left: auto; right: -16px;}
	#map-info.sydney { left: auto; top: auto; right: 11.5%; bottom: 0;}
	#map-info.sydney:before {border-width: 13px 0 13px 16px;  border-color: transparent transparent transparent #000; left: auto; right: -16px; bottom: 50px;}
}
#map-info a {color: #ffdf1c; display: block; font-size:13px; float: right; margin-top: 0.6666666667em; }
#map-info img { height: auto; max-width: 100%;}