/* ==========================================================================
   HSS Combined – CSS
   Merged from: hssextdata/bmebit_hss.css
   ========================================================================== */

/* --- Showcase / Unit stage ------------------------------------------------ */
.unitstage {
  font-size: .85em;
  line-height: 1.3em;
}

.hssshowcase .invis {
  display: none;
}

/* --- Touch-point buttons -------------------------------------------------- */
.touchy .touchme {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 10px;
  z-index: 1000;
  left: 10px;
  background: #fff;
  padding: 10px;
  margin-top: -11px;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 0 10px RGB(200,16,46);
  border: 1px solid RGB(200,16,46);
  animation: pulse 2s infinite;
  box-sizing: border-box;
}

.touchy .touchme:hover {
  animation: none;
  box-shadow: none;
}

/* --- Keyframes ------------------------------------------------------------ */
@keyframes wave {
  0%   { width: 0; height: 0; opacity: 1; }
  100% { top: -11px; left: -11px; width: 44px; height: 44px; opacity: 0; }
}

@-webkit-keyframes pulse {
  0%   { -webkit-box-shadow: 0 0 0 0 rgba(200,16,46,.4); }
  70%  { -webkit-box-shadow: 0 0 0 10px rgba(200,16,46,0); }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}

@keyframes pulse {
  0%   { -moz-box-shadow: 0 0 0 0 rgba(200,16,46,.4); box-shadow: 0 0 0 0 rgba(200,16,46,.4); }
  70%  { -moz-box-shadow: 0 0 0 10px rgba(200,16,46,0); box-shadow: 0 0 0 10px rgba(200,16,46,0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(200,16,46,0); box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}

.touchme:hover {
  background: rgba(200,16,46,0.6);
}

/* --- Touch-point positions ------------------------------------------------ */
#t1  { top: 19%; left: 6%; }
#t2  { left: 11%; top: 41%; }
#t3  { top: 15%; left: 15%; }
#t4  { top: 24%; left: 27%; }
#t5  { top: 18%; left: 39%; }
#t6  { top: 36%; left: 49%; }
#t7  { top: 22%; left: 56%; }
#t8  { top: 25%; left: 69%; }
#t9  { top: 25%; left: 90%; }
#t10 { top: 19%; left: 82%; }

/* --- Touch-text tooltips -------------------------------------------------- */
.touchtext {
  display: none;
  position: absolute;
  top: 21%;
  left: 8%;
  background-color: #fff;
  padding: 10px;
  width: 20%;
  min-width: 250px;
  z-index: 1100;
  font-size: .8em;
}

#t1:hover ~ #tt1  { display: block; }
#t2:hover ~ #tt2  { display: block; left: 13%; top: 43%; }
#t3:hover ~ #tt3  { display: block; top: 18%; left: 17%; }
#t4:hover ~ #tt4  { display: block; top: 26%; left: 29%; }
#t5:hover ~ #tt5  { display: block; top: 20%; left: 41%; }
#t6:hover ~ #tt6  { display: block; top: 38%; left: 51%; }
#t7:hover ~ #tt7  { display: block; top: 24%; right: 46%; left: auto; }
#t8:hover ~ #tt8  { display: block; top: 27%; right: 33%; left: auto; }
#t9:hover ~ #tt9  { display: block; top: 27%; right: 11%; left: auto; }
#t10:hover ~ #tt10 { display: block; top: 21%; right: 19%; left: auto; }

/* --- Misc UI -------------------------------------------------------------- */
button.bigbutton {
  padding: 20px 30px;
  font-size: 1.5em;
}

.bme.hssshowcase select {
  padding: 5px 10px;
}

.bme .unitwrap img {
  max-width: 100%;
  height: auto;
}