/**
 * k77 logo (P4.5). Up/down use the SWF stage 213.75×85.5. Hover/focus
 * grows to the over canvas so both subtitle lines show. Active = down.
 * No JS.
 */

.k77-logo-figure {
  margin: 0;
}

.k77-logo {
  position: relative;
  width: calc(var(--k77-w) * 1px);
  height: calc(var(--k77-h) * 1px);
  overflow: hidden;
  cursor: pointer;
}

.k77-logo:hover,
.k77-logo:focus-visible {
  width: calc(var(--k77-over-w) * 1px);
  height: calc(var(--k77-over-h) * 1px);
  overflow: visible;
}

.k77-logo:focus-visible {
  outline: var(--focus-ring, 2px solid #ff0000);
  outline-offset: 2px;
}

.k77-logo-state {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  display: block;
  pointer-events: none;
}

.k77-logo-state--up,
.k77-logo-state--down {
  width: calc(var(--k77-w) * 1px);
  height: calc(var(--k77-h) * 1px);
}

.k77-logo-state--over {
  width: calc(var(--k77-over-w) * 1px);
  height: calc(var(--k77-over-h) * 1px);
}

.k77-logo-state--over,
.k77-logo-state--down {
  visibility: hidden;
}

.k77-logo:hover .k77-logo-state--up,
.k77-logo:focus-visible .k77-logo-state--up {
  visibility: hidden;
}

.k77-logo:hover .k77-logo-state--over,
.k77-logo:focus-visible .k77-logo-state--over {
  visibility: visible;
}

.k77-logo:active .k77-logo-state--up,
.k77-logo:active .k77-logo-state--over {
  visibility: hidden;
}

.k77-logo:active .k77-logo-state--down {
  visibility: visible;
}