#jpmap{
  position: relative;
  width: 1100px;
  height:550px;
  background:url(img/bg_map.jpg) 0 0 no-repeat;
  /*border:1px dotted black;*/
  margin:0 auto;
  font-family: Gotham A, Gotham B, sans-serif;
}
/*event*/
@-webkit-keyframes event {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes event {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.event{opacity: 0;}
.event.active{
  /*position: absolute;
  left: 50%;
  top: 50%;
  border:1px solid green;*/
  animation-name: event;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  -webkit-animation-name: event;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
/*#zone1.active{animation-delay: 0;}
#zone2.active{animation-delay: 2.5s;}
#zone3.active{animation-delay: 5s;}*/
/*//event*/
/*bulle*/
.bulle{
  position:relative;
  width:220px;
  height:100px;
  text-transform: uppercase;
  /*border:1px dotted red;
  padding-bottom:30px;*/
}
.bulle div.title{
  font-size:15px;
  line-height: 20px;
  font-weight: 700;
}
.bulle div.info{
  font-size:10px;
  line-height: 10px;
  text-transform: lowercase;
  padding-bottom:5px;
}
.bulle p{
  font-size:11px;
  line-height: 15px;
  margin:0;
}
/*//bulle*/
/*echo animation*/
@-webkit-keyframes echo {
  0% {
    padding: 0;
    margin: 0;
    opacity: 1;
  }
  100% {
    padding: 30px;
    margin: -30px;
    opacity: 0;
  }
}
@keyframes echo {
  0% {
    padding: 0;
    margin: 0;
    opacity: 1;
  }
  100% {
    padding: 30px;
    margin: -30px;
    opacity: 0;
  }
}
.echos {
  position: relative;
  left: 50%;
  bottom: 0;
}
.firstecho:before{
  font-weight: 700;
    font-size: 18px;
    content: "|";
    position: absolute;
    left: 1px;
    top: -35px;
}
.firstecho{
  position: absolute;
  width:8px;
  height:8px;
  margin: -2px;
  background-color:#d7b433;
  border-radius: 50%;
  display: inline-block;
  padding: 0;
}
.echo {
  position: absolute;
  border: 2px solid #d7b433;
  border-radius: 50%;
  display: inline-block;
  padding: 0;

  animation-name: echo;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;

  -webkit-animation-name: echo;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
}
.echo:nth-of-type(2) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.echo:nth-of-type(3) {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
/*//echo animation*/