/*-------------------------------------------------*/
/* BREAK POINT */
/*-------------------------------------------------*/
/* SMALLEST */
/*@media all and (min-width: 400px) {*/
/* The DIVs that will contain several definitions for each frame */
[hotspot-definitions] {
  display: none;
  visibility: hidden;
}
/* The actual hotspot the user hovers over */
.hotspot {
  display: none;
  visibility: hidden;
}
/*-------------------------------------------------*/
/* BREAK POINT */
/*-------------------------------------------------*/
/* MEDIUM */
@media all and (min-width: 760px) {
  /* The frame DIV that will be populated with hotspots, i.e. the DIV class=w22 around the screenshot image */
  [hotspot-frame] {
    /* nothing so far */
  }
  /* The DIVs that will contain several definitions for each frame */
  [hotspot-definitions] {
    display: none;
    visibility: hidden;
  }
  /* The actual hotspot the user hovers over */
  .hotspot {
    display: inherit;
    visibility: inherit;
    position: absolute;
    /*
			z-index: 500; not sure why this was here, seems to be working fine without */
    /*Remember to adjust border radius and margin-left/margin-top accordingly */
    width: 25px;
    height: 25px;
    /* Make 'em round, bruh 
			-webkit-border-radius: 	15px; 	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 15px;
    /* Firefox 1-3.6 */
    border-radius: 15px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
    margin: 0;
    border: 3px solid #333;
    padding: 0;
    /* Shifts the center of the dots to where the action is */
    margin-left: -8px;
    margin-top: -8px;
    background-color: #FFF;
    opacity: 0.95;
    transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
    cursor: pointer;
    -webkit-box-shadow: 0 0 10px 0 rgba(255, 241, 205, 0.4);
    -moz-box-shadow: 0 0 10px 0 rgba(255, 241, 205, 0.4);
    box-shadow: 0 0 10px 0 rgba(255, 241, 205, 0.4);
  }
  .hotspot:hover {
    opacity: 1;
  }
  /* The "bubble" that is displayed if the user clicks on/hovers over a hotspot */
  .hotspot-info {
    position: absolute;
    z-index: 1000;
    display: table;
    -webkit-border-radius: 6px;
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 6px;
    /* Firefox 1-3.6 */
    border-radius: 6px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
    margin: 0;
    border: 2px solid #111;
    padding: 0;
    color: #FFF;
    background-color: #222;
    opacity: 0.9;
    transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
    -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.7);
  }
  .hotspot-info > div {
    display: table-cell;
    vertical-align: top;
    text-align: left;
    margin: 0;
    border: 0;
    padding: 20px;
  }
  .hotspot-info > div > p,
  .hotspot-info > div > ul,
  .hotspot-info > div > ol {
    font-size: 18px;
  }
  .hotspot-info ul,
  .hotspot-info ol {
    padding: 0 0 0 15px;
    margin: 10px 0;
  }
  .hotspot-info ul li,
  .hotspot-info ol li {
    margin: 0 0 10px 0;
  }
  /* mp turned off */
  /* rc turned back on, urs said evaluate if keep or drop */
  @keyframes heartbeat_animation {
    0% {
      transform: scale(1);
    }
    2.5% {
      transform: scale(1.25);
    }
    5% {
      transform: scale(1);
    }
    7.5% {
      transform: scale(0.75);
    }
    10% {
      transform: scale(1);
    }
  }
  /*.heartbeat, [hotspot-id]:hover*/
  [hotspot-id] {
    /*	-webkit-box-shadow:	0px 0px 20px #f00;
			-moz-box-shadow:	0px 0px 20px #f00;
			box-shadow:			0px 0px 20px #f00;
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=0, Color='#FF0000')";
			filter: 	 progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=0, Color='#FF0000');	*/
    /* mp turned off */
    /* rc turned back on, urs said evaluate if keep or drop */
    animation-name: heartbeat_animation;
    animation-duration: 9000ms;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
}