/*  CSS play | Responsive image map | Stu Nicholls */
/* Image map styles */
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:visible;}
.imageMap a {display:block; position:absolute; background:#FF1F40; z-index:100; -moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px; border: 3px solid #fff;

/* dot animation */
   -webkit-animation: color_change 1s infinite alternate;
   -moz-animation: color_change 1s infinite alternate;  
   -ms-animation: color_change 1s infinite alternate;  
   -o-animation: color_change 1s infinite alternate;  
   animation: color_change 1s infinite alternate;
}

    @-webkit-keyframes color_change {
      from { background-color: #FF1F40; }
      to { background-color: #7da1c3; }
    }
    @-moz-keyframes color_change {
      from { background-color: #FF1F40; }
      to { background-color: #7da1c3; }
    }
    @-ms-keyframes color_change {
      from { background-color: #FF1F40; }
      to { background-color: #7da1c3; }
    }
    @-o-keyframes color_change {
      from { background-color: #FF1F40; }
      to { background-color: #7da1c3; }
    }
    @keyframes color_change {
      from { background-color: #FF1F40; }
      to { background-color: #7da1c3; }
    }

    
/*Pins*/
.imageMap a {width:15px; height:15px}
.imageMap a.p1 {left: 42.5%;top: 47.3%;}
.imageMap a.p2 {left: 50.1%;top: 43.4%;}
.imageMap a.p3 {left: 51.5%;top: 39.6%;}
.imageMap a.p4 {left: 47%;top: 60.6%;}
.imageMap a.p5 {left: 58%;top: 41.5%;}
.imageMap a.p6 {left: 51.8%;top: 42.5%;}
.imageMap a.p7 {left: 45.5%;top: 39.5%;}
.imageMap a.p8 {left: 49.8%;top: 40.6%;}
.imageMap a.p9 {left: 48%;top: 41.9%;}
.imageMap a.p10 {left: 52%;top: 56%;}
.imageMap a.p11 {left: 48.5%;top: 45%;}
.imageMap a.p12 {left: 45.5%;top: 51%;}
.imageMap a.p13 {left: 43.3%;top: 49.7%;}

.imageMap a + p {position:absolute; left:4%; top:6%; width:20%; color:#fff; display:none; background-color: #b7c8da; padding: 10px}
.imageMap p strong {display:block; padding:0; margin:0; font-size: 22px; font-weight: bold; color:#293052;line-height:24px}
.imageMap p span {display:block; padding:0; margin:0 0 10px 0; font-size: 14px; font-weight: bold; color:#293052;}
.imageMap p {padding:0; margin:0; font-size: 16px; line-height: 17px;}
.imageMap p img {display:block; width:100%; margin-top: 20px}
.imageMap p a.button {position: static!important; width: 57px; background:#ff931e!important; opacity:1!important; filter: alpha(opacity=100)!important; color: #fff!important; padding: 8px 10px 10px 10px}

.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover p {display:block;}
.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); transition:opacity 0.6s; border:3px solid #fff;}

	.no-touch .hotspots div .button {display: none}


@media only screen and (max-width: 1500px) {
  .imageMap a + p {left: 3%; top: 4%; width: 26%; padding: 20px}
  }

@media only screen and (max-width: 1199px) {
  .imageMap a + p {left: 3%; top: 14%; width: 22%}
  }

/*iPad Landscape*/
@media only screen and (max-width: 1040px) {
  .imageMap a + p {left: 3%; top: 4%; width: 26%; padding: 20px}
  .imageMap p strong {font-size: 20px; margin:0 0 5px 0}
  .imageMap p {font-size: 14px; line-height: 15px}
  .imageMap a.p2 {left: 50.5%; top: 44%}
  .imageMap a.p11 {left: 47.5%; top: 45.5%}
  }

@media only screen and (max-width: 959px) {
  .imageMap a + p {left: 3%; top: 14%; width: 22%}
  }